qms-angular 2.0.1 → 2.0.2

package/fesm2022/qms-angular.mjs

@@ -8874,11 +8874,11 @@ class RelatedPopupComponent {
         this.isLoadingVideoFile = false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RelatedPopupComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: TranslateLibraryService }, { token: i1$2.MatDialogRef }, { token: QMSRelatedGlobalService }, { token: i4.MatIconRegistry }, { token: i1$3.DomSanitizer }, { token: QMSIconRegistryService }, { token: i0.ElementRef }, { token: QMSCKEditorUploadService }, { token: i1$2.MatDialog }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: RelatedPopupComponent, selector: "qms-related-popup", host: { listeners: { "window:message": "onMessage($event)" } }, viewQueries: [{ propertyName: "autoComplete", first: true, predicate: ["autoCompleteInputSearch"], descendants: true, read: MatAutocompleteTrigger, static: true }, { propertyName: "dataTrees", predicate: TreeComponent, descendants: true }], ngImport: i0, template: "<h3 mat-dialog-title class=\"more-action\">\n  <span class=\"module-name\">{{ moduleName | uppercase }}</span>\n  <button matDialogClose class=\"btn-close-dialog\" color=\"light\" qms-btn-icon (click)=\"onCloseClick()\">\n    <mat-icon>close</mat-icon>\n  </button>\n</h3>\n<mat-dialog-content>\n  <!-- Ckeditor Using -->\n  <div *ngIf=\"canUploadImage || canUploadVideo || canUpdateVideoProperties\" id=\"qmslib_related_popup_header_001\"\n    [ngClass]=\"{\n          panel_header_height_with_video_upload: canUploadVideo,\n          panel_header_height_without_video_upload: !canUploadVideo && canUploadImage && canUpdateVideoProperties\n        }\" mat-dialog-content class=\"row\">\n    <div *ngIf=\"canUploadImage\" class=\"selected-image col-12\">\n      <div class=\"row d-flex align-items-center\">\n        <div class=\"col-md-4\">{{ moduleUploadImageName | uppercase }}</div>\n        <div class=\"col-md-8\">\n          <form>\n            <mat-form-field qms-form qms-file-upload appearance=\"fill\" class=\"example-width input-upload\">\n              <mat-icon matPrefix svgIcon=\"upload\"></mat-icon>\n              <input matInput placeholder=\"Upload file\" [formControl]=\"qmsInputImageType\" qms-file-upload-display\n                #fileDisplay value=\"{{qmsInputImageFile? qmsInputImageFile.fileName : ''}}\"\n                [attr.disabled]=\"isLoadingImageFile ? 'disabled' : null\" readonly>\n              <input hidden type=\"file\" [(inputFile)]=\"qmsInputImageFile\" qms-file-upload-selector #fileSelector\n                [acceptExtensions]=\"acceptExtensions\"\n                accept=\".pjp, .jpg, .pjpeg, .jpeg, .jfif, .png, .gif, .bmp, .webp, .tif, .tiff\"\n                [maxSize]=\"maxVideoThumbnailSizeKB\" (change)=\"onChangeImage($event)\">\n\n              <mat-progress-spinner matSuffix mode=\"indeterminate\" diameter='20'\n                *ngIf=\"isLoadingImageFile\"></mat-progress-spinner>\n              <div matSuffix qms-input-clear *ngIf=\"qmsInputImageFile && qmsInputImageFile.fileName\">\n                <button qms-btn-icon color=\"light\" (click)=\"clearQMSInputImageFile()\" [disabled]=\"isLoadingImageFile\">\n                  <mat-icon>close</mat-icon>\n                </button>\n              </div>\n\n              <mat-error *ngIf=\"qmsInputImageFile && qmsInputImageFile.typeError == 1\">\n                {{ LANG.QMSCKEDITOR.EXTENSION_IS_NOT_SUPPORTED }}\n              </mat-error>\n            </mat-form-field>\n          </form>\n        </div>\n      </div>\n      <div class=\"row d-flex align-items-center\">\n        <div class=\"col-md-4\">{{ LANG.QMSCKEDITOR.VIDEO_IMAGE | uppercase}}:</div>\n        <div class=\"col-md-8\">\n          <mat-form-field class=\"example-width input-upload\">\n            <input matInput [(ngModel)]=\"videoData.poster\">\n          </mat-form-field>\n        </div>\n      </div>\n    </div>\n    <div class=\"selected-image col-12\">\n      <div *ngIf=\"canUploadVideo\" class=\"row d-flex align-items-center\">\n        <div class=\"col-md-4\">{{ moduleUploadFileName | uppercase }}</div>\n        <div class=\"col-md-8\">\n          <form>\n            <mat-form-field qms-form qms-file-upload appearance=\"fill\" class=\"example-width input-upload\">\n              <mat-icon matPrefix svgIcon=\"upload\"></mat-icon>\n              <input matInput placeholder=\"Upload file\" [formControl]=\"qmsInputVideoType\" qms-file-upload-display\n                #fileDisplay value=\"{{qmsInputVideoFile? qmsInputVideoFile.fileName : ''}}\"\n                [attr.disabled]=\"isLoadingVideoFile ? 'disabled' : null\" readonly>\n              <input hidden type=\"file\" [(inputFile)]=\"qmsInputVideoFile\" qms-file-upload-selector #fileSelector\n                [acceptExtensions]=\"acceptExtensionsForVideo\" accept=\".mp4\" (change)=\"onChangeFile($event)\">\n\n              <mat-progress-spinner matSuffix mode=\"indeterminate\" diameter='20'\n                *ngIf=\"isLoadingVideoFile\"></mat-progress-spinner>\n              <div matSuffix qms-input-clear *ngIf=\"qmsInputVideoFile && qmsInputVideoFile.fileName\">\n                <button qms-btn-icon color=\"light\" (click)=\"clearQMSInputVideoFile()\" [disabled]=\"isLoadingVideoFile\">\n                  <mat-icon>close</mat-icon>\n                </button>\n              </div>\n\n              <mat-error *ngIf=\"qmsInputVideoFile && qmsInputVideoFile.typeError == 1\">\n                {{ LANG.QMSCKEDITOR.ACCEPT_MP4_ONLY }}\n              </mat-error>\n            </mat-form-field>\n          </form>\n        </div>\n      </div>\n      <div class=\"row d-flex align-items-center\" *ngIf=\"canUpdateVideoProperties\">\n        <div class=\"col-md-4\">{{ LANG.QMSCKEDITOR.VIDEO_SOURCE | uppercase}}:</div>\n        <div class=\"col-md-8\">\n          <mat-form-field class=\"example-width input-upload\">\n            <input matInput [(ngModel)]=\"videoData.src\">\n          </mat-form-field>\n        </div>\n      </div>\n    </div>\n    <div *ngIf=\"canUpdateVideoProperties\" class=\"selected-image col-12\">\n      <div class=\"row d-flex align-items-center\">\n        <div class=\"col-md-4\">\n          <mat-form-field class=\"example-width input-upload\">\n            <mat-label>{{ LANG.WIDTH }}</mat-label>\n            <input type=\"number\" matInput [(ngModel)]=\"videoData.width\">\n          </mat-form-field>\n        </div>\n        <div class=\"col-md-4\">\n          <mat-form-field class=\"example-width input-upload\">\n            <mat-label>{{ LANG.HEIGHT }}</mat-label>\n            <input type=\"number\" matInput [(ngModel)]=\"videoData.height\">\n          </mat-form-field>\n        </div>\n        <div class=\"col-md-4\">\n          <mat-form-field class=\"example-width input-upload\">\n            <mat-label>Id</mat-label>\n            <input matInput [(ngModel)]=\"videoData.id\">\n          </mat-form-field>\n        </div>\n      </div>\n    </div>\n  </div>\n  <!-- Related module -->\n  <div class=\"sticky-block\">\n    <input type=\"text\" placeholder=\"{{ LANG.SEARCH }}\" matInput [formControl]=\"myControl\" [matAutocomplete]=\"auto\" />\n    <mat-icon>search</mat-icon>\n  </div>\n  <div class=\"line__divider\"></div>\n\n  <mat-autocomplete #auto=\"matAutocomplete\" class=\"mat-autocomplete_related-viewport\"\n    (optionSelected)=\"selectRelated($event.option.value)\" [displayWith]=\"displayWhenSelectRelatedOption\">\n    <cdk-virtual-scroll-viewport qms-scrollbar itemSize=\"10\" [class.related-viewport]=\"isInputValue\"\n      *ngIf=\"filteredOptions.length\">\n      <ng-container *ngFor=\"let type of searchOrder\">\n        <div class=\"search__module-result\" *ngIf=\"canShowSearchOption(type.value)\">\n          <span class=\"search__module-title\">{{ getTitle(type.value) }}</span>\n          <mat-option class=\"search__option\" *ngFor=\"let option of getModuleFilteredOptions(type.value)\"\n            [value]=\"option\" [disabled]=\"option.disabled\">\n            <qms-list-item type=\"image-square\">\n              <mat-icon leading-icon type=\"image-square\" [svgIcon]=\"getNodeIcon(option)\"></mat-icon>\n              <div qms-list-header>\n                <div qms-line type=\"caption\" qms-tool-tip=\"{{\n                    isEllipsisActive(searchItemResult) ? option.parentName : ''\n                  }}\" mode=\"dark\" *ngIf=\"getParentName(option)\">\n                  <span #searchItemResult class=\"search__result__parent-name\">\n                    {{ option.parentName }}\n                  </span>\n                </div>\n                <div qms-line type=\"subtitle\" class=\"search__option-name\">\n                  {{ option.itemName }}\n                </div>\n                <div class=\"caption\" *ngIf=\"option.breadcumbs && option.breadcumbs.length\">\n                  <qms-breadcrumb class=\"breadcrumb-container\" type=\"table\" numDisplayItem=\"1\"\n                    [nodes]=\"option.breadcumbs\">\n                  </qms-breadcrumb>\n                </div>\n              </div>\n              <div qms-line color=\"default-subtitle\" *ngIf=\"getItemId(option)\">\n                <span>\n                  <mat-icon class=\"material-icons-outlined search__description-icon\">local_offer</mat-icon>\n                </span>\n                {{ getItemId(option) }}\n              </div>\n            </qms-list-item>\n          </mat-option>\n        </div>\n      </ng-container>\n    </cdk-virtual-scroll-viewport>\n  </mat-autocomplete>\n\n  <div class=\"row\">\n    <div class=\"qms-scrollbar qmslib_related_popup_content\" [ngClass]=\"{\n        panel__content_item: checkedNodeList.length,\n        panel__content: !checkedNodeList.length,\n        panel__content_height_with_upload: canUploadImage && !checkedNodeList.length,\n        panel__content_item_height_with_upload: canUploadImage && checkedNodeList.length,\n        'col-6': splitView,\n        'col-12': !splitView\n      }\">\n      <ng-container *ngIf=\"treeData1.length > 0\">\n        <mat-expansion-panel hideToggle id=\"qmslib_related_popup_common_001\" [expanded]=\"isCommonExpanded\"\n          (opened)=\"isCommonExpanded = true\" (closed)=\"isCommonExpanded = false\" class=\"panel-tree\">\n          <mat-expansion-panel-header class=\"padding-5\">\n            <mat-panel-title *ngIf=\"moduleId === module.documentProcess\">\n              {{ LANG.PROCESSES | uppercase }}\n            </mat-panel-title>\n            <mat-panel-title *ngIf=\"moduleId === module.deviation\">\n              {{ LANG.DEVIATION | uppercase }}\n            </mat-panel-title>\n            <mat-panel-title *ngIf=\"moduleId === module.checklist\">\n              {{ LANG.CHECKLIST | uppercase }}\n            </mat-panel-title>\n            <mat-panel-title *ngIf=\"moduleId === module.risk\">\n              {{ LANG.ASSESSMENT | uppercase }}\n            </mat-panel-title>\n            <button qms-btn-icon class=\"related_popup_toggle-btn\">\n              <mat-icon>\n                {{\n                isCommonExpanded ? \"keyboard_arrow_up\" : \"keyboard_arrow_down\"\n                }}\n              </mat-icon>\n            </button>\n          </mat-expansion-panel-header>\n          <div id=\"qmslib_related_popup_common_002\">\n            <qms-tree [treeData]=\"treeData1\" [treeConfig]=\"treeConfig1\" [selectedData]=\"selectedData\"\n              [selectedRiskData]=\"selectedRiskData\" [disabledList]=\"disabledList\"\n              (checkBoxEvent)=\"getCommonCheckedNode($event)\"\n              (nodeExpandEvent)=\"getChildrenOfFolder($event, dataType.area)\"\n              (selectNodeEvent)=\"selectNodeTreeEvent($event)\" (getChildNodeSelectOne)=\"getChildNodeSelectOne($event)\"\n              [expandOnTitleClick]=\"!splitView\" [parentNodeOnClick]=\"parentNodeSelected\"\n              (treeControlNodes)=\"selectTreeControlNodeProcess($event)\"></qms-tree>\n          </div>\n        </mat-expansion-panel>\n      </ng-container>\n\n      <ng-container *ngIf=\"treeData2.length > 0\">\n        <div *ngIf=\"moduleId === module.documentProcess\" class=\"line__divider\"></div>\n\n        <mat-expansion-panel hideToggle *ngIf=\"moduleId === module.documentProcess\"\n          id=\"qmslib_related_popup_document_001\" [expanded]=\"isDocumentExpanded\" (opened)=\"isDocumentExpanded = true\"\n          (closed)=\"isDocumentExpanded = false\" class=\"panel-tree\">\n          <mat-expansion-panel-header class=\"padding-5\">\n            <mat-panel-title>\n              {{ LANG.DOCUMENTS | uppercase }}\n            </mat-panel-title>\n            <button qms-btn-icon class=\"related_popup_toggle-btn\">\n              <mat-icon>\n                {{\n                isDocumentExpanded\n                ? \"keyboard_arrow_up\"\n                : \"keyboard_arrow_down\"\n                }}\n              </mat-icon>\n            </button>\n          </mat-expansion-panel-header>\n          <div id=\"qmslib_related_popup_document_002\">\n            <qms-tree [treeData]=\"treeData2\" [treeConfig]=\"treeConfig2\" [selectedData]=\"selectedData2\"\n              [disabledList]=\"disabledList2\" (checkBoxEvent)=\"getDocumentCheckedNode($event)\"\n              (nodeExpandEvent)=\"getChildrenOfFolder($event, dataType.folder)\"\n              (selectNodeEvent)=\"selectNodeTree2Event($event)\" (getChildNodeSelectOne)=\"getChildNodeSelectOne($event)\"\n              [expandOnTitleClick]=\"!splitView\" [parentNodeOnClick]=\"parentNodeSelected\"\n              (treeControlNodes)=\"selectTreeControlNodeDocument($event)\"></qms-tree>\n          </div>\n        </mat-expansion-panel>\n      </ng-container>\n    </div>\n    <div *ngIf=\"splitView\" class=\"qms-scrollbar qmslib-related-popup-splitview qmslib_related_popup_content col-6\"\n      [ngClass]=\"{\n        panel__content_item: checkedNodeList.length,\n        panel__content: !checkedNodeList.length\n      }\">\n      <div class=\"splitview-header\" *ngIf=\"selectedFolder\">\n        {{ splitViewTitle }}\n      </div>\n      <div class=\"expand-node\" *ngFor=\"let node of itemInSplitview\">\n        <mat-checkbox qms-group-options [disabled]=\"node.disabled\" color=\"default\" [checked]=\"isNodeSelected(node)\"\n          (change)=\"toggleSelectItem(node)\"></mat-checkbox>\n        <mat-icon class=\"mat-icon-rtl-mirror material-icons-outlined\" [svgIcon]=\"getNodeIcon(node)\"></mat-icon>\n        <span class=\"text-node\">{{ node.itemName }}</span>\n      </div>\n    </div>\n  </div>\n\n  <div *ngIf=\"checkedNodeList.length\" class=\"line__divider\"></div>\n\n  <div class=\"row\">\n    <div class=\"col-12 pr-0 pe-0\">\n      <div *ngIf=\"checkedNodeList.length\" class=\"panel__item qms-scrollbar\">\n        <div class=\"related__item__inline\" *ngFor=\"let item of checkedNodeList\">\n          <button *ngIf=\"item.itemName\" mat-button class=\"related__item__content\" qms-tool-tip=\"{{\n              isEllipsisActive(itemName) ? getItemChipName(item) : ''\n            }}\" mode=\"dark\">\n            <span class=\"related__item__content_name\" #itemName>{{\n              getItemChipName(item)\n              }}</span>\n            <mat-icon *ngIf=\"!(treeConfig1?.selectOne || treeConfig2?.selectOne)\"\n              (click)=\"removeCheckedNodeList(item)\">cancel</mat-icon>\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n</mat-dialog-content>\n<mat-dialog-actions align=\"end\">\n  <mat-divider class=\"w-100 mb-3\"></mat-divider>\n  <button class=\"me-2\" qms-btn-text [ngStyle]=\"{ 'margin-top': checkedNodeList.length ? '0px' : '7px' }\"\n    (click)=\"onCloseClick()\">\n    {{ LANG.CANCEL }}\n  </button>\n  <button *ngIf=\"!checkedNodeList.length\" qms-btn style=\"margin-top: 7px\"\n    [disabled]=\"isLoadingVideoFile || isLoadingImageFile\" (click)=\"onAddClick()\">\n    {{ LANG.ADD }}\n  </button>\n  <button *ngIf=\"checkedNodeList.length\" qms-btn style=\"margin-top: 0px\"\n    [disabled]=\"isLoadingVideoFile || isLoadingImageFile\" (click)=\"onAddClick()\">\n    {{ LANG.ADD }} ({{ checkedNodeList.length }})\n  </button>\n</mat-dialog-actions>\n\n<!-- \n<div id=\"qmslib_related_popup\" class=\"qmslib__related__popup__container\">\n  <div id=\"qmslib_related_popup_header\">\n    <span mat-icon-button class=\"button__close\" (click)=\"onCloseClick()\">\n      <mat-icon mat-icon>close</mat-icon>\n    </span>\n    <div *ngIf=\"canUploadImage || canUploadVideo || canUpdateVideoProperties\" id=\"qmslib_related_popup_header_001\"\n      [ngClass]=\"{\n      panel_header_height_with_video_upload: canUploadVideo,\n      panel_header_height_without_video_upload: !canUploadVideo && canUploadImage && canUpdateVideoProperties\n    }\" mat-dialog-content class=\"row\">\n      <div *ngIf=\"canUploadImage\" class=\"selected-image col-12\">\n        <div class=\"row d-flex align-items-center\">\n          <div class=\"col-md-4\">{{ moduleUploadImageName | uppercase }}</div>\n          <div class=\"col-md-8\">\n            <form>\n              <mat-form-field qms-form qms-file-upload appearance=\"fill\" class=\"example-width input-upload\">\n                <mat-icon matPrefix svgIcon=\"upload\"></mat-icon>\n                <input matInput placeholder=\"Upload file\" [formControl]=\"qmsInputImageType\" qms-file-upload-display\n                  #fileDisplay value=\"{{qmsInputImageFile? qmsInputImageFile.fileName : ''}}\"\n                  [attr.disabled]=\"isLoadingImageFile ? 'disabled' : null\" readonly>\n                <input hidden type=\"file\" [(inputFile)]=\"qmsInputImageFile\" qms-file-upload-selector #fileSelector\n                  [acceptExtensions]=\"acceptExtensions\"\n                  accept=\".pjp, .jpg, .pjpeg, .jpeg, .jfif, .png, .gif, .bmp, .webp, .tif, .tiff\"\n                  [maxSize]=\"maxVideoThumbnailSizeKB\" (change)=\"onChangeImage($event)\">\n\n                <mat-progress-spinner matSuffix mode=\"indeterminate\" diameter='20'\n                  *ngIf=\"isLoadingImageFile\"></mat-progress-spinner>\n                <div matSuffix qms-input-clear *ngIf=\"qmsInputImageFile && qmsInputImageFile.fileName\">\n                  <button qms-btn-icon color=\"light\" (click)=\"clearQMSInputImageFile()\" [disabled]=\"isLoadingImageFile\">\n                    <mat-icon>close</mat-icon>\n                  </button>\n                </div>\n\n                <mat-error *ngIf=\"qmsInputImageFile && qmsInputImageFile.typeError == 1\">\n                  {{ LANG.QMSCKEDITOR.EXTENSION_IS_NOT_SUPPORTED }}\n                </mat-error>\n              </mat-form-field>\n            </form>\n          </div>\n        </div>\n        <div class=\"row d-flex align-items-center\">\n          <div class=\"col-md-4\">{{ LANG.QMSCKEDITOR.VIDEO_IMAGE | uppercase}}:</div>\n          <div class=\"col-md-8\">\n            <mat-form-field class=\"example-width input-upload\">\n              <input matInput [(ngModel)]=\"videoData.poster\">\n            </mat-form-field>\n          </div>\n        </div>\n      </div>\n      <div class=\"selected-image col-12\">\n        <div *ngIf=\"canUploadVideo\" class=\"row d-flex align-items-center\">\n          <div class=\"col-md-4\">{{ moduleUploadFileName | uppercase }}</div>\n          <div class=\"col-md-8\">\n            <form>\n              <mat-form-field qms-form qms-file-upload appearance=\"fill\" class=\"example-width input-upload\">\n                <mat-icon matPrefix svgIcon=\"upload\"></mat-icon>\n                <input matInput placeholder=\"Upload file\" [formControl]=\"qmsInputVideoType\" qms-file-upload-display\n                  #fileDisplay value=\"{{qmsInputVideoFile? qmsInputVideoFile.fileName : ''}}\"\n                  [attr.disabled]=\"isLoadingVideoFile ? 'disabled' : null\" readonly>\n                <input hidden type=\"file\" [(inputFile)]=\"qmsInputVideoFile\" qms-file-upload-selector #fileSelector\n                  [acceptExtensions]=\"acceptExtensionsForVideo\" accept=\".mp4\" (change)=\"onChangeFile($event)\">\n\n                <mat-progress-spinner matSuffix mode=\"indeterminate\" diameter='20'\n                  *ngIf=\"isLoadingVideoFile\"></mat-progress-spinner>\n                <div matSuffix qms-input-clear *ngIf=\"qmsInputVideoFile && qmsInputVideoFile.fileName\">\n                  <button qms-btn-icon color=\"light\" (click)=\"clearQMSInputVideoFile()\" [disabled]=\"isLoadingVideoFile\">\n                    <mat-icon>close</mat-icon>\n                  </button>\n                </div>\n\n                <mat-error *ngIf=\"qmsInputVideoFile && qmsInputVideoFile.typeError == 1\">\n                  {{ LANG.QMSCKEDITOR.ACCEPT_MP4_ONLY }}\n                </mat-error>\n              </mat-form-field>\n            </form>\n          </div>\n        </div>\n        <div class=\"row d-flex align-items-center\" *ngIf=\"canUpdateVideoProperties\">\n          <div class=\"col-md-4\">{{ LANG.QMSCKEDITOR.VIDEO_SOURCE | uppercase}}:</div>\n          <div class=\"col-md-8\">\n            <mat-form-field class=\"example-width input-upload\">\n              <input matInput [(ngModel)]=\"videoData.src\">\n            </mat-form-field>\n          </div>\n        </div>\n      </div>\n      <div *ngIf=\"canUpdateVideoProperties\" class=\"selected-image col-12\">\n        <div class=\"row d-flex align-items-center\">\n          <div class=\"col-md-4\">\n            <mat-form-field class=\"example-width input-upload\">\n              <mat-label>{{ LANG.WIDTH }}</mat-label>\n              <input type=\"number\" matInput [(ngModel)]=\"videoData.width\">\n            </mat-form-field>\n          </div>\n          <div class=\"col-md-4\">\n            <mat-form-field class=\"example-width input-upload\">\n              <mat-label>{{ LANG.HEIGHT }}</mat-label>\n              <input type=\"number\" matInput [(ngModel)]=\"videoData.height\">\n            </mat-form-field>\n          </div>\n          <div class=\"col-md-4\">\n            <mat-form-field class=\"example-width input-upload\">\n              <mat-label>Id</mat-label>\n              <input matInput [(ngModel)]=\"videoData.id\">\n            </mat-form-field>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"row\">\n      <span class=\"module-name\">{{ moduleName | uppercase }}</span>\n    </div>\n  </div>\n\n  <div id=\"qmslib_related_popup_search\" class=\"input__field\">\n    <input type=\"text\" placeholder=\"{{ LANG.SEARCH }}\" matInput [formControl]=\"myControl\" [matAutocomplete]=\"auto\" />\n    <mat-icon>search</mat-icon>\n  </div>\n\n  <div class=\"line__divider\"></div>\n\n  <mat-autocomplete #auto=\"matAutocomplete\" class=\"mat-autocomplete_related-viewport\"\n    (optionSelected)=\"selectRelated($event.option.value)\" [displayWith]=\"displayWhenSelectRelatedOption\">\n    <cdk-virtual-scroll-viewport qms-scrollbar itemSize=\"10\" [class.related-viewport]=\"isInputValue\"\n      *ngIf=\"filteredOptions.length\">\n      <ng-container *ngFor=\"let type of searchOrder\">\n        <div class=\"search__module-result\" *ngIf=\"canShowSearchOption(type.value)\">\n          <span class=\"search__module-title\">{{ getTitle(type.value) }}</span>\n          <mat-option class=\"search__option\" *ngFor=\"let option of getModuleFilteredOptions(type.value)\"\n            [value]=\"option\" [disabled]=\"option.disabled\">\n            <qms-list-item type=\"image-square\">\n              <mat-icon leading-icon type=\"image-square\" [svgIcon]=\"getNodeIcon(option)\"></mat-icon>\n              <div qms-list-header>\n                <div qms-line type=\"caption\" qms-tool-tip=\"{{\n                    isEllipsisActive(searchItemResult) ? option.parentName : ''\n                  }}\" mode=\"dark\" *ngIf=\"getParentName(option)\">\n                  <span #searchItemResult class=\"search__result__parent-name\">\n                    {{ option.parentName }}\n                  </span>\n                </div>\n                <div qms-line type=\"subtitle\" class=\"search__option-name\">\n                  {{ option.itemName }}\n                </div>\n                <div class=\"caption\" *ngIf=\"option.breadcumbs && option.breadcumbs.length\">\n                  <qms-breadcrumb class=\"breadcrumb-container\" type=\"table\" numDisplayItem=\"1\"\n                    [nodes]=\"option.breadcumbs\">\n                  </qms-breadcrumb>\n                </div>\n              </div>\n              <div qms-line color=\"default-subtitle\" *ngIf=\"getItemId(option)\">\n                <span>\n                  <mat-icon class=\"material-icons-outlined search__description-icon\">local_offer</mat-icon>\n                </span>\n                {{ getItemId(option) }}\n              </div>\n            </qms-list-item>\n          </mat-option>\n        </div>\n      </ng-container>\n    </cdk-virtual-scroll-viewport>\n  </mat-autocomplete>\n\n  <div class=\"row\">\n    <div class=\"qms-scrollbar qmslib_related_popup_content\" [ngClass]=\"{\n        panel__content_item: checkedNodeList.length,\n        panel__content: !checkedNodeList.length,\n        panel__content_height_with_upload: canUploadImage && !checkedNodeList.length,\n        panel__content_item_height_with_upload: canUploadImage && checkedNodeList.length,\n        'col-6': splitView,\n        'col-12': !splitView\n      }\">\n      <ng-container *ngIf=\"treeData1.length > 0\">\n        <mat-expansion-panel hideToggle id=\"qmslib_related_popup_common_001\" [expanded]=\"isCommonExpanded\"\n          (opened)=\"isCommonExpanded = true\" (closed)=\"isCommonExpanded = false\" class=\"panel-tree\">\n          <mat-expansion-panel-header class=\"padding-5\">\n            <mat-panel-title *ngIf=\"moduleId === module.documentProcess\">\n              {{ LANG.PROCESSES | uppercase }}\n            </mat-panel-title>\n            <mat-panel-title *ngIf=\"moduleId === module.deviation\">\n              {{ LANG.DEVIATION | uppercase }}\n            </mat-panel-title>\n            <mat-panel-title *ngIf=\"moduleId === module.checklist\">\n              {{ LANG.CHECKLIST | uppercase }}\n            </mat-panel-title>\n            <mat-panel-title *ngIf=\"moduleId === module.risk\">\n              {{ LANG.ASSESSMENT | uppercase }}\n            </mat-panel-title>\n            <button qms-btn-icon class=\"related_popup_toggle-btn\">\n              <mat-icon>\n                {{\n                isCommonExpanded ? \"keyboard_arrow_up\" : \"keyboard_arrow_down\"\n                }}\n              </mat-icon>\n            </button>\n          </mat-expansion-panel-header>\n          <div id=\"qmslib_related_popup_common_002\">\n            <qms-tree [treeData]=\"treeData1\" [treeConfig]=\"treeConfig1\" [selectedData]=\"selectedData\"\n              [selectedRiskData]=\"selectedRiskData\" [disabledList]=\"disabledList\"\n              (checkBoxEvent)=\"getCommonCheckedNode($event)\"\n              (nodeExpandEvent)=\"getChildrenOfFolder($event, dataType.area)\"\n              (selectNodeEvent)=\"selectNodeTreeEvent($event)\" (getChildNodeSelectOne)=\"getChildNodeSelectOne($event)\"\n              [expandOnTitleClick]=\"!splitView\" [parentNodeOnClick]=\"parentNodeSelected\"\n              (treeControlNodes)=\"selectTreeControlNodeProcess($event)\"></qms-tree>\n          </div>\n        </mat-expansion-panel>\n      </ng-container>\n\n      <ng-container *ngIf=\"treeData2.length > 0\">\n        <div *ngIf=\"moduleId === module.documentProcess\" class=\"line__divider\"></div>\n\n        <mat-expansion-panel hideToggle *ngIf=\"moduleId === module.documentProcess\"\n          id=\"qmslib_related_popup_document_001\" [expanded]=\"isDocumentExpanded\" (opened)=\"isDocumentExpanded = true\"\n          (closed)=\"isDocumentExpanded = false\" class=\"panel-tree\">\n          <mat-expansion-panel-header class=\"padding-5\">\n            <mat-panel-title>\n              {{ LANG.DOCUMENTS | uppercase }}\n            </mat-panel-title>\n            <button qms-btn-icon class=\"related_popup_toggle-btn\">\n              <mat-icon>\n                {{\n                isDocumentExpanded\n                ? \"keyboard_arrow_up\"\n                : \"keyboard_arrow_down\"\n                }}\n              </mat-icon>\n            </button>\n          </mat-expansion-panel-header>\n          <div id=\"qmslib_related_popup_document_002\">\n            <qms-tree [treeData]=\"treeData2\" [treeConfig]=\"treeConfig2\" [selectedData]=\"selectedData2\"\n              [disabledList]=\"disabledList2\" (checkBoxEvent)=\"getDocumentCheckedNode($event)\"\n              (nodeExpandEvent)=\"getChildrenOfFolder($event, dataType.folder)\"\n              (selectNodeEvent)=\"selectNodeTree2Event($event)\" (getChildNodeSelectOne)=\"getChildNodeSelectOne($event)\"\n              [expandOnTitleClick]=\"!splitView\" [parentNodeOnClick]=\"parentNodeSelected\"\n              (treeControlNodes)=\"selectTreeControlNodeDocument($event)\"></qms-tree>\n          </div>\n        </mat-expansion-panel>\n      </ng-container>\n    </div>\n    <div *ngIf=\"splitView\" class=\"qms-scrollbar qmslib-related-popup-splitview qmslib_related_popup_content col-6\"\n      [ngClass]=\"{\n        panel__content_item: checkedNodeList.length,\n        panel__content: !checkedNodeList.length\n      }\">\n      <div class=\"splitview-header\" *ngIf=\"selectedFolder\">\n        {{ splitViewTitle }}\n      </div>\n      <div class=\"expand-node\" *ngFor=\"let node of itemInSplitview\">\n        <mat-checkbox qms-group-options [disabled]=\"node.disabled\" color=\"default\" [checked]=\"isNodeSelected(node)\"\n          (change)=\"toggleSelectItem(node)\"></mat-checkbox>\n        <mat-icon class=\"mat-icon-rtl-mirror material-icons-outlined\" [svgIcon]=\"getNodeIcon(node)\"></mat-icon>\n        <span class=\"text-node\">{{ node.itemName }}</span>\n      </div>\n    </div>\n  </div>\n\n  <div *ngIf=\"checkedNodeList.length\" class=\"line__divider\"></div>\n\n  <div class=\"row\">\n    <div class=\"col-12 pr-0 pe-0\">\n      <div *ngIf=\"checkedNodeList.length\" class=\"panel__item qms-scrollbar\">\n        <div class=\"related__item__inline\" *ngFor=\"let item of checkedNodeList\">\n          <button *ngIf=\"item.itemName\" mat-button class=\"related__item__content\" qms-tool-tip=\"{{\n              isEllipsisActive(itemName) ? getItemChipName(item) : ''\n            }}\" mode=\"dark\">\n            <span class=\"related__item__content_name\" #itemName>{{\n              getItemChipName(item)\n              }}</span>\n            <mat-icon *ngIf=\"!(treeConfig1?.selectOne || treeConfig2?.selectOne)\"\n              (click)=\"removeCheckedNodeList(item)\">cancel</mat-icon>\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"line__divider\"></div>\n\n  <div class=\"confirm__button__groups\">\n    <button *ngIf=\"!checkedNodeList.length\" qms-btn style=\"margin-top: 7px\"\n      [disabled]=\"isLoadingVideoFile || isLoadingImageFile\" (click)=\"onAddClick()\">\n      {{ LANG.ADD }}\n    </button>\n    <button *ngIf=\"checkedNodeList.length\" qms-btn style=\"margin-top: 0px\"\n      [disabled]=\"isLoadingVideoFile || isLoadingImageFile\" (click)=\"onAddClick()\">\n      {{ LANG.ADD }} ({{ checkedNodeList.length }})\n    </button>\n    <button qms-btn-text [ngStyle]=\"{ 'margin-top': checkedNodeList.length ? '0px' : '7px' }\" (click)=\"onCloseClick()\">\n      {{ LANG.CANCEL }}\n    </button>\n  </div>\n</div> -->", styles: ["::-webkit-scrollbar{width:12px}::-webkit-scrollbar-track{background:#0000001f;background-clip:content-box}::-webkit-scrollbar-thumb{background:#00000061;border-radius:20px;width:4px;border:4px solid transparent;background-clip:content-box}::-webkit-scrollbar-thumb:hover{background:#00000080;background-clip:content-box;border:4px solid transparent}.qms__popup .button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qms__danger button{border:none;color:var(--text-white);padding:0;text-align:center;text-decoration:none;display:inline-block;cursor:pointer;height:20px;width:20px;font-family:Open Sans;font-size:12px;font-weight:600;font-style:normal;line-height:16px}.qms__danger .red{background-color:var(--button-red-background);margin-left:10px}.qms__danger .yellow{background-color:var(--button-yellow-background);margin-left:10px;color:var(--popup-title-color)}.qms__danger .green{background-color:var(--button-green-background);margin-left:10px}.confirm__button__groups{margin-top:11px}.confirm__button__groups button{min-height:36px;width:auto;font-family:Open Sans;font-weight:500;font-size:14px;letter-spacing:1px;line-height:16px;padding-left:15px;padding-right:15px;margin-right:5px;float:right}.confirm__button__groups .confirm{background:var(--button-background)}.confirm__button__groups .confirm:hover{background:var(--primary-button-background-color);color:var(--primary-button-text-color)}.confirm__button__groups .confirm:disabled{cursor:not-allowed}.confirm__button__groups .cancel{background:var(--button-background)}.confirm__button__groups .cancel:hover{background:var(--primary-button-background-color);color:var(--primary-button-text-color)}.sticky-block{position:sticky;top:-1px;left:0;right:0;background:#fdfbff}.qmslib__related__popup__container .input__field{display:flex;align-items:center}.qmslib__related__popup__container .input__field input{width:100%;padding:10px;outline:none;border:none;background:var(--background-input-text)}.qmslib__related__popup__container .input__field .mat-icon{margin-left:-30px;cursor:pointer;vertical-align:middle}.qmslib__related__popup__container .line__divider{border-bottom:1px solid #ccc;height:1px;margin-top:10px;min-width:300px;max-width:100%}.qmslib__related__popup__container .button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qmslib__related__popup__container .panel__content{height:450px;overflow:auto;margin-top:12px}.qmslib__related__popup__container .panel__content_height_with_upload{height:380px}.qmslib__related__popup__container .panel__content_item{height:350px;overflow:auto;margin-top:12px}.qmslib__related__popup__container .panel__content_item_height_with_upload{height:257px}.qmslib__related__popup__container .panel-tree .mat-expansion-panel-body{padding:0 12px 12px}.qmslib__related__popup__container .mat-expansion-panel-header{height:30px;font-size:12px;letter-spacing:1px;font-family:Raleway;font-weight:600;padding:0}.qmslib__related__popup__container .mat-expansion-panel-header .mat-expansion-panel-header-title{align-items:center;margin-left:12px}.qmslib__related__popup__container .mat-expansion-panel-header .related_popup_toggle-btn{width:1.5rem;height:1.5rem;line-height:1.5rem}.qmslib__related__popup__container .mat-expansion-panel:not([class*=mat-elevation-z]){box-shadow:none}.qmslib__related__popup__container .panel__item{height:100px;margin-top:12px;overflow-x:hidden;overflow-y:auto;padding-right:5px;width:100%;max-width:100%;display:flex;flex-wrap:wrap;align-content:flex-start}.qmslib__related__popup__container .panel__item .related__item__inline{max-width:100%}.qmslib__related__popup__container .panel__item .related__item__content{height:32px;line-height:32px;background-color:var(--related-item-background);max-width:100%;margin-bottom:5px;margin-left:2.5px;margin-right:2.5px}.qmslib__related__popup__container .panel__item .related__item__content .mat-icon{color:var(--related-mat-icon-color);font-size:24px}.qmslib__related__popup__container .panel__item .related__item__content span.related__item__content_name{display:inline-block;min-width:calc(100% - 13px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:278px}.qmslib__related__popup__container .qmslib-related-popup-splitview{background-color:#fff;border-left:1px solid #ccc;height:450px;overflow-y:auto;margin-top:12px}.qmslib__related__popup__container .qmslib-related-popup-splitview.panel__content{height:450px;overflow:auto;margin-top:12px}.qmslib__related__popup__container .qmslib-related-popup-splitview.panel__content_item{height:350px;overflow:auto;margin-top:12px}.qmslib__related__popup__container .qmslib-related-popup-splitview .splitview-header{font-size:12px;letter-spacing:1px;font-family:RALEWAY;font-weight:600;display:flex;align-items:center}.qmslib__related__popup__container .qmslib-related-popup-splitview .mat-mdc-checkbox.qms-group-options{padding:0}.qmslib__related__popup__container .qmslib-related-popup-splitview .mat-mdc-checkbox.qms-group-options .mat-checkbox-inner-container{margin-right:11px}.qmslib__related__popup__container .qmslib-related-popup-splitview .mat-mdc-checkbox.qms-group-options.mat-checkbox-checked{background:transparent!important}.qmslib__related__popup__container .qmslib-related-popup-splitview .expand-node{margin-left:8px;display:flex;align-items:center;min-height:40px}.qmslib__related__popup__container .qmslib-related-popup-splitview .expand-node .mat-icon{color:#0009;margin-right:17px;min-width:fit-content}.qmslib__related__popup__container .qmslib-related-popup-splitview .expand-node .mat-icon svg{display:block;min-width:fit-content}.qmslib__related__popup__container .module-name{margin-top:10px;display:block;font-weight:600;font-family:Raleway}.qmslib__related__popup__container input::-webkit-outer-spin-button,.qmslib__related__popup__container input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.qmslib__related__popup__container input[type=number]{-moz-appearance:textfield}.qmslib__related__popup__container .panel_header_height_with_video_upload{height:350px}.qmslib__related__popup__container .panel_header_height_without_video_upload{height:300px}cdk-virtual-scroll-viewport{overflow-x:hidden}cdk-virtual-scroll-viewport .search__module-result{margin:1.5rem;padding:0 0 .5rem 0px}cdk-virtual-scroll-viewport .search__module-result .search__module-title{font-size:14px;font-weight:600}cdk-virtual-scroll-viewport .search__module-result .search__option{height:auto;line-height:normal;padding:8px 0;border-bottom:1px solid #e0e0e0}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item.mat-2-line.image-item{height:auto}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content{margin:0;border-bottom:none}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .wrap-image.image-square{width:2.5rem;height:100%;background:transparent;align-self:center;margin-right:0}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .wrap-image.image-square img{width:24px;height:24px}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .material-icons-outlined.leading-icon,cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content mat-icon.leading-icon{padding:4px 0 4px 4px}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .subtitle{font-weight:400}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .caption{overflow:hidden;line-height:normal;white-space:normal;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;padding:0;margin:0}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .caption span.search__result__parent-name{display:inline-block;width:auto;width:calc(100% - 13px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .default-subtitle{color:#00000061}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .search__description-icon{margin-right:0;width:12px;height:12px;font-size:12px}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .qms-list-text{border-bottom:none}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .breadcrumb-container .qms-breadcrumb-item .mat-icon{font-size:16px!important;padding-bottom:1px}cdk-virtual-scroll-viewport .search__module-result .mat-mdc-option[aria-disabled=true] .subtitle{color:#00000061}cdk-virtual-scroll-viewport .search__module-result .mat-mdc-option[aria-disabled=true] .breadcrumb-container .qms-breadcrumb-item .mat-icon{color:#00000061}cdk-virtual-scroll-viewport .search__module-result .mat-mdc-option[aria-disabled=true] .breadcrumb-container .qms-breadcrumb-item-text{color:#00000061}cdk-virtual-scroll-viewport .search__module-result svg{display:block}#qmslib_related_popup_header_001{width:100%;padding:0;font-weight:600;font-family:Raleway;margin:0}#qmslib_related_popup_header_001 .selected-image{padding-bottom:10px;width:100%}#qmslib_related_popup_header_001 .selected-image .input-upload,#qmslib_related_popup_header_001 .selected-image .module-name{width:100%;height:60px}.padding-5{padding:5px}.mat-mdc-autocomplete_related-viewport{height:100%;max-height:100%!important}.mat-mdc-autocomplete_related-viewport .cdk-virtual-scroll-content-wrapper{width:100%}.mat-mdc-autocomplete_related-viewport .related-viewport{min-height:300px}\n"], dependencies: [{ kind: "directive", type: i8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i8.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i7$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i9.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i9.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i9.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "component", type: i9$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i14.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i9$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: i8.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i24.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "component", type: i24.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: i23.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i11.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i11.MatLabel, selector: "mat-label" }, { kind: "directive", type: i11.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i11.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i11.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i1$2.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: QMSButton, selector: "button[qms-btn], button[qms-btn-lg], button[qms-btn-outlined],\n               button[qms-btn-outlined-lg], button[qms-btn-text], button[qms-btn-text-lg],\n               button[qms-btn-fab],button[qms-btn-fab-sm],button[qms-btn-fab-ext],\n               button[qms-btn-fab-outlined],button[qms-btn-fab-outlined-sm],button[qms-btn-fab-outlined-ext]", inputs: ["disabled", "color"], exportAs: ["qmsButton"] }, { kind: "component", type: QMSButtonIcon, selector: "button[qms-btn-icon]", inputs: ["disabled", "color", "active"], exportAs: ["qmsButtonIcon"] }, { kind: "component", type: i16.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: QMSListItem, selector: "qms-list-item", inputs: ["type", "disabled"] }, { kind: "directive", type: QMSListLeadingIcon, selector: "[leading-icon]" }, { kind: "directive", type: QMSListLine, selector: "[qms-line]", inputs: ["size", "type", "color"] }, { kind: "directive", type: QMSListHeader, selector: "[qms-list-header]" }, { kind: "directive", type: QMSInputClearDirective, selector: "[qms-input-clear]" }, { kind: "directive", type: QMSFormFieldDirective, selector: "[qms-form]" }, { kind: "directive", type: QMSGroupOptionDirective, selector: "[qms-group-options]", inputs: ["label"] }, { kind: "directive", type: AutocompleteOffDirective, selector: "[qms-group-options]" }, { kind: "directive", type: QMSFileUploadDirective, selector: "[qms-file-upload]", inputs: ["isLoading"] }, { kind: "directive", type: QMSFileUploadDisplayDirective, selector: "[qms-file-upload-display]", inputs: ["value"] }, { kind: "directive", type: QMSFileUploadSelectorDirective, selector: "[qms-file-upload-selector]", inputs: ["inputFile", "acceptExtensions", "maxSize"], outputs: ["inputFileChange", "onFileUploaded"] }, { kind: "directive", type: QMSScrollbarDirective, selector: "[qms-scrollbar]", inputs: ["isNoneBackground"] }, { kind: "directive", type: QMSToolTipRendererDirective, selector: "[qms-tool-tip]", inputs: ["showToolTip", "mode", "qms-tool-tip", "contentTemplate", "position"] }, { kind: "component", type: QMSBreadcrumb, selector: "qms-breadcrumb", inputs: ["nodes", "type", "maxLine", "numDisplayItem", "onlyItem", "disabledLastItem"], outputs: ["onItemClick"] }, { kind: "component", type: TreeComponent, selector: "qms-tree", inputs: ["treeData", "treeConfig", "selectedData", "selectedRiskData", "disabledList", "expandOnTitleClick", "expandToChildNode", "parentNodeOnClick"], outputs: ["selectNodeEvent", "selectFolderEvent", "checkBoxEvent", "childCheckedEvent", "nodeExpandEvent", "treeControlNodes", "nodeCondensedEvent"] }, { kind: "pipe", type: i7.UpperCasePipe, name: "uppercase" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: RelatedPopupComponent, selector: "qms-related-popup", host: { listeners: { "window:message": "onMessage($event)" } }, viewQueries: [{ propertyName: "autoComplete", first: true, predicate: ["autoCompleteInputSearch"], descendants: true, read: MatAutocompleteTrigger, static: true }, { propertyName: "dataTrees", predicate: TreeComponent, descendants: true }], ngImport: i0, template: "<h3 mat-dialog-title class=\"more-action\">\n  {{ moduleName | uppercase }}\n  <button matDialogClose class=\"close-btn\" color=\"light\" qms-btn-icon (click)=\"onCloseClick()\">\n    <mat-icon>close</mat-icon>\n  </button>\n</h3>\n<mat-dialog-content>\n  <!-- Ckeditor Using -->\n  <div *ngIf=\"canUploadImage || canUploadVideo || canUpdateVideoProperties\" id=\"qmslib_related_popup_header_001\"\n    [ngClass]=\"{\n          panel_header_height_with_video_upload: canUploadVideo,\n          panel_header_height_without_video_upload: !canUploadVideo && canUploadImage && canUpdateVideoProperties\n        }\" mat-dialog-content class=\"row\">\n    <div *ngIf=\"canUploadImage\" class=\"selected-image col-12\">\n      <div class=\"row d-flex align-items-center\">\n        <div class=\"col-md-4\">{{ moduleUploadImageName | uppercase }}</div>\n        <div class=\"col-md-8\">\n          <form>\n            <mat-form-field qms-form qms-file-upload appearance=\"fill\" class=\"example-width input-upload\">\n              <mat-icon matPrefix svgIcon=\"upload\"></mat-icon>\n              <input matInput placeholder=\"Upload file\" [formControl]=\"qmsInputImageType\" qms-file-upload-display\n                #fileDisplay value=\"{{qmsInputImageFile? qmsInputImageFile.fileName : ''}}\"\n                [attr.disabled]=\"isLoadingImageFile ? 'disabled' : null\" readonly>\n              <input hidden type=\"file\" [(inputFile)]=\"qmsInputImageFile\" qms-file-upload-selector #fileSelector\n                [acceptExtensions]=\"acceptExtensions\"\n                accept=\".pjp, .jpg, .pjpeg, .jpeg, .jfif, .png, .gif, .bmp, .webp, .tif, .tiff\"\n                [maxSize]=\"maxVideoThumbnailSizeKB\" (change)=\"onChangeImage($event)\">\n\n              <mat-progress-spinner matSuffix mode=\"indeterminate\" diameter='20'\n                *ngIf=\"isLoadingImageFile\"></mat-progress-spinner>\n              <div matSuffix qms-input-clear *ngIf=\"qmsInputImageFile && qmsInputImageFile.fileName\">\n                <button qms-btn-icon color=\"light\" (click)=\"clearQMSInputImageFile()\" [disabled]=\"isLoadingImageFile\">\n                  <mat-icon>close</mat-icon>\n                </button>\n              </div>\n\n              <mat-error *ngIf=\"qmsInputImageFile && qmsInputImageFile.typeError == 1\">\n                {{ LANG.QMSCKEDITOR.EXTENSION_IS_NOT_SUPPORTED }}\n              </mat-error>\n            </mat-form-field>\n          </form>\n        </div>\n      </div>\n      <div class=\"row d-flex align-items-center\">\n        <div class=\"col-md-4\">{{ LANG.QMSCKEDITOR.VIDEO_IMAGE | uppercase}}:</div>\n        <div class=\"col-md-8\">\n          <mat-form-field class=\"example-width input-upload\">\n            <input matInput [(ngModel)]=\"videoData.poster\">\n          </mat-form-field>\n        </div>\n      </div>\n    </div>\n    <div class=\"selected-image col-12\">\n      <div *ngIf=\"canUploadVideo\" class=\"row d-flex align-items-center\">\n        <div class=\"col-md-4\">{{ moduleUploadFileName | uppercase }}</div>\n        <div class=\"col-md-8\">\n          <form>\n            <mat-form-field qms-form qms-file-upload appearance=\"fill\" class=\"example-width input-upload\">\n              <mat-icon matPrefix svgIcon=\"upload\"></mat-icon>\n              <input matInput placeholder=\"Upload file\" [formControl]=\"qmsInputVideoType\" qms-file-upload-display\n                #fileDisplay value=\"{{qmsInputVideoFile? qmsInputVideoFile.fileName : ''}}\"\n                [attr.disabled]=\"isLoadingVideoFile ? 'disabled' : null\" readonly>\n              <input hidden type=\"file\" [(inputFile)]=\"qmsInputVideoFile\" qms-file-upload-selector #fileSelector\n                [acceptExtensions]=\"acceptExtensionsForVideo\" accept=\".mp4\" (change)=\"onChangeFile($event)\">\n\n              <mat-progress-spinner matSuffix mode=\"indeterminate\" diameter='20'\n                *ngIf=\"isLoadingVideoFile\"></mat-progress-spinner>\n              <div matSuffix qms-input-clear *ngIf=\"qmsInputVideoFile && qmsInputVideoFile.fileName\">\n                <button qms-btn-icon color=\"light\" (click)=\"clearQMSInputVideoFile()\" [disabled]=\"isLoadingVideoFile\">\n                  <mat-icon>close</mat-icon>\n                </button>\n              </div>\n\n              <mat-error *ngIf=\"qmsInputVideoFile && qmsInputVideoFile.typeError == 1\">\n                {{ LANG.QMSCKEDITOR.ACCEPT_MP4_ONLY }}\n              </mat-error>\n            </mat-form-field>\n          </form>\n        </div>\n      </div>\n      <div class=\"row d-flex align-items-center\" *ngIf=\"canUpdateVideoProperties\">\n        <div class=\"col-md-4\">{{ LANG.QMSCKEDITOR.VIDEO_SOURCE | uppercase}}:</div>\n        <div class=\"col-md-8\">\n          <mat-form-field class=\"example-width input-upload\">\n            <input matInput [(ngModel)]=\"videoData.src\">\n          </mat-form-field>\n        </div>\n      </div>\n    </div>\n    <div *ngIf=\"canUpdateVideoProperties\" class=\"selected-image col-12\">\n      <div class=\"row d-flex align-items-center\">\n        <div class=\"col-md-4\">\n          <mat-form-field class=\"example-width input-upload\">\n            <mat-label>{{ LANG.WIDTH }}</mat-label>\n            <input type=\"number\" matInput [(ngModel)]=\"videoData.width\">\n          </mat-form-field>\n        </div>\n        <div class=\"col-md-4\">\n          <mat-form-field class=\"example-width input-upload\">\n            <mat-label>{{ LANG.HEIGHT }}</mat-label>\n            <input type=\"number\" matInput [(ngModel)]=\"videoData.height\">\n          </mat-form-field>\n        </div>\n        <div class=\"col-md-4\">\n          <mat-form-field class=\"example-width input-upload\">\n            <mat-label>Id</mat-label>\n            <input matInput [(ngModel)]=\"videoData.id\">\n          </mat-form-field>\n        </div>\n      </div>\n    </div>\n  </div>\n  <!-- Related module -->\n  <div class=\"sticky-block\">\n    <input type=\"text\" placeholder=\"{{ LANG.SEARCH }}\" matInput [formControl]=\"myControl\" [matAutocomplete]=\"auto\" />\n    <mat-icon>search</mat-icon>\n  </div>\n  <div class=\"line__divider\"></div>\n\n  <mat-autocomplete #auto=\"matAutocomplete\" class=\"mat-autocomplete_related-viewport\"\n    (optionSelected)=\"selectRelated($event.option.value)\" [displayWith]=\"displayWhenSelectRelatedOption\">\n    <cdk-virtual-scroll-viewport qms-scrollbar itemSize=\"10\" [class.related-viewport]=\"isInputValue\"\n      *ngIf=\"filteredOptions.length\">\n      <ng-container *ngFor=\"let type of searchOrder\">\n        <div class=\"search__module-result\" *ngIf=\"canShowSearchOption(type.value)\">\n          <span class=\"search__module-title\">{{ getTitle(type.value) }}</span>\n          <mat-option class=\"search__option\" *ngFor=\"let option of getModuleFilteredOptions(type.value)\"\n            [value]=\"option\" [disabled]=\"option.disabled\">\n            <qms-list-item type=\"image-square\">\n              <mat-icon leading-icon type=\"image-square\" [svgIcon]=\"getNodeIcon(option)\"></mat-icon>\n              <div qms-list-header>\n                <div qms-line type=\"caption\" qms-tool-tip=\"{{\n                    isEllipsisActive(searchItemResult) ? option.parentName : ''\n                  }}\" mode=\"dark\" *ngIf=\"getParentName(option)\">\n                  <span #searchItemResult class=\"search__result__parent-name\">\n                    {{ option.parentName }}\n                  </span>\n                </div>\n                <div qms-line type=\"subtitle\" class=\"search__option-name\">\n                  {{ option.itemName }}\n                </div>\n                <div class=\"caption\" *ngIf=\"option.breadcumbs && option.breadcumbs.length\">\n                  <qms-breadcrumb class=\"breadcrumb-container\" type=\"table\" numDisplayItem=\"1\"\n                    [nodes]=\"option.breadcumbs\">\n                  </qms-breadcrumb>\n                </div>\n              </div>\n              <div qms-line color=\"default-subtitle\" *ngIf=\"getItemId(option)\">\n                <span>\n                  <mat-icon class=\"material-icons-outlined search__description-icon\">local_offer</mat-icon>\n                </span>\n                {{ getItemId(option) }}\n              </div>\n            </qms-list-item>\n          </mat-option>\n        </div>\n      </ng-container>\n    </cdk-virtual-scroll-viewport>\n  </mat-autocomplete>\n\n  <div class=\"row\">\n    <div class=\"qms-scrollbar qmslib_related_popup_content\" [ngClass]=\"{\n        panel__content_item: checkedNodeList.length,\n        panel__content: !checkedNodeList.length,\n        panel__content_height_with_upload: canUploadImage && !checkedNodeList.length,\n        panel__content_item_height_with_upload: canUploadImage && checkedNodeList.length,\n        'col-6': splitView,\n        'col-12': !splitView\n      }\">\n      <ng-container *ngIf=\"treeData1.length > 0\">\n        <mat-expansion-panel hideToggle id=\"qmslib_related_popup_common_001\" [expanded]=\"isCommonExpanded\"\n          (opened)=\"isCommonExpanded = true\" (closed)=\"isCommonExpanded = false\" class=\"panel-tree\">\n          <mat-expansion-panel-header class=\"padding-5\">\n            <mat-panel-title *ngIf=\"moduleId === module.documentProcess\">\n              {{ LANG.PROCESSES | uppercase }}\n            </mat-panel-title>\n            <mat-panel-title *ngIf=\"moduleId === module.deviation\">\n              {{ LANG.DEVIATION | uppercase }}\n            </mat-panel-title>\n            <mat-panel-title *ngIf=\"moduleId === module.checklist\">\n              {{ LANG.CHECKLIST | uppercase }}\n            </mat-panel-title>\n            <mat-panel-title *ngIf=\"moduleId === module.risk\">\n              {{ LANG.ASSESSMENT | uppercase }}\n            </mat-panel-title>\n            <button qms-btn-icon class=\"related_popup_toggle-btn\">\n              <mat-icon>\n                {{\n                isCommonExpanded ? \"keyboard_arrow_up\" : \"keyboard_arrow_down\"\n                }}\n              </mat-icon>\n            </button>\n          </mat-expansion-panel-header>\n          <div id=\"qmslib_related_popup_common_002\">\n            <qms-tree [treeData]=\"treeData1\" [treeConfig]=\"treeConfig1\" [selectedData]=\"selectedData\"\n              [selectedRiskData]=\"selectedRiskData\" [disabledList]=\"disabledList\"\n              (checkBoxEvent)=\"getCommonCheckedNode($event)\"\n              (nodeExpandEvent)=\"getChildrenOfFolder($event, dataType.area)\"\n              (selectNodeEvent)=\"selectNodeTreeEvent($event)\" (getChildNodeSelectOne)=\"getChildNodeSelectOne($event)\"\n              [expandOnTitleClick]=\"!splitView\" [parentNodeOnClick]=\"parentNodeSelected\"\n              (treeControlNodes)=\"selectTreeControlNodeProcess($event)\"></qms-tree>\n          </div>\n        </mat-expansion-panel>\n      </ng-container>\n\n      <ng-container *ngIf=\"treeData2.length > 0\">\n        <div *ngIf=\"moduleId === module.documentProcess\" class=\"line__divider\"></div>\n\n        <mat-expansion-panel hideToggle *ngIf=\"moduleId === module.documentProcess\"\n          id=\"qmslib_related_popup_document_001\" [expanded]=\"isDocumentExpanded\" (opened)=\"isDocumentExpanded = true\"\n          (closed)=\"isDocumentExpanded = false\" class=\"panel-tree\">\n          <mat-expansion-panel-header class=\"padding-5\">\n            <mat-panel-title>\n              {{ LANG.DOCUMENTS | uppercase }}\n            </mat-panel-title>\n            <button qms-btn-icon class=\"related_popup_toggle-btn\">\n              <mat-icon>\n                {{\n                isDocumentExpanded\n                ? \"keyboard_arrow_up\"\n                : \"keyboard_arrow_down\"\n                }}\n              </mat-icon>\n            </button>\n          </mat-expansion-panel-header>\n          <div id=\"qmslib_related_popup_document_002\">\n            <qms-tree [treeData]=\"treeData2\" [treeConfig]=\"treeConfig2\" [selectedData]=\"selectedData2\"\n              [disabledList]=\"disabledList2\" (checkBoxEvent)=\"getDocumentCheckedNode($event)\"\n              (nodeExpandEvent)=\"getChildrenOfFolder($event, dataType.folder)\"\n              (selectNodeEvent)=\"selectNodeTree2Event($event)\" (getChildNodeSelectOne)=\"getChildNodeSelectOne($event)\"\n              [expandOnTitleClick]=\"!splitView\" [parentNodeOnClick]=\"parentNodeSelected\"\n              (treeControlNodes)=\"selectTreeControlNodeDocument($event)\"></qms-tree>\n          </div>\n        </mat-expansion-panel>\n      </ng-container>\n    </div>\n    <div *ngIf=\"splitView\" class=\"qms-scrollbar qmslib-related-popup-splitview qmslib_related_popup_content col-6\"\n      [ngClass]=\"{\n        panel__content_item: checkedNodeList.length,\n        panel__content: !checkedNodeList.length\n      }\">\n      <div class=\"splitview-header\" *ngIf=\"selectedFolder\">\n        {{ splitViewTitle }}\n      </div>\n      <div class=\"expand-node\" *ngFor=\"let node of itemInSplitview\">\n        <mat-checkbox qms-group-options [disabled]=\"node.disabled\" color=\"default\" [checked]=\"isNodeSelected(node)\"\n          (change)=\"toggleSelectItem(node)\"></mat-checkbox>\n        <mat-icon class=\"mat-icon-rtl-mirror material-icons-outlined\" [svgIcon]=\"getNodeIcon(node)\"></mat-icon>\n        <span class=\"text-node\">{{ node.itemName }}</span>\n      </div>\n    </div>\n  </div>\n\n  <div *ngIf=\"checkedNodeList.length\" class=\"line__divider\"></div>\n\n  <div class=\"row\">\n    <div class=\"col-12 pr-0 pe-0\">\n      <div *ngIf=\"checkedNodeList.length\" class=\"panel__item qms-scrollbar\">\n        <div class=\"related__item__inline\" *ngFor=\"let item of checkedNodeList\">\n          <button *ngIf=\"item.itemName\" mat-button class=\"related__item__content\" qms-tool-tip=\"{{\n              isEllipsisActive(itemName) ? getItemChipName(item) : ''\n            }}\" mode=\"dark\">\n            <span class=\"related__item__content_name\" #itemName>{{\n              getItemChipName(item)\n              }}</span>\n            <mat-icon *ngIf=\"!(treeConfig1?.selectOne || treeConfig2?.selectOne)\"\n              (click)=\"removeCheckedNodeList(item)\">cancel</mat-icon>\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n</mat-dialog-content>\n<mat-dialog-actions align=\"end\">\n  <mat-divider class=\"w-100 mb-3\"></mat-divider>\n  <button class=\"me-2\" qms-btn-text [ngStyle]=\"{ 'margin-top': checkedNodeList.length ? '0px' : '7px' }\"\n    (click)=\"onCloseClick()\">\n    {{ LANG.CANCEL }}\n  </button>\n  <button *ngIf=\"!checkedNodeList.length\" qms-btn style=\"margin-top: 7px\"\n    [disabled]=\"isLoadingVideoFile || isLoadingImageFile\" (click)=\"onAddClick()\">\n    {{ LANG.ADD }}\n  </button>\n  <button *ngIf=\"checkedNodeList.length\" qms-btn style=\"margin-top: 0px\"\n    [disabled]=\"isLoadingVideoFile || isLoadingImageFile\" (click)=\"onAddClick()\">\n    {{ LANG.ADD }} ({{ checkedNodeList.length }})\n  </button>\n</mat-dialog-actions>\n\n<!-- \n<div id=\"qmslib_related_popup\" class=\"qmslib__related__popup__container\">\n  <div id=\"qmslib_related_popup_header\">\n    <span mat-icon-button class=\"button__close\" (click)=\"onCloseClick()\">\n      <mat-icon mat-icon>close</mat-icon>\n    </span>\n    <div *ngIf=\"canUploadImage || canUploadVideo || canUpdateVideoProperties\" id=\"qmslib_related_popup_header_001\"\n      [ngClass]=\"{\n      panel_header_height_with_video_upload: canUploadVideo,\n      panel_header_height_without_video_upload: !canUploadVideo && canUploadImage && canUpdateVideoProperties\n    }\" mat-dialog-content class=\"row\">\n      <div *ngIf=\"canUploadImage\" class=\"selected-image col-12\">\n        <div class=\"row d-flex align-items-center\">\n          <div class=\"col-md-4\">{{ moduleUploadImageName | uppercase }}</div>\n          <div class=\"col-md-8\">\n            <form>\n              <mat-form-field qms-form qms-file-upload appearance=\"fill\" class=\"example-width input-upload\">\n                <mat-icon matPrefix svgIcon=\"upload\"></mat-icon>\n                <input matInput placeholder=\"Upload file\" [formControl]=\"qmsInputImageType\" qms-file-upload-display\n                  #fileDisplay value=\"{{qmsInputImageFile? qmsInputImageFile.fileName : ''}}\"\n                  [attr.disabled]=\"isLoadingImageFile ? 'disabled' : null\" readonly>\n                <input hidden type=\"file\" [(inputFile)]=\"qmsInputImageFile\" qms-file-upload-selector #fileSelector\n                  [acceptExtensions]=\"acceptExtensions\"\n                  accept=\".pjp, .jpg, .pjpeg, .jpeg, .jfif, .png, .gif, .bmp, .webp, .tif, .tiff\"\n                  [maxSize]=\"maxVideoThumbnailSizeKB\" (change)=\"onChangeImage($event)\">\n\n                <mat-progress-spinner matSuffix mode=\"indeterminate\" diameter='20'\n                  *ngIf=\"isLoadingImageFile\"></mat-progress-spinner>\n                <div matSuffix qms-input-clear *ngIf=\"qmsInputImageFile && qmsInputImageFile.fileName\">\n                  <button qms-btn-icon color=\"light\" (click)=\"clearQMSInputImageFile()\" [disabled]=\"isLoadingImageFile\">\n                    <mat-icon>close</mat-icon>\n                  </button>\n                </div>\n\n                <mat-error *ngIf=\"qmsInputImageFile && qmsInputImageFile.typeError == 1\">\n                  {{ LANG.QMSCKEDITOR.EXTENSION_IS_NOT_SUPPORTED }}\n                </mat-error>\n              </mat-form-field>\n            </form>\n          </div>\n        </div>\n        <div class=\"row d-flex align-items-center\">\n          <div class=\"col-md-4\">{{ LANG.QMSCKEDITOR.VIDEO_IMAGE | uppercase}}:</div>\n          <div class=\"col-md-8\">\n            <mat-form-field class=\"example-width input-upload\">\n              <input matInput [(ngModel)]=\"videoData.poster\">\n            </mat-form-field>\n          </div>\n        </div>\n      </div>\n      <div class=\"selected-image col-12\">\n        <div *ngIf=\"canUploadVideo\" class=\"row d-flex align-items-center\">\n          <div class=\"col-md-4\">{{ moduleUploadFileName | uppercase }}</div>\n          <div class=\"col-md-8\">\n            <form>\n              <mat-form-field qms-form qms-file-upload appearance=\"fill\" class=\"example-width input-upload\">\n                <mat-icon matPrefix svgIcon=\"upload\"></mat-icon>\n                <input matInput placeholder=\"Upload file\" [formControl]=\"qmsInputVideoType\" qms-file-upload-display\n                  #fileDisplay value=\"{{qmsInputVideoFile? qmsInputVideoFile.fileName : ''}}\"\n                  [attr.disabled]=\"isLoadingVideoFile ? 'disabled' : null\" readonly>\n                <input hidden type=\"file\" [(inputFile)]=\"qmsInputVideoFile\" qms-file-upload-selector #fileSelector\n                  [acceptExtensions]=\"acceptExtensionsForVideo\" accept=\".mp4\" (change)=\"onChangeFile($event)\">\n\n                <mat-progress-spinner matSuffix mode=\"indeterminate\" diameter='20'\n                  *ngIf=\"isLoadingVideoFile\"></mat-progress-spinner>\n                <div matSuffix qms-input-clear *ngIf=\"qmsInputVideoFile && qmsInputVideoFile.fileName\">\n                  <button qms-btn-icon color=\"light\" (click)=\"clearQMSInputVideoFile()\" [disabled]=\"isLoadingVideoFile\">\n                    <mat-icon>close</mat-icon>\n                  </button>\n                </div>\n\n                <mat-error *ngIf=\"qmsInputVideoFile && qmsInputVideoFile.typeError == 1\">\n                  {{ LANG.QMSCKEDITOR.ACCEPT_MP4_ONLY }}\n                </mat-error>\n              </mat-form-field>\n            </form>\n          </div>\n        </div>\n        <div class=\"row d-flex align-items-center\" *ngIf=\"canUpdateVideoProperties\">\n          <div class=\"col-md-4\">{{ LANG.QMSCKEDITOR.VIDEO_SOURCE | uppercase}}:</div>\n          <div class=\"col-md-8\">\n            <mat-form-field class=\"example-width input-upload\">\n              <input matInput [(ngModel)]=\"videoData.src\">\n            </mat-form-field>\n          </div>\n        </div>\n      </div>\n      <div *ngIf=\"canUpdateVideoProperties\" class=\"selected-image col-12\">\n        <div class=\"row d-flex align-items-center\">\n          <div class=\"col-md-4\">\n            <mat-form-field class=\"example-width input-upload\">\n              <mat-label>{{ LANG.WIDTH }}</mat-label>\n              <input type=\"number\" matInput [(ngModel)]=\"videoData.width\">\n            </mat-form-field>\n          </div>\n          <div class=\"col-md-4\">\n            <mat-form-field class=\"example-width input-upload\">\n              <mat-label>{{ LANG.HEIGHT }}</mat-label>\n              <input type=\"number\" matInput [(ngModel)]=\"videoData.height\">\n            </mat-form-field>\n          </div>\n          <div class=\"col-md-4\">\n            <mat-form-field class=\"example-width input-upload\">\n              <mat-label>Id</mat-label>\n              <input matInput [(ngModel)]=\"videoData.id\">\n            </mat-form-field>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"row\">\n      <span class=\"module-name\">{{ moduleName | uppercase }}</span>\n    </div>\n  </div>\n\n  <div id=\"qmslib_related_popup_search\" class=\"input__field\">\n    <input type=\"text\" placeholder=\"{{ LANG.SEARCH }}\" matInput [formControl]=\"myControl\" [matAutocomplete]=\"auto\" />\n    <mat-icon>search</mat-icon>\n  </div>\n\n  <div class=\"line__divider\"></div>\n\n  <mat-autocomplete #auto=\"matAutocomplete\" class=\"mat-autocomplete_related-viewport\"\n    (optionSelected)=\"selectRelated($event.option.value)\" [displayWith]=\"displayWhenSelectRelatedOption\">\n    <cdk-virtual-scroll-viewport qms-scrollbar itemSize=\"10\" [class.related-viewport]=\"isInputValue\"\n      *ngIf=\"filteredOptions.length\">\n      <ng-container *ngFor=\"let type of searchOrder\">\n        <div class=\"search__module-result\" *ngIf=\"canShowSearchOption(type.value)\">\n          <span class=\"search__module-title\">{{ getTitle(type.value) }}</span>\n          <mat-option class=\"search__option\" *ngFor=\"let option of getModuleFilteredOptions(type.value)\"\n            [value]=\"option\" [disabled]=\"option.disabled\">\n            <qms-list-item type=\"image-square\">\n              <mat-icon leading-icon type=\"image-square\" [svgIcon]=\"getNodeIcon(option)\"></mat-icon>\n              <div qms-list-header>\n                <div qms-line type=\"caption\" qms-tool-tip=\"{{\n                    isEllipsisActive(searchItemResult) ? option.parentName : ''\n                  }}\" mode=\"dark\" *ngIf=\"getParentName(option)\">\n                  <span #searchItemResult class=\"search__result__parent-name\">\n                    {{ option.parentName }}\n                  </span>\n                </div>\n                <div qms-line type=\"subtitle\" class=\"search__option-name\">\n                  {{ option.itemName }}\n                </div>\n                <div class=\"caption\" *ngIf=\"option.breadcumbs && option.breadcumbs.length\">\n                  <qms-breadcrumb class=\"breadcrumb-container\" type=\"table\" numDisplayItem=\"1\"\n                    [nodes]=\"option.breadcumbs\">\n                  </qms-breadcrumb>\n                </div>\n              </div>\n              <div qms-line color=\"default-subtitle\" *ngIf=\"getItemId(option)\">\n                <span>\n                  <mat-icon class=\"material-icons-outlined search__description-icon\">local_offer</mat-icon>\n                </span>\n                {{ getItemId(option) }}\n              </div>\n            </qms-list-item>\n          </mat-option>\n        </div>\n      </ng-container>\n    </cdk-virtual-scroll-viewport>\n  </mat-autocomplete>\n\n  <div class=\"row\">\n    <div class=\"qms-scrollbar qmslib_related_popup_content\" [ngClass]=\"{\n        panel__content_item: checkedNodeList.length,\n        panel__content: !checkedNodeList.length,\n        panel__content_height_with_upload: canUploadImage && !checkedNodeList.length,\n        panel__content_item_height_with_upload: canUploadImage && checkedNodeList.length,\n        'col-6': splitView,\n        'col-12': !splitView\n      }\">\n      <ng-container *ngIf=\"treeData1.length > 0\">\n        <mat-expansion-panel hideToggle id=\"qmslib_related_popup_common_001\" [expanded]=\"isCommonExpanded\"\n          (opened)=\"isCommonExpanded = true\" (closed)=\"isCommonExpanded = false\" class=\"panel-tree\">\n          <mat-expansion-panel-header class=\"padding-5\">\n            <mat-panel-title *ngIf=\"moduleId === module.documentProcess\">\n              {{ LANG.PROCESSES | uppercase }}\n            </mat-panel-title>\n            <mat-panel-title *ngIf=\"moduleId === module.deviation\">\n              {{ LANG.DEVIATION | uppercase }}\n            </mat-panel-title>\n            <mat-panel-title *ngIf=\"moduleId === module.checklist\">\n              {{ LANG.CHECKLIST | uppercase }}\n            </mat-panel-title>\n            <mat-panel-title *ngIf=\"moduleId === module.risk\">\n              {{ LANG.ASSESSMENT | uppercase }}\n            </mat-panel-title>\n            <button qms-btn-icon class=\"related_popup_toggle-btn\">\n              <mat-icon>\n                {{\n                isCommonExpanded ? \"keyboard_arrow_up\" : \"keyboard_arrow_down\"\n                }}\n              </mat-icon>\n            </button>\n          </mat-expansion-panel-header>\n          <div id=\"qmslib_related_popup_common_002\">\n            <qms-tree [treeData]=\"treeData1\" [treeConfig]=\"treeConfig1\" [selectedData]=\"selectedData\"\n              [selectedRiskData]=\"selectedRiskData\" [disabledList]=\"disabledList\"\n              (checkBoxEvent)=\"getCommonCheckedNode($event)\"\n              (nodeExpandEvent)=\"getChildrenOfFolder($event, dataType.area)\"\n              (selectNodeEvent)=\"selectNodeTreeEvent($event)\" (getChildNodeSelectOne)=\"getChildNodeSelectOne($event)\"\n              [expandOnTitleClick]=\"!splitView\" [parentNodeOnClick]=\"parentNodeSelected\"\n              (treeControlNodes)=\"selectTreeControlNodeProcess($event)\"></qms-tree>\n          </div>\n        </mat-expansion-panel>\n      </ng-container>\n\n      <ng-container *ngIf=\"treeData2.length > 0\">\n        <div *ngIf=\"moduleId === module.documentProcess\" class=\"line__divider\"></div>\n\n        <mat-expansion-panel hideToggle *ngIf=\"moduleId === module.documentProcess\"\n          id=\"qmslib_related_popup_document_001\" [expanded]=\"isDocumentExpanded\" (opened)=\"isDocumentExpanded = true\"\n          (closed)=\"isDocumentExpanded = false\" class=\"panel-tree\">\n          <mat-expansion-panel-header class=\"padding-5\">\n            <mat-panel-title>\n              {{ LANG.DOCUMENTS | uppercase }}\n            </mat-panel-title>\n            <button qms-btn-icon class=\"related_popup_toggle-btn\">\n              <mat-icon>\n                {{\n                isDocumentExpanded\n                ? \"keyboard_arrow_up\"\n                : \"keyboard_arrow_down\"\n                }}\n              </mat-icon>\n            </button>\n          </mat-expansion-panel-header>\n          <div id=\"qmslib_related_popup_document_002\">\n            <qms-tree [treeData]=\"treeData2\" [treeConfig]=\"treeConfig2\" [selectedData]=\"selectedData2\"\n              [disabledList]=\"disabledList2\" (checkBoxEvent)=\"getDocumentCheckedNode($event)\"\n              (nodeExpandEvent)=\"getChildrenOfFolder($event, dataType.folder)\"\n              (selectNodeEvent)=\"selectNodeTree2Event($event)\" (getChildNodeSelectOne)=\"getChildNodeSelectOne($event)\"\n              [expandOnTitleClick]=\"!splitView\" [parentNodeOnClick]=\"parentNodeSelected\"\n              (treeControlNodes)=\"selectTreeControlNodeDocument($event)\"></qms-tree>\n          </div>\n        </mat-expansion-panel>\n      </ng-container>\n    </div>\n    <div *ngIf=\"splitView\" class=\"qms-scrollbar qmslib-related-popup-splitview qmslib_related_popup_content col-6\"\n      [ngClass]=\"{\n        panel__content_item: checkedNodeList.length,\n        panel__content: !checkedNodeList.length\n      }\">\n      <div class=\"splitview-header\" *ngIf=\"selectedFolder\">\n        {{ splitViewTitle }}\n      </div>\n      <div class=\"expand-node\" *ngFor=\"let node of itemInSplitview\">\n        <mat-checkbox qms-group-options [disabled]=\"node.disabled\" color=\"default\" [checked]=\"isNodeSelected(node)\"\n          (change)=\"toggleSelectItem(node)\"></mat-checkbox>\n        <mat-icon class=\"mat-icon-rtl-mirror material-icons-outlined\" [svgIcon]=\"getNodeIcon(node)\"></mat-icon>\n        <span class=\"text-node\">{{ node.itemName }}</span>\n      </div>\n    </div>\n  </div>\n\n  <div *ngIf=\"checkedNodeList.length\" class=\"line__divider\"></div>\n\n  <div class=\"row\">\n    <div class=\"col-12 pr-0 pe-0\">\n      <div *ngIf=\"checkedNodeList.length\" class=\"panel__item qms-scrollbar\">\n        <div class=\"related__item__inline\" *ngFor=\"let item of checkedNodeList\">\n          <button *ngIf=\"item.itemName\" mat-button class=\"related__item__content\" qms-tool-tip=\"{{\n              isEllipsisActive(itemName) ? getItemChipName(item) : ''\n            }}\" mode=\"dark\">\n            <span class=\"related__item__content_name\" #itemName>{{\n              getItemChipName(item)\n              }}</span>\n            <mat-icon *ngIf=\"!(treeConfig1?.selectOne || treeConfig2?.selectOne)\"\n              (click)=\"removeCheckedNodeList(item)\">cancel</mat-icon>\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"line__divider\"></div>\n\n  <div class=\"confirm__button__groups\">\n    <button *ngIf=\"!checkedNodeList.length\" qms-btn style=\"margin-top: 7px\"\n      [disabled]=\"isLoadingVideoFile || isLoadingImageFile\" (click)=\"onAddClick()\">\n      {{ LANG.ADD }}\n    </button>\n    <button *ngIf=\"checkedNodeList.length\" qms-btn style=\"margin-top: 0px\"\n      [disabled]=\"isLoadingVideoFile || isLoadingImageFile\" (click)=\"onAddClick()\">\n      {{ LANG.ADD }} ({{ checkedNodeList.length }})\n    </button>\n    <button qms-btn-text [ngStyle]=\"{ 'margin-top': checkedNodeList.length ? '0px' : '7px' }\" (click)=\"onCloseClick()\">\n      {{ LANG.CANCEL }}\n    </button>\n  </div>\n</div> -->", styles: ["::-webkit-scrollbar{width:12px}::-webkit-scrollbar-track{background:#0000001f;background-clip:content-box}::-webkit-scrollbar-thumb{background:#00000061;border-radius:20px;width:4px;border:4px solid transparent;background-clip:content-box}::-webkit-scrollbar-thumb:hover{background:#00000080;background-clip:content-box;border:4px solid transparent}.qms__popup .button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qms__danger button{border:none;color:var(--text-white);padding:0;text-align:center;text-decoration:none;display:inline-block;cursor:pointer;height:20px;width:20px;font-family:Open Sans;font-size:12px;font-weight:600;font-style:normal;line-height:16px}.qms__danger .red{background-color:var(--button-red-background);margin-left:10px}.qms__danger .yellow{background-color:var(--button-yellow-background);margin-left:10px;color:var(--popup-title-color)}.qms__danger .green{background-color:var(--button-green-background);margin-left:10px}.confirm__button__groups{margin-top:11px}.confirm__button__groups button{min-height:36px;width:auto;font-family:Open Sans;font-weight:500;font-size:14px;letter-spacing:1px;line-height:16px;padding-left:15px;padding-right:15px;margin-right:5px;float:right}.confirm__button__groups .confirm{background:var(--button-background)}.confirm__button__groups .confirm:hover{background:var(--primary-button-background-color);color:var(--primary-button-text-color)}.confirm__button__groups .confirm:disabled{cursor:not-allowed}.confirm__button__groups .cancel{background:var(--button-background)}.confirm__button__groups .cancel:hover{background:var(--primary-button-background-color);color:var(--primary-button-text-color)}.sticky-block{position:sticky;top:-1px;left:0;right:0;background:#fdfbff}.qmslib__related__popup__container .input__field{display:flex;align-items:center}.qmslib__related__popup__container .input__field input{width:100%;padding:10px;outline:none;border:none;background:var(--background-input-text)}.qmslib__related__popup__container .input__field .mat-icon{margin-left:-30px;cursor:pointer;vertical-align:middle}.qmslib__related__popup__container .line__divider{border-bottom:1px solid #ccc;height:1px;margin-top:10px;min-width:300px;max-width:100%}.qmslib__related__popup__container .button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qmslib__related__popup__container .panel__content{height:450px;overflow:auto;margin-top:12px}.qmslib__related__popup__container .panel__content_height_with_upload{height:380px}.qmslib__related__popup__container .panel__content_item{height:350px;overflow:auto;margin-top:12px}.qmslib__related__popup__container .panel__content_item_height_with_upload{height:257px}.qmslib__related__popup__container .panel-tree .mat-expansion-panel-body{padding:0 12px 12px}.qmslib__related__popup__container .mat-expansion-panel-header{height:30px;font-size:12px;letter-spacing:1px;font-family:Raleway;font-weight:600;padding:0}.qmslib__related__popup__container .mat-expansion-panel-header .mat-expansion-panel-header-title{align-items:center;margin-left:12px}.qmslib__related__popup__container .mat-expansion-panel-header .related_popup_toggle-btn{width:1.5rem;height:1.5rem;line-height:1.5rem}.qmslib__related__popup__container .mat-expansion-panel:not([class*=mat-elevation-z]){box-shadow:none}.qmslib__related__popup__container .panel__item{height:100px;margin-top:12px;overflow-x:hidden;overflow-y:auto;padding-right:5px;width:100%;max-width:100%;display:flex;flex-wrap:wrap;align-content:flex-start}.qmslib__related__popup__container .panel__item .related__item__inline{max-width:100%}.qmslib__related__popup__container .panel__item .related__item__content{height:32px;line-height:32px;background-color:var(--related-item-background);max-width:100%;margin-bottom:5px;margin-left:2.5px;margin-right:2.5px}.qmslib__related__popup__container .panel__item .related__item__content .mat-icon{color:var(--related-mat-icon-color);font-size:24px}.qmslib__related__popup__container .panel__item .related__item__content span.related__item__content_name{display:inline-block;min-width:calc(100% - 13px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:278px}.qmslib__related__popup__container .qmslib-related-popup-splitview{background-color:#fff;border-left:1px solid #ccc;height:450px;overflow-y:auto;margin-top:12px}.qmslib__related__popup__container .qmslib-related-popup-splitview.panel__content{height:450px;overflow:auto;margin-top:12px}.qmslib__related__popup__container .qmslib-related-popup-splitview.panel__content_item{height:350px;overflow:auto;margin-top:12px}.qmslib__related__popup__container .qmslib-related-popup-splitview .splitview-header{font-size:12px;letter-spacing:1px;font-family:RALEWAY;font-weight:600;display:flex;align-items:center}.qmslib__related__popup__container .qmslib-related-popup-splitview .mat-mdc-checkbox.qms-group-options{padding:0}.qmslib__related__popup__container .qmslib-related-popup-splitview .mat-mdc-checkbox.qms-group-options .mat-checkbox-inner-container{margin-right:11px}.qmslib__related__popup__container .qmslib-related-popup-splitview .mat-mdc-checkbox.qms-group-options.mat-checkbox-checked{background:transparent!important}.qmslib__related__popup__container .qmslib-related-popup-splitview .expand-node{margin-left:8px;display:flex;align-items:center;min-height:40px}.qmslib__related__popup__container .qmslib-related-popup-splitview .expand-node .mat-icon{color:#0009;margin-right:17px;min-width:fit-content}.qmslib__related__popup__container .qmslib-related-popup-splitview .expand-node .mat-icon svg{display:block;min-width:fit-content}.qmslib__related__popup__container .module-name{margin-top:10px;display:block;font-weight:600;font-family:Raleway}.qmslib__related__popup__container input::-webkit-outer-spin-button,.qmslib__related__popup__container input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.qmslib__related__popup__container input[type=number]{-moz-appearance:textfield}.qmslib__related__popup__container .panel_header_height_with_video_upload{height:350px}.qmslib__related__popup__container .panel_header_height_without_video_upload{height:300px}cdk-virtual-scroll-viewport{overflow-x:hidden}cdk-virtual-scroll-viewport .search__module-result{margin:1.5rem;padding:0 0 .5rem 0px}cdk-virtual-scroll-viewport .search__module-result .search__module-title{font-size:14px;font-weight:600}cdk-virtual-scroll-viewport .search__module-result .search__option{height:auto;line-height:normal;padding:8px 0;border-bottom:1px solid #e0e0e0}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item.mat-2-line.image-item{height:auto}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content{margin:0;border-bottom:none}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .wrap-image.image-square{width:2.5rem;height:100%;background:transparent;align-self:center;margin-right:0}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .wrap-image.image-square img{width:24px;height:24px}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .material-icons-outlined.leading-icon,cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content mat-icon.leading-icon{padding:4px 0 4px 4px}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .subtitle{font-weight:400}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .caption{overflow:hidden;line-height:normal;white-space:normal;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;padding:0;margin:0}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .caption span.search__result__parent-name{display:inline-block;width:auto;width:calc(100% - 13px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .default-subtitle{color:#00000061}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .search__description-icon{margin-right:0;width:12px;height:12px;font-size:12px}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .qms-list-text{border-bottom:none}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .breadcrumb-container .qms-breadcrumb-item .mat-icon{font-size:16px!important;padding-bottom:1px}cdk-virtual-scroll-viewport .search__module-result .mat-mdc-option[aria-disabled=true] .subtitle{color:#00000061}cdk-virtual-scroll-viewport .search__module-result .mat-mdc-option[aria-disabled=true] .breadcrumb-container .qms-breadcrumb-item .mat-icon{color:#00000061}cdk-virtual-scroll-viewport .search__module-result .mat-mdc-option[aria-disabled=true] .breadcrumb-container .qms-breadcrumb-item-text{color:#00000061}cdk-virtual-scroll-viewport .search__module-result svg{display:block}#qmslib_related_popup_header_001{width:100%;padding:0;font-weight:600;font-family:Raleway;margin:0}#qmslib_related_popup_header_001 .selected-image{padding-bottom:10px;width:100%}#qmslib_related_popup_header_001 .selected-image .input-upload,#qmslib_related_popup_header_001 .selected-image .module-name{width:100%;height:60px}.padding-5{padding:5px}.mat-mdc-autocomplete_related-viewport{height:100%;max-height:100%!important}.mat-mdc-autocomplete_related-viewport .cdk-virtual-scroll-content-wrapper{width:100%}.mat-mdc-autocomplete_related-viewport .related-viewport{min-height:300px}\n"], dependencies: [{ kind: "directive", type: i8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i8.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i7$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i9.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i9.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i9.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "component", type: i9$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i14.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i9$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: i8.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i24.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "component", type: i24.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: i23.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i11.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i11.MatLabel, selector: "mat-label" }, { kind: "directive", type: i11.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i11.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i11.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i1$2.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: QMSButton, selector: "button[qms-btn], button[qms-btn-lg], button[qms-btn-outlined],\n               button[qms-btn-outlined-lg], button[qms-btn-text], button[qms-btn-text-lg],\n               button[qms-btn-fab],button[qms-btn-fab-sm],button[qms-btn-fab-ext],\n               button[qms-btn-fab-outlined],button[qms-btn-fab-outlined-sm],button[qms-btn-fab-outlined-ext]", inputs: ["disabled", "color"], exportAs: ["qmsButton"] }, { kind: "component", type: QMSButtonIcon, selector: "button[qms-btn-icon]", inputs: ["disabled", "color", "active"], exportAs: ["qmsButtonIcon"] }, { kind: "component", type: i16.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: QMSListItem, selector: "qms-list-item", inputs: ["type", "disabled"] }, { kind: "directive", type: QMSListLeadingIcon, selector: "[leading-icon]" }, { kind: "directive", type: QMSListLine, selector: "[qms-line]", inputs: ["size", "type", "color"] }, { kind: "directive", type: QMSListHeader, selector: "[qms-list-header]" }, { kind: "directive", type: QMSInputClearDirective, selector: "[qms-input-clear]" }, { kind: "directive", type: QMSFormFieldDirective, selector: "[qms-form]" }, { kind: "directive", type: QMSGroupOptionDirective, selector: "[qms-group-options]", inputs: ["label"] }, { kind: "directive", type: AutocompleteOffDirective, selector: "[qms-group-options]" }, { kind: "directive", type: QMSFileUploadDirective, selector: "[qms-file-upload]", inputs: ["isLoading"] }, { kind: "directive", type: QMSFileUploadDisplayDirective, selector: "[qms-file-upload-display]", inputs: ["value"] }, { kind: "directive", type: QMSFileUploadSelectorDirective, selector: "[qms-file-upload-selector]", inputs: ["inputFile", "acceptExtensions", "maxSize"], outputs: ["inputFileChange", "onFileUploaded"] }, { kind: "directive", type: QMSScrollbarDirective, selector: "[qms-scrollbar]", inputs: ["isNoneBackground"] }, { kind: "directive", type: QMSToolTipRendererDirective, selector: "[qms-tool-tip]", inputs: ["showToolTip", "mode", "qms-tool-tip", "contentTemplate", "position"] }, { kind: "component", type: QMSBreadcrumb, selector: "qms-breadcrumb", inputs: ["nodes", "type", "maxLine", "numDisplayItem", "onlyItem", "disabledLastItem"], outputs: ["onItemClick"] }, { kind: "component", type: TreeComponent, selector: "qms-tree", inputs: ["treeData", "treeConfig", "selectedData", "selectedRiskData", "disabledList", "expandOnTitleClick", "expandToChildNode", "parentNodeOnClick"], outputs: ["selectNodeEvent", "selectFolderEvent", "checkBoxEvent", "childCheckedEvent", "nodeExpandEvent", "treeControlNodes", "nodeCondensedEvent"] }, { kind: "pipe", type: i7.UpperCasePipe, name: "uppercase" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RelatedPopupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'qms-related-popup', encapsulation: ViewEncapsulation.None, template: "<h3 mat-dialog-title class=\"more-action\">\n  <span class=\"module-name\">{{ moduleName | uppercase }}</span>\n  <button matDialogClose class=\"btn-close-dialog\" color=\"light\" qms-btn-icon (click)=\"onCloseClick()\">\n    <mat-icon>close</mat-icon>\n  </button>\n</h3>\n<mat-dialog-content>\n  <!-- Ckeditor Using -->\n  <div *ngIf=\"canUploadImage || canUploadVideo || canUpdateVideoProperties\" id=\"qmslib_related_popup_header_001\"\n    [ngClass]=\"{\n          panel_header_height_with_video_upload: canUploadVideo,\n          panel_header_height_without_video_upload: !canUploadVideo && canUploadImage && canUpdateVideoProperties\n        }\" mat-dialog-content class=\"row\">\n    <div *ngIf=\"canUploadImage\" class=\"selected-image col-12\">\n      <div class=\"row d-flex align-items-center\">\n        <div class=\"col-md-4\">{{ moduleUploadImageName | uppercase }}</div>\n        <div class=\"col-md-8\">\n          <form>\n            <mat-form-field qms-form qms-file-upload appearance=\"fill\" class=\"example-width input-upload\">\n              <mat-icon matPrefix svgIcon=\"upload\"></mat-icon>\n              <input matInput placeholder=\"Upload file\" [formControl]=\"qmsInputImageType\" qms-file-upload-display\n                #fileDisplay value=\"{{qmsInputImageFile? qmsInputImageFile.fileName : ''}}\"\n                [attr.disabled]=\"isLoadingImageFile ? 'disabled' : null\" readonly>\n              <input hidden type=\"file\" [(inputFile)]=\"qmsInputImageFile\" qms-file-upload-selector #fileSelector\n                [acceptExtensions]=\"acceptExtensions\"\n                accept=\".pjp, .jpg, .pjpeg, .jpeg, .jfif, .png, .gif, .bmp, .webp, .tif, .tiff\"\n                [maxSize]=\"maxVideoThumbnailSizeKB\" (change)=\"onChangeImage($event)\">\n\n              <mat-progress-spinner matSuffix mode=\"indeterminate\" diameter='20'\n                *ngIf=\"isLoadingImageFile\"></mat-progress-spinner>\n              <div matSuffix qms-input-clear *ngIf=\"qmsInputImageFile && qmsInputImageFile.fileName\">\n                <button qms-btn-icon color=\"light\" (click)=\"clearQMSInputImageFile()\" [disabled]=\"isLoadingImageFile\">\n                  <mat-icon>close</mat-icon>\n                </button>\n              </div>\n\n              <mat-error *ngIf=\"qmsInputImageFile && qmsInputImageFile.typeError == 1\">\n                {{ LANG.QMSCKEDITOR.EXTENSION_IS_NOT_SUPPORTED }}\n              </mat-error>\n            </mat-form-field>\n          </form>\n        </div>\n      </div>\n      <div class=\"row d-flex align-items-center\">\n        <div class=\"col-md-4\">{{ LANG.QMSCKEDITOR.VIDEO_IMAGE | uppercase}}:</div>\n        <div class=\"col-md-8\">\n          <mat-form-field class=\"example-width input-upload\">\n            <input matInput [(ngModel)]=\"videoData.poster\">\n          </mat-form-field>\n        </div>\n      </div>\n    </div>\n    <div class=\"selected-image col-12\">\n      <div *ngIf=\"canUploadVideo\" class=\"row d-flex align-items-center\">\n        <div class=\"col-md-4\">{{ moduleUploadFileName | uppercase }}</div>\n        <div class=\"col-md-8\">\n          <form>\n            <mat-form-field qms-form qms-file-upload appearance=\"fill\" class=\"example-width input-upload\">\n              <mat-icon matPrefix svgIcon=\"upload\"></mat-icon>\n              <input matInput placeholder=\"Upload file\" [formControl]=\"qmsInputVideoType\" qms-file-upload-display\n                #fileDisplay value=\"{{qmsInputVideoFile? qmsInputVideoFile.fileName : ''}}\"\n                [attr.disabled]=\"isLoadingVideoFile ? 'disabled' : null\" readonly>\n              <input hidden type=\"file\" [(inputFile)]=\"qmsInputVideoFile\" qms-file-upload-selector #fileSelector\n                [acceptExtensions]=\"acceptExtensionsForVideo\" accept=\".mp4\" (change)=\"onChangeFile($event)\">\n\n              <mat-progress-spinner matSuffix mode=\"indeterminate\" diameter='20'\n                *ngIf=\"isLoadingVideoFile\"></mat-progress-spinner>\n              <div matSuffix qms-input-clear *ngIf=\"qmsInputVideoFile && qmsInputVideoFile.fileName\">\n                <button qms-btn-icon color=\"light\" (click)=\"clearQMSInputVideoFile()\" [disabled]=\"isLoadingVideoFile\">\n                  <mat-icon>close</mat-icon>\n                </button>\n              </div>\n\n              <mat-error *ngIf=\"qmsInputVideoFile && qmsInputVideoFile.typeError == 1\">\n                {{ LANG.QMSCKEDITOR.ACCEPT_MP4_ONLY }}\n              </mat-error>\n            </mat-form-field>\n          </form>\n        </div>\n      </div>\n      <div class=\"row d-flex align-items-center\" *ngIf=\"canUpdateVideoProperties\">\n        <div class=\"col-md-4\">{{ LANG.QMSCKEDITOR.VIDEO_SOURCE | uppercase}}:</div>\n        <div class=\"col-md-8\">\n          <mat-form-field class=\"example-width input-upload\">\n            <input matInput [(ngModel)]=\"videoData.src\">\n          </mat-form-field>\n        </div>\n      </div>\n    </div>\n    <div *ngIf=\"canUpdateVideoProperties\" class=\"selected-image col-12\">\n      <div class=\"row d-flex align-items-center\">\n        <div class=\"col-md-4\">\n          <mat-form-field class=\"example-width input-upload\">\n            <mat-label>{{ LANG.WIDTH }}</mat-label>\n            <input type=\"number\" matInput [(ngModel)]=\"videoData.width\">\n          </mat-form-field>\n        </div>\n        <div class=\"col-md-4\">\n          <mat-form-field class=\"example-width input-upload\">\n            <mat-label>{{ LANG.HEIGHT }}</mat-label>\n            <input type=\"number\" matInput [(ngModel)]=\"videoData.height\">\n          </mat-form-field>\n        </div>\n        <div class=\"col-md-4\">\n          <mat-form-field class=\"example-width input-upload\">\n            <mat-label>Id</mat-label>\n            <input matInput [(ngModel)]=\"videoData.id\">\n          </mat-form-field>\n        </div>\n      </div>\n    </div>\n  </div>\n  <!-- Related module -->\n  <div class=\"sticky-block\">\n    <input type=\"text\" placeholder=\"{{ LANG.SEARCH }}\" matInput [formControl]=\"myControl\" [matAutocomplete]=\"auto\" />\n    <mat-icon>search</mat-icon>\n  </div>\n  <div class=\"line__divider\"></div>\n\n  <mat-autocomplete #auto=\"matAutocomplete\" class=\"mat-autocomplete_related-viewport\"\n    (optionSelected)=\"selectRelated($event.option.value)\" [displayWith]=\"displayWhenSelectRelatedOption\">\n    <cdk-virtual-scroll-viewport qms-scrollbar itemSize=\"10\" [class.related-viewport]=\"isInputValue\"\n      *ngIf=\"filteredOptions.length\">\n      <ng-container *ngFor=\"let type of searchOrder\">\n        <div class=\"search__module-result\" *ngIf=\"canShowSearchOption(type.value)\">\n          <span class=\"search__module-title\">{{ getTitle(type.value) }}</span>\n          <mat-option class=\"search__option\" *ngFor=\"let option of getModuleFilteredOptions(type.value)\"\n            [value]=\"option\" [disabled]=\"option.disabled\">\n            <qms-list-item type=\"image-square\">\n              <mat-icon leading-icon type=\"image-square\" [svgIcon]=\"getNodeIcon(option)\"></mat-icon>\n              <div qms-list-header>\n                <div qms-line type=\"caption\" qms-tool-tip=\"{{\n                    isEllipsisActive(searchItemResult) ? option.parentName : ''\n                  }}\" mode=\"dark\" *ngIf=\"getParentName(option)\">\n                  <span #searchItemResult class=\"search__result__parent-name\">\n                    {{ option.parentName }}\n                  </span>\n                </div>\n                <div qms-line type=\"subtitle\" class=\"search__option-name\">\n                  {{ option.itemName }}\n                </div>\n                <div class=\"caption\" *ngIf=\"option.breadcumbs && option.breadcumbs.length\">\n                  <qms-breadcrumb class=\"breadcrumb-container\" type=\"table\" numDisplayItem=\"1\"\n                    [nodes]=\"option.breadcumbs\">\n                  </qms-breadcrumb>\n                </div>\n              </div>\n              <div qms-line color=\"default-subtitle\" *ngIf=\"getItemId(option)\">\n                <span>\n                  <mat-icon class=\"material-icons-outlined search__description-icon\">local_offer</mat-icon>\n                </span>\n                {{ getItemId(option) }}\n              </div>\n            </qms-list-item>\n          </mat-option>\n        </div>\n      </ng-container>\n    </cdk-virtual-scroll-viewport>\n  </mat-autocomplete>\n\n  <div class=\"row\">\n    <div class=\"qms-scrollbar qmslib_related_popup_content\" [ngClass]=\"{\n        panel__content_item: checkedNodeList.length,\n        panel__content: !checkedNodeList.length,\n        panel__content_height_with_upload: canUploadImage && !checkedNodeList.length,\n        panel__content_item_height_with_upload: canUploadImage && checkedNodeList.length,\n        'col-6': splitView,\n        'col-12': !splitView\n      }\">\n      <ng-container *ngIf=\"treeData1.length > 0\">\n        <mat-expansion-panel hideToggle id=\"qmslib_related_popup_common_001\" [expanded]=\"isCommonExpanded\"\n          (opened)=\"isCommonExpanded = true\" (closed)=\"isCommonExpanded = false\" class=\"panel-tree\">\n          <mat-expansion-panel-header class=\"padding-5\">\n            <mat-panel-title *ngIf=\"moduleId === module.documentProcess\">\n              {{ LANG.PROCESSES | uppercase }}\n            </mat-panel-title>\n            <mat-panel-title *ngIf=\"moduleId === module.deviation\">\n              {{ LANG.DEVIATION | uppercase }}\n            </mat-panel-title>\n            <mat-panel-title *ngIf=\"moduleId === module.checklist\">\n              {{ LANG.CHECKLIST | uppercase }}\n            </mat-panel-title>\n            <mat-panel-title *ngIf=\"moduleId === module.risk\">\n              {{ LANG.ASSESSMENT | uppercase }}\n            </mat-panel-title>\n            <button qms-btn-icon class=\"related_popup_toggle-btn\">\n              <mat-icon>\n                {{\n                isCommonExpanded ? \"keyboard_arrow_up\" : \"keyboard_arrow_down\"\n                }}\n              </mat-icon>\n            </button>\n          </mat-expansion-panel-header>\n          <div id=\"qmslib_related_popup_common_002\">\n            <qms-tree [treeData]=\"treeData1\" [treeConfig]=\"treeConfig1\" [selectedData]=\"selectedData\"\n              [selectedRiskData]=\"selectedRiskData\" [disabledList]=\"disabledList\"\n              (checkBoxEvent)=\"getCommonCheckedNode($event)\"\n              (nodeExpandEvent)=\"getChildrenOfFolder($event, dataType.area)\"\n              (selectNodeEvent)=\"selectNodeTreeEvent($event)\" (getChildNodeSelectOne)=\"getChildNodeSelectOne($event)\"\n              [expandOnTitleClick]=\"!splitView\" [parentNodeOnClick]=\"parentNodeSelected\"\n              (treeControlNodes)=\"selectTreeControlNodeProcess($event)\"></qms-tree>\n          </div>\n        </mat-expansion-panel>\n      </ng-container>\n\n      <ng-container *ngIf=\"treeData2.length > 0\">\n        <div *ngIf=\"moduleId === module.documentProcess\" class=\"line__divider\"></div>\n\n        <mat-expansion-panel hideToggle *ngIf=\"moduleId === module.documentProcess\"\n          id=\"qmslib_related_popup_document_001\" [expanded]=\"isDocumentExpanded\" (opened)=\"isDocumentExpanded = true\"\n          (closed)=\"isDocumentExpanded = false\" class=\"panel-tree\">\n          <mat-expansion-panel-header class=\"padding-5\">\n            <mat-panel-title>\n              {{ LANG.DOCUMENTS | uppercase }}\n            </mat-panel-title>\n            <button qms-btn-icon class=\"related_popup_toggle-btn\">\n              <mat-icon>\n                {{\n                isDocumentExpanded\n                ? \"keyboard_arrow_up\"\n                : \"keyboard_arrow_down\"\n                }}\n              </mat-icon>\n            </button>\n          </mat-expansion-panel-header>\n          <div id=\"qmslib_related_popup_document_002\">\n            <qms-tree [treeData]=\"treeData2\" [treeConfig]=\"treeConfig2\" [selectedData]=\"selectedData2\"\n              [disabledList]=\"disabledList2\" (checkBoxEvent)=\"getDocumentCheckedNode($event)\"\n              (nodeExpandEvent)=\"getChildrenOfFolder($event, dataType.folder)\"\n              (selectNodeEvent)=\"selectNodeTree2Event($event)\" (getChildNodeSelectOne)=\"getChildNodeSelectOne($event)\"\n              [expandOnTitleClick]=\"!splitView\" [parentNodeOnClick]=\"parentNodeSelected\"\n              (treeControlNodes)=\"selectTreeControlNodeDocument($event)\"></qms-tree>\n          </div>\n        </mat-expansion-panel>\n      </ng-container>\n    </div>\n    <div *ngIf=\"splitView\" class=\"qms-scrollbar qmslib-related-popup-splitview qmslib_related_popup_content col-6\"\n      [ngClass]=\"{\n        panel__content_item: checkedNodeList.length,\n        panel__content: !checkedNodeList.length\n      }\">\n      <div class=\"splitview-header\" *ngIf=\"selectedFolder\">\n        {{ splitViewTitle }}\n      </div>\n      <div class=\"expand-node\" *ngFor=\"let node of itemInSplitview\">\n        <mat-checkbox qms-group-options [disabled]=\"node.disabled\" color=\"default\" [checked]=\"isNodeSelected(node)\"\n          (change)=\"toggleSelectItem(node)\"></mat-checkbox>\n        <mat-icon class=\"mat-icon-rtl-mirror material-icons-outlined\" [svgIcon]=\"getNodeIcon(node)\"></mat-icon>\n        <span class=\"text-node\">{{ node.itemName }}</span>\n      </div>\n    </div>\n  </div>\n\n  <div *ngIf=\"checkedNodeList.length\" class=\"line__divider\"></div>\n\n  <div class=\"row\">\n    <div class=\"col-12 pr-0 pe-0\">\n      <div *ngIf=\"checkedNodeList.length\" class=\"panel__item qms-scrollbar\">\n        <div class=\"related__item__inline\" *ngFor=\"let item of checkedNodeList\">\n          <button *ngIf=\"item.itemName\" mat-button class=\"related__item__content\" qms-tool-tip=\"{{\n              isEllipsisActive(itemName) ? getItemChipName(item) : ''\n            }}\" mode=\"dark\">\n            <span class=\"related__item__content_name\" #itemName>{{\n              getItemChipName(item)\n              }}</span>\n            <mat-icon *ngIf=\"!(treeConfig1?.selectOne || treeConfig2?.selectOne)\"\n              (click)=\"removeCheckedNodeList(item)\">cancel</mat-icon>\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n</mat-dialog-content>\n<mat-dialog-actions align=\"end\">\n  <mat-divider class=\"w-100 mb-3\"></mat-divider>\n  <button class=\"me-2\" qms-btn-text [ngStyle]=\"{ 'margin-top': checkedNodeList.length ? '0px' : '7px' }\"\n    (click)=\"onCloseClick()\">\n    {{ LANG.CANCEL }}\n  </button>\n  <button *ngIf=\"!checkedNodeList.length\" qms-btn style=\"margin-top: 7px\"\n    [disabled]=\"isLoadingVideoFile || isLoadingImageFile\" (click)=\"onAddClick()\">\n    {{ LANG.ADD }}\n  </button>\n  <button *ngIf=\"checkedNodeList.length\" qms-btn style=\"margin-top: 0px\"\n    [disabled]=\"isLoadingVideoFile || isLoadingImageFile\" (click)=\"onAddClick()\">\n    {{ LANG.ADD }} ({{ checkedNodeList.length }})\n  </button>\n</mat-dialog-actions>\n\n<!-- \n<div id=\"qmslib_related_popup\" class=\"qmslib__related__popup__container\">\n  <div id=\"qmslib_related_popup_header\">\n    <span mat-icon-button class=\"button__close\" (click)=\"onCloseClick()\">\n      <mat-icon mat-icon>close</mat-icon>\n    </span>\n    <div *ngIf=\"canUploadImage || canUploadVideo || canUpdateVideoProperties\" id=\"qmslib_related_popup_header_001\"\n      [ngClass]=\"{\n      panel_header_height_with_video_upload: canUploadVideo,\n      panel_header_height_without_video_upload: !canUploadVideo && canUploadImage && canUpdateVideoProperties\n    }\" mat-dialog-content class=\"row\">\n      <div *ngIf=\"canUploadImage\" class=\"selected-image col-12\">\n        <div class=\"row d-flex align-items-center\">\n          <div class=\"col-md-4\">{{ moduleUploadImageName | uppercase }}</div>\n          <div class=\"col-md-8\">\n            <form>\n              <mat-form-field qms-form qms-file-upload appearance=\"fill\" class=\"example-width input-upload\">\n                <mat-icon matPrefix svgIcon=\"upload\"></mat-icon>\n                <input matInput placeholder=\"Upload file\" [formControl]=\"qmsInputImageType\" qms-file-upload-display\n                  #fileDisplay value=\"{{qmsInputImageFile? qmsInputImageFile.fileName : ''}}\"\n                  [attr.disabled]=\"isLoadingImageFile ? 'disabled' : null\" readonly>\n                <input hidden type=\"file\" [(inputFile)]=\"qmsInputImageFile\" qms-file-upload-selector #fileSelector\n                  [acceptExtensions]=\"acceptExtensions\"\n                  accept=\".pjp, .jpg, .pjpeg, .jpeg, .jfif, .png, .gif, .bmp, .webp, .tif, .tiff\"\n                  [maxSize]=\"maxVideoThumbnailSizeKB\" (change)=\"onChangeImage($event)\">\n\n                <mat-progress-spinner matSuffix mode=\"indeterminate\" diameter='20'\n                  *ngIf=\"isLoadingImageFile\"></mat-progress-spinner>\n                <div matSuffix qms-input-clear *ngIf=\"qmsInputImageFile && qmsInputImageFile.fileName\">\n                  <button qms-btn-icon color=\"light\" (click)=\"clearQMSInputImageFile()\" [disabled]=\"isLoadingImageFile\">\n                    <mat-icon>close</mat-icon>\n                  </button>\n                </div>\n\n                <mat-error *ngIf=\"qmsInputImageFile && qmsInputImageFile.typeError == 1\">\n                  {{ LANG.QMSCKEDITOR.EXTENSION_IS_NOT_SUPPORTED }}\n                </mat-error>\n              </mat-form-field>\n            </form>\n          </div>\n        </div>\n        <div class=\"row d-flex align-items-center\">\n          <div class=\"col-md-4\">{{ LANG.QMSCKEDITOR.VIDEO_IMAGE | uppercase}}:</div>\n          <div class=\"col-md-8\">\n            <mat-form-field class=\"example-width input-upload\">\n              <input matInput [(ngModel)]=\"videoData.poster\">\n            </mat-form-field>\n          </div>\n        </div>\n      </div>\n      <div class=\"selected-image col-12\">\n        <div *ngIf=\"canUploadVideo\" class=\"row d-flex align-items-center\">\n          <div class=\"col-md-4\">{{ moduleUploadFileName | uppercase }}</div>\n          <div class=\"col-md-8\">\n            <form>\n              <mat-form-field qms-form qms-file-upload appearance=\"fill\" class=\"example-width input-upload\">\n                <mat-icon matPrefix svgIcon=\"upload\"></mat-icon>\n                <input matInput placeholder=\"Upload file\" [formControl]=\"qmsInputVideoType\" qms-file-upload-display\n                  #fileDisplay value=\"{{qmsInputVideoFile? qmsInputVideoFile.fileName : ''}}\"\n                  [attr.disabled]=\"isLoadingVideoFile ? 'disabled' : null\" readonly>\n                <input hidden type=\"file\" [(inputFile)]=\"qmsInputVideoFile\" qms-file-upload-selector #fileSelector\n                  [acceptExtensions]=\"acceptExtensionsForVideo\" accept=\".mp4\" (change)=\"onChangeFile($event)\">\n\n                <mat-progress-spinner matSuffix mode=\"indeterminate\" diameter='20'\n                  *ngIf=\"isLoadingVideoFile\"></mat-progress-spinner>\n                <div matSuffix qms-input-clear *ngIf=\"qmsInputVideoFile && qmsInputVideoFile.fileName\">\n                  <button qms-btn-icon color=\"light\" (click)=\"clearQMSInputVideoFile()\" [disabled]=\"isLoadingVideoFile\">\n                    <mat-icon>close</mat-icon>\n                  </button>\n                </div>\n\n                <mat-error *ngIf=\"qmsInputVideoFile && qmsInputVideoFile.typeError == 1\">\n                  {{ LANG.QMSCKEDITOR.ACCEPT_MP4_ONLY }}\n                </mat-error>\n              </mat-form-field>\n            </form>\n          </div>\n        </div>\n        <div class=\"row d-flex align-items-center\" *ngIf=\"canUpdateVideoProperties\">\n          <div class=\"col-md-4\">{{ LANG.QMSCKEDITOR.VIDEO_SOURCE | uppercase}}:</div>\n          <div class=\"col-md-8\">\n            <mat-form-field class=\"example-width input-upload\">\n              <input matInput [(ngModel)]=\"videoData.src\">\n            </mat-form-field>\n          </div>\n        </div>\n      </div>\n      <div *ngIf=\"canUpdateVideoProperties\" class=\"selected-image col-12\">\n        <div class=\"row d-flex align-items-center\">\n          <div class=\"col-md-4\">\n            <mat-form-field class=\"example-width input-upload\">\n              <mat-label>{{ LANG.WIDTH }}</mat-label>\n              <input type=\"number\" matInput [(ngModel)]=\"videoData.width\">\n            </mat-form-field>\n          </div>\n          <div class=\"col-md-4\">\n            <mat-form-field class=\"example-width input-upload\">\n              <mat-label>{{ LANG.HEIGHT }}</mat-label>\n              <input type=\"number\" matInput [(ngModel)]=\"videoData.height\">\n            </mat-form-field>\n          </div>\n          <div class=\"col-md-4\">\n            <mat-form-field class=\"example-width input-upload\">\n              <mat-label>Id</mat-label>\n              <input matInput [(ngModel)]=\"videoData.id\">\n            </mat-form-field>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"row\">\n      <span class=\"module-name\">{{ moduleName | uppercase }}</span>\n    </div>\n  </div>\n\n  <div id=\"qmslib_related_popup_search\" class=\"input__field\">\n    <input type=\"text\" placeholder=\"{{ LANG.SEARCH }}\" matInput [formControl]=\"myControl\" [matAutocomplete]=\"auto\" />\n    <mat-icon>search</mat-icon>\n  </div>\n\n  <div class=\"line__divider\"></div>\n\n  <mat-autocomplete #auto=\"matAutocomplete\" class=\"mat-autocomplete_related-viewport\"\n    (optionSelected)=\"selectRelated($event.option.value)\" [displayWith]=\"displayWhenSelectRelatedOption\">\n    <cdk-virtual-scroll-viewport qms-scrollbar itemSize=\"10\" [class.related-viewport]=\"isInputValue\"\n      *ngIf=\"filteredOptions.length\">\n      <ng-container *ngFor=\"let type of searchOrder\">\n        <div class=\"search__module-result\" *ngIf=\"canShowSearchOption(type.value)\">\n          <span class=\"search__module-title\">{{ getTitle(type.value) }}</span>\n          <mat-option class=\"search__option\" *ngFor=\"let option of getModuleFilteredOptions(type.value)\"\n            [value]=\"option\" [disabled]=\"option.disabled\">\n            <qms-list-item type=\"image-square\">\n              <mat-icon leading-icon type=\"image-square\" [svgIcon]=\"getNodeIcon(option)\"></mat-icon>\n              <div qms-list-header>\n                <div qms-line type=\"caption\" qms-tool-tip=\"{{\n                    isEllipsisActive(searchItemResult) ? option.parentName : ''\n                  }}\" mode=\"dark\" *ngIf=\"getParentName(option)\">\n                  <span #searchItemResult class=\"search__result__parent-name\">\n                    {{ option.parentName }}\n                  </span>\n                </div>\n                <div qms-line type=\"subtitle\" class=\"search__option-name\">\n                  {{ option.itemName }}\n                </div>\n                <div class=\"caption\" *ngIf=\"option.breadcumbs && option.breadcumbs.length\">\n                  <qms-breadcrumb class=\"breadcrumb-container\" type=\"table\" numDisplayItem=\"1\"\n                    [nodes]=\"option.breadcumbs\">\n                  </qms-breadcrumb>\n                </div>\n              </div>\n              <div qms-line color=\"default-subtitle\" *ngIf=\"getItemId(option)\">\n                <span>\n                  <mat-icon class=\"material-icons-outlined search__description-icon\">local_offer</mat-icon>\n                </span>\n                {{ getItemId(option) }}\n              </div>\n            </qms-list-item>\n          </mat-option>\n        </div>\n      </ng-container>\n    </cdk-virtual-scroll-viewport>\n  </mat-autocomplete>\n\n  <div class=\"row\">\n    <div class=\"qms-scrollbar qmslib_related_popup_content\" [ngClass]=\"{\n        panel__content_item: checkedNodeList.length,\n        panel__content: !checkedNodeList.length,\n        panel__content_height_with_upload: canUploadImage && !checkedNodeList.length,\n        panel__content_item_height_with_upload: canUploadImage && checkedNodeList.length,\n        'col-6': splitView,\n        'col-12': !splitView\n      }\">\n      <ng-container *ngIf=\"treeData1.length > 0\">\n        <mat-expansion-panel hideToggle id=\"qmslib_related_popup_common_001\" [expanded]=\"isCommonExpanded\"\n          (opened)=\"isCommonExpanded = true\" (closed)=\"isCommonExpanded = false\" class=\"panel-tree\">\n          <mat-expansion-panel-header class=\"padding-5\">\n            <mat-panel-title *ngIf=\"moduleId === module.documentProcess\">\n              {{ LANG.PROCESSES | uppercase }}\n            </mat-panel-title>\n            <mat-panel-title *ngIf=\"moduleId === module.deviation\">\n              {{ LANG.DEVIATION | uppercase }}\n            </mat-panel-title>\n            <mat-panel-title *ngIf=\"moduleId === module.checklist\">\n              {{ LANG.CHECKLIST | uppercase }}\n            </mat-panel-title>\n            <mat-panel-title *ngIf=\"moduleId === module.risk\">\n              {{ LANG.ASSESSMENT | uppercase }}\n            </mat-panel-title>\n            <button qms-btn-icon class=\"related_popup_toggle-btn\">\n              <mat-icon>\n                {{\n                isCommonExpanded ? \"keyboard_arrow_up\" : \"keyboard_arrow_down\"\n                }}\n              </mat-icon>\n            </button>\n          </mat-expansion-panel-header>\n          <div id=\"qmslib_related_popup_common_002\">\n            <qms-tree [treeData]=\"treeData1\" [treeConfig]=\"treeConfig1\" [selectedData]=\"selectedData\"\n              [selectedRiskData]=\"selectedRiskData\" [disabledList]=\"disabledList\"\n              (checkBoxEvent)=\"getCommonCheckedNode($event)\"\n              (nodeExpandEvent)=\"getChildrenOfFolder($event, dataType.area)\"\n              (selectNodeEvent)=\"selectNodeTreeEvent($event)\" (getChildNodeSelectOne)=\"getChildNodeSelectOne($event)\"\n              [expandOnTitleClick]=\"!splitView\" [parentNodeOnClick]=\"parentNodeSelected\"\n              (treeControlNodes)=\"selectTreeControlNodeProcess($event)\"></qms-tree>\n          </div>\n        </mat-expansion-panel>\n      </ng-container>\n\n      <ng-container *ngIf=\"treeData2.length > 0\">\n        <div *ngIf=\"moduleId === module.documentProcess\" class=\"line__divider\"></div>\n\n        <mat-expansion-panel hideToggle *ngIf=\"moduleId === module.documentProcess\"\n          id=\"qmslib_related_popup_document_001\" [expanded]=\"isDocumentExpanded\" (opened)=\"isDocumentExpanded = true\"\n          (closed)=\"isDocumentExpanded = false\" class=\"panel-tree\">\n          <mat-expansion-panel-header class=\"padding-5\">\n            <mat-panel-title>\n              {{ LANG.DOCUMENTS | uppercase }}\n            </mat-panel-title>\n            <button qms-btn-icon class=\"related_popup_toggle-btn\">\n              <mat-icon>\n                {{\n                isDocumentExpanded\n                ? \"keyboard_arrow_up\"\n                : \"keyboard_arrow_down\"\n                }}\n              </mat-icon>\n            </button>\n          </mat-expansion-panel-header>\n          <div id=\"qmslib_related_popup_document_002\">\n            <qms-tree [treeData]=\"treeData2\" [treeConfig]=\"treeConfig2\" [selectedData]=\"selectedData2\"\n              [disabledList]=\"disabledList2\" (checkBoxEvent)=\"getDocumentCheckedNode($event)\"\n              (nodeExpandEvent)=\"getChildrenOfFolder($event, dataType.folder)\"\n              (selectNodeEvent)=\"selectNodeTree2Event($event)\" (getChildNodeSelectOne)=\"getChildNodeSelectOne($event)\"\n              [expandOnTitleClick]=\"!splitView\" [parentNodeOnClick]=\"parentNodeSelected\"\n              (treeControlNodes)=\"selectTreeControlNodeDocument($event)\"></qms-tree>\n          </div>\n        </mat-expansion-panel>\n      </ng-container>\n    </div>\n    <div *ngIf=\"splitView\" class=\"qms-scrollbar qmslib-related-popup-splitview qmslib_related_popup_content col-6\"\n      [ngClass]=\"{\n        panel__content_item: checkedNodeList.length,\n        panel__content: !checkedNodeList.length\n      }\">\n      <div class=\"splitview-header\" *ngIf=\"selectedFolder\">\n        {{ splitViewTitle }}\n      </div>\n      <div class=\"expand-node\" *ngFor=\"let node of itemInSplitview\">\n        <mat-checkbox qms-group-options [disabled]=\"node.disabled\" color=\"default\" [checked]=\"isNodeSelected(node)\"\n          (change)=\"toggleSelectItem(node)\"></mat-checkbox>\n        <mat-icon class=\"mat-icon-rtl-mirror material-icons-outlined\" [svgIcon]=\"getNodeIcon(node)\"></mat-icon>\n        <span class=\"text-node\">{{ node.itemName }}</span>\n      </div>\n    </div>\n  </div>\n\n  <div *ngIf=\"checkedNodeList.length\" class=\"line__divider\"></div>\n\n  <div class=\"row\">\n    <div class=\"col-12 pr-0 pe-0\">\n      <div *ngIf=\"checkedNodeList.length\" class=\"panel__item qms-scrollbar\">\n        <div class=\"related__item__inline\" *ngFor=\"let item of checkedNodeList\">\n          <button *ngIf=\"item.itemName\" mat-button class=\"related__item__content\" qms-tool-tip=\"{{\n              isEllipsisActive(itemName) ? getItemChipName(item) : ''\n            }}\" mode=\"dark\">\n            <span class=\"related__item__content_name\" #itemName>{{\n              getItemChipName(item)\n              }}</span>\n            <mat-icon *ngIf=\"!(treeConfig1?.selectOne || treeConfig2?.selectOne)\"\n              (click)=\"removeCheckedNodeList(item)\">cancel</mat-icon>\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"line__divider\"></div>\n\n  <div class=\"confirm__button__groups\">\n    <button *ngIf=\"!checkedNodeList.length\" qms-btn style=\"margin-top: 7px\"\n      [disabled]=\"isLoadingVideoFile || isLoadingImageFile\" (click)=\"onAddClick()\">\n      {{ LANG.ADD }}\n    </button>\n    <button *ngIf=\"checkedNodeList.length\" qms-btn style=\"margin-top: 0px\"\n      [disabled]=\"isLoadingVideoFile || isLoadingImageFile\" (click)=\"onAddClick()\">\n      {{ LANG.ADD }} ({{ checkedNodeList.length }})\n    </button>\n    <button qms-btn-text [ngStyle]=\"{ 'margin-top': checkedNodeList.length ? '0px' : '7px' }\" (click)=\"onCloseClick()\">\n      {{ LANG.CANCEL }}\n    </button>\n  </div>\n</div> -->", styles: ["::-webkit-scrollbar{width:12px}::-webkit-scrollbar-track{background:#0000001f;background-clip:content-box}::-webkit-scrollbar-thumb{background:#00000061;border-radius:20px;width:4px;border:4px solid transparent;background-clip:content-box}::-webkit-scrollbar-thumb:hover{background:#00000080;background-clip:content-box;border:4px solid transparent}.qms__popup .button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qms__danger button{border:none;color:var(--text-white);padding:0;text-align:center;text-decoration:none;display:inline-block;cursor:pointer;height:20px;width:20px;font-family:Open Sans;font-size:12px;font-weight:600;font-style:normal;line-height:16px}.qms__danger .red{background-color:var(--button-red-background);margin-left:10px}.qms__danger .yellow{background-color:var(--button-yellow-background);margin-left:10px;color:var(--popup-title-color)}.qms__danger .green{background-color:var(--button-green-background);margin-left:10px}.confirm__button__groups{margin-top:11px}.confirm__button__groups button{min-height:36px;width:auto;font-family:Open Sans;font-weight:500;font-size:14px;letter-spacing:1px;line-height:16px;padding-left:15px;padding-right:15px;margin-right:5px;float:right}.confirm__button__groups .confirm{background:var(--button-background)}.confirm__button__groups .confirm:hover{background:var(--primary-button-background-color);color:var(--primary-button-text-color)}.confirm__button__groups .confirm:disabled{cursor:not-allowed}.confirm__button__groups .cancel{background:var(--button-background)}.confirm__button__groups .cancel:hover{background:var(--primary-button-background-color);color:var(--primary-button-text-color)}.sticky-block{position:sticky;top:-1px;left:0;right:0;background:#fdfbff}.qmslib__related__popup__container .input__field{display:flex;align-items:center}.qmslib__related__popup__container .input__field input{width:100%;padding:10px;outline:none;border:none;background:var(--background-input-text)}.qmslib__related__popup__container .input__field .mat-icon{margin-left:-30px;cursor:pointer;vertical-align:middle}.qmslib__related__popup__container .line__divider{border-bottom:1px solid #ccc;height:1px;margin-top:10px;min-width:300px;max-width:100%}.qmslib__related__popup__container .button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qmslib__related__popup__container .panel__content{height:450px;overflow:auto;margin-top:12px}.qmslib__related__popup__container .panel__content_height_with_upload{height:380px}.qmslib__related__popup__container .panel__content_item{height:350px;overflow:auto;margin-top:12px}.qmslib__related__popup__container .panel__content_item_height_with_upload{height:257px}.qmslib__related__popup__container .panel-tree .mat-expansion-panel-body{padding:0 12px 12px}.qmslib__related__popup__container .mat-expansion-panel-header{height:30px;font-size:12px;letter-spacing:1px;font-family:Raleway;font-weight:600;padding:0}.qmslib__related__popup__container .mat-expansion-panel-header .mat-expansion-panel-header-title{align-items:center;margin-left:12px}.qmslib__related__popup__container .mat-expansion-panel-header .related_popup_toggle-btn{width:1.5rem;height:1.5rem;line-height:1.5rem}.qmslib__related__popup__container .mat-expansion-panel:not([class*=mat-elevation-z]){box-shadow:none}.qmslib__related__popup__container .panel__item{height:100px;margin-top:12px;overflow-x:hidden;overflow-y:auto;padding-right:5px;width:100%;max-width:100%;display:flex;flex-wrap:wrap;align-content:flex-start}.qmslib__related__popup__container .panel__item .related__item__inline{max-width:100%}.qmslib__related__popup__container .panel__item .related__item__content{height:32px;line-height:32px;background-color:var(--related-item-background);max-width:100%;margin-bottom:5px;margin-left:2.5px;margin-right:2.5px}.qmslib__related__popup__container .panel__item .related__item__content .mat-icon{color:var(--related-mat-icon-color);font-size:24px}.qmslib__related__popup__container .panel__item .related__item__content span.related__item__content_name{display:inline-block;min-width:calc(100% - 13px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:278px}.qmslib__related__popup__container .qmslib-related-popup-splitview{background-color:#fff;border-left:1px solid #ccc;height:450px;overflow-y:auto;margin-top:12px}.qmslib__related__popup__container .qmslib-related-popup-splitview.panel__content{height:450px;overflow:auto;margin-top:12px}.qmslib__related__popup__container .qmslib-related-popup-splitview.panel__content_item{height:350px;overflow:auto;margin-top:12px}.qmslib__related__popup__container .qmslib-related-popup-splitview .splitview-header{font-size:12px;letter-spacing:1px;font-family:RALEWAY;font-weight:600;display:flex;align-items:center}.qmslib__related__popup__container .qmslib-related-popup-splitview .mat-mdc-checkbox.qms-group-options{padding:0}.qmslib__related__popup__container .qmslib-related-popup-splitview .mat-mdc-checkbox.qms-group-options .mat-checkbox-inner-container{margin-right:11px}.qmslib__related__popup__container .qmslib-related-popup-splitview .mat-mdc-checkbox.qms-group-options.mat-checkbox-checked{background:transparent!important}.qmslib__related__popup__container .qmslib-related-popup-splitview .expand-node{margin-left:8px;display:flex;align-items:center;min-height:40px}.qmslib__related__popup__container .qmslib-related-popup-splitview .expand-node .mat-icon{color:#0009;margin-right:17px;min-width:fit-content}.qmslib__related__popup__container .qmslib-related-popup-splitview .expand-node .mat-icon svg{display:block;min-width:fit-content}.qmslib__related__popup__container .module-name{margin-top:10px;display:block;font-weight:600;font-family:Raleway}.qmslib__related__popup__container input::-webkit-outer-spin-button,.qmslib__related__popup__container input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.qmslib__related__popup__container input[type=number]{-moz-appearance:textfield}.qmslib__related__popup__container .panel_header_height_with_video_upload{height:350px}.qmslib__related__popup__container .panel_header_height_without_video_upload{height:300px}cdk-virtual-scroll-viewport{overflow-x:hidden}cdk-virtual-scroll-viewport .search__module-result{margin:1.5rem;padding:0 0 .5rem 0px}cdk-virtual-scroll-viewport .search__module-result .search__module-title{font-size:14px;font-weight:600}cdk-virtual-scroll-viewport .search__module-result .search__option{height:auto;line-height:normal;padding:8px 0;border-bottom:1px solid #e0e0e0}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item.mat-2-line.image-item{height:auto}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content{margin:0;border-bottom:none}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .wrap-image.image-square{width:2.5rem;height:100%;background:transparent;align-self:center;margin-right:0}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .wrap-image.image-square img{width:24px;height:24px}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .material-icons-outlined.leading-icon,cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content mat-icon.leading-icon{padding:4px 0 4px 4px}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .subtitle{font-weight:400}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .caption{overflow:hidden;line-height:normal;white-space:normal;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;padding:0;margin:0}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .caption span.search__result__parent-name{display:inline-block;width:auto;width:calc(100% - 13px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .default-subtitle{color:#00000061}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .search__description-icon{margin-right:0;width:12px;height:12px;font-size:12px}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .qms-list-text{border-bottom:none}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .breadcrumb-container .qms-breadcrumb-item .mat-icon{font-size:16px!important;padding-bottom:1px}cdk-virtual-scroll-viewport .search__module-result .mat-mdc-option[aria-disabled=true] .subtitle{color:#00000061}cdk-virtual-scroll-viewport .search__module-result .mat-mdc-option[aria-disabled=true] .breadcrumb-container .qms-breadcrumb-item .mat-icon{color:#00000061}cdk-virtual-scroll-viewport .search__module-result .mat-mdc-option[aria-disabled=true] .breadcrumb-container .qms-breadcrumb-item-text{color:#00000061}cdk-virtual-scroll-viewport .search__module-result svg{display:block}#qmslib_related_popup_header_001{width:100%;padding:0;font-weight:600;font-family:Raleway;margin:0}#qmslib_related_popup_header_001 .selected-image{padding-bottom:10px;width:100%}#qmslib_related_popup_header_001 .selected-image .input-upload,#qmslib_related_popup_header_001 .selected-image .module-name{width:100%;height:60px}.padding-5{padding:5px}.mat-mdc-autocomplete_related-viewport{height:100%;max-height:100%!important}.mat-mdc-autocomplete_related-viewport .cdk-virtual-scroll-content-wrapper{width:100%}.mat-mdc-autocomplete_related-viewport .related-viewport{min-height:300px}\n"] }]
+            args: [{ selector: 'qms-related-popup', encapsulation: ViewEncapsulation.None, template: "<h3 mat-dialog-title class=\"more-action\">\n  {{ moduleName | uppercase }}\n  <button matDialogClose class=\"close-btn\" color=\"light\" qms-btn-icon (click)=\"onCloseClick()\">\n    <mat-icon>close</mat-icon>\n  </button>\n</h3>\n<mat-dialog-content>\n  <!-- Ckeditor Using -->\n  <div *ngIf=\"canUploadImage || canUploadVideo || canUpdateVideoProperties\" id=\"qmslib_related_popup_header_001\"\n    [ngClass]=\"{\n          panel_header_height_with_video_upload: canUploadVideo,\n          panel_header_height_without_video_upload: !canUploadVideo && canUploadImage && canUpdateVideoProperties\n        }\" mat-dialog-content class=\"row\">\n    <div *ngIf=\"canUploadImage\" class=\"selected-image col-12\">\n      <div class=\"row d-flex align-items-center\">\n        <div class=\"col-md-4\">{{ moduleUploadImageName | uppercase }}</div>\n        <div class=\"col-md-8\">\n          <form>\n            <mat-form-field qms-form qms-file-upload appearance=\"fill\" class=\"example-width input-upload\">\n              <mat-icon matPrefix svgIcon=\"upload\"></mat-icon>\n              <input matInput placeholder=\"Upload file\" [formControl]=\"qmsInputImageType\" qms-file-upload-display\n                #fileDisplay value=\"{{qmsInputImageFile? qmsInputImageFile.fileName : ''}}\"\n                [attr.disabled]=\"isLoadingImageFile ? 'disabled' : null\" readonly>\n              <input hidden type=\"file\" [(inputFile)]=\"qmsInputImageFile\" qms-file-upload-selector #fileSelector\n                [acceptExtensions]=\"acceptExtensions\"\n                accept=\".pjp, .jpg, .pjpeg, .jpeg, .jfif, .png, .gif, .bmp, .webp, .tif, .tiff\"\n                [maxSize]=\"maxVideoThumbnailSizeKB\" (change)=\"onChangeImage($event)\">\n\n              <mat-progress-spinner matSuffix mode=\"indeterminate\" diameter='20'\n                *ngIf=\"isLoadingImageFile\"></mat-progress-spinner>\n              <div matSuffix qms-input-clear *ngIf=\"qmsInputImageFile && qmsInputImageFile.fileName\">\n                <button qms-btn-icon color=\"light\" (click)=\"clearQMSInputImageFile()\" [disabled]=\"isLoadingImageFile\">\n                  <mat-icon>close</mat-icon>\n                </button>\n              </div>\n\n              <mat-error *ngIf=\"qmsInputImageFile && qmsInputImageFile.typeError == 1\">\n                {{ LANG.QMSCKEDITOR.EXTENSION_IS_NOT_SUPPORTED }}\n              </mat-error>\n            </mat-form-field>\n          </form>\n        </div>\n      </div>\n      <div class=\"row d-flex align-items-center\">\n        <div class=\"col-md-4\">{{ LANG.QMSCKEDITOR.VIDEO_IMAGE | uppercase}}:</div>\n        <div class=\"col-md-8\">\n          <mat-form-field class=\"example-width input-upload\">\n            <input matInput [(ngModel)]=\"videoData.poster\">\n          </mat-form-field>\n        </div>\n      </div>\n    </div>\n    <div class=\"selected-image col-12\">\n      <div *ngIf=\"canUploadVideo\" class=\"row d-flex align-items-center\">\n        <div class=\"col-md-4\">{{ moduleUploadFileName | uppercase }}</div>\n        <div class=\"col-md-8\">\n          <form>\n            <mat-form-field qms-form qms-file-upload appearance=\"fill\" class=\"example-width input-upload\">\n              <mat-icon matPrefix svgIcon=\"upload\"></mat-icon>\n              <input matInput placeholder=\"Upload file\" [formControl]=\"qmsInputVideoType\" qms-file-upload-display\n                #fileDisplay value=\"{{qmsInputVideoFile? qmsInputVideoFile.fileName : ''}}\"\n                [attr.disabled]=\"isLoadingVideoFile ? 'disabled' : null\" readonly>\n              <input hidden type=\"file\" [(inputFile)]=\"qmsInputVideoFile\" qms-file-upload-selector #fileSelector\n                [acceptExtensions]=\"acceptExtensionsForVideo\" accept=\".mp4\" (change)=\"onChangeFile($event)\">\n\n              <mat-progress-spinner matSuffix mode=\"indeterminate\" diameter='20'\n                *ngIf=\"isLoadingVideoFile\"></mat-progress-spinner>\n              <div matSuffix qms-input-clear *ngIf=\"qmsInputVideoFile && qmsInputVideoFile.fileName\">\n                <button qms-btn-icon color=\"light\" (click)=\"clearQMSInputVideoFile()\" [disabled]=\"isLoadingVideoFile\">\n                  <mat-icon>close</mat-icon>\n                </button>\n              </div>\n\n              <mat-error *ngIf=\"qmsInputVideoFile && qmsInputVideoFile.typeError == 1\">\n                {{ LANG.QMSCKEDITOR.ACCEPT_MP4_ONLY }}\n              </mat-error>\n            </mat-form-field>\n          </form>\n        </div>\n      </div>\n      <div class=\"row d-flex align-items-center\" *ngIf=\"canUpdateVideoProperties\">\n        <div class=\"col-md-4\">{{ LANG.QMSCKEDITOR.VIDEO_SOURCE | uppercase}}:</div>\n        <div class=\"col-md-8\">\n          <mat-form-field class=\"example-width input-upload\">\n            <input matInput [(ngModel)]=\"videoData.src\">\n          </mat-form-field>\n        </div>\n      </div>\n    </div>\n    <div *ngIf=\"canUpdateVideoProperties\" class=\"selected-image col-12\">\n      <div class=\"row d-flex align-items-center\">\n        <div class=\"col-md-4\">\n          <mat-form-field class=\"example-width input-upload\">\n            <mat-label>{{ LANG.WIDTH }}</mat-label>\n            <input type=\"number\" matInput [(ngModel)]=\"videoData.width\">\n          </mat-form-field>\n        </div>\n        <div class=\"col-md-4\">\n          <mat-form-field class=\"example-width input-upload\">\n            <mat-label>{{ LANG.HEIGHT }}</mat-label>\n            <input type=\"number\" matInput [(ngModel)]=\"videoData.height\">\n          </mat-form-field>\n        </div>\n        <div class=\"col-md-4\">\n          <mat-form-field class=\"example-width input-upload\">\n            <mat-label>Id</mat-label>\n            <input matInput [(ngModel)]=\"videoData.id\">\n          </mat-form-field>\n        </div>\n      </div>\n    </div>\n  </div>\n  <!-- Related module -->\n  <div class=\"sticky-block\">\n    <input type=\"text\" placeholder=\"{{ LANG.SEARCH }}\" matInput [formControl]=\"myControl\" [matAutocomplete]=\"auto\" />\n    <mat-icon>search</mat-icon>\n  </div>\n  <div class=\"line__divider\"></div>\n\n  <mat-autocomplete #auto=\"matAutocomplete\" class=\"mat-autocomplete_related-viewport\"\n    (optionSelected)=\"selectRelated($event.option.value)\" [displayWith]=\"displayWhenSelectRelatedOption\">\n    <cdk-virtual-scroll-viewport qms-scrollbar itemSize=\"10\" [class.related-viewport]=\"isInputValue\"\n      *ngIf=\"filteredOptions.length\">\n      <ng-container *ngFor=\"let type of searchOrder\">\n        <div class=\"search__module-result\" *ngIf=\"canShowSearchOption(type.value)\">\n          <span class=\"search__module-title\">{{ getTitle(type.value) }}</span>\n          <mat-option class=\"search__option\" *ngFor=\"let option of getModuleFilteredOptions(type.value)\"\n            [value]=\"option\" [disabled]=\"option.disabled\">\n            <qms-list-item type=\"image-square\">\n              <mat-icon leading-icon type=\"image-square\" [svgIcon]=\"getNodeIcon(option)\"></mat-icon>\n              <div qms-list-header>\n                <div qms-line type=\"caption\" qms-tool-tip=\"{{\n                    isEllipsisActive(searchItemResult) ? option.parentName : ''\n                  }}\" mode=\"dark\" *ngIf=\"getParentName(option)\">\n                  <span #searchItemResult class=\"search__result__parent-name\">\n                    {{ option.parentName }}\n                  </span>\n                </div>\n                <div qms-line type=\"subtitle\" class=\"search__option-name\">\n                  {{ option.itemName }}\n                </div>\n                <div class=\"caption\" *ngIf=\"option.breadcumbs && option.breadcumbs.length\">\n                  <qms-breadcrumb class=\"breadcrumb-container\" type=\"table\" numDisplayItem=\"1\"\n                    [nodes]=\"option.breadcumbs\">\n                  </qms-breadcrumb>\n                </div>\n              </div>\n              <div qms-line color=\"default-subtitle\" *ngIf=\"getItemId(option)\">\n                <span>\n                  <mat-icon class=\"material-icons-outlined search__description-icon\">local_offer</mat-icon>\n                </span>\n                {{ getItemId(option) }}\n              </div>\n            </qms-list-item>\n          </mat-option>\n        </div>\n      </ng-container>\n    </cdk-virtual-scroll-viewport>\n  </mat-autocomplete>\n\n  <div class=\"row\">\n    <div class=\"qms-scrollbar qmslib_related_popup_content\" [ngClass]=\"{\n        panel__content_item: checkedNodeList.length,\n        panel__content: !checkedNodeList.length,\n        panel__content_height_with_upload: canUploadImage && !checkedNodeList.length,\n        panel__content_item_height_with_upload: canUploadImage && checkedNodeList.length,\n        'col-6': splitView,\n        'col-12': !splitView\n      }\">\n      <ng-container *ngIf=\"treeData1.length > 0\">\n        <mat-expansion-panel hideToggle id=\"qmslib_related_popup_common_001\" [expanded]=\"isCommonExpanded\"\n          (opened)=\"isCommonExpanded = true\" (closed)=\"isCommonExpanded = false\" class=\"panel-tree\">\n          <mat-expansion-panel-header class=\"padding-5\">\n            <mat-panel-title *ngIf=\"moduleId === module.documentProcess\">\n              {{ LANG.PROCESSES | uppercase }}\n            </mat-panel-title>\n            <mat-panel-title *ngIf=\"moduleId === module.deviation\">\n              {{ LANG.DEVIATION | uppercase }}\n            </mat-panel-title>\n            <mat-panel-title *ngIf=\"moduleId === module.checklist\">\n              {{ LANG.CHECKLIST | uppercase }}\n            </mat-panel-title>\n            <mat-panel-title *ngIf=\"moduleId === module.risk\">\n              {{ LANG.ASSESSMENT | uppercase }}\n            </mat-panel-title>\n            <button qms-btn-icon class=\"related_popup_toggle-btn\">\n              <mat-icon>\n                {{\n                isCommonExpanded ? \"keyboard_arrow_up\" : \"keyboard_arrow_down\"\n                }}\n              </mat-icon>\n            </button>\n          </mat-expansion-panel-header>\n          <div id=\"qmslib_related_popup_common_002\">\n            <qms-tree [treeData]=\"treeData1\" [treeConfig]=\"treeConfig1\" [selectedData]=\"selectedData\"\n              [selectedRiskData]=\"selectedRiskData\" [disabledList]=\"disabledList\"\n              (checkBoxEvent)=\"getCommonCheckedNode($event)\"\n              (nodeExpandEvent)=\"getChildrenOfFolder($event, dataType.area)\"\n              (selectNodeEvent)=\"selectNodeTreeEvent($event)\" (getChildNodeSelectOne)=\"getChildNodeSelectOne($event)\"\n              [expandOnTitleClick]=\"!splitView\" [parentNodeOnClick]=\"parentNodeSelected\"\n              (treeControlNodes)=\"selectTreeControlNodeProcess($event)\"></qms-tree>\n          </div>\n        </mat-expansion-panel>\n      </ng-container>\n\n      <ng-container *ngIf=\"treeData2.length > 0\">\n        <div *ngIf=\"moduleId === module.documentProcess\" class=\"line__divider\"></div>\n\n        <mat-expansion-panel hideToggle *ngIf=\"moduleId === module.documentProcess\"\n          id=\"qmslib_related_popup_document_001\" [expanded]=\"isDocumentExpanded\" (opened)=\"isDocumentExpanded = true\"\n          (closed)=\"isDocumentExpanded = false\" class=\"panel-tree\">\n          <mat-expansion-panel-header class=\"padding-5\">\n            <mat-panel-title>\n              {{ LANG.DOCUMENTS | uppercase }}\n            </mat-panel-title>\n            <button qms-btn-icon class=\"related_popup_toggle-btn\">\n              <mat-icon>\n                {{\n                isDocumentExpanded\n                ? \"keyboard_arrow_up\"\n                : \"keyboard_arrow_down\"\n                }}\n              </mat-icon>\n            </button>\n          </mat-expansion-panel-header>\n          <div id=\"qmslib_related_popup_document_002\">\n            <qms-tree [treeData]=\"treeData2\" [treeConfig]=\"treeConfig2\" [selectedData]=\"selectedData2\"\n              [disabledList]=\"disabledList2\" (checkBoxEvent)=\"getDocumentCheckedNode($event)\"\n              (nodeExpandEvent)=\"getChildrenOfFolder($event, dataType.folder)\"\n              (selectNodeEvent)=\"selectNodeTree2Event($event)\" (getChildNodeSelectOne)=\"getChildNodeSelectOne($event)\"\n              [expandOnTitleClick]=\"!splitView\" [parentNodeOnClick]=\"parentNodeSelected\"\n              (treeControlNodes)=\"selectTreeControlNodeDocument($event)\"></qms-tree>\n          </div>\n        </mat-expansion-panel>\n      </ng-container>\n    </div>\n    <div *ngIf=\"splitView\" class=\"qms-scrollbar qmslib-related-popup-splitview qmslib_related_popup_content col-6\"\n      [ngClass]=\"{\n        panel__content_item: checkedNodeList.length,\n        panel__content: !checkedNodeList.length\n      }\">\n      <div class=\"splitview-header\" *ngIf=\"selectedFolder\">\n        {{ splitViewTitle }}\n      </div>\n      <div class=\"expand-node\" *ngFor=\"let node of itemInSplitview\">\n        <mat-checkbox qms-group-options [disabled]=\"node.disabled\" color=\"default\" [checked]=\"isNodeSelected(node)\"\n          (change)=\"toggleSelectItem(node)\"></mat-checkbox>\n        <mat-icon class=\"mat-icon-rtl-mirror material-icons-outlined\" [svgIcon]=\"getNodeIcon(node)\"></mat-icon>\n        <span class=\"text-node\">{{ node.itemName }}</span>\n      </div>\n    </div>\n  </div>\n\n  <div *ngIf=\"checkedNodeList.length\" class=\"line__divider\"></div>\n\n  <div class=\"row\">\n    <div class=\"col-12 pr-0 pe-0\">\n      <div *ngIf=\"checkedNodeList.length\" class=\"panel__item qms-scrollbar\">\n        <div class=\"related__item__inline\" *ngFor=\"let item of checkedNodeList\">\n          <button *ngIf=\"item.itemName\" mat-button class=\"related__item__content\" qms-tool-tip=\"{{\n              isEllipsisActive(itemName) ? getItemChipName(item) : ''\n            }}\" mode=\"dark\">\n            <span class=\"related__item__content_name\" #itemName>{{\n              getItemChipName(item)\n              }}</span>\n            <mat-icon *ngIf=\"!(treeConfig1?.selectOne || treeConfig2?.selectOne)\"\n              (click)=\"removeCheckedNodeList(item)\">cancel</mat-icon>\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n</mat-dialog-content>\n<mat-dialog-actions align=\"end\">\n  <mat-divider class=\"w-100 mb-3\"></mat-divider>\n  <button class=\"me-2\" qms-btn-text [ngStyle]=\"{ 'margin-top': checkedNodeList.length ? '0px' : '7px' }\"\n    (click)=\"onCloseClick()\">\n    {{ LANG.CANCEL }}\n  </button>\n  <button *ngIf=\"!checkedNodeList.length\" qms-btn style=\"margin-top: 7px\"\n    [disabled]=\"isLoadingVideoFile || isLoadingImageFile\" (click)=\"onAddClick()\">\n    {{ LANG.ADD }}\n  </button>\n  <button *ngIf=\"checkedNodeList.length\" qms-btn style=\"margin-top: 0px\"\n    [disabled]=\"isLoadingVideoFile || isLoadingImageFile\" (click)=\"onAddClick()\">\n    {{ LANG.ADD }} ({{ checkedNodeList.length }})\n  </button>\n</mat-dialog-actions>\n\n<!-- \n<div id=\"qmslib_related_popup\" class=\"qmslib__related__popup__container\">\n  <div id=\"qmslib_related_popup_header\">\n    <span mat-icon-button class=\"button__close\" (click)=\"onCloseClick()\">\n      <mat-icon mat-icon>close</mat-icon>\n    </span>\n    <div *ngIf=\"canUploadImage || canUploadVideo || canUpdateVideoProperties\" id=\"qmslib_related_popup_header_001\"\n      [ngClass]=\"{\n      panel_header_height_with_video_upload: canUploadVideo,\n      panel_header_height_without_video_upload: !canUploadVideo && canUploadImage && canUpdateVideoProperties\n    }\" mat-dialog-content class=\"row\">\n      <div *ngIf=\"canUploadImage\" class=\"selected-image col-12\">\n        <div class=\"row d-flex align-items-center\">\n          <div class=\"col-md-4\">{{ moduleUploadImageName | uppercase }}</div>\n          <div class=\"col-md-8\">\n            <form>\n              <mat-form-field qms-form qms-file-upload appearance=\"fill\" class=\"example-width input-upload\">\n                <mat-icon matPrefix svgIcon=\"upload\"></mat-icon>\n                <input matInput placeholder=\"Upload file\" [formControl]=\"qmsInputImageType\" qms-file-upload-display\n                  #fileDisplay value=\"{{qmsInputImageFile? qmsInputImageFile.fileName : ''}}\"\n                  [attr.disabled]=\"isLoadingImageFile ? 'disabled' : null\" readonly>\n                <input hidden type=\"file\" [(inputFile)]=\"qmsInputImageFile\" qms-file-upload-selector #fileSelector\n                  [acceptExtensions]=\"acceptExtensions\"\n                  accept=\".pjp, .jpg, .pjpeg, .jpeg, .jfif, .png, .gif, .bmp, .webp, .tif, .tiff\"\n                  [maxSize]=\"maxVideoThumbnailSizeKB\" (change)=\"onChangeImage($event)\">\n\n                <mat-progress-spinner matSuffix mode=\"indeterminate\" diameter='20'\n                  *ngIf=\"isLoadingImageFile\"></mat-progress-spinner>\n                <div matSuffix qms-input-clear *ngIf=\"qmsInputImageFile && qmsInputImageFile.fileName\">\n                  <button qms-btn-icon color=\"light\" (click)=\"clearQMSInputImageFile()\" [disabled]=\"isLoadingImageFile\">\n                    <mat-icon>close</mat-icon>\n                  </button>\n                </div>\n\n                <mat-error *ngIf=\"qmsInputImageFile && qmsInputImageFile.typeError == 1\">\n                  {{ LANG.QMSCKEDITOR.EXTENSION_IS_NOT_SUPPORTED }}\n                </mat-error>\n              </mat-form-field>\n            </form>\n          </div>\n        </div>\n        <div class=\"row d-flex align-items-center\">\n          <div class=\"col-md-4\">{{ LANG.QMSCKEDITOR.VIDEO_IMAGE | uppercase}}:</div>\n          <div class=\"col-md-8\">\n            <mat-form-field class=\"example-width input-upload\">\n              <input matInput [(ngModel)]=\"videoData.poster\">\n            </mat-form-field>\n          </div>\n        </div>\n      </div>\n      <div class=\"selected-image col-12\">\n        <div *ngIf=\"canUploadVideo\" class=\"row d-flex align-items-center\">\n          <div class=\"col-md-4\">{{ moduleUploadFileName | uppercase }}</div>\n          <div class=\"col-md-8\">\n            <form>\n              <mat-form-field qms-form qms-file-upload appearance=\"fill\" class=\"example-width input-upload\">\n                <mat-icon matPrefix svgIcon=\"upload\"></mat-icon>\n                <input matInput placeholder=\"Upload file\" [formControl]=\"qmsInputVideoType\" qms-file-upload-display\n                  #fileDisplay value=\"{{qmsInputVideoFile? qmsInputVideoFile.fileName : ''}}\"\n                  [attr.disabled]=\"isLoadingVideoFile ? 'disabled' : null\" readonly>\n                <input hidden type=\"file\" [(inputFile)]=\"qmsInputVideoFile\" qms-file-upload-selector #fileSelector\n                  [acceptExtensions]=\"acceptExtensionsForVideo\" accept=\".mp4\" (change)=\"onChangeFile($event)\">\n\n                <mat-progress-spinner matSuffix mode=\"indeterminate\" diameter='20'\n                  *ngIf=\"isLoadingVideoFile\"></mat-progress-spinner>\n                <div matSuffix qms-input-clear *ngIf=\"qmsInputVideoFile && qmsInputVideoFile.fileName\">\n                  <button qms-btn-icon color=\"light\" (click)=\"clearQMSInputVideoFile()\" [disabled]=\"isLoadingVideoFile\">\n                    <mat-icon>close</mat-icon>\n                  </button>\n                </div>\n\n                <mat-error *ngIf=\"qmsInputVideoFile && qmsInputVideoFile.typeError == 1\">\n                  {{ LANG.QMSCKEDITOR.ACCEPT_MP4_ONLY }}\n                </mat-error>\n              </mat-form-field>\n            </form>\n          </div>\n        </div>\n        <div class=\"row d-flex align-items-center\" *ngIf=\"canUpdateVideoProperties\">\n          <div class=\"col-md-4\">{{ LANG.QMSCKEDITOR.VIDEO_SOURCE | uppercase}}:</div>\n          <div class=\"col-md-8\">\n            <mat-form-field class=\"example-width input-upload\">\n              <input matInput [(ngModel)]=\"videoData.src\">\n            </mat-form-field>\n          </div>\n        </div>\n      </div>\n      <div *ngIf=\"canUpdateVideoProperties\" class=\"selected-image col-12\">\n        <div class=\"row d-flex align-items-center\">\n          <div class=\"col-md-4\">\n            <mat-form-field class=\"example-width input-upload\">\n              <mat-label>{{ LANG.WIDTH }}</mat-label>\n              <input type=\"number\" matInput [(ngModel)]=\"videoData.width\">\n            </mat-form-field>\n          </div>\n          <div class=\"col-md-4\">\n            <mat-form-field class=\"example-width input-upload\">\n              <mat-label>{{ LANG.HEIGHT }}</mat-label>\n              <input type=\"number\" matInput [(ngModel)]=\"videoData.height\">\n            </mat-form-field>\n          </div>\n          <div class=\"col-md-4\">\n            <mat-form-field class=\"example-width input-upload\">\n              <mat-label>Id</mat-label>\n              <input matInput [(ngModel)]=\"videoData.id\">\n            </mat-form-field>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"row\">\n      <span class=\"module-name\">{{ moduleName | uppercase }}</span>\n    </div>\n  </div>\n\n  <div id=\"qmslib_related_popup_search\" class=\"input__field\">\n    <input type=\"text\" placeholder=\"{{ LANG.SEARCH }}\" matInput [formControl]=\"myControl\" [matAutocomplete]=\"auto\" />\n    <mat-icon>search</mat-icon>\n  </div>\n\n  <div class=\"line__divider\"></div>\n\n  <mat-autocomplete #auto=\"matAutocomplete\" class=\"mat-autocomplete_related-viewport\"\n    (optionSelected)=\"selectRelated($event.option.value)\" [displayWith]=\"displayWhenSelectRelatedOption\">\n    <cdk-virtual-scroll-viewport qms-scrollbar itemSize=\"10\" [class.related-viewport]=\"isInputValue\"\n      *ngIf=\"filteredOptions.length\">\n      <ng-container *ngFor=\"let type of searchOrder\">\n        <div class=\"search__module-result\" *ngIf=\"canShowSearchOption(type.value)\">\n          <span class=\"search__module-title\">{{ getTitle(type.value) }}</span>\n          <mat-option class=\"search__option\" *ngFor=\"let option of getModuleFilteredOptions(type.value)\"\n            [value]=\"option\" [disabled]=\"option.disabled\">\n            <qms-list-item type=\"image-square\">\n              <mat-icon leading-icon type=\"image-square\" [svgIcon]=\"getNodeIcon(option)\"></mat-icon>\n              <div qms-list-header>\n                <div qms-line type=\"caption\" qms-tool-tip=\"{{\n                    isEllipsisActive(searchItemResult) ? option.parentName : ''\n                  }}\" mode=\"dark\" *ngIf=\"getParentName(option)\">\n                  <span #searchItemResult class=\"search__result__parent-name\">\n                    {{ option.parentName }}\n                  </span>\n                </div>\n                <div qms-line type=\"subtitle\" class=\"search__option-name\">\n                  {{ option.itemName }}\n                </div>\n                <div class=\"caption\" *ngIf=\"option.breadcumbs && option.breadcumbs.length\">\n                  <qms-breadcrumb class=\"breadcrumb-container\" type=\"table\" numDisplayItem=\"1\"\n                    [nodes]=\"option.breadcumbs\">\n                  </qms-breadcrumb>\n                </div>\n              </div>\n              <div qms-line color=\"default-subtitle\" *ngIf=\"getItemId(option)\">\n                <span>\n                  <mat-icon class=\"material-icons-outlined search__description-icon\">local_offer</mat-icon>\n                </span>\n                {{ getItemId(option) }}\n              </div>\n            </qms-list-item>\n          </mat-option>\n        </div>\n      </ng-container>\n    </cdk-virtual-scroll-viewport>\n  </mat-autocomplete>\n\n  <div class=\"row\">\n    <div class=\"qms-scrollbar qmslib_related_popup_content\" [ngClass]=\"{\n        panel__content_item: checkedNodeList.length,\n        panel__content: !checkedNodeList.length,\n        panel__content_height_with_upload: canUploadImage && !checkedNodeList.length,\n        panel__content_item_height_with_upload: canUploadImage && checkedNodeList.length,\n        'col-6': splitView,\n        'col-12': !splitView\n      }\">\n      <ng-container *ngIf=\"treeData1.length > 0\">\n        <mat-expansion-panel hideToggle id=\"qmslib_related_popup_common_001\" [expanded]=\"isCommonExpanded\"\n          (opened)=\"isCommonExpanded = true\" (closed)=\"isCommonExpanded = false\" class=\"panel-tree\">\n          <mat-expansion-panel-header class=\"padding-5\">\n            <mat-panel-title *ngIf=\"moduleId === module.documentProcess\">\n              {{ LANG.PROCESSES | uppercase }}\n            </mat-panel-title>\n            <mat-panel-title *ngIf=\"moduleId === module.deviation\">\n              {{ LANG.DEVIATION | uppercase }}\n            </mat-panel-title>\n            <mat-panel-title *ngIf=\"moduleId === module.checklist\">\n              {{ LANG.CHECKLIST | uppercase }}\n            </mat-panel-title>\n            <mat-panel-title *ngIf=\"moduleId === module.risk\">\n              {{ LANG.ASSESSMENT | uppercase }}\n            </mat-panel-title>\n            <button qms-btn-icon class=\"related_popup_toggle-btn\">\n              <mat-icon>\n                {{\n                isCommonExpanded ? \"keyboard_arrow_up\" : \"keyboard_arrow_down\"\n                }}\n              </mat-icon>\n            </button>\n          </mat-expansion-panel-header>\n          <div id=\"qmslib_related_popup_common_002\">\n            <qms-tree [treeData]=\"treeData1\" [treeConfig]=\"treeConfig1\" [selectedData]=\"selectedData\"\n              [selectedRiskData]=\"selectedRiskData\" [disabledList]=\"disabledList\"\n              (checkBoxEvent)=\"getCommonCheckedNode($event)\"\n              (nodeExpandEvent)=\"getChildrenOfFolder($event, dataType.area)\"\n              (selectNodeEvent)=\"selectNodeTreeEvent($event)\" (getChildNodeSelectOne)=\"getChildNodeSelectOne($event)\"\n              [expandOnTitleClick]=\"!splitView\" [parentNodeOnClick]=\"parentNodeSelected\"\n              (treeControlNodes)=\"selectTreeControlNodeProcess($event)\"></qms-tree>\n          </div>\n        </mat-expansion-panel>\n      </ng-container>\n\n      <ng-container *ngIf=\"treeData2.length > 0\">\n        <div *ngIf=\"moduleId === module.documentProcess\" class=\"line__divider\"></div>\n\n        <mat-expansion-panel hideToggle *ngIf=\"moduleId === module.documentProcess\"\n          id=\"qmslib_related_popup_document_001\" [expanded]=\"isDocumentExpanded\" (opened)=\"isDocumentExpanded = true\"\n          (closed)=\"isDocumentExpanded = false\" class=\"panel-tree\">\n          <mat-expansion-panel-header class=\"padding-5\">\n            <mat-panel-title>\n              {{ LANG.DOCUMENTS | uppercase }}\n            </mat-panel-title>\n            <button qms-btn-icon class=\"related_popup_toggle-btn\">\n              <mat-icon>\n                {{\n                isDocumentExpanded\n                ? \"keyboard_arrow_up\"\n                : \"keyboard_arrow_down\"\n                }}\n              </mat-icon>\n            </button>\n          </mat-expansion-panel-header>\n          <div id=\"qmslib_related_popup_document_002\">\n            <qms-tree [treeData]=\"treeData2\" [treeConfig]=\"treeConfig2\" [selectedData]=\"selectedData2\"\n              [disabledList]=\"disabledList2\" (checkBoxEvent)=\"getDocumentCheckedNode($event)\"\n              (nodeExpandEvent)=\"getChildrenOfFolder($event, dataType.folder)\"\n              (selectNodeEvent)=\"selectNodeTree2Event($event)\" (getChildNodeSelectOne)=\"getChildNodeSelectOne($event)\"\n              [expandOnTitleClick]=\"!splitView\" [parentNodeOnClick]=\"parentNodeSelected\"\n              (treeControlNodes)=\"selectTreeControlNodeDocument($event)\"></qms-tree>\n          </div>\n        </mat-expansion-panel>\n      </ng-container>\n    </div>\n    <div *ngIf=\"splitView\" class=\"qms-scrollbar qmslib-related-popup-splitview qmslib_related_popup_content col-6\"\n      [ngClass]=\"{\n        panel__content_item: checkedNodeList.length,\n        panel__content: !checkedNodeList.length\n      }\">\n      <div class=\"splitview-header\" *ngIf=\"selectedFolder\">\n        {{ splitViewTitle }}\n      </div>\n      <div class=\"expand-node\" *ngFor=\"let node of itemInSplitview\">\n        <mat-checkbox qms-group-options [disabled]=\"node.disabled\" color=\"default\" [checked]=\"isNodeSelected(node)\"\n          (change)=\"toggleSelectItem(node)\"></mat-checkbox>\n        <mat-icon class=\"mat-icon-rtl-mirror material-icons-outlined\" [svgIcon]=\"getNodeIcon(node)\"></mat-icon>\n        <span class=\"text-node\">{{ node.itemName }}</span>\n      </div>\n    </div>\n  </div>\n\n  <div *ngIf=\"checkedNodeList.length\" class=\"line__divider\"></div>\n\n  <div class=\"row\">\n    <div class=\"col-12 pr-0 pe-0\">\n      <div *ngIf=\"checkedNodeList.length\" class=\"panel__item qms-scrollbar\">\n        <div class=\"related__item__inline\" *ngFor=\"let item of checkedNodeList\">\n          <button *ngIf=\"item.itemName\" mat-button class=\"related__item__content\" qms-tool-tip=\"{{\n              isEllipsisActive(itemName) ? getItemChipName(item) : ''\n            }}\" mode=\"dark\">\n            <span class=\"related__item__content_name\" #itemName>{{\n              getItemChipName(item)\n              }}</span>\n            <mat-icon *ngIf=\"!(treeConfig1?.selectOne || treeConfig2?.selectOne)\"\n              (click)=\"removeCheckedNodeList(item)\">cancel</mat-icon>\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"line__divider\"></div>\n\n  <div class=\"confirm__button__groups\">\n    <button *ngIf=\"!checkedNodeList.length\" qms-btn style=\"margin-top: 7px\"\n      [disabled]=\"isLoadingVideoFile || isLoadingImageFile\" (click)=\"onAddClick()\">\n      {{ LANG.ADD }}\n    </button>\n    <button *ngIf=\"checkedNodeList.length\" qms-btn style=\"margin-top: 0px\"\n      [disabled]=\"isLoadingVideoFile || isLoadingImageFile\" (click)=\"onAddClick()\">\n      {{ LANG.ADD }} ({{ checkedNodeList.length }})\n    </button>\n    <button qms-btn-text [ngStyle]=\"{ 'margin-top': checkedNodeList.length ? '0px' : '7px' }\" (click)=\"onCloseClick()\">\n      {{ LANG.CANCEL }}\n    </button>\n  </div>\n</div> -->", styles: ["::-webkit-scrollbar{width:12px}::-webkit-scrollbar-track{background:#0000001f;background-clip:content-box}::-webkit-scrollbar-thumb{background:#00000061;border-radius:20px;width:4px;border:4px solid transparent;background-clip:content-box}::-webkit-scrollbar-thumb:hover{background:#00000080;background-clip:content-box;border:4px solid transparent}.qms__popup .button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qms__danger button{border:none;color:var(--text-white);padding:0;text-align:center;text-decoration:none;display:inline-block;cursor:pointer;height:20px;width:20px;font-family:Open Sans;font-size:12px;font-weight:600;font-style:normal;line-height:16px}.qms__danger .red{background-color:var(--button-red-background);margin-left:10px}.qms__danger .yellow{background-color:var(--button-yellow-background);margin-left:10px;color:var(--popup-title-color)}.qms__danger .green{background-color:var(--button-green-background);margin-left:10px}.confirm__button__groups{margin-top:11px}.confirm__button__groups button{min-height:36px;width:auto;font-family:Open Sans;font-weight:500;font-size:14px;letter-spacing:1px;line-height:16px;padding-left:15px;padding-right:15px;margin-right:5px;float:right}.confirm__button__groups .confirm{background:var(--button-background)}.confirm__button__groups .confirm:hover{background:var(--primary-button-background-color);color:var(--primary-button-text-color)}.confirm__button__groups .confirm:disabled{cursor:not-allowed}.confirm__button__groups .cancel{background:var(--button-background)}.confirm__button__groups .cancel:hover{background:var(--primary-button-background-color);color:var(--primary-button-text-color)}.sticky-block{position:sticky;top:-1px;left:0;right:0;background:#fdfbff}.qmslib__related__popup__container .input__field{display:flex;align-items:center}.qmslib__related__popup__container .input__field input{width:100%;padding:10px;outline:none;border:none;background:var(--background-input-text)}.qmslib__related__popup__container .input__field .mat-icon{margin-left:-30px;cursor:pointer;vertical-align:middle}.qmslib__related__popup__container .line__divider{border-bottom:1px solid #ccc;height:1px;margin-top:10px;min-width:300px;max-width:100%}.qmslib__related__popup__container .button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qmslib__related__popup__container .panel__content{height:450px;overflow:auto;margin-top:12px}.qmslib__related__popup__container .panel__content_height_with_upload{height:380px}.qmslib__related__popup__container .panel__content_item{height:350px;overflow:auto;margin-top:12px}.qmslib__related__popup__container .panel__content_item_height_with_upload{height:257px}.qmslib__related__popup__container .panel-tree .mat-expansion-panel-body{padding:0 12px 12px}.qmslib__related__popup__container .mat-expansion-panel-header{height:30px;font-size:12px;letter-spacing:1px;font-family:Raleway;font-weight:600;padding:0}.qmslib__related__popup__container .mat-expansion-panel-header .mat-expansion-panel-header-title{align-items:center;margin-left:12px}.qmslib__related__popup__container .mat-expansion-panel-header .related_popup_toggle-btn{width:1.5rem;height:1.5rem;line-height:1.5rem}.qmslib__related__popup__container .mat-expansion-panel:not([class*=mat-elevation-z]){box-shadow:none}.qmslib__related__popup__container .panel__item{height:100px;margin-top:12px;overflow-x:hidden;overflow-y:auto;padding-right:5px;width:100%;max-width:100%;display:flex;flex-wrap:wrap;align-content:flex-start}.qmslib__related__popup__container .panel__item .related__item__inline{max-width:100%}.qmslib__related__popup__container .panel__item .related__item__content{height:32px;line-height:32px;background-color:var(--related-item-background);max-width:100%;margin-bottom:5px;margin-left:2.5px;margin-right:2.5px}.qmslib__related__popup__container .panel__item .related__item__content .mat-icon{color:var(--related-mat-icon-color);font-size:24px}.qmslib__related__popup__container .panel__item .related__item__content span.related__item__content_name{display:inline-block;min-width:calc(100% - 13px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:278px}.qmslib__related__popup__container .qmslib-related-popup-splitview{background-color:#fff;border-left:1px solid #ccc;height:450px;overflow-y:auto;margin-top:12px}.qmslib__related__popup__container .qmslib-related-popup-splitview.panel__content{height:450px;overflow:auto;margin-top:12px}.qmslib__related__popup__container .qmslib-related-popup-splitview.panel__content_item{height:350px;overflow:auto;margin-top:12px}.qmslib__related__popup__container .qmslib-related-popup-splitview .splitview-header{font-size:12px;letter-spacing:1px;font-family:RALEWAY;font-weight:600;display:flex;align-items:center}.qmslib__related__popup__container .qmslib-related-popup-splitview .mat-mdc-checkbox.qms-group-options{padding:0}.qmslib__related__popup__container .qmslib-related-popup-splitview .mat-mdc-checkbox.qms-group-options .mat-checkbox-inner-container{margin-right:11px}.qmslib__related__popup__container .qmslib-related-popup-splitview .mat-mdc-checkbox.qms-group-options.mat-checkbox-checked{background:transparent!important}.qmslib__related__popup__container .qmslib-related-popup-splitview .expand-node{margin-left:8px;display:flex;align-items:center;min-height:40px}.qmslib__related__popup__container .qmslib-related-popup-splitview .expand-node .mat-icon{color:#0009;margin-right:17px;min-width:fit-content}.qmslib__related__popup__container .qmslib-related-popup-splitview .expand-node .mat-icon svg{display:block;min-width:fit-content}.qmslib__related__popup__container .module-name{margin-top:10px;display:block;font-weight:600;font-family:Raleway}.qmslib__related__popup__container input::-webkit-outer-spin-button,.qmslib__related__popup__container input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.qmslib__related__popup__container input[type=number]{-moz-appearance:textfield}.qmslib__related__popup__container .panel_header_height_with_video_upload{height:350px}.qmslib__related__popup__container .panel_header_height_without_video_upload{height:300px}cdk-virtual-scroll-viewport{overflow-x:hidden}cdk-virtual-scroll-viewport .search__module-result{margin:1.5rem;padding:0 0 .5rem 0px}cdk-virtual-scroll-viewport .search__module-result .search__module-title{font-size:14px;font-weight:600}cdk-virtual-scroll-viewport .search__module-result .search__option{height:auto;line-height:normal;padding:8px 0;border-bottom:1px solid #e0e0e0}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item.mat-2-line.image-item{height:auto}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content{margin:0;border-bottom:none}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .wrap-image.image-square{width:2.5rem;height:100%;background:transparent;align-self:center;margin-right:0}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .wrap-image.image-square img{width:24px;height:24px}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .material-icons-outlined.leading-icon,cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content mat-icon.leading-icon{padding:4px 0 4px 4px}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .subtitle{font-weight:400}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .caption{overflow:hidden;line-height:normal;white-space:normal;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;padding:0;margin:0}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .caption span.search__result__parent-name{display:inline-block;width:auto;width:calc(100% - 13px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .default-subtitle{color:#00000061}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .search__description-icon{margin-right:0;width:12px;height:12px;font-size:12px}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .qms-list-text{border-bottom:none}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .breadcrumb-container .qms-breadcrumb-item .mat-icon{font-size:16px!important;padding-bottom:1px}cdk-virtual-scroll-viewport .search__module-result .mat-mdc-option[aria-disabled=true] .subtitle{color:#00000061}cdk-virtual-scroll-viewport .search__module-result .mat-mdc-option[aria-disabled=true] .breadcrumb-container .qms-breadcrumb-item .mat-icon{color:#00000061}cdk-virtual-scroll-viewport .search__module-result .mat-mdc-option[aria-disabled=true] .breadcrumb-container .qms-breadcrumb-item-text{color:#00000061}cdk-virtual-scroll-viewport .search__module-result svg{display:block}#qmslib_related_popup_header_001{width:100%;padding:0;font-weight:600;font-family:Raleway;margin:0}#qmslib_related_popup_header_001 .selected-image{padding-bottom:10px;width:100%}#qmslib_related_popup_header_001 .selected-image .input-upload,#qmslib_related_popup_header_001 .selected-image .module-name{width:100%;height:60px}.padding-5{padding:5px}.mat-mdc-autocomplete_related-viewport{height:100%;max-height:100%!important}.mat-mdc-autocomplete_related-viewport .cdk-virtual-scroll-content-wrapper{width:100%}.mat-mdc-autocomplete_related-viewport .related-viewport{min-height:300px}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: TranslateLibraryService }, { type: i1$2.MatDialogRef }, { type: QMSRelatedGlobalService }, { type: i4.MatIconRegistry }, { type: i1$3.DomSanitizer }, { type: QMSIconRegistryService }, { type: i0.ElementRef }, { type: QMSCKEditorUploadService }, { type: i1$2.MatDialog }, { type: PopupData, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -8993,11 +8993,11 @@ class RiskAnalysisComponent {
         this.dialogRef.close();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RiskAnalysisComponent, deps: [{ token: TranslateLibraryService }, { token: i1$2.MatDialog }, { token: i1$2.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: RiskAnalysisComponent, selector: "qms-risk-analysis", ngImport: i0, template: "<div\n  id=\"qmslib_risk_analysis\"\n  class=\"qmslib__risk__analysis__container qms__popup\"\n>\n  <div id=\"qmslib_risk_analysis_title\">\n    <span mat-icon-button class=\"button__close\" (click)=\"onCloseClick()\">\n      <mat-icon mat-icon>close</mat-icon>\n    </span>\n    <div id=\"qmslib_risk_analysis_title_001\" mat-dialog-content class=\"title\">\n      <span>{{ title }}</span>\n    </div>\n  </div>\n  <div id=\"qmslib_risk_analysis_header_001\" class=\"regular\">\n    <span>{{ LANG.REGULAR_TITLE }}</span>\n  </div>\n  <div id=\"qmslib_risk_analysis_header_002\" class=\"caption__regular\">\n    <span>{{ LANG.CAPTION_TITLE }}</span>\n  </div>\n  <div class=\"line__divider\"></div>\n  <div id=\"qmslib_risk_analysis_header_003\" class=\"overline\">\n    <span>{{ LANG.CAUSAL_ANALYZES | uppercase }}</span>\n  </div>\n  <div\n    id=\"qmslib_risk_analysis_content\"\n    class=\"panel__content qms-scrollbar\"\n    [ngClass]=\"\n      !analysisDanger.length ? 'panel__content__error' : 'panel__content'\n    \"\n  >\n    <qms-tree\n      [treeData]=\"dangers\"\n      [treeConfig]=\"dangerConfig\"\n      [selectedData]=\"selectedData\"\n      [disabledList]=\"disabledList\"\n      (checkBoxEvent)=\"toggleChileNode($event)\"\n    ></qms-tree>\n  </div>\n\n  <div *ngIf=\"!analysisDanger.length\" class=\"line__divider\"></div>\n\n  <div *ngIf=\"!analysisDanger.length\" class=\"panel__error\">\n    <span class=\"material-icons-outlined\">info</span>\n    <span class=\"message\"> {{ LANG.ERROR.SELECT_DANGER }}</span>\n  </div>\n\n  <div class=\"line__divider\"></div>\n\n  <div class=\"confirm__button__groups\">\n    <button\n      qms-btn\n      [disabled]=\"!analysisDanger.length\"\n      (click)=\"onFinishClick()\"\n    >\n      {{ LANG.FINISHED }}\n    </button>\n    <button qms-btn-text (click)=\"onCancelClick()\">\n      {{ LANG.CANCEL }}\n    </button>\n  </div>\n</div>\n", styles: ["::-webkit-scrollbar{width:12px}::-webkit-scrollbar-track{background:#0000001f;background-clip:content-box}::-webkit-scrollbar-thumb{background:#00000061;border-radius:20px;width:4px;border:4px solid transparent;background-clip:content-box}::-webkit-scrollbar-thumb:hover{background:#00000080;background-clip:content-box;border:4px solid transparent}.qms__popup .button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qms__danger button{border:none;color:var(--text-white);padding:0;text-align:center;text-decoration:none;display:inline-block;cursor:pointer;height:20px;width:20px;font-family:Open Sans;font-size:12px;font-weight:600;font-style:normal;line-height:16px}.qms__danger .red{background-color:var(--button-red-background);margin-left:10px}.qms__danger .yellow{background-color:var(--button-yellow-background);margin-left:10px;color:var(--popup-title-color)}.qms__danger .green{background-color:var(--button-green-background);margin-left:10px}.confirm__button__groups{margin-top:11px}.confirm__button__groups button{min-height:36px;width:auto;font-family:Open Sans;font-weight:500;font-size:14px;letter-spacing:1px;line-height:16px;padding-left:15px;padding-right:15px;margin-right:5px;float:right}.confirm__button__groups .confirm{background:var(--button-background)}.confirm__button__groups .confirm:hover{background:var(--primary-button-background-color);color:var(--primary-button-text-color)}.confirm__button__groups .confirm:disabled{cursor:not-allowed}.confirm__button__groups .cancel{background:var(--button-background)}.confirm__button__groups .cancel:hover{background:var(--primary-button-background-color);color:var(--primary-button-text-color)}.qmslib__risk__analysis__container .title{font:Raleway;font-weight:600;font-style:normal;font-size:16px;line-height:22px;color:var(--popup-title-color)}.qmslib__risk__analysis__container .line__divider{border-bottom:1px solid #ccc;height:1px;min-width:300px;max-width:100%}.qmslib__risk__analysis__container .regular{font-family:Open Sans;font-weight:400;font-style:normal;font-size:16px;line-height:28px;margin-top:10px}.qmslib__risk__analysis__container .caption__regular{font-family:Open Sans;font-weight:400;font-style:normal;font-size:12px;line-height:16px;margin-top:10px}.qmslib__risk__analysis__container .overline{font-family:Raleway;font-weight:600;font-style:normal;font-size:12px;letter-spacing:1px;line-height:16px;margin-top:15px}.qmslib__risk__analysis__container .panel__content{height:394px;overflow:auto;margin-top:12px}.qmslib__risk__analysis__container .panel__content__error{height:354px;overflow:auto;margin-top:12px}.qmslib__risk__analysis__container .panel__error{height:40px;color:var(--popup-error-color);display:flex;flex-wrap:wrap;align-content:center;margin-left:15px}.qmslib__risk__analysis__container .panel__error .message{font-family:Open Sans;font-weight:400;font-style:normal;font-size:14px;line-height:22px;margin-left:10px}.qmslib__risk__analysis__container .mat-mdc-dialog-content.title{padding:0}\n"], dependencies: [{ kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: QMSButton, selector: "button[qms-btn], button[qms-btn-lg], button[qms-btn-outlined],\n               button[qms-btn-outlined-lg], button[qms-btn-text], button[qms-btn-text-lg],\n               button[qms-btn-fab],button[qms-btn-fab-sm],button[qms-btn-fab-ext],\n               button[qms-btn-fab-outlined],button[qms-btn-fab-outlined-sm],button[qms-btn-fab-outlined-ext]", inputs: ["disabled", "color"], exportAs: ["qmsButton"] }, { kind: "component", type: TreeComponent, selector: "qms-tree", inputs: ["treeData", "treeConfig", "selectedData", "selectedRiskData", "disabledList", "expandOnTitleClick", "expandToChildNode", "parentNodeOnClick"], outputs: ["selectNodeEvent", "selectFolderEvent", "checkBoxEvent", "childCheckedEvent", "nodeExpandEvent", "treeControlNodes", "nodeCondensedEvent"] }, { kind: "pipe", type: i7.UpperCasePipe, name: "uppercase" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: RiskAnalysisComponent, selector: "qms-risk-analysis", ngImport: i0, template: "<div\n  id=\"qmslib_risk_analysis\"\n  class=\"qmslib__risk__analysis__container qms__popup\"\n>\n  <div id=\"qmslib_risk_analysis_title\">\n    <span mat-icon-button class=\"button__close\" (click)=\"onCloseClick()\">\n      <mat-icon mat-icon>close</mat-icon>\n    </span>\n    <div id=\"qmslib_risk_analysis_title_001\" mat-dialog-content class=\"title\">\n      <span>{{ title }}</span>\n    </div>\n  </div>\n  <div id=\"qmslib_risk_analysis_header_001\" class=\"regular\">\n    <span>{{ LANG.REGULAR_TITLE }}</span>\n  </div>\n  <div id=\"qmslib_risk_analysis_header_002\" class=\"caption__regular\">\n    <span>{{ LANG.CAPTION_TITLE }}</span>\n  </div>\n  <div class=\"line__divider\"></div>\n  <div id=\"qmslib_risk_analysis_header_003\" class=\"overline\">\n    <span>{{ LANG.CAUSAL_ANALYZES | uppercase }}</span>\n  </div>\n  <div\n    id=\"qmslib_risk_analysis_content\"\n    class=\"panel__content qms-scrollbar\"\n    [ngClass]=\"\n      !analysisDanger.length ? 'panel__content__error' : 'panel__content'\n    \"\n  >\n    <qms-tree\n      [treeData]=\"dangers\"\n      [treeConfig]=\"dangerConfig\"\n      [selectedData]=\"selectedData\"\n      [disabledList]=\"disabledList\"\n      (checkBoxEvent)=\"toggleChileNode($event)\"\n    ></qms-tree>\n  </div>\n\n  <div *ngIf=\"!analysisDanger.length\" class=\"line__divider\"></div>\n\n  <div *ngIf=\"!analysisDanger.length\" class=\"panel__error\">\n    <span class=\"material-icons-outlined\">info</span>\n    <span class=\"message\"> {{ LANG.ERROR.SELECT_DANGER }}</span>\n  </div>\n\n  <div class=\"line__divider\"></div>\n\n  <div class=\"confirm__button__groups\">\n    <button\n      qms-btn\n      [disabled]=\"!analysisDanger.length\"\n      (click)=\"onFinishClick()\"\n    >\n      {{ LANG.FINISHED }}\n    </button>\n    <button qms-btn-text (click)=\"onCancelClick()\">\n      {{ LANG.CANCEL }}\n    </button>\n  </div>\n</div>\n", styles: ["::-webkit-scrollbar{width:12px}::-webkit-scrollbar-track{background:#0000001f;background-clip:content-box}::-webkit-scrollbar-thumb{background:#00000061;border-radius:20px;width:4px;border:4px solid transparent;background-clip:content-box}::-webkit-scrollbar-thumb:hover{background:#00000080;background-clip:content-box;border:4px solid transparent}.qms__popup .button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qms__danger button{border:none;color:var(--text-white);padding:0;text-align:center;text-decoration:none;display:inline-block;cursor:pointer;height:20px;width:20px;font-family:Open Sans;font-size:12px;font-weight:600;font-style:normal;line-height:16px}.qms__danger .red{background-color:var(--button-red-background);margin-left:10px}.qms__danger .yellow{background-color:var(--button-yellow-background);margin-left:10px;color:var(--popup-title-color)}.qms__danger .green{background-color:var(--button-green-background);margin-left:10px}.confirm__button__groups{margin-top:11px}.confirm__button__groups button{min-height:36px;width:auto;font-family:Open Sans;font-weight:500;font-size:14px;letter-spacing:1px;line-height:16px;padding-left:15px;padding-right:15px;margin-right:5px;float:right}.confirm__button__groups .confirm{background:var(--button-background)}.confirm__button__groups .confirm:hover{background:var(--primary-button-background-color);color:var(--primary-button-text-color)}.confirm__button__groups .confirm:disabled{cursor:not-allowed}.confirm__button__groups .cancel{background:var(--button-background)}.confirm__button__groups .cancel:hover{background:var(--primary-button-background-color);color:var(--primary-button-text-color)}.qmslib__risk__analysis__container .title{font:Raleway;font-weight:600;font-style:normal;font-size:16px;line-height:22px;color:var(--popup-title-color)}.qmslib__risk__analysis__container .line__divider{border-bottom:1px solid #ccc;height:1px;min-width:300px;max-width:100%}.qmslib__risk__analysis__container .regular{font-family:Open Sans;font-weight:400;font-style:normal;font-size:16px;line-height:28px;margin-top:10px}.qmslib__risk__analysis__container .caption__regular{font-family:Open Sans;font-weight:400;font-style:normal;font-size:12px;line-height:16px;margin-top:10px}.qmslib__risk__analysis__container .overline{font-family:Raleway;font-weight:600;font-style:normal;font-size:12px;letter-spacing:1px;line-height:16px;margin-top:15px}.qmslib__risk__analysis__container .panel__content{height:394px;overflow:auto;margin-top:12px}.qmslib__risk__analysis__container .panel__content__error{height:354px;overflow:auto;margin-top:12px}.qmslib__risk__analysis__container .panel__error{height:40px;color:var(--popup-error-color);display:flex;flex-wrap:wrap;align-content:center;margin-left:15px}.qmslib__risk__analysis__container .panel__error .message{font-family:Open Sans;font-weight:400;font-style:normal;font-size:14px;line-height:22px;margin-left:10px}\n"], dependencies: [{ kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: QMSButton, selector: "button[qms-btn], button[qms-btn-lg], button[qms-btn-outlined],\n               button[qms-btn-outlined-lg], button[qms-btn-text], button[qms-btn-text-lg],\n               button[qms-btn-fab],button[qms-btn-fab-sm],button[qms-btn-fab-ext],\n               button[qms-btn-fab-outlined],button[qms-btn-fab-outlined-sm],button[qms-btn-fab-outlined-ext]", inputs: ["disabled", "color"], exportAs: ["qmsButton"] }, { kind: "component", type: TreeComponent, selector: "qms-tree", inputs: ["treeData", "treeConfig", "selectedData", "selectedRiskData", "disabledList", "expandOnTitleClick", "expandToChildNode", "parentNodeOnClick"], outputs: ["selectNodeEvent", "selectFolderEvent", "checkBoxEvent", "childCheckedEvent", "nodeExpandEvent", "treeControlNodes", "nodeCondensedEvent"] }, { kind: "pipe", type: i7.UpperCasePipe, name: "uppercase" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RiskAnalysisComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'qms-risk-analysis', template: "<div\n  id=\"qmslib_risk_analysis\"\n  class=\"qmslib__risk__analysis__container qms__popup\"\n>\n  <div id=\"qmslib_risk_analysis_title\">\n    <span mat-icon-button class=\"button__close\" (click)=\"onCloseClick()\">\n      <mat-icon mat-icon>close</mat-icon>\n    </span>\n    <div id=\"qmslib_risk_analysis_title_001\" mat-dialog-content class=\"title\">\n      <span>{{ title }}</span>\n    </div>\n  </div>\n  <div id=\"qmslib_risk_analysis_header_001\" class=\"regular\">\n    <span>{{ LANG.REGULAR_TITLE }}</span>\n  </div>\n  <div id=\"qmslib_risk_analysis_header_002\" class=\"caption__regular\">\n    <span>{{ LANG.CAPTION_TITLE }}</span>\n  </div>\n  <div class=\"line__divider\"></div>\n  <div id=\"qmslib_risk_analysis_header_003\" class=\"overline\">\n    <span>{{ LANG.CAUSAL_ANALYZES | uppercase }}</span>\n  </div>\n  <div\n    id=\"qmslib_risk_analysis_content\"\n    class=\"panel__content qms-scrollbar\"\n    [ngClass]=\"\n      !analysisDanger.length ? 'panel__content__error' : 'panel__content'\n    \"\n  >\n    <qms-tree\n      [treeData]=\"dangers\"\n      [treeConfig]=\"dangerConfig\"\n      [selectedData]=\"selectedData\"\n      [disabledList]=\"disabledList\"\n      (checkBoxEvent)=\"toggleChileNode($event)\"\n    ></qms-tree>\n  </div>\n\n  <div *ngIf=\"!analysisDanger.length\" class=\"line__divider\"></div>\n\n  <div *ngIf=\"!analysisDanger.length\" class=\"panel__error\">\n    <span class=\"material-icons-outlined\">info</span>\n    <span class=\"message\"> {{ LANG.ERROR.SELECT_DANGER }}</span>\n  </div>\n\n  <div class=\"line__divider\"></div>\n\n  <div class=\"confirm__button__groups\">\n    <button\n      qms-btn\n      [disabled]=\"!analysisDanger.length\"\n      (click)=\"onFinishClick()\"\n    >\n      {{ LANG.FINISHED }}\n    </button>\n    <button qms-btn-text (click)=\"onCancelClick()\">\n      {{ LANG.CANCEL }}\n    </button>\n  </div>\n</div>\n", styles: ["::-webkit-scrollbar{width:12px}::-webkit-scrollbar-track{background:#0000001f;background-clip:content-box}::-webkit-scrollbar-thumb{background:#00000061;border-radius:20px;width:4px;border:4px solid transparent;background-clip:content-box}::-webkit-scrollbar-thumb:hover{background:#00000080;background-clip:content-box;border:4px solid transparent}.qms__popup .button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qms__danger button{border:none;color:var(--text-white);padding:0;text-align:center;text-decoration:none;display:inline-block;cursor:pointer;height:20px;width:20px;font-family:Open Sans;font-size:12px;font-weight:600;font-style:normal;line-height:16px}.qms__danger .red{background-color:var(--button-red-background);margin-left:10px}.qms__danger .yellow{background-color:var(--button-yellow-background);margin-left:10px;color:var(--popup-title-color)}.qms__danger .green{background-color:var(--button-green-background);margin-left:10px}.confirm__button__groups{margin-top:11px}.confirm__button__groups button{min-height:36px;width:auto;font-family:Open Sans;font-weight:500;font-size:14px;letter-spacing:1px;line-height:16px;padding-left:15px;padding-right:15px;margin-right:5px;float:right}.confirm__button__groups .confirm{background:var(--button-background)}.confirm__button__groups .confirm:hover{background:var(--primary-button-background-color);color:var(--primary-button-text-color)}.confirm__button__groups .confirm:disabled{cursor:not-allowed}.confirm__button__groups .cancel{background:var(--button-background)}.confirm__button__groups .cancel:hover{background:var(--primary-button-background-color);color:var(--primary-button-text-color)}.qmslib__risk__analysis__container .title{font:Raleway;font-weight:600;font-style:normal;font-size:16px;line-height:22px;color:var(--popup-title-color)}.qmslib__risk__analysis__container .line__divider{border-bottom:1px solid #ccc;height:1px;min-width:300px;max-width:100%}.qmslib__risk__analysis__container .regular{font-family:Open Sans;font-weight:400;font-style:normal;font-size:16px;line-height:28px;margin-top:10px}.qmslib__risk__analysis__container .caption__regular{font-family:Open Sans;font-weight:400;font-style:normal;font-size:12px;line-height:16px;margin-top:10px}.qmslib__risk__analysis__container .overline{font-family:Raleway;font-weight:600;font-style:normal;font-size:12px;letter-spacing:1px;line-height:16px;margin-top:15px}.qmslib__risk__analysis__container .panel__content{height:394px;overflow:auto;margin-top:12px}.qmslib__risk__analysis__container .panel__content__error{height:354px;overflow:auto;margin-top:12px}.qmslib__risk__analysis__container .panel__error{height:40px;color:var(--popup-error-color);display:flex;flex-wrap:wrap;align-content:center;margin-left:15px}.qmslib__risk__analysis__container .panel__error .message{font-family:Open Sans;font-weight:400;font-style:normal;font-size:14px;line-height:22px;margin-left:10px}.qmslib__risk__analysis__container .mat-mdc-dialog-content.title{padding:0}\n"] }]
+            args: [{ selector: 'qms-risk-analysis', template: "<div\n  id=\"qmslib_risk_analysis\"\n  class=\"qmslib__risk__analysis__container qms__popup\"\n>\n  <div id=\"qmslib_risk_analysis_title\">\n    <span mat-icon-button class=\"button__close\" (click)=\"onCloseClick()\">\n      <mat-icon mat-icon>close</mat-icon>\n    </span>\n    <div id=\"qmslib_risk_analysis_title_001\" mat-dialog-content class=\"title\">\n      <span>{{ title }}</span>\n    </div>\n  </div>\n  <div id=\"qmslib_risk_analysis_header_001\" class=\"regular\">\n    <span>{{ LANG.REGULAR_TITLE }}</span>\n  </div>\n  <div id=\"qmslib_risk_analysis_header_002\" class=\"caption__regular\">\n    <span>{{ LANG.CAPTION_TITLE }}</span>\n  </div>\n  <div class=\"line__divider\"></div>\n  <div id=\"qmslib_risk_analysis_header_003\" class=\"overline\">\n    <span>{{ LANG.CAUSAL_ANALYZES | uppercase }}</span>\n  </div>\n  <div\n    id=\"qmslib_risk_analysis_content\"\n    class=\"panel__content qms-scrollbar\"\n    [ngClass]=\"\n      !analysisDanger.length ? 'panel__content__error' : 'panel__content'\n    \"\n  >\n    <qms-tree\n      [treeData]=\"dangers\"\n      [treeConfig]=\"dangerConfig\"\n      [selectedData]=\"selectedData\"\n      [disabledList]=\"disabledList\"\n      (checkBoxEvent)=\"toggleChileNode($event)\"\n    ></qms-tree>\n  </div>\n\n  <div *ngIf=\"!analysisDanger.length\" class=\"line__divider\"></div>\n\n  <div *ngIf=\"!analysisDanger.length\" class=\"panel__error\">\n    <span class=\"material-icons-outlined\">info</span>\n    <span class=\"message\"> {{ LANG.ERROR.SELECT_DANGER }}</span>\n  </div>\n\n  <div class=\"line__divider\"></div>\n\n  <div class=\"confirm__button__groups\">\n    <button\n      qms-btn\n      [disabled]=\"!analysisDanger.length\"\n      (click)=\"onFinishClick()\"\n    >\n      {{ LANG.FINISHED }}\n    </button>\n    <button qms-btn-text (click)=\"onCancelClick()\">\n      {{ LANG.CANCEL }}\n    </button>\n  </div>\n</div>\n", styles: ["::-webkit-scrollbar{width:12px}::-webkit-scrollbar-track{background:#0000001f;background-clip:content-box}::-webkit-scrollbar-thumb{background:#00000061;border-radius:20px;width:4px;border:4px solid transparent;background-clip:content-box}::-webkit-scrollbar-thumb:hover{background:#00000080;background-clip:content-box;border:4px solid transparent}.qms__popup .button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qms__danger button{border:none;color:var(--text-white);padding:0;text-align:center;text-decoration:none;display:inline-block;cursor:pointer;height:20px;width:20px;font-family:Open Sans;font-size:12px;font-weight:600;font-style:normal;line-height:16px}.qms__danger .red{background-color:var(--button-red-background);margin-left:10px}.qms__danger .yellow{background-color:var(--button-yellow-background);margin-left:10px;color:var(--popup-title-color)}.qms__danger .green{background-color:var(--button-green-background);margin-left:10px}.confirm__button__groups{margin-top:11px}.confirm__button__groups button{min-height:36px;width:auto;font-family:Open Sans;font-weight:500;font-size:14px;letter-spacing:1px;line-height:16px;padding-left:15px;padding-right:15px;margin-right:5px;float:right}.confirm__button__groups .confirm{background:var(--button-background)}.confirm__button__groups .confirm:hover{background:var(--primary-button-background-color);color:var(--primary-button-text-color)}.confirm__button__groups .confirm:disabled{cursor:not-allowed}.confirm__button__groups .cancel{background:var(--button-background)}.confirm__button__groups .cancel:hover{background:var(--primary-button-background-color);color:var(--primary-button-text-color)}.qmslib__risk__analysis__container .title{font:Raleway;font-weight:600;font-style:normal;font-size:16px;line-height:22px;color:var(--popup-title-color)}.qmslib__risk__analysis__container .line__divider{border-bottom:1px solid #ccc;height:1px;min-width:300px;max-width:100%}.qmslib__risk__analysis__container .regular{font-family:Open Sans;font-weight:400;font-style:normal;font-size:16px;line-height:28px;margin-top:10px}.qmslib__risk__analysis__container .caption__regular{font-family:Open Sans;font-weight:400;font-style:normal;font-size:12px;line-height:16px;margin-top:10px}.qmslib__risk__analysis__container .overline{font-family:Raleway;font-weight:600;font-style:normal;font-size:12px;letter-spacing:1px;line-height:16px;margin-top:15px}.qmslib__risk__analysis__container .panel__content{height:394px;overflow:auto;margin-top:12px}.qmslib__risk__analysis__container .panel__content__error{height:354px;overflow:auto;margin-top:12px}.qmslib__risk__analysis__container .panel__error{height:40px;color:var(--popup-error-color);display:flex;flex-wrap:wrap;align-content:center;margin-left:15px}.qmslib__risk__analysis__container .panel__error .message{font-family:Open Sans;font-weight:400;font-style:normal;font-size:14px;line-height:22px;margin-left:10px}\n"] }]
         }], ctorParameters: () => [{ type: TranslateLibraryService }, { type: i1$2.MatDialog }, { type: i1$2.MatDialogRef }, { type: RiskAnalysis, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -9401,11 +9401,11 @@ class QMSCKEditorConfirmComponent extends QMSCKEditorBaseComponent {
         this.dialogRef.close(obj);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: QMSCKEditorConfirmComponent, deps: [{ token: TranslateLibraryService }, { token: i1$2.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: QMSCKEditorConfirmComponent, selector: "app-confirm-popup", usesInheritance: true, ngImport: i0, template: "<div qms-dialog-container>\n  <div qms-dialog-header>\n    <h3 class=\"title\">{{ data.title }}</h3>\n    <button type=\"button\" qms-btn-icon color=\"light\" class=\"close-button\" [mat-dialog-close]=\"false\"\n      *ngIf=\"data.isCloseBtn\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </div>\n  <div qms-dialog-content>\n    <div class=\"row\">\n      <div class=\"col-12\">\n        <p [innerHTML]=\"data.content\"></p>\n        <div class=\"section-message\" *ngIf=\"!data.isMessage && data.isAdvance\">\n          <mat-checkbox qms-group-options color=\"default\" [(ngModel)]=\"isNotShowAgain\">\n            <span class=\"text-label\">{{data.checkText}}</span>\n          </mat-checkbox>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div qms-dialog-footer>\n    <div *ngIf=\"data.isMessage\" class=\"row ml-0 mr-0 mt20 ms-0 me-0\">\n      <div class=\"ml-auto mt-auto\">\n        <button type=\"button\" qms-btn class=\"save\" (click)=\"onConfirmClick()\">\n          <mat-icon>check</mat-icon>\n          {{ LANG.QMSCKEDITOR.CONFIRM }}\n        </button>\n      </div>\n    </div>\n    <div *ngIf=\"!data.isMessage\">\n      <div class=\"qmsckeditor confirm__button__groups ml-auto mt-auto\">\n        <button mat-button class=\"cancel\" (click)=\"onCancelClick()\">\n          {{ LANG.QMSCKEDITOR.CANCEL }}\n        </button>\n        <button *ngIf=\"!data.isAdvance\" mat-button class=\"confirm ml3\" (click)=\"onConfirmClick()\">\n          {{ LANG.QMSCKEDITOR.CONFIRM }}\n        </button>\n        <button *ngIf=\"data.isAdvance\" mat-button class=\"confirm ml3\" (click)=\"onAdvanceConfirmClick()\">\n          {{ LANG.QMSCKEDITOR.CONFIRM }}\n        </button>\n      </div>\n    </div>\n  </div>\n</div>", styles: [".mt5{margin-top:5px!important}.mt10{margin-top:10px!important}.mt7{margin-top:7px!important}.mt15{margin-top:15px!important}.mt20{margin-top:20px!important}.mt30{margin-top:30px!important}.mt40{margin-top:40px!important}.ml2{margin-left:2px!important}.ml3{margin-left:3px!important}.ml5{margin-left:5px!important}.ml15{margin-left:15px!important}.ml10{margin-left:10px!important}.ml12{margin-left:12px!important}.ml16{margin-left:16px!important}.ml-auto{margin-left:auto!important}.ml-25{margin-left:-25px!important}.mr5{margin-right:5px!important}.mr12{margin-right:12px!important}.mr15{margin-right:15px!important}.mb5{margin-bottom:5px!important}.mb10{margin-bottom:10px!important}.mb15{margin-bottom:15px!important}.pt8{padding-top:8px!important}.pt10{padding-top:10px!important}.pt15{padding-top:15px!important}.pt16{padding-top:16px!important}.pl15{padding-left:15px!important}.pl0{padding-left:0!important}.pr0{padding-right:0!important}.pr15{padding-right:15px!important}.fs12{font-size:12px}.fs14{font-size:14px!important}.fs16{font-size:16px!important}.fs22{font-size:22px!important}.fw500{font-weight:500!important}.italic-text{font-style:italic}.display-flex{display:flex}.qmsckeditor{font-family:Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:400}.qmsckeditor h2{font-size:20px;font-weight:400}.qmsckeditor .mat-mdc-dialog-content{padding:0}.qmsckeditor .mat-icon{color:#909497}.qmsckeditor__fullscreen{position:fixed;inset:0;background:#fff;overflow-y:auto;max-height:100vh;overflow-x:hidden}.qmsckeditor__cursor{cursor:pointer}.qmsckeditor__notallowed{cursor:not-allowed}.qmsckeditor.button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qmsckeditor.button__done{float:right;top:-24px;right:-24px;cursor:pointer;margin-right:20px}.qmsckeditor.button__done .mat-icon{color:#28a745;font-weight:700}.qmsckeditor.button__groups button{min-height:40px;width:100%;border-radius:4px;border:1px solid #C5C5C5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px}.qmsckeditor.button__groups .save{background:#f8f9f9}.qmsckeditor.button__groups .save:hover{background:#e5e7e9}.qmsckeditor.button__groups .save:disabled{cursor:not-allowed}.qmsckeditor.button__groups .cancel{background:#f8f9f9}.qmsckeditor.button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.button__groups .cancel:disabled{cursor:not-allowed}.qmsckeditor.button__groups .delete{background:#f8f9f9}.qmsckeditor.button__groups .delete:hover{background:#e5e7e9}.qmsckeditor.button__groups .delete:disabled{cursor:not-allowed}.qmsckeditor.confirm__button__groups button{min-height:36px;border-radius:4px;width:auto;border:1px solid #C5C5C5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px;padding-left:15px;padding-right:15px}.qmsckeditor.confirm__button__groups .confirm{background:#f8f9f9}.qmsckeditor.confirm__button__groups .confirm:hover{background:#e5e7e9}.qmsckeditor.confirm__button__groups .cancel{background:#f8f9f9}.qmsckeditor.confirm__button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.template-content.height{min-height:420px;max-height:520px;overflow:auto}.qmsckeditor.template-content.title{margin-left:-9px}.qmsckeditor.link__content.height{min-height:400px;max-height:520px}.qmsckeditor.card{margin-bottom:10px;min-height:60px;box-shadow:none;border:1px solid #e5e5e5}.qmsckeditor.card .title{font-weight:700}.qmsckeditor.card .content{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.qmsckeditor.card .material-icons{font-size:20px}.qmsckeditor.tooltip-content.height{min-height:400px;max-height:472px;overflow:auto}.qmsckeditor.save__as__template.height{height:125px}.ck-content .page-break,.ck-content .ck-horizontal-line{width:100%}.ck-content hr{background:#ccc}.ck-font-size-dropdown .ck-dropdown__panel ul{max-height:320px;overflow-y:auto}.ck-font-size-dropdown .ck-dropdown__panel ul li .ck-fontsize-option .ck-button__label{line-height:50px}.qms-dialog-container{font-family:Open Sans;display:flex;flex-flow:column;min-height:150px;max-height:80vh}.qms-dialog-container .qms-dialog-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;flex:0 1 auto;height:50px}.qms-dialog-container .qms-dialog-content{flex:1 1 auto;overflow-y:auto;overflow-x:hidden;margin:0}.qms-dialog-container .qms-dialog-footer{display:flex;flex-wrap:wrap;min-height:50px;align-items:center;box-sizing:content-box;justify-content:end;margin-top:10px;flex:0 1 auto;height:50px}.qms-dialog-container .qms-dialog-footer.qms-dialog-footer-align-center{justify-content:center}.qms-dialog-container .qms-dialog-footer.qms-dialog-footer-align-start{justify-content:start}.qms-dialog-container .title{margin-bottom:0;margin-left:0;font-weight:600;font-size:22px;color:#323232}.qms-dialog-container .close-button{width:40px;height:40px;line-height:40px}.qms-dialog-container .section-message{display:flex;min-height:40px}\n"], dependencies: [{ kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i8$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: QMSButton, selector: "button[qms-btn], button[qms-btn-lg], button[qms-btn-outlined],\n               button[qms-btn-outlined-lg], button[qms-btn-text], button[qms-btn-text-lg],\n               button[qms-btn-fab],button[qms-btn-fab-sm],button[qms-btn-fab-ext],\n               button[qms-btn-fab-outlined],button[qms-btn-fab-outlined-sm],button[qms-btn-fab-outlined-ext]", inputs: ["disabled", "color"], exportAs: ["qmsButton"] }, { kind: "component", type: QMSButtonIcon, selector: "button[qms-btn-icon]", inputs: ["disabled", "color", "active"], exportAs: ["qmsButtonIcon"] }, { kind: "directive", type: QMSGroupOptionDirective, selector: "[qms-group-options]", inputs: ["label"] }, { kind: "directive", type: AutocompleteOffDirective, selector: "[qms-group-options]" }, { kind: "directive", type: QMSDialogContainer, selector: "[qms-dialog-container], qms-dialog-container, [qmsDialogContainer]", inputs: ["min", "max"] }, { kind: "directive", type: QMSDialogHeader, selector: "[qms-dialog-header], qms-dialog-header, [qmsDialogHeader]", inputs: ["height"], exportAs: ["qmsDialogHeader"] }, { kind: "directive", type: QMSDialogContent, selector: "[qms-dialog-content], qms-dialog-content, [qmsDialogContent]" }, { kind: "directive", type: QMSDialogFooter, selector: "[qms-dialog-footer], qms-dialog-footer, [qmsDialogFooter]", inputs: ["align", "height"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: QMSCKEditorConfirmComponent, selector: "app-confirm-popup", usesInheritance: true, ngImport: i0, template: "<div qms-dialog-container>\n  <div qms-dialog-header>\n    <h3 class=\"title\">{{ data.title }}</h3>\n    <button type=\"button\" qms-btn-icon color=\"light\" class=\"close-button\" [mat-dialog-close]=\"false\"\n      *ngIf=\"data.isCloseBtn\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </div>\n  <div qms-dialog-content>\n    <div class=\"row\">\n      <div class=\"col-12\">\n        <p [innerHTML]=\"data.content\"></p>\n        <div class=\"section-message\" *ngIf=\"!data.isMessage && data.isAdvance\">\n          <mat-checkbox qms-group-options color=\"default\" [(ngModel)]=\"isNotShowAgain\">\n            <span class=\"text-label\">{{data.checkText}}</span>\n          </mat-checkbox>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div qms-dialog-footer>\n    <div *ngIf=\"data.isMessage\" class=\"row ml-0 mr-0 mt20 ms-0 me-0\">\n      <div class=\"ml-auto mt-auto\">\n        <button type=\"button\" qms-btn class=\"save\" (click)=\"onConfirmClick()\">\n          <mat-icon>check</mat-icon>\n          {{ LANG.QMSCKEDITOR.CONFIRM }}\n        </button>\n      </div>\n    </div>\n    <div *ngIf=\"!data.isMessage\">\n      <div class=\"qmsckeditor confirm__button__groups ml-auto mt-auto\">\n        <button mat-button class=\"cancel\" (click)=\"onCancelClick()\">\n          {{ LANG.QMSCKEDITOR.CANCEL }}\n        </button>\n        <button *ngIf=\"!data.isAdvance\" mat-button class=\"confirm ml3\" (click)=\"onConfirmClick()\">\n          {{ LANG.QMSCKEDITOR.CONFIRM }}\n        </button>\n        <button *ngIf=\"data.isAdvance\" mat-button class=\"confirm ml3\" (click)=\"onAdvanceConfirmClick()\">\n          {{ LANG.QMSCKEDITOR.CONFIRM }}\n        </button>\n      </div>\n    </div>\n  </div>\n</div>", styles: [".mt5{margin-top:5px!important}.mt10{margin-top:10px!important}.mt7{margin-top:7px!important}.mt15{margin-top:15px!important}.mt20{margin-top:20px!important}.mt30{margin-top:30px!important}.mt40{margin-top:40px!important}.ml2{margin-left:2px!important}.ml3{margin-left:3px!important}.ml5{margin-left:5px!important}.ml15{margin-left:15px!important}.ml10{margin-left:10px!important}.ml12{margin-left:12px!important}.ml16{margin-left:16px!important}.ml-auto{margin-left:auto!important}.ml-25{margin-left:-25px!important}.mr5{margin-right:5px!important}.mr12{margin-right:12px!important}.mr15{margin-right:15px!important}.mb5{margin-bottom:5px!important}.mb10{margin-bottom:10px!important}.mb15{margin-bottom:15px!important}.pt8{padding-top:8px!important}.pt10{padding-top:10px!important}.pt15{padding-top:15px!important}.pt16{padding-top:16px!important}.pl15{padding-left:15px!important}.pl0{padding-left:0!important}.pr0{padding-right:0!important}.pr15{padding-right:15px!important}.fs12{font-size:12px}.fs14{font-size:14px!important}.fs16{font-size:16px!important}.fs22{font-size:22px!important}.fw500{font-weight:500!important}.italic-text{font-style:italic}.display-flex{display:flex}.qmsckeditor{font-family:Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:400}.qmsckeditor h2{font-size:20px;font-weight:400}.qmsckeditor .mat-icon{color:#909497}.qmsckeditor__fullscreen{position:fixed;inset:0;background:#fff;overflow-y:auto;max-height:100vh;overflow-x:hidden}.qmsckeditor__cursor{cursor:pointer}.qmsckeditor__notallowed{cursor:not-allowed}.qmsckeditor.button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qmsckeditor.button__done{float:right;top:-24px;right:-24px;cursor:pointer;margin-right:20px}.qmsckeditor.button__done .mat-icon{color:#28a745;font-weight:700}.qmsckeditor.button__groups button{min-height:40px;width:100%;border-radius:4px;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px}.qmsckeditor.button__groups .save{background:#f8f9f9}.qmsckeditor.button__groups .save:hover{background:#e5e7e9}.qmsckeditor.button__groups .save:disabled{cursor:not-allowed}.qmsckeditor.button__groups .cancel{background:#f8f9f9}.qmsckeditor.button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.button__groups .cancel:disabled{cursor:not-allowed}.qmsckeditor.button__groups .delete{background:#f8f9f9}.qmsckeditor.button__groups .delete:hover{background:#e5e7e9}.qmsckeditor.button__groups .delete:disabled{cursor:not-allowed}.qmsckeditor.confirm__button__groups button{min-height:36px;border-radius:4px;width:auto;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px;padding-left:15px;padding-right:15px}.qmsckeditor.confirm__button__groups .confirm{background:#f8f9f9}.qmsckeditor.confirm__button__groups .confirm:hover{background:#e5e7e9}.qmsckeditor.confirm__button__groups .cancel{background:#f8f9f9}.qmsckeditor.confirm__button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.template-content.height{min-height:420px;max-height:520px;overflow:auto}.qmsckeditor.template-content.title{margin-left:-9px}.qmsckeditor.link__content.height{min-height:400px;max-height:520px}.qmsckeditor.card{margin-bottom:10px;min-height:60px;box-shadow:none;border:1px solid #e5e5e5}.qmsckeditor.card .title{font-weight:700}.qmsckeditor.card .content{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.qmsckeditor.card .material-icons{font-size:20px}.qmsckeditor.tooltip-content.height{min-height:400px;max-height:472px;overflow:auto}.qmsckeditor.save__as__template.height{height:125px}.ck-content .page-break,.ck-content .ck-horizontal-line{width:100%}.ck-content hr{background:#ccc}.ck-font-size-dropdown .ck-dropdown__panel ul{max-height:320px;overflow-y:auto}.ck-font-size-dropdown .ck-dropdown__panel ul li .ck-fontsize-option .ck-button__label{line-height:50px}.qms-dialog-container{font-family:Open Sans;display:flex;flex-flow:column;min-height:150px;max-height:80vh}.qms-dialog-container .qms-dialog-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;flex:0 1 auto;height:50px}.qms-dialog-container .qms-dialog-content{flex:1 1 auto;overflow-y:auto;overflow-x:hidden;margin:0}.qms-dialog-container .qms-dialog-footer{display:flex;flex-wrap:wrap;min-height:50px;align-items:center;box-sizing:content-box;justify-content:end;margin-top:10px;flex:0 1 auto;height:50px}.qms-dialog-container .qms-dialog-footer.qms-dialog-footer-align-center{justify-content:center}.qms-dialog-container .qms-dialog-footer.qms-dialog-footer-align-start{justify-content:start}.qms-dialog-container .title{margin-bottom:0;margin-left:0;font-weight:600;font-size:22px;color:#323232}.qms-dialog-container .close-button{width:40px;height:40px;line-height:40px}.qms-dialog-container .section-message{display:flex;min-height:40px}\n"], dependencies: [{ kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i8$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: QMSButton, selector: "button[qms-btn], button[qms-btn-lg], button[qms-btn-outlined],\n               button[qms-btn-outlined-lg], button[qms-btn-text], button[qms-btn-text-lg],\n               button[qms-btn-fab],button[qms-btn-fab-sm],button[qms-btn-fab-ext],\n               button[qms-btn-fab-outlined],button[qms-btn-fab-outlined-sm],button[qms-btn-fab-outlined-ext]", inputs: ["disabled", "color"], exportAs: ["qmsButton"] }, { kind: "component", type: QMSButtonIcon, selector: "button[qms-btn-icon]", inputs: ["disabled", "color", "active"], exportAs: ["qmsButtonIcon"] }, { kind: "directive", type: QMSGroupOptionDirective, selector: "[qms-group-options]", inputs: ["label"] }, { kind: "directive", type: AutocompleteOffDirective, selector: "[qms-group-options]" }, { kind: "directive", type: QMSDialogContainer, selector: "[qms-dialog-container], qms-dialog-container, [qmsDialogContainer]", inputs: ["min", "max"] }, { kind: "directive", type: QMSDialogHeader, selector: "[qms-dialog-header], qms-dialog-header, [qmsDialogHeader]", inputs: ["height"], exportAs: ["qmsDialogHeader"] }, { kind: "directive", type: QMSDialogContent, selector: "[qms-dialog-content], qms-dialog-content, [qmsDialogContent]" }, { kind: "directive", type: QMSDialogFooter, selector: "[qms-dialog-footer], qms-dialog-footer, [qmsDialogFooter]", inputs: ["align", "height"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: QMSCKEditorConfirmComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-confirm-popup', template: "<div qms-dialog-container>\n  <div qms-dialog-header>\n    <h3 class=\"title\">{{ data.title }}</h3>\n    <button type=\"button\" qms-btn-icon color=\"light\" class=\"close-button\" [mat-dialog-close]=\"false\"\n      *ngIf=\"data.isCloseBtn\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </div>\n  <div qms-dialog-content>\n    <div class=\"row\">\n      <div class=\"col-12\">\n        <p [innerHTML]=\"data.content\"></p>\n        <div class=\"section-message\" *ngIf=\"!data.isMessage && data.isAdvance\">\n          <mat-checkbox qms-group-options color=\"default\" [(ngModel)]=\"isNotShowAgain\">\n            <span class=\"text-label\">{{data.checkText}}</span>\n          </mat-checkbox>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div qms-dialog-footer>\n    <div *ngIf=\"data.isMessage\" class=\"row ml-0 mr-0 mt20 ms-0 me-0\">\n      <div class=\"ml-auto mt-auto\">\n        <button type=\"button\" qms-btn class=\"save\" (click)=\"onConfirmClick()\">\n          <mat-icon>check</mat-icon>\n          {{ LANG.QMSCKEDITOR.CONFIRM }}\n        </button>\n      </div>\n    </div>\n    <div *ngIf=\"!data.isMessage\">\n      <div class=\"qmsckeditor confirm__button__groups ml-auto mt-auto\">\n        <button mat-button class=\"cancel\" (click)=\"onCancelClick()\">\n          {{ LANG.QMSCKEDITOR.CANCEL }}\n        </button>\n        <button *ngIf=\"!data.isAdvance\" mat-button class=\"confirm ml3\" (click)=\"onConfirmClick()\">\n          {{ LANG.QMSCKEDITOR.CONFIRM }}\n        </button>\n        <button *ngIf=\"data.isAdvance\" mat-button class=\"confirm ml3\" (click)=\"onAdvanceConfirmClick()\">\n          {{ LANG.QMSCKEDITOR.CONFIRM }}\n        </button>\n      </div>\n    </div>\n  </div>\n</div>", styles: [".mt5{margin-top:5px!important}.mt10{margin-top:10px!important}.mt7{margin-top:7px!important}.mt15{margin-top:15px!important}.mt20{margin-top:20px!important}.mt30{margin-top:30px!important}.mt40{margin-top:40px!important}.ml2{margin-left:2px!important}.ml3{margin-left:3px!important}.ml5{margin-left:5px!important}.ml15{margin-left:15px!important}.ml10{margin-left:10px!important}.ml12{margin-left:12px!important}.ml16{margin-left:16px!important}.ml-auto{margin-left:auto!important}.ml-25{margin-left:-25px!important}.mr5{margin-right:5px!important}.mr12{margin-right:12px!important}.mr15{margin-right:15px!important}.mb5{margin-bottom:5px!important}.mb10{margin-bottom:10px!important}.mb15{margin-bottom:15px!important}.pt8{padding-top:8px!important}.pt10{padding-top:10px!important}.pt15{padding-top:15px!important}.pt16{padding-top:16px!important}.pl15{padding-left:15px!important}.pl0{padding-left:0!important}.pr0{padding-right:0!important}.pr15{padding-right:15px!important}.fs12{font-size:12px}.fs14{font-size:14px!important}.fs16{font-size:16px!important}.fs22{font-size:22px!important}.fw500{font-weight:500!important}.italic-text{font-style:italic}.display-flex{display:flex}.qmsckeditor{font-family:Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:400}.qmsckeditor h2{font-size:20px;font-weight:400}.qmsckeditor .mat-mdc-dialog-content{padding:0}.qmsckeditor .mat-icon{color:#909497}.qmsckeditor__fullscreen{position:fixed;inset:0;background:#fff;overflow-y:auto;max-height:100vh;overflow-x:hidden}.qmsckeditor__cursor{cursor:pointer}.qmsckeditor__notallowed{cursor:not-allowed}.qmsckeditor.button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qmsckeditor.button__done{float:right;top:-24px;right:-24px;cursor:pointer;margin-right:20px}.qmsckeditor.button__done .mat-icon{color:#28a745;font-weight:700}.qmsckeditor.button__groups button{min-height:40px;width:100%;border-radius:4px;border:1px solid #C5C5C5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px}.qmsckeditor.button__groups .save{background:#f8f9f9}.qmsckeditor.button__groups .save:hover{background:#e5e7e9}.qmsckeditor.button__groups .save:disabled{cursor:not-allowed}.qmsckeditor.button__groups .cancel{background:#f8f9f9}.qmsckeditor.button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.button__groups .cancel:disabled{cursor:not-allowed}.qmsckeditor.button__groups .delete{background:#f8f9f9}.qmsckeditor.button__groups .delete:hover{background:#e5e7e9}.qmsckeditor.button__groups .delete:disabled{cursor:not-allowed}.qmsckeditor.confirm__button__groups button{min-height:36px;border-radius:4px;width:auto;border:1px solid #C5C5C5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px;padding-left:15px;padding-right:15px}.qmsckeditor.confirm__button__groups .confirm{background:#f8f9f9}.qmsckeditor.confirm__button__groups .confirm:hover{background:#e5e7e9}.qmsckeditor.confirm__button__groups .cancel{background:#f8f9f9}.qmsckeditor.confirm__button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.template-content.height{min-height:420px;max-height:520px;overflow:auto}.qmsckeditor.template-content.title{margin-left:-9px}.qmsckeditor.link__content.height{min-height:400px;max-height:520px}.qmsckeditor.card{margin-bottom:10px;min-height:60px;box-shadow:none;border:1px solid #e5e5e5}.qmsckeditor.card .title{font-weight:700}.qmsckeditor.card .content{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.qmsckeditor.card .material-icons{font-size:20px}.qmsckeditor.tooltip-content.height{min-height:400px;max-height:472px;overflow:auto}.qmsckeditor.save__as__template.height{height:125px}.ck-content .page-break,.ck-content .ck-horizontal-line{width:100%}.ck-content hr{background:#ccc}.ck-font-size-dropdown .ck-dropdown__panel ul{max-height:320px;overflow-y:auto}.ck-font-size-dropdown .ck-dropdown__panel ul li .ck-fontsize-option .ck-button__label{line-height:50px}.qms-dialog-container{font-family:Open Sans;display:flex;flex-flow:column;min-height:150px;max-height:80vh}.qms-dialog-container .qms-dialog-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;flex:0 1 auto;height:50px}.qms-dialog-container .qms-dialog-content{flex:1 1 auto;overflow-y:auto;overflow-x:hidden;margin:0}.qms-dialog-container .qms-dialog-footer{display:flex;flex-wrap:wrap;min-height:50px;align-items:center;box-sizing:content-box;justify-content:end;margin-top:10px;flex:0 1 auto;height:50px}.qms-dialog-container .qms-dialog-footer.qms-dialog-footer-align-center{justify-content:center}.qms-dialog-container .qms-dialog-footer.qms-dialog-footer-align-start{justify-content:start}.qms-dialog-container .title{margin-bottom:0;margin-left:0;font-weight:600;font-size:22px;color:#323232}.qms-dialog-container .close-button{width:40px;height:40px;line-height:40px}.qms-dialog-container .section-message{display:flex;min-height:40px}\n"] }]
+            args: [{ selector: 'app-confirm-popup', template: "<div qms-dialog-container>\n  <div qms-dialog-header>\n    <h3 class=\"title\">{{ data.title }}</h3>\n    <button type=\"button\" qms-btn-icon color=\"light\" class=\"close-button\" [mat-dialog-close]=\"false\"\n      *ngIf=\"data.isCloseBtn\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </div>\n  <div qms-dialog-content>\n    <div class=\"row\">\n      <div class=\"col-12\">\n        <p [innerHTML]=\"data.content\"></p>\n        <div class=\"section-message\" *ngIf=\"!data.isMessage && data.isAdvance\">\n          <mat-checkbox qms-group-options color=\"default\" [(ngModel)]=\"isNotShowAgain\">\n            <span class=\"text-label\">{{data.checkText}}</span>\n          </mat-checkbox>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div qms-dialog-footer>\n    <div *ngIf=\"data.isMessage\" class=\"row ml-0 mr-0 mt20 ms-0 me-0\">\n      <div class=\"ml-auto mt-auto\">\n        <button type=\"button\" qms-btn class=\"save\" (click)=\"onConfirmClick()\">\n          <mat-icon>check</mat-icon>\n          {{ LANG.QMSCKEDITOR.CONFIRM }}\n        </button>\n      </div>\n    </div>\n    <div *ngIf=\"!data.isMessage\">\n      <div class=\"qmsckeditor confirm__button__groups ml-auto mt-auto\">\n        <button mat-button class=\"cancel\" (click)=\"onCancelClick()\">\n          {{ LANG.QMSCKEDITOR.CANCEL }}\n        </button>\n        <button *ngIf=\"!data.isAdvance\" mat-button class=\"confirm ml3\" (click)=\"onConfirmClick()\">\n          {{ LANG.QMSCKEDITOR.CONFIRM }}\n        </button>\n        <button *ngIf=\"data.isAdvance\" mat-button class=\"confirm ml3\" (click)=\"onAdvanceConfirmClick()\">\n          {{ LANG.QMSCKEDITOR.CONFIRM }}\n        </button>\n      </div>\n    </div>\n  </div>\n</div>", styles: [".mt5{margin-top:5px!important}.mt10{margin-top:10px!important}.mt7{margin-top:7px!important}.mt15{margin-top:15px!important}.mt20{margin-top:20px!important}.mt30{margin-top:30px!important}.mt40{margin-top:40px!important}.ml2{margin-left:2px!important}.ml3{margin-left:3px!important}.ml5{margin-left:5px!important}.ml15{margin-left:15px!important}.ml10{margin-left:10px!important}.ml12{margin-left:12px!important}.ml16{margin-left:16px!important}.ml-auto{margin-left:auto!important}.ml-25{margin-left:-25px!important}.mr5{margin-right:5px!important}.mr12{margin-right:12px!important}.mr15{margin-right:15px!important}.mb5{margin-bottom:5px!important}.mb10{margin-bottom:10px!important}.mb15{margin-bottom:15px!important}.pt8{padding-top:8px!important}.pt10{padding-top:10px!important}.pt15{padding-top:15px!important}.pt16{padding-top:16px!important}.pl15{padding-left:15px!important}.pl0{padding-left:0!important}.pr0{padding-right:0!important}.pr15{padding-right:15px!important}.fs12{font-size:12px}.fs14{font-size:14px!important}.fs16{font-size:16px!important}.fs22{font-size:22px!important}.fw500{font-weight:500!important}.italic-text{font-style:italic}.display-flex{display:flex}.qmsckeditor{font-family:Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:400}.qmsckeditor h2{font-size:20px;font-weight:400}.qmsckeditor .mat-icon{color:#909497}.qmsckeditor__fullscreen{position:fixed;inset:0;background:#fff;overflow-y:auto;max-height:100vh;overflow-x:hidden}.qmsckeditor__cursor{cursor:pointer}.qmsckeditor__notallowed{cursor:not-allowed}.qmsckeditor.button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qmsckeditor.button__done{float:right;top:-24px;right:-24px;cursor:pointer;margin-right:20px}.qmsckeditor.button__done .mat-icon{color:#28a745;font-weight:700}.qmsckeditor.button__groups button{min-height:40px;width:100%;border-radius:4px;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px}.qmsckeditor.button__groups .save{background:#f8f9f9}.qmsckeditor.button__groups .save:hover{background:#e5e7e9}.qmsckeditor.button__groups .save:disabled{cursor:not-allowed}.qmsckeditor.button__groups .cancel{background:#f8f9f9}.qmsckeditor.button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.button__groups .cancel:disabled{cursor:not-allowed}.qmsckeditor.button__groups .delete{background:#f8f9f9}.qmsckeditor.button__groups .delete:hover{background:#e5e7e9}.qmsckeditor.button__groups .delete:disabled{cursor:not-allowed}.qmsckeditor.confirm__button__groups button{min-height:36px;border-radius:4px;width:auto;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px;padding-left:15px;padding-right:15px}.qmsckeditor.confirm__button__groups .confirm{background:#f8f9f9}.qmsckeditor.confirm__button__groups .confirm:hover{background:#e5e7e9}.qmsckeditor.confirm__button__groups .cancel{background:#f8f9f9}.qmsckeditor.confirm__button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.template-content.height{min-height:420px;max-height:520px;overflow:auto}.qmsckeditor.template-content.title{margin-left:-9px}.qmsckeditor.link__content.height{min-height:400px;max-height:520px}.qmsckeditor.card{margin-bottom:10px;min-height:60px;box-shadow:none;border:1px solid #e5e5e5}.qmsckeditor.card .title{font-weight:700}.qmsckeditor.card .content{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.qmsckeditor.card .material-icons{font-size:20px}.qmsckeditor.tooltip-content.height{min-height:400px;max-height:472px;overflow:auto}.qmsckeditor.save__as__template.height{height:125px}.ck-content .page-break,.ck-content .ck-horizontal-line{width:100%}.ck-content hr{background:#ccc}.ck-font-size-dropdown .ck-dropdown__panel ul{max-height:320px;overflow-y:auto}.ck-font-size-dropdown .ck-dropdown__panel ul li .ck-fontsize-option .ck-button__label{line-height:50px}.qms-dialog-container{font-family:Open Sans;display:flex;flex-flow:column;min-height:150px;max-height:80vh}.qms-dialog-container .qms-dialog-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;flex:0 1 auto;height:50px}.qms-dialog-container .qms-dialog-content{flex:1 1 auto;overflow-y:auto;overflow-x:hidden;margin:0}.qms-dialog-container .qms-dialog-footer{display:flex;flex-wrap:wrap;min-height:50px;align-items:center;box-sizing:content-box;justify-content:end;margin-top:10px;flex:0 1 auto;height:50px}.qms-dialog-container .qms-dialog-footer.qms-dialog-footer-align-center{justify-content:center}.qms-dialog-container .qms-dialog-footer.qms-dialog-footer-align-start{justify-content:start}.qms-dialog-container .title{margin-bottom:0;margin-left:0;font-weight:600;font-size:22px;color:#323232}.qms-dialog-container .close-button{width:40px;height:40px;line-height:40px}.qms-dialog-container .section-message{display:flex;min-height:40px}\n"] }]
         }], ctorParameters: () => [{ type: TranslateLibraryService }, { type: i1$2.MatDialogRef }, { type: QMSCKEditorDialogData, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -9749,11 +9749,11 @@ class LinkAttachmentComponent extends QMSCKEditorBaseComponent {
         this.dialogRef.close(this.linkUrl);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LinkAttachmentComponent, deps: [{ token: i1$2.MatDialog }, { token: TranslateLibraryService }, { token: QMSCKEditorLinkService }, { token: i1$2.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: LinkAttachmentComponent, selector: "link-attachment", usesInheritance: true, ngImport: i0, template: "<div\n  id=\"qmsckeditor_link_attachment\"\n  class=\"qmsckeditor qmsckeditor__link__attachment__container\"\n>\n  <div id=\"qmsckeditor_link_attachment_header\">\n    <span\n      id=\"qmsckeditor_link_attachment_header_001\"\n      mat-icon-button\n      class=\"qmsckeditor button__close\"\n      (click)=\"onCloseDialog()\"\n    >\n      <mat-icon>close</mat-icon>\n    </span>\n    <div id=\"qmsckeditor_link_attachment_header_002\" mat-dialog-content>\n      <h2 id=\"qmsckeditor_link_attachment_header_002_001\">\n        {{ LANG.QMSCKEDITOR.ATTACHMENT }}\n      </h2>\n    </div>\n  </div>\n  <div\n    id=\"qmsckeditor_link_attachment_content\"\n    class=\"qmsckeditor template-content height\"\n  >\n    <div id=\"qmsckeditor_link_attachment_content_001\" class=\"mt-1 pl-2 pr-2 ps-2 pe-2\">\n      <mat-card\n        appearance=\"outlined\"\n        class=\"qmsckeditor card col-12\"\n        *ngFor=\"let attachment of attachments\"\n      >\n        <div\n          class=\"row\"\n          (click)=\"\n            onSelectedAttachment(attachment.extraId, attachment.fileName)\n          \"\n        >\n          <div class=\"qmsckeditor__cursor col-12\">\n            <div class=\"col-12 pl-0 ps-0 title\">\n              <span>{{ attachment.fileName }}</span>\n            </div>\n            <div class=\"col-12 pl-0 ps-0 content\">\n              <span>{{ attachment.extraId }}</span>\n            </div>\n          </div>\n        </div>\n      </mat-card>\n    </div>\n  </div>\n</div>\n", styles: [".mt5{margin-top:5px!important}.mt10{margin-top:10px!important}.mt7{margin-top:7px!important}.mt15{margin-top:15px!important}.mt20{margin-top:20px!important}.mt30{margin-top:30px!important}.mt40{margin-top:40px!important}.ml2{margin-left:2px!important}.ml3{margin-left:3px!important}.ml5{margin-left:5px!important}.ml15{margin-left:15px!important}.ml10{margin-left:10px!important}.ml12{margin-left:12px!important}.ml16{margin-left:16px!important}.ml-auto{margin-left:auto!important}.ml-25{margin-left:-25px!important}.mr5{margin-right:5px!important}.mr12{margin-right:12px!important}.mr15{margin-right:15px!important}.mb5{margin-bottom:5px!important}.mb10{margin-bottom:10px!important}.mb15{margin-bottom:15px!important}.pt8{padding-top:8px!important}.pt10{padding-top:10px!important}.pt15{padding-top:15px!important}.pt16{padding-top:16px!important}.pl15{padding-left:15px!important}.pl0{padding-left:0!important}.pr0{padding-right:0!important}.pr15{padding-right:15px!important}.fs12{font-size:12px}.fs14{font-size:14px!important}.fs16{font-size:16px!important}.fs22{font-size:22px!important}.fw500{font-weight:500!important}.italic-text{font-style:italic}.display-flex{display:flex}.qmsckeditor{font-family:Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:400}.qmsckeditor h2{font-size:20px;font-weight:400}.qmsckeditor .mat-mdc-dialog-content{padding:0}.qmsckeditor .mat-icon{color:#909497}.qmsckeditor__fullscreen{position:fixed;inset:0;background:#fff;overflow-y:auto;max-height:100vh;overflow-x:hidden}.qmsckeditor__cursor{cursor:pointer}.qmsckeditor__notallowed{cursor:not-allowed}.qmsckeditor.button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qmsckeditor.button__done{float:right;top:-24px;right:-24px;cursor:pointer;margin-right:20px}.qmsckeditor.button__done .mat-icon{color:#28a745;font-weight:700}.qmsckeditor.button__groups button{min-height:40px;width:100%;border-radius:4px;border:1px solid #C5C5C5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px}.qmsckeditor.button__groups .save{background:#f8f9f9}.qmsckeditor.button__groups .save:hover{background:#e5e7e9}.qmsckeditor.button__groups .save:disabled{cursor:not-allowed}.qmsckeditor.button__groups .cancel{background:#f8f9f9}.qmsckeditor.button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.button__groups .cancel:disabled{cursor:not-allowed}.qmsckeditor.button__groups .delete{background:#f8f9f9}.qmsckeditor.button__groups .delete:hover{background:#e5e7e9}.qmsckeditor.button__groups .delete:disabled{cursor:not-allowed}.qmsckeditor.confirm__button__groups button{min-height:36px;border-radius:4px;width:auto;border:1px solid #C5C5C5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px;padding-left:15px;padding-right:15px}.qmsckeditor.confirm__button__groups .confirm{background:#f8f9f9}.qmsckeditor.confirm__button__groups .confirm:hover{background:#e5e7e9}.qmsckeditor.confirm__button__groups .cancel{background:#f8f9f9}.qmsckeditor.confirm__button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.template-content.height{min-height:420px;max-height:520px;overflow:auto}.qmsckeditor.template-content.title{margin-left:-9px}.qmsckeditor.link__content.height{min-height:400px;max-height:520px}.qmsckeditor.card{margin-bottom:10px;min-height:60px;box-shadow:none;border:1px solid #e5e5e5}.qmsckeditor.card .title{font-weight:700}.qmsckeditor.card .content{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.qmsckeditor.card .material-icons{font-size:20px}.qmsckeditor.tooltip-content.height{min-height:400px;max-height:472px;overflow:auto}.qmsckeditor.save__as__template.height{height:125px}.ck-content .page-break,.ck-content .ck-horizontal-line{width:100%}.ck-content hr{background:#ccc}.ck-font-size-dropdown .ck-dropdown__panel ul{max-height:320px;overflow-y:auto}.ck-font-size-dropdown .ck-dropdown__panel ul li .ck-fontsize-option .ck-button__label{line-height:50px}\n"], dependencies: [{ kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: LinkAttachmentComponent, selector: "link-attachment", usesInheritance: true, ngImport: i0, template: "<div\n  id=\"qmsckeditor_link_attachment\"\n  class=\"qmsckeditor qmsckeditor__link__attachment__container\"\n>\n  <div id=\"qmsckeditor_link_attachment_header\">\n    <span\n      id=\"qmsckeditor_link_attachment_header_001\"\n      mat-icon-button\n      class=\"qmsckeditor button__close\"\n      (click)=\"onCloseDialog()\"\n    >\n      <mat-icon>close</mat-icon>\n    </span>\n    <div id=\"qmsckeditor_link_attachment_header_002\" mat-dialog-content>\n      <h2 id=\"qmsckeditor_link_attachment_header_002_001\">\n        {{ LANG.QMSCKEDITOR.ATTACHMENT }}\n      </h2>\n    </div>\n  </div>\n  <div\n    id=\"qmsckeditor_link_attachment_content\"\n    class=\"qmsckeditor template-content height\"\n  >\n    <div id=\"qmsckeditor_link_attachment_content_001\" class=\"mt-1 pl-2 pr-2 ps-2 pe-2\">\n      <mat-card\n        appearance=\"outlined\"\n        class=\"qmsckeditor card col-12\"\n        *ngFor=\"let attachment of attachments\"\n      >\n        <div\n          class=\"row\"\n          (click)=\"\n            onSelectedAttachment(attachment.extraId, attachment.fileName)\n          \"\n        >\n          <div class=\"qmsckeditor__cursor col-12\">\n            <div class=\"col-12 pl-0 ps-0 title\">\n              <span>{{ attachment.fileName }}</span>\n            </div>\n            <div class=\"col-12 pl-0 ps-0 content\">\n              <span>{{ attachment.extraId }}</span>\n            </div>\n          </div>\n        </div>\n      </mat-card>\n    </div>\n  </div>\n</div>\n", styles: [".mt5{margin-top:5px!important}.mt10{margin-top:10px!important}.mt7{margin-top:7px!important}.mt15{margin-top:15px!important}.mt20{margin-top:20px!important}.mt30{margin-top:30px!important}.mt40{margin-top:40px!important}.ml2{margin-left:2px!important}.ml3{margin-left:3px!important}.ml5{margin-left:5px!important}.ml15{margin-left:15px!important}.ml10{margin-left:10px!important}.ml12{margin-left:12px!important}.ml16{margin-left:16px!important}.ml-auto{margin-left:auto!important}.ml-25{margin-left:-25px!important}.mr5{margin-right:5px!important}.mr12{margin-right:12px!important}.mr15{margin-right:15px!important}.mb5{margin-bottom:5px!important}.mb10{margin-bottom:10px!important}.mb15{margin-bottom:15px!important}.pt8{padding-top:8px!important}.pt10{padding-top:10px!important}.pt15{padding-top:15px!important}.pt16{padding-top:16px!important}.pl15{padding-left:15px!important}.pl0{padding-left:0!important}.pr0{padding-right:0!important}.pr15{padding-right:15px!important}.fs12{font-size:12px}.fs14{font-size:14px!important}.fs16{font-size:16px!important}.fs22{font-size:22px!important}.fw500{font-weight:500!important}.italic-text{font-style:italic}.display-flex{display:flex}.qmsckeditor{font-family:Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:400}.qmsckeditor h2{font-size:20px;font-weight:400}.qmsckeditor .mat-icon{color:#909497}.qmsckeditor__fullscreen{position:fixed;inset:0;background:#fff;overflow-y:auto;max-height:100vh;overflow-x:hidden}.qmsckeditor__cursor{cursor:pointer}.qmsckeditor__notallowed{cursor:not-allowed}.qmsckeditor.button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qmsckeditor.button__done{float:right;top:-24px;right:-24px;cursor:pointer;margin-right:20px}.qmsckeditor.button__done .mat-icon{color:#28a745;font-weight:700}.qmsckeditor.button__groups button{min-height:40px;width:100%;border-radius:4px;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px}.qmsckeditor.button__groups .save{background:#f8f9f9}.qmsckeditor.button__groups .save:hover{background:#e5e7e9}.qmsckeditor.button__groups .save:disabled{cursor:not-allowed}.qmsckeditor.button__groups .cancel{background:#f8f9f9}.qmsckeditor.button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.button__groups .cancel:disabled{cursor:not-allowed}.qmsckeditor.button__groups .delete{background:#f8f9f9}.qmsckeditor.button__groups .delete:hover{background:#e5e7e9}.qmsckeditor.button__groups .delete:disabled{cursor:not-allowed}.qmsckeditor.confirm__button__groups button{min-height:36px;border-radius:4px;width:auto;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px;padding-left:15px;padding-right:15px}.qmsckeditor.confirm__button__groups .confirm{background:#f8f9f9}.qmsckeditor.confirm__button__groups .confirm:hover{background:#e5e7e9}.qmsckeditor.confirm__button__groups .cancel{background:#f8f9f9}.qmsckeditor.confirm__button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.template-content.height{min-height:420px;max-height:520px;overflow:auto}.qmsckeditor.template-content.title{margin-left:-9px}.qmsckeditor.link__content.height{min-height:400px;max-height:520px}.qmsckeditor.card{margin-bottom:10px;min-height:60px;box-shadow:none;border:1px solid #e5e5e5}.qmsckeditor.card .title{font-weight:700}.qmsckeditor.card .content{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.qmsckeditor.card .material-icons{font-size:20px}.qmsckeditor.tooltip-content.height{min-height:400px;max-height:472px;overflow:auto}.qmsckeditor.save__as__template.height{height:125px}.ck-content .page-break,.ck-content .ck-horizontal-line{width:100%}.ck-content hr{background:#ccc}.ck-font-size-dropdown .ck-dropdown__panel ul{max-height:320px;overflow-y:auto}.ck-font-size-dropdown .ck-dropdown__panel ul li .ck-fontsize-option .ck-button__label{line-height:50px}\n"], dependencies: [{ kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LinkAttachmentComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'link-attachment', template: "<div\n  id=\"qmsckeditor_link_attachment\"\n  class=\"qmsckeditor qmsckeditor__link__attachment__container\"\n>\n  <div id=\"qmsckeditor_link_attachment_header\">\n    <span\n      id=\"qmsckeditor_link_attachment_header_001\"\n      mat-icon-button\n      class=\"qmsckeditor button__close\"\n      (click)=\"onCloseDialog()\"\n    >\n      <mat-icon>close</mat-icon>\n    </span>\n    <div id=\"qmsckeditor_link_attachment_header_002\" mat-dialog-content>\n      <h2 id=\"qmsckeditor_link_attachment_header_002_001\">\n        {{ LANG.QMSCKEDITOR.ATTACHMENT }}\n      </h2>\n    </div>\n  </div>\n  <div\n    id=\"qmsckeditor_link_attachment_content\"\n    class=\"qmsckeditor template-content height\"\n  >\n    <div id=\"qmsckeditor_link_attachment_content_001\" class=\"mt-1 pl-2 pr-2 ps-2 pe-2\">\n      <mat-card\n        appearance=\"outlined\"\n        class=\"qmsckeditor card col-12\"\n        *ngFor=\"let attachment of attachments\"\n      >\n        <div\n          class=\"row\"\n          (click)=\"\n            onSelectedAttachment(attachment.extraId, attachment.fileName)\n          \"\n        >\n          <div class=\"qmsckeditor__cursor col-12\">\n            <div class=\"col-12 pl-0 ps-0 title\">\n              <span>{{ attachment.fileName }}</span>\n            </div>\n            <div class=\"col-12 pl-0 ps-0 content\">\n              <span>{{ attachment.extraId }}</span>\n            </div>\n          </div>\n        </div>\n      </mat-card>\n    </div>\n  </div>\n</div>\n", styles: [".mt5{margin-top:5px!important}.mt10{margin-top:10px!important}.mt7{margin-top:7px!important}.mt15{margin-top:15px!important}.mt20{margin-top:20px!important}.mt30{margin-top:30px!important}.mt40{margin-top:40px!important}.ml2{margin-left:2px!important}.ml3{margin-left:3px!important}.ml5{margin-left:5px!important}.ml15{margin-left:15px!important}.ml10{margin-left:10px!important}.ml12{margin-left:12px!important}.ml16{margin-left:16px!important}.ml-auto{margin-left:auto!important}.ml-25{margin-left:-25px!important}.mr5{margin-right:5px!important}.mr12{margin-right:12px!important}.mr15{margin-right:15px!important}.mb5{margin-bottom:5px!important}.mb10{margin-bottom:10px!important}.mb15{margin-bottom:15px!important}.pt8{padding-top:8px!important}.pt10{padding-top:10px!important}.pt15{padding-top:15px!important}.pt16{padding-top:16px!important}.pl15{padding-left:15px!important}.pl0{padding-left:0!important}.pr0{padding-right:0!important}.pr15{padding-right:15px!important}.fs12{font-size:12px}.fs14{font-size:14px!important}.fs16{font-size:16px!important}.fs22{font-size:22px!important}.fw500{font-weight:500!important}.italic-text{font-style:italic}.display-flex{display:flex}.qmsckeditor{font-family:Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:400}.qmsckeditor h2{font-size:20px;font-weight:400}.qmsckeditor .mat-mdc-dialog-content{padding:0}.qmsckeditor .mat-icon{color:#909497}.qmsckeditor__fullscreen{position:fixed;inset:0;background:#fff;overflow-y:auto;max-height:100vh;overflow-x:hidden}.qmsckeditor__cursor{cursor:pointer}.qmsckeditor__notallowed{cursor:not-allowed}.qmsckeditor.button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qmsckeditor.button__done{float:right;top:-24px;right:-24px;cursor:pointer;margin-right:20px}.qmsckeditor.button__done .mat-icon{color:#28a745;font-weight:700}.qmsckeditor.button__groups button{min-height:40px;width:100%;border-radius:4px;border:1px solid #C5C5C5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px}.qmsckeditor.button__groups .save{background:#f8f9f9}.qmsckeditor.button__groups .save:hover{background:#e5e7e9}.qmsckeditor.button__groups .save:disabled{cursor:not-allowed}.qmsckeditor.button__groups .cancel{background:#f8f9f9}.qmsckeditor.button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.button__groups .cancel:disabled{cursor:not-allowed}.qmsckeditor.button__groups .delete{background:#f8f9f9}.qmsckeditor.button__groups .delete:hover{background:#e5e7e9}.qmsckeditor.button__groups .delete:disabled{cursor:not-allowed}.qmsckeditor.confirm__button__groups button{min-height:36px;border-radius:4px;width:auto;border:1px solid #C5C5C5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px;padding-left:15px;padding-right:15px}.qmsckeditor.confirm__button__groups .confirm{background:#f8f9f9}.qmsckeditor.confirm__button__groups .confirm:hover{background:#e5e7e9}.qmsckeditor.confirm__button__groups .cancel{background:#f8f9f9}.qmsckeditor.confirm__button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.template-content.height{min-height:420px;max-height:520px;overflow:auto}.qmsckeditor.template-content.title{margin-left:-9px}.qmsckeditor.link__content.height{min-height:400px;max-height:520px}.qmsckeditor.card{margin-bottom:10px;min-height:60px;box-shadow:none;border:1px solid #e5e5e5}.qmsckeditor.card .title{font-weight:700}.qmsckeditor.card .content{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.qmsckeditor.card .material-icons{font-size:20px}.qmsckeditor.tooltip-content.height{min-height:400px;max-height:472px;overflow:auto}.qmsckeditor.save__as__template.height{height:125px}.ck-content .page-break,.ck-content .ck-horizontal-line{width:100%}.ck-content hr{background:#ccc}.ck-font-size-dropdown .ck-dropdown__panel ul{max-height:320px;overflow-y:auto}.ck-font-size-dropdown .ck-dropdown__panel ul li .ck-fontsize-option .ck-button__label{line-height:50px}\n"] }]
+            args: [{ selector: 'link-attachment', template: "<div\n  id=\"qmsckeditor_link_attachment\"\n  class=\"qmsckeditor qmsckeditor__link__attachment__container\"\n>\n  <div id=\"qmsckeditor_link_attachment_header\">\n    <span\n      id=\"qmsckeditor_link_attachment_header_001\"\n      mat-icon-button\n      class=\"qmsckeditor button__close\"\n      (click)=\"onCloseDialog()\"\n    >\n      <mat-icon>close</mat-icon>\n    </span>\n    <div id=\"qmsckeditor_link_attachment_header_002\" mat-dialog-content>\n      <h2 id=\"qmsckeditor_link_attachment_header_002_001\">\n        {{ LANG.QMSCKEDITOR.ATTACHMENT }}\n      </h2>\n    </div>\n  </div>\n  <div\n    id=\"qmsckeditor_link_attachment_content\"\n    class=\"qmsckeditor template-content height\"\n  >\n    <div id=\"qmsckeditor_link_attachment_content_001\" class=\"mt-1 pl-2 pr-2 ps-2 pe-2\">\n      <mat-card\n        appearance=\"outlined\"\n        class=\"qmsckeditor card col-12\"\n        *ngFor=\"let attachment of attachments\"\n      >\n        <div\n          class=\"row\"\n          (click)=\"\n            onSelectedAttachment(attachment.extraId, attachment.fileName)\n          \"\n        >\n          <div class=\"qmsckeditor__cursor col-12\">\n            <div class=\"col-12 pl-0 ps-0 title\">\n              <span>{{ attachment.fileName }}</span>\n            </div>\n            <div class=\"col-12 pl-0 ps-0 content\">\n              <span>{{ attachment.extraId }}</span>\n            </div>\n          </div>\n        </div>\n      </mat-card>\n    </div>\n  </div>\n</div>\n", styles: [".mt5{margin-top:5px!important}.mt10{margin-top:10px!important}.mt7{margin-top:7px!important}.mt15{margin-top:15px!important}.mt20{margin-top:20px!important}.mt30{margin-top:30px!important}.mt40{margin-top:40px!important}.ml2{margin-left:2px!important}.ml3{margin-left:3px!important}.ml5{margin-left:5px!important}.ml15{margin-left:15px!important}.ml10{margin-left:10px!important}.ml12{margin-left:12px!important}.ml16{margin-left:16px!important}.ml-auto{margin-left:auto!important}.ml-25{margin-left:-25px!important}.mr5{margin-right:5px!important}.mr12{margin-right:12px!important}.mr15{margin-right:15px!important}.mb5{margin-bottom:5px!important}.mb10{margin-bottom:10px!important}.mb15{margin-bottom:15px!important}.pt8{padding-top:8px!important}.pt10{padding-top:10px!important}.pt15{padding-top:15px!important}.pt16{padding-top:16px!important}.pl15{padding-left:15px!important}.pl0{padding-left:0!important}.pr0{padding-right:0!important}.pr15{padding-right:15px!important}.fs12{font-size:12px}.fs14{font-size:14px!important}.fs16{font-size:16px!important}.fs22{font-size:22px!important}.fw500{font-weight:500!important}.italic-text{font-style:italic}.display-flex{display:flex}.qmsckeditor{font-family:Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:400}.qmsckeditor h2{font-size:20px;font-weight:400}.qmsckeditor .mat-icon{color:#909497}.qmsckeditor__fullscreen{position:fixed;inset:0;background:#fff;overflow-y:auto;max-height:100vh;overflow-x:hidden}.qmsckeditor__cursor{cursor:pointer}.qmsckeditor__notallowed{cursor:not-allowed}.qmsckeditor.button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qmsckeditor.button__done{float:right;top:-24px;right:-24px;cursor:pointer;margin-right:20px}.qmsckeditor.button__done .mat-icon{color:#28a745;font-weight:700}.qmsckeditor.button__groups button{min-height:40px;width:100%;border-radius:4px;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px}.qmsckeditor.button__groups .save{background:#f8f9f9}.qmsckeditor.button__groups .save:hover{background:#e5e7e9}.qmsckeditor.button__groups .save:disabled{cursor:not-allowed}.qmsckeditor.button__groups .cancel{background:#f8f9f9}.qmsckeditor.button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.button__groups .cancel:disabled{cursor:not-allowed}.qmsckeditor.button__groups .delete{background:#f8f9f9}.qmsckeditor.button__groups .delete:hover{background:#e5e7e9}.qmsckeditor.button__groups .delete:disabled{cursor:not-allowed}.qmsckeditor.confirm__button__groups button{min-height:36px;border-radius:4px;width:auto;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px;padding-left:15px;padding-right:15px}.qmsckeditor.confirm__button__groups .confirm{background:#f8f9f9}.qmsckeditor.confirm__button__groups .confirm:hover{background:#e5e7e9}.qmsckeditor.confirm__button__groups .cancel{background:#f8f9f9}.qmsckeditor.confirm__button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.template-content.height{min-height:420px;max-height:520px;overflow:auto}.qmsckeditor.template-content.title{margin-left:-9px}.qmsckeditor.link__content.height{min-height:400px;max-height:520px}.qmsckeditor.card{margin-bottom:10px;min-height:60px;box-shadow:none;border:1px solid #e5e5e5}.qmsckeditor.card .title{font-weight:700}.qmsckeditor.card .content{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.qmsckeditor.card .material-icons{font-size:20px}.qmsckeditor.tooltip-content.height{min-height:400px;max-height:472px;overflow:auto}.qmsckeditor.save__as__template.height{height:125px}.ck-content .page-break,.ck-content .ck-horizontal-line{width:100%}.ck-content hr{background:#ccc}.ck-font-size-dropdown .ck-dropdown__panel ul{max-height:320px;overflow-y:auto}.ck-font-size-dropdown .ck-dropdown__panel ul li .ck-fontsize-option .ck-button__label{line-height:50px}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.MatDialog }, { type: TranslateLibraryService }, { type: QMSCKEditorLinkService }, { type: i1$2.MatDialogRef }, { type: QMSCKEditorParamter, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -12561,11 +12561,11 @@ class QMSCKEditorLinkComponent extends QMSCKEditorBaseComponent {
         this.setLink();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: QMSCKEditorLinkComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$2.MatDialog }, { token: TranslateLibraryService }, { token: QMSCKEditorLinkService }, { token: QMSCKEditorCommonService }, { token: QMSCKEditorTreeService }, { token: QMSSelectProcessDocumentGlobalService }, { token: i1$2.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: QMSCKEditorLinkComponent, selector: "qms-ckeditor-link", inputs: { ckEditor: "ckEditor" }, usesInheritance: true, ngImport: i0, template: "<div id=\"qmsckeditor_link\" class=\"qmsckeditor qmsckeditor__link__container\">\n  <div id=\"qmsckeditor_link_header\">\n    <span id=\"qmsckeditor_link_header_001\" mat-icon-button class=\"qmsckeditor button__close\" (click)=\"onCloseDialog()\">\n      <mat-icon>close</mat-icon>\n    </span>\n    <div id=\"qmsckeditor_link_header_002\" mat-dialog-content>\n      <h2 id=\"qmsckeditor_link_header_001\">\n        {{ LANG.QMSCKEDITOR.LINK }}\n      </h2>\n    </div>\n  </div>\n  <div id=\"qmsckeditor_link_type\" class=\"row\">\n    <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-3 ps-3 pe-3\">\n      <mat-label>{{ LANG.QMSCKEDITOR.LINK_TYPE }}</mat-label>\n      <mat-select disableOptionCentering name=\"linkTypeList\" [(ngModel)]=\"selectedLinkType\"\n        (ngModelChange)=\"onSelectedLinkType()\">\n        <mat-option *ngFor=\"let link of linkTypes\" [value]=\"link.id\">\n          {{ link.name }}\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n  </div>\n\n  <div id=\"qmsckeditor_link_content\">\n    <form [formGroup]=\"linkFormGroup\" class=\"qmsckeditor link__content height row\"\n      *ngIf=\"selectedLinkType == LinkType.url\">\n      <div id=\"qmsckeditor_link_url\" class=\"col-12 mt-1 pl-3 pr-3 ps-3 pe-3\">\n        <mat-expansion-panel id=\"qmsckeditor_link_url_panel\" [expanded]=\"isExpanded\" (opened)=\"isExpanded = true\"\n          (closed)=\"isExpanded = false\">\n          <mat-expansion-panel-header>\n            <mat-panel-title>\n              {{ LANG.QMSCKEDITOR.URL_HEADER }}\n            </mat-panel-title>\n          </mat-expansion-panel-header>\n          <div id=\"qmsckeditor_link_url_001\" class=\"row mt-2\">\n            <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-3 ps-3 pe-3\">\n              <mat-label>{{ LANG.QMSCKEDITOR.TARGET }}</mat-label>\n              <mat-select [(ngModel)]=\"selectedTarget\" formControlName=\"targetList\" disableOptionCentering>\n                <mat-option *ngFor=\"let target of targets\" [value]=\"target.id\">\n                  {{ target.name }}\n                </mat-option>\n              </mat-select>\n            </mat-form-field>\n          </div>\n          <div id=\"qmsckeditor_link_url_002\" class=\"row\">\n            <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-3 ps-3 pe-3\">\n              <mat-label>{{ LANG.QMSCKEDITOR.PROTOCOL }}</mat-label>\n              <mat-select [(ngModel)]=\"selectedProtocol\" formControlName=\"protocolList\" disableOptionCentering>\n                <mat-option *ngFor=\"let protocol of protocols\" [value]=\"protocol.id\">\n                  {{ protocol.name }}\n                </mat-option>\n              </mat-select>\n            </mat-form-field>\n          </div>\n          <div id=\"qmsckeditor_link_url_003\" class=\"row\">\n            <mat-form-field class=\"col-12 pl-3 pr-3 ps-3 pe-3\" appearance=\"fill\">\n              <mat-label>{{ LANG.QMSCKEDITOR.LINK_URL }}</mat-label>\n              <input matInput [(ngModel)]=\"url\" name=\"url\" formControlName=\"url\"\n                (ngModelChange)=\"getUrlToSetProtocol()\" (keydown.enter)=\"setLinkUrlType($event)\" />\n              <mat-error *ngIf=\"linkFormGroup.get('url').hasError('required')\" class=\"mt5\">\n              </mat-error>\n            </mat-form-field>\n          </div>\n          <div id=\"qmsckeditor_link_url_004\" class=\"row\">\n            <mat-form-field class=\"col-12 pl-3 pr-3 ps-3 pe-3\" appearance=\"fill\">\n              <mat-label>{{ LANG.QMSCKEDITOR.TITLE }}</mat-label>\n              <input matInput [(ngModel)]=\"advisoryTitle\" formControlName=\"advisoryTitle\" />\n              <mat-error *ngIf=\"linkFormGroup.get('advisoryTitle').hasError('required')\" class=\"mt5\">\n              </mat-error>\n            </mat-form-field>\n          </div>\n          <div id=\"qmsckeditor_link_url_005\" class=\"qmsckeditor button__groups row\">\n            <div class=\"col-6 pl-3 ps-3\">\n              <button class=\"save\" mat-flat-button (click)=\"eHandbook(false, false)\">\n                {{ LANG.QMSCKEDITOR.DOCUMENT_PROCESS }}\n              </button>\n            </div>\n            <div class=\"col-6 pr-3 pe-3\">\n              <button class=\"save\" mat-flat-button (click)=\"attachment()\">\n                {{ LANG.QMSCKEDITOR.ATTACHMENT }}\n              </button>\n            </div>\n          </div>\n        </mat-expansion-panel>\n      </div>\n    </form>\n\n    <form [formGroup]=\"anchorTextFormGroup\" class=\"qmsckeditor link__content height row\"\n      *ngIf=\"selectedLinkType == LinkType.anchorText\">\n      <div id=\"qmsckeditor_link_anchor_text\" class=\"col-12 mt-1 pl-3 pr-3 ps-3 pe-3\">\n        <mat-expansion-panel id=\"qmsckeditor_link_anchor_text_panel\" [expanded]=\"isExpanded\"\n          (opened)=\"isExpanded = true\" (closed)=\"isExpanded = false\">\n          <mat-expansion-panel-header>\n            <mat-panel-title>\n              {{ LANG.QMSCKEDITOR.ANCHOR_TEXT_HEADER }}\n            </mat-panel-title>\n          </mat-expansion-panel-header>\n          <div id=\"qmsckeditor_link_anchor_text_001\" class=\"row mt-2\">\n            <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-3 ps-3 pe-3\">\n              <mat-label>{{ LANG.QMSCKEDITOR.ANCHOR_BY_NAME }}</mat-label>\n              <mat-select [(ngModel)]=\"anchorText\" formControlName=\"anchorText\">\n                <mat-option *ngFor=\"let editorAnchor of editorAnchors\" [value]=\"editorAnchor.anchorValue\"\n                  disableOptionCentering>\n                  {{ editorAnchor.viewValue }}\n                </mat-option>\n              </mat-select>\n              <mat-error *ngIf=\"\n                  anchorTextFormGroup.get('anchorText').hasError('required')\n                \" class=\"mt5\">\n              </mat-error>\n            </mat-form-field>\n          </div>\n        </mat-expansion-panel>\n      </div>\n    </form>\n\n    <form [formGroup]=\"emailFormGroup\" class=\"qmsckeditor link__content height row\"\n      *ngIf=\"selectedLinkType == LinkType.email\">\n      <div id=\"qmsckeditor_link_email\" class=\"col-12 mt-1 pl-3 pr-3 ps-3 pe-3\">\n        <mat-expansion-panel id=\"qmsckeditor_link_email_panel\" [expanded]=\"isExpanded\" (opened)=\"isExpanded = true\"\n          (closed)=\"isExpanded = false\">\n          <mat-expansion-panel-header>\n            <mat-panel-title>\n              {{ LANG.QMSCKEDITOR.EMAIL_HEADER }}\n            </mat-panel-title>\n          </mat-expansion-panel-header>\n          <div id=\"qmsckeditor_link_email_001\" class=\"row\">\n            <mat-form-field class=\"col-12 pl-3 pr-3 ps-3 pe-3\" appearance=\"fill\">\n              <mat-label>{{ LANG.QMSCKEDITOR.EMAIL_ADDRESS }}</mat-label>\n              <input matInput [(ngModel)]=\"emailAddress\" formControlName=\"emailAddress\" />\n              <mat-error *ngIf=\"emailFormGroup.get('emailAddress').hasError('required')\" class=\"mt5\">\n              </mat-error>\n            </mat-form-field>\n          </div>\n          <div id=\"qmsckeditor_link_email_002\" class=\"row\">\n            <mat-form-field class=\"col-12 pl-3 pr-3 ps-3 pe-3\" appearance=\"fill\">\n              <mat-label>{{ LANG.QMSCKEDITOR.EMAIL_SUBJECT }}</mat-label>\n              <input matInput [(ngModel)]=\"emailSubject\" formControlName=\"emailSubject\" />\n              <mat-error *ngIf=\"emailFormGroup.get('emailSubject').hasError('required')\" class=\"mt5\">\n              </mat-error>\n            </mat-form-field>\n          </div>\n          <div id=\"qmsckeditor_link_email_003\" class=\"row\">\n            <mat-form-field class=\"col-12 pl-3 pr-3 ps-3 pe-3\" appearance=\"fill\">\n              <mat-label>{{ LANG.QMSCKEDITOR.EMAIL_BODY }}</mat-label>\n              <textarea matInput [(ngModel)]=\"emailBody\" formControlName=\"emailBody\"></textarea>\n              <mat-error *ngIf=\"emailFormGroup.get('emailBody').hasError('required')\" class=\"mt5\">\n              </mat-error>\n            </mat-form-field>\n          </div>\n        </mat-expansion-panel>\n      </div>\n    </form>\n\n    <form [formGroup]=\"anchorDocFormGroup\" class=\"qmsckeditor link__content height row\"\n      *ngIf=\"selectedLinkType == LinkType.anchorDocument\">\n      <div id=\"qmsckeditor_link_anchor_doc\" class=\"col-12 mt-1 pl-3 pr-3 ps-3 pe-3\">\n        <mat-expansion-panel id=\"qmsckeditor_link_email_panel\" [expanded]=\"isExpanded\" (opened)=\"isExpanded = true\"\n          (closed)=\"isExpanded = false\">\n          <mat-expansion-panel-header>\n            <mat-panel-title>\n              {{ LANG.QMSCKEDITOR.DOCUMENT_HEADER }}\n            </mat-panel-title>\n          </mat-expansion-panel-header>\n          <div id=\"qmsckeditor_link_anchor_doc_001\" class=\"qmsckeditor button__groups row\">\n            <div class=\"col-6 pl-3 ps-3\">\n              <button class=\"cancel\" mat-flat-button (click)=\"eHandbook(true, true)\">\n                {{ LANG.QMSCKEDITOR.DOCUMENT }}\n              </button>\n            </div>\n          </div>\n          <div id=\"qmsckeditor_link_anchor_doc_002\" class=\"row mt-4\">\n            <mat-form-field class=\"col-12 pl-3 pr-3 ps-3 pe-3\" appearance=\"fill\">\n              <mat-label>{{ LANG.QMSCKEDITOR.DOCUMENT }}</mat-label>\n              <input matInput [(ngModel)]=\"anchorTitle\" formControlName=\"anchorTitle\" />\n              <mat-error *ngIf=\"\n                  anchorDocFormGroup.get('anchorTitle').hasError('required')\n                \" class=\"mt5\">\n              </mat-error>\n            </mat-form-field>\n          </div>\n          <div id=\"qmsckeditor_link_anchor_doc_003\" class=\"row mt-2\">\n            <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-3 ps-3 pe-3\">\n              <mat-label>{{ LANG.QMSCKEDITOR.TARGET }}</mat-label>\n              <mat-select [(ngModel)]=\"selectedTargetAnchorDocument\" formControlName=\"targetList\" disableOptionCentering>\n                <mat-option *ngFor=\"let target of targets\" [value]=\"target.id\">\n                  {{ target.name }}\n                </mat-option>\n              </mat-select>\n            </mat-form-field>\n          </div>\n          <div id=\"qmsckeditor_link_anchor_doc_004\" class=\"row mt-2\">\n            <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-3 ps-3 pe-3\">\n              <mat-label>{{ LANG.QMSCKEDITOR.ANCHOR_BY_NAME }}</mat-label>\n              <mat-select [(ngModel)]=\"anchorByName\" formControlName=\"anchorByName\" disableOptionCentering>\n                <mat-option *ngFor=\"let docAnchor of documentAnchors\" [value]=\"docAnchor.anchorValue\">\n                  {{ docAnchor.viewValue }}\n                </mat-option>\n              </mat-select>\n              <mat-error *ngIf=\"\n                  anchorDocFormGroup.get('anchorByName').hasError('required')\n                \" class=\"mt5\">\n              </mat-error>\n            </mat-form-field>\n          </div>\n        </mat-expansion-panel>\n      </div>\n    </form>\n  </div>\n\n  <div id=\"qmsckeditor_link_footer\" class=\"qmsckeditor button__groups row\">\n    <div class=\"col-12 mt-3 pl-3 pr-3 ps-3 pe-3\">\n      <button class=\"save\" mat-flat-button (click)=\"setLink()\" [disabled]=\"disableOkButton()\">\n        {{ LANG.QMSCKEDITOR.OK }}\n      </button>\n    </div>\n  </div>\n</div>", styles: [".mt5{margin-top:5px!important}.mt10{margin-top:10px!important}.mt7{margin-top:7px!important}.mt15{margin-top:15px!important}.mt20{margin-top:20px!important}.mt30{margin-top:30px!important}.mt40{margin-top:40px!important}.ml2{margin-left:2px!important}.ml3{margin-left:3px!important}.ml5{margin-left:5px!important}.ml15{margin-left:15px!important}.ml10{margin-left:10px!important}.ml12{margin-left:12px!important}.ml16{margin-left:16px!important}.ml-auto{margin-left:auto!important}.ml-25{margin-left:-25px!important}.mr5{margin-right:5px!important}.mr12{margin-right:12px!important}.mr15{margin-right:15px!important}.mb5{margin-bottom:5px!important}.mb10{margin-bottom:10px!important}.mb15{margin-bottom:15px!important}.pt8{padding-top:8px!important}.pt10{padding-top:10px!important}.pt15{padding-top:15px!important}.pt16{padding-top:16px!important}.pl15{padding-left:15px!important}.pl0{padding-left:0!important}.pr0{padding-right:0!important}.pr15{padding-right:15px!important}.fs12{font-size:12px}.fs14{font-size:14px!important}.fs16{font-size:16px!important}.fs22{font-size:22px!important}.fw500{font-weight:500!important}.italic-text{font-style:italic}.display-flex{display:flex}.qmsckeditor{font-family:Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:400}.qmsckeditor h2{font-size:20px;font-weight:400}.qmsckeditor .mat-mdc-dialog-content{padding:0}.qmsckeditor .mat-icon{color:#909497}.qmsckeditor__fullscreen{position:fixed;inset:0;background:#fff;overflow-y:auto;max-height:100vh;overflow-x:hidden}.qmsckeditor__cursor{cursor:pointer}.qmsckeditor__notallowed{cursor:not-allowed}.qmsckeditor.button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qmsckeditor.button__done{float:right;top:-24px;right:-24px;cursor:pointer;margin-right:20px}.qmsckeditor.button__done .mat-icon{color:#28a745;font-weight:700}.qmsckeditor.button__groups button{min-height:40px;width:100%;border-radius:4px;border:1px solid #C5C5C5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px}.qmsckeditor.button__groups .save{background:#f8f9f9}.qmsckeditor.button__groups .save:hover{background:#e5e7e9}.qmsckeditor.button__groups .save:disabled{cursor:not-allowed}.qmsckeditor.button__groups .cancel{background:#f8f9f9}.qmsckeditor.button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.button__groups .cancel:disabled{cursor:not-allowed}.qmsckeditor.button__groups .delete{background:#f8f9f9}.qmsckeditor.button__groups .delete:hover{background:#e5e7e9}.qmsckeditor.button__groups .delete:disabled{cursor:not-allowed}.qmsckeditor.confirm__button__groups button{min-height:36px;border-radius:4px;width:auto;border:1px solid #C5C5C5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px;padding-left:15px;padding-right:15px}.qmsckeditor.confirm__button__groups .confirm{background:#f8f9f9}.qmsckeditor.confirm__button__groups .confirm:hover{background:#e5e7e9}.qmsckeditor.confirm__button__groups .cancel{background:#f8f9f9}.qmsckeditor.confirm__button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.template-content.height{min-height:420px;max-height:520px;overflow:auto}.qmsckeditor.template-content.title{margin-left:-9px}.qmsckeditor.link__content.height{min-height:400px;max-height:520px}.qmsckeditor.card{margin-bottom:10px;min-height:60px;box-shadow:none;border:1px solid #e5e5e5}.qmsckeditor.card .title{font-weight:700}.qmsckeditor.card .content{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.qmsckeditor.card .material-icons{font-size:20px}.qmsckeditor.tooltip-content.height{min-height:400px;max-height:472px;overflow:auto}.qmsckeditor.save__as__template.height{height:125px}.ck-content .page-break,.ck-content .ck-horizontal-line{width:100%}.ck-content hr{background:#ccc}.ck-font-size-dropdown .ck-dropdown__panel ul{max-height:320px;overflow-y:auto}.ck-font-size-dropdown .ck-dropdown__panel ul li .ck-fontsize-option .ck-button__label{line-height:50px}.qmsckeditor__link__container textarea.mat-mdc-input-element{min-height:130px}\n"], dependencies: [{ kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i9.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i9.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i11.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i11.MatLabel, selector: "mat-label" }, { kind: "directive", type: i11.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i8.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i13.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i14.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i8$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: QMSCKEditorLinkComponent, selector: "qms-ckeditor-link", inputs: { ckEditor: "ckEditor" }, usesInheritance: true, ngImport: i0, template: "<div id=\"qmsckeditor_link\" class=\"qmsckeditor qmsckeditor__link__container\">\n  <div id=\"qmsckeditor_link_header\">\n    <span id=\"qmsckeditor_link_header_001\" mat-icon-button class=\"qmsckeditor button__close\" (click)=\"onCloseDialog()\">\n      <mat-icon>close</mat-icon>\n    </span>\n    <div id=\"qmsckeditor_link_header_002\" mat-dialog-content>\n      <h2 id=\"qmsckeditor_link_header_001\">\n        {{ LANG.QMSCKEDITOR.LINK }}\n      </h2>\n    </div>\n  </div>\n  <div id=\"qmsckeditor_link_type\" class=\"row\">\n    <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-3 ps-3 pe-3\">\n      <mat-label>{{ LANG.QMSCKEDITOR.LINK_TYPE }}</mat-label>\n      <mat-select disableOptionCentering name=\"linkTypeList\" [(ngModel)]=\"selectedLinkType\"\n        (ngModelChange)=\"onSelectedLinkType()\">\n        <mat-option *ngFor=\"let link of linkTypes\" [value]=\"link.id\">\n          {{ link.name }}\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n  </div>\n\n  <div id=\"qmsckeditor_link_content\">\n    <form [formGroup]=\"linkFormGroup\" class=\"qmsckeditor link__content height row\"\n      *ngIf=\"selectedLinkType == LinkType.url\">\n      <div id=\"qmsckeditor_link_url\" class=\"col-12 mt-1 pl-3 pr-3 ps-3 pe-3\">\n        <mat-expansion-panel id=\"qmsckeditor_link_url_panel\" [expanded]=\"isExpanded\" (opened)=\"isExpanded = true\"\n          (closed)=\"isExpanded = false\">\n          <mat-expansion-panel-header>\n            <mat-panel-title>\n              {{ LANG.QMSCKEDITOR.URL_HEADER }}\n            </mat-panel-title>\n          </mat-expansion-panel-header>\n          <div id=\"qmsckeditor_link_url_001\" class=\"row mt-2\">\n            <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-3 ps-3 pe-3\">\n              <mat-label>{{ LANG.QMSCKEDITOR.TARGET }}</mat-label>\n              <mat-select [(ngModel)]=\"selectedTarget\" formControlName=\"targetList\" disableOptionCentering>\n                <mat-option *ngFor=\"let target of targets\" [value]=\"target.id\">\n                  {{ target.name }}\n                </mat-option>\n              </mat-select>\n            </mat-form-field>\n          </div>\n          <div id=\"qmsckeditor_link_url_002\" class=\"row\">\n            <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-3 ps-3 pe-3\">\n              <mat-label>{{ LANG.QMSCKEDITOR.PROTOCOL }}</mat-label>\n              <mat-select [(ngModel)]=\"selectedProtocol\" formControlName=\"protocolList\" disableOptionCentering>\n                <mat-option *ngFor=\"let protocol of protocols\" [value]=\"protocol.id\">\n                  {{ protocol.name }}\n                </mat-option>\n              </mat-select>\n            </mat-form-field>\n          </div>\n          <div id=\"qmsckeditor_link_url_003\" class=\"row\">\n            <mat-form-field class=\"col-12 pl-3 pr-3 ps-3 pe-3\" appearance=\"fill\">\n              <mat-label>{{ LANG.QMSCKEDITOR.LINK_URL }}</mat-label>\n              <input matInput [(ngModel)]=\"url\" name=\"url\" formControlName=\"url\"\n                (ngModelChange)=\"getUrlToSetProtocol()\" (keydown.enter)=\"setLinkUrlType($event)\" />\n              <mat-error *ngIf=\"linkFormGroup.get('url').hasError('required')\" class=\"mt5\">\n              </mat-error>\n            </mat-form-field>\n          </div>\n          <div id=\"qmsckeditor_link_url_004\" class=\"row\">\n            <mat-form-field class=\"col-12 pl-3 pr-3 ps-3 pe-3\" appearance=\"fill\">\n              <mat-label>{{ LANG.QMSCKEDITOR.TITLE }}</mat-label>\n              <input matInput [(ngModel)]=\"advisoryTitle\" formControlName=\"advisoryTitle\" />\n              <mat-error *ngIf=\"linkFormGroup.get('advisoryTitle').hasError('required')\" class=\"mt5\">\n              </mat-error>\n            </mat-form-field>\n          </div>\n          <div id=\"qmsckeditor_link_url_005\" class=\"qmsckeditor button__groups row\">\n            <div class=\"col-6 pl-3 ps-3\">\n              <button class=\"save\" mat-flat-button (click)=\"eHandbook(false, false)\">\n                {{ LANG.QMSCKEDITOR.DOCUMENT_PROCESS }}\n              </button>\n            </div>\n            <div class=\"col-6 pr-3 pe-3\">\n              <button class=\"save\" mat-flat-button (click)=\"attachment()\">\n                {{ LANG.QMSCKEDITOR.ATTACHMENT }}\n              </button>\n            </div>\n          </div>\n        </mat-expansion-panel>\n      </div>\n    </form>\n\n    <form [formGroup]=\"anchorTextFormGroup\" class=\"qmsckeditor link__content height row\"\n      *ngIf=\"selectedLinkType == LinkType.anchorText\">\n      <div id=\"qmsckeditor_link_anchor_text\" class=\"col-12 mt-1 pl-3 pr-3 ps-3 pe-3\">\n        <mat-expansion-panel id=\"qmsckeditor_link_anchor_text_panel\" [expanded]=\"isExpanded\"\n          (opened)=\"isExpanded = true\" (closed)=\"isExpanded = false\">\n          <mat-expansion-panel-header>\n            <mat-panel-title>\n              {{ LANG.QMSCKEDITOR.ANCHOR_TEXT_HEADER }}\n            </mat-panel-title>\n          </mat-expansion-panel-header>\n          <div id=\"qmsckeditor_link_anchor_text_001\" class=\"row mt-2\">\n            <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-3 ps-3 pe-3\">\n              <mat-label>{{ LANG.QMSCKEDITOR.ANCHOR_BY_NAME }}</mat-label>\n              <mat-select [(ngModel)]=\"anchorText\" formControlName=\"anchorText\">\n                <mat-option *ngFor=\"let editorAnchor of editorAnchors\" [value]=\"editorAnchor.anchorValue\"\n                  disableOptionCentering>\n                  {{ editorAnchor.viewValue }}\n                </mat-option>\n              </mat-select>\n              <mat-error *ngIf=\"\n                  anchorTextFormGroup.get('anchorText').hasError('required')\n                \" class=\"mt5\">\n              </mat-error>\n            </mat-form-field>\n          </div>\n        </mat-expansion-panel>\n      </div>\n    </form>\n\n    <form [formGroup]=\"emailFormGroup\" class=\"qmsckeditor link__content height row\"\n      *ngIf=\"selectedLinkType == LinkType.email\">\n      <div id=\"qmsckeditor_link_email\" class=\"col-12 mt-1 pl-3 pr-3 ps-3 pe-3\">\n        <mat-expansion-panel id=\"qmsckeditor_link_email_panel\" [expanded]=\"isExpanded\" (opened)=\"isExpanded = true\"\n          (closed)=\"isExpanded = false\">\n          <mat-expansion-panel-header>\n            <mat-panel-title>\n              {{ LANG.QMSCKEDITOR.EMAIL_HEADER }}\n            </mat-panel-title>\n          </mat-expansion-panel-header>\n          <div id=\"qmsckeditor_link_email_001\" class=\"row\">\n            <mat-form-field class=\"col-12 pl-3 pr-3 ps-3 pe-3\" appearance=\"fill\">\n              <mat-label>{{ LANG.QMSCKEDITOR.EMAIL_ADDRESS }}</mat-label>\n              <input matInput [(ngModel)]=\"emailAddress\" formControlName=\"emailAddress\" />\n              <mat-error *ngIf=\"emailFormGroup.get('emailAddress').hasError('required')\" class=\"mt5\">\n              </mat-error>\n            </mat-form-field>\n          </div>\n          <div id=\"qmsckeditor_link_email_002\" class=\"row\">\n            <mat-form-field class=\"col-12 pl-3 pr-3 ps-3 pe-3\" appearance=\"fill\">\n              <mat-label>{{ LANG.QMSCKEDITOR.EMAIL_SUBJECT }}</mat-label>\n              <input matInput [(ngModel)]=\"emailSubject\" formControlName=\"emailSubject\" />\n              <mat-error *ngIf=\"emailFormGroup.get('emailSubject').hasError('required')\" class=\"mt5\">\n              </mat-error>\n            </mat-form-field>\n          </div>\n          <div id=\"qmsckeditor_link_email_003\" class=\"row\">\n            <mat-form-field class=\"col-12 pl-3 pr-3 ps-3 pe-3\" appearance=\"fill\">\n              <mat-label>{{ LANG.QMSCKEDITOR.EMAIL_BODY }}</mat-label>\n              <textarea matInput [(ngModel)]=\"emailBody\" formControlName=\"emailBody\"></textarea>\n              <mat-error *ngIf=\"emailFormGroup.get('emailBody').hasError('required')\" class=\"mt5\">\n              </mat-error>\n            </mat-form-field>\n          </div>\n        </mat-expansion-panel>\n      </div>\n    </form>\n\n    <form [formGroup]=\"anchorDocFormGroup\" class=\"qmsckeditor link__content height row\"\n      *ngIf=\"selectedLinkType == LinkType.anchorDocument\">\n      <div id=\"qmsckeditor_link_anchor_doc\" class=\"col-12 mt-1 pl-3 pr-3 ps-3 pe-3\">\n        <mat-expansion-panel id=\"qmsckeditor_link_email_panel\" [expanded]=\"isExpanded\" (opened)=\"isExpanded = true\"\n          (closed)=\"isExpanded = false\">\n          <mat-expansion-panel-header>\n            <mat-panel-title>\n              {{ LANG.QMSCKEDITOR.DOCUMENT_HEADER }}\n            </mat-panel-title>\n          </mat-expansion-panel-header>\n          <div id=\"qmsckeditor_link_anchor_doc_001\" class=\"qmsckeditor button__groups row\">\n            <div class=\"col-6 pl-3 ps-3\">\n              <button class=\"cancel\" mat-flat-button (click)=\"eHandbook(true, true)\">\n                {{ LANG.QMSCKEDITOR.DOCUMENT }}\n              </button>\n            </div>\n          </div>\n          <div id=\"qmsckeditor_link_anchor_doc_002\" class=\"row mt-4\">\n            <mat-form-field class=\"col-12 pl-3 pr-3 ps-3 pe-3\" appearance=\"fill\">\n              <mat-label>{{ LANG.QMSCKEDITOR.DOCUMENT }}</mat-label>\n              <input matInput [(ngModel)]=\"anchorTitle\" formControlName=\"anchorTitle\" />\n              <mat-error *ngIf=\"\n                  anchorDocFormGroup.get('anchorTitle').hasError('required')\n                \" class=\"mt5\">\n              </mat-error>\n            </mat-form-field>\n          </div>\n          <div id=\"qmsckeditor_link_anchor_doc_003\" class=\"row mt-2\">\n            <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-3 ps-3 pe-3\">\n              <mat-label>{{ LANG.QMSCKEDITOR.TARGET }}</mat-label>\n              <mat-select [(ngModel)]=\"selectedTargetAnchorDocument\" formControlName=\"targetList\" disableOptionCentering>\n                <mat-option *ngFor=\"let target of targets\" [value]=\"target.id\">\n                  {{ target.name }}\n                </mat-option>\n              </mat-select>\n            </mat-form-field>\n          </div>\n          <div id=\"qmsckeditor_link_anchor_doc_004\" class=\"row mt-2\">\n            <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-3 ps-3 pe-3\">\n              <mat-label>{{ LANG.QMSCKEDITOR.ANCHOR_BY_NAME }}</mat-label>\n              <mat-select [(ngModel)]=\"anchorByName\" formControlName=\"anchorByName\" disableOptionCentering>\n                <mat-option *ngFor=\"let docAnchor of documentAnchors\" [value]=\"docAnchor.anchorValue\">\n                  {{ docAnchor.viewValue }}\n                </mat-option>\n              </mat-select>\n              <mat-error *ngIf=\"\n                  anchorDocFormGroup.get('anchorByName').hasError('required')\n                \" class=\"mt5\">\n              </mat-error>\n            </mat-form-field>\n          </div>\n        </mat-expansion-panel>\n      </div>\n    </form>\n  </div>\n\n  <div id=\"qmsckeditor_link_footer\" class=\"qmsckeditor button__groups row\">\n    <div class=\"col-12 mt-3 pl-3 pr-3 ps-3 pe-3\">\n      <button class=\"save\" mat-flat-button (click)=\"setLink()\" [disabled]=\"disableOkButton()\">\n        {{ LANG.QMSCKEDITOR.OK }}\n      </button>\n    </div>\n  </div>\n</div>", styles: [".mt5{margin-top:5px!important}.mt10{margin-top:10px!important}.mt7{margin-top:7px!important}.mt15{margin-top:15px!important}.mt20{margin-top:20px!important}.mt30{margin-top:30px!important}.mt40{margin-top:40px!important}.ml2{margin-left:2px!important}.ml3{margin-left:3px!important}.ml5{margin-left:5px!important}.ml15{margin-left:15px!important}.ml10{margin-left:10px!important}.ml12{margin-left:12px!important}.ml16{margin-left:16px!important}.ml-auto{margin-left:auto!important}.ml-25{margin-left:-25px!important}.mr5{margin-right:5px!important}.mr12{margin-right:12px!important}.mr15{margin-right:15px!important}.mb5{margin-bottom:5px!important}.mb10{margin-bottom:10px!important}.mb15{margin-bottom:15px!important}.pt8{padding-top:8px!important}.pt10{padding-top:10px!important}.pt15{padding-top:15px!important}.pt16{padding-top:16px!important}.pl15{padding-left:15px!important}.pl0{padding-left:0!important}.pr0{padding-right:0!important}.pr15{padding-right:15px!important}.fs12{font-size:12px}.fs14{font-size:14px!important}.fs16{font-size:16px!important}.fs22{font-size:22px!important}.fw500{font-weight:500!important}.italic-text{font-style:italic}.display-flex{display:flex}.qmsckeditor{font-family:Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:400}.qmsckeditor h2{font-size:20px;font-weight:400}.qmsckeditor .mat-icon{color:#909497}.qmsckeditor__fullscreen{position:fixed;inset:0;background:#fff;overflow-y:auto;max-height:100vh;overflow-x:hidden}.qmsckeditor__cursor{cursor:pointer}.qmsckeditor__notallowed{cursor:not-allowed}.qmsckeditor.button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qmsckeditor.button__done{float:right;top:-24px;right:-24px;cursor:pointer;margin-right:20px}.qmsckeditor.button__done .mat-icon{color:#28a745;font-weight:700}.qmsckeditor.button__groups button{min-height:40px;width:100%;border-radius:4px;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px}.qmsckeditor.button__groups .save{background:#f8f9f9}.qmsckeditor.button__groups .save:hover{background:#e5e7e9}.qmsckeditor.button__groups .save:disabled{cursor:not-allowed}.qmsckeditor.button__groups .cancel{background:#f8f9f9}.qmsckeditor.button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.button__groups .cancel:disabled{cursor:not-allowed}.qmsckeditor.button__groups .delete{background:#f8f9f9}.qmsckeditor.button__groups .delete:hover{background:#e5e7e9}.qmsckeditor.button__groups .delete:disabled{cursor:not-allowed}.qmsckeditor.confirm__button__groups button{min-height:36px;border-radius:4px;width:auto;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px;padding-left:15px;padding-right:15px}.qmsckeditor.confirm__button__groups .confirm{background:#f8f9f9}.qmsckeditor.confirm__button__groups .confirm:hover{background:#e5e7e9}.qmsckeditor.confirm__button__groups .cancel{background:#f8f9f9}.qmsckeditor.confirm__button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.template-content.height{min-height:420px;max-height:520px;overflow:auto}.qmsckeditor.template-content.title{margin-left:-9px}.qmsckeditor.link__content.height{min-height:400px;max-height:520px}.qmsckeditor.card{margin-bottom:10px;min-height:60px;box-shadow:none;border:1px solid #e5e5e5}.qmsckeditor.card .title{font-weight:700}.qmsckeditor.card .content{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.qmsckeditor.card .material-icons{font-size:20px}.qmsckeditor.tooltip-content.height{min-height:400px;max-height:472px;overflow:auto}.qmsckeditor.save__as__template.height{height:125px}.ck-content .page-break,.ck-content .ck-horizontal-line{width:100%}.ck-content hr{background:#ccc}.ck-font-size-dropdown .ck-dropdown__panel ul{max-height:320px;overflow-y:auto}.ck-font-size-dropdown .ck-dropdown__panel ul li .ck-fontsize-option .ck-button__label{line-height:50px}.qmsckeditor__link__container textarea.mat-mdc-input-element{min-height:130px}\n"], dependencies: [{ kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i9.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i9.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i11.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i11.MatLabel, selector: "mat-label" }, { kind: "directive", type: i11.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i8.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i13.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i14.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i8$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: QMSCKEditorLinkComponent, decorators: [{
             type: Component,
-            args: [{ selector: "qms-ckeditor-link", template: "<div id=\"qmsckeditor_link\" class=\"qmsckeditor qmsckeditor__link__container\">\n  <div id=\"qmsckeditor_link_header\">\n    <span id=\"qmsckeditor_link_header_001\" mat-icon-button class=\"qmsckeditor button__close\" (click)=\"onCloseDialog()\">\n      <mat-icon>close</mat-icon>\n    </span>\n    <div id=\"qmsckeditor_link_header_002\" mat-dialog-content>\n      <h2 id=\"qmsckeditor_link_header_001\">\n        {{ LANG.QMSCKEDITOR.LINK }}\n      </h2>\n    </div>\n  </div>\n  <div id=\"qmsckeditor_link_type\" class=\"row\">\n    <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-3 ps-3 pe-3\">\n      <mat-label>{{ LANG.QMSCKEDITOR.LINK_TYPE }}</mat-label>\n      <mat-select disableOptionCentering name=\"linkTypeList\" [(ngModel)]=\"selectedLinkType\"\n        (ngModelChange)=\"onSelectedLinkType()\">\n        <mat-option *ngFor=\"let link of linkTypes\" [value]=\"link.id\">\n          {{ link.name }}\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n  </div>\n\n  <div id=\"qmsckeditor_link_content\">\n    <form [formGroup]=\"linkFormGroup\" class=\"qmsckeditor link__content height row\"\n      *ngIf=\"selectedLinkType == LinkType.url\">\n      <div id=\"qmsckeditor_link_url\" class=\"col-12 mt-1 pl-3 pr-3 ps-3 pe-3\">\n        <mat-expansion-panel id=\"qmsckeditor_link_url_panel\" [expanded]=\"isExpanded\" (opened)=\"isExpanded = true\"\n          (closed)=\"isExpanded = false\">\n          <mat-expansion-panel-header>\n            <mat-panel-title>\n              {{ LANG.QMSCKEDITOR.URL_HEADER }}\n            </mat-panel-title>\n          </mat-expansion-panel-header>\n          <div id=\"qmsckeditor_link_url_001\" class=\"row mt-2\">\n            <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-3 ps-3 pe-3\">\n              <mat-label>{{ LANG.QMSCKEDITOR.TARGET }}</mat-label>\n              <mat-select [(ngModel)]=\"selectedTarget\" formControlName=\"targetList\" disableOptionCentering>\n                <mat-option *ngFor=\"let target of targets\" [value]=\"target.id\">\n                  {{ target.name }}\n                </mat-option>\n              </mat-select>\n            </mat-form-field>\n          </div>\n          <div id=\"qmsckeditor_link_url_002\" class=\"row\">\n            <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-3 ps-3 pe-3\">\n              <mat-label>{{ LANG.QMSCKEDITOR.PROTOCOL }}</mat-label>\n              <mat-select [(ngModel)]=\"selectedProtocol\" formControlName=\"protocolList\" disableOptionCentering>\n                <mat-option *ngFor=\"let protocol of protocols\" [value]=\"protocol.id\">\n                  {{ protocol.name }}\n                </mat-option>\n              </mat-select>\n            </mat-form-field>\n          </div>\n          <div id=\"qmsckeditor_link_url_003\" class=\"row\">\n            <mat-form-field class=\"col-12 pl-3 pr-3 ps-3 pe-3\" appearance=\"fill\">\n              <mat-label>{{ LANG.QMSCKEDITOR.LINK_URL }}</mat-label>\n              <input matInput [(ngModel)]=\"url\" name=\"url\" formControlName=\"url\"\n                (ngModelChange)=\"getUrlToSetProtocol()\" (keydown.enter)=\"setLinkUrlType($event)\" />\n              <mat-error *ngIf=\"linkFormGroup.get('url').hasError('required')\" class=\"mt5\">\n              </mat-error>\n            </mat-form-field>\n          </div>\n          <div id=\"qmsckeditor_link_url_004\" class=\"row\">\n            <mat-form-field class=\"col-12 pl-3 pr-3 ps-3 pe-3\" appearance=\"fill\">\n              <mat-label>{{ LANG.QMSCKEDITOR.TITLE }}</mat-label>\n              <input matInput [(ngModel)]=\"advisoryTitle\" formControlName=\"advisoryTitle\" />\n              <mat-error *ngIf=\"linkFormGroup.get('advisoryTitle').hasError('required')\" class=\"mt5\">\n              </mat-error>\n            </mat-form-field>\n          </div>\n          <div id=\"qmsckeditor_link_url_005\" class=\"qmsckeditor button__groups row\">\n            <div class=\"col-6 pl-3 ps-3\">\n              <button class=\"save\" mat-flat-button (click)=\"eHandbook(false, false)\">\n                {{ LANG.QMSCKEDITOR.DOCUMENT_PROCESS }}\n              </button>\n            </div>\n            <div class=\"col-6 pr-3 pe-3\">\n              <button class=\"save\" mat-flat-button (click)=\"attachment()\">\n                {{ LANG.QMSCKEDITOR.ATTACHMENT }}\n              </button>\n            </div>\n          </div>\n        </mat-expansion-panel>\n      </div>\n    </form>\n\n    <form [formGroup]=\"anchorTextFormGroup\" class=\"qmsckeditor link__content height row\"\n      *ngIf=\"selectedLinkType == LinkType.anchorText\">\n      <div id=\"qmsckeditor_link_anchor_text\" class=\"col-12 mt-1 pl-3 pr-3 ps-3 pe-3\">\n        <mat-expansion-panel id=\"qmsckeditor_link_anchor_text_panel\" [expanded]=\"isExpanded\"\n          (opened)=\"isExpanded = true\" (closed)=\"isExpanded = false\">\n          <mat-expansion-panel-header>\n            <mat-panel-title>\n              {{ LANG.QMSCKEDITOR.ANCHOR_TEXT_HEADER }}\n            </mat-panel-title>\n          </mat-expansion-panel-header>\n          <div id=\"qmsckeditor_link_anchor_text_001\" class=\"row mt-2\">\n            <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-3 ps-3 pe-3\">\n              <mat-label>{{ LANG.QMSCKEDITOR.ANCHOR_BY_NAME }}</mat-label>\n              <mat-select [(ngModel)]=\"anchorText\" formControlName=\"anchorText\">\n                <mat-option *ngFor=\"let editorAnchor of editorAnchors\" [value]=\"editorAnchor.anchorValue\"\n                  disableOptionCentering>\n                  {{ editorAnchor.viewValue }}\n                </mat-option>\n              </mat-select>\n              <mat-error *ngIf=\"\n                  anchorTextFormGroup.get('anchorText').hasError('required')\n                \" class=\"mt5\">\n              </mat-error>\n            </mat-form-field>\n          </div>\n        </mat-expansion-panel>\n      </div>\n    </form>\n\n    <form [formGroup]=\"emailFormGroup\" class=\"qmsckeditor link__content height row\"\n      *ngIf=\"selectedLinkType == LinkType.email\">\n      <div id=\"qmsckeditor_link_email\" class=\"col-12 mt-1 pl-3 pr-3 ps-3 pe-3\">\n        <mat-expansion-panel id=\"qmsckeditor_link_email_panel\" [expanded]=\"isExpanded\" (opened)=\"isExpanded = true\"\n          (closed)=\"isExpanded = false\">\n          <mat-expansion-panel-header>\n            <mat-panel-title>\n              {{ LANG.QMSCKEDITOR.EMAIL_HEADER }}\n            </mat-panel-title>\n          </mat-expansion-panel-header>\n          <div id=\"qmsckeditor_link_email_001\" class=\"row\">\n            <mat-form-field class=\"col-12 pl-3 pr-3 ps-3 pe-3\" appearance=\"fill\">\n              <mat-label>{{ LANG.QMSCKEDITOR.EMAIL_ADDRESS }}</mat-label>\n              <input matInput [(ngModel)]=\"emailAddress\" formControlName=\"emailAddress\" />\n              <mat-error *ngIf=\"emailFormGroup.get('emailAddress').hasError('required')\" class=\"mt5\">\n              </mat-error>\n            </mat-form-field>\n          </div>\n          <div id=\"qmsckeditor_link_email_002\" class=\"row\">\n            <mat-form-field class=\"col-12 pl-3 pr-3 ps-3 pe-3\" appearance=\"fill\">\n              <mat-label>{{ LANG.QMSCKEDITOR.EMAIL_SUBJECT }}</mat-label>\n              <input matInput [(ngModel)]=\"emailSubject\" formControlName=\"emailSubject\" />\n              <mat-error *ngIf=\"emailFormGroup.get('emailSubject').hasError('required')\" class=\"mt5\">\n              </mat-error>\n            </mat-form-field>\n          </div>\n          <div id=\"qmsckeditor_link_email_003\" class=\"row\">\n            <mat-form-field class=\"col-12 pl-3 pr-3 ps-3 pe-3\" appearance=\"fill\">\n              <mat-label>{{ LANG.QMSCKEDITOR.EMAIL_BODY }}</mat-label>\n              <textarea matInput [(ngModel)]=\"emailBody\" formControlName=\"emailBody\"></textarea>\n              <mat-error *ngIf=\"emailFormGroup.get('emailBody').hasError('required')\" class=\"mt5\">\n              </mat-error>\n            </mat-form-field>\n          </div>\n        </mat-expansion-panel>\n      </div>\n    </form>\n\n    <form [formGroup]=\"anchorDocFormGroup\" class=\"qmsckeditor link__content height row\"\n      *ngIf=\"selectedLinkType == LinkType.anchorDocument\">\n      <div id=\"qmsckeditor_link_anchor_doc\" class=\"col-12 mt-1 pl-3 pr-3 ps-3 pe-3\">\n        <mat-expansion-panel id=\"qmsckeditor_link_email_panel\" [expanded]=\"isExpanded\" (opened)=\"isExpanded = true\"\n          (closed)=\"isExpanded = false\">\n          <mat-expansion-panel-header>\n            <mat-panel-title>\n              {{ LANG.QMSCKEDITOR.DOCUMENT_HEADER }}\n            </mat-panel-title>\n          </mat-expansion-panel-header>\n          <div id=\"qmsckeditor_link_anchor_doc_001\" class=\"qmsckeditor button__groups row\">\n            <div class=\"col-6 pl-3 ps-3\">\n              <button class=\"cancel\" mat-flat-button (click)=\"eHandbook(true, true)\">\n                {{ LANG.QMSCKEDITOR.DOCUMENT }}\n              </button>\n            </div>\n          </div>\n          <div id=\"qmsckeditor_link_anchor_doc_002\" class=\"row mt-4\">\n            <mat-form-field class=\"col-12 pl-3 pr-3 ps-3 pe-3\" appearance=\"fill\">\n              <mat-label>{{ LANG.QMSCKEDITOR.DOCUMENT }}</mat-label>\n              <input matInput [(ngModel)]=\"anchorTitle\" formControlName=\"anchorTitle\" />\n              <mat-error *ngIf=\"\n                  anchorDocFormGroup.get('anchorTitle').hasError('required')\n                \" class=\"mt5\">\n              </mat-error>\n            </mat-form-field>\n          </div>\n          <div id=\"qmsckeditor_link_anchor_doc_003\" class=\"row mt-2\">\n            <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-3 ps-3 pe-3\">\n              <mat-label>{{ LANG.QMSCKEDITOR.TARGET }}</mat-label>\n              <mat-select [(ngModel)]=\"selectedTargetAnchorDocument\" formControlName=\"targetList\" disableOptionCentering>\n                <mat-option *ngFor=\"let target of targets\" [value]=\"target.id\">\n                  {{ target.name }}\n                </mat-option>\n              </mat-select>\n            </mat-form-field>\n          </div>\n          <div id=\"qmsckeditor_link_anchor_doc_004\" class=\"row mt-2\">\n            <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-3 ps-3 pe-3\">\n              <mat-label>{{ LANG.QMSCKEDITOR.ANCHOR_BY_NAME }}</mat-label>\n              <mat-select [(ngModel)]=\"anchorByName\" formControlName=\"anchorByName\" disableOptionCentering>\n                <mat-option *ngFor=\"let docAnchor of documentAnchors\" [value]=\"docAnchor.anchorValue\">\n                  {{ docAnchor.viewValue }}\n                </mat-option>\n              </mat-select>\n              <mat-error *ngIf=\"\n                  anchorDocFormGroup.get('anchorByName').hasError('required')\n                \" class=\"mt5\">\n              </mat-error>\n            </mat-form-field>\n          </div>\n        </mat-expansion-panel>\n      </div>\n    </form>\n  </div>\n\n  <div id=\"qmsckeditor_link_footer\" class=\"qmsckeditor button__groups row\">\n    <div class=\"col-12 mt-3 pl-3 pr-3 ps-3 pe-3\">\n      <button class=\"save\" mat-flat-button (click)=\"setLink()\" [disabled]=\"disableOkButton()\">\n        {{ LANG.QMSCKEDITOR.OK }}\n      </button>\n    </div>\n  </div>\n</div>", styles: [".mt5{margin-top:5px!important}.mt10{margin-top:10px!important}.mt7{margin-top:7px!important}.mt15{margin-top:15px!important}.mt20{margin-top:20px!important}.mt30{margin-top:30px!important}.mt40{margin-top:40px!important}.ml2{margin-left:2px!important}.ml3{margin-left:3px!important}.ml5{margin-left:5px!important}.ml15{margin-left:15px!important}.ml10{margin-left:10px!important}.ml12{margin-left:12px!important}.ml16{margin-left:16px!important}.ml-auto{margin-left:auto!important}.ml-25{margin-left:-25px!important}.mr5{margin-right:5px!important}.mr12{margin-right:12px!important}.mr15{margin-right:15px!important}.mb5{margin-bottom:5px!important}.mb10{margin-bottom:10px!important}.mb15{margin-bottom:15px!important}.pt8{padding-top:8px!important}.pt10{padding-top:10px!important}.pt15{padding-top:15px!important}.pt16{padding-top:16px!important}.pl15{padding-left:15px!important}.pl0{padding-left:0!important}.pr0{padding-right:0!important}.pr15{padding-right:15px!important}.fs12{font-size:12px}.fs14{font-size:14px!important}.fs16{font-size:16px!important}.fs22{font-size:22px!important}.fw500{font-weight:500!important}.italic-text{font-style:italic}.display-flex{display:flex}.qmsckeditor{font-family:Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:400}.qmsckeditor h2{font-size:20px;font-weight:400}.qmsckeditor .mat-mdc-dialog-content{padding:0}.qmsckeditor .mat-icon{color:#909497}.qmsckeditor__fullscreen{position:fixed;inset:0;background:#fff;overflow-y:auto;max-height:100vh;overflow-x:hidden}.qmsckeditor__cursor{cursor:pointer}.qmsckeditor__notallowed{cursor:not-allowed}.qmsckeditor.button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qmsckeditor.button__done{float:right;top:-24px;right:-24px;cursor:pointer;margin-right:20px}.qmsckeditor.button__done .mat-icon{color:#28a745;font-weight:700}.qmsckeditor.button__groups button{min-height:40px;width:100%;border-radius:4px;border:1px solid #C5C5C5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px}.qmsckeditor.button__groups .save{background:#f8f9f9}.qmsckeditor.button__groups .save:hover{background:#e5e7e9}.qmsckeditor.button__groups .save:disabled{cursor:not-allowed}.qmsckeditor.button__groups .cancel{background:#f8f9f9}.qmsckeditor.button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.button__groups .cancel:disabled{cursor:not-allowed}.qmsckeditor.button__groups .delete{background:#f8f9f9}.qmsckeditor.button__groups .delete:hover{background:#e5e7e9}.qmsckeditor.button__groups .delete:disabled{cursor:not-allowed}.qmsckeditor.confirm__button__groups button{min-height:36px;border-radius:4px;width:auto;border:1px solid #C5C5C5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px;padding-left:15px;padding-right:15px}.qmsckeditor.confirm__button__groups .confirm{background:#f8f9f9}.qmsckeditor.confirm__button__groups .confirm:hover{background:#e5e7e9}.qmsckeditor.confirm__button__groups .cancel{background:#f8f9f9}.qmsckeditor.confirm__button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.template-content.height{min-height:420px;max-height:520px;overflow:auto}.qmsckeditor.template-content.title{margin-left:-9px}.qmsckeditor.link__content.height{min-height:400px;max-height:520px}.qmsckeditor.card{margin-bottom:10px;min-height:60px;box-shadow:none;border:1px solid #e5e5e5}.qmsckeditor.card .title{font-weight:700}.qmsckeditor.card .content{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.qmsckeditor.card .material-icons{font-size:20px}.qmsckeditor.tooltip-content.height{min-height:400px;max-height:472px;overflow:auto}.qmsckeditor.save__as__template.height{height:125px}.ck-content .page-break,.ck-content .ck-horizontal-line{width:100%}.ck-content hr{background:#ccc}.ck-font-size-dropdown .ck-dropdown__panel ul{max-height:320px;overflow-y:auto}.ck-font-size-dropdown .ck-dropdown__panel ul li .ck-fontsize-option .ck-button__label{line-height:50px}.qmsckeditor__link__container textarea.mat-mdc-input-element{min-height:130px}\n"] }]
+            args: [{ selector: "qms-ckeditor-link", template: "<div id=\"qmsckeditor_link\" class=\"qmsckeditor qmsckeditor__link__container\">\n  <div id=\"qmsckeditor_link_header\">\n    <span id=\"qmsckeditor_link_header_001\" mat-icon-button class=\"qmsckeditor button__close\" (click)=\"onCloseDialog()\">\n      <mat-icon>close</mat-icon>\n    </span>\n    <div id=\"qmsckeditor_link_header_002\" mat-dialog-content>\n      <h2 id=\"qmsckeditor_link_header_001\">\n        {{ LANG.QMSCKEDITOR.LINK }}\n      </h2>\n    </div>\n  </div>\n  <div id=\"qmsckeditor_link_type\" class=\"row\">\n    <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-3 ps-3 pe-3\">\n      <mat-label>{{ LANG.QMSCKEDITOR.LINK_TYPE }}</mat-label>\n      <mat-select disableOptionCentering name=\"linkTypeList\" [(ngModel)]=\"selectedLinkType\"\n        (ngModelChange)=\"onSelectedLinkType()\">\n        <mat-option *ngFor=\"let link of linkTypes\" [value]=\"link.id\">\n          {{ link.name }}\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n  </div>\n\n  <div id=\"qmsckeditor_link_content\">\n    <form [formGroup]=\"linkFormGroup\" class=\"qmsckeditor link__content height row\"\n      *ngIf=\"selectedLinkType == LinkType.url\">\n      <div id=\"qmsckeditor_link_url\" class=\"col-12 mt-1 pl-3 pr-3 ps-3 pe-3\">\n        <mat-expansion-panel id=\"qmsckeditor_link_url_panel\" [expanded]=\"isExpanded\" (opened)=\"isExpanded = true\"\n          (closed)=\"isExpanded = false\">\n          <mat-expansion-panel-header>\n            <mat-panel-title>\n              {{ LANG.QMSCKEDITOR.URL_HEADER }}\n            </mat-panel-title>\n          </mat-expansion-panel-header>\n          <div id=\"qmsckeditor_link_url_001\" class=\"row mt-2\">\n            <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-3 ps-3 pe-3\">\n              <mat-label>{{ LANG.QMSCKEDITOR.TARGET }}</mat-label>\n              <mat-select [(ngModel)]=\"selectedTarget\" formControlName=\"targetList\" disableOptionCentering>\n                <mat-option *ngFor=\"let target of targets\" [value]=\"target.id\">\n                  {{ target.name }}\n                </mat-option>\n              </mat-select>\n            </mat-form-field>\n          </div>\n          <div id=\"qmsckeditor_link_url_002\" class=\"row\">\n            <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-3 ps-3 pe-3\">\n              <mat-label>{{ LANG.QMSCKEDITOR.PROTOCOL }}</mat-label>\n              <mat-select [(ngModel)]=\"selectedProtocol\" formControlName=\"protocolList\" disableOptionCentering>\n                <mat-option *ngFor=\"let protocol of protocols\" [value]=\"protocol.id\">\n                  {{ protocol.name }}\n                </mat-option>\n              </mat-select>\n            </mat-form-field>\n          </div>\n          <div id=\"qmsckeditor_link_url_003\" class=\"row\">\n            <mat-form-field class=\"col-12 pl-3 pr-3 ps-3 pe-3\" appearance=\"fill\">\n              <mat-label>{{ LANG.QMSCKEDITOR.LINK_URL }}</mat-label>\n              <input matInput [(ngModel)]=\"url\" name=\"url\" formControlName=\"url\"\n                (ngModelChange)=\"getUrlToSetProtocol()\" (keydown.enter)=\"setLinkUrlType($event)\" />\n              <mat-error *ngIf=\"linkFormGroup.get('url').hasError('required')\" class=\"mt5\">\n              </mat-error>\n            </mat-form-field>\n          </div>\n          <div id=\"qmsckeditor_link_url_004\" class=\"row\">\n            <mat-form-field class=\"col-12 pl-3 pr-3 ps-3 pe-3\" appearance=\"fill\">\n              <mat-label>{{ LANG.QMSCKEDITOR.TITLE }}</mat-label>\n              <input matInput [(ngModel)]=\"advisoryTitle\" formControlName=\"advisoryTitle\" />\n              <mat-error *ngIf=\"linkFormGroup.get('advisoryTitle').hasError('required')\" class=\"mt5\">\n              </mat-error>\n            </mat-form-field>\n          </div>\n          <div id=\"qmsckeditor_link_url_005\" class=\"qmsckeditor button__groups row\">\n            <div class=\"col-6 pl-3 ps-3\">\n              <button class=\"save\" mat-flat-button (click)=\"eHandbook(false, false)\">\n                {{ LANG.QMSCKEDITOR.DOCUMENT_PROCESS }}\n              </button>\n            </div>\n            <div class=\"col-6 pr-3 pe-3\">\n              <button class=\"save\" mat-flat-button (click)=\"attachment()\">\n                {{ LANG.QMSCKEDITOR.ATTACHMENT }}\n              </button>\n            </div>\n          </div>\n        </mat-expansion-panel>\n      </div>\n    </form>\n\n    <form [formGroup]=\"anchorTextFormGroup\" class=\"qmsckeditor link__content height row\"\n      *ngIf=\"selectedLinkType == LinkType.anchorText\">\n      <div id=\"qmsckeditor_link_anchor_text\" class=\"col-12 mt-1 pl-3 pr-3 ps-3 pe-3\">\n        <mat-expansion-panel id=\"qmsckeditor_link_anchor_text_panel\" [expanded]=\"isExpanded\"\n          (opened)=\"isExpanded = true\" (closed)=\"isExpanded = false\">\n          <mat-expansion-panel-header>\n            <mat-panel-title>\n              {{ LANG.QMSCKEDITOR.ANCHOR_TEXT_HEADER }}\n            </mat-panel-title>\n          </mat-expansion-panel-header>\n          <div id=\"qmsckeditor_link_anchor_text_001\" class=\"row mt-2\">\n            <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-3 ps-3 pe-3\">\n              <mat-label>{{ LANG.QMSCKEDITOR.ANCHOR_BY_NAME }}</mat-label>\n              <mat-select [(ngModel)]=\"anchorText\" formControlName=\"anchorText\">\n                <mat-option *ngFor=\"let editorAnchor of editorAnchors\" [value]=\"editorAnchor.anchorValue\"\n                  disableOptionCentering>\n                  {{ editorAnchor.viewValue }}\n                </mat-option>\n              </mat-select>\n              <mat-error *ngIf=\"\n                  anchorTextFormGroup.get('anchorText').hasError('required')\n                \" class=\"mt5\">\n              </mat-error>\n            </mat-form-field>\n          </div>\n        </mat-expansion-panel>\n      </div>\n    </form>\n\n    <form [formGroup]=\"emailFormGroup\" class=\"qmsckeditor link__content height row\"\n      *ngIf=\"selectedLinkType == LinkType.email\">\n      <div id=\"qmsckeditor_link_email\" class=\"col-12 mt-1 pl-3 pr-3 ps-3 pe-3\">\n        <mat-expansion-panel id=\"qmsckeditor_link_email_panel\" [expanded]=\"isExpanded\" (opened)=\"isExpanded = true\"\n          (closed)=\"isExpanded = false\">\n          <mat-expansion-panel-header>\n            <mat-panel-title>\n              {{ LANG.QMSCKEDITOR.EMAIL_HEADER }}\n            </mat-panel-title>\n          </mat-expansion-panel-header>\n          <div id=\"qmsckeditor_link_email_001\" class=\"row\">\n            <mat-form-field class=\"col-12 pl-3 pr-3 ps-3 pe-3\" appearance=\"fill\">\n              <mat-label>{{ LANG.QMSCKEDITOR.EMAIL_ADDRESS }}</mat-label>\n              <input matInput [(ngModel)]=\"emailAddress\" formControlName=\"emailAddress\" />\n              <mat-error *ngIf=\"emailFormGroup.get('emailAddress').hasError('required')\" class=\"mt5\">\n              </mat-error>\n            </mat-form-field>\n          </div>\n          <div id=\"qmsckeditor_link_email_002\" class=\"row\">\n            <mat-form-field class=\"col-12 pl-3 pr-3 ps-3 pe-3\" appearance=\"fill\">\n              <mat-label>{{ LANG.QMSCKEDITOR.EMAIL_SUBJECT }}</mat-label>\n              <input matInput [(ngModel)]=\"emailSubject\" formControlName=\"emailSubject\" />\n              <mat-error *ngIf=\"emailFormGroup.get('emailSubject').hasError('required')\" class=\"mt5\">\n              </mat-error>\n            </mat-form-field>\n          </div>\n          <div id=\"qmsckeditor_link_email_003\" class=\"row\">\n            <mat-form-field class=\"col-12 pl-3 pr-3 ps-3 pe-3\" appearance=\"fill\">\n              <mat-label>{{ LANG.QMSCKEDITOR.EMAIL_BODY }}</mat-label>\n              <textarea matInput [(ngModel)]=\"emailBody\" formControlName=\"emailBody\"></textarea>\n              <mat-error *ngIf=\"emailFormGroup.get('emailBody').hasError('required')\" class=\"mt5\">\n              </mat-error>\n            </mat-form-field>\n          </div>\n        </mat-expansion-panel>\n      </div>\n    </form>\n\n    <form [formGroup]=\"anchorDocFormGroup\" class=\"qmsckeditor link__content height row\"\n      *ngIf=\"selectedLinkType == LinkType.anchorDocument\">\n      <div id=\"qmsckeditor_link_anchor_doc\" class=\"col-12 mt-1 pl-3 pr-3 ps-3 pe-3\">\n        <mat-expansion-panel id=\"qmsckeditor_link_email_panel\" [expanded]=\"isExpanded\" (opened)=\"isExpanded = true\"\n          (closed)=\"isExpanded = false\">\n          <mat-expansion-panel-header>\n            <mat-panel-title>\n              {{ LANG.QMSCKEDITOR.DOCUMENT_HEADER }}\n            </mat-panel-title>\n          </mat-expansion-panel-header>\n          <div id=\"qmsckeditor_link_anchor_doc_001\" class=\"qmsckeditor button__groups row\">\n            <div class=\"col-6 pl-3 ps-3\">\n              <button class=\"cancel\" mat-flat-button (click)=\"eHandbook(true, true)\">\n                {{ LANG.QMSCKEDITOR.DOCUMENT }}\n              </button>\n            </div>\n          </div>\n          <div id=\"qmsckeditor_link_anchor_doc_002\" class=\"row mt-4\">\n            <mat-form-field class=\"col-12 pl-3 pr-3 ps-3 pe-3\" appearance=\"fill\">\n              <mat-label>{{ LANG.QMSCKEDITOR.DOCUMENT }}</mat-label>\n              <input matInput [(ngModel)]=\"anchorTitle\" formControlName=\"anchorTitle\" />\n              <mat-error *ngIf=\"\n                  anchorDocFormGroup.get('anchorTitle').hasError('required')\n                \" class=\"mt5\">\n              </mat-error>\n            </mat-form-field>\n          </div>\n          <div id=\"qmsckeditor_link_anchor_doc_003\" class=\"row mt-2\">\n            <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-3 ps-3 pe-3\">\n              <mat-label>{{ LANG.QMSCKEDITOR.TARGET }}</mat-label>\n              <mat-select [(ngModel)]=\"selectedTargetAnchorDocument\" formControlName=\"targetList\" disableOptionCentering>\n                <mat-option *ngFor=\"let target of targets\" [value]=\"target.id\">\n                  {{ target.name }}\n                </mat-option>\n              </mat-select>\n            </mat-form-field>\n          </div>\n          <div id=\"qmsckeditor_link_anchor_doc_004\" class=\"row mt-2\">\n            <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-3 ps-3 pe-3\">\n              <mat-label>{{ LANG.QMSCKEDITOR.ANCHOR_BY_NAME }}</mat-label>\n              <mat-select [(ngModel)]=\"anchorByName\" formControlName=\"anchorByName\" disableOptionCentering>\n                <mat-option *ngFor=\"let docAnchor of documentAnchors\" [value]=\"docAnchor.anchorValue\">\n                  {{ docAnchor.viewValue }}\n                </mat-option>\n              </mat-select>\n              <mat-error *ngIf=\"\n                  anchorDocFormGroup.get('anchorByName').hasError('required')\n                \" class=\"mt5\">\n              </mat-error>\n            </mat-form-field>\n          </div>\n        </mat-expansion-panel>\n      </div>\n    </form>\n  </div>\n\n  <div id=\"qmsckeditor_link_footer\" class=\"qmsckeditor button__groups row\">\n    <div class=\"col-12 mt-3 pl-3 pr-3 ps-3 pe-3\">\n      <button class=\"save\" mat-flat-button (click)=\"setLink()\" [disabled]=\"disableOkButton()\">\n        {{ LANG.QMSCKEDITOR.OK }}\n      </button>\n    </div>\n  </div>\n</div>", styles: [".mt5{margin-top:5px!important}.mt10{margin-top:10px!important}.mt7{margin-top:7px!important}.mt15{margin-top:15px!important}.mt20{margin-top:20px!important}.mt30{margin-top:30px!important}.mt40{margin-top:40px!important}.ml2{margin-left:2px!important}.ml3{margin-left:3px!important}.ml5{margin-left:5px!important}.ml15{margin-left:15px!important}.ml10{margin-left:10px!important}.ml12{margin-left:12px!important}.ml16{margin-left:16px!important}.ml-auto{margin-left:auto!important}.ml-25{margin-left:-25px!important}.mr5{margin-right:5px!important}.mr12{margin-right:12px!important}.mr15{margin-right:15px!important}.mb5{margin-bottom:5px!important}.mb10{margin-bottom:10px!important}.mb15{margin-bottom:15px!important}.pt8{padding-top:8px!important}.pt10{padding-top:10px!important}.pt15{padding-top:15px!important}.pt16{padding-top:16px!important}.pl15{padding-left:15px!important}.pl0{padding-left:0!important}.pr0{padding-right:0!important}.pr15{padding-right:15px!important}.fs12{font-size:12px}.fs14{font-size:14px!important}.fs16{font-size:16px!important}.fs22{font-size:22px!important}.fw500{font-weight:500!important}.italic-text{font-style:italic}.display-flex{display:flex}.qmsckeditor{font-family:Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:400}.qmsckeditor h2{font-size:20px;font-weight:400}.qmsckeditor .mat-icon{color:#909497}.qmsckeditor__fullscreen{position:fixed;inset:0;background:#fff;overflow-y:auto;max-height:100vh;overflow-x:hidden}.qmsckeditor__cursor{cursor:pointer}.qmsckeditor__notallowed{cursor:not-allowed}.qmsckeditor.button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qmsckeditor.button__done{float:right;top:-24px;right:-24px;cursor:pointer;margin-right:20px}.qmsckeditor.button__done .mat-icon{color:#28a745;font-weight:700}.qmsckeditor.button__groups button{min-height:40px;width:100%;border-radius:4px;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px}.qmsckeditor.button__groups .save{background:#f8f9f9}.qmsckeditor.button__groups .save:hover{background:#e5e7e9}.qmsckeditor.button__groups .save:disabled{cursor:not-allowed}.qmsckeditor.button__groups .cancel{background:#f8f9f9}.qmsckeditor.button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.button__groups .cancel:disabled{cursor:not-allowed}.qmsckeditor.button__groups .delete{background:#f8f9f9}.qmsckeditor.button__groups .delete:hover{background:#e5e7e9}.qmsckeditor.button__groups .delete:disabled{cursor:not-allowed}.qmsckeditor.confirm__button__groups button{min-height:36px;border-radius:4px;width:auto;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px;padding-left:15px;padding-right:15px}.qmsckeditor.confirm__button__groups .confirm{background:#f8f9f9}.qmsckeditor.confirm__button__groups .confirm:hover{background:#e5e7e9}.qmsckeditor.confirm__button__groups .cancel{background:#f8f9f9}.qmsckeditor.confirm__button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.template-content.height{min-height:420px;max-height:520px;overflow:auto}.qmsckeditor.template-content.title{margin-left:-9px}.qmsckeditor.link__content.height{min-height:400px;max-height:520px}.qmsckeditor.card{margin-bottom:10px;min-height:60px;box-shadow:none;border:1px solid #e5e5e5}.qmsckeditor.card .title{font-weight:700}.qmsckeditor.card .content{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.qmsckeditor.card .material-icons{font-size:20px}.qmsckeditor.tooltip-content.height{min-height:400px;max-height:472px;overflow:auto}.qmsckeditor.save__as__template.height{height:125px}.ck-content .page-break,.ck-content .ck-horizontal-line{width:100%}.ck-content hr{background:#ccc}.ck-font-size-dropdown .ck-dropdown__panel ul{max-height:320px;overflow-y:auto}.ck-font-size-dropdown .ck-dropdown__panel ul li .ck-fontsize-option .ck-button__label{line-height:50px}.qmsckeditor__link__container textarea.mat-mdc-input-element{min-height:130px}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$2.MatDialog }, { type: TranslateLibraryService }, { type: QMSCKEditorLinkService }, { type: QMSCKEditorCommonService }, { type: QMSCKEditorTreeService }, { type: QMSSelectProcessDocumentGlobalService }, { type: i1$2.MatDialogRef }, { type: QMSCKEditorLink, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -12897,11 +12897,11 @@ class QMSCKEditorTemplateComponent extends QMSCKEditorBaseComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: QMSCKEditorTemplateComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$2.MatDialog }, { token: TranslateLibraryService }, { token: QMSCKEditorTemplateService }, { token: QMSCKEditorCommonService }, { token: i1$2.MatDialogRef }, { token: i4.MatIconRegistry }, { token: i1$3.DomSanitizer }, { token: QMSCKEditorUploadService }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: QMSCKEditorTemplateComponent, selector: "app-qmsck-template", inputs: { ckEditor: "ckEditor" }, usesInheritance: true, ngImport: i0, template: "<div\n  id=\"qmsckeditor-template\"\n  class=\"qmsckeditor qmsckeditor__template__container\"\n>\n  <div id=\"qmsckeditor-template-header\">\n    <span\n      id=\"qmsckeditor-template-header_001\"\n      mat-icon-button\n      class=\"qmsckeditor button__close\"\n      (click)=\"onCloseDialog()\"\n    >\n      <mat-icon>close</mat-icon>\n    </span>\n    <div\n      id=\"qmsckeditor-template-header_002\"\n      mat-dialog-content\n      *ngIf=\"!isEdit\"\n    >\n      <h2 id=\"qmsckeditor-template_002_001\">\n        {{ LANG.QMSCKEDITOR.CREATE_NEW_TEMPLATE }}\n      </h2>\n    </div>\n    <div id=\"qmsckeditor-template-header_002\" mat-dialog-content *ngIf=\"isEdit\">\n      <h2 id=\"qmsckeditor-template_002_001\">\n        {{ LANG.QMSCKEDITOR.UPDATE_TEMPLATE }}\n      </h2>\n    </div>\n  </div>\n\n  <form [formGroup]=\"templateFormGroup\">\n    <div\n      id=\"qmsckeditor-template-content\"\n      class=\"qmsckeditor template-content height form-content-height\"\n    >\n      <div id=\"qmsckeditor-template-content_001\" class=\"col-12 mt-1 pl-2 pr-2 ps-2 pe-2\">\n        <mat-expansion-panel\n          id=\"qmsckeditor-template-panel\"\n          [expanded]=\"isExpanded\"\n          (opened)=\"isExpanded = true\"\n          (closed)=\"isExpanded = false\"\n        >\n          <div id=\"qmsckeditor-template-panel_001\">\n            <div id=\"qmsckeditor-template-panel_001_000\" class=\"mt-2\">\n              <mat-form-field appearance=\"fill\">\n                <mat-label>{{ LANG.QMSCKEDITOR.TEMPLATE }}</mat-label>\n                <mat-select\n                  formControlName=\"templateList\"\n                  [(ngModel)]=\"selectedId\"\n                  (ngModelChange)=\"onSelectChange()\"\n                  [disabled]=\"isEdit\"\n                >\n                  <mat-option\n                    *ngFor=\"let template of templates\"\n                    [value]=\"template.id\"\n                  >\n                    {{ template.title }}\n                  </mat-option>\n                </mat-select>\n              </mat-form-field>\n            </div>\n            <div id=\"qmsckeditor-template-panel_001_001\">\n              <mat-form-field class=\"col-12 pl-0 pr-0 ps-0 pe-0\" appearance=\"fill\">\n                <mat-label>{{ LANG.QMSCKEDITOR.TITLE }}</mat-label>\n                <input\n                  matInput\n                  [(ngModel)]=\"template.title\"\n                  formControlName=\"title\"\n                />\n                <mat-error\n                  *ngIf=\"templateFormGroup.get('title').hasError('required')\"\n                  class=\"mt5\"\n                >\n                </mat-error>\n              </mat-form-field>\n            </div>\n            <div id=\"qmsckeditor-template-panel_001_002\">\n              <mat-form-field class=\"col-12 pl-0 pr-0 ps-0 pe-0\" appearance=\"fill\">\n                <mat-label>{{ LANG.QMSCKEDITOR.DESCRIPTION }}</mat-label>\n                <textarea\n                  matInput\n                  [(ngModel)]=\"template.description\"\n                  formControlName=\"description\"\n                ></textarea>\n                <mat-error\n                  *ngIf=\"\n                    templateFormGroup.get('description').hasError('required')\n                  \"\n                  class=\"mt5\"\n                >\n                </mat-error>\n              </mat-form-field>\n            </div>\n            <div id=\"qmsckeditor-template-panel_001_003\" class=\"selected-image\">\n              <mat-form-field qms-form qms-file-upload appearance=\"fill\" class=\"example-width input-upload\">\n                <mat-icon matPrefix svgIcon=\"upload\"></mat-icon>\n                <input matInput placeholder=\"{{ LANG.QMSCKEDITOR.ADD_IMAGE }}\" formControlName=\"imageAcceptType\" [readOnly]=\"true\" qms-file-upload-display\n                  #fileDisplay value=\"{{qmsInputImageFile? qmsInputImageFile.fileName : ''}}\"\n                  [attr.disabled]=\"isLoadingImageFile ? 'disabled' : null\">\n                <input hidden type=\"file\" [(inputFile)]=\"qmsInputImageFile\" qms-file-upload-selector #fileSelector\n                  accept=\".pjp, .jpg, .pjpeg, .jpeg, .jfif, .png, .gif, .bmp, .webp, .tif, .tiff\"\n                  (change)=\"onChangeImage($event)\">\n              \n                <mat-progress-spinner matSuffix mode=\"indeterminate\" diameter='20' *ngIf=\"isLoadingImageFile\"></mat-progress-spinner>\n                <div matSuffix qms-input-clear *ngIf=\"qmsInputImageFile && qmsInputImageFile.fileName\">\n                  <button qms-btn-icon color=\"light\" (click)=\"clearQMSInputImageFile()\" [disabled]=\"isLoadingImageFile\">\n                    <mat-icon>close</mat-icon>\n                  </button>\n                </div>\n              </mat-form-field>\n            </div>\n\n            <div id=\"qmsckeditor-template-panel_001_004\" *ngIf=\"qmsInputImageFile\">\n              <mat-form-field class=\"col-12 pl-0 pr-0 ps-0 pe-0\" appearance=\"fill\">\n                <mat-label>{{ LANG.QMSCKEDITOR.IMAGE_INFO }}</mat-label>\n                <textarea matInput [(ngModel)]=\"imageInfo\" formControlName=\"imageInfo\"></textarea>\n              </mat-form-field>\n            </div>\n          </div>\n        </mat-expansion-panel>\n      </div>\n    </div>\n  </form>\n  <div id=\"qmsckeditor-template-panel_001_005\" class=\"qmsckeditor button__groups template-button-group row mr-0 ml-0 ms-0 me-0\">\n    <div class=\"col-6 pl-0 ps-0\" *ngIf=\"!isEdit\">\n      <button class=\"delete\" mat-flat-button (click)=\"deleteTemplate()\" [disabled]=\"selectedId === 0\">\n        {{ LANG.QMSCKEDITOR.DELETE }}\n      </button>\n    </div>\n    <div class=\"col-6 pr-0 pe-0\" *ngIf=\"!isEdit && selectedId === 0\">\n      <button class=\"save\" mat-flat-button (click)=\"saveTemplate()\" [disabled]=\"templateFormGroup.invalid\">\n        {{ LANG.QMSCKEDITOR.SAVE }}\n      </button>\n    </div>\n    <div class=\"col-6 pl-0 ps-0\" *ngIf=\"isEdit\">\n      <button class=\"cancel\" mat-flat-button (click)=\"cancelTemplate()\" [disabled]=\"selectedId === 0\">\n        {{ LANG.QMSCKEDITOR.CANCEL }}\n      </button>\n    </div>\n    <div class=\"col-6 pr-0 pe-0\" *ngIf=\"isEdit || selectedId !== 0\">\n      <button class=\"save\" mat-flat-button (click)=\"updateTemplate()\" [disabled]=\"templateFormGroup.invalid\">\n        {{ LANG.QMSCKEDITOR.UPDATE }}\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [".mt5{margin-top:5px!important}.mt10{margin-top:10px!important}.mt7{margin-top:7px!important}.mt15{margin-top:15px!important}.mt20{margin-top:20px!important}.mt30{margin-top:30px!important}.mt40{margin-top:40px!important}.ml2{margin-left:2px!important}.ml3{margin-left:3px!important}.ml5{margin-left:5px!important}.ml15{margin-left:15px!important}.ml10{margin-left:10px!important}.ml12{margin-left:12px!important}.ml16{margin-left:16px!important}.ml-auto{margin-left:auto!important}.ml-25{margin-left:-25px!important}.mr5{margin-right:5px!important}.mr12{margin-right:12px!important}.mr15{margin-right:15px!important}.mb5{margin-bottom:5px!important}.mb10{margin-bottom:10px!important}.mb15{margin-bottom:15px!important}.pt8{padding-top:8px!important}.pt10{padding-top:10px!important}.pt15{padding-top:15px!important}.pt16{padding-top:16px!important}.pl15{padding-left:15px!important}.pl0{padding-left:0!important}.pr0{padding-right:0!important}.pr15{padding-right:15px!important}.fs12{font-size:12px}.fs14{font-size:14px!important}.fs16{font-size:16px!important}.fs22{font-size:22px!important}.fw500{font-weight:500!important}.italic-text{font-style:italic}.display-flex{display:flex}.qmsckeditor{font-family:Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:400}.qmsckeditor h2{font-size:20px;font-weight:400}.qmsckeditor .mat-mdc-dialog-content{padding:0}.qmsckeditor .mat-icon{color:#909497}.qmsckeditor__fullscreen{position:fixed;inset:0;background:#fff;overflow-y:auto;max-height:100vh;overflow-x:hidden}.qmsckeditor__cursor{cursor:pointer}.qmsckeditor__notallowed{cursor:not-allowed}.qmsckeditor.button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qmsckeditor.button__done{float:right;top:-24px;right:-24px;cursor:pointer;margin-right:20px}.qmsckeditor.button__done .mat-icon{color:#28a745;font-weight:700}.qmsckeditor.button__groups button{min-height:40px;width:100%;border-radius:4px;border:1px solid #C5C5C5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px}.qmsckeditor.button__groups .save{background:#f8f9f9}.qmsckeditor.button__groups .save:hover{background:#e5e7e9}.qmsckeditor.button__groups .save:disabled{cursor:not-allowed}.qmsckeditor.button__groups .cancel{background:#f8f9f9}.qmsckeditor.button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.button__groups .cancel:disabled{cursor:not-allowed}.qmsckeditor.button__groups .delete{background:#f8f9f9}.qmsckeditor.button__groups .delete:hover{background:#e5e7e9}.qmsckeditor.button__groups .delete:disabled{cursor:not-allowed}.qmsckeditor.confirm__button__groups button{min-height:36px;border-radius:4px;width:auto;border:1px solid #C5C5C5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px;padding-left:15px;padding-right:15px}.qmsckeditor.confirm__button__groups .confirm{background:#f8f9f9}.qmsckeditor.confirm__button__groups .confirm:hover{background:#e5e7e9}.qmsckeditor.confirm__button__groups .cancel{background:#f8f9f9}.qmsckeditor.confirm__button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.template-content.height{min-height:420px;max-height:520px;overflow:auto}.qmsckeditor.template-content.title{margin-left:-9px}.qmsckeditor.link__content.height{min-height:400px;max-height:520px}.qmsckeditor.card{margin-bottom:10px;min-height:60px;box-shadow:none;border:1px solid #e5e5e5}.qmsckeditor.card .title{font-weight:700}.qmsckeditor.card .content{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.qmsckeditor.card .material-icons{font-size:20px}.qmsckeditor.tooltip-content.height{min-height:400px;max-height:472px;overflow:auto}.qmsckeditor.save__as__template.height{height:125px}.ck-content .page-break,.ck-content .ck-horizontal-line{width:100%}.ck-content hr{background:#ccc}.ck-font-size-dropdown .ck-dropdown__panel ul{max-height:320px;overflow-y:auto}.ck-font-size-dropdown .ck-dropdown__panel ul li .ck-fontsize-option .ck-button__label{line-height:50px}.qmsckeditor__template__container .mat-mdc-form-field{width:100%}.qmsckeditor__template__container textarea.mat-mdc-input-element{min-height:150px}.qmsckeditor__template__container .template-checkbox{padding-top:20px}.qmsckeditor__template__container .selected-image{display:flex;align-items:center;padding-bottom:10px}.qmsckeditor__template__container .selected-image .input-upload{height:60px}.qmsckeditor__template__container .form-content-height{min-height:350px;max-height:410px}.qmsckeditor__template__container .template-button-group{padding-top:10px;padding-right:.5rem;padding-left:.5rem}\n"], dependencies: [{ kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i11.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i11.MatLabel, selector: "mat-label" }, { kind: "directive", type: i11.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i11.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i11.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i8.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i13.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i14.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i8$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i16.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: QMSButtonIcon, selector: "button[qms-btn-icon]", inputs: ["disabled", "color", "active"], exportAs: ["qmsButtonIcon"] }, { kind: "directive", type: QMSInputClearDirective, selector: "[qms-input-clear]" }, { kind: "directive", type: QMSFormFieldDirective, selector: "[qms-form]" }, { kind: "directive", type: QMSFileUploadDirective, selector: "[qms-file-upload]", inputs: ["isLoading"] }, { kind: "directive", type: QMSFileUploadDisplayDirective, selector: "[qms-file-upload-display]", inputs: ["value"] }, { kind: "directive", type: QMSFileUploadSelectorDirective, selector: "[qms-file-upload-selector]", inputs: ["inputFile", "acceptExtensions", "maxSize"], outputs: ["inputFileChange", "onFileUploaded"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: QMSCKEditorTemplateComponent, selector: "app-qmsck-template", inputs: { ckEditor: "ckEditor" }, usesInheritance: true, ngImport: i0, template: "<div\n  id=\"qmsckeditor-template\"\n  class=\"qmsckeditor qmsckeditor__template__container\"\n>\n  <div id=\"qmsckeditor-template-header\">\n    <span\n      id=\"qmsckeditor-template-header_001\"\n      mat-icon-button\n      class=\"qmsckeditor button__close\"\n      (click)=\"onCloseDialog()\"\n    >\n      <mat-icon>close</mat-icon>\n    </span>\n    <div\n      id=\"qmsckeditor-template-header_002\"\n      mat-dialog-content\n      *ngIf=\"!isEdit\"\n    >\n      <h2 id=\"qmsckeditor-template_002_001\">\n        {{ LANG.QMSCKEDITOR.CREATE_NEW_TEMPLATE }}\n      </h2>\n    </div>\n    <div id=\"qmsckeditor-template-header_002\" mat-dialog-content *ngIf=\"isEdit\">\n      <h2 id=\"qmsckeditor-template_002_001\">\n        {{ LANG.QMSCKEDITOR.UPDATE_TEMPLATE }}\n      </h2>\n    </div>\n  </div>\n\n  <form [formGroup]=\"templateFormGroup\">\n    <div\n      id=\"qmsckeditor-template-content\"\n      class=\"qmsckeditor template-content height form-content-height\"\n    >\n      <div id=\"qmsckeditor-template-content_001\" class=\"col-12 mt-1 pl-2 pr-2 ps-2 pe-2\">\n        <mat-expansion-panel\n          id=\"qmsckeditor-template-panel\"\n          [expanded]=\"isExpanded\"\n          (opened)=\"isExpanded = true\"\n          (closed)=\"isExpanded = false\"\n        >\n          <div id=\"qmsckeditor-template-panel_001\">\n            <div id=\"qmsckeditor-template-panel_001_000\" class=\"mt-2\">\n              <mat-form-field appearance=\"fill\">\n                <mat-label>{{ LANG.QMSCKEDITOR.TEMPLATE }}</mat-label>\n                <mat-select\n                  formControlName=\"templateList\"\n                  [(ngModel)]=\"selectedId\"\n                  (ngModelChange)=\"onSelectChange()\"\n                  [disabled]=\"isEdit\"\n                >\n                  <mat-option\n                    *ngFor=\"let template of templates\"\n                    [value]=\"template.id\"\n                  >\n                    {{ template.title }}\n                  </mat-option>\n                </mat-select>\n              </mat-form-field>\n            </div>\n            <div id=\"qmsckeditor-template-panel_001_001\">\n              <mat-form-field class=\"col-12 pl-0 pr-0 ps-0 pe-0\" appearance=\"fill\">\n                <mat-label>{{ LANG.QMSCKEDITOR.TITLE }}</mat-label>\n                <input\n                  matInput\n                  [(ngModel)]=\"template.title\"\n                  formControlName=\"title\"\n                />\n                <mat-error\n                  *ngIf=\"templateFormGroup.get('title').hasError('required')\"\n                  class=\"mt5\"\n                >\n                </mat-error>\n              </mat-form-field>\n            </div>\n            <div id=\"qmsckeditor-template-panel_001_002\">\n              <mat-form-field class=\"col-12 pl-0 pr-0 ps-0 pe-0\" appearance=\"fill\">\n                <mat-label>{{ LANG.QMSCKEDITOR.DESCRIPTION }}</mat-label>\n                <textarea\n                  matInput\n                  [(ngModel)]=\"template.description\"\n                  formControlName=\"description\"\n                ></textarea>\n                <mat-error\n                  *ngIf=\"\n                    templateFormGroup.get('description').hasError('required')\n                  \"\n                  class=\"mt5\"\n                >\n                </mat-error>\n              </mat-form-field>\n            </div>\n            <div id=\"qmsckeditor-template-panel_001_003\" class=\"selected-image\">\n              <mat-form-field qms-form qms-file-upload appearance=\"fill\" class=\"example-width input-upload\">\n                <mat-icon matPrefix svgIcon=\"upload\"></mat-icon>\n                <input matInput placeholder=\"{{ LANG.QMSCKEDITOR.ADD_IMAGE }}\" formControlName=\"imageAcceptType\" [readOnly]=\"true\" qms-file-upload-display\n                  #fileDisplay value=\"{{qmsInputImageFile? qmsInputImageFile.fileName : ''}}\"\n                  [attr.disabled]=\"isLoadingImageFile ? 'disabled' : null\">\n                <input hidden type=\"file\" [(inputFile)]=\"qmsInputImageFile\" qms-file-upload-selector #fileSelector\n                  accept=\".pjp, .jpg, .pjpeg, .jpeg, .jfif, .png, .gif, .bmp, .webp, .tif, .tiff\"\n                  (change)=\"onChangeImage($event)\">\n              \n                <mat-progress-spinner matSuffix mode=\"indeterminate\" diameter='20' *ngIf=\"isLoadingImageFile\"></mat-progress-spinner>\n                <div matSuffix qms-input-clear *ngIf=\"qmsInputImageFile && qmsInputImageFile.fileName\">\n                  <button qms-btn-icon color=\"light\" (click)=\"clearQMSInputImageFile()\" [disabled]=\"isLoadingImageFile\">\n                    <mat-icon>close</mat-icon>\n                  </button>\n                </div>\n              </mat-form-field>\n            </div>\n\n            <div id=\"qmsckeditor-template-panel_001_004\" *ngIf=\"qmsInputImageFile\">\n              <mat-form-field class=\"col-12 pl-0 pr-0 ps-0 pe-0\" appearance=\"fill\">\n                <mat-label>{{ LANG.QMSCKEDITOR.IMAGE_INFO }}</mat-label>\n                <textarea matInput [(ngModel)]=\"imageInfo\" formControlName=\"imageInfo\"></textarea>\n              </mat-form-field>\n            </div>\n          </div>\n        </mat-expansion-panel>\n      </div>\n    </div>\n  </form>\n  <div id=\"qmsckeditor-template-panel_001_005\" class=\"qmsckeditor button__groups template-button-group row mr-0 ml-0 ms-0 me-0\">\n    <div class=\"col-6 pl-0 ps-0\" *ngIf=\"!isEdit\">\n      <button class=\"delete\" mat-flat-button (click)=\"deleteTemplate()\" [disabled]=\"selectedId === 0\">\n        {{ LANG.QMSCKEDITOR.DELETE }}\n      </button>\n    </div>\n    <div class=\"col-6 pr-0 pe-0\" *ngIf=\"!isEdit && selectedId === 0\">\n      <button class=\"save\" mat-flat-button (click)=\"saveTemplate()\" [disabled]=\"templateFormGroup.invalid\">\n        {{ LANG.QMSCKEDITOR.SAVE }}\n      </button>\n    </div>\n    <div class=\"col-6 pl-0 ps-0\" *ngIf=\"isEdit\">\n      <button class=\"cancel\" mat-flat-button (click)=\"cancelTemplate()\" [disabled]=\"selectedId === 0\">\n        {{ LANG.QMSCKEDITOR.CANCEL }}\n      </button>\n    </div>\n    <div class=\"col-6 pr-0 pe-0\" *ngIf=\"isEdit || selectedId !== 0\">\n      <button class=\"save\" mat-flat-button (click)=\"updateTemplate()\" [disabled]=\"templateFormGroup.invalid\">\n        {{ LANG.QMSCKEDITOR.UPDATE }}\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [".mt5{margin-top:5px!important}.mt10{margin-top:10px!important}.mt7{margin-top:7px!important}.mt15{margin-top:15px!important}.mt20{margin-top:20px!important}.mt30{margin-top:30px!important}.mt40{margin-top:40px!important}.ml2{margin-left:2px!important}.ml3{margin-left:3px!important}.ml5{margin-left:5px!important}.ml15{margin-left:15px!important}.ml10{margin-left:10px!important}.ml12{margin-left:12px!important}.ml16{margin-left:16px!important}.ml-auto{margin-left:auto!important}.ml-25{margin-left:-25px!important}.mr5{margin-right:5px!important}.mr12{margin-right:12px!important}.mr15{margin-right:15px!important}.mb5{margin-bottom:5px!important}.mb10{margin-bottom:10px!important}.mb15{margin-bottom:15px!important}.pt8{padding-top:8px!important}.pt10{padding-top:10px!important}.pt15{padding-top:15px!important}.pt16{padding-top:16px!important}.pl15{padding-left:15px!important}.pl0{padding-left:0!important}.pr0{padding-right:0!important}.pr15{padding-right:15px!important}.fs12{font-size:12px}.fs14{font-size:14px!important}.fs16{font-size:16px!important}.fs22{font-size:22px!important}.fw500{font-weight:500!important}.italic-text{font-style:italic}.display-flex{display:flex}.qmsckeditor{font-family:Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:400}.qmsckeditor h2{font-size:20px;font-weight:400}.qmsckeditor .mat-icon{color:#909497}.qmsckeditor__fullscreen{position:fixed;inset:0;background:#fff;overflow-y:auto;max-height:100vh;overflow-x:hidden}.qmsckeditor__cursor{cursor:pointer}.qmsckeditor__notallowed{cursor:not-allowed}.qmsckeditor.button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qmsckeditor.button__done{float:right;top:-24px;right:-24px;cursor:pointer;margin-right:20px}.qmsckeditor.button__done .mat-icon{color:#28a745;font-weight:700}.qmsckeditor.button__groups button{min-height:40px;width:100%;border-radius:4px;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px}.qmsckeditor.button__groups .save{background:#f8f9f9}.qmsckeditor.button__groups .save:hover{background:#e5e7e9}.qmsckeditor.button__groups .save:disabled{cursor:not-allowed}.qmsckeditor.button__groups .cancel{background:#f8f9f9}.qmsckeditor.button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.button__groups .cancel:disabled{cursor:not-allowed}.qmsckeditor.button__groups .delete{background:#f8f9f9}.qmsckeditor.button__groups .delete:hover{background:#e5e7e9}.qmsckeditor.button__groups .delete:disabled{cursor:not-allowed}.qmsckeditor.confirm__button__groups button{min-height:36px;border-radius:4px;width:auto;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px;padding-left:15px;padding-right:15px}.qmsckeditor.confirm__button__groups .confirm{background:#f8f9f9}.qmsckeditor.confirm__button__groups .confirm:hover{background:#e5e7e9}.qmsckeditor.confirm__button__groups .cancel{background:#f8f9f9}.qmsckeditor.confirm__button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.template-content.height{min-height:420px;max-height:520px;overflow:auto}.qmsckeditor.template-content.title{margin-left:-9px}.qmsckeditor.link__content.height{min-height:400px;max-height:520px}.qmsckeditor.card{margin-bottom:10px;min-height:60px;box-shadow:none;border:1px solid #e5e5e5}.qmsckeditor.card .title{font-weight:700}.qmsckeditor.card .content{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.qmsckeditor.card .material-icons{font-size:20px}.qmsckeditor.tooltip-content.height{min-height:400px;max-height:472px;overflow:auto}.qmsckeditor.save__as__template.height{height:125px}.ck-content .page-break,.ck-content .ck-horizontal-line{width:100%}.ck-content hr{background:#ccc}.ck-font-size-dropdown .ck-dropdown__panel ul{max-height:320px;overflow-y:auto}.ck-font-size-dropdown .ck-dropdown__panel ul li .ck-fontsize-option .ck-button__label{line-height:50px}.qmsckeditor__template__container .mat-mdc-form-field{width:100%}.qmsckeditor__template__container textarea.mat-mdc-input-element{min-height:150px}.qmsckeditor__template__container .template-checkbox{padding-top:20px}.qmsckeditor__template__container .selected-image{display:flex;align-items:center;padding-bottom:10px}.qmsckeditor__template__container .selected-image .input-upload{height:60px}.qmsckeditor__template__container .form-content-height{min-height:350px;max-height:410px}.qmsckeditor__template__container .template-button-group{padding-top:10px;padding-right:.5rem;padding-left:.5rem}\n"], dependencies: [{ kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i11.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i11.MatLabel, selector: "mat-label" }, { kind: "directive", type: i11.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i11.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i11.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i8.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i13.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i14.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i8$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i16.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: QMSButtonIcon, selector: "button[qms-btn-icon]", inputs: ["disabled", "color", "active"], exportAs: ["qmsButtonIcon"] }, { kind: "directive", type: QMSInputClearDirective, selector: "[qms-input-clear]" }, { kind: "directive", type: QMSFormFieldDirective, selector: "[qms-form]" }, { kind: "directive", type: QMSFileUploadDirective, selector: "[qms-file-upload]", inputs: ["isLoading"] }, { kind: "directive", type: QMSFileUploadDisplayDirective, selector: "[qms-file-upload-display]", inputs: ["value"] }, { kind: "directive", type: QMSFileUploadSelectorDirective, selector: "[qms-file-upload-selector]", inputs: ["inputFile", "acceptExtensions", "maxSize"], outputs: ["inputFileChange", "onFileUploaded"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: QMSCKEditorTemplateComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-qmsck-template', template: "<div\n  id=\"qmsckeditor-template\"\n  class=\"qmsckeditor qmsckeditor__template__container\"\n>\n  <div id=\"qmsckeditor-template-header\">\n    <span\n      id=\"qmsckeditor-template-header_001\"\n      mat-icon-button\n      class=\"qmsckeditor button__close\"\n      (click)=\"onCloseDialog()\"\n    >\n      <mat-icon>close</mat-icon>\n    </span>\n    <div\n      id=\"qmsckeditor-template-header_002\"\n      mat-dialog-content\n      *ngIf=\"!isEdit\"\n    >\n      <h2 id=\"qmsckeditor-template_002_001\">\n        {{ LANG.QMSCKEDITOR.CREATE_NEW_TEMPLATE }}\n      </h2>\n    </div>\n    <div id=\"qmsckeditor-template-header_002\" mat-dialog-content *ngIf=\"isEdit\">\n      <h2 id=\"qmsckeditor-template_002_001\">\n        {{ LANG.QMSCKEDITOR.UPDATE_TEMPLATE }}\n      </h2>\n    </div>\n  </div>\n\n  <form [formGroup]=\"templateFormGroup\">\n    <div\n      id=\"qmsckeditor-template-content\"\n      class=\"qmsckeditor template-content height form-content-height\"\n    >\n      <div id=\"qmsckeditor-template-content_001\" class=\"col-12 mt-1 pl-2 pr-2 ps-2 pe-2\">\n        <mat-expansion-panel\n          id=\"qmsckeditor-template-panel\"\n          [expanded]=\"isExpanded\"\n          (opened)=\"isExpanded = true\"\n          (closed)=\"isExpanded = false\"\n        >\n          <div id=\"qmsckeditor-template-panel_001\">\n            <div id=\"qmsckeditor-template-panel_001_000\" class=\"mt-2\">\n              <mat-form-field appearance=\"fill\">\n                <mat-label>{{ LANG.QMSCKEDITOR.TEMPLATE }}</mat-label>\n                <mat-select\n                  formControlName=\"templateList\"\n                  [(ngModel)]=\"selectedId\"\n                  (ngModelChange)=\"onSelectChange()\"\n                  [disabled]=\"isEdit\"\n                >\n                  <mat-option\n                    *ngFor=\"let template of templates\"\n                    [value]=\"template.id\"\n                  >\n                    {{ template.title }}\n                  </mat-option>\n                </mat-select>\n              </mat-form-field>\n            </div>\n            <div id=\"qmsckeditor-template-panel_001_001\">\n              <mat-form-field class=\"col-12 pl-0 pr-0 ps-0 pe-0\" appearance=\"fill\">\n                <mat-label>{{ LANG.QMSCKEDITOR.TITLE }}</mat-label>\n                <input\n                  matInput\n                  [(ngModel)]=\"template.title\"\n                  formControlName=\"title\"\n                />\n                <mat-error\n                  *ngIf=\"templateFormGroup.get('title').hasError('required')\"\n                  class=\"mt5\"\n                >\n                </mat-error>\n              </mat-form-field>\n            </div>\n            <div id=\"qmsckeditor-template-panel_001_002\">\n              <mat-form-field class=\"col-12 pl-0 pr-0 ps-0 pe-0\" appearance=\"fill\">\n                <mat-label>{{ LANG.QMSCKEDITOR.DESCRIPTION }}</mat-label>\n                <textarea\n                  matInput\n                  [(ngModel)]=\"template.description\"\n                  formControlName=\"description\"\n                ></textarea>\n                <mat-error\n                  *ngIf=\"\n                    templateFormGroup.get('description').hasError('required')\n                  \"\n                  class=\"mt5\"\n                >\n                </mat-error>\n              </mat-form-field>\n            </div>\n            <div id=\"qmsckeditor-template-panel_001_003\" class=\"selected-image\">\n              <mat-form-field qms-form qms-file-upload appearance=\"fill\" class=\"example-width input-upload\">\n                <mat-icon matPrefix svgIcon=\"upload\"></mat-icon>\n                <input matInput placeholder=\"{{ LANG.QMSCKEDITOR.ADD_IMAGE }}\" formControlName=\"imageAcceptType\" [readOnly]=\"true\" qms-file-upload-display\n                  #fileDisplay value=\"{{qmsInputImageFile? qmsInputImageFile.fileName : ''}}\"\n                  [attr.disabled]=\"isLoadingImageFile ? 'disabled' : null\">\n                <input hidden type=\"file\" [(inputFile)]=\"qmsInputImageFile\" qms-file-upload-selector #fileSelector\n                  accept=\".pjp, .jpg, .pjpeg, .jpeg, .jfif, .png, .gif, .bmp, .webp, .tif, .tiff\"\n                  (change)=\"onChangeImage($event)\">\n              \n                <mat-progress-spinner matSuffix mode=\"indeterminate\" diameter='20' *ngIf=\"isLoadingImageFile\"></mat-progress-spinner>\n                <div matSuffix qms-input-clear *ngIf=\"qmsInputImageFile && qmsInputImageFile.fileName\">\n                  <button qms-btn-icon color=\"light\" (click)=\"clearQMSInputImageFile()\" [disabled]=\"isLoadingImageFile\">\n                    <mat-icon>close</mat-icon>\n                  </button>\n                </div>\n              </mat-form-field>\n            </div>\n\n            <div id=\"qmsckeditor-template-panel_001_004\" *ngIf=\"qmsInputImageFile\">\n              <mat-form-field class=\"col-12 pl-0 pr-0 ps-0 pe-0\" appearance=\"fill\">\n                <mat-label>{{ LANG.QMSCKEDITOR.IMAGE_INFO }}</mat-label>\n                <textarea matInput [(ngModel)]=\"imageInfo\" formControlName=\"imageInfo\"></textarea>\n              </mat-form-field>\n            </div>\n          </div>\n        </mat-expansion-panel>\n      </div>\n    </div>\n  </form>\n  <div id=\"qmsckeditor-template-panel_001_005\" class=\"qmsckeditor button__groups template-button-group row mr-0 ml-0 ms-0 me-0\">\n    <div class=\"col-6 pl-0 ps-0\" *ngIf=\"!isEdit\">\n      <button class=\"delete\" mat-flat-button (click)=\"deleteTemplate()\" [disabled]=\"selectedId === 0\">\n        {{ LANG.QMSCKEDITOR.DELETE }}\n      </button>\n    </div>\n    <div class=\"col-6 pr-0 pe-0\" *ngIf=\"!isEdit && selectedId === 0\">\n      <button class=\"save\" mat-flat-button (click)=\"saveTemplate()\" [disabled]=\"templateFormGroup.invalid\">\n        {{ LANG.QMSCKEDITOR.SAVE }}\n      </button>\n    </div>\n    <div class=\"col-6 pl-0 ps-0\" *ngIf=\"isEdit\">\n      <button class=\"cancel\" mat-flat-button (click)=\"cancelTemplate()\" [disabled]=\"selectedId === 0\">\n        {{ LANG.QMSCKEDITOR.CANCEL }}\n      </button>\n    </div>\n    <div class=\"col-6 pr-0 pe-0\" *ngIf=\"isEdit || selectedId !== 0\">\n      <button class=\"save\" mat-flat-button (click)=\"updateTemplate()\" [disabled]=\"templateFormGroup.invalid\">\n        {{ LANG.QMSCKEDITOR.UPDATE }}\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [".mt5{margin-top:5px!important}.mt10{margin-top:10px!important}.mt7{margin-top:7px!important}.mt15{margin-top:15px!important}.mt20{margin-top:20px!important}.mt30{margin-top:30px!important}.mt40{margin-top:40px!important}.ml2{margin-left:2px!important}.ml3{margin-left:3px!important}.ml5{margin-left:5px!important}.ml15{margin-left:15px!important}.ml10{margin-left:10px!important}.ml12{margin-left:12px!important}.ml16{margin-left:16px!important}.ml-auto{margin-left:auto!important}.ml-25{margin-left:-25px!important}.mr5{margin-right:5px!important}.mr12{margin-right:12px!important}.mr15{margin-right:15px!important}.mb5{margin-bottom:5px!important}.mb10{margin-bottom:10px!important}.mb15{margin-bottom:15px!important}.pt8{padding-top:8px!important}.pt10{padding-top:10px!important}.pt15{padding-top:15px!important}.pt16{padding-top:16px!important}.pl15{padding-left:15px!important}.pl0{padding-left:0!important}.pr0{padding-right:0!important}.pr15{padding-right:15px!important}.fs12{font-size:12px}.fs14{font-size:14px!important}.fs16{font-size:16px!important}.fs22{font-size:22px!important}.fw500{font-weight:500!important}.italic-text{font-style:italic}.display-flex{display:flex}.qmsckeditor{font-family:Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:400}.qmsckeditor h2{font-size:20px;font-weight:400}.qmsckeditor .mat-mdc-dialog-content{padding:0}.qmsckeditor .mat-icon{color:#909497}.qmsckeditor__fullscreen{position:fixed;inset:0;background:#fff;overflow-y:auto;max-height:100vh;overflow-x:hidden}.qmsckeditor__cursor{cursor:pointer}.qmsckeditor__notallowed{cursor:not-allowed}.qmsckeditor.button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qmsckeditor.button__done{float:right;top:-24px;right:-24px;cursor:pointer;margin-right:20px}.qmsckeditor.button__done .mat-icon{color:#28a745;font-weight:700}.qmsckeditor.button__groups button{min-height:40px;width:100%;border-radius:4px;border:1px solid #C5C5C5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px}.qmsckeditor.button__groups .save{background:#f8f9f9}.qmsckeditor.button__groups .save:hover{background:#e5e7e9}.qmsckeditor.button__groups .save:disabled{cursor:not-allowed}.qmsckeditor.button__groups .cancel{background:#f8f9f9}.qmsckeditor.button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.button__groups .cancel:disabled{cursor:not-allowed}.qmsckeditor.button__groups .delete{background:#f8f9f9}.qmsckeditor.button__groups .delete:hover{background:#e5e7e9}.qmsckeditor.button__groups .delete:disabled{cursor:not-allowed}.qmsckeditor.confirm__button__groups button{min-height:36px;border-radius:4px;width:auto;border:1px solid #C5C5C5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px;padding-left:15px;padding-right:15px}.qmsckeditor.confirm__button__groups .confirm{background:#f8f9f9}.qmsckeditor.confirm__button__groups .confirm:hover{background:#e5e7e9}.qmsckeditor.confirm__button__groups .cancel{background:#f8f9f9}.qmsckeditor.confirm__button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.template-content.height{min-height:420px;max-height:520px;overflow:auto}.qmsckeditor.template-content.title{margin-left:-9px}.qmsckeditor.link__content.height{min-height:400px;max-height:520px}.qmsckeditor.card{margin-bottom:10px;min-height:60px;box-shadow:none;border:1px solid #e5e5e5}.qmsckeditor.card .title{font-weight:700}.qmsckeditor.card .content{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.qmsckeditor.card .material-icons{font-size:20px}.qmsckeditor.tooltip-content.height{min-height:400px;max-height:472px;overflow:auto}.qmsckeditor.save__as__template.height{height:125px}.ck-content .page-break,.ck-content .ck-horizontal-line{width:100%}.ck-content hr{background:#ccc}.ck-font-size-dropdown .ck-dropdown__panel ul{max-height:320px;overflow-y:auto}.ck-font-size-dropdown .ck-dropdown__panel ul li .ck-fontsize-option .ck-button__label{line-height:50px}.qmsckeditor__template__container .mat-mdc-form-field{width:100%}.qmsckeditor__template__container textarea.mat-mdc-input-element{min-height:150px}.qmsckeditor__template__container .template-checkbox{padding-top:20px}.qmsckeditor__template__container .selected-image{display:flex;align-items:center;padding-bottom:10px}.qmsckeditor__template__container .selected-image .input-upload{height:60px}.qmsckeditor__template__container .form-content-height{min-height:350px;max-height:410px}.qmsckeditor__template__container .template-button-group{padding-top:10px;padding-right:.5rem;padding-left:.5rem}\n"] }]
+            args: [{ selector: 'app-qmsck-template', template: "<div\n  id=\"qmsckeditor-template\"\n  class=\"qmsckeditor qmsckeditor__template__container\"\n>\n  <div id=\"qmsckeditor-template-header\">\n    <span\n      id=\"qmsckeditor-template-header_001\"\n      mat-icon-button\n      class=\"qmsckeditor button__close\"\n      (click)=\"onCloseDialog()\"\n    >\n      <mat-icon>close</mat-icon>\n    </span>\n    <div\n      id=\"qmsckeditor-template-header_002\"\n      mat-dialog-content\n      *ngIf=\"!isEdit\"\n    >\n      <h2 id=\"qmsckeditor-template_002_001\">\n        {{ LANG.QMSCKEDITOR.CREATE_NEW_TEMPLATE }}\n      </h2>\n    </div>\n    <div id=\"qmsckeditor-template-header_002\" mat-dialog-content *ngIf=\"isEdit\">\n      <h2 id=\"qmsckeditor-template_002_001\">\n        {{ LANG.QMSCKEDITOR.UPDATE_TEMPLATE }}\n      </h2>\n    </div>\n  </div>\n\n  <form [formGroup]=\"templateFormGroup\">\n    <div\n      id=\"qmsckeditor-template-content\"\n      class=\"qmsckeditor template-content height form-content-height\"\n    >\n      <div id=\"qmsckeditor-template-content_001\" class=\"col-12 mt-1 pl-2 pr-2 ps-2 pe-2\">\n        <mat-expansion-panel\n          id=\"qmsckeditor-template-panel\"\n          [expanded]=\"isExpanded\"\n          (opened)=\"isExpanded = true\"\n          (closed)=\"isExpanded = false\"\n        >\n          <div id=\"qmsckeditor-template-panel_001\">\n            <div id=\"qmsckeditor-template-panel_001_000\" class=\"mt-2\">\n              <mat-form-field appearance=\"fill\">\n                <mat-label>{{ LANG.QMSCKEDITOR.TEMPLATE }}</mat-label>\n                <mat-select\n                  formControlName=\"templateList\"\n                  [(ngModel)]=\"selectedId\"\n                  (ngModelChange)=\"onSelectChange()\"\n                  [disabled]=\"isEdit\"\n                >\n                  <mat-option\n                    *ngFor=\"let template of templates\"\n                    [value]=\"template.id\"\n                  >\n                    {{ template.title }}\n                  </mat-option>\n                </mat-select>\n              </mat-form-field>\n            </div>\n            <div id=\"qmsckeditor-template-panel_001_001\">\n              <mat-form-field class=\"col-12 pl-0 pr-0 ps-0 pe-0\" appearance=\"fill\">\n                <mat-label>{{ LANG.QMSCKEDITOR.TITLE }}</mat-label>\n                <input\n                  matInput\n                  [(ngModel)]=\"template.title\"\n                  formControlName=\"title\"\n                />\n                <mat-error\n                  *ngIf=\"templateFormGroup.get('title').hasError('required')\"\n                  class=\"mt5\"\n                >\n                </mat-error>\n              </mat-form-field>\n            </div>\n            <div id=\"qmsckeditor-template-panel_001_002\">\n              <mat-form-field class=\"col-12 pl-0 pr-0 ps-0 pe-0\" appearance=\"fill\">\n                <mat-label>{{ LANG.QMSCKEDITOR.DESCRIPTION }}</mat-label>\n                <textarea\n                  matInput\n                  [(ngModel)]=\"template.description\"\n                  formControlName=\"description\"\n                ></textarea>\n                <mat-error\n                  *ngIf=\"\n                    templateFormGroup.get('description').hasError('required')\n                  \"\n                  class=\"mt5\"\n                >\n                </mat-error>\n              </mat-form-field>\n            </div>\n            <div id=\"qmsckeditor-template-panel_001_003\" class=\"selected-image\">\n              <mat-form-field qms-form qms-file-upload appearance=\"fill\" class=\"example-width input-upload\">\n                <mat-icon matPrefix svgIcon=\"upload\"></mat-icon>\n                <input matInput placeholder=\"{{ LANG.QMSCKEDITOR.ADD_IMAGE }}\" formControlName=\"imageAcceptType\" [readOnly]=\"true\" qms-file-upload-display\n                  #fileDisplay value=\"{{qmsInputImageFile? qmsInputImageFile.fileName : ''}}\"\n                  [attr.disabled]=\"isLoadingImageFile ? 'disabled' : null\">\n                <input hidden type=\"file\" [(inputFile)]=\"qmsInputImageFile\" qms-file-upload-selector #fileSelector\n                  accept=\".pjp, .jpg, .pjpeg, .jpeg, .jfif, .png, .gif, .bmp, .webp, .tif, .tiff\"\n                  (change)=\"onChangeImage($event)\">\n              \n                <mat-progress-spinner matSuffix mode=\"indeterminate\" diameter='20' *ngIf=\"isLoadingImageFile\"></mat-progress-spinner>\n                <div matSuffix qms-input-clear *ngIf=\"qmsInputImageFile && qmsInputImageFile.fileName\">\n                  <button qms-btn-icon color=\"light\" (click)=\"clearQMSInputImageFile()\" [disabled]=\"isLoadingImageFile\">\n                    <mat-icon>close</mat-icon>\n                  </button>\n                </div>\n              </mat-form-field>\n            </div>\n\n            <div id=\"qmsckeditor-template-panel_001_004\" *ngIf=\"qmsInputImageFile\">\n              <mat-form-field class=\"col-12 pl-0 pr-0 ps-0 pe-0\" appearance=\"fill\">\n                <mat-label>{{ LANG.QMSCKEDITOR.IMAGE_INFO }}</mat-label>\n                <textarea matInput [(ngModel)]=\"imageInfo\" formControlName=\"imageInfo\"></textarea>\n              </mat-form-field>\n            </div>\n          </div>\n        </mat-expansion-panel>\n      </div>\n    </div>\n  </form>\n  <div id=\"qmsckeditor-template-panel_001_005\" class=\"qmsckeditor button__groups template-button-group row mr-0 ml-0 ms-0 me-0\">\n    <div class=\"col-6 pl-0 ps-0\" *ngIf=\"!isEdit\">\n      <button class=\"delete\" mat-flat-button (click)=\"deleteTemplate()\" [disabled]=\"selectedId === 0\">\n        {{ LANG.QMSCKEDITOR.DELETE }}\n      </button>\n    </div>\n    <div class=\"col-6 pr-0 pe-0\" *ngIf=\"!isEdit && selectedId === 0\">\n      <button class=\"save\" mat-flat-button (click)=\"saveTemplate()\" [disabled]=\"templateFormGroup.invalid\">\n        {{ LANG.QMSCKEDITOR.SAVE }}\n      </button>\n    </div>\n    <div class=\"col-6 pl-0 ps-0\" *ngIf=\"isEdit\">\n      <button class=\"cancel\" mat-flat-button (click)=\"cancelTemplate()\" [disabled]=\"selectedId === 0\">\n        {{ LANG.QMSCKEDITOR.CANCEL }}\n      </button>\n    </div>\n    <div class=\"col-6 pr-0 pe-0\" *ngIf=\"isEdit || selectedId !== 0\">\n      <button class=\"save\" mat-flat-button (click)=\"updateTemplate()\" [disabled]=\"templateFormGroup.invalid\">\n        {{ LANG.QMSCKEDITOR.UPDATE }}\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [".mt5{margin-top:5px!important}.mt10{margin-top:10px!important}.mt7{margin-top:7px!important}.mt15{margin-top:15px!important}.mt20{margin-top:20px!important}.mt30{margin-top:30px!important}.mt40{margin-top:40px!important}.ml2{margin-left:2px!important}.ml3{margin-left:3px!important}.ml5{margin-left:5px!important}.ml15{margin-left:15px!important}.ml10{margin-left:10px!important}.ml12{margin-left:12px!important}.ml16{margin-left:16px!important}.ml-auto{margin-left:auto!important}.ml-25{margin-left:-25px!important}.mr5{margin-right:5px!important}.mr12{margin-right:12px!important}.mr15{margin-right:15px!important}.mb5{margin-bottom:5px!important}.mb10{margin-bottom:10px!important}.mb15{margin-bottom:15px!important}.pt8{padding-top:8px!important}.pt10{padding-top:10px!important}.pt15{padding-top:15px!important}.pt16{padding-top:16px!important}.pl15{padding-left:15px!important}.pl0{padding-left:0!important}.pr0{padding-right:0!important}.pr15{padding-right:15px!important}.fs12{font-size:12px}.fs14{font-size:14px!important}.fs16{font-size:16px!important}.fs22{font-size:22px!important}.fw500{font-weight:500!important}.italic-text{font-style:italic}.display-flex{display:flex}.qmsckeditor{font-family:Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:400}.qmsckeditor h2{font-size:20px;font-weight:400}.qmsckeditor .mat-icon{color:#909497}.qmsckeditor__fullscreen{position:fixed;inset:0;background:#fff;overflow-y:auto;max-height:100vh;overflow-x:hidden}.qmsckeditor__cursor{cursor:pointer}.qmsckeditor__notallowed{cursor:not-allowed}.qmsckeditor.button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qmsckeditor.button__done{float:right;top:-24px;right:-24px;cursor:pointer;margin-right:20px}.qmsckeditor.button__done .mat-icon{color:#28a745;font-weight:700}.qmsckeditor.button__groups button{min-height:40px;width:100%;border-radius:4px;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px}.qmsckeditor.button__groups .save{background:#f8f9f9}.qmsckeditor.button__groups .save:hover{background:#e5e7e9}.qmsckeditor.button__groups .save:disabled{cursor:not-allowed}.qmsckeditor.button__groups .cancel{background:#f8f9f9}.qmsckeditor.button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.button__groups .cancel:disabled{cursor:not-allowed}.qmsckeditor.button__groups .delete{background:#f8f9f9}.qmsckeditor.button__groups .delete:hover{background:#e5e7e9}.qmsckeditor.button__groups .delete:disabled{cursor:not-allowed}.qmsckeditor.confirm__button__groups button{min-height:36px;border-radius:4px;width:auto;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px;padding-left:15px;padding-right:15px}.qmsckeditor.confirm__button__groups .confirm{background:#f8f9f9}.qmsckeditor.confirm__button__groups .confirm:hover{background:#e5e7e9}.qmsckeditor.confirm__button__groups .cancel{background:#f8f9f9}.qmsckeditor.confirm__button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.template-content.height{min-height:420px;max-height:520px;overflow:auto}.qmsckeditor.template-content.title{margin-left:-9px}.qmsckeditor.link__content.height{min-height:400px;max-height:520px}.qmsckeditor.card{margin-bottom:10px;min-height:60px;box-shadow:none;border:1px solid #e5e5e5}.qmsckeditor.card .title{font-weight:700}.qmsckeditor.card .content{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.qmsckeditor.card .material-icons{font-size:20px}.qmsckeditor.tooltip-content.height{min-height:400px;max-height:472px;overflow:auto}.qmsckeditor.save__as__template.height{height:125px}.ck-content .page-break,.ck-content .ck-horizontal-line{width:100%}.ck-content hr{background:#ccc}.ck-font-size-dropdown .ck-dropdown__panel ul{max-height:320px;overflow-y:auto}.ck-font-size-dropdown .ck-dropdown__panel ul li .ck-fontsize-option .ck-button__label{line-height:50px}.qmsckeditor__template__container .mat-mdc-form-field{width:100%}.qmsckeditor__template__container textarea.mat-mdc-input-element{min-height:150px}.qmsckeditor__template__container .template-checkbox{padding-top:20px}.qmsckeditor__template__container .selected-image{display:flex;align-items:center;padding-bottom:10px}.qmsckeditor__template__container .selected-image .input-upload{height:60px}.qmsckeditor__template__container .form-content-height{min-height:350px;max-height:410px}.qmsckeditor__template__container .template-button-group{padding-top:10px;padding-right:.5rem;padding-left:.5rem}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$2.MatDialog }, { type: TranslateLibraryService }, { type: QMSCKEditorTemplateService }, { type: QMSCKEditorCommonService }, { type: i1$2.MatDialogRef }, { type: i4.MatIconRegistry }, { type: i1$3.DomSanitizer }, { type: QMSCKEditorUploadService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -13038,11 +13038,11 @@ class QMSCKEditorLoadTemplateComponent extends QMSCKEditorBaseComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: QMSCKEditorLoadTemplateComponent, deps: [{ token: i1$2.MatDialog }, { token: TranslateLibraryService }, { token: QMSCKEditorTemplateService }, { token: QMSCKEditorCommonService }, { token: i1$2.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: QMSCKEditorLoadTemplateComponent, selector: "app-qmsck-load-template", inputs: { ckEditor: "ckEditor" }, usesInheritance: true, ngImport: i0, template: "<div id=\"qmsckeditor-load-template\" class=\"qmsckeditor qmsckeditor__loadtemplate__container\">\n  <div id=\"qmsckeditor-load-template-header\">\n    <span id=\"qmsckeditor-load-template-header_001\" mat-icon-button class=\"qmsckeditor button__close\"\n      (click)=\"onCloseDialog()\">\n      <mat-icon>close</mat-icon>\n    </span>\n    <div id=\"qmsckeditor-load-template-header_002\" mat-dialog-content>\n      <h2 id=\"qmsckeditor-template_002_001\">\n        {{ LANG.QMSCKEDITOR.CONTENT_TEMPLATE }}\n      </h2>\n    </div>\n  </div>\n  <div id=\"load-template_002\">\n    <div id=\"load-template_002_001\" class=\"title col-12 mt-3\">\n      <h2 id=\"load-template_002_001_001\">\n        {{ LANG.QMSCKEDITOR.CHOOSE_TEMPLATE }}\n      </h2>\n    </div>\n  </div>\n  <div id=\"qmsckeditor-load-template-content\" class=\"qmsckeditor template-content height\">\n    <div id=\"qmsckeditor-load-template-content_003\" class=\"mt-1 pl-2 pr-2 ps-2 pe-2\">\n      <mat-card appearance=\"outlined\" class=\"qmsckeditor card col-12\" *ngFor=\"let template of templates\">\n        <div class=\"row\">\n          <div class=\"qmsckeditor__cursor col-2\"> \n            <img class=\"image-template\" src=\"{{template.imageUrl}}\">\n          </div>\n          <div class=\"qmsckeditor__cursor col-8\" (click)=\"onSelectTemplate(template.id)\">\n            <div class=\"col-12 pl-0 ps-0 title\">\n              <span>{{ template.title }}</span>\n            </div>\n            <div class=\"col-12 pl-0 ps-0 content\">\n              <span>{{ template.description }}</span>\n            </div>\n          </div>\n          <div *ngIf=\"enableEditTemplate\" class=\"qmsckeditor__cursor col-1\">\n            <mat-icon (click)=\"onEditTemplate(template.id)\">edit</mat-icon>\n          </div>\n          <div *ngIf=\"enableEditTemplate\" class=\"qmsckeditor__cursor col-1\">\n            <mat-icon (click)=\"onDeleteTemplate(template.id)\">delete</mat-icon>\n          </div>\n        </div>\n      </mat-card>\n    </div>\n  </div>\n  <div class=\"option\">\n    <mat-checkbox qms-group-options [(ngModel)]=\"isReplace\" color=\"primary\">\n      {{ LANG.QMSCKEDITOR.REPLACE_CONTENT }}\n    </mat-checkbox>\n  </div>\n</div>", styles: [".mt5{margin-top:5px!important}.mt10{margin-top:10px!important}.mt7{margin-top:7px!important}.mt15{margin-top:15px!important}.mt20{margin-top:20px!important}.mt30{margin-top:30px!important}.mt40{margin-top:40px!important}.ml2{margin-left:2px!important}.ml3{margin-left:3px!important}.ml5{margin-left:5px!important}.ml15{margin-left:15px!important}.ml10{margin-left:10px!important}.ml12{margin-left:12px!important}.ml16{margin-left:16px!important}.ml-auto{margin-left:auto!important}.ml-25{margin-left:-25px!important}.mr5{margin-right:5px!important}.mr12{margin-right:12px!important}.mr15{margin-right:15px!important}.mb5{margin-bottom:5px!important}.mb10{margin-bottom:10px!important}.mb15{margin-bottom:15px!important}.pt8{padding-top:8px!important}.pt10{padding-top:10px!important}.pt15{padding-top:15px!important}.pt16{padding-top:16px!important}.pl15{padding-left:15px!important}.pl0{padding-left:0!important}.pr0{padding-right:0!important}.pr15{padding-right:15px!important}.fs12{font-size:12px}.fs14{font-size:14px!important}.fs16{font-size:16px!important}.fs22{font-size:22px!important}.fw500{font-weight:500!important}.italic-text{font-style:italic}.display-flex{display:flex}.qmsckeditor{font-family:Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:400}.qmsckeditor h2{font-size:20px;font-weight:400}.qmsckeditor .mat-mdc-dialog-content{padding:0}.qmsckeditor .mat-icon{color:#909497}.qmsckeditor__fullscreen{position:fixed;inset:0;background:#fff;overflow-y:auto;max-height:100vh;overflow-x:hidden}.qmsckeditor__cursor{cursor:pointer}.qmsckeditor__notallowed{cursor:not-allowed}.qmsckeditor.button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qmsckeditor.button__done{float:right;top:-24px;right:-24px;cursor:pointer;margin-right:20px}.qmsckeditor.button__done .mat-icon{color:#28a745;font-weight:700}.qmsckeditor.button__groups button{min-height:40px;width:100%;border-radius:4px;border:1px solid #C5C5C5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px}.qmsckeditor.button__groups .save{background:#f8f9f9}.qmsckeditor.button__groups .save:hover{background:#e5e7e9}.qmsckeditor.button__groups .save:disabled{cursor:not-allowed}.qmsckeditor.button__groups .cancel{background:#f8f9f9}.qmsckeditor.button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.button__groups .cancel:disabled{cursor:not-allowed}.qmsckeditor.button__groups .delete{background:#f8f9f9}.qmsckeditor.button__groups .delete:hover{background:#e5e7e9}.qmsckeditor.button__groups .delete:disabled{cursor:not-allowed}.qmsckeditor.confirm__button__groups button{min-height:36px;border-radius:4px;width:auto;border:1px solid #C5C5C5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px;padding-left:15px;padding-right:15px}.qmsckeditor.confirm__button__groups .confirm{background:#f8f9f9}.qmsckeditor.confirm__button__groups .confirm:hover{background:#e5e7e9}.qmsckeditor.confirm__button__groups .cancel{background:#f8f9f9}.qmsckeditor.confirm__button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.template-content.height{min-height:420px;max-height:520px;overflow:auto}.qmsckeditor.template-content.title{margin-left:-9px}.qmsckeditor.link__content.height{min-height:400px;max-height:520px}.qmsckeditor.card{margin-bottom:10px;min-height:60px;box-shadow:none;border:1px solid #e5e5e5}.qmsckeditor.card .title{font-weight:700}.qmsckeditor.card .content{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.qmsckeditor.card .material-icons{font-size:20px}.qmsckeditor.tooltip-content.height{min-height:400px;max-height:472px;overflow:auto}.qmsckeditor.save__as__template.height{height:125px}.ck-content .page-break,.ck-content .ck-horizontal-line{width:100%}.ck-content hr{background:#ccc}.ck-font-size-dropdown .ck-dropdown__panel ul{max-height:320px;overflow-y:auto}.ck-font-size-dropdown .ck-dropdown__panel ul li .ck-fontsize-option .ck-button__label{line-height:50px}.qmsckeditor__loadtemplate__container .template-checkbox{padding-top:20px}.qmsckeditor__loadtemplate__container .option{padding-left:15px}.qmsckeditor__loadtemplate__container .image-template{width:100%;height:100%}\n"], dependencies: [{ kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i7$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: QMSGroupOptionDirective, selector: "[qms-group-options]", inputs: ["label"] }, { kind: "directive", type: AutocompleteOffDirective, selector: "[qms-group-options]" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: QMSCKEditorLoadTemplateComponent, selector: "app-qmsck-load-template", inputs: { ckEditor: "ckEditor" }, usesInheritance: true, ngImport: i0, template: "<div id=\"qmsckeditor-load-template\" class=\"qmsckeditor qmsckeditor__loadtemplate__container\">\n  <div id=\"qmsckeditor-load-template-header\">\n    <span id=\"qmsckeditor-load-template-header_001\" mat-icon-button class=\"qmsckeditor button__close\"\n      (click)=\"onCloseDialog()\">\n      <mat-icon>close</mat-icon>\n    </span>\n    <div id=\"qmsckeditor-load-template-header_002\" mat-dialog-content>\n      <h2 id=\"qmsckeditor-template_002_001\">\n        {{ LANG.QMSCKEDITOR.CONTENT_TEMPLATE }}\n      </h2>\n    </div>\n  </div>\n  <div id=\"load-template_002\">\n    <div id=\"load-template_002_001\" class=\"title col-12 mt-3\">\n      <h2 id=\"load-template_002_001_001\">\n        {{ LANG.QMSCKEDITOR.CHOOSE_TEMPLATE }}\n      </h2>\n    </div>\n  </div>\n  <div id=\"qmsckeditor-load-template-content\" class=\"qmsckeditor template-content height\">\n    <div id=\"qmsckeditor-load-template-content_003\" class=\"mt-1 pl-2 pr-2 ps-2 pe-2\">\n      <mat-card appearance=\"outlined\" class=\"qmsckeditor card col-12\" *ngFor=\"let template of templates\">\n        <div class=\"row\">\n          <div class=\"qmsckeditor__cursor col-2\"> \n            <img class=\"image-template\" src=\"{{template.imageUrl}}\">\n          </div>\n          <div class=\"qmsckeditor__cursor col-8\" (click)=\"onSelectTemplate(template.id)\">\n            <div class=\"col-12 pl-0 ps-0 title\">\n              <span>{{ template.title }}</span>\n            </div>\n            <div class=\"col-12 pl-0 ps-0 content\">\n              <span>{{ template.description }}</span>\n            </div>\n          </div>\n          <div *ngIf=\"enableEditTemplate\" class=\"qmsckeditor__cursor col-1\">\n            <mat-icon (click)=\"onEditTemplate(template.id)\">edit</mat-icon>\n          </div>\n          <div *ngIf=\"enableEditTemplate\" class=\"qmsckeditor__cursor col-1\">\n            <mat-icon (click)=\"onDeleteTemplate(template.id)\">delete</mat-icon>\n          </div>\n        </div>\n      </mat-card>\n    </div>\n  </div>\n  <div class=\"option\">\n    <mat-checkbox qms-group-options [(ngModel)]=\"isReplace\" color=\"primary\">\n      {{ LANG.QMSCKEDITOR.REPLACE_CONTENT }}\n    </mat-checkbox>\n  </div>\n</div>", styles: [".mt5{margin-top:5px!important}.mt10{margin-top:10px!important}.mt7{margin-top:7px!important}.mt15{margin-top:15px!important}.mt20{margin-top:20px!important}.mt30{margin-top:30px!important}.mt40{margin-top:40px!important}.ml2{margin-left:2px!important}.ml3{margin-left:3px!important}.ml5{margin-left:5px!important}.ml15{margin-left:15px!important}.ml10{margin-left:10px!important}.ml12{margin-left:12px!important}.ml16{margin-left:16px!important}.ml-auto{margin-left:auto!important}.ml-25{margin-left:-25px!important}.mr5{margin-right:5px!important}.mr12{margin-right:12px!important}.mr15{margin-right:15px!important}.mb5{margin-bottom:5px!important}.mb10{margin-bottom:10px!important}.mb15{margin-bottom:15px!important}.pt8{padding-top:8px!important}.pt10{padding-top:10px!important}.pt15{padding-top:15px!important}.pt16{padding-top:16px!important}.pl15{padding-left:15px!important}.pl0{padding-left:0!important}.pr0{padding-right:0!important}.pr15{padding-right:15px!important}.fs12{font-size:12px}.fs14{font-size:14px!important}.fs16{font-size:16px!important}.fs22{font-size:22px!important}.fw500{font-weight:500!important}.italic-text{font-style:italic}.display-flex{display:flex}.qmsckeditor{font-family:Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:400}.qmsckeditor h2{font-size:20px;font-weight:400}.qmsckeditor .mat-icon{color:#909497}.qmsckeditor__fullscreen{position:fixed;inset:0;background:#fff;overflow-y:auto;max-height:100vh;overflow-x:hidden}.qmsckeditor__cursor{cursor:pointer}.qmsckeditor__notallowed{cursor:not-allowed}.qmsckeditor.button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qmsckeditor.button__done{float:right;top:-24px;right:-24px;cursor:pointer;margin-right:20px}.qmsckeditor.button__done .mat-icon{color:#28a745;font-weight:700}.qmsckeditor.button__groups button{min-height:40px;width:100%;border-radius:4px;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px}.qmsckeditor.button__groups .save{background:#f8f9f9}.qmsckeditor.button__groups .save:hover{background:#e5e7e9}.qmsckeditor.button__groups .save:disabled{cursor:not-allowed}.qmsckeditor.button__groups .cancel{background:#f8f9f9}.qmsckeditor.button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.button__groups .cancel:disabled{cursor:not-allowed}.qmsckeditor.button__groups .delete{background:#f8f9f9}.qmsckeditor.button__groups .delete:hover{background:#e5e7e9}.qmsckeditor.button__groups .delete:disabled{cursor:not-allowed}.qmsckeditor.confirm__button__groups button{min-height:36px;border-radius:4px;width:auto;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px;padding-left:15px;padding-right:15px}.qmsckeditor.confirm__button__groups .confirm{background:#f8f9f9}.qmsckeditor.confirm__button__groups .confirm:hover{background:#e5e7e9}.qmsckeditor.confirm__button__groups .cancel{background:#f8f9f9}.qmsckeditor.confirm__button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.template-content.height{min-height:420px;max-height:520px;overflow:auto}.qmsckeditor.template-content.title{margin-left:-9px}.qmsckeditor.link__content.height{min-height:400px;max-height:520px}.qmsckeditor.card{margin-bottom:10px;min-height:60px;box-shadow:none;border:1px solid #e5e5e5}.qmsckeditor.card .title{font-weight:700}.qmsckeditor.card .content{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.qmsckeditor.card .material-icons{font-size:20px}.qmsckeditor.tooltip-content.height{min-height:400px;max-height:472px;overflow:auto}.qmsckeditor.save__as__template.height{height:125px}.ck-content .page-break,.ck-content .ck-horizontal-line{width:100%}.ck-content hr{background:#ccc}.ck-font-size-dropdown .ck-dropdown__panel ul{max-height:320px;overflow-y:auto}.ck-font-size-dropdown .ck-dropdown__panel ul li .ck-fontsize-option .ck-button__label{line-height:50px}.qmsckeditor__loadtemplate__container .template-checkbox{padding-top:20px}.qmsckeditor__loadtemplate__container .option{padding-left:15px}.qmsckeditor__loadtemplate__container .image-template{width:100%;height:100%}\n"], dependencies: [{ kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i7$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: QMSGroupOptionDirective, selector: "[qms-group-options]", inputs: ["label"] }, { kind: "directive", type: AutocompleteOffDirective, selector: "[qms-group-options]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: QMSCKEditorLoadTemplateComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-qmsck-load-template', template: "<div id=\"qmsckeditor-load-template\" class=\"qmsckeditor qmsckeditor__loadtemplate__container\">\n  <div id=\"qmsckeditor-load-template-header\">\n    <span id=\"qmsckeditor-load-template-header_001\" mat-icon-button class=\"qmsckeditor button__close\"\n      (click)=\"onCloseDialog()\">\n      <mat-icon>close</mat-icon>\n    </span>\n    <div id=\"qmsckeditor-load-template-header_002\" mat-dialog-content>\n      <h2 id=\"qmsckeditor-template_002_001\">\n        {{ LANG.QMSCKEDITOR.CONTENT_TEMPLATE }}\n      </h2>\n    </div>\n  </div>\n  <div id=\"load-template_002\">\n    <div id=\"load-template_002_001\" class=\"title col-12 mt-3\">\n      <h2 id=\"load-template_002_001_001\">\n        {{ LANG.QMSCKEDITOR.CHOOSE_TEMPLATE }}\n      </h2>\n    </div>\n  </div>\n  <div id=\"qmsckeditor-load-template-content\" class=\"qmsckeditor template-content height\">\n    <div id=\"qmsckeditor-load-template-content_003\" class=\"mt-1 pl-2 pr-2 ps-2 pe-2\">\n      <mat-card appearance=\"outlined\" class=\"qmsckeditor card col-12\" *ngFor=\"let template of templates\">\n        <div class=\"row\">\n          <div class=\"qmsckeditor__cursor col-2\"> \n            <img class=\"image-template\" src=\"{{template.imageUrl}}\">\n          </div>\n          <div class=\"qmsckeditor__cursor col-8\" (click)=\"onSelectTemplate(template.id)\">\n            <div class=\"col-12 pl-0 ps-0 title\">\n              <span>{{ template.title }}</span>\n            </div>\n            <div class=\"col-12 pl-0 ps-0 content\">\n              <span>{{ template.description }}</span>\n            </div>\n          </div>\n          <div *ngIf=\"enableEditTemplate\" class=\"qmsckeditor__cursor col-1\">\n            <mat-icon (click)=\"onEditTemplate(template.id)\">edit</mat-icon>\n          </div>\n          <div *ngIf=\"enableEditTemplate\" class=\"qmsckeditor__cursor col-1\">\n            <mat-icon (click)=\"onDeleteTemplate(template.id)\">delete</mat-icon>\n          </div>\n        </div>\n      </mat-card>\n    </div>\n  </div>\n  <div class=\"option\">\n    <mat-checkbox qms-group-options [(ngModel)]=\"isReplace\" color=\"primary\">\n      {{ LANG.QMSCKEDITOR.REPLACE_CONTENT }}\n    </mat-checkbox>\n  </div>\n</div>", styles: [".mt5{margin-top:5px!important}.mt10{margin-top:10px!important}.mt7{margin-top:7px!important}.mt15{margin-top:15px!important}.mt20{margin-top:20px!important}.mt30{margin-top:30px!important}.mt40{margin-top:40px!important}.ml2{margin-left:2px!important}.ml3{margin-left:3px!important}.ml5{margin-left:5px!important}.ml15{margin-left:15px!important}.ml10{margin-left:10px!important}.ml12{margin-left:12px!important}.ml16{margin-left:16px!important}.ml-auto{margin-left:auto!important}.ml-25{margin-left:-25px!important}.mr5{margin-right:5px!important}.mr12{margin-right:12px!important}.mr15{margin-right:15px!important}.mb5{margin-bottom:5px!important}.mb10{margin-bottom:10px!important}.mb15{margin-bottom:15px!important}.pt8{padding-top:8px!important}.pt10{padding-top:10px!important}.pt15{padding-top:15px!important}.pt16{padding-top:16px!important}.pl15{padding-left:15px!important}.pl0{padding-left:0!important}.pr0{padding-right:0!important}.pr15{padding-right:15px!important}.fs12{font-size:12px}.fs14{font-size:14px!important}.fs16{font-size:16px!important}.fs22{font-size:22px!important}.fw500{font-weight:500!important}.italic-text{font-style:italic}.display-flex{display:flex}.qmsckeditor{font-family:Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:400}.qmsckeditor h2{font-size:20px;font-weight:400}.qmsckeditor .mat-mdc-dialog-content{padding:0}.qmsckeditor .mat-icon{color:#909497}.qmsckeditor__fullscreen{position:fixed;inset:0;background:#fff;overflow-y:auto;max-height:100vh;overflow-x:hidden}.qmsckeditor__cursor{cursor:pointer}.qmsckeditor__notallowed{cursor:not-allowed}.qmsckeditor.button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qmsckeditor.button__done{float:right;top:-24px;right:-24px;cursor:pointer;margin-right:20px}.qmsckeditor.button__done .mat-icon{color:#28a745;font-weight:700}.qmsckeditor.button__groups button{min-height:40px;width:100%;border-radius:4px;border:1px solid #C5C5C5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px}.qmsckeditor.button__groups .save{background:#f8f9f9}.qmsckeditor.button__groups .save:hover{background:#e5e7e9}.qmsckeditor.button__groups .save:disabled{cursor:not-allowed}.qmsckeditor.button__groups .cancel{background:#f8f9f9}.qmsckeditor.button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.button__groups .cancel:disabled{cursor:not-allowed}.qmsckeditor.button__groups .delete{background:#f8f9f9}.qmsckeditor.button__groups .delete:hover{background:#e5e7e9}.qmsckeditor.button__groups .delete:disabled{cursor:not-allowed}.qmsckeditor.confirm__button__groups button{min-height:36px;border-radius:4px;width:auto;border:1px solid #C5C5C5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px;padding-left:15px;padding-right:15px}.qmsckeditor.confirm__button__groups .confirm{background:#f8f9f9}.qmsckeditor.confirm__button__groups .confirm:hover{background:#e5e7e9}.qmsckeditor.confirm__button__groups .cancel{background:#f8f9f9}.qmsckeditor.confirm__button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.template-content.height{min-height:420px;max-height:520px;overflow:auto}.qmsckeditor.template-content.title{margin-left:-9px}.qmsckeditor.link__content.height{min-height:400px;max-height:520px}.qmsckeditor.card{margin-bottom:10px;min-height:60px;box-shadow:none;border:1px solid #e5e5e5}.qmsckeditor.card .title{font-weight:700}.qmsckeditor.card .content{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.qmsckeditor.card .material-icons{font-size:20px}.qmsckeditor.tooltip-content.height{min-height:400px;max-height:472px;overflow:auto}.qmsckeditor.save__as__template.height{height:125px}.ck-content .page-break,.ck-content .ck-horizontal-line{width:100%}.ck-content hr{background:#ccc}.ck-font-size-dropdown .ck-dropdown__panel ul{max-height:320px;overflow-y:auto}.ck-font-size-dropdown .ck-dropdown__panel ul li .ck-fontsize-option .ck-button__label{line-height:50px}.qmsckeditor__loadtemplate__container .template-checkbox{padding-top:20px}.qmsckeditor__loadtemplate__container .option{padding-left:15px}.qmsckeditor__loadtemplate__container .image-template{width:100%;height:100%}\n"] }]
+            args: [{ selector: 'app-qmsck-load-template', template: "<div id=\"qmsckeditor-load-template\" class=\"qmsckeditor qmsckeditor__loadtemplate__container\">\n  <div id=\"qmsckeditor-load-template-header\">\n    <span id=\"qmsckeditor-load-template-header_001\" mat-icon-button class=\"qmsckeditor button__close\"\n      (click)=\"onCloseDialog()\">\n      <mat-icon>close</mat-icon>\n    </span>\n    <div id=\"qmsckeditor-load-template-header_002\" mat-dialog-content>\n      <h2 id=\"qmsckeditor-template_002_001\">\n        {{ LANG.QMSCKEDITOR.CONTENT_TEMPLATE }}\n      </h2>\n    </div>\n  </div>\n  <div id=\"load-template_002\">\n    <div id=\"load-template_002_001\" class=\"title col-12 mt-3\">\n      <h2 id=\"load-template_002_001_001\">\n        {{ LANG.QMSCKEDITOR.CHOOSE_TEMPLATE }}\n      </h2>\n    </div>\n  </div>\n  <div id=\"qmsckeditor-load-template-content\" class=\"qmsckeditor template-content height\">\n    <div id=\"qmsckeditor-load-template-content_003\" class=\"mt-1 pl-2 pr-2 ps-2 pe-2\">\n      <mat-card appearance=\"outlined\" class=\"qmsckeditor card col-12\" *ngFor=\"let template of templates\">\n        <div class=\"row\">\n          <div class=\"qmsckeditor__cursor col-2\"> \n            <img class=\"image-template\" src=\"{{template.imageUrl}}\">\n          </div>\n          <div class=\"qmsckeditor__cursor col-8\" (click)=\"onSelectTemplate(template.id)\">\n            <div class=\"col-12 pl-0 ps-0 title\">\n              <span>{{ template.title }}</span>\n            </div>\n            <div class=\"col-12 pl-0 ps-0 content\">\n              <span>{{ template.description }}</span>\n            </div>\n          </div>\n          <div *ngIf=\"enableEditTemplate\" class=\"qmsckeditor__cursor col-1\">\n            <mat-icon (click)=\"onEditTemplate(template.id)\">edit</mat-icon>\n          </div>\n          <div *ngIf=\"enableEditTemplate\" class=\"qmsckeditor__cursor col-1\">\n            <mat-icon (click)=\"onDeleteTemplate(template.id)\">delete</mat-icon>\n          </div>\n        </div>\n      </mat-card>\n    </div>\n  </div>\n  <div class=\"option\">\n    <mat-checkbox qms-group-options [(ngModel)]=\"isReplace\" color=\"primary\">\n      {{ LANG.QMSCKEDITOR.REPLACE_CONTENT }}\n    </mat-checkbox>\n  </div>\n</div>", styles: [".mt5{margin-top:5px!important}.mt10{margin-top:10px!important}.mt7{margin-top:7px!important}.mt15{margin-top:15px!important}.mt20{margin-top:20px!important}.mt30{margin-top:30px!important}.mt40{margin-top:40px!important}.ml2{margin-left:2px!important}.ml3{margin-left:3px!important}.ml5{margin-left:5px!important}.ml15{margin-left:15px!important}.ml10{margin-left:10px!important}.ml12{margin-left:12px!important}.ml16{margin-left:16px!important}.ml-auto{margin-left:auto!important}.ml-25{margin-left:-25px!important}.mr5{margin-right:5px!important}.mr12{margin-right:12px!important}.mr15{margin-right:15px!important}.mb5{margin-bottom:5px!important}.mb10{margin-bottom:10px!important}.mb15{margin-bottom:15px!important}.pt8{padding-top:8px!important}.pt10{padding-top:10px!important}.pt15{padding-top:15px!important}.pt16{padding-top:16px!important}.pl15{padding-left:15px!important}.pl0{padding-left:0!important}.pr0{padding-right:0!important}.pr15{padding-right:15px!important}.fs12{font-size:12px}.fs14{font-size:14px!important}.fs16{font-size:16px!important}.fs22{font-size:22px!important}.fw500{font-weight:500!important}.italic-text{font-style:italic}.display-flex{display:flex}.qmsckeditor{font-family:Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:400}.qmsckeditor h2{font-size:20px;font-weight:400}.qmsckeditor .mat-icon{color:#909497}.qmsckeditor__fullscreen{position:fixed;inset:0;background:#fff;overflow-y:auto;max-height:100vh;overflow-x:hidden}.qmsckeditor__cursor{cursor:pointer}.qmsckeditor__notallowed{cursor:not-allowed}.qmsckeditor.button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qmsckeditor.button__done{float:right;top:-24px;right:-24px;cursor:pointer;margin-right:20px}.qmsckeditor.button__done .mat-icon{color:#28a745;font-weight:700}.qmsckeditor.button__groups button{min-height:40px;width:100%;border-radius:4px;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px}.qmsckeditor.button__groups .save{background:#f8f9f9}.qmsckeditor.button__groups .save:hover{background:#e5e7e9}.qmsckeditor.button__groups .save:disabled{cursor:not-allowed}.qmsckeditor.button__groups .cancel{background:#f8f9f9}.qmsckeditor.button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.button__groups .cancel:disabled{cursor:not-allowed}.qmsckeditor.button__groups .delete{background:#f8f9f9}.qmsckeditor.button__groups .delete:hover{background:#e5e7e9}.qmsckeditor.button__groups .delete:disabled{cursor:not-allowed}.qmsckeditor.confirm__button__groups button{min-height:36px;border-radius:4px;width:auto;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px;padding-left:15px;padding-right:15px}.qmsckeditor.confirm__button__groups .confirm{background:#f8f9f9}.qmsckeditor.confirm__button__groups .confirm:hover{background:#e5e7e9}.qmsckeditor.confirm__button__groups .cancel{background:#f8f9f9}.qmsckeditor.confirm__button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.template-content.height{min-height:420px;max-height:520px;overflow:auto}.qmsckeditor.template-content.title{margin-left:-9px}.qmsckeditor.link__content.height{min-height:400px;max-height:520px}.qmsckeditor.card{margin-bottom:10px;min-height:60px;box-shadow:none;border:1px solid #e5e5e5}.qmsckeditor.card .title{font-weight:700}.qmsckeditor.card .content{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.qmsckeditor.card .material-icons{font-size:20px}.qmsckeditor.tooltip-content.height{min-height:400px;max-height:472px;overflow:auto}.qmsckeditor.save__as__template.height{height:125px}.ck-content .page-break,.ck-content .ck-horizontal-line{width:100%}.ck-content hr{background:#ccc}.ck-font-size-dropdown .ck-dropdown__panel ul{max-height:320px;overflow-y:auto}.ck-font-size-dropdown .ck-dropdown__panel ul li .ck-fontsize-option .ck-button__label{line-height:50px}.qmsckeditor__loadtemplate__container .template-checkbox{padding-top:20px}.qmsckeditor__loadtemplate__container .option{padding-left:15px}.qmsckeditor__loadtemplate__container .image-template{width:100%;height:100%}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.MatDialog }, { type: TranslateLibraryService }, { type: QMSCKEditorTemplateService }, { type: QMSCKEditorCommonService }, { type: i1$2.MatDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -13375,11 +13375,11 @@ class QMSCKEditorRelatedComponent extends QMSCKEditorBaseComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: QMSCKEditorRelatedComponent, deps: [{ token: QMSCKEditorTreeService }, { token: TranslateLibraryService }, { token: i1$2.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: QMSCKEditorRelatedComponent, selector: "app-dialog", usesInheritance: true, ngImport: i0, template: "<div id=\"qmsckeditor_tree\" class=\"qmsckeditor qmsckeditor__tree__containter\">\n  <span\n    mat-icon-button\n    class=\"qmsckeditor button__close\"\n    (click)=\"onCloseClick()\"\n  >\n    <mat-icon>close</mat-icon>\n  </span>\n  <div id=\"qmsckeditor_tree_001\" mat-dialog-content>\n    <h2 *ngIf=\"!isOnlyDocument\">\n      {{ LANG.QMSCKEDITOR.ADD_DOCUMENT_PROCESS }}\n    </h2>\n    <h2 *ngIf=\"isOnlyDocument\">{{ LANG.QMSCKEDITOR.ADD_DOCUMENT }}</h2>\n  </div>\n  <div\n    id=\"qmsckeditor_tree_002\"\n    class=\"input__field\"\n    (click)=\"showSearchResult()\"\n  >\n    <input\n      #name\n      type=\"text\"\n      placeholder=\"{{ LANG.QMSCKEDITOR.SEARCH }}\"\n      matInput\n      [formControl]=\"myControl\"\n      [matAutocomplete]=\"auto\"\n    />\n    <mat-icon>search</mat-icon>\n  </div>\n  <mat-autocomplete\n    #auto=\"matAutocomplete\"\n    [displayWith]=\"displayRelated\"\n    style=\"height: 50vh\"\n  >\n    <cdk-virtual-scroll-viewport\n      itemSize=\"10\"\n      class=\"related-viewport\"\n      style=\"height: 50vh\"\n    >\n      <mat-option\n        *cdkVirtualFor=\"let option of filteredOptions\"\n        [value]=\"option\"\n      >\n        <div\n          *ngIf=\"option.type == 1\"\n          class=\"col-12\"\n          (click)=\"selectRelated(option.id, option.type)\"\n        >\n          <span\n            ><img\n              class=\"mat-icon\"\n              src=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAAiElEQVR4AezOAQaAABQE0dDBuk2AjvCPGDrQb0GQ2NCqzDAAvOFP0ahLb7pvvjwBmn1ABrXqfhOqj/3KR+VBPioMOqPyIB+VB/moPMhH5UGdAk26rs6B/AABAgQIECBAgL4E2vcZpJFG+DA5DppPQweFk+MgHiAuB+L7VHTIeyDuBg9kDBcwCgBx1CcsdvijVwAAAABJRU5ErkJggg==\"\n          /></span>\n          <span>{{ option.name }}</span>\n        </div>\n        <div\n          *ngIf=\"option.type == 2\"\n          class=\"col-12\"\n          (click)=\"selectRelated(option.id, option.type)\"\n        >\n          <span\n            ><img\n              class=\"mat-icon\"\n              src=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYAQMAAADaua+7AAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAZQTFRFAAAAbHV9mFYLuQAAAAJ0Uk5TAP9bkSK1AAAAKUlEQVR4nGNgQALyjT/AWPL/DDCG8dmAclgx4w8wZgeqBWEGIBuMEQAAaJkRERdvY48AAAAASUVORK5CYII=\"\n          /></span>\n          <span>{{ option.name }}</span>\n        </div>\n      </mat-option>\n    </cdk-virtual-scroll-viewport>\n  </mat-autocomplete>\n  <div id=\"qmsckeditor_tree_003\" class=\"row ml-0 mr-0 mt20 ms-0 me-0\">\n    <div id=\"qmsckeditor_tree_003_001\" class=\"content-box\">\n      <strong *ngIf=\"!isOnlyDocument\">{{ LANG.QMSCKEDITOR.PROCESSES }}</strong>\n      <qms-ckeditor-tree\n        *ngIf=\"!isOnlyDocument\"\n        [areaOfCurrentProcess]=\"areaOfCurrentProcess\"\n        [listParentObj]=\"listParentProcessId\"\n        [treeData]=\"treeProcessData\"\n        [rawData]=\"processData\"\n        [docType]=\"2\"\n        [useExpandFeature]=\"true\"\n        [allowSelectFolder]=\"isEnableFolder\"\n        (selectNodeEvent)=\"selectProcessNode($event)\"\n        (selectFolderEvent)=\"selectAreaNode($event)\"\n      ></qms-ckeditor-tree>\n      <div *ngIf=\"!isOnlyDocument\" class=\"line-divider\"></div>\n      <strong>{{ LANG.QMSCKEDITOR.DOCUMENTS }}</strong>\n      <qms-ckeditor-tree\n        [areaOfCurrentProcess]=\"areaOfCurrentProcess\"\n        [listParentObj]=\"listParentDocumentId\"\n        [treeData]=\"treeDocumentData\"\n        [rawData]=\"documentData\"\n        [useExpandFeature]=\"true\"\n        [docType]=\"1\"\n        [allowSelectFolder]=\"isEnableFolder\"\n        (selectNodeEvent)=\"selectDocumentNode($event)\"\n        (selectFolderEvent)=\"selectHandbookNode($event)\"\n      ></qms-ckeditor-tree>\n    </div>\n  </div>\n  <div\n    id=\"qmsckeditor_tree_004\"\n    class=\"qmsckeditor button__groups mt20 row ml-0 mr-0 ms-0 me-0\"\n  >\n    <button\n      type=\"button\"\n      class=\"save col-12\"\n      mat-flat-button\n      (click)=\"onAddDocumentProcess()\"\n    >\n      {{ LANG.QMSCKEDITOR.ADD }}\n    </button>\n  </div>\n</div>\n", styles: [".mt5{margin-top:5px!important}.mt10{margin-top:10px!important}.mt7{margin-top:7px!important}.mt15{margin-top:15px!important}.mt20{margin-top:20px!important}.mt30{margin-top:30px!important}.mt40{margin-top:40px!important}.ml2{margin-left:2px!important}.ml3{margin-left:3px!important}.ml5{margin-left:5px!important}.ml15{margin-left:15px!important}.ml10{margin-left:10px!important}.ml12{margin-left:12px!important}.ml16{margin-left:16px!important}.ml-auto{margin-left:auto!important}.ml-25{margin-left:-25px!important}.mr5{margin-right:5px!important}.mr12{margin-right:12px!important}.mr15{margin-right:15px!important}.mb5{margin-bottom:5px!important}.mb10{margin-bottom:10px!important}.mb15{margin-bottom:15px!important}.pt8{padding-top:8px!important}.pt10{padding-top:10px!important}.pt15{padding-top:15px!important}.pt16{padding-top:16px!important}.pl15{padding-left:15px!important}.pl0{padding-left:0!important}.pr0{padding-right:0!important}.pr15{padding-right:15px!important}.fs12{font-size:12px}.fs14{font-size:14px!important}.fs16{font-size:16px!important}.fs22{font-size:22px!important}.fw500{font-weight:500!important}.italic-text{font-style:italic}.display-flex{display:flex}.qmsckeditor{font-family:Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:400}.qmsckeditor h2{font-size:20px;font-weight:400}.qmsckeditor .mat-mdc-dialog-content{padding:0}.qmsckeditor .mat-icon{color:#909497}.qmsckeditor__fullscreen{position:fixed;inset:0;background:#fff;overflow-y:auto;max-height:100vh;overflow-x:hidden}.qmsckeditor__cursor{cursor:pointer}.qmsckeditor__notallowed{cursor:not-allowed}.qmsckeditor.button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qmsckeditor.button__done{float:right;top:-24px;right:-24px;cursor:pointer;margin-right:20px}.qmsckeditor.button__done .mat-icon{color:#28a745;font-weight:700}.qmsckeditor.button__groups button{min-height:40px;width:100%;border-radius:4px;border:1px solid #C5C5C5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px}.qmsckeditor.button__groups .save{background:#f8f9f9}.qmsckeditor.button__groups .save:hover{background:#e5e7e9}.qmsckeditor.button__groups .save:disabled{cursor:not-allowed}.qmsckeditor.button__groups .cancel{background:#f8f9f9}.qmsckeditor.button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.button__groups .cancel:disabled{cursor:not-allowed}.qmsckeditor.button__groups .delete{background:#f8f9f9}.qmsckeditor.button__groups .delete:hover{background:#e5e7e9}.qmsckeditor.button__groups .delete:disabled{cursor:not-allowed}.qmsckeditor.confirm__button__groups button{min-height:36px;border-radius:4px;width:auto;border:1px solid #C5C5C5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px;padding-left:15px;padding-right:15px}.qmsckeditor.confirm__button__groups .confirm{background:#f8f9f9}.qmsckeditor.confirm__button__groups .confirm:hover{background:#e5e7e9}.qmsckeditor.confirm__button__groups .cancel{background:#f8f9f9}.qmsckeditor.confirm__button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.template-content.height{min-height:420px;max-height:520px;overflow:auto}.qmsckeditor.template-content.title{margin-left:-9px}.qmsckeditor.link__content.height{min-height:400px;max-height:520px}.qmsckeditor.card{margin-bottom:10px;min-height:60px;box-shadow:none;border:1px solid #e5e5e5}.qmsckeditor.card .title{font-weight:700}.qmsckeditor.card .content{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.qmsckeditor.card .material-icons{font-size:20px}.qmsckeditor.tooltip-content.height{min-height:400px;max-height:472px;overflow:auto}.qmsckeditor.save__as__template.height{height:125px}.ck-content .page-break,.ck-content .ck-horizontal-line{width:100%}.ck-content hr{background:#ccc}.ck-font-size-dropdown .ck-dropdown__panel ul{max-height:320px;overflow-y:auto}.ck-font-size-dropdown .ck-dropdown__panel ul li .ck-fontsize-option .ck-button__label{line-height:50px}::ng-deep .qmsckeditor__tree__containter .input__field input{width:97%;padding:10px;outline:none;border:none;background:#eee}::ng-deep .qmsckeditor__tree__containter .input__field .mat-icon{margin-left:-35px;cursor:pointer;vertical-align:middle}::ng-deep .qmsckeditor__tree__containter .mat-tree{background:#00283a}::ng-deep .qmsckeditor__tree__containter .mat-tree-node{color:#fff;min-height:40px}::ng-deep .qmsckeditor__tree__containter .folder-icon{color:#a4b0de}::ng-deep .qmsckeditor__tree__containter .mat-icon{margin-bottom:5px}::ng-deep .qmsckeditor__tree__containter .content-box{min-width:375px;width:100%;height:435px;overflow-y:auto;background:#00283a;color:#fff}::ng-deep .qmsckeditor__tree__containter .content-box .content-box-item{width:100%;height:56px;border:1px solid #d4d5d6;padding:15px}::ng-deep .qmsckeditor__tree__containter .content-box .content-box-item:hover{background:#d8ddf0;cursor:pointer}::ng-deep .qmsckeditor__tree__containter .content-box .content-box-item .content-box-text{float:left;width:90%;height:26px;overflow:hidden}::ng-deep .qmsckeditor__tree__containter .content-box .content-box-item .content-box-icon{float:right}::ng-deep .qmsckeditor__tree__containter .content-box .content-box-item:not(:last-child){border-bottom:none}::ng-deep .qmsckeditor__tree__containter .content-box strong{text-transform:uppercase;margin:10px 0 0 2px}::ng-deep .qmsckeditor__tree__containter .line-divider{border-bottom:1px solid #ccc;height:1px;margin-top:10px}::ng-deep .qmsckeditor__tree__containter .loading ::ng-deep .mat-mdc-progress-spinner{width:21px;height:21px;margin:0 auto;top:32px}::ng-deep .mat-autocomplete-panel.mat-autocomplete-visible{overflow:hidden;max-height:none}::ng-deep .mat-autocomplete-panel.mat-autocomplete-hidden{visibility:hidden;display:none}\n"], dependencies: [{ kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i14.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i8$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i9$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i9$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: i24.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i24.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i24.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: QMSCKEditorTreeComponent, selector: "qms-ckeditor-tree", inputs: ["rawData", "treeData", "useExpandFeature", "docType", "allowSelectFolder", "listParentObj", "areaOfCurrentProcess"], outputs: ["selectNodeEvent", "selectFolderEvent"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: QMSCKEditorRelatedComponent, selector: "app-dialog", usesInheritance: true, ngImport: i0, template: "<div id=\"qmsckeditor_tree\" class=\"qmsckeditor qmsckeditor__tree__containter\">\n  <span\n    mat-icon-button\n    class=\"qmsckeditor button__close\"\n    (click)=\"onCloseClick()\"\n  >\n    <mat-icon>close</mat-icon>\n  </span>\n  <div id=\"qmsckeditor_tree_001\" mat-dialog-content>\n    <h2 *ngIf=\"!isOnlyDocument\">\n      {{ LANG.QMSCKEDITOR.ADD_DOCUMENT_PROCESS }}\n    </h2>\n    <h2 *ngIf=\"isOnlyDocument\">{{ LANG.QMSCKEDITOR.ADD_DOCUMENT }}</h2>\n  </div>\n  <div\n    id=\"qmsckeditor_tree_002\"\n    class=\"input__field\"\n    (click)=\"showSearchResult()\"\n  >\n    <input\n      #name\n      type=\"text\"\n      placeholder=\"{{ LANG.QMSCKEDITOR.SEARCH }}\"\n      matInput\n      [formControl]=\"myControl\"\n      [matAutocomplete]=\"auto\"\n    />\n    <mat-icon>search</mat-icon>\n  </div>\n  <mat-autocomplete\n    #auto=\"matAutocomplete\"\n    [displayWith]=\"displayRelated\"\n    style=\"height: 50vh\"\n  >\n    <cdk-virtual-scroll-viewport\n      itemSize=\"10\"\n      class=\"related-viewport\"\n      style=\"height: 50vh\"\n    >\n      <mat-option\n        *cdkVirtualFor=\"let option of filteredOptions\"\n        [value]=\"option\"\n      >\n        <div\n          *ngIf=\"option.type == 1\"\n          class=\"col-12\"\n          (click)=\"selectRelated(option.id, option.type)\"\n        >\n          <span\n            ><img\n              class=\"mat-icon\"\n              src=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAAiElEQVR4AezOAQaAABQE0dDBuk2AjvCPGDrQb0GQ2NCqzDAAvOFP0ahLb7pvvjwBmn1ABrXqfhOqj/3KR+VBPioMOqPyIB+VB/moPMhH5UGdAk26rs6B/AABAgQIECBAgL4E2vcZpJFG+DA5DppPQweFk+MgHiAuB+L7VHTIeyDuBg9kDBcwCgBx1CcsdvijVwAAAABJRU5ErkJggg==\"\n          /></span>\n          <span>{{ option.name }}</span>\n        </div>\n        <div\n          *ngIf=\"option.type == 2\"\n          class=\"col-12\"\n          (click)=\"selectRelated(option.id, option.type)\"\n        >\n          <span\n            ><img\n              class=\"mat-icon\"\n              src=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYAQMAAADaua+7AAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAZQTFRFAAAAbHV9mFYLuQAAAAJ0Uk5TAP9bkSK1AAAAKUlEQVR4nGNgQALyjT/AWPL/DDCG8dmAclgx4w8wZgeqBWEGIBuMEQAAaJkRERdvY48AAAAASUVORK5CYII=\"\n          /></span>\n          <span>{{ option.name }}</span>\n        </div>\n      </mat-option>\n    </cdk-virtual-scroll-viewport>\n  </mat-autocomplete>\n  <div id=\"qmsckeditor_tree_003\" class=\"row ml-0 mr-0 mt20 ms-0 me-0\">\n    <div id=\"qmsckeditor_tree_003_001\" class=\"content-box\">\n      <strong *ngIf=\"!isOnlyDocument\">{{ LANG.QMSCKEDITOR.PROCESSES }}</strong>\n      <qms-ckeditor-tree\n        *ngIf=\"!isOnlyDocument\"\n        [areaOfCurrentProcess]=\"areaOfCurrentProcess\"\n        [listParentObj]=\"listParentProcessId\"\n        [treeData]=\"treeProcessData\"\n        [rawData]=\"processData\"\n        [docType]=\"2\"\n        [useExpandFeature]=\"true\"\n        [allowSelectFolder]=\"isEnableFolder\"\n        (selectNodeEvent)=\"selectProcessNode($event)\"\n        (selectFolderEvent)=\"selectAreaNode($event)\"\n      ></qms-ckeditor-tree>\n      <div *ngIf=\"!isOnlyDocument\" class=\"line-divider\"></div>\n      <strong>{{ LANG.QMSCKEDITOR.DOCUMENTS }}</strong>\n      <qms-ckeditor-tree\n        [areaOfCurrentProcess]=\"areaOfCurrentProcess\"\n        [listParentObj]=\"listParentDocumentId\"\n        [treeData]=\"treeDocumentData\"\n        [rawData]=\"documentData\"\n        [useExpandFeature]=\"true\"\n        [docType]=\"1\"\n        [allowSelectFolder]=\"isEnableFolder\"\n        (selectNodeEvent)=\"selectDocumentNode($event)\"\n        (selectFolderEvent)=\"selectHandbookNode($event)\"\n      ></qms-ckeditor-tree>\n    </div>\n  </div>\n  <div\n    id=\"qmsckeditor_tree_004\"\n    class=\"qmsckeditor button__groups mt20 row ml-0 mr-0 ms-0 me-0\"\n  >\n    <button\n      type=\"button\"\n      class=\"save col-12\"\n      mat-flat-button\n      (click)=\"onAddDocumentProcess()\"\n    >\n      {{ LANG.QMSCKEDITOR.ADD }}\n    </button>\n  </div>\n</div>\n", styles: [".mt5{margin-top:5px!important}.mt10{margin-top:10px!important}.mt7{margin-top:7px!important}.mt15{margin-top:15px!important}.mt20{margin-top:20px!important}.mt30{margin-top:30px!important}.mt40{margin-top:40px!important}.ml2{margin-left:2px!important}.ml3{margin-left:3px!important}.ml5{margin-left:5px!important}.ml15{margin-left:15px!important}.ml10{margin-left:10px!important}.ml12{margin-left:12px!important}.ml16{margin-left:16px!important}.ml-auto{margin-left:auto!important}.ml-25{margin-left:-25px!important}.mr5{margin-right:5px!important}.mr12{margin-right:12px!important}.mr15{margin-right:15px!important}.mb5{margin-bottom:5px!important}.mb10{margin-bottom:10px!important}.mb15{margin-bottom:15px!important}.pt8{padding-top:8px!important}.pt10{padding-top:10px!important}.pt15{padding-top:15px!important}.pt16{padding-top:16px!important}.pl15{padding-left:15px!important}.pl0{padding-left:0!important}.pr0{padding-right:0!important}.pr15{padding-right:15px!important}.fs12{font-size:12px}.fs14{font-size:14px!important}.fs16{font-size:16px!important}.fs22{font-size:22px!important}.fw500{font-weight:500!important}.italic-text{font-style:italic}.display-flex{display:flex}.qmsckeditor{font-family:Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:400}.qmsckeditor h2{font-size:20px;font-weight:400}.qmsckeditor .mat-icon{color:#909497}.qmsckeditor__fullscreen{position:fixed;inset:0;background:#fff;overflow-y:auto;max-height:100vh;overflow-x:hidden}.qmsckeditor__cursor{cursor:pointer}.qmsckeditor__notallowed{cursor:not-allowed}.qmsckeditor.button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qmsckeditor.button__done{float:right;top:-24px;right:-24px;cursor:pointer;margin-right:20px}.qmsckeditor.button__done .mat-icon{color:#28a745;font-weight:700}.qmsckeditor.button__groups button{min-height:40px;width:100%;border-radius:4px;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px}.qmsckeditor.button__groups .save{background:#f8f9f9}.qmsckeditor.button__groups .save:hover{background:#e5e7e9}.qmsckeditor.button__groups .save:disabled{cursor:not-allowed}.qmsckeditor.button__groups .cancel{background:#f8f9f9}.qmsckeditor.button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.button__groups .cancel:disabled{cursor:not-allowed}.qmsckeditor.button__groups .delete{background:#f8f9f9}.qmsckeditor.button__groups .delete:hover{background:#e5e7e9}.qmsckeditor.button__groups .delete:disabled{cursor:not-allowed}.qmsckeditor.confirm__button__groups button{min-height:36px;border-radius:4px;width:auto;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px;padding-left:15px;padding-right:15px}.qmsckeditor.confirm__button__groups .confirm{background:#f8f9f9}.qmsckeditor.confirm__button__groups .confirm:hover{background:#e5e7e9}.qmsckeditor.confirm__button__groups .cancel{background:#f8f9f9}.qmsckeditor.confirm__button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.template-content.height{min-height:420px;max-height:520px;overflow:auto}.qmsckeditor.template-content.title{margin-left:-9px}.qmsckeditor.link__content.height{min-height:400px;max-height:520px}.qmsckeditor.card{margin-bottom:10px;min-height:60px;box-shadow:none;border:1px solid #e5e5e5}.qmsckeditor.card .title{font-weight:700}.qmsckeditor.card .content{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.qmsckeditor.card .material-icons{font-size:20px}.qmsckeditor.tooltip-content.height{min-height:400px;max-height:472px;overflow:auto}.qmsckeditor.save__as__template.height{height:125px}.ck-content .page-break,.ck-content .ck-horizontal-line{width:100%}.ck-content hr{background:#ccc}.ck-font-size-dropdown .ck-dropdown__panel ul{max-height:320px;overflow-y:auto}.ck-font-size-dropdown .ck-dropdown__panel ul li .ck-fontsize-option .ck-button__label{line-height:50px}::ng-deep .qmsckeditor__tree__containter .input__field input{width:97%;padding:10px;outline:none;border:none;background:#eee}::ng-deep .qmsckeditor__tree__containter .input__field .mat-icon{margin-left:-35px;cursor:pointer;vertical-align:middle}::ng-deep .qmsckeditor__tree__containter .mat-tree{background:#00283a}::ng-deep .qmsckeditor__tree__containter .mat-tree-node{color:#fff;min-height:40px}::ng-deep .qmsckeditor__tree__containter .folder-icon{color:#a4b0de}::ng-deep .qmsckeditor__tree__containter .mat-icon{margin-bottom:5px}::ng-deep .qmsckeditor__tree__containter .content-box{min-width:375px;width:100%;height:435px;overflow-y:auto;background:#00283a;color:#fff}::ng-deep .qmsckeditor__tree__containter .content-box .content-box-item{width:100%;height:56px;border:1px solid #d4d5d6;padding:15px}::ng-deep .qmsckeditor__tree__containter .content-box .content-box-item:hover{background:#d8ddf0;cursor:pointer}::ng-deep .qmsckeditor__tree__containter .content-box .content-box-item .content-box-text{float:left;width:90%;height:26px;overflow:hidden}::ng-deep .qmsckeditor__tree__containter .content-box .content-box-item .content-box-icon{float:right}::ng-deep .qmsckeditor__tree__containter .content-box .content-box-item:not(:last-child){border-bottom:none}::ng-deep .qmsckeditor__tree__containter .content-box strong{text-transform:uppercase;margin:10px 0 0 2px}::ng-deep .qmsckeditor__tree__containter .line-divider{border-bottom:1px solid #ccc;height:1px;margin-top:10px}::ng-deep .qmsckeditor__tree__containter .loading ::ng-deep .mat-mdc-progress-spinner{width:21px;height:21px;margin:0 auto;top:32px}::ng-deep .mat-autocomplete-panel.mat-autocomplete-visible{overflow:hidden;max-height:none}::ng-deep .mat-autocomplete-panel.mat-autocomplete-hidden{visibility:hidden;display:none}\n"], dependencies: [{ kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i14.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i8$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i9$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i9$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: i24.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i24.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i24.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: QMSCKEditorTreeComponent, selector: "qms-ckeditor-tree", inputs: ["rawData", "treeData", "useExpandFeature", "docType", "allowSelectFolder", "listParentObj", "areaOfCurrentProcess"], outputs: ["selectNodeEvent", "selectFolderEvent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: QMSCKEditorRelatedComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-dialog', template: "<div id=\"qmsckeditor_tree\" class=\"qmsckeditor qmsckeditor__tree__containter\">\n  <span\n    mat-icon-button\n    class=\"qmsckeditor button__close\"\n    (click)=\"onCloseClick()\"\n  >\n    <mat-icon>close</mat-icon>\n  </span>\n  <div id=\"qmsckeditor_tree_001\" mat-dialog-content>\n    <h2 *ngIf=\"!isOnlyDocument\">\n      {{ LANG.QMSCKEDITOR.ADD_DOCUMENT_PROCESS }}\n    </h2>\n    <h2 *ngIf=\"isOnlyDocument\">{{ LANG.QMSCKEDITOR.ADD_DOCUMENT }}</h2>\n  </div>\n  <div\n    id=\"qmsckeditor_tree_002\"\n    class=\"input__field\"\n    (click)=\"showSearchResult()\"\n  >\n    <input\n      #name\n      type=\"text\"\n      placeholder=\"{{ LANG.QMSCKEDITOR.SEARCH }}\"\n      matInput\n      [formControl]=\"myControl\"\n      [matAutocomplete]=\"auto\"\n    />\n    <mat-icon>search</mat-icon>\n  </div>\n  <mat-autocomplete\n    #auto=\"matAutocomplete\"\n    [displayWith]=\"displayRelated\"\n    style=\"height: 50vh\"\n  >\n    <cdk-virtual-scroll-viewport\n      itemSize=\"10\"\n      class=\"related-viewport\"\n      style=\"height: 50vh\"\n    >\n      <mat-option\n        *cdkVirtualFor=\"let option of filteredOptions\"\n        [value]=\"option\"\n      >\n        <div\n          *ngIf=\"option.type == 1\"\n          class=\"col-12\"\n          (click)=\"selectRelated(option.id, option.type)\"\n        >\n          <span\n            ><img\n              class=\"mat-icon\"\n              src=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAAiElEQVR4AezOAQaAABQE0dDBuk2AjvCPGDrQb0GQ2NCqzDAAvOFP0ahLb7pvvjwBmn1ABrXqfhOqj/3KR+VBPioMOqPyIB+VB/moPMhH5UGdAk26rs6B/AABAgQIECBAgL4E2vcZpJFG+DA5DppPQweFk+MgHiAuB+L7VHTIeyDuBg9kDBcwCgBx1CcsdvijVwAAAABJRU5ErkJggg==\"\n          /></span>\n          <span>{{ option.name }}</span>\n        </div>\n        <div\n          *ngIf=\"option.type == 2\"\n          class=\"col-12\"\n          (click)=\"selectRelated(option.id, option.type)\"\n        >\n          <span\n            ><img\n              class=\"mat-icon\"\n              src=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYAQMAAADaua+7AAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAZQTFRFAAAAbHV9mFYLuQAAAAJ0Uk5TAP9bkSK1AAAAKUlEQVR4nGNgQALyjT/AWPL/DDCG8dmAclgx4w8wZgeqBWEGIBuMEQAAaJkRERdvY48AAAAASUVORK5CYII=\"\n          /></span>\n          <span>{{ option.name }}</span>\n        </div>\n      </mat-option>\n    </cdk-virtual-scroll-viewport>\n  </mat-autocomplete>\n  <div id=\"qmsckeditor_tree_003\" class=\"row ml-0 mr-0 mt20 ms-0 me-0\">\n    <div id=\"qmsckeditor_tree_003_001\" class=\"content-box\">\n      <strong *ngIf=\"!isOnlyDocument\">{{ LANG.QMSCKEDITOR.PROCESSES }}</strong>\n      <qms-ckeditor-tree\n        *ngIf=\"!isOnlyDocument\"\n        [areaOfCurrentProcess]=\"areaOfCurrentProcess\"\n        [listParentObj]=\"listParentProcessId\"\n        [treeData]=\"treeProcessData\"\n        [rawData]=\"processData\"\n        [docType]=\"2\"\n        [useExpandFeature]=\"true\"\n        [allowSelectFolder]=\"isEnableFolder\"\n        (selectNodeEvent)=\"selectProcessNode($event)\"\n        (selectFolderEvent)=\"selectAreaNode($event)\"\n      ></qms-ckeditor-tree>\n      <div *ngIf=\"!isOnlyDocument\" class=\"line-divider\"></div>\n      <strong>{{ LANG.QMSCKEDITOR.DOCUMENTS }}</strong>\n      <qms-ckeditor-tree\n        [areaOfCurrentProcess]=\"areaOfCurrentProcess\"\n        [listParentObj]=\"listParentDocumentId\"\n        [treeData]=\"treeDocumentData\"\n        [rawData]=\"documentData\"\n        [useExpandFeature]=\"true\"\n        [docType]=\"1\"\n        [allowSelectFolder]=\"isEnableFolder\"\n        (selectNodeEvent)=\"selectDocumentNode($event)\"\n        (selectFolderEvent)=\"selectHandbookNode($event)\"\n      ></qms-ckeditor-tree>\n    </div>\n  </div>\n  <div\n    id=\"qmsckeditor_tree_004\"\n    class=\"qmsckeditor button__groups mt20 row ml-0 mr-0 ms-0 me-0\"\n  >\n    <button\n      type=\"button\"\n      class=\"save col-12\"\n      mat-flat-button\n      (click)=\"onAddDocumentProcess()\"\n    >\n      {{ LANG.QMSCKEDITOR.ADD }}\n    </button>\n  </div>\n</div>\n", styles: [".mt5{margin-top:5px!important}.mt10{margin-top:10px!important}.mt7{margin-top:7px!important}.mt15{margin-top:15px!important}.mt20{margin-top:20px!important}.mt30{margin-top:30px!important}.mt40{margin-top:40px!important}.ml2{margin-left:2px!important}.ml3{margin-left:3px!important}.ml5{margin-left:5px!important}.ml15{margin-left:15px!important}.ml10{margin-left:10px!important}.ml12{margin-left:12px!important}.ml16{margin-left:16px!important}.ml-auto{margin-left:auto!important}.ml-25{margin-left:-25px!important}.mr5{margin-right:5px!important}.mr12{margin-right:12px!important}.mr15{margin-right:15px!important}.mb5{margin-bottom:5px!important}.mb10{margin-bottom:10px!important}.mb15{margin-bottom:15px!important}.pt8{padding-top:8px!important}.pt10{padding-top:10px!important}.pt15{padding-top:15px!important}.pt16{padding-top:16px!important}.pl15{padding-left:15px!important}.pl0{padding-left:0!important}.pr0{padding-right:0!important}.pr15{padding-right:15px!important}.fs12{font-size:12px}.fs14{font-size:14px!important}.fs16{font-size:16px!important}.fs22{font-size:22px!important}.fw500{font-weight:500!important}.italic-text{font-style:italic}.display-flex{display:flex}.qmsckeditor{font-family:Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:400}.qmsckeditor h2{font-size:20px;font-weight:400}.qmsckeditor .mat-mdc-dialog-content{padding:0}.qmsckeditor .mat-icon{color:#909497}.qmsckeditor__fullscreen{position:fixed;inset:0;background:#fff;overflow-y:auto;max-height:100vh;overflow-x:hidden}.qmsckeditor__cursor{cursor:pointer}.qmsckeditor__notallowed{cursor:not-allowed}.qmsckeditor.button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qmsckeditor.button__done{float:right;top:-24px;right:-24px;cursor:pointer;margin-right:20px}.qmsckeditor.button__done .mat-icon{color:#28a745;font-weight:700}.qmsckeditor.button__groups button{min-height:40px;width:100%;border-radius:4px;border:1px solid #C5C5C5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px}.qmsckeditor.button__groups .save{background:#f8f9f9}.qmsckeditor.button__groups .save:hover{background:#e5e7e9}.qmsckeditor.button__groups .save:disabled{cursor:not-allowed}.qmsckeditor.button__groups .cancel{background:#f8f9f9}.qmsckeditor.button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.button__groups .cancel:disabled{cursor:not-allowed}.qmsckeditor.button__groups .delete{background:#f8f9f9}.qmsckeditor.button__groups .delete:hover{background:#e5e7e9}.qmsckeditor.button__groups .delete:disabled{cursor:not-allowed}.qmsckeditor.confirm__button__groups button{min-height:36px;border-radius:4px;width:auto;border:1px solid #C5C5C5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px;padding-left:15px;padding-right:15px}.qmsckeditor.confirm__button__groups .confirm{background:#f8f9f9}.qmsckeditor.confirm__button__groups .confirm:hover{background:#e5e7e9}.qmsckeditor.confirm__button__groups .cancel{background:#f8f9f9}.qmsckeditor.confirm__button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.template-content.height{min-height:420px;max-height:520px;overflow:auto}.qmsckeditor.template-content.title{margin-left:-9px}.qmsckeditor.link__content.height{min-height:400px;max-height:520px}.qmsckeditor.card{margin-bottom:10px;min-height:60px;box-shadow:none;border:1px solid #e5e5e5}.qmsckeditor.card .title{font-weight:700}.qmsckeditor.card .content{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.qmsckeditor.card .material-icons{font-size:20px}.qmsckeditor.tooltip-content.height{min-height:400px;max-height:472px;overflow:auto}.qmsckeditor.save__as__template.height{height:125px}.ck-content .page-break,.ck-content .ck-horizontal-line{width:100%}.ck-content hr{background:#ccc}.ck-font-size-dropdown .ck-dropdown__panel ul{max-height:320px;overflow-y:auto}.ck-font-size-dropdown .ck-dropdown__panel ul li .ck-fontsize-option .ck-button__label{line-height:50px}::ng-deep .qmsckeditor__tree__containter .input__field input{width:97%;padding:10px;outline:none;border:none;background:#eee}::ng-deep .qmsckeditor__tree__containter .input__field .mat-icon{margin-left:-35px;cursor:pointer;vertical-align:middle}::ng-deep .qmsckeditor__tree__containter .mat-tree{background:#00283a}::ng-deep .qmsckeditor__tree__containter .mat-tree-node{color:#fff;min-height:40px}::ng-deep .qmsckeditor__tree__containter .folder-icon{color:#a4b0de}::ng-deep .qmsckeditor__tree__containter .mat-icon{margin-bottom:5px}::ng-deep .qmsckeditor__tree__containter .content-box{min-width:375px;width:100%;height:435px;overflow-y:auto;background:#00283a;color:#fff}::ng-deep .qmsckeditor__tree__containter .content-box .content-box-item{width:100%;height:56px;border:1px solid #d4d5d6;padding:15px}::ng-deep .qmsckeditor__tree__containter .content-box .content-box-item:hover{background:#d8ddf0;cursor:pointer}::ng-deep .qmsckeditor__tree__containter .content-box .content-box-item .content-box-text{float:left;width:90%;height:26px;overflow:hidden}::ng-deep .qmsckeditor__tree__containter .content-box .content-box-item .content-box-icon{float:right}::ng-deep .qmsckeditor__tree__containter .content-box .content-box-item:not(:last-child){border-bottom:none}::ng-deep .qmsckeditor__tree__containter .content-box strong{text-transform:uppercase;margin:10px 0 0 2px}::ng-deep .qmsckeditor__tree__containter .line-divider{border-bottom:1px solid #ccc;height:1px;margin-top:10px}::ng-deep .qmsckeditor__tree__containter .loading ::ng-deep .mat-mdc-progress-spinner{width:21px;height:21px;margin:0 auto;top:32px}::ng-deep .mat-autocomplete-panel.mat-autocomplete-visible{overflow:hidden;max-height:none}::ng-deep .mat-autocomplete-panel.mat-autocomplete-hidden{visibility:hidden;display:none}\n"] }]
+            args: [{ selector: 'app-dialog', template: "<div id=\"qmsckeditor_tree\" class=\"qmsckeditor qmsckeditor__tree__containter\">\n  <span\n    mat-icon-button\n    class=\"qmsckeditor button__close\"\n    (click)=\"onCloseClick()\"\n  >\n    <mat-icon>close</mat-icon>\n  </span>\n  <div id=\"qmsckeditor_tree_001\" mat-dialog-content>\n    <h2 *ngIf=\"!isOnlyDocument\">\n      {{ LANG.QMSCKEDITOR.ADD_DOCUMENT_PROCESS }}\n    </h2>\n    <h2 *ngIf=\"isOnlyDocument\">{{ LANG.QMSCKEDITOR.ADD_DOCUMENT }}</h2>\n  </div>\n  <div\n    id=\"qmsckeditor_tree_002\"\n    class=\"input__field\"\n    (click)=\"showSearchResult()\"\n  >\n    <input\n      #name\n      type=\"text\"\n      placeholder=\"{{ LANG.QMSCKEDITOR.SEARCH }}\"\n      matInput\n      [formControl]=\"myControl\"\n      [matAutocomplete]=\"auto\"\n    />\n    <mat-icon>search</mat-icon>\n  </div>\n  <mat-autocomplete\n    #auto=\"matAutocomplete\"\n    [displayWith]=\"displayRelated\"\n    style=\"height: 50vh\"\n  >\n    <cdk-virtual-scroll-viewport\n      itemSize=\"10\"\n      class=\"related-viewport\"\n      style=\"height: 50vh\"\n    >\n      <mat-option\n        *cdkVirtualFor=\"let option of filteredOptions\"\n        [value]=\"option\"\n      >\n        <div\n          *ngIf=\"option.type == 1\"\n          class=\"col-12\"\n          (click)=\"selectRelated(option.id, option.type)\"\n        >\n          <span\n            ><img\n              class=\"mat-icon\"\n              src=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAAiElEQVR4AezOAQaAABQE0dDBuk2AjvCPGDrQb0GQ2NCqzDAAvOFP0ahLb7pvvjwBmn1ABrXqfhOqj/3KR+VBPioMOqPyIB+VB/moPMhH5UGdAk26rs6B/AABAgQIECBAgL4E2vcZpJFG+DA5DppPQweFk+MgHiAuB+L7VHTIeyDuBg9kDBcwCgBx1CcsdvijVwAAAABJRU5ErkJggg==\"\n          /></span>\n          <span>{{ option.name }}</span>\n        </div>\n        <div\n          *ngIf=\"option.type == 2\"\n          class=\"col-12\"\n          (click)=\"selectRelated(option.id, option.type)\"\n        >\n          <span\n            ><img\n              class=\"mat-icon\"\n              src=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYAQMAAADaua+7AAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAZQTFRFAAAAbHV9mFYLuQAAAAJ0Uk5TAP9bkSK1AAAAKUlEQVR4nGNgQALyjT/AWPL/DDCG8dmAclgx4w8wZgeqBWEGIBuMEQAAaJkRERdvY48AAAAASUVORK5CYII=\"\n          /></span>\n          <span>{{ option.name }}</span>\n        </div>\n      </mat-option>\n    </cdk-virtual-scroll-viewport>\n  </mat-autocomplete>\n  <div id=\"qmsckeditor_tree_003\" class=\"row ml-0 mr-0 mt20 ms-0 me-0\">\n    <div id=\"qmsckeditor_tree_003_001\" class=\"content-box\">\n      <strong *ngIf=\"!isOnlyDocument\">{{ LANG.QMSCKEDITOR.PROCESSES }}</strong>\n      <qms-ckeditor-tree\n        *ngIf=\"!isOnlyDocument\"\n        [areaOfCurrentProcess]=\"areaOfCurrentProcess\"\n        [listParentObj]=\"listParentProcessId\"\n        [treeData]=\"treeProcessData\"\n        [rawData]=\"processData\"\n        [docType]=\"2\"\n        [useExpandFeature]=\"true\"\n        [allowSelectFolder]=\"isEnableFolder\"\n        (selectNodeEvent)=\"selectProcessNode($event)\"\n        (selectFolderEvent)=\"selectAreaNode($event)\"\n      ></qms-ckeditor-tree>\n      <div *ngIf=\"!isOnlyDocument\" class=\"line-divider\"></div>\n      <strong>{{ LANG.QMSCKEDITOR.DOCUMENTS }}</strong>\n      <qms-ckeditor-tree\n        [areaOfCurrentProcess]=\"areaOfCurrentProcess\"\n        [listParentObj]=\"listParentDocumentId\"\n        [treeData]=\"treeDocumentData\"\n        [rawData]=\"documentData\"\n        [useExpandFeature]=\"true\"\n        [docType]=\"1\"\n        [allowSelectFolder]=\"isEnableFolder\"\n        (selectNodeEvent)=\"selectDocumentNode($event)\"\n        (selectFolderEvent)=\"selectHandbookNode($event)\"\n      ></qms-ckeditor-tree>\n    </div>\n  </div>\n  <div\n    id=\"qmsckeditor_tree_004\"\n    class=\"qmsckeditor button__groups mt20 row ml-0 mr-0 ms-0 me-0\"\n  >\n    <button\n      type=\"button\"\n      class=\"save col-12\"\n      mat-flat-button\n      (click)=\"onAddDocumentProcess()\"\n    >\n      {{ LANG.QMSCKEDITOR.ADD }}\n    </button>\n  </div>\n</div>\n", styles: [".mt5{margin-top:5px!important}.mt10{margin-top:10px!important}.mt7{margin-top:7px!important}.mt15{margin-top:15px!important}.mt20{margin-top:20px!important}.mt30{margin-top:30px!important}.mt40{margin-top:40px!important}.ml2{margin-left:2px!important}.ml3{margin-left:3px!important}.ml5{margin-left:5px!important}.ml15{margin-left:15px!important}.ml10{margin-left:10px!important}.ml12{margin-left:12px!important}.ml16{margin-left:16px!important}.ml-auto{margin-left:auto!important}.ml-25{margin-left:-25px!important}.mr5{margin-right:5px!important}.mr12{margin-right:12px!important}.mr15{margin-right:15px!important}.mb5{margin-bottom:5px!important}.mb10{margin-bottom:10px!important}.mb15{margin-bottom:15px!important}.pt8{padding-top:8px!important}.pt10{padding-top:10px!important}.pt15{padding-top:15px!important}.pt16{padding-top:16px!important}.pl15{padding-left:15px!important}.pl0{padding-left:0!important}.pr0{padding-right:0!important}.pr15{padding-right:15px!important}.fs12{font-size:12px}.fs14{font-size:14px!important}.fs16{font-size:16px!important}.fs22{font-size:22px!important}.fw500{font-weight:500!important}.italic-text{font-style:italic}.display-flex{display:flex}.qmsckeditor{font-family:Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:400}.qmsckeditor h2{font-size:20px;font-weight:400}.qmsckeditor .mat-icon{color:#909497}.qmsckeditor__fullscreen{position:fixed;inset:0;background:#fff;overflow-y:auto;max-height:100vh;overflow-x:hidden}.qmsckeditor__cursor{cursor:pointer}.qmsckeditor__notallowed{cursor:not-allowed}.qmsckeditor.button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qmsckeditor.button__done{float:right;top:-24px;right:-24px;cursor:pointer;margin-right:20px}.qmsckeditor.button__done .mat-icon{color:#28a745;font-weight:700}.qmsckeditor.button__groups button{min-height:40px;width:100%;border-radius:4px;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px}.qmsckeditor.button__groups .save{background:#f8f9f9}.qmsckeditor.button__groups .save:hover{background:#e5e7e9}.qmsckeditor.button__groups .save:disabled{cursor:not-allowed}.qmsckeditor.button__groups .cancel{background:#f8f9f9}.qmsckeditor.button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.button__groups .cancel:disabled{cursor:not-allowed}.qmsckeditor.button__groups .delete{background:#f8f9f9}.qmsckeditor.button__groups .delete:hover{background:#e5e7e9}.qmsckeditor.button__groups .delete:disabled{cursor:not-allowed}.qmsckeditor.confirm__button__groups button{min-height:36px;border-radius:4px;width:auto;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px;padding-left:15px;padding-right:15px}.qmsckeditor.confirm__button__groups .confirm{background:#f8f9f9}.qmsckeditor.confirm__button__groups .confirm:hover{background:#e5e7e9}.qmsckeditor.confirm__button__groups .cancel{background:#f8f9f9}.qmsckeditor.confirm__button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.template-content.height{min-height:420px;max-height:520px;overflow:auto}.qmsckeditor.template-content.title{margin-left:-9px}.qmsckeditor.link__content.height{min-height:400px;max-height:520px}.qmsckeditor.card{margin-bottom:10px;min-height:60px;box-shadow:none;border:1px solid #e5e5e5}.qmsckeditor.card .title{font-weight:700}.qmsckeditor.card .content{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.qmsckeditor.card .material-icons{font-size:20px}.qmsckeditor.tooltip-content.height{min-height:400px;max-height:472px;overflow:auto}.qmsckeditor.save__as__template.height{height:125px}.ck-content .page-break,.ck-content .ck-horizontal-line{width:100%}.ck-content hr{background:#ccc}.ck-font-size-dropdown .ck-dropdown__panel ul{max-height:320px;overflow-y:auto}.ck-font-size-dropdown .ck-dropdown__panel ul li .ck-fontsize-option .ck-button__label{line-height:50px}::ng-deep .qmsckeditor__tree__containter .input__field input{width:97%;padding:10px;outline:none;border:none;background:#eee}::ng-deep .qmsckeditor__tree__containter .input__field .mat-icon{margin-left:-35px;cursor:pointer;vertical-align:middle}::ng-deep .qmsckeditor__tree__containter .mat-tree{background:#00283a}::ng-deep .qmsckeditor__tree__containter .mat-tree-node{color:#fff;min-height:40px}::ng-deep .qmsckeditor__tree__containter .folder-icon{color:#a4b0de}::ng-deep .qmsckeditor__tree__containter .mat-icon{margin-bottom:5px}::ng-deep .qmsckeditor__tree__containter .content-box{min-width:375px;width:100%;height:435px;overflow-y:auto;background:#00283a;color:#fff}::ng-deep .qmsckeditor__tree__containter .content-box .content-box-item{width:100%;height:56px;border:1px solid #d4d5d6;padding:15px}::ng-deep .qmsckeditor__tree__containter .content-box .content-box-item:hover{background:#d8ddf0;cursor:pointer}::ng-deep .qmsckeditor__tree__containter .content-box .content-box-item .content-box-text{float:left;width:90%;height:26px;overflow:hidden}::ng-deep .qmsckeditor__tree__containter .content-box .content-box-item .content-box-icon{float:right}::ng-deep .qmsckeditor__tree__containter .content-box .content-box-item:not(:last-child){border-bottom:none}::ng-deep .qmsckeditor__tree__containter .content-box strong{text-transform:uppercase;margin:10px 0 0 2px}::ng-deep .qmsckeditor__tree__containter .line-divider{border-bottom:1px solid #ccc;height:1px;margin-top:10px}::ng-deep .qmsckeditor__tree__containter .loading ::ng-deep .mat-mdc-progress-spinner{width:21px;height:21px;margin:0 auto;top:32px}::ng-deep .mat-autocomplete-panel.mat-autocomplete-visible{overflow:hidden;max-height:none}::ng-deep .mat-autocomplete-panel.mat-autocomplete-hidden{visibility:hidden;display:none}\n"] }]
         }], ctorParameters: () => [{ type: QMSCKEditorTreeService }, { type: TranslateLibraryService }, { type: i1$2.MatDialogRef }, { type: QMSCKEditorRelation, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -14898,11 +14898,11 @@ class SelectOneDialog {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectOneDialog, deps: [{ token: i0.ChangeDetectorRef }, { token: TranslateLibraryService }, { token: i1$2.MatDialogRef }, { token: QMSSelectOneGlobalService }, { token: i4.MatIconRegistry }, { token: i1$3.DomSanitizer }, { token: QMSIconRegistryService }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SelectOneDialog, selector: "qms-select-one", host: { listeners: { "window:message": "onMessage($event)" } }, viewQueries: [{ propertyName: "dataTrees", predicate: TreeComponent, descendants: true }], ngImport: i0, template: "<div class=\"qmslib__related__popup__container\">\n  <div>\n    <span mat-icon-button class=\"button__close\" (click)=\"onCloseClick()\">\n      <mat-icon mat-icon>close</mat-icon>\n    </span>\n    <div class=\"module-name\" mat-dialog-content>\n      <span>{{ moduleName }}</span>\n    </div>\n  </div>\n\n  <div class=\"input__field\">\n    <input type=\"text\" placeholder=\"{{ LANG.SEARCH }}\" matInput [formControl]=\"myControl\" [matAutocomplete]=\"auto\" />\n    <mat-icon>search</mat-icon>\n  </div>\n\n  <div class=\"line__divider\"></div>\n\n  <mat-autocomplete mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\">\n\n    <div class=\"search__module-result\" *ngIf=\"filteredOptions.length\">\n      <mat-option class=\"search__option\" *ngFor=\"let option of getModuleFilteredOptions()\" [value]=\"option\"\n        (click)=\"selectItemSearched(option)\">\n        <qms-list-item class=\"item-suggestion\" type=\"image-square\">\n          <mat-icon leading-icon type=\"image-square\" [svgIcon]=\"getNodeIcon(option)\"></mat-icon>\n          <div qms-list-header>\n            <div qms-line type=\"caption\" qms-tool-tip=\"{{\n                  isEllipsisActive(searchItemResult) ? option.parentName : ''\n                }}\" mode=\"dark\" *ngIf=\"getParentName(option)\">\n              <span #searchItemResult class=\"search__result__parent-name\">\n                {{ option.parentName }}\n              </span>\n            </div>\n            <div qms-line type=\"subtitle\" class=\"search__option-name\">\n              {{ option.itemName }}\n            </div>\n            <div class=\"caption\" *ngIf=\"option.breadcumbs && option.breadcumbs.length\">\n              <qms-breadcrumb class=\"breadcrumb-container\" type=\"table\" numDisplayItem=\"1\" [nodes]=\"option.breadcumbs\">\n              </qms-breadcrumb>\n            </div>\n          </div>\n          <div qms-line color=\"default-subtitle\" *ngIf=\"getItemId(option)\">\n            <span>\n              <mat-icon class=\"material-icons-outlined search__description-icon\">\n                local_offer\n              </mat-icon>\n            </span>\n            {{ getItemId(option) }}\n          </div>\n        </qms-list-item>\n      </mat-option>\n    </div>\n  </mat-autocomplete>\n\n  <div class=\"row\">\n    <div class=\"qms-scrollbar col-12 qmslib_related_popup_content panel__content_item\">\n      <mat-expansion-panel hideToggle id=\"qmslib_related_popup_common_001\" [expanded]=\"isCommonExpanded\"\n        (opened)=\"isCommonExpanded = true\" (closed)=\"isCommonExpanded = false\" class=\"panel-tree\">\n        <div id=\"qmslib_related_popup_common_002\">\n          <qms-tree [treeData]=\"treeData\" [treeConfig]=\"treeConfig\" [selectedData]=\"selectedData\"\n            [selectedRiskData]=\"selectedRiskData\" [disabledList]=\"disabledList\"\n            (selectNodeEvent)=\"selectNodeTreeEvent($event)\" (nodeExpandEvent)=\"nodeExpandEvent($event)\"\n            [expandOnTitleClick]=\"false\" [expandToChildNode]=\"expandToChildNode\"\n            (nodeCondensedEvent)=\"nodeCondensedEvent($event)\"></qms-tree>\n        </div>\n      </mat-expansion-panel>\n    </div>\n  </div>\n\n  <!-- <div *ngIf=\"checkedNodeList.length\" class=\"line__divider\"></div>\n\n  <div *ngIf=\"checkedNodeList.length\" class=\"panel__item qms-scrollbar\">\n    <div class=\"related__item__inline\" *ngFor=\"let item of checkedNodeList\">\n      <button\n        *ngIf=\"item.itemName\"\n        mat-button\n        class=\"related__item__content\"\n        qms-tool-tip=\"{{\n          isEllipsisActive(itemName) ? getItemChipName(item) : ''\n        }}\"\n        mode=\"dark\"\n      >\n        <span class=\"related__item__content_name\" #itemName>{{\n          getItemChipName(item)\n        }}</span>\n        <mat-icon (click)=\"removeCheckedNodeList()\">cancel</mat-icon>\n      </button>\n    </div>\n  </div> -->\n\n  <div class=\"line__divider\"></div>\n\n  <div class=\"confirm__button__groups\">\n    <button qms-btn [class.add-button-spacing-top-7px]=\"!checkedNodeList.length\" (click)=\"onAddClick()\">\n      {{ LANG.ADD }} {{ checkedNodeList?.length ? '(' + checkedNodeList?.length + ')' : ''}}\n    </button>\n    <button qms-btn-text [ngStyle]=\"{ 'margin-top': checkedNodeList.length ? '0px' : '7px' }\" (click)=\"onCloseClick()\">\n      {{ LANG.CANCEL }}\n    </button>\n  </div>\n</div>", styles: ["::-webkit-scrollbar{width:12px}::-webkit-scrollbar-track{background:#0000001f;background-clip:content-box}::-webkit-scrollbar-thumb{background:#00000061;border-radius:20px;width:4px;border:4px solid transparent;background-clip:content-box}::-webkit-scrollbar-thumb:hover{background:#00000080;background-clip:content-box;border:4px solid transparent}.qms__popup .button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qms__danger button{border:none;color:var(--text-white);padding:0;text-align:center;text-decoration:none;display:inline-block;cursor:pointer;height:20px;width:20px;font-family:Open Sans;font-size:12px;font-weight:600;font-style:normal;line-height:16px}.qms__danger .red{background-color:var(--button-red-background);margin-left:10px}.qms__danger .yellow{background-color:var(--button-yellow-background);margin-left:10px;color:var(--popup-title-color)}.qms__danger .green{background-color:var(--button-green-background);margin-left:10px}.confirm__button__groups{margin-top:11px}.confirm__button__groups button{min-height:36px;width:auto;font-family:Open Sans;font-weight:500;font-size:14px;letter-spacing:1px;line-height:16px;padding-left:15px;padding-right:15px;margin-right:5px;float:right}.confirm__button__groups .confirm{background:var(--button-background)}.confirm__button__groups .confirm:hover{background:var(--primary-button-background-color);color:var(--primary-button-text-color)}.confirm__button__groups .confirm:disabled{cursor:not-allowed}.confirm__button__groups .cancel{background:var(--button-background)}.confirm__button__groups .cancel:hover{background:var(--primary-button-background-color);color:var(--primary-button-text-color)}.qms-list-item.item-suggestion .image-square.wrap-image{width:2.5rem!important;height:100%!important;background:transparent;align-self:center;margin-right:0}::ng-deep .mat-mdc-option:hover:not(.mat-option-disabled),.mat-option:focus:not(.mat-option-disabled){background:transparent!important}.qmslib__related__popup__container .input__field{display:flex;align-items:center}.qmslib__related__popup__container .input__field input{width:100%;padding:10px;outline:none;border:none;background:var(--background-input-text)}.qmslib__related__popup__container .input__field .mat-icon{margin-left:-30px;cursor:pointer;vertical-align:middle}.qmslib__related__popup__container .line__divider{border-bottom:1px solid #ccc;height:1px;margin-top:10px;min-width:300px;max-width:100%}.qmslib__related__popup__container .button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qmslib__related__popup__container .panel__content{height:450px;overflow:auto;margin-top:12px}.qmslib__related__popup__container .panel__content_item{height:350px;overflow:auto;margin-top:12px}.qmslib__related__popup__container .panel-tree .mat-expansion-panel-body{padding:0 12px 12px}.qmslib__related__popup__container .mat-expansion-panel-header{height:30px;font-size:12px;letter-spacing:1px;font-family:Raleway;font-weight:600;padding:0}.qmslib__related__popup__container .mat-expansion-panel-header .mat-expansion-panel-header-title{align-items:center;margin-left:12px}.qmslib__related__popup__container .mat-expansion-panel-header .related_popup_toggle-btn{width:1.5rem;height:1.5rem;line-height:1.5rem}.qmslib__related__popup__container .mat-expansion-panel:not([class*=mat-elevation-z]){box-shadow:none}.qmslib__related__popup__container .panel__item{height:100px;margin-top:12px;overflow-x:hidden;overflow-y:auto;padding-right:5px;width:100%;max-width:100%;display:flex;flex-wrap:wrap;align-content:flex-start}.qmslib__related__popup__container .panel__item .related__item__inline{max-width:100%}.qmslib__related__popup__container .panel__item .related__item__content{height:32px;line-height:32px;background-color:var(--related-item-background);max-width:100%;margin-bottom:5px;margin-left:2.5px;margin-right:2.5px}.qmslib__related__popup__container .panel__item .related__item__content .mat-icon{color:var(--related-mat-icon-color);font-size:24px}.qmslib__related__popup__container .panel__item .related__item__content span.related__item__content_name{display:inline-block;min-width:calc(100% - 13px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:320px}.qmslib__related__popup__container .add-button-spacing-top-7px{margin-top:7px}.search__module-result{margin:1.5rem;padding:0 0 .5rem 0px}.search__module-result .search__module-title{font-size:14px;font-weight:600}.search__module-result .search__option{height:auto;line-height:normal;padding:0;border-bottom:1px solid #e0e0e0}.search__module-result .search__option .qms-list-item.mat-2-line.image-item{height:auto}.search__module-result .search__option .qms-list-item-content{margin:0;border-bottom:none}.search__module-result .search__option .qms-list-item-content .material-icons-outlined.leading-icon,.search__module-result .search__option .qms-list-item-content mat-icon.leading-icon{padding:4px 0 4px 4px}.search__module-result .search__option .qms-list-item-content .caption{overflow:hidden;line-height:normal;white-space:normal;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;padding:0;margin:0}.search__module-result .search__option .qms-list-item-content .caption span.search__result__parent-name{display:inline-block;width:auto;width:calc(100% - 13px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search__module-result .search__option .qms-list-item-content .default-subtitle{color:#00000061}.search__module-result .search__option .qms-list-item-content .search__description-icon{margin-right:0;width:12px;height:12px;font-size:12px}.search__module-result .search__option .qms-list-item-content .qms-list-text{border-bottom:none;height:auto}.search__module-result .search__option .qms-list-item-content .breadcrumb-container .qms-breadcrumb-item .mat-icon{font-size:16px!important;padding-bottom:1px}.search__module-result .search__option.mat-mdc-option:hover:not(.mat-option-disabled),.search__module-result .search__option .mat-option:focus:not(.mat-option-disabled){background:transparent!important}.search__module-result svg{display:block}.module-name{margin-bottom:20px;padding:0;font-weight:600;font-family:Raleway}.padding-5{padding:5px}.mat-mdc-autocomplete_related-viewport{height:100%;max-height:100%!important}.mat-mdc-autocomplete_related-viewport .cdk-virtual-scroll-content-wrapper{width:100%}.mat-mdc-autocomplete_related-viewport .related-viewport{min-height:10.25rem}\n"], dependencies: [{ kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i9$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i14.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i9$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: QMSButton, selector: "button[qms-btn], button[qms-btn-lg], button[qms-btn-outlined],\n               button[qms-btn-outlined-lg], button[qms-btn-text], button[qms-btn-text-lg],\n               button[qms-btn-fab],button[qms-btn-fab-sm],button[qms-btn-fab-ext],\n               button[qms-btn-fab-outlined],button[qms-btn-fab-outlined-sm],button[qms-btn-fab-outlined-ext]", inputs: ["disabled", "color"], exportAs: ["qmsButton"] }, { kind: "component", type: QMSListItem, selector: "qms-list-item", inputs: ["type", "disabled"] }, { kind: "directive", type: QMSListLeadingIcon, selector: "[leading-icon]" }, { kind: "directive", type: QMSListLine, selector: "[qms-line]", inputs: ["size", "type", "color"] }, { kind: "directive", type: QMSListHeader, selector: "[qms-list-header]" }, { kind: "directive", type: QMSToolTipRendererDirective, selector: "[qms-tool-tip]", inputs: ["showToolTip", "mode", "qms-tool-tip", "contentTemplate", "position"] }, { kind: "component", type: QMSBreadcrumb, selector: "qms-breadcrumb", inputs: ["nodes", "type", "maxLine", "numDisplayItem", "onlyItem", "disabledLastItem"], outputs: ["onItemClick"] }, { kind: "component", type: TreeComponent, selector: "qms-tree", inputs: ["treeData", "treeConfig", "selectedData", "selectedRiskData", "disabledList", "expandOnTitleClick", "expandToChildNode", "parentNodeOnClick"], outputs: ["selectNodeEvent", "selectFolderEvent", "checkBoxEvent", "childCheckedEvent", "nodeExpandEvent", "treeControlNodes", "nodeCondensedEvent"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SelectOneDialog, selector: "qms-select-one", host: { listeners: { "window:message": "onMessage($event)" } }, viewQueries: [{ propertyName: "dataTrees", predicate: TreeComponent, descendants: true }], ngImport: i0, template: "<h2 mat-dialog-title>\n  <span>{{ moduleName }}</span>\n  <button qms-btn-icon class=\"close-btn\" (click)=\"onCloseClick()\">\n    <mat-icon mat-icon>close</mat-icon>\n  </button>\n</h2>\n<mat-dialog-content>\n  <mat-autocomplete mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\">\n    <div class=\"search__module-result\" *ngIf=\"filteredOptions.length\">\n      <mat-option class=\"search__option\" *ngFor=\"let option of getModuleFilteredOptions()\" [value]=\"option\"\n        (click)=\"selectItemSearched(option)\">\n        <qms-list-item class=\"item-suggestion\" type=\"image-square\">\n          <mat-icon leading-icon type=\"image-square\" [svgIcon]=\"getNodeIcon(option)\"></mat-icon>\n          <div qms-list-header>\n            <div qms-line type=\"caption\" qms-tool-tip=\"{{\n                  isEllipsisActive(searchItemResult) ? option.parentName : ''\n                }}\" mode=\"dark\" *ngIf=\"getParentName(option)\">\n              <span #searchItemResult class=\"search__result__parent-name\">\n                {{ option.parentName }}\n              </span>\n            </div>\n            <div qms-line type=\"subtitle\" class=\"search__option-name\">\n              {{ option.itemName }}\n            </div>\n            <div class=\"caption\" *ngIf=\"option.breadcumbs && option.breadcumbs.length\">\n              <qms-breadcrumb class=\"breadcrumb-container\" type=\"table\" numDisplayItem=\"1\" [nodes]=\"option.breadcumbs\">\n              </qms-breadcrumb>\n            </div>\n          </div>\n          <div qms-line color=\"default-subtitle\" *ngIf=\"getItemId(option)\">\n            <span>\n              <mat-icon class=\"material-icons-outlined search__description-icon\">\n                local_offer\n              </mat-icon>\n            </span>\n            {{ getItemId(option) }}\n          </div>\n        </qms-list-item>\n      </mat-option>\n    </div>\n  </mat-autocomplete>\n\n  <div class=\"row\">\n    <div class=\"qms-scrollbar col-12 qmslib_related_popup_content panel__content_item\">\n      <mat-expansion-panel hideToggle id=\"qmslib_related_popup_common_001\" [expanded]=\"isCommonExpanded\"\n        (opened)=\"isCommonExpanded = true\" (closed)=\"isCommonExpanded = false\" class=\"panel-tree\">\n        <div id=\"qmslib_related_popup_common_002\">\n          <qms-tree [treeData]=\"treeData\" [treeConfig]=\"treeConfig\" [selectedData]=\"selectedData\"\n            [selectedRiskData]=\"selectedRiskData\" [disabledList]=\"disabledList\"\n            (selectNodeEvent)=\"selectNodeTreeEvent($event)\" (nodeExpandEvent)=\"nodeExpandEvent($event)\"\n            [expandOnTitleClick]=\"false\" [expandToChildNode]=\"expandToChildNode\"\n            (nodeCondensedEvent)=\"nodeCondensedEvent($event)\"></qms-tree>\n        </div>\n      </mat-expansion-panel>\n    </div>\n  </div>\n</mat-dialog-content>\n<mat-dialog-actions>\n  <button qms-btn-text (click)=\"onCloseClick()\">\n    {{ LANG.CANCEL }}\n  </button>\n  <button qms-btn (click)=\"onAddClick()\">\n    {{ LANG.ADD }} {{ checkedNodeList?.length ? '(' + checkedNodeList?.length + ')' : ''}}\n  </button>\n</mat-dialog-actions>", styles: ["::-webkit-scrollbar{width:12px}::-webkit-scrollbar-track{background:#0000001f;background-clip:content-box}::-webkit-scrollbar-thumb{background:#00000061;border-radius:20px;width:4px;border:4px solid transparent;background-clip:content-box}::-webkit-scrollbar-thumb:hover{background:#00000080;background-clip:content-box;border:4px solid transparent}.qms__popup .button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qms__danger button{border:none;color:var(--text-white);padding:0;text-align:center;text-decoration:none;display:inline-block;cursor:pointer;height:20px;width:20px;font-family:Open Sans;font-size:12px;font-weight:600;font-style:normal;line-height:16px}.qms__danger .red{background-color:var(--button-red-background);margin-left:10px}.qms__danger .yellow{background-color:var(--button-yellow-background);margin-left:10px;color:var(--popup-title-color)}.qms__danger .green{background-color:var(--button-green-background);margin-left:10px}.confirm__button__groups{margin-top:11px}.confirm__button__groups button{min-height:36px;width:auto;font-family:Open Sans;font-weight:500;font-size:14px;letter-spacing:1px;line-height:16px;padding-left:15px;padding-right:15px;margin-right:5px;float:right}.confirm__button__groups .confirm{background:var(--button-background)}.confirm__button__groups .confirm:hover{background:var(--primary-button-background-color);color:var(--primary-button-text-color)}.confirm__button__groups .confirm:disabled{cursor:not-allowed}.confirm__button__groups .cancel{background:var(--button-background)}.confirm__button__groups .cancel:hover{background:var(--primary-button-background-color);color:var(--primary-button-text-color)}.qms-list-item.item-suggestion .image-square.wrap-image{width:2.5rem!important;height:100%!important;background:transparent;align-self:center;margin-right:0}::ng-deep .mat-mdc-option:hover:not(.mat-option-disabled),.mat-option:focus:not(.mat-option-disabled){background:transparent!important}.qmslib__related__popup__container .input__field{display:flex;align-items:center}.qmslib__related__popup__container .input__field input{width:100%;padding:10px;outline:none;border:none;background:var(--background-input-text)}.qmslib__related__popup__container .input__field .mat-icon{margin-left:-30px;cursor:pointer;vertical-align:middle}.qmslib__related__popup__container .line__divider{border-bottom:1px solid #ccc;height:1px;margin-top:10px;min-width:300px;max-width:100%}.qmslib__related__popup__container .button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qmslib__related__popup__container .panel__content{height:450px;overflow:auto;margin-top:12px}.qmslib__related__popup__container .panel__content_item{height:350px;overflow:auto;margin-top:12px}.qmslib__related__popup__container .panel-tree .mat-expansion-panel-body{padding:0 12px 12px}.qmslib__related__popup__container .mat-expansion-panel-header{height:30px;font-size:12px;letter-spacing:1px;font-family:Raleway;font-weight:600;padding:0}.qmslib__related__popup__container .mat-expansion-panel-header .mat-expansion-panel-header-title{align-items:center;margin-left:12px}.qmslib__related__popup__container .mat-expansion-panel-header .related_popup_toggle-btn{width:1.5rem;height:1.5rem;line-height:1.5rem}.qmslib__related__popup__container .mat-expansion-panel:not([class*=mat-elevation-z]){box-shadow:none}.qmslib__related__popup__container .panel__item{height:100px;margin-top:12px;overflow-x:hidden;overflow-y:auto;padding-right:5px;width:100%;max-width:100%;display:flex;flex-wrap:wrap;align-content:flex-start}.qmslib__related__popup__container .panel__item .related__item__inline{max-width:100%}.qmslib__related__popup__container .panel__item .related__item__content{height:32px;line-height:32px;background-color:var(--related-item-background);max-width:100%;margin-bottom:5px;margin-left:2.5px;margin-right:2.5px}.qmslib__related__popup__container .panel__item .related__item__content .mat-icon{color:var(--related-mat-icon-color);font-size:24px}.qmslib__related__popup__container .panel__item .related__item__content span.related__item__content_name{display:inline-block;min-width:calc(100% - 13px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:320px}.qmslib__related__popup__container .add-button-spacing-top-7px{margin-top:7px}.search__module-result{margin:1.5rem;padding:0 0 .5rem 0px}.search__module-result .search__module-title{font-size:14px;font-weight:600}.search__module-result .search__option{height:auto;line-height:normal;padding:0;border-bottom:1px solid #e0e0e0}.search__module-result .search__option .qms-list-item.mat-2-line.image-item{height:auto}.search__module-result .search__option .qms-list-item-content{margin:0;border-bottom:none}.search__module-result .search__option .qms-list-item-content .material-icons-outlined.leading-icon,.search__module-result .search__option .qms-list-item-content mat-icon.leading-icon{padding:4px 0 4px 4px}.search__module-result .search__option .qms-list-item-content .caption{overflow:hidden;line-height:normal;white-space:normal;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;padding:0;margin:0}.search__module-result .search__option .qms-list-item-content .caption span.search__result__parent-name{display:inline-block;width:auto;width:calc(100% - 13px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search__module-result .search__option .qms-list-item-content .default-subtitle{color:#00000061}.search__module-result .search__option .qms-list-item-content .search__description-icon{margin-right:0;width:12px;height:12px;font-size:12px}.search__module-result .search__option .qms-list-item-content .qms-list-text{border-bottom:none;height:auto}.search__module-result .search__option .qms-list-item-content .breadcrumb-container .qms-breadcrumb-item .mat-icon{font-size:16px!important;padding-bottom:1px}.search__module-result .search__option.mat-mdc-option:hover:not(.mat-option-disabled),.search__module-result .search__option .mat-option:focus:not(.mat-option-disabled){background:transparent!important}.search__module-result svg{display:block}.module-name{margin-bottom:20px;padding:0;font-weight:600;font-family:Raleway}.padding-5{padding:5px}.mat-mdc-autocomplete_related-viewport{height:100%;max-height:100%!important}.mat-mdc-autocomplete_related-viewport .cdk-virtual-scroll-content-wrapper{width:100%}.mat-mdc-autocomplete_related-viewport .related-viewport{min-height:10.25rem}\n"], dependencies: [{ kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i9$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i14.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i1$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: QMSButton, selector: "button[qms-btn], button[qms-btn-lg], button[qms-btn-outlined],\n               button[qms-btn-outlined-lg], button[qms-btn-text], button[qms-btn-text-lg],\n               button[qms-btn-fab],button[qms-btn-fab-sm],button[qms-btn-fab-ext],\n               button[qms-btn-fab-outlined],button[qms-btn-fab-outlined-sm],button[qms-btn-fab-outlined-ext]", inputs: ["disabled", "color"], exportAs: ["qmsButton"] }, { kind: "component", type: QMSButtonIcon, selector: "button[qms-btn-icon]", inputs: ["disabled", "color", "active"], exportAs: ["qmsButtonIcon"] }, { kind: "component", type: QMSListItem, selector: "qms-list-item", inputs: ["type", "disabled"] }, { kind: "directive", type: QMSListLeadingIcon, selector: "[leading-icon]" }, { kind: "directive", type: QMSListLine, selector: "[qms-line]", inputs: ["size", "type", "color"] }, { kind: "directive", type: QMSListHeader, selector: "[qms-list-header]" }, { kind: "directive", type: QMSToolTipRendererDirective, selector: "[qms-tool-tip]", inputs: ["showToolTip", "mode", "qms-tool-tip", "contentTemplate", "position"] }, { kind: "component", type: QMSBreadcrumb, selector: "qms-breadcrumb", inputs: ["nodes", "type", "maxLine", "numDisplayItem", "onlyItem", "disabledLastItem"], outputs: ["onItemClick"] }, { kind: "component", type: TreeComponent, selector: "qms-tree", inputs: ["treeData", "treeConfig", "selectedData", "selectedRiskData", "disabledList", "expandOnTitleClick", "expandToChildNode", "parentNodeOnClick"], outputs: ["selectNodeEvent", "selectFolderEvent", "checkBoxEvent", "childCheckedEvent", "nodeExpandEvent", "treeControlNodes", "nodeCondensedEvent"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectOneDialog, decorators: [{
             type: Component,
-            args: [{ selector: 'qms-select-one', encapsulation: ViewEncapsulation.None, template: "<div class=\"qmslib__related__popup__container\">\n  <div>\n    <span mat-icon-button class=\"button__close\" (click)=\"onCloseClick()\">\n      <mat-icon mat-icon>close</mat-icon>\n    </span>\n    <div class=\"module-name\" mat-dialog-content>\n      <span>{{ moduleName }}</span>\n    </div>\n  </div>\n\n  <div class=\"input__field\">\n    <input type=\"text\" placeholder=\"{{ LANG.SEARCH }}\" matInput [formControl]=\"myControl\" [matAutocomplete]=\"auto\" />\n    <mat-icon>search</mat-icon>\n  </div>\n\n  <div class=\"line__divider\"></div>\n\n  <mat-autocomplete mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\">\n\n    <div class=\"search__module-result\" *ngIf=\"filteredOptions.length\">\n      <mat-option class=\"search__option\" *ngFor=\"let option of getModuleFilteredOptions()\" [value]=\"option\"\n        (click)=\"selectItemSearched(option)\">\n        <qms-list-item class=\"item-suggestion\" type=\"image-square\">\n          <mat-icon leading-icon type=\"image-square\" [svgIcon]=\"getNodeIcon(option)\"></mat-icon>\n          <div qms-list-header>\n            <div qms-line type=\"caption\" qms-tool-tip=\"{{\n                  isEllipsisActive(searchItemResult) ? option.parentName : ''\n                }}\" mode=\"dark\" *ngIf=\"getParentName(option)\">\n              <span #searchItemResult class=\"search__result__parent-name\">\n                {{ option.parentName }}\n              </span>\n            </div>\n            <div qms-line type=\"subtitle\" class=\"search__option-name\">\n              {{ option.itemName }}\n            </div>\n            <div class=\"caption\" *ngIf=\"option.breadcumbs && option.breadcumbs.length\">\n              <qms-breadcrumb class=\"breadcrumb-container\" type=\"table\" numDisplayItem=\"1\" [nodes]=\"option.breadcumbs\">\n              </qms-breadcrumb>\n            </div>\n          </div>\n          <div qms-line color=\"default-subtitle\" *ngIf=\"getItemId(option)\">\n            <span>\n              <mat-icon class=\"material-icons-outlined search__description-icon\">\n                local_offer\n              </mat-icon>\n            </span>\n            {{ getItemId(option) }}\n          </div>\n        </qms-list-item>\n      </mat-option>\n    </div>\n  </mat-autocomplete>\n\n  <div class=\"row\">\n    <div class=\"qms-scrollbar col-12 qmslib_related_popup_content panel__content_item\">\n      <mat-expansion-panel hideToggle id=\"qmslib_related_popup_common_001\" [expanded]=\"isCommonExpanded\"\n        (opened)=\"isCommonExpanded = true\" (closed)=\"isCommonExpanded = false\" class=\"panel-tree\">\n        <div id=\"qmslib_related_popup_common_002\">\n          <qms-tree [treeData]=\"treeData\" [treeConfig]=\"treeConfig\" [selectedData]=\"selectedData\"\n            [selectedRiskData]=\"selectedRiskData\" [disabledList]=\"disabledList\"\n            (selectNodeEvent)=\"selectNodeTreeEvent($event)\" (nodeExpandEvent)=\"nodeExpandEvent($event)\"\n            [expandOnTitleClick]=\"false\" [expandToChildNode]=\"expandToChildNode\"\n            (nodeCondensedEvent)=\"nodeCondensedEvent($event)\"></qms-tree>\n        </div>\n      </mat-expansion-panel>\n    </div>\n  </div>\n\n  <!-- <div *ngIf=\"checkedNodeList.length\" class=\"line__divider\"></div>\n\n  <div *ngIf=\"checkedNodeList.length\" class=\"panel__item qms-scrollbar\">\n    <div class=\"related__item__inline\" *ngFor=\"let item of checkedNodeList\">\n      <button\n        *ngIf=\"item.itemName\"\n        mat-button\n        class=\"related__item__content\"\n        qms-tool-tip=\"{{\n          isEllipsisActive(itemName) ? getItemChipName(item) : ''\n        }}\"\n        mode=\"dark\"\n      >\n        <span class=\"related__item__content_name\" #itemName>{{\n          getItemChipName(item)\n        }}</span>\n        <mat-icon (click)=\"removeCheckedNodeList()\">cancel</mat-icon>\n      </button>\n    </div>\n  </div> -->\n\n  <div class=\"line__divider\"></div>\n\n  <div class=\"confirm__button__groups\">\n    <button qms-btn [class.add-button-spacing-top-7px]=\"!checkedNodeList.length\" (click)=\"onAddClick()\">\n      {{ LANG.ADD }} {{ checkedNodeList?.length ? '(' + checkedNodeList?.length + ')' : ''}}\n    </button>\n    <button qms-btn-text [ngStyle]=\"{ 'margin-top': checkedNodeList.length ? '0px' : '7px' }\" (click)=\"onCloseClick()\">\n      {{ LANG.CANCEL }}\n    </button>\n  </div>\n</div>", styles: ["::-webkit-scrollbar{width:12px}::-webkit-scrollbar-track{background:#0000001f;background-clip:content-box}::-webkit-scrollbar-thumb{background:#00000061;border-radius:20px;width:4px;border:4px solid transparent;background-clip:content-box}::-webkit-scrollbar-thumb:hover{background:#00000080;background-clip:content-box;border:4px solid transparent}.qms__popup .button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qms__danger button{border:none;color:var(--text-white);padding:0;text-align:center;text-decoration:none;display:inline-block;cursor:pointer;height:20px;width:20px;font-family:Open Sans;font-size:12px;font-weight:600;font-style:normal;line-height:16px}.qms__danger .red{background-color:var(--button-red-background);margin-left:10px}.qms__danger .yellow{background-color:var(--button-yellow-background);margin-left:10px;color:var(--popup-title-color)}.qms__danger .green{background-color:var(--button-green-background);margin-left:10px}.confirm__button__groups{margin-top:11px}.confirm__button__groups button{min-height:36px;width:auto;font-family:Open Sans;font-weight:500;font-size:14px;letter-spacing:1px;line-height:16px;padding-left:15px;padding-right:15px;margin-right:5px;float:right}.confirm__button__groups .confirm{background:var(--button-background)}.confirm__button__groups .confirm:hover{background:var(--primary-button-background-color);color:var(--primary-button-text-color)}.confirm__button__groups .confirm:disabled{cursor:not-allowed}.confirm__button__groups .cancel{background:var(--button-background)}.confirm__button__groups .cancel:hover{background:var(--primary-button-background-color);color:var(--primary-button-text-color)}.qms-list-item.item-suggestion .image-square.wrap-image{width:2.5rem!important;height:100%!important;background:transparent;align-self:center;margin-right:0}::ng-deep .mat-mdc-option:hover:not(.mat-option-disabled),.mat-option:focus:not(.mat-option-disabled){background:transparent!important}.qmslib__related__popup__container .input__field{display:flex;align-items:center}.qmslib__related__popup__container .input__field input{width:100%;padding:10px;outline:none;border:none;background:var(--background-input-text)}.qmslib__related__popup__container .input__field .mat-icon{margin-left:-30px;cursor:pointer;vertical-align:middle}.qmslib__related__popup__container .line__divider{border-bottom:1px solid #ccc;height:1px;margin-top:10px;min-width:300px;max-width:100%}.qmslib__related__popup__container .button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qmslib__related__popup__container .panel__content{height:450px;overflow:auto;margin-top:12px}.qmslib__related__popup__container .panel__content_item{height:350px;overflow:auto;margin-top:12px}.qmslib__related__popup__container .panel-tree .mat-expansion-panel-body{padding:0 12px 12px}.qmslib__related__popup__container .mat-expansion-panel-header{height:30px;font-size:12px;letter-spacing:1px;font-family:Raleway;font-weight:600;padding:0}.qmslib__related__popup__container .mat-expansion-panel-header .mat-expansion-panel-header-title{align-items:center;margin-left:12px}.qmslib__related__popup__container .mat-expansion-panel-header .related_popup_toggle-btn{width:1.5rem;height:1.5rem;line-height:1.5rem}.qmslib__related__popup__container .mat-expansion-panel:not([class*=mat-elevation-z]){box-shadow:none}.qmslib__related__popup__container .panel__item{height:100px;margin-top:12px;overflow-x:hidden;overflow-y:auto;padding-right:5px;width:100%;max-width:100%;display:flex;flex-wrap:wrap;align-content:flex-start}.qmslib__related__popup__container .panel__item .related__item__inline{max-width:100%}.qmslib__related__popup__container .panel__item .related__item__content{height:32px;line-height:32px;background-color:var(--related-item-background);max-width:100%;margin-bottom:5px;margin-left:2.5px;margin-right:2.5px}.qmslib__related__popup__container .panel__item .related__item__content .mat-icon{color:var(--related-mat-icon-color);font-size:24px}.qmslib__related__popup__container .panel__item .related__item__content span.related__item__content_name{display:inline-block;min-width:calc(100% - 13px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:320px}.qmslib__related__popup__container .add-button-spacing-top-7px{margin-top:7px}.search__module-result{margin:1.5rem;padding:0 0 .5rem 0px}.search__module-result .search__module-title{font-size:14px;font-weight:600}.search__module-result .search__option{height:auto;line-height:normal;padding:0;border-bottom:1px solid #e0e0e0}.search__module-result .search__option .qms-list-item.mat-2-line.image-item{height:auto}.search__module-result .search__option .qms-list-item-content{margin:0;border-bottom:none}.search__module-result .search__option .qms-list-item-content .material-icons-outlined.leading-icon,.search__module-result .search__option .qms-list-item-content mat-icon.leading-icon{padding:4px 0 4px 4px}.search__module-result .search__option .qms-list-item-content .caption{overflow:hidden;line-height:normal;white-space:normal;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;padding:0;margin:0}.search__module-result .search__option .qms-list-item-content .caption span.search__result__parent-name{display:inline-block;width:auto;width:calc(100% - 13px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search__module-result .search__option .qms-list-item-content .default-subtitle{color:#00000061}.search__module-result .search__option .qms-list-item-content .search__description-icon{margin-right:0;width:12px;height:12px;font-size:12px}.search__module-result .search__option .qms-list-item-content .qms-list-text{border-bottom:none;height:auto}.search__module-result .search__option .qms-list-item-content .breadcrumb-container .qms-breadcrumb-item .mat-icon{font-size:16px!important;padding-bottom:1px}.search__module-result .search__option.mat-mdc-option:hover:not(.mat-option-disabled),.search__module-result .search__option .mat-option:focus:not(.mat-option-disabled){background:transparent!important}.search__module-result svg{display:block}.module-name{margin-bottom:20px;padding:0;font-weight:600;font-family:Raleway}.padding-5{padding:5px}.mat-mdc-autocomplete_related-viewport{height:100%;max-height:100%!important}.mat-mdc-autocomplete_related-viewport .cdk-virtual-scroll-content-wrapper{width:100%}.mat-mdc-autocomplete_related-viewport .related-viewport{min-height:10.25rem}\n"] }]
+            args: [{ selector: 'qms-select-one', encapsulation: ViewEncapsulation.None, template: "<h2 mat-dialog-title>\n  <span>{{ moduleName }}</span>\n  <button qms-btn-icon class=\"close-btn\" (click)=\"onCloseClick()\">\n    <mat-icon mat-icon>close</mat-icon>\n  </button>\n</h2>\n<mat-dialog-content>\n  <mat-autocomplete mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\">\n    <div class=\"search__module-result\" *ngIf=\"filteredOptions.length\">\n      <mat-option class=\"search__option\" *ngFor=\"let option of getModuleFilteredOptions()\" [value]=\"option\"\n        (click)=\"selectItemSearched(option)\">\n        <qms-list-item class=\"item-suggestion\" type=\"image-square\">\n          <mat-icon leading-icon type=\"image-square\" [svgIcon]=\"getNodeIcon(option)\"></mat-icon>\n          <div qms-list-header>\n            <div qms-line type=\"caption\" qms-tool-tip=\"{{\n                  isEllipsisActive(searchItemResult) ? option.parentName : ''\n                }}\" mode=\"dark\" *ngIf=\"getParentName(option)\">\n              <span #searchItemResult class=\"search__result__parent-name\">\n                {{ option.parentName }}\n              </span>\n            </div>\n            <div qms-line type=\"subtitle\" class=\"search__option-name\">\n              {{ option.itemName }}\n            </div>\n            <div class=\"caption\" *ngIf=\"option.breadcumbs && option.breadcumbs.length\">\n              <qms-breadcrumb class=\"breadcrumb-container\" type=\"table\" numDisplayItem=\"1\" [nodes]=\"option.breadcumbs\">\n              </qms-breadcrumb>\n            </div>\n          </div>\n          <div qms-line color=\"default-subtitle\" *ngIf=\"getItemId(option)\">\n            <span>\n              <mat-icon class=\"material-icons-outlined search__description-icon\">\n                local_offer\n              </mat-icon>\n            </span>\n            {{ getItemId(option) }}\n          </div>\n        </qms-list-item>\n      </mat-option>\n    </div>\n  </mat-autocomplete>\n\n  <div class=\"row\">\n    <div class=\"qms-scrollbar col-12 qmslib_related_popup_content panel__content_item\">\n      <mat-expansion-panel hideToggle id=\"qmslib_related_popup_common_001\" [expanded]=\"isCommonExpanded\"\n        (opened)=\"isCommonExpanded = true\" (closed)=\"isCommonExpanded = false\" class=\"panel-tree\">\n        <div id=\"qmslib_related_popup_common_002\">\n          <qms-tree [treeData]=\"treeData\" [treeConfig]=\"treeConfig\" [selectedData]=\"selectedData\"\n            [selectedRiskData]=\"selectedRiskData\" [disabledList]=\"disabledList\"\n            (selectNodeEvent)=\"selectNodeTreeEvent($event)\" (nodeExpandEvent)=\"nodeExpandEvent($event)\"\n            [expandOnTitleClick]=\"false\" [expandToChildNode]=\"expandToChildNode\"\n            (nodeCondensedEvent)=\"nodeCondensedEvent($event)\"></qms-tree>\n        </div>\n      </mat-expansion-panel>\n    </div>\n  </div>\n</mat-dialog-content>\n<mat-dialog-actions>\n  <button qms-btn-text (click)=\"onCloseClick()\">\n    {{ LANG.CANCEL }}\n  </button>\n  <button qms-btn (click)=\"onAddClick()\">\n    {{ LANG.ADD }} {{ checkedNodeList?.length ? '(' + checkedNodeList?.length + ')' : ''}}\n  </button>\n</mat-dialog-actions>", styles: ["::-webkit-scrollbar{width:12px}::-webkit-scrollbar-track{background:#0000001f;background-clip:content-box}::-webkit-scrollbar-thumb{background:#00000061;border-radius:20px;width:4px;border:4px solid transparent;background-clip:content-box}::-webkit-scrollbar-thumb:hover{background:#00000080;background-clip:content-box;border:4px solid transparent}.qms__popup .button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qms__danger button{border:none;color:var(--text-white);padding:0;text-align:center;text-decoration:none;display:inline-block;cursor:pointer;height:20px;width:20px;font-family:Open Sans;font-size:12px;font-weight:600;font-style:normal;line-height:16px}.qms__danger .red{background-color:var(--button-red-background);margin-left:10px}.qms__danger .yellow{background-color:var(--button-yellow-background);margin-left:10px;color:var(--popup-title-color)}.qms__danger .green{background-color:var(--button-green-background);margin-left:10px}.confirm__button__groups{margin-top:11px}.confirm__button__groups button{min-height:36px;width:auto;font-family:Open Sans;font-weight:500;font-size:14px;letter-spacing:1px;line-height:16px;padding-left:15px;padding-right:15px;margin-right:5px;float:right}.confirm__button__groups .confirm{background:var(--button-background)}.confirm__button__groups .confirm:hover{background:var(--primary-button-background-color);color:var(--primary-button-text-color)}.confirm__button__groups .confirm:disabled{cursor:not-allowed}.confirm__button__groups .cancel{background:var(--button-background)}.confirm__button__groups .cancel:hover{background:var(--primary-button-background-color);color:var(--primary-button-text-color)}.qms-list-item.item-suggestion .image-square.wrap-image{width:2.5rem!important;height:100%!important;background:transparent;align-self:center;margin-right:0}::ng-deep .mat-mdc-option:hover:not(.mat-option-disabled),.mat-option:focus:not(.mat-option-disabled){background:transparent!important}.qmslib__related__popup__container .input__field{display:flex;align-items:center}.qmslib__related__popup__container .input__field input{width:100%;padding:10px;outline:none;border:none;background:var(--background-input-text)}.qmslib__related__popup__container .input__field .mat-icon{margin-left:-30px;cursor:pointer;vertical-align:middle}.qmslib__related__popup__container .line__divider{border-bottom:1px solid #ccc;height:1px;margin-top:10px;min-width:300px;max-width:100%}.qmslib__related__popup__container .button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qmslib__related__popup__container .panel__content{height:450px;overflow:auto;margin-top:12px}.qmslib__related__popup__container .panel__content_item{height:350px;overflow:auto;margin-top:12px}.qmslib__related__popup__container .panel-tree .mat-expansion-panel-body{padding:0 12px 12px}.qmslib__related__popup__container .mat-expansion-panel-header{height:30px;font-size:12px;letter-spacing:1px;font-family:Raleway;font-weight:600;padding:0}.qmslib__related__popup__container .mat-expansion-panel-header .mat-expansion-panel-header-title{align-items:center;margin-left:12px}.qmslib__related__popup__container .mat-expansion-panel-header .related_popup_toggle-btn{width:1.5rem;height:1.5rem;line-height:1.5rem}.qmslib__related__popup__container .mat-expansion-panel:not([class*=mat-elevation-z]){box-shadow:none}.qmslib__related__popup__container .panel__item{height:100px;margin-top:12px;overflow-x:hidden;overflow-y:auto;padding-right:5px;width:100%;max-width:100%;display:flex;flex-wrap:wrap;align-content:flex-start}.qmslib__related__popup__container .panel__item .related__item__inline{max-width:100%}.qmslib__related__popup__container .panel__item .related__item__content{height:32px;line-height:32px;background-color:var(--related-item-background);max-width:100%;margin-bottom:5px;margin-left:2.5px;margin-right:2.5px}.qmslib__related__popup__container .panel__item .related__item__content .mat-icon{color:var(--related-mat-icon-color);font-size:24px}.qmslib__related__popup__container .panel__item .related__item__content span.related__item__content_name{display:inline-block;min-width:calc(100% - 13px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:320px}.qmslib__related__popup__container .add-button-spacing-top-7px{margin-top:7px}.search__module-result{margin:1.5rem;padding:0 0 .5rem 0px}.search__module-result .search__module-title{font-size:14px;font-weight:600}.search__module-result .search__option{height:auto;line-height:normal;padding:0;border-bottom:1px solid #e0e0e0}.search__module-result .search__option .qms-list-item.mat-2-line.image-item{height:auto}.search__module-result .search__option .qms-list-item-content{margin:0;border-bottom:none}.search__module-result .search__option .qms-list-item-content .material-icons-outlined.leading-icon,.search__module-result .search__option .qms-list-item-content mat-icon.leading-icon{padding:4px 0 4px 4px}.search__module-result .search__option .qms-list-item-content .caption{overflow:hidden;line-height:normal;white-space:normal;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;padding:0;margin:0}.search__module-result .search__option .qms-list-item-content .caption span.search__result__parent-name{display:inline-block;width:auto;width:calc(100% - 13px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search__module-result .search__option .qms-list-item-content .default-subtitle{color:#00000061}.search__module-result .search__option .qms-list-item-content .search__description-icon{margin-right:0;width:12px;height:12px;font-size:12px}.search__module-result .search__option .qms-list-item-content .qms-list-text{border-bottom:none;height:auto}.search__module-result .search__option .qms-list-item-content .breadcrumb-container .qms-breadcrumb-item .mat-icon{font-size:16px!important;padding-bottom:1px}.search__module-result .search__option.mat-mdc-option:hover:not(.mat-option-disabled),.search__module-result .search__option .mat-option:focus:not(.mat-option-disabled){background:transparent!important}.search__module-result svg{display:block}.module-name{margin-bottom:20px;padding:0;font-weight:600;font-family:Raleway}.padding-5{padding:5px}.mat-mdc-autocomplete_related-viewport{height:100%;max-height:100%!important}.mat-mdc-autocomplete_related-viewport .cdk-virtual-scroll-content-wrapper{width:100%}.mat-mdc-autocomplete_related-viewport .related-viewport{min-height:10.25rem}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: TranslateLibraryService }, { type: i1$2.MatDialogRef }, { type: QMSSelectOneGlobalService }, { type: i4.MatIconRegistry }, { type: i1$3.DomSanitizer }, { type: QMSIconRegistryService }, { type: SelectOnePopupData, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -24049,11 +24049,11 @@ class QMSCKEditorImageMapComponent extends QMSCKEditorBaseComponent {
         return url;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: QMSCKEditorImageMapComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i1$2.MatDialog }, { token: TranslateLibraryService }, { token: QMSCKEditorLinkService }, { token: i1$2.MatDialogRef }, { token: QMSCKEditorCommonService }, { token: MAT_DIALOG_DATA }, { token: i4.MatIconRegistry }, { token: i1$3.DomSanitizer }, { token: QMSCKEditorTreeService }, { token: QMSSelectProcessDocumentGlobalService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: QMSCKEditorImageMapComponent, selector: "app-qmsck-imagemap", inputs: { ckEditor: "ckEditor" }, viewQueries: [{ propertyName: "myImageRef", first: true, predicate: ["myImage"], descendants: true }, { propertyName: "myStatusRef", first: true, predicate: ["myStatus"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div id=\"qmsckeditor-imagemap\" class=\"qmsckeditor qmsckeditor__imagemap__container\">\n    <div id=\"qmsckeditor-imagemap-header\">\n        <span id=\"qmsckeditor-imagemap-header_001\" mat-icon-button class=\"qmsckeditor button__close\"\n            (click)=\"onCloseDialog()\">\n            <mat-icon>close</mat-icon>\n        </span>\n        <div id=\"qmsckeditor-imagemap-header_002\" mat-dialog-content>\n            <h2 id=\"qmsckeditor-imagemap_002_001\">\n                {{ LANG.QMSCKEDITOR.IMAGE_MAP_PROPERTIES }}\n            </h2>\n        </div>\n    </div>\n    <div id=\"qmsckeditor-imagemap-content\">\n        <div id=\"qmsckeditor-imagemap-content_001\" class=\"col-12 mt-1 pl-2 pr-2 ps-2 pe-2\">\n            <mat-expansion-panel id=\"qmsckeditor-imagemap-panel\" [expanded]=\"true\" (opened)=\"(true)\" (closed)=\"(false)\">\n                <div id=\"qmsckeditor-imagemap-panel_001\">\n                    <div id=\"qmsckeditor-imagemap-panel_001_001\" class=\"qmsckeditor__imagemap__information\">\n                        <form [formGroup]=\"imageMapFormGroup\">\n                            <div class=\"row\">\n                                <div class=\"col-9\">\n                                    <mat-button-toggle-group [(ngModel)]=\"selectedMode\" formControlName=\"modeList\"\n                                        (change)=\"onModeChange($event)\">\n                                        <mat-button-toggle *ngFor=\"let mode of modes\" [value]=\"mode.id\"\n                                            [matTooltip]=\"mode.name\">\n                                            <mat-icon color=\"red\" [svgIcon]=\"mode.icon\" aria-hidden=\"true\">\n                                            </mat-icon>\n                                        </mat-button-toggle>\n                                    </mat-button-toggle-group>\n                                    <span style=\"margin-left: 15px;\" #myStatus></span>\n                                </div>\n                                <div class=\"col-3\">\n                                    <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-3 pb-1 ps-3 pe-3\">\n                                        <mat-label>{{ LANG.QMSCKEDITOR.ZOOM }}</mat-label>\n                                        <mat-select [(ngModel)]=\"selectedZoom\" formControlName=\"zoomList\"\n                                            (ngModelChange)=\"onZoomChange()\" disableOptionCentering>\n                                            <mat-option *ngFor=\"let zoomType of zoomTypes\" [value]=\"zoomType.id\">\n                                                {{ zoomType.name }}\n                                            </mat-option>\n                                        </mat-select>\n                                    </mat-form-field>\n                                </div>\n                            </div>\n                            <div class=\"row\" [ngClass]=\"{'hidden': !showImageMapInformation}\">\n                                <div class=\"col-3\">\n                                    <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-3 pb-1 ps-3 pe-3\">\n                                        <mat-label>{{ LANG.QMSCKEDITOR.LINK_TYPE }}</mat-label>\n                                        <mat-select [(ngModel)]=\"selectedLinkType\" formControlName=\"linkTypeList\"\n                                            (ngModelChange)=\"onLinkTypeChange()\" disableOptionCentering>\n                                            <mat-option *ngFor=\"let link of linkTypes\" [value]=\"link.id\">\n                                                {{ link.name }}\n                                            </mat-option>\n                                        </mat-select>\n                                    </mat-form-field>\n                                </div>\n                                <div class=\"col-4\" *ngIf=\"selectedLinkType === 0\">\n                                    <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-3 pb-1 ps-3 pe-3\">\n                                        <mat-label>{{ LANG.QMSCKEDITOR.TARGET }}</mat-label>\n                                        <mat-select [(ngModel)]=\"selectedTarget\" formControlName=\"targetList\"\n                                            (ngModelChange)=\"onTargetChange()\" disableOptionCentering>\n                                            <mat-option *ngFor=\"let target of targets\" [value]=\"target.id\">\n                                                {{ target.name }}\n                                            </mat-option>\n                                        </mat-select>\n                                    </mat-form-field>\n                                </div>\n                                <div class=\"col-5\">\n                                    <div class=\"row button__groups\">\n                                        <div class=\"col-6\">\n                                            <button class=\"save\" mat-stroked-button (click)=\"eHandbook(false, false)\">\n                                                {{ LANG.QMSCKEDITOR.DOCUMENT_PROCESS }}\n                                            </button>\n                                        </div>\n                                    </div>\n                                </div>\n                            </div>\n                            <div class=\"row\" [ngClass]=\"{'hidden': !showImageMapInformation}\"\n                                *ngIf=\"selectedLinkType === 1\">\n                                <div class=\"col-3\">\n                                    <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-3 ps-3 pe-3\">\n                                        <mat-label>{{ LANG.QMSCKEDITOR.ANCHOR_BY_NAME }}</mat-label>\n                                        <mat-select [(ngModel)]=\"anchorText\" formControlName=\"anchorTextList\"\n                                            (ngModelChange)=\"onAnchorTextChange()\">\n                                            <mat-option *ngFor=\"let editorAnchor of editorAnchors\"\n                                                [value]=\"editorAnchor.anchorValue\" disableOptionCentering>\n                                                {{ editorAnchor.viewValue }}\n                                            </mat-option>\n                                        </mat-select>\n                                    </mat-form-field>\n                                </div>\n                            </div>\n                            <div class=\"row\" [ngClass]=\"{'hidden': !showImageMapInformation}\"\n                                *ngIf=\"selectedLinkType === 0\">\n                                <div class=\"col-3\">\n                                    <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-3 pb-1 ps-3 pe-3\">\n                                        <mat-label>{{ LANG.QMSCKEDITOR.PROTOCOL }}</mat-label>\n                                        <mat-select [(ngModel)]=\"selectedProtocol\" formControlName=\"protocolList\"\n                                            (ngModelChange)=\"onProtocolChange()\" disableOptionCentering>\n                                            <mat-option *ngFor=\"let protocol of protocols\" [value]=\"protocol.id\">\n                                                {{ protocol.name }}\n                                            </mat-option>\n                                        </mat-select>\n                                    </mat-form-field>\n                                </div>\n                                <div class=\"col-4\">\n                                    <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-3 pb-1 ps-3 pe-3\">\n                                        <mat-label>{{ LANG.QMSCKEDITOR.LINK_URL }}</mat-label>\n                                        <input matInput [(ngModel)]=\"url\" name=\"url\" formControlName=\"url\"\n                                            (ngModelChange)=\"onUrlChange()\" (keyup)=\"onUrlKeyup()\" />\n                                        <mat-error *ngIf=\"imageMapFormGroup.get('url').hasError('required')\">{{\n                                            LANG.QMSCKEDITOR.REQUIRED_URL }}\n                                        </mat-error>\n                                        <mat-error *ngIf=\"imageMapFormGroup.get('url').hasError('invalidURL')\">{{\n                                            LANG.QMSCKEDITOR.INVALID_URL }}</mat-error>\n                                    </mat-form-field>\n                                </div>\n                                <div class=\"col-5\">\n                                    <div class=\"row button__groups\">\n                                        <div class=\"col-6\">\n                                            <button class=\"save\" mat-stroked-button (click)=\"attachment()\">\n                                                {{ LANG.QMSCKEDITOR.ATTACHMENT }}\n                                            </button>\n                                        </div>\n                                    </div>\n                                </div>\n                            </div>\n                        </form>\n                    </div>\n                    <div id=\"qmsckeditor-imagemap-panel_001_002\" class=\"qmsckeditor__imagemap__map\">\n                        <img #myImage [src]=\"imageMapData.imageUrl\">\n                        <mat-spinner diameter=\"40\" mode=\"indeterminate\" *ngIf=\"isImageLoading\"></mat-spinner>\n                    </div>\n                    <div id=\"qmsckeditor-imagemap-panel_001_003\"\n                        class=\"qmsckeditor button__groups row mr-0 ml-0 mt-4 ms-0 me-0\">\n                        <div class=\"col-4 pr-0 pe-0\">\n                            <button class=\"save\" mat-flat-button (click)=\"removeMap()\">\n                                {{ LANG.QMSCKEDITOR.REMOVE_MAP }}\n                            </button>\n                        </div>\n                        <div class=\"col-4 pr-0 pe-0\">\n                            <button class=\"save\" mat-flat-button (click)=\"save()\">\n                                {{ LANG.QMSCKEDITOR.SAVE }}\n                            </button>\n                        </div>\n                        <div class=\"col-4 pl-0 ps-0\">\n                            <button class=\"cancel\" mat-flat-button (click)=\"cancel()\">\n                                {{ LANG.QMSCKEDITOR.CANCEL }}\n                            </button>\n                        </div>\n                    </div>\n                </div>\n            </mat-expansion-panel>\n        </div>\n    </div>\n</div>", styles: [".mt5{margin-top:5px!important}.mt10{margin-top:10px!important}.mt7{margin-top:7px!important}.mt15{margin-top:15px!important}.mt20{margin-top:20px!important}.mt30{margin-top:30px!important}.mt40{margin-top:40px!important}.ml2{margin-left:2px!important}.ml3{margin-left:3px!important}.ml5{margin-left:5px!important}.ml15{margin-left:15px!important}.ml10{margin-left:10px!important}.ml12{margin-left:12px!important}.ml16{margin-left:16px!important}.ml-auto{margin-left:auto!important}.ml-25{margin-left:-25px!important}.mr5{margin-right:5px!important}.mr12{margin-right:12px!important}.mr15{margin-right:15px!important}.mb5{margin-bottom:5px!important}.mb10{margin-bottom:10px!important}.mb15{margin-bottom:15px!important}.pt8{padding-top:8px!important}.pt10{padding-top:10px!important}.pt15{padding-top:15px!important}.pt16{padding-top:16px!important}.pl15{padding-left:15px!important}.pl0{padding-left:0!important}.pr0{padding-right:0!important}.pr15{padding-right:15px!important}.fs12{font-size:12px}.fs14{font-size:14px!important}.fs16{font-size:16px!important}.fs22{font-size:22px!important}.fw500{font-weight:500!important}.italic-text{font-style:italic}.display-flex{display:flex}.qmsckeditor{font-family:Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:400}.qmsckeditor h2{font-size:20px;font-weight:400}.qmsckeditor .mat-mdc-dialog-content{padding:0}.qmsckeditor .mat-icon{color:#909497}.qmsckeditor__fullscreen{position:fixed;inset:0;background:#fff;overflow-y:auto;max-height:100vh;overflow-x:hidden}.qmsckeditor__cursor{cursor:pointer}.qmsckeditor__notallowed{cursor:not-allowed}.qmsckeditor.button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qmsckeditor.button__done{float:right;top:-24px;right:-24px;cursor:pointer;margin-right:20px}.qmsckeditor.button__done .mat-icon{color:#28a745;font-weight:700}.qmsckeditor.button__groups button{min-height:40px;width:100%;border-radius:4px;border:1px solid #C5C5C5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px}.qmsckeditor.button__groups .save{background:#f8f9f9}.qmsckeditor.button__groups .save:hover{background:#e5e7e9}.qmsckeditor.button__groups .save:disabled{cursor:not-allowed}.qmsckeditor.button__groups .cancel{background:#f8f9f9}.qmsckeditor.button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.button__groups .cancel:disabled{cursor:not-allowed}.qmsckeditor.button__groups .delete{background:#f8f9f9}.qmsckeditor.button__groups .delete:hover{background:#e5e7e9}.qmsckeditor.button__groups .delete:disabled{cursor:not-allowed}.qmsckeditor.confirm__button__groups button{min-height:36px;border-radius:4px;width:auto;border:1px solid #C5C5C5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px;padding-left:15px;padding-right:15px}.qmsckeditor.confirm__button__groups .confirm{background:#f8f9f9}.qmsckeditor.confirm__button__groups .confirm:hover{background:#e5e7e9}.qmsckeditor.confirm__button__groups .cancel{background:#f8f9f9}.qmsckeditor.confirm__button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.template-content.height{min-height:420px;max-height:520px;overflow:auto}.qmsckeditor.template-content.title{margin-left:-9px}.qmsckeditor.link__content.height{min-height:400px;max-height:520px}.qmsckeditor.card{margin-bottom:10px;min-height:60px;box-shadow:none;border:1px solid #e5e5e5}.qmsckeditor.card .title{font-weight:700}.qmsckeditor.card .content{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.qmsckeditor.card .material-icons{font-size:20px}.qmsckeditor.tooltip-content.height{min-height:400px;max-height:472px;overflow:auto}.qmsckeditor.save__as__template.height{height:125px}.ck-content .page-break,.ck-content .ck-horizontal-line{width:100%}.ck-content hr{background:#ccc}.ck-font-size-dropdown .ck-dropdown__panel ul{max-height:320px;overflow-y:auto}.ck-font-size-dropdown .ck-dropdown__panel ul li .ck-fontsize-option .ck-button__label{line-height:50px}::ng-deep .qmsckeditor__imagemap__container .mat-mdc-form-field{width:100%}::ng-deep .qmsckeditor__imagemap__container .qmsckeditor__imagemap__information{position:relative}::ng-deep .qmsckeditor__imagemap__container .qmsckeditor__imagemap__map{overflow:auto;width:800px;min-height:371px;position:relative;max-height:460px;display:flex;align-items:flex-start}::ng-deep .qmsckeditor__imagemap__container .mat-button-toggle-checked{border:1px solid #000000!important}::ng-deep .qmsckeditor__imagemap__container .hidden{visibility:hidden}\n"], dependencies: [{ kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i11.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i11.MatLabel, selector: "mat-label" }, { kind: "directive", type: i11.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i8.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i13.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i14.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i8$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i17$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i17$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: i16.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i19.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: QMSCKEditorImageMapComponent, selector: "app-qmsck-imagemap", inputs: { ckEditor: "ckEditor" }, viewQueries: [{ propertyName: "myImageRef", first: true, predicate: ["myImage"], descendants: true }, { propertyName: "myStatusRef", first: true, predicate: ["myStatus"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div id=\"qmsckeditor-imagemap\" class=\"qmsckeditor qmsckeditor__imagemap__container\">\n    <div id=\"qmsckeditor-imagemap-header\">\n        <span id=\"qmsckeditor-imagemap-header_001\" mat-icon-button class=\"qmsckeditor button__close\"\n            (click)=\"onCloseDialog()\">\n            <mat-icon>close</mat-icon>\n        </span>\n        <div id=\"qmsckeditor-imagemap-header_002\" mat-dialog-content>\n            <h2 id=\"qmsckeditor-imagemap_002_001\">\n                {{ LANG.QMSCKEDITOR.IMAGE_MAP_PROPERTIES }}\n            </h2>\n        </div>\n    </div>\n    <div id=\"qmsckeditor-imagemap-content\">\n        <div id=\"qmsckeditor-imagemap-content_001\" class=\"col-12 mt-1 pl-2 pr-2 ps-2 pe-2\">\n            <mat-expansion-panel id=\"qmsckeditor-imagemap-panel\" [expanded]=\"true\" (opened)=\"(true)\" (closed)=\"(false)\">\n                <div id=\"qmsckeditor-imagemap-panel_001\">\n                    <div id=\"qmsckeditor-imagemap-panel_001_001\" class=\"qmsckeditor__imagemap__information\">\n                        <form [formGroup]=\"imageMapFormGroup\">\n                            <div class=\"row\">\n                                <div class=\"col-9\">\n                                    <mat-button-toggle-group [(ngModel)]=\"selectedMode\" formControlName=\"modeList\"\n                                        (change)=\"onModeChange($event)\">\n                                        <mat-button-toggle *ngFor=\"let mode of modes\" [value]=\"mode.id\"\n                                            [matTooltip]=\"mode.name\">\n                                            <mat-icon color=\"red\" [svgIcon]=\"mode.icon\" aria-hidden=\"true\">\n                                            </mat-icon>\n                                        </mat-button-toggle>\n                                    </mat-button-toggle-group>\n                                    <span style=\"margin-left: 15px;\" #myStatus></span>\n                                </div>\n                                <div class=\"col-3\">\n                                    <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-3 pb-1 ps-3 pe-3\">\n                                        <mat-label>{{ LANG.QMSCKEDITOR.ZOOM }}</mat-label>\n                                        <mat-select [(ngModel)]=\"selectedZoom\" formControlName=\"zoomList\"\n                                            (ngModelChange)=\"onZoomChange()\" disableOptionCentering>\n                                            <mat-option *ngFor=\"let zoomType of zoomTypes\" [value]=\"zoomType.id\">\n                                                {{ zoomType.name }}\n                                            </mat-option>\n                                        </mat-select>\n                                    </mat-form-field>\n                                </div>\n                            </div>\n                            <div class=\"row\" [ngClass]=\"{'hidden': !showImageMapInformation}\">\n                                <div class=\"col-3\">\n                                    <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-3 pb-1 ps-3 pe-3\">\n                                        <mat-label>{{ LANG.QMSCKEDITOR.LINK_TYPE }}</mat-label>\n                                        <mat-select [(ngModel)]=\"selectedLinkType\" formControlName=\"linkTypeList\"\n                                            (ngModelChange)=\"onLinkTypeChange()\" disableOptionCentering>\n                                            <mat-option *ngFor=\"let link of linkTypes\" [value]=\"link.id\">\n                                                {{ link.name }}\n                                            </mat-option>\n                                        </mat-select>\n                                    </mat-form-field>\n                                </div>\n                                <div class=\"col-4\" *ngIf=\"selectedLinkType === 0\">\n                                    <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-3 pb-1 ps-3 pe-3\">\n                                        <mat-label>{{ LANG.QMSCKEDITOR.TARGET }}</mat-label>\n                                        <mat-select [(ngModel)]=\"selectedTarget\" formControlName=\"targetList\"\n                                            (ngModelChange)=\"onTargetChange()\" disableOptionCentering>\n                                            <mat-option *ngFor=\"let target of targets\" [value]=\"target.id\">\n                                                {{ target.name }}\n                                            </mat-option>\n                                        </mat-select>\n                                    </mat-form-field>\n                                </div>\n                                <div class=\"col-5\">\n                                    <div class=\"row button__groups\">\n                                        <div class=\"col-6\">\n                                            <button class=\"save\" mat-stroked-button (click)=\"eHandbook(false, false)\">\n                                                {{ LANG.QMSCKEDITOR.DOCUMENT_PROCESS }}\n                                            </button>\n                                        </div>\n                                    </div>\n                                </div>\n                            </div>\n                            <div class=\"row\" [ngClass]=\"{'hidden': !showImageMapInformation}\"\n                                *ngIf=\"selectedLinkType === 1\">\n                                <div class=\"col-3\">\n                                    <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-3 ps-3 pe-3\">\n                                        <mat-label>{{ LANG.QMSCKEDITOR.ANCHOR_BY_NAME }}</mat-label>\n                                        <mat-select [(ngModel)]=\"anchorText\" formControlName=\"anchorTextList\"\n                                            (ngModelChange)=\"onAnchorTextChange()\">\n                                            <mat-option *ngFor=\"let editorAnchor of editorAnchors\"\n                                                [value]=\"editorAnchor.anchorValue\" disableOptionCentering>\n                                                {{ editorAnchor.viewValue }}\n                                            </mat-option>\n                                        </mat-select>\n                                    </mat-form-field>\n                                </div>\n                            </div>\n                            <div class=\"row\" [ngClass]=\"{'hidden': !showImageMapInformation}\"\n                                *ngIf=\"selectedLinkType === 0\">\n                                <div class=\"col-3\">\n                                    <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-3 pb-1 ps-3 pe-3\">\n                                        <mat-label>{{ LANG.QMSCKEDITOR.PROTOCOL }}</mat-label>\n                                        <mat-select [(ngModel)]=\"selectedProtocol\" formControlName=\"protocolList\"\n                                            (ngModelChange)=\"onProtocolChange()\" disableOptionCentering>\n                                            <mat-option *ngFor=\"let protocol of protocols\" [value]=\"protocol.id\">\n                                                {{ protocol.name }}\n                                            </mat-option>\n                                        </mat-select>\n                                    </mat-form-field>\n                                </div>\n                                <div class=\"col-4\">\n                                    <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-3 pb-1 ps-3 pe-3\">\n                                        <mat-label>{{ LANG.QMSCKEDITOR.LINK_URL }}</mat-label>\n                                        <input matInput [(ngModel)]=\"url\" name=\"url\" formControlName=\"url\"\n                                            (ngModelChange)=\"onUrlChange()\" (keyup)=\"onUrlKeyup()\" />\n                                        <mat-error *ngIf=\"imageMapFormGroup.get('url').hasError('required')\">{{\n                                            LANG.QMSCKEDITOR.REQUIRED_URL }}\n                                        </mat-error>\n                                        <mat-error *ngIf=\"imageMapFormGroup.get('url').hasError('invalidURL')\">{{\n                                            LANG.QMSCKEDITOR.INVALID_URL }}</mat-error>\n                                    </mat-form-field>\n                                </div>\n                                <div class=\"col-5\">\n                                    <div class=\"row button__groups\">\n                                        <div class=\"col-6\">\n                                            <button class=\"save\" mat-stroked-button (click)=\"attachment()\">\n                                                {{ LANG.QMSCKEDITOR.ATTACHMENT }}\n                                            </button>\n                                        </div>\n                                    </div>\n                                </div>\n                            </div>\n                        </form>\n                    </div>\n                    <div id=\"qmsckeditor-imagemap-panel_001_002\" class=\"qmsckeditor__imagemap__map\">\n                        <img #myImage [src]=\"imageMapData.imageUrl\">\n                        <mat-spinner diameter=\"40\" mode=\"indeterminate\" *ngIf=\"isImageLoading\"></mat-spinner>\n                    </div>\n                    <div id=\"qmsckeditor-imagemap-panel_001_003\"\n                        class=\"qmsckeditor button__groups row mr-0 ml-0 mt-4 ms-0 me-0\">\n                        <div class=\"col-4 pr-0 pe-0\">\n                            <button class=\"save\" mat-flat-button (click)=\"removeMap()\">\n                                {{ LANG.QMSCKEDITOR.REMOVE_MAP }}\n                            </button>\n                        </div>\n                        <div class=\"col-4 pr-0 pe-0\">\n                            <button class=\"save\" mat-flat-button (click)=\"save()\">\n                                {{ LANG.QMSCKEDITOR.SAVE }}\n                            </button>\n                        </div>\n                        <div class=\"col-4 pl-0 ps-0\">\n                            <button class=\"cancel\" mat-flat-button (click)=\"cancel()\">\n                                {{ LANG.QMSCKEDITOR.CANCEL }}\n                            </button>\n                        </div>\n                    </div>\n                </div>\n            </mat-expansion-panel>\n        </div>\n    </div>\n</div>", styles: [".mt5{margin-top:5px!important}.mt10{margin-top:10px!important}.mt7{margin-top:7px!important}.mt15{margin-top:15px!important}.mt20{margin-top:20px!important}.mt30{margin-top:30px!important}.mt40{margin-top:40px!important}.ml2{margin-left:2px!important}.ml3{margin-left:3px!important}.ml5{margin-left:5px!important}.ml15{margin-left:15px!important}.ml10{margin-left:10px!important}.ml12{margin-left:12px!important}.ml16{margin-left:16px!important}.ml-auto{margin-left:auto!important}.ml-25{margin-left:-25px!important}.mr5{margin-right:5px!important}.mr12{margin-right:12px!important}.mr15{margin-right:15px!important}.mb5{margin-bottom:5px!important}.mb10{margin-bottom:10px!important}.mb15{margin-bottom:15px!important}.pt8{padding-top:8px!important}.pt10{padding-top:10px!important}.pt15{padding-top:15px!important}.pt16{padding-top:16px!important}.pl15{padding-left:15px!important}.pl0{padding-left:0!important}.pr0{padding-right:0!important}.pr15{padding-right:15px!important}.fs12{font-size:12px}.fs14{font-size:14px!important}.fs16{font-size:16px!important}.fs22{font-size:22px!important}.fw500{font-weight:500!important}.italic-text{font-style:italic}.display-flex{display:flex}.qmsckeditor{font-family:Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:400}.qmsckeditor h2{font-size:20px;font-weight:400}.qmsckeditor .mat-icon{color:#909497}.qmsckeditor__fullscreen{position:fixed;inset:0;background:#fff;overflow-y:auto;max-height:100vh;overflow-x:hidden}.qmsckeditor__cursor{cursor:pointer}.qmsckeditor__notallowed{cursor:not-allowed}.qmsckeditor.button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qmsckeditor.button__done{float:right;top:-24px;right:-24px;cursor:pointer;margin-right:20px}.qmsckeditor.button__done .mat-icon{color:#28a745;font-weight:700}.qmsckeditor.button__groups button{min-height:40px;width:100%;border-radius:4px;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px}.qmsckeditor.button__groups .save{background:#f8f9f9}.qmsckeditor.button__groups .save:hover{background:#e5e7e9}.qmsckeditor.button__groups .save:disabled{cursor:not-allowed}.qmsckeditor.button__groups .cancel{background:#f8f9f9}.qmsckeditor.button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.button__groups .cancel:disabled{cursor:not-allowed}.qmsckeditor.button__groups .delete{background:#f8f9f9}.qmsckeditor.button__groups .delete:hover{background:#e5e7e9}.qmsckeditor.button__groups .delete:disabled{cursor:not-allowed}.qmsckeditor.confirm__button__groups button{min-height:36px;border-radius:4px;width:auto;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px;padding-left:15px;padding-right:15px}.qmsckeditor.confirm__button__groups .confirm{background:#f8f9f9}.qmsckeditor.confirm__button__groups .confirm:hover{background:#e5e7e9}.qmsckeditor.confirm__button__groups .cancel{background:#f8f9f9}.qmsckeditor.confirm__button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.template-content.height{min-height:420px;max-height:520px;overflow:auto}.qmsckeditor.template-content.title{margin-left:-9px}.qmsckeditor.link__content.height{min-height:400px;max-height:520px}.qmsckeditor.card{margin-bottom:10px;min-height:60px;box-shadow:none;border:1px solid #e5e5e5}.qmsckeditor.card .title{font-weight:700}.qmsckeditor.card .content{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.qmsckeditor.card .material-icons{font-size:20px}.qmsckeditor.tooltip-content.height{min-height:400px;max-height:472px;overflow:auto}.qmsckeditor.save__as__template.height{height:125px}.ck-content .page-break,.ck-content .ck-horizontal-line{width:100%}.ck-content hr{background:#ccc}.ck-font-size-dropdown .ck-dropdown__panel ul{max-height:320px;overflow-y:auto}.ck-font-size-dropdown .ck-dropdown__panel ul li .ck-fontsize-option .ck-button__label{line-height:50px}::ng-deep .qmsckeditor__imagemap__container .mat-mdc-form-field{width:100%}::ng-deep .qmsckeditor__imagemap__container .qmsckeditor__imagemap__information{position:relative}::ng-deep .qmsckeditor__imagemap__container .qmsckeditor__imagemap__map{overflow:auto;width:800px;min-height:371px;position:relative;max-height:460px;display:flex;align-items:flex-start}::ng-deep .qmsckeditor__imagemap__container .mat-button-toggle-checked{border:1px solid #000000!important}::ng-deep .qmsckeditor__imagemap__container .hidden{visibility:hidden}\n"], dependencies: [{ kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i11.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i11.MatLabel, selector: "mat-label" }, { kind: "directive", type: i11.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i8.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i13.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i14.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i8$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i17$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i17$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: i16.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i19.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: QMSCKEditorImageMapComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-qmsck-imagemap', template: "<div id=\"qmsckeditor-imagemap\" class=\"qmsckeditor qmsckeditor__imagemap__container\">\n    <div id=\"qmsckeditor-imagemap-header\">\n        <span id=\"qmsckeditor-imagemap-header_001\" mat-icon-button class=\"qmsckeditor button__close\"\n            (click)=\"onCloseDialog()\">\n            <mat-icon>close</mat-icon>\n        </span>\n        <div id=\"qmsckeditor-imagemap-header_002\" mat-dialog-content>\n            <h2 id=\"qmsckeditor-imagemap_002_001\">\n                {{ LANG.QMSCKEDITOR.IMAGE_MAP_PROPERTIES }}\n            </h2>\n        </div>\n    </div>\n    <div id=\"qmsckeditor-imagemap-content\">\n        <div id=\"qmsckeditor-imagemap-content_001\" class=\"col-12 mt-1 pl-2 pr-2 ps-2 pe-2\">\n            <mat-expansion-panel id=\"qmsckeditor-imagemap-panel\" [expanded]=\"true\" (opened)=\"(true)\" (closed)=\"(false)\">\n                <div id=\"qmsckeditor-imagemap-panel_001\">\n                    <div id=\"qmsckeditor-imagemap-panel_001_001\" class=\"qmsckeditor__imagemap__information\">\n                        <form [formGroup]=\"imageMapFormGroup\">\n                            <div class=\"row\">\n                                <div class=\"col-9\">\n                                    <mat-button-toggle-group [(ngModel)]=\"selectedMode\" formControlName=\"modeList\"\n                                        (change)=\"onModeChange($event)\">\n                                        <mat-button-toggle *ngFor=\"let mode of modes\" [value]=\"mode.id\"\n                                            [matTooltip]=\"mode.name\">\n                                            <mat-icon color=\"red\" [svgIcon]=\"mode.icon\" aria-hidden=\"true\">\n                                            </mat-icon>\n                                        </mat-button-toggle>\n                                    </mat-button-toggle-group>\n                                    <span style=\"margin-left: 15px;\" #myStatus></span>\n                                </div>\n                                <div class=\"col-3\">\n                                    <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-3 pb-1 ps-3 pe-3\">\n                                        <mat-label>{{ LANG.QMSCKEDITOR.ZOOM }}</mat-label>\n                                        <mat-select [(ngModel)]=\"selectedZoom\" formControlName=\"zoomList\"\n                                            (ngModelChange)=\"onZoomChange()\" disableOptionCentering>\n                                            <mat-option *ngFor=\"let zoomType of zoomTypes\" [value]=\"zoomType.id\">\n                                                {{ zoomType.name }}\n                                            </mat-option>\n                                        </mat-select>\n                                    </mat-form-field>\n                                </div>\n                            </div>\n                            <div class=\"row\" [ngClass]=\"{'hidden': !showImageMapInformation}\">\n                                <div class=\"col-3\">\n                                    <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-3 pb-1 ps-3 pe-3\">\n                                        <mat-label>{{ LANG.QMSCKEDITOR.LINK_TYPE }}</mat-label>\n                                        <mat-select [(ngModel)]=\"selectedLinkType\" formControlName=\"linkTypeList\"\n                                            (ngModelChange)=\"onLinkTypeChange()\" disableOptionCentering>\n                                            <mat-option *ngFor=\"let link of linkTypes\" [value]=\"link.id\">\n                                                {{ link.name }}\n                                            </mat-option>\n                                        </mat-select>\n                                    </mat-form-field>\n                                </div>\n                                <div class=\"col-4\" *ngIf=\"selectedLinkType === 0\">\n                                    <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-3 pb-1 ps-3 pe-3\">\n                                        <mat-label>{{ LANG.QMSCKEDITOR.TARGET }}</mat-label>\n                                        <mat-select [(ngModel)]=\"selectedTarget\" formControlName=\"targetList\"\n                                            (ngModelChange)=\"onTargetChange()\" disableOptionCentering>\n                                            <mat-option *ngFor=\"let target of targets\" [value]=\"target.id\">\n                                                {{ target.name }}\n                                            </mat-option>\n                                        </mat-select>\n                                    </mat-form-field>\n                                </div>\n                                <div class=\"col-5\">\n                                    <div class=\"row button__groups\">\n                                        <div class=\"col-6\">\n                                            <button class=\"save\" mat-stroked-button (click)=\"eHandbook(false, false)\">\n                                                {{ LANG.QMSCKEDITOR.DOCUMENT_PROCESS }}\n                                            </button>\n                                        </div>\n                                    </div>\n                                </div>\n                            </div>\n                            <div class=\"row\" [ngClass]=\"{'hidden': !showImageMapInformation}\"\n                                *ngIf=\"selectedLinkType === 1\">\n                                <div class=\"col-3\">\n                                    <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-3 ps-3 pe-3\">\n                                        <mat-label>{{ LANG.QMSCKEDITOR.ANCHOR_BY_NAME }}</mat-label>\n                                        <mat-select [(ngModel)]=\"anchorText\" formControlName=\"anchorTextList\"\n                                            (ngModelChange)=\"onAnchorTextChange()\">\n                                            <mat-option *ngFor=\"let editorAnchor of editorAnchors\"\n                                                [value]=\"editorAnchor.anchorValue\" disableOptionCentering>\n                                                {{ editorAnchor.viewValue }}\n                                            </mat-option>\n                                        </mat-select>\n                                    </mat-form-field>\n                                </div>\n                            </div>\n                            <div class=\"row\" [ngClass]=\"{'hidden': !showImageMapInformation}\"\n                                *ngIf=\"selectedLinkType === 0\">\n                                <div class=\"col-3\">\n                                    <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-3 pb-1 ps-3 pe-3\">\n                                        <mat-label>{{ LANG.QMSCKEDITOR.PROTOCOL }}</mat-label>\n                                        <mat-select [(ngModel)]=\"selectedProtocol\" formControlName=\"protocolList\"\n                                            (ngModelChange)=\"onProtocolChange()\" disableOptionCentering>\n                                            <mat-option *ngFor=\"let protocol of protocols\" [value]=\"protocol.id\">\n                                                {{ protocol.name }}\n                                            </mat-option>\n                                        </mat-select>\n                                    </mat-form-field>\n                                </div>\n                                <div class=\"col-4\">\n                                    <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-3 pb-1 ps-3 pe-3\">\n                                        <mat-label>{{ LANG.QMSCKEDITOR.LINK_URL }}</mat-label>\n                                        <input matInput [(ngModel)]=\"url\" name=\"url\" formControlName=\"url\"\n                                            (ngModelChange)=\"onUrlChange()\" (keyup)=\"onUrlKeyup()\" />\n                                        <mat-error *ngIf=\"imageMapFormGroup.get('url').hasError('required')\">{{\n                                            LANG.QMSCKEDITOR.REQUIRED_URL }}\n                                        </mat-error>\n                                        <mat-error *ngIf=\"imageMapFormGroup.get('url').hasError('invalidURL')\">{{\n                                            LANG.QMSCKEDITOR.INVALID_URL }}</mat-error>\n                                    </mat-form-field>\n                                </div>\n                                <div class=\"col-5\">\n                                    <div class=\"row button__groups\">\n                                        <div class=\"col-6\">\n                                            <button class=\"save\" mat-stroked-button (click)=\"attachment()\">\n                                                {{ LANG.QMSCKEDITOR.ATTACHMENT }}\n                                            </button>\n                                        </div>\n                                    </div>\n                                </div>\n                            </div>\n                        </form>\n                    </div>\n                    <div id=\"qmsckeditor-imagemap-panel_001_002\" class=\"qmsckeditor__imagemap__map\">\n                        <img #myImage [src]=\"imageMapData.imageUrl\">\n                        <mat-spinner diameter=\"40\" mode=\"indeterminate\" *ngIf=\"isImageLoading\"></mat-spinner>\n                    </div>\n                    <div id=\"qmsckeditor-imagemap-panel_001_003\"\n                        class=\"qmsckeditor button__groups row mr-0 ml-0 mt-4 ms-0 me-0\">\n                        <div class=\"col-4 pr-0 pe-0\">\n                            <button class=\"save\" mat-flat-button (click)=\"removeMap()\">\n                                {{ LANG.QMSCKEDITOR.REMOVE_MAP }}\n                            </button>\n                        </div>\n                        <div class=\"col-4 pr-0 pe-0\">\n                            <button class=\"save\" mat-flat-button (click)=\"save()\">\n                                {{ LANG.QMSCKEDITOR.SAVE }}\n                            </button>\n                        </div>\n                        <div class=\"col-4 pl-0 ps-0\">\n                            <button class=\"cancel\" mat-flat-button (click)=\"cancel()\">\n                                {{ LANG.QMSCKEDITOR.CANCEL }}\n                            </button>\n                        </div>\n                    </div>\n                </div>\n            </mat-expansion-panel>\n        </div>\n    </div>\n</div>", styles: [".mt5{margin-top:5px!important}.mt10{margin-top:10px!important}.mt7{margin-top:7px!important}.mt15{margin-top:15px!important}.mt20{margin-top:20px!important}.mt30{margin-top:30px!important}.mt40{margin-top:40px!important}.ml2{margin-left:2px!important}.ml3{margin-left:3px!important}.ml5{margin-left:5px!important}.ml15{margin-left:15px!important}.ml10{margin-left:10px!important}.ml12{margin-left:12px!important}.ml16{margin-left:16px!important}.ml-auto{margin-left:auto!important}.ml-25{margin-left:-25px!important}.mr5{margin-right:5px!important}.mr12{margin-right:12px!important}.mr15{margin-right:15px!important}.mb5{margin-bottom:5px!important}.mb10{margin-bottom:10px!important}.mb15{margin-bottom:15px!important}.pt8{padding-top:8px!important}.pt10{padding-top:10px!important}.pt15{padding-top:15px!important}.pt16{padding-top:16px!important}.pl15{padding-left:15px!important}.pl0{padding-left:0!important}.pr0{padding-right:0!important}.pr15{padding-right:15px!important}.fs12{font-size:12px}.fs14{font-size:14px!important}.fs16{font-size:16px!important}.fs22{font-size:22px!important}.fw500{font-weight:500!important}.italic-text{font-style:italic}.display-flex{display:flex}.qmsckeditor{font-family:Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:400}.qmsckeditor h2{font-size:20px;font-weight:400}.qmsckeditor .mat-mdc-dialog-content{padding:0}.qmsckeditor .mat-icon{color:#909497}.qmsckeditor__fullscreen{position:fixed;inset:0;background:#fff;overflow-y:auto;max-height:100vh;overflow-x:hidden}.qmsckeditor__cursor{cursor:pointer}.qmsckeditor__notallowed{cursor:not-allowed}.qmsckeditor.button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qmsckeditor.button__done{float:right;top:-24px;right:-24px;cursor:pointer;margin-right:20px}.qmsckeditor.button__done .mat-icon{color:#28a745;font-weight:700}.qmsckeditor.button__groups button{min-height:40px;width:100%;border-radius:4px;border:1px solid #C5C5C5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px}.qmsckeditor.button__groups .save{background:#f8f9f9}.qmsckeditor.button__groups .save:hover{background:#e5e7e9}.qmsckeditor.button__groups .save:disabled{cursor:not-allowed}.qmsckeditor.button__groups .cancel{background:#f8f9f9}.qmsckeditor.button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.button__groups .cancel:disabled{cursor:not-allowed}.qmsckeditor.button__groups .delete{background:#f8f9f9}.qmsckeditor.button__groups .delete:hover{background:#e5e7e9}.qmsckeditor.button__groups .delete:disabled{cursor:not-allowed}.qmsckeditor.confirm__button__groups button{min-height:36px;border-radius:4px;width:auto;border:1px solid #C5C5C5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px;padding-left:15px;padding-right:15px}.qmsckeditor.confirm__button__groups .confirm{background:#f8f9f9}.qmsckeditor.confirm__button__groups .confirm:hover{background:#e5e7e9}.qmsckeditor.confirm__button__groups .cancel{background:#f8f9f9}.qmsckeditor.confirm__button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.template-content.height{min-height:420px;max-height:520px;overflow:auto}.qmsckeditor.template-content.title{margin-left:-9px}.qmsckeditor.link__content.height{min-height:400px;max-height:520px}.qmsckeditor.card{margin-bottom:10px;min-height:60px;box-shadow:none;border:1px solid #e5e5e5}.qmsckeditor.card .title{font-weight:700}.qmsckeditor.card .content{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.qmsckeditor.card .material-icons{font-size:20px}.qmsckeditor.tooltip-content.height{min-height:400px;max-height:472px;overflow:auto}.qmsckeditor.save__as__template.height{height:125px}.ck-content .page-break,.ck-content .ck-horizontal-line{width:100%}.ck-content hr{background:#ccc}.ck-font-size-dropdown .ck-dropdown__panel ul{max-height:320px;overflow-y:auto}.ck-font-size-dropdown .ck-dropdown__panel ul li .ck-fontsize-option .ck-button__label{line-height:50px}::ng-deep .qmsckeditor__imagemap__container .mat-mdc-form-field{width:100%}::ng-deep .qmsckeditor__imagemap__container .qmsckeditor__imagemap__information{position:relative}::ng-deep .qmsckeditor__imagemap__container .qmsckeditor__imagemap__map{overflow:auto;width:800px;min-height:371px;position:relative;max-height:460px;display:flex;align-items:flex-start}::ng-deep .qmsckeditor__imagemap__container .mat-button-toggle-checked{border:1px solid #000000!important}::ng-deep .qmsckeditor__imagemap__container .hidden{visibility:hidden}\n"] }]
+            args: [{ selector: 'app-qmsck-imagemap', template: "<div id=\"qmsckeditor-imagemap\" class=\"qmsckeditor qmsckeditor__imagemap__container\">\n    <div id=\"qmsckeditor-imagemap-header\">\n        <span id=\"qmsckeditor-imagemap-header_001\" mat-icon-button class=\"qmsckeditor button__close\"\n            (click)=\"onCloseDialog()\">\n            <mat-icon>close</mat-icon>\n        </span>\n        <div id=\"qmsckeditor-imagemap-header_002\" mat-dialog-content>\n            <h2 id=\"qmsckeditor-imagemap_002_001\">\n                {{ LANG.QMSCKEDITOR.IMAGE_MAP_PROPERTIES }}\n            </h2>\n        </div>\n    </div>\n    <div id=\"qmsckeditor-imagemap-content\">\n        <div id=\"qmsckeditor-imagemap-content_001\" class=\"col-12 mt-1 pl-2 pr-2 ps-2 pe-2\">\n            <mat-expansion-panel id=\"qmsckeditor-imagemap-panel\" [expanded]=\"true\" (opened)=\"(true)\" (closed)=\"(false)\">\n                <div id=\"qmsckeditor-imagemap-panel_001\">\n                    <div id=\"qmsckeditor-imagemap-panel_001_001\" class=\"qmsckeditor__imagemap__information\">\n                        <form [formGroup]=\"imageMapFormGroup\">\n                            <div class=\"row\">\n                                <div class=\"col-9\">\n                                    <mat-button-toggle-group [(ngModel)]=\"selectedMode\" formControlName=\"modeList\"\n                                        (change)=\"onModeChange($event)\">\n                                        <mat-button-toggle *ngFor=\"let mode of modes\" [value]=\"mode.id\"\n                                            [matTooltip]=\"mode.name\">\n                                            <mat-icon color=\"red\" [svgIcon]=\"mode.icon\" aria-hidden=\"true\">\n                                            </mat-icon>\n                                        </mat-button-toggle>\n                                    </mat-button-toggle-group>\n                                    <span style=\"margin-left: 15px;\" #myStatus></span>\n                                </div>\n                                <div class=\"col-3\">\n                                    <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-3 pb-1 ps-3 pe-3\">\n                                        <mat-label>{{ LANG.QMSCKEDITOR.ZOOM }}</mat-label>\n                                        <mat-select [(ngModel)]=\"selectedZoom\" formControlName=\"zoomList\"\n                                            (ngModelChange)=\"onZoomChange()\" disableOptionCentering>\n                                            <mat-option *ngFor=\"let zoomType of zoomTypes\" [value]=\"zoomType.id\">\n                                                {{ zoomType.name }}\n                                            </mat-option>\n                                        </mat-select>\n                                    </mat-form-field>\n                                </div>\n                            </div>\n                            <div class=\"row\" [ngClass]=\"{'hidden': !showImageMapInformation}\">\n                                <div class=\"col-3\">\n                                    <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-3 pb-1 ps-3 pe-3\">\n                                        <mat-label>{{ LANG.QMSCKEDITOR.LINK_TYPE }}</mat-label>\n                                        <mat-select [(ngModel)]=\"selectedLinkType\" formControlName=\"linkTypeList\"\n                                            (ngModelChange)=\"onLinkTypeChange()\" disableOptionCentering>\n                                            <mat-option *ngFor=\"let link of linkTypes\" [value]=\"link.id\">\n                                                {{ link.name }}\n                                            </mat-option>\n                                        </mat-select>\n                                    </mat-form-field>\n                                </div>\n                                <div class=\"col-4\" *ngIf=\"selectedLinkType === 0\">\n                                    <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-3 pb-1 ps-3 pe-3\">\n                                        <mat-label>{{ LANG.QMSCKEDITOR.TARGET }}</mat-label>\n                                        <mat-select [(ngModel)]=\"selectedTarget\" formControlName=\"targetList\"\n                                            (ngModelChange)=\"onTargetChange()\" disableOptionCentering>\n                                            <mat-option *ngFor=\"let target of targets\" [value]=\"target.id\">\n                                                {{ target.name }}\n                                            </mat-option>\n                                        </mat-select>\n                                    </mat-form-field>\n                                </div>\n                                <div class=\"col-5\">\n                                    <div class=\"row button__groups\">\n                                        <div class=\"col-6\">\n                                            <button class=\"save\" mat-stroked-button (click)=\"eHandbook(false, false)\">\n                                                {{ LANG.QMSCKEDITOR.DOCUMENT_PROCESS }}\n                                            </button>\n                                        </div>\n                                    </div>\n                                </div>\n                            </div>\n                            <div class=\"row\" [ngClass]=\"{'hidden': !showImageMapInformation}\"\n                                *ngIf=\"selectedLinkType === 1\">\n                                <div class=\"col-3\">\n                                    <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-3 ps-3 pe-3\">\n                                        <mat-label>{{ LANG.QMSCKEDITOR.ANCHOR_BY_NAME }}</mat-label>\n                                        <mat-select [(ngModel)]=\"anchorText\" formControlName=\"anchorTextList\"\n                                            (ngModelChange)=\"onAnchorTextChange()\">\n                                            <mat-option *ngFor=\"let editorAnchor of editorAnchors\"\n                                                [value]=\"editorAnchor.anchorValue\" disableOptionCentering>\n                                                {{ editorAnchor.viewValue }}\n                                            </mat-option>\n                                        </mat-select>\n                                    </mat-form-field>\n                                </div>\n                            </div>\n                            <div class=\"row\" [ngClass]=\"{'hidden': !showImageMapInformation}\"\n                                *ngIf=\"selectedLinkType === 0\">\n                                <div class=\"col-3\">\n                                    <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-3 pb-1 ps-3 pe-3\">\n                                        <mat-label>{{ LANG.QMSCKEDITOR.PROTOCOL }}</mat-label>\n                                        <mat-select [(ngModel)]=\"selectedProtocol\" formControlName=\"protocolList\"\n                                            (ngModelChange)=\"onProtocolChange()\" disableOptionCentering>\n                                            <mat-option *ngFor=\"let protocol of protocols\" [value]=\"protocol.id\">\n                                                {{ protocol.name }}\n                                            </mat-option>\n                                        </mat-select>\n                                    </mat-form-field>\n                                </div>\n                                <div class=\"col-4\">\n                                    <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-3 pb-1 ps-3 pe-3\">\n                                        <mat-label>{{ LANG.QMSCKEDITOR.LINK_URL }}</mat-label>\n                                        <input matInput [(ngModel)]=\"url\" name=\"url\" formControlName=\"url\"\n                                            (ngModelChange)=\"onUrlChange()\" (keyup)=\"onUrlKeyup()\" />\n                                        <mat-error *ngIf=\"imageMapFormGroup.get('url').hasError('required')\">{{\n                                            LANG.QMSCKEDITOR.REQUIRED_URL }}\n                                        </mat-error>\n                                        <mat-error *ngIf=\"imageMapFormGroup.get('url').hasError('invalidURL')\">{{\n                                            LANG.QMSCKEDITOR.INVALID_URL }}</mat-error>\n                                    </mat-form-field>\n                                </div>\n                                <div class=\"col-5\">\n                                    <div class=\"row button__groups\">\n                                        <div class=\"col-6\">\n                                            <button class=\"save\" mat-stroked-button (click)=\"attachment()\">\n                                                {{ LANG.QMSCKEDITOR.ATTACHMENT }}\n                                            </button>\n                                        </div>\n                                    </div>\n                                </div>\n                            </div>\n                        </form>\n                    </div>\n                    <div id=\"qmsckeditor-imagemap-panel_001_002\" class=\"qmsckeditor__imagemap__map\">\n                        <img #myImage [src]=\"imageMapData.imageUrl\">\n                        <mat-spinner diameter=\"40\" mode=\"indeterminate\" *ngIf=\"isImageLoading\"></mat-spinner>\n                    </div>\n                    <div id=\"qmsckeditor-imagemap-panel_001_003\"\n                        class=\"qmsckeditor button__groups row mr-0 ml-0 mt-4 ms-0 me-0\">\n                        <div class=\"col-4 pr-0 pe-0\">\n                            <button class=\"save\" mat-flat-button (click)=\"removeMap()\">\n                                {{ LANG.QMSCKEDITOR.REMOVE_MAP }}\n                            </button>\n                        </div>\n                        <div class=\"col-4 pr-0 pe-0\">\n                            <button class=\"save\" mat-flat-button (click)=\"save()\">\n                                {{ LANG.QMSCKEDITOR.SAVE }}\n                            </button>\n                        </div>\n                        <div class=\"col-4 pl-0 ps-0\">\n                            <button class=\"cancel\" mat-flat-button (click)=\"cancel()\">\n                                {{ LANG.QMSCKEDITOR.CANCEL }}\n                            </button>\n                        </div>\n                    </div>\n                </div>\n            </mat-expansion-panel>\n        </div>\n    </div>\n</div>", styles: [".mt5{margin-top:5px!important}.mt10{margin-top:10px!important}.mt7{margin-top:7px!important}.mt15{margin-top:15px!important}.mt20{margin-top:20px!important}.mt30{margin-top:30px!important}.mt40{margin-top:40px!important}.ml2{margin-left:2px!important}.ml3{margin-left:3px!important}.ml5{margin-left:5px!important}.ml15{margin-left:15px!important}.ml10{margin-left:10px!important}.ml12{margin-left:12px!important}.ml16{margin-left:16px!important}.ml-auto{margin-left:auto!important}.ml-25{margin-left:-25px!important}.mr5{margin-right:5px!important}.mr12{margin-right:12px!important}.mr15{margin-right:15px!important}.mb5{margin-bottom:5px!important}.mb10{margin-bottom:10px!important}.mb15{margin-bottom:15px!important}.pt8{padding-top:8px!important}.pt10{padding-top:10px!important}.pt15{padding-top:15px!important}.pt16{padding-top:16px!important}.pl15{padding-left:15px!important}.pl0{padding-left:0!important}.pr0{padding-right:0!important}.pr15{padding-right:15px!important}.fs12{font-size:12px}.fs14{font-size:14px!important}.fs16{font-size:16px!important}.fs22{font-size:22px!important}.fw500{font-weight:500!important}.italic-text{font-style:italic}.display-flex{display:flex}.qmsckeditor{font-family:Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:400}.qmsckeditor h2{font-size:20px;font-weight:400}.qmsckeditor .mat-icon{color:#909497}.qmsckeditor__fullscreen{position:fixed;inset:0;background:#fff;overflow-y:auto;max-height:100vh;overflow-x:hidden}.qmsckeditor__cursor{cursor:pointer}.qmsckeditor__notallowed{cursor:not-allowed}.qmsckeditor.button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qmsckeditor.button__done{float:right;top:-24px;right:-24px;cursor:pointer;margin-right:20px}.qmsckeditor.button__done .mat-icon{color:#28a745;font-weight:700}.qmsckeditor.button__groups button{min-height:40px;width:100%;border-radius:4px;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px}.qmsckeditor.button__groups .save{background:#f8f9f9}.qmsckeditor.button__groups .save:hover{background:#e5e7e9}.qmsckeditor.button__groups .save:disabled{cursor:not-allowed}.qmsckeditor.button__groups .cancel{background:#f8f9f9}.qmsckeditor.button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.button__groups .cancel:disabled{cursor:not-allowed}.qmsckeditor.button__groups .delete{background:#f8f9f9}.qmsckeditor.button__groups .delete:hover{background:#e5e7e9}.qmsckeditor.button__groups .delete:disabled{cursor:not-allowed}.qmsckeditor.confirm__button__groups button{min-height:36px;border-radius:4px;width:auto;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px;padding-left:15px;padding-right:15px}.qmsckeditor.confirm__button__groups .confirm{background:#f8f9f9}.qmsckeditor.confirm__button__groups .confirm:hover{background:#e5e7e9}.qmsckeditor.confirm__button__groups .cancel{background:#f8f9f9}.qmsckeditor.confirm__button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.template-content.height{min-height:420px;max-height:520px;overflow:auto}.qmsckeditor.template-content.title{margin-left:-9px}.qmsckeditor.link__content.height{min-height:400px;max-height:520px}.qmsckeditor.card{margin-bottom:10px;min-height:60px;box-shadow:none;border:1px solid #e5e5e5}.qmsckeditor.card .title{font-weight:700}.qmsckeditor.card .content{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.qmsckeditor.card .material-icons{font-size:20px}.qmsckeditor.tooltip-content.height{min-height:400px;max-height:472px;overflow:auto}.qmsckeditor.save__as__template.height{height:125px}.ck-content .page-break,.ck-content .ck-horizontal-line{width:100%}.ck-content hr{background:#ccc}.ck-font-size-dropdown .ck-dropdown__panel ul{max-height:320px;overflow-y:auto}.ck-font-size-dropdown .ck-dropdown__panel ul li .ck-fontsize-option .ck-button__label{line-height:50px}::ng-deep .qmsckeditor__imagemap__container .mat-mdc-form-field{width:100%}::ng-deep .qmsckeditor__imagemap__container .qmsckeditor__imagemap__information{position:relative}::ng-deep .qmsckeditor__imagemap__container .qmsckeditor__imagemap__map{overflow:auto;width:800px;min-height:371px;position:relative;max-height:460px;display:flex;align-items:flex-start}::ng-deep .qmsckeditor__imagemap__container .mat-button-toggle-checked{border:1px solid #000000!important}::ng-deep .qmsckeditor__imagemap__container .hidden{visibility:hidden}\n"] }]
         }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i1$2.MatDialog }, { type: TranslateLibraryService }, { type: QMSCKEditorLinkService }, { type: i1$2.MatDialogRef }, { type: QMSCKEditorCommonService }, { type: QMSCKEditorImageMap, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -24134,11 +24134,11 @@ class QMSCKEditorTooltipComponent extends QMSCKEditorBaseComponent {
         this.onCloseDialog();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: QMSCKEditorTooltipComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: TranslateLibraryService }, { token: i1$2.MatDialogRef }, { token: QMSCKEditorCommonService }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: QMSCKEditorTooltipComponent, selector: "app-qmsck-tooltip", inputs: { ckEditor: "ckEditor" }, usesInheritance: true, ngImport: i0, template: "<div id=\"qmsckeditor-tooltip\" class=\"qmsckeditor qmsckeditor__tooltip__container\">\n  <div id=\"qmsckeditor-tooltip-header\">\n    <span id=\"qmsckeditor-tooltip-header_001\" mat-icon-button class=\"qmsckeditor button__close\"\n      (click)=\"onCloseDialog()\">\n      <mat-icon>close</mat-icon>\n    </span>\n    <div id=\"qmsckeditor-tooltip-header_002\" mat-dialog-content>\n      <h2 id=\"qmsckeditor-tooltip_002_001\">\n        {{ LANG.QMSCKEDITOR.INSERT_TOOLTIP }}\n      </h2>\n    </div>\n  </div>\n  <form [formGroup]=\"tooltipFormGroup\">\n    <div id=\"qmsckeditor-tooltip-content\" class=\"qmsckeditor tooltip-content height\">\n      <div id=\"qmsckeditor-tooltip-content_001\" class=\"col-12 mt-1 pl-2 pr-2 ps-2 pe-2\">\n        <mat-expansion-panel id=\"qmsckeditor-tooltip-panel\" [expanded]=\"true\" (opened)=\"(true)\" (closed)=\"(false)\">\n          <div id=\"qmsckeditor-tooltip-panel_001\">\n            <div id=\"qmsckeditor-tooltip-panel_001_001\">\n              <mat-form-field class=\"col-12 pl-0 pr-0 ps-0 pe-0\" appearance=\"fill\">\n                <mat-label>{{ LANG.QMSCKEDITOR.TITLE }}</mat-label>\n                <input matInput [(ngModel)]=\"tooltip.text\" formControlName=\"title\" />\n              </mat-form-field>\n            </div>\n            <div id=\"qmsckeditor-tooltip-panel_001_002\">\n              <mat-label>{{ LANG.QMSCKEDITOR.CONTENT }}</mat-label>\n              <div class=\"qmsckeditor_container col-12 pl-0 pr-0 ps-0 pe-0\">\n                <ckeditor class=\"qms-ckeditor\" [(editor)]=\"editor\" [config]=\"editorConfig\" (ready)=\"onReady($event)\"\n                  [(ngModel)]=\"tooltip.content\" (change)=\"onChanged($event)\" (blur)=\"onBlur($event)\"\n                  formControlName=\"content\">\n                </ckeditor>\n              </div>\n            </div>\n            <div id=\"qmsckeditor-tooltip-panel_001_003\" class=\"qmsckeditor button__groups row mr-0 ml-0 mt-4 ms-0 me-0\">\n              <div class=\"col-6 pr-0 pe-0\">\n                <button class=\"save\" mat-flat-button (click)=\"saveTooltip()\" [disabled]=\"tooltipFormGroup.invalid\">\n                  {{ LANG.QMSCKEDITOR.SAVE }}\n                </button>\n              </div>\n              <div class=\"col-6 pl-0 ps-0\">\n                <button class=\"cancel\" mat-flat-button (click)=\"cancelTooltip()\">\n                  {{ LANG.QMSCKEDITOR.CANCEL }}\n                </button>\n              </div>\n            </div>\n          </div>\n        </mat-expansion-panel>\n      </div>\n    </div>\n  </form>\n</div>", styles: [".mt5{margin-top:5px!important}.mt10{margin-top:10px!important}.mt7{margin-top:7px!important}.mt15{margin-top:15px!important}.mt20{margin-top:20px!important}.mt30{margin-top:30px!important}.mt40{margin-top:40px!important}.ml2{margin-left:2px!important}.ml3{margin-left:3px!important}.ml5{margin-left:5px!important}.ml15{margin-left:15px!important}.ml10{margin-left:10px!important}.ml12{margin-left:12px!important}.ml16{margin-left:16px!important}.ml-auto{margin-left:auto!important}.ml-25{margin-left:-25px!important}.mr5{margin-right:5px!important}.mr12{margin-right:12px!important}.mr15{margin-right:15px!important}.mb5{margin-bottom:5px!important}.mb10{margin-bottom:10px!important}.mb15{margin-bottom:15px!important}.pt8{padding-top:8px!important}.pt10{padding-top:10px!important}.pt15{padding-top:15px!important}.pt16{padding-top:16px!important}.pl15{padding-left:15px!important}.pl0{padding-left:0!important}.pr0{padding-right:0!important}.pr15{padding-right:15px!important}.fs12{font-size:12px}.fs14{font-size:14px!important}.fs16{font-size:16px!important}.fs22{font-size:22px!important}.fw500{font-weight:500!important}.italic-text{font-style:italic}.display-flex{display:flex}.qmsckeditor{font-family:Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:400}.qmsckeditor h2{font-size:20px;font-weight:400}.qmsckeditor .mat-mdc-dialog-content{padding:0}.qmsckeditor .mat-icon{color:#909497}.qmsckeditor__fullscreen{position:fixed;inset:0;background:#fff;overflow-y:auto;max-height:100vh;overflow-x:hidden}.qmsckeditor__cursor{cursor:pointer}.qmsckeditor__notallowed{cursor:not-allowed}.qmsckeditor.button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qmsckeditor.button__done{float:right;top:-24px;right:-24px;cursor:pointer;margin-right:20px}.qmsckeditor.button__done .mat-icon{color:#28a745;font-weight:700}.qmsckeditor.button__groups button{min-height:40px;width:100%;border-radius:4px;border:1px solid #C5C5C5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px}.qmsckeditor.button__groups .save{background:#f8f9f9}.qmsckeditor.button__groups .save:hover{background:#e5e7e9}.qmsckeditor.button__groups .save:disabled{cursor:not-allowed}.qmsckeditor.button__groups .cancel{background:#f8f9f9}.qmsckeditor.button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.button__groups .cancel:disabled{cursor:not-allowed}.qmsckeditor.button__groups .delete{background:#f8f9f9}.qmsckeditor.button__groups .delete:hover{background:#e5e7e9}.qmsckeditor.button__groups .delete:disabled{cursor:not-allowed}.qmsckeditor.confirm__button__groups button{min-height:36px;border-radius:4px;width:auto;border:1px solid #C5C5C5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px;padding-left:15px;padding-right:15px}.qmsckeditor.confirm__button__groups .confirm{background:#f8f9f9}.qmsckeditor.confirm__button__groups .confirm:hover{background:#e5e7e9}.qmsckeditor.confirm__button__groups .cancel{background:#f8f9f9}.qmsckeditor.confirm__button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.template-content.height{min-height:420px;max-height:520px;overflow:auto}.qmsckeditor.template-content.title{margin-left:-9px}.qmsckeditor.link__content.height{min-height:400px;max-height:520px}.qmsckeditor.card{margin-bottom:10px;min-height:60px;box-shadow:none;border:1px solid #e5e5e5}.qmsckeditor.card .title{font-weight:700}.qmsckeditor.card .content{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.qmsckeditor.card .material-icons{font-size:20px}.qmsckeditor.tooltip-content.height{min-height:400px;max-height:472px;overflow:auto}.qmsckeditor.save__as__template.height{height:125px}.ck-content .page-break,.ck-content .ck-horizontal-line{width:100%}.ck-content hr{background:#ccc}.ck-font-size-dropdown .ck-dropdown__panel ul{max-height:320px;overflow-y:auto}.ck-font-size-dropdown .ck-dropdown__panel ul li .ck-fontsize-option .ck-button__label{line-height:50px}.qmsckeditor__tooltip__container .mat-mdc-form-field{width:100%}.qmsckeditor__tooltip__container textarea.mat-mdc-input-element{min-height:150px}\n"], dependencies: [{ kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i11.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i11.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i8.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i8$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: QMSCKEditorTooltipComponent, selector: "app-qmsck-tooltip", inputs: { ckEditor: "ckEditor" }, usesInheritance: true, ngImport: i0, template: "<div id=\"qmsckeditor-tooltip\" class=\"qmsckeditor qmsckeditor__tooltip__container\">\n  <div id=\"qmsckeditor-tooltip-header\">\n    <span id=\"qmsckeditor-tooltip-header_001\" mat-icon-button class=\"qmsckeditor button__close\"\n      (click)=\"onCloseDialog()\">\n      <mat-icon>close</mat-icon>\n    </span>\n    <div id=\"qmsckeditor-tooltip-header_002\" mat-dialog-content>\n      <h2 id=\"qmsckeditor-tooltip_002_001\">\n        {{ LANG.QMSCKEDITOR.INSERT_TOOLTIP }}\n      </h2>\n    </div>\n  </div>\n  <form [formGroup]=\"tooltipFormGroup\">\n    <div id=\"qmsckeditor-tooltip-content\" class=\"qmsckeditor tooltip-content height\">\n      <div id=\"qmsckeditor-tooltip-content_001\" class=\"col-12 mt-1 pl-2 pr-2 ps-2 pe-2\">\n        <mat-expansion-panel id=\"qmsckeditor-tooltip-panel\" [expanded]=\"true\" (opened)=\"(true)\" (closed)=\"(false)\">\n          <div id=\"qmsckeditor-tooltip-panel_001\">\n            <div id=\"qmsckeditor-tooltip-panel_001_001\">\n              <mat-form-field class=\"col-12 pl-0 pr-0 ps-0 pe-0\" appearance=\"fill\">\n                <mat-label>{{ LANG.QMSCKEDITOR.TITLE }}</mat-label>\n                <input matInput [(ngModel)]=\"tooltip.text\" formControlName=\"title\" />\n              </mat-form-field>\n            </div>\n            <div id=\"qmsckeditor-tooltip-panel_001_002\">\n              <mat-label>{{ LANG.QMSCKEDITOR.CONTENT }}</mat-label>\n              <div class=\"qmsckeditor_container col-12 pl-0 pr-0 ps-0 pe-0\">\n                <ckeditor class=\"qms-ckeditor\" [(editor)]=\"editor\" [config]=\"editorConfig\" (ready)=\"onReady($event)\"\n                  [(ngModel)]=\"tooltip.content\" (change)=\"onChanged($event)\" (blur)=\"onBlur($event)\"\n                  formControlName=\"content\">\n                </ckeditor>\n              </div>\n            </div>\n            <div id=\"qmsckeditor-tooltip-panel_001_003\" class=\"qmsckeditor button__groups row mr-0 ml-0 mt-4 ms-0 me-0\">\n              <div class=\"col-6 pr-0 pe-0\">\n                <button class=\"save\" mat-flat-button (click)=\"saveTooltip()\" [disabled]=\"tooltipFormGroup.invalid\">\n                  {{ LANG.QMSCKEDITOR.SAVE }}\n                </button>\n              </div>\n              <div class=\"col-6 pl-0 ps-0\">\n                <button class=\"cancel\" mat-flat-button (click)=\"cancelTooltip()\">\n                  {{ LANG.QMSCKEDITOR.CANCEL }}\n                </button>\n              </div>\n            </div>\n          </div>\n        </mat-expansion-panel>\n      </div>\n    </div>\n  </form>\n</div>", styles: [".mt5{margin-top:5px!important}.mt10{margin-top:10px!important}.mt7{margin-top:7px!important}.mt15{margin-top:15px!important}.mt20{margin-top:20px!important}.mt30{margin-top:30px!important}.mt40{margin-top:40px!important}.ml2{margin-left:2px!important}.ml3{margin-left:3px!important}.ml5{margin-left:5px!important}.ml15{margin-left:15px!important}.ml10{margin-left:10px!important}.ml12{margin-left:12px!important}.ml16{margin-left:16px!important}.ml-auto{margin-left:auto!important}.ml-25{margin-left:-25px!important}.mr5{margin-right:5px!important}.mr12{margin-right:12px!important}.mr15{margin-right:15px!important}.mb5{margin-bottom:5px!important}.mb10{margin-bottom:10px!important}.mb15{margin-bottom:15px!important}.pt8{padding-top:8px!important}.pt10{padding-top:10px!important}.pt15{padding-top:15px!important}.pt16{padding-top:16px!important}.pl15{padding-left:15px!important}.pl0{padding-left:0!important}.pr0{padding-right:0!important}.pr15{padding-right:15px!important}.fs12{font-size:12px}.fs14{font-size:14px!important}.fs16{font-size:16px!important}.fs22{font-size:22px!important}.fw500{font-weight:500!important}.italic-text{font-style:italic}.display-flex{display:flex}.qmsckeditor{font-family:Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:400}.qmsckeditor h2{font-size:20px;font-weight:400}.qmsckeditor .mat-icon{color:#909497}.qmsckeditor__fullscreen{position:fixed;inset:0;background:#fff;overflow-y:auto;max-height:100vh;overflow-x:hidden}.qmsckeditor__cursor{cursor:pointer}.qmsckeditor__notallowed{cursor:not-allowed}.qmsckeditor.button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qmsckeditor.button__done{float:right;top:-24px;right:-24px;cursor:pointer;margin-right:20px}.qmsckeditor.button__done .mat-icon{color:#28a745;font-weight:700}.qmsckeditor.button__groups button{min-height:40px;width:100%;border-radius:4px;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px}.qmsckeditor.button__groups .save{background:#f8f9f9}.qmsckeditor.button__groups .save:hover{background:#e5e7e9}.qmsckeditor.button__groups .save:disabled{cursor:not-allowed}.qmsckeditor.button__groups .cancel{background:#f8f9f9}.qmsckeditor.button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.button__groups .cancel:disabled{cursor:not-allowed}.qmsckeditor.button__groups .delete{background:#f8f9f9}.qmsckeditor.button__groups .delete:hover{background:#e5e7e9}.qmsckeditor.button__groups .delete:disabled{cursor:not-allowed}.qmsckeditor.confirm__button__groups button{min-height:36px;border-radius:4px;width:auto;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px;padding-left:15px;padding-right:15px}.qmsckeditor.confirm__button__groups .confirm{background:#f8f9f9}.qmsckeditor.confirm__button__groups .confirm:hover{background:#e5e7e9}.qmsckeditor.confirm__button__groups .cancel{background:#f8f9f9}.qmsckeditor.confirm__button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.template-content.height{min-height:420px;max-height:520px;overflow:auto}.qmsckeditor.template-content.title{margin-left:-9px}.qmsckeditor.link__content.height{min-height:400px;max-height:520px}.qmsckeditor.card{margin-bottom:10px;min-height:60px;box-shadow:none;border:1px solid #e5e5e5}.qmsckeditor.card .title{font-weight:700}.qmsckeditor.card .content{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.qmsckeditor.card .material-icons{font-size:20px}.qmsckeditor.tooltip-content.height{min-height:400px;max-height:472px;overflow:auto}.qmsckeditor.save__as__template.height{height:125px}.ck-content .page-break,.ck-content .ck-horizontal-line{width:100%}.ck-content hr{background:#ccc}.ck-font-size-dropdown .ck-dropdown__panel ul{max-height:320px;overflow-y:auto}.ck-font-size-dropdown .ck-dropdown__panel ul li .ck-fontsize-option .ck-button__label{line-height:50px}.qmsckeditor__tooltip__container .mat-mdc-form-field{width:100%}.qmsckeditor__tooltip__container textarea.mat-mdc-input-element{min-height:150px}\n"], dependencies: [{ kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i11.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i11.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i8.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i8$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: QMSCKEditorTooltipComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-qmsck-tooltip', template: "<div id=\"qmsckeditor-tooltip\" class=\"qmsckeditor qmsckeditor__tooltip__container\">\n  <div id=\"qmsckeditor-tooltip-header\">\n    <span id=\"qmsckeditor-tooltip-header_001\" mat-icon-button class=\"qmsckeditor button__close\"\n      (click)=\"onCloseDialog()\">\n      <mat-icon>close</mat-icon>\n    </span>\n    <div id=\"qmsckeditor-tooltip-header_002\" mat-dialog-content>\n      <h2 id=\"qmsckeditor-tooltip_002_001\">\n        {{ LANG.QMSCKEDITOR.INSERT_TOOLTIP }}\n      </h2>\n    </div>\n  </div>\n  <form [formGroup]=\"tooltipFormGroup\">\n    <div id=\"qmsckeditor-tooltip-content\" class=\"qmsckeditor tooltip-content height\">\n      <div id=\"qmsckeditor-tooltip-content_001\" class=\"col-12 mt-1 pl-2 pr-2 ps-2 pe-2\">\n        <mat-expansion-panel id=\"qmsckeditor-tooltip-panel\" [expanded]=\"true\" (opened)=\"(true)\" (closed)=\"(false)\">\n          <div id=\"qmsckeditor-tooltip-panel_001\">\n            <div id=\"qmsckeditor-tooltip-panel_001_001\">\n              <mat-form-field class=\"col-12 pl-0 pr-0 ps-0 pe-0\" appearance=\"fill\">\n                <mat-label>{{ LANG.QMSCKEDITOR.TITLE }}</mat-label>\n                <input matInput [(ngModel)]=\"tooltip.text\" formControlName=\"title\" />\n              </mat-form-field>\n            </div>\n            <div id=\"qmsckeditor-tooltip-panel_001_002\">\n              <mat-label>{{ LANG.QMSCKEDITOR.CONTENT }}</mat-label>\n              <div class=\"qmsckeditor_container col-12 pl-0 pr-0 ps-0 pe-0\">\n                <ckeditor class=\"qms-ckeditor\" [(editor)]=\"editor\" [config]=\"editorConfig\" (ready)=\"onReady($event)\"\n                  [(ngModel)]=\"tooltip.content\" (change)=\"onChanged($event)\" (blur)=\"onBlur($event)\"\n                  formControlName=\"content\">\n                </ckeditor>\n              </div>\n            </div>\n            <div id=\"qmsckeditor-tooltip-panel_001_003\" class=\"qmsckeditor button__groups row mr-0 ml-0 mt-4 ms-0 me-0\">\n              <div class=\"col-6 pr-0 pe-0\">\n                <button class=\"save\" mat-flat-button (click)=\"saveTooltip()\" [disabled]=\"tooltipFormGroup.invalid\">\n                  {{ LANG.QMSCKEDITOR.SAVE }}\n                </button>\n              </div>\n              <div class=\"col-6 pl-0 ps-0\">\n                <button class=\"cancel\" mat-flat-button (click)=\"cancelTooltip()\">\n                  {{ LANG.QMSCKEDITOR.CANCEL }}\n                </button>\n              </div>\n            </div>\n          </div>\n        </mat-expansion-panel>\n      </div>\n    </div>\n  </form>\n</div>", styles: [".mt5{margin-top:5px!important}.mt10{margin-top:10px!important}.mt7{margin-top:7px!important}.mt15{margin-top:15px!important}.mt20{margin-top:20px!important}.mt30{margin-top:30px!important}.mt40{margin-top:40px!important}.ml2{margin-left:2px!important}.ml3{margin-left:3px!important}.ml5{margin-left:5px!important}.ml15{margin-left:15px!important}.ml10{margin-left:10px!important}.ml12{margin-left:12px!important}.ml16{margin-left:16px!important}.ml-auto{margin-left:auto!important}.ml-25{margin-left:-25px!important}.mr5{margin-right:5px!important}.mr12{margin-right:12px!important}.mr15{margin-right:15px!important}.mb5{margin-bottom:5px!important}.mb10{margin-bottom:10px!important}.mb15{margin-bottom:15px!important}.pt8{padding-top:8px!important}.pt10{padding-top:10px!important}.pt15{padding-top:15px!important}.pt16{padding-top:16px!important}.pl15{padding-left:15px!important}.pl0{padding-left:0!important}.pr0{padding-right:0!important}.pr15{padding-right:15px!important}.fs12{font-size:12px}.fs14{font-size:14px!important}.fs16{font-size:16px!important}.fs22{font-size:22px!important}.fw500{font-weight:500!important}.italic-text{font-style:italic}.display-flex{display:flex}.qmsckeditor{font-family:Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:400}.qmsckeditor h2{font-size:20px;font-weight:400}.qmsckeditor .mat-mdc-dialog-content{padding:0}.qmsckeditor .mat-icon{color:#909497}.qmsckeditor__fullscreen{position:fixed;inset:0;background:#fff;overflow-y:auto;max-height:100vh;overflow-x:hidden}.qmsckeditor__cursor{cursor:pointer}.qmsckeditor__notallowed{cursor:not-allowed}.qmsckeditor.button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qmsckeditor.button__done{float:right;top:-24px;right:-24px;cursor:pointer;margin-right:20px}.qmsckeditor.button__done .mat-icon{color:#28a745;font-weight:700}.qmsckeditor.button__groups button{min-height:40px;width:100%;border-radius:4px;border:1px solid #C5C5C5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px}.qmsckeditor.button__groups .save{background:#f8f9f9}.qmsckeditor.button__groups .save:hover{background:#e5e7e9}.qmsckeditor.button__groups .save:disabled{cursor:not-allowed}.qmsckeditor.button__groups .cancel{background:#f8f9f9}.qmsckeditor.button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.button__groups .cancel:disabled{cursor:not-allowed}.qmsckeditor.button__groups .delete{background:#f8f9f9}.qmsckeditor.button__groups .delete:hover{background:#e5e7e9}.qmsckeditor.button__groups .delete:disabled{cursor:not-allowed}.qmsckeditor.confirm__button__groups button{min-height:36px;border-radius:4px;width:auto;border:1px solid #C5C5C5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px;padding-left:15px;padding-right:15px}.qmsckeditor.confirm__button__groups .confirm{background:#f8f9f9}.qmsckeditor.confirm__button__groups .confirm:hover{background:#e5e7e9}.qmsckeditor.confirm__button__groups .cancel{background:#f8f9f9}.qmsckeditor.confirm__button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.template-content.height{min-height:420px;max-height:520px;overflow:auto}.qmsckeditor.template-content.title{margin-left:-9px}.qmsckeditor.link__content.height{min-height:400px;max-height:520px}.qmsckeditor.card{margin-bottom:10px;min-height:60px;box-shadow:none;border:1px solid #e5e5e5}.qmsckeditor.card .title{font-weight:700}.qmsckeditor.card .content{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.qmsckeditor.card .material-icons{font-size:20px}.qmsckeditor.tooltip-content.height{min-height:400px;max-height:472px;overflow:auto}.qmsckeditor.save__as__template.height{height:125px}.ck-content .page-break,.ck-content .ck-horizontal-line{width:100%}.ck-content hr{background:#ccc}.ck-font-size-dropdown .ck-dropdown__panel ul{max-height:320px;overflow-y:auto}.ck-font-size-dropdown .ck-dropdown__panel ul li .ck-fontsize-option .ck-button__label{line-height:50px}.qmsckeditor__tooltip__container .mat-mdc-form-field{width:100%}.qmsckeditor__tooltip__container textarea.mat-mdc-input-element{min-height:150px}\n"] }]
+            args: [{ selector: 'app-qmsck-tooltip', template: "<div id=\"qmsckeditor-tooltip\" class=\"qmsckeditor qmsckeditor__tooltip__container\">\n  <div id=\"qmsckeditor-tooltip-header\">\n    <span id=\"qmsckeditor-tooltip-header_001\" mat-icon-button class=\"qmsckeditor button__close\"\n      (click)=\"onCloseDialog()\">\n      <mat-icon>close</mat-icon>\n    </span>\n    <div id=\"qmsckeditor-tooltip-header_002\" mat-dialog-content>\n      <h2 id=\"qmsckeditor-tooltip_002_001\">\n        {{ LANG.QMSCKEDITOR.INSERT_TOOLTIP }}\n      </h2>\n    </div>\n  </div>\n  <form [formGroup]=\"tooltipFormGroup\">\n    <div id=\"qmsckeditor-tooltip-content\" class=\"qmsckeditor tooltip-content height\">\n      <div id=\"qmsckeditor-tooltip-content_001\" class=\"col-12 mt-1 pl-2 pr-2 ps-2 pe-2\">\n        <mat-expansion-panel id=\"qmsckeditor-tooltip-panel\" [expanded]=\"true\" (opened)=\"(true)\" (closed)=\"(false)\">\n          <div id=\"qmsckeditor-tooltip-panel_001\">\n            <div id=\"qmsckeditor-tooltip-panel_001_001\">\n              <mat-form-field class=\"col-12 pl-0 pr-0 ps-0 pe-0\" appearance=\"fill\">\n                <mat-label>{{ LANG.QMSCKEDITOR.TITLE }}</mat-label>\n                <input matInput [(ngModel)]=\"tooltip.text\" formControlName=\"title\" />\n              </mat-form-field>\n            </div>\n            <div id=\"qmsckeditor-tooltip-panel_001_002\">\n              <mat-label>{{ LANG.QMSCKEDITOR.CONTENT }}</mat-label>\n              <div class=\"qmsckeditor_container col-12 pl-0 pr-0 ps-0 pe-0\">\n                <ckeditor class=\"qms-ckeditor\" [(editor)]=\"editor\" [config]=\"editorConfig\" (ready)=\"onReady($event)\"\n                  [(ngModel)]=\"tooltip.content\" (change)=\"onChanged($event)\" (blur)=\"onBlur($event)\"\n                  formControlName=\"content\">\n                </ckeditor>\n              </div>\n            </div>\n            <div id=\"qmsckeditor-tooltip-panel_001_003\" class=\"qmsckeditor button__groups row mr-0 ml-0 mt-4 ms-0 me-0\">\n              <div class=\"col-6 pr-0 pe-0\">\n                <button class=\"save\" mat-flat-button (click)=\"saveTooltip()\" [disabled]=\"tooltipFormGroup.invalid\">\n                  {{ LANG.QMSCKEDITOR.SAVE }}\n                </button>\n              </div>\n              <div class=\"col-6 pl-0 ps-0\">\n                <button class=\"cancel\" mat-flat-button (click)=\"cancelTooltip()\">\n                  {{ LANG.QMSCKEDITOR.CANCEL }}\n                </button>\n              </div>\n            </div>\n          </div>\n        </mat-expansion-panel>\n      </div>\n    </div>\n  </form>\n</div>", styles: [".mt5{margin-top:5px!important}.mt10{margin-top:10px!important}.mt7{margin-top:7px!important}.mt15{margin-top:15px!important}.mt20{margin-top:20px!important}.mt30{margin-top:30px!important}.mt40{margin-top:40px!important}.ml2{margin-left:2px!important}.ml3{margin-left:3px!important}.ml5{margin-left:5px!important}.ml15{margin-left:15px!important}.ml10{margin-left:10px!important}.ml12{margin-left:12px!important}.ml16{margin-left:16px!important}.ml-auto{margin-left:auto!important}.ml-25{margin-left:-25px!important}.mr5{margin-right:5px!important}.mr12{margin-right:12px!important}.mr15{margin-right:15px!important}.mb5{margin-bottom:5px!important}.mb10{margin-bottom:10px!important}.mb15{margin-bottom:15px!important}.pt8{padding-top:8px!important}.pt10{padding-top:10px!important}.pt15{padding-top:15px!important}.pt16{padding-top:16px!important}.pl15{padding-left:15px!important}.pl0{padding-left:0!important}.pr0{padding-right:0!important}.pr15{padding-right:15px!important}.fs12{font-size:12px}.fs14{font-size:14px!important}.fs16{font-size:16px!important}.fs22{font-size:22px!important}.fw500{font-weight:500!important}.italic-text{font-style:italic}.display-flex{display:flex}.qmsckeditor{font-family:Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:400}.qmsckeditor h2{font-size:20px;font-weight:400}.qmsckeditor .mat-icon{color:#909497}.qmsckeditor__fullscreen{position:fixed;inset:0;background:#fff;overflow-y:auto;max-height:100vh;overflow-x:hidden}.qmsckeditor__cursor{cursor:pointer}.qmsckeditor__notallowed{cursor:not-allowed}.qmsckeditor.button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qmsckeditor.button__done{float:right;top:-24px;right:-24px;cursor:pointer;margin-right:20px}.qmsckeditor.button__done .mat-icon{color:#28a745;font-weight:700}.qmsckeditor.button__groups button{min-height:40px;width:100%;border-radius:4px;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px}.qmsckeditor.button__groups .save{background:#f8f9f9}.qmsckeditor.button__groups .save:hover{background:#e5e7e9}.qmsckeditor.button__groups .save:disabled{cursor:not-allowed}.qmsckeditor.button__groups .cancel{background:#f8f9f9}.qmsckeditor.button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.button__groups .cancel:disabled{cursor:not-allowed}.qmsckeditor.button__groups .delete{background:#f8f9f9}.qmsckeditor.button__groups .delete:hover{background:#e5e7e9}.qmsckeditor.button__groups .delete:disabled{cursor:not-allowed}.qmsckeditor.confirm__button__groups button{min-height:36px;border-radius:4px;width:auto;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px;padding-left:15px;padding-right:15px}.qmsckeditor.confirm__button__groups .confirm{background:#f8f9f9}.qmsckeditor.confirm__button__groups .confirm:hover{background:#e5e7e9}.qmsckeditor.confirm__button__groups .cancel{background:#f8f9f9}.qmsckeditor.confirm__button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.template-content.height{min-height:420px;max-height:520px;overflow:auto}.qmsckeditor.template-content.title{margin-left:-9px}.qmsckeditor.link__content.height{min-height:400px;max-height:520px}.qmsckeditor.card{margin-bottom:10px;min-height:60px;box-shadow:none;border:1px solid #e5e5e5}.qmsckeditor.card .title{font-weight:700}.qmsckeditor.card .content{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.qmsckeditor.card .material-icons{font-size:20px}.qmsckeditor.tooltip-content.height{min-height:400px;max-height:472px;overflow:auto}.qmsckeditor.save__as__template.height{height:125px}.ck-content .page-break,.ck-content .ck-horizontal-line{width:100%}.ck-content hr{background:#ccc}.ck-font-size-dropdown .ck-dropdown__panel ul{max-height:320px;overflow-y:auto}.ck-font-size-dropdown .ck-dropdown__panel ul li .ck-fontsize-option .ck-button__label{line-height:50px}.qmsckeditor__tooltip__container .mat-mdc-form-field{width:100%}.qmsckeditor__tooltip__container textarea.mat-mdc-input-element{min-height:150px}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: TranslateLibraryService }, { type: i1$2.MatDialogRef }, { type: QMSCKEditorCommonService }, { type: QMSCKEditorTooltip, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -24169,11 +24169,11 @@ class QMSCKEditorAboutComponent extends QMSCKEditorBaseComponent {
         this.commonService.setScrollTopEditorContainer(this.ckEditor, scrollTop);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: QMSCKEditorAboutComponent, deps: [{ token: TranslateLibraryService }, { token: i1$2.MatDialogRef }, { token: QMSCKEditorCommonService }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: QMSCKEditorAboutComponent, selector: "app-about-ckeditor", inputs: { ckEditor: "ckEditor" }, usesInheritance: true, ngImport: i0, template: "<div id=\"qmsckeditor-about\" class=\"qmsckeditor qmsckeditor__about__container\">\n    <div id=\"qmsckeditor-about-header\">\n        <span id=\"qmsckeditor-about-header_001\" mat-icon-button class=\"qmsckeditor button__close\"\n            (click)=\"onCloseDialog()\">\n            <mat-icon>close</mat-icon>\n        </span>\n        <div id=\"qmsckeditor-about-header_002\" mat-dialog-content>\n            <h2 id=\"qmsckeditor-about_002_001\">\n                {{ LANG.ABOUT.ABOUT_CKEDITOR }}\n            </h2>\n        </div>\n    </div>\n    <div id=\"qmsckeditor-about-content\">\n        <div class=\"col-12 qmsckeditor__about__logo__container\">\n            <img class=\"qmsckeditor__about__logo\" src=\"../../../../assets/images/ckeditor5.svg\" alt=\"CKEditor logo\">\n        </div>\n        <div class=\"col-12\">\n            <p>{{LANG.ABOUT.CKEDITOR5_VERSION}} {{currentVersion}}.<br><a target=\"_blank\"\n                    href=\"https://ckeditor.com/\">https://ckeditor.com</a></p>\n            <p>{{LANG.ABOUT.CHECK}} <a target=\"_blank\"\n                    href=\"https://ckeditor.com/docs/\">{{LANG.ABOUT.CKEDITOR_USERS_GUIDE}}</a> {{LANG.ABOUT.FOR_HELP}}.\n            </p>\n            <p>{{LANG.ABOUT.FOR_LICENSING_INFORMATION_PLEASE_VISIT_OUR_WEBSITE}}:<br><a target=\"_blank\"\n                    href=\"https://ckeditor.com/legal/ckeditor-oss-license/\">https://ckeditor.com/legal/ckeditor-oss-license/</a>\n            </p>\n            <p>{{LANG.ABOUT.COPYRIGHT}} 2003-{{currentYear}}, <a target=\"_blank\"\n                    href=\"https://cksource.com/\">CKSource</a> - Frederico Knabben.\n                <br>{{LANG.ABOUT.ALL_RIGHTS_RESERVED}}.\n            </p>\n        </div>\n        <div class=\"col-12\">\n            <button mat-stroked-button class=\"qmsckeditor__about__button\" (click)=\"onCloseDialog()\">\n                {{ LANG.QMSCKEDITOR.CLOSE }}\n            </button>\n        </div>\n    </div>\n</div>", styles: [".mt5{margin-top:5px!important}.mt10{margin-top:10px!important}.mt7{margin-top:7px!important}.mt15{margin-top:15px!important}.mt20{margin-top:20px!important}.mt30{margin-top:30px!important}.mt40{margin-top:40px!important}.ml2{margin-left:2px!important}.ml3{margin-left:3px!important}.ml5{margin-left:5px!important}.ml15{margin-left:15px!important}.ml10{margin-left:10px!important}.ml12{margin-left:12px!important}.ml16{margin-left:16px!important}.ml-auto{margin-left:auto!important}.ml-25{margin-left:-25px!important}.mr5{margin-right:5px!important}.mr12{margin-right:12px!important}.mr15{margin-right:15px!important}.mb5{margin-bottom:5px!important}.mb10{margin-bottom:10px!important}.mb15{margin-bottom:15px!important}.pt8{padding-top:8px!important}.pt10{padding-top:10px!important}.pt15{padding-top:15px!important}.pt16{padding-top:16px!important}.pl15{padding-left:15px!important}.pl0{padding-left:0!important}.pr0{padding-right:0!important}.pr15{padding-right:15px!important}.fs12{font-size:12px}.fs14{font-size:14px!important}.fs16{font-size:16px!important}.fs22{font-size:22px!important}.fw500{font-weight:500!important}.italic-text{font-style:italic}.display-flex{display:flex}.qmsckeditor{font-family:Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:400}.qmsckeditor h2{font-size:20px;font-weight:400}.qmsckeditor .mat-mdc-dialog-content{padding:0}.qmsckeditor .mat-icon{color:#909497}.qmsckeditor__fullscreen{position:fixed;inset:0;background:#fff;overflow-y:auto;max-height:100vh;overflow-x:hidden}.qmsckeditor__cursor{cursor:pointer}.qmsckeditor__notallowed{cursor:not-allowed}.qmsckeditor.button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qmsckeditor.button__done{float:right;top:-24px;right:-24px;cursor:pointer;margin-right:20px}.qmsckeditor.button__done .mat-icon{color:#28a745;font-weight:700}.qmsckeditor.button__groups button{min-height:40px;width:100%;border-radius:4px;border:1px solid #C5C5C5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px}.qmsckeditor.button__groups .save{background:#f8f9f9}.qmsckeditor.button__groups .save:hover{background:#e5e7e9}.qmsckeditor.button__groups .save:disabled{cursor:not-allowed}.qmsckeditor.button__groups .cancel{background:#f8f9f9}.qmsckeditor.button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.button__groups .cancel:disabled{cursor:not-allowed}.qmsckeditor.button__groups .delete{background:#f8f9f9}.qmsckeditor.button__groups .delete:hover{background:#e5e7e9}.qmsckeditor.button__groups .delete:disabled{cursor:not-allowed}.qmsckeditor.confirm__button__groups button{min-height:36px;border-radius:4px;width:auto;border:1px solid #C5C5C5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px;padding-left:15px;padding-right:15px}.qmsckeditor.confirm__button__groups .confirm{background:#f8f9f9}.qmsckeditor.confirm__button__groups .confirm:hover{background:#e5e7e9}.qmsckeditor.confirm__button__groups .cancel{background:#f8f9f9}.qmsckeditor.confirm__button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.template-content.height{min-height:420px;max-height:520px;overflow:auto}.qmsckeditor.template-content.title{margin-left:-9px}.qmsckeditor.link__content.height{min-height:400px;max-height:520px}.qmsckeditor.card{margin-bottom:10px;min-height:60px;box-shadow:none;border:1px solid #e5e5e5}.qmsckeditor.card .title{font-weight:700}.qmsckeditor.card .content{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.qmsckeditor.card .material-icons{font-size:20px}.qmsckeditor.tooltip-content.height{min-height:400px;max-height:472px;overflow:auto}.qmsckeditor.save__as__template.height{height:125px}.ck-content .page-break,.ck-content .ck-horizontal-line{width:100%}.ck-content hr{background:#ccc}.ck-font-size-dropdown .ck-dropdown__panel ul{max-height:320px;overflow-y:auto}.ck-font-size-dropdown .ck-dropdown__panel ul li .ck-fontsize-option .ck-button__label{line-height:50px}.qmsckeditor__about__container .qmsckeditor__about__logo__container{display:flex;justify-content:center;margin-bottom:10px}.qmsckeditor__about__container .qmsckeditor__about__logo{height:64px}.qmsckeditor__about__container .qmsckeditor__about__button{float:right}\n"], dependencies: [{ kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: QMSCKEditorAboutComponent, selector: "app-about-ckeditor", inputs: { ckEditor: "ckEditor" }, usesInheritance: true, ngImport: i0, template: "<div id=\"qmsckeditor-about\" class=\"qmsckeditor qmsckeditor__about__container\">\n    <div id=\"qmsckeditor-about-header\">\n        <span id=\"qmsckeditor-about-header_001\" mat-icon-button class=\"qmsckeditor button__close\"\n            (click)=\"onCloseDialog()\">\n            <mat-icon>close</mat-icon>\n        </span>\n        <div id=\"qmsckeditor-about-header_002\" mat-dialog-content>\n            <h2 id=\"qmsckeditor-about_002_001\">\n                {{ LANG.ABOUT.ABOUT_CKEDITOR }}\n            </h2>\n        </div>\n    </div>\n    <div id=\"qmsckeditor-about-content\">\n        <div class=\"col-12 qmsckeditor__about__logo__container\">\n            <img class=\"qmsckeditor__about__logo\" src=\"../../../../assets/images/ckeditor5.svg\" alt=\"CKEditor logo\">\n        </div>\n        <div class=\"col-12\">\n            <p>{{LANG.ABOUT.CKEDITOR5_VERSION}} {{currentVersion}}.<br><a target=\"_blank\"\n                    href=\"https://ckeditor.com/\">https://ckeditor.com</a></p>\n            <p>{{LANG.ABOUT.CHECK}} <a target=\"_blank\"\n                    href=\"https://ckeditor.com/docs/\">{{LANG.ABOUT.CKEDITOR_USERS_GUIDE}}</a> {{LANG.ABOUT.FOR_HELP}}.\n            </p>\n            <p>{{LANG.ABOUT.FOR_LICENSING_INFORMATION_PLEASE_VISIT_OUR_WEBSITE}}:<br><a target=\"_blank\"\n                    href=\"https://ckeditor.com/legal/ckeditor-oss-license/\">https://ckeditor.com/legal/ckeditor-oss-license/</a>\n            </p>\n            <p>{{LANG.ABOUT.COPYRIGHT}} 2003-{{currentYear}}, <a target=\"_blank\"\n                    href=\"https://cksource.com/\">CKSource</a> - Frederico Knabben.\n                <br>{{LANG.ABOUT.ALL_RIGHTS_RESERVED}}.\n            </p>\n        </div>\n        <div class=\"col-12\">\n            <button mat-stroked-button class=\"qmsckeditor__about__button\" (click)=\"onCloseDialog()\">\n                {{ LANG.QMSCKEDITOR.CLOSE }}\n            </button>\n        </div>\n    </div>\n</div>", styles: [".mt5{margin-top:5px!important}.mt10{margin-top:10px!important}.mt7{margin-top:7px!important}.mt15{margin-top:15px!important}.mt20{margin-top:20px!important}.mt30{margin-top:30px!important}.mt40{margin-top:40px!important}.ml2{margin-left:2px!important}.ml3{margin-left:3px!important}.ml5{margin-left:5px!important}.ml15{margin-left:15px!important}.ml10{margin-left:10px!important}.ml12{margin-left:12px!important}.ml16{margin-left:16px!important}.ml-auto{margin-left:auto!important}.ml-25{margin-left:-25px!important}.mr5{margin-right:5px!important}.mr12{margin-right:12px!important}.mr15{margin-right:15px!important}.mb5{margin-bottom:5px!important}.mb10{margin-bottom:10px!important}.mb15{margin-bottom:15px!important}.pt8{padding-top:8px!important}.pt10{padding-top:10px!important}.pt15{padding-top:15px!important}.pt16{padding-top:16px!important}.pl15{padding-left:15px!important}.pl0{padding-left:0!important}.pr0{padding-right:0!important}.pr15{padding-right:15px!important}.fs12{font-size:12px}.fs14{font-size:14px!important}.fs16{font-size:16px!important}.fs22{font-size:22px!important}.fw500{font-weight:500!important}.italic-text{font-style:italic}.display-flex{display:flex}.qmsckeditor{font-family:Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:400}.qmsckeditor h2{font-size:20px;font-weight:400}.qmsckeditor .mat-icon{color:#909497}.qmsckeditor__fullscreen{position:fixed;inset:0;background:#fff;overflow-y:auto;max-height:100vh;overflow-x:hidden}.qmsckeditor__cursor{cursor:pointer}.qmsckeditor__notallowed{cursor:not-allowed}.qmsckeditor.button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qmsckeditor.button__done{float:right;top:-24px;right:-24px;cursor:pointer;margin-right:20px}.qmsckeditor.button__done .mat-icon{color:#28a745;font-weight:700}.qmsckeditor.button__groups button{min-height:40px;width:100%;border-radius:4px;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px}.qmsckeditor.button__groups .save{background:#f8f9f9}.qmsckeditor.button__groups .save:hover{background:#e5e7e9}.qmsckeditor.button__groups .save:disabled{cursor:not-allowed}.qmsckeditor.button__groups .cancel{background:#f8f9f9}.qmsckeditor.button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.button__groups .cancel:disabled{cursor:not-allowed}.qmsckeditor.button__groups .delete{background:#f8f9f9}.qmsckeditor.button__groups .delete:hover{background:#e5e7e9}.qmsckeditor.button__groups .delete:disabled{cursor:not-allowed}.qmsckeditor.confirm__button__groups button{min-height:36px;border-radius:4px;width:auto;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px;padding-left:15px;padding-right:15px}.qmsckeditor.confirm__button__groups .confirm{background:#f8f9f9}.qmsckeditor.confirm__button__groups .confirm:hover{background:#e5e7e9}.qmsckeditor.confirm__button__groups .cancel{background:#f8f9f9}.qmsckeditor.confirm__button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.template-content.height{min-height:420px;max-height:520px;overflow:auto}.qmsckeditor.template-content.title{margin-left:-9px}.qmsckeditor.link__content.height{min-height:400px;max-height:520px}.qmsckeditor.card{margin-bottom:10px;min-height:60px;box-shadow:none;border:1px solid #e5e5e5}.qmsckeditor.card .title{font-weight:700}.qmsckeditor.card .content{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.qmsckeditor.card .material-icons{font-size:20px}.qmsckeditor.tooltip-content.height{min-height:400px;max-height:472px;overflow:auto}.qmsckeditor.save__as__template.height{height:125px}.ck-content .page-break,.ck-content .ck-horizontal-line{width:100%}.ck-content hr{background:#ccc}.ck-font-size-dropdown .ck-dropdown__panel ul{max-height:320px;overflow-y:auto}.ck-font-size-dropdown .ck-dropdown__panel ul li .ck-fontsize-option .ck-button__label{line-height:50px}.qmsckeditor__about__container .qmsckeditor__about__logo__container{display:flex;justify-content:center;margin-bottom:10px}.qmsckeditor__about__container .qmsckeditor__about__logo{height:64px}.qmsckeditor__about__container .qmsckeditor__about__button{float:right}\n"], dependencies: [{ kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: QMSCKEditorAboutComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-about-ckeditor', template: "<div id=\"qmsckeditor-about\" class=\"qmsckeditor qmsckeditor__about__container\">\n    <div id=\"qmsckeditor-about-header\">\n        <span id=\"qmsckeditor-about-header_001\" mat-icon-button class=\"qmsckeditor button__close\"\n            (click)=\"onCloseDialog()\">\n            <mat-icon>close</mat-icon>\n        </span>\n        <div id=\"qmsckeditor-about-header_002\" mat-dialog-content>\n            <h2 id=\"qmsckeditor-about_002_001\">\n                {{ LANG.ABOUT.ABOUT_CKEDITOR }}\n            </h2>\n        </div>\n    </div>\n    <div id=\"qmsckeditor-about-content\">\n        <div class=\"col-12 qmsckeditor__about__logo__container\">\n            <img class=\"qmsckeditor__about__logo\" src=\"../../../../assets/images/ckeditor5.svg\" alt=\"CKEditor logo\">\n        </div>\n        <div class=\"col-12\">\n            <p>{{LANG.ABOUT.CKEDITOR5_VERSION}} {{currentVersion}}.<br><a target=\"_blank\"\n                    href=\"https://ckeditor.com/\">https://ckeditor.com</a></p>\n            <p>{{LANG.ABOUT.CHECK}} <a target=\"_blank\"\n                    href=\"https://ckeditor.com/docs/\">{{LANG.ABOUT.CKEDITOR_USERS_GUIDE}}</a> {{LANG.ABOUT.FOR_HELP}}.\n            </p>\n            <p>{{LANG.ABOUT.FOR_LICENSING_INFORMATION_PLEASE_VISIT_OUR_WEBSITE}}:<br><a target=\"_blank\"\n                    href=\"https://ckeditor.com/legal/ckeditor-oss-license/\">https://ckeditor.com/legal/ckeditor-oss-license/</a>\n            </p>\n            <p>{{LANG.ABOUT.COPYRIGHT}} 2003-{{currentYear}}, <a target=\"_blank\"\n                    href=\"https://cksource.com/\">CKSource</a> - Frederico Knabben.\n                <br>{{LANG.ABOUT.ALL_RIGHTS_RESERVED}}.\n            </p>\n        </div>\n        <div class=\"col-12\">\n            <button mat-stroked-button class=\"qmsckeditor__about__button\" (click)=\"onCloseDialog()\">\n                {{ LANG.QMSCKEDITOR.CLOSE }}\n            </button>\n        </div>\n    </div>\n</div>", styles: [".mt5{margin-top:5px!important}.mt10{margin-top:10px!important}.mt7{margin-top:7px!important}.mt15{margin-top:15px!important}.mt20{margin-top:20px!important}.mt30{margin-top:30px!important}.mt40{margin-top:40px!important}.ml2{margin-left:2px!important}.ml3{margin-left:3px!important}.ml5{margin-left:5px!important}.ml15{margin-left:15px!important}.ml10{margin-left:10px!important}.ml12{margin-left:12px!important}.ml16{margin-left:16px!important}.ml-auto{margin-left:auto!important}.ml-25{margin-left:-25px!important}.mr5{margin-right:5px!important}.mr12{margin-right:12px!important}.mr15{margin-right:15px!important}.mb5{margin-bottom:5px!important}.mb10{margin-bottom:10px!important}.mb15{margin-bottom:15px!important}.pt8{padding-top:8px!important}.pt10{padding-top:10px!important}.pt15{padding-top:15px!important}.pt16{padding-top:16px!important}.pl15{padding-left:15px!important}.pl0{padding-left:0!important}.pr0{padding-right:0!important}.pr15{padding-right:15px!important}.fs12{font-size:12px}.fs14{font-size:14px!important}.fs16{font-size:16px!important}.fs22{font-size:22px!important}.fw500{font-weight:500!important}.italic-text{font-style:italic}.display-flex{display:flex}.qmsckeditor{font-family:Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:400}.qmsckeditor h2{font-size:20px;font-weight:400}.qmsckeditor .mat-mdc-dialog-content{padding:0}.qmsckeditor .mat-icon{color:#909497}.qmsckeditor__fullscreen{position:fixed;inset:0;background:#fff;overflow-y:auto;max-height:100vh;overflow-x:hidden}.qmsckeditor__cursor{cursor:pointer}.qmsckeditor__notallowed{cursor:not-allowed}.qmsckeditor.button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qmsckeditor.button__done{float:right;top:-24px;right:-24px;cursor:pointer;margin-right:20px}.qmsckeditor.button__done .mat-icon{color:#28a745;font-weight:700}.qmsckeditor.button__groups button{min-height:40px;width:100%;border-radius:4px;border:1px solid #C5C5C5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px}.qmsckeditor.button__groups .save{background:#f8f9f9}.qmsckeditor.button__groups .save:hover{background:#e5e7e9}.qmsckeditor.button__groups .save:disabled{cursor:not-allowed}.qmsckeditor.button__groups .cancel{background:#f8f9f9}.qmsckeditor.button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.button__groups .cancel:disabled{cursor:not-allowed}.qmsckeditor.button__groups .delete{background:#f8f9f9}.qmsckeditor.button__groups .delete:hover{background:#e5e7e9}.qmsckeditor.button__groups .delete:disabled{cursor:not-allowed}.qmsckeditor.confirm__button__groups button{min-height:36px;border-radius:4px;width:auto;border:1px solid #C5C5C5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px;padding-left:15px;padding-right:15px}.qmsckeditor.confirm__button__groups .confirm{background:#f8f9f9}.qmsckeditor.confirm__button__groups .confirm:hover{background:#e5e7e9}.qmsckeditor.confirm__button__groups .cancel{background:#f8f9f9}.qmsckeditor.confirm__button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.template-content.height{min-height:420px;max-height:520px;overflow:auto}.qmsckeditor.template-content.title{margin-left:-9px}.qmsckeditor.link__content.height{min-height:400px;max-height:520px}.qmsckeditor.card{margin-bottom:10px;min-height:60px;box-shadow:none;border:1px solid #e5e5e5}.qmsckeditor.card .title{font-weight:700}.qmsckeditor.card .content{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.qmsckeditor.card .material-icons{font-size:20px}.qmsckeditor.tooltip-content.height{min-height:400px;max-height:472px;overflow:auto}.qmsckeditor.save__as__template.height{height:125px}.ck-content .page-break,.ck-content .ck-horizontal-line{width:100%}.ck-content hr{background:#ccc}.ck-font-size-dropdown .ck-dropdown__panel ul{max-height:320px;overflow-y:auto}.ck-font-size-dropdown .ck-dropdown__panel ul li .ck-fontsize-option .ck-button__label{line-height:50px}.qmsckeditor__about__container .qmsckeditor__about__logo__container{display:flex;justify-content:center;margin-bottom:10px}.qmsckeditor__about__container .qmsckeditor__about__logo{height:64px}.qmsckeditor__about__container .qmsckeditor__about__button{float:right}\n"] }]
+            args: [{ selector: 'app-about-ckeditor', template: "<div id=\"qmsckeditor-about\" class=\"qmsckeditor qmsckeditor__about__container\">\n    <div id=\"qmsckeditor-about-header\">\n        <span id=\"qmsckeditor-about-header_001\" mat-icon-button class=\"qmsckeditor button__close\"\n            (click)=\"onCloseDialog()\">\n            <mat-icon>close</mat-icon>\n        </span>\n        <div id=\"qmsckeditor-about-header_002\" mat-dialog-content>\n            <h2 id=\"qmsckeditor-about_002_001\">\n                {{ LANG.ABOUT.ABOUT_CKEDITOR }}\n            </h2>\n        </div>\n    </div>\n    <div id=\"qmsckeditor-about-content\">\n        <div class=\"col-12 qmsckeditor__about__logo__container\">\n            <img class=\"qmsckeditor__about__logo\" src=\"../../../../assets/images/ckeditor5.svg\" alt=\"CKEditor logo\">\n        </div>\n        <div class=\"col-12\">\n            <p>{{LANG.ABOUT.CKEDITOR5_VERSION}} {{currentVersion}}.<br><a target=\"_blank\"\n                    href=\"https://ckeditor.com/\">https://ckeditor.com</a></p>\n            <p>{{LANG.ABOUT.CHECK}} <a target=\"_blank\"\n                    href=\"https://ckeditor.com/docs/\">{{LANG.ABOUT.CKEDITOR_USERS_GUIDE}}</a> {{LANG.ABOUT.FOR_HELP}}.\n            </p>\n            <p>{{LANG.ABOUT.FOR_LICENSING_INFORMATION_PLEASE_VISIT_OUR_WEBSITE}}:<br><a target=\"_blank\"\n                    href=\"https://ckeditor.com/legal/ckeditor-oss-license/\">https://ckeditor.com/legal/ckeditor-oss-license/</a>\n            </p>\n            <p>{{LANG.ABOUT.COPYRIGHT}} 2003-{{currentYear}}, <a target=\"_blank\"\n                    href=\"https://cksource.com/\">CKSource</a> - Frederico Knabben.\n                <br>{{LANG.ABOUT.ALL_RIGHTS_RESERVED}}.\n            </p>\n        </div>\n        <div class=\"col-12\">\n            <button mat-stroked-button class=\"qmsckeditor__about__button\" (click)=\"onCloseDialog()\">\n                {{ LANG.QMSCKEDITOR.CLOSE }}\n            </button>\n        </div>\n    </div>\n</div>", styles: [".mt5{margin-top:5px!important}.mt10{margin-top:10px!important}.mt7{margin-top:7px!important}.mt15{margin-top:15px!important}.mt20{margin-top:20px!important}.mt30{margin-top:30px!important}.mt40{margin-top:40px!important}.ml2{margin-left:2px!important}.ml3{margin-left:3px!important}.ml5{margin-left:5px!important}.ml15{margin-left:15px!important}.ml10{margin-left:10px!important}.ml12{margin-left:12px!important}.ml16{margin-left:16px!important}.ml-auto{margin-left:auto!important}.ml-25{margin-left:-25px!important}.mr5{margin-right:5px!important}.mr12{margin-right:12px!important}.mr15{margin-right:15px!important}.mb5{margin-bottom:5px!important}.mb10{margin-bottom:10px!important}.mb15{margin-bottom:15px!important}.pt8{padding-top:8px!important}.pt10{padding-top:10px!important}.pt15{padding-top:15px!important}.pt16{padding-top:16px!important}.pl15{padding-left:15px!important}.pl0{padding-left:0!important}.pr0{padding-right:0!important}.pr15{padding-right:15px!important}.fs12{font-size:12px}.fs14{font-size:14px!important}.fs16{font-size:16px!important}.fs22{font-size:22px!important}.fw500{font-weight:500!important}.italic-text{font-style:italic}.display-flex{display:flex}.qmsckeditor{font-family:Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:400}.qmsckeditor h2{font-size:20px;font-weight:400}.qmsckeditor .mat-icon{color:#909497}.qmsckeditor__fullscreen{position:fixed;inset:0;background:#fff;overflow-y:auto;max-height:100vh;overflow-x:hidden}.qmsckeditor__cursor{cursor:pointer}.qmsckeditor__notallowed{cursor:not-allowed}.qmsckeditor.button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qmsckeditor.button__done{float:right;top:-24px;right:-24px;cursor:pointer;margin-right:20px}.qmsckeditor.button__done .mat-icon{color:#28a745;font-weight:700}.qmsckeditor.button__groups button{min-height:40px;width:100%;border-radius:4px;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px}.qmsckeditor.button__groups .save{background:#f8f9f9}.qmsckeditor.button__groups .save:hover{background:#e5e7e9}.qmsckeditor.button__groups .save:disabled{cursor:not-allowed}.qmsckeditor.button__groups .cancel{background:#f8f9f9}.qmsckeditor.button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.button__groups .cancel:disabled{cursor:not-allowed}.qmsckeditor.button__groups .delete{background:#f8f9f9}.qmsckeditor.button__groups .delete:hover{background:#e5e7e9}.qmsckeditor.button__groups .delete:disabled{cursor:not-allowed}.qmsckeditor.confirm__button__groups button{min-height:36px;border-radius:4px;width:auto;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px;padding-left:15px;padding-right:15px}.qmsckeditor.confirm__button__groups .confirm{background:#f8f9f9}.qmsckeditor.confirm__button__groups .confirm:hover{background:#e5e7e9}.qmsckeditor.confirm__button__groups .cancel{background:#f8f9f9}.qmsckeditor.confirm__button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.template-content.height{min-height:420px;max-height:520px;overflow:auto}.qmsckeditor.template-content.title{margin-left:-9px}.qmsckeditor.link__content.height{min-height:400px;max-height:520px}.qmsckeditor.card{margin-bottom:10px;min-height:60px;box-shadow:none;border:1px solid #e5e5e5}.qmsckeditor.card .title{font-weight:700}.qmsckeditor.card .content{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.qmsckeditor.card .material-icons{font-size:20px}.qmsckeditor.tooltip-content.height{min-height:400px;max-height:472px;overflow:auto}.qmsckeditor.save__as__template.height{height:125px}.ck-content .page-break,.ck-content .ck-horizontal-line{width:100%}.ck-content hr{background:#ccc}.ck-font-size-dropdown .ck-dropdown__panel ul{max-height:320px;overflow-y:auto}.ck-font-size-dropdown .ck-dropdown__panel ul li .ck-fontsize-option .ck-button__label{line-height:50px}.qmsckeditor__about__container .qmsckeditor__about__logo__container{display:flex;justify-content:center;margin-bottom:10px}.qmsckeditor__about__container .qmsckeditor__about__logo{height:64px}.qmsckeditor__about__container .qmsckeditor__about__button{float:right}\n"] }]
         }], ctorParameters: () => [{ type: TranslateLibraryService }, { type: i1$2.MatDialogRef }, { type: QMSCKEditorCommonService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -31989,11 +31989,11 @@ class QmsCkeditorLinkSimpleComponent extends QMSCKEditorBaseComponent {
         this.commonService.setScrollTopEditorContainer(this.ckEditor, scrollTop);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: QmsCkeditorLinkSimpleComponent, deps: [{ token: i1$2.MatDialogRef }, { token: TranslateLibraryService }, { token: QMSCKEditorCommonService }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: QmsCkeditorLinkSimpleComponent, selector: "lib-qms-ckeditor-link-simple", inputs: { ckEditor: "ckEditor" }, usesInheritance: true, ngImport: i0, template: "<div id=\"qmsckeditor_link-simple\" class=\"qmsckeditor qmsckeditor__link-simple__container\">\n    <div id=\"qmsckeditor_link-simple_header\">\n        <span mat-icon-button class=\"qmsckeditor button__close\" (click)=\"onCloseDialog()\">\n            <mat-icon>close</mat-icon>\n        </span>\n        <div mat-dialog-content>\n            <h2>\n                {{LANG.QMSCKEDITOR.LINK}}\n            </h2>\n        </div>\n    </div>\n    <div id=\"qmsckeditor_link-simple_body\" class=\"row\">\n        <div id=\"qmsckeditor_link-simple_url\">\n            <mat-form-field class=\"col-12\" appearance=\"fill\">\n                <mat-label>{{ LANG.QMSCKEDITOR.LINK_URL }}</mat-label>\n                <input matInput [(ngModel)]=\"url\" name=\"url\" [formControl]=\"urlFormControl\" />\n                <mat-error *ngIf=\"urlFormControl.hasError('required')\">\n                </mat-error>\n            </mat-form-field>\n        </div>\n    </div>\n    <div id=\"qmsckeditor_link-simple_footer\">\n        <div id=\"qmsckeditor_link-simple_action\" align=\"end\">\n            <button qms-btn-text (click)=\"onCloseDialog()\">{{LANG.CANCEL}}</button>\n            <button qms-btn (click)=\"setLink()\">{{LANG.SAVE}}</button>\n        </div>\n    </div>\n</div>", styles: [".mt5{margin-top:5px!important}.mt10{margin-top:10px!important}.mt7{margin-top:7px!important}.mt15{margin-top:15px!important}.mt20{margin-top:20px!important}.mt30{margin-top:30px!important}.mt40{margin-top:40px!important}.ml2{margin-left:2px!important}.ml3{margin-left:3px!important}.ml5{margin-left:5px!important}.ml15{margin-left:15px!important}.ml10{margin-left:10px!important}.ml12{margin-left:12px!important}.ml16{margin-left:16px!important}.ml-auto{margin-left:auto!important}.ml-25{margin-left:-25px!important}.mr5{margin-right:5px!important}.mr12{margin-right:12px!important}.mr15{margin-right:15px!important}.mb5{margin-bottom:5px!important}.mb10{margin-bottom:10px!important}.mb15{margin-bottom:15px!important}.pt8{padding-top:8px!important}.pt10{padding-top:10px!important}.pt15{padding-top:15px!important}.pt16{padding-top:16px!important}.pl15{padding-left:15px!important}.pl0{padding-left:0!important}.pr0{padding-right:0!important}.pr15{padding-right:15px!important}.fs12{font-size:12px}.fs14{font-size:14px!important}.fs16{font-size:16px!important}.fs22{font-size:22px!important}.fw500{font-weight:500!important}.italic-text{font-style:italic}.display-flex{display:flex}.qmsckeditor{font-family:Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:400}.qmsckeditor h2{font-size:20px;font-weight:400}.qmsckeditor .mat-mdc-dialog-content{padding:0}.qmsckeditor .mat-icon{color:#909497}.qmsckeditor__fullscreen{position:fixed;inset:0;background:#fff;overflow-y:auto;max-height:100vh;overflow-x:hidden}.qmsckeditor__cursor{cursor:pointer}.qmsckeditor__notallowed{cursor:not-allowed}.qmsckeditor.button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qmsckeditor.button__done{float:right;top:-24px;right:-24px;cursor:pointer;margin-right:20px}.qmsckeditor.button__done .mat-icon{color:#28a745;font-weight:700}.qmsckeditor.button__groups button{min-height:40px;width:100%;border-radius:4px;border:1px solid #C5C5C5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px}.qmsckeditor.button__groups .save{background:#f8f9f9}.qmsckeditor.button__groups .save:hover{background:#e5e7e9}.qmsckeditor.button__groups .save:disabled{cursor:not-allowed}.qmsckeditor.button__groups .cancel{background:#f8f9f9}.qmsckeditor.button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.button__groups .cancel:disabled{cursor:not-allowed}.qmsckeditor.button__groups .delete{background:#f8f9f9}.qmsckeditor.button__groups .delete:hover{background:#e5e7e9}.qmsckeditor.button__groups .delete:disabled{cursor:not-allowed}.qmsckeditor.confirm__button__groups button{min-height:36px;border-radius:4px;width:auto;border:1px solid #C5C5C5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px;padding-left:15px;padding-right:15px}.qmsckeditor.confirm__button__groups .confirm{background:#f8f9f9}.qmsckeditor.confirm__button__groups .confirm:hover{background:#e5e7e9}.qmsckeditor.confirm__button__groups .cancel{background:#f8f9f9}.qmsckeditor.confirm__button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.template-content.height{min-height:420px;max-height:520px;overflow:auto}.qmsckeditor.template-content.title{margin-left:-9px}.qmsckeditor.link__content.height{min-height:400px;max-height:520px}.qmsckeditor.card{margin-bottom:10px;min-height:60px;box-shadow:none;border:1px solid #e5e5e5}.qmsckeditor.card .title{font-weight:700}.qmsckeditor.card .content{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.qmsckeditor.card .material-icons{font-size:20px}.qmsckeditor.tooltip-content.height{min-height:400px;max-height:472px;overflow:auto}.qmsckeditor.save__as__template.height{height:125px}.ck-content .page-break,.ck-content .ck-horizontal-line{width:100%}.ck-content hr{background:#ccc}.ck-font-size-dropdown .ck-dropdown__panel ul{max-height:320px;overflow-y:auto}.ck-font-size-dropdown .ck-dropdown__panel ul li .ck-fontsize-option .ck-button__label{line-height:50px}\n"], dependencies: [{ kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i11.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i11.MatLabel, selector: "mat-label" }, { kind: "directive", type: i11.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: QMSButton, selector: "button[qms-btn], button[qms-btn-lg], button[qms-btn-outlined],\n               button[qms-btn-outlined-lg], button[qms-btn-text], button[qms-btn-text-lg],\n               button[qms-btn-fab],button[qms-btn-fab-sm],button[qms-btn-fab-ext],\n               button[qms-btn-fab-outlined],button[qms-btn-fab-outlined-sm],button[qms-btn-fab-outlined-ext]", inputs: ["disabled", "color"], exportAs: ["qmsButton"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: QmsCkeditorLinkSimpleComponent, selector: "lib-qms-ckeditor-link-simple", inputs: { ckEditor: "ckEditor" }, usesInheritance: true, ngImport: i0, template: "<div id=\"qmsckeditor_link-simple\" class=\"qmsckeditor qmsckeditor__link-simple__container\">\n    <div id=\"qmsckeditor_link-simple_header\">\n        <span mat-icon-button class=\"qmsckeditor button__close\" (click)=\"onCloseDialog()\">\n            <mat-icon>close</mat-icon>\n        </span>\n        <div mat-dialog-content>\n            <h2>\n                {{LANG.QMSCKEDITOR.LINK}}\n            </h2>\n        </div>\n    </div>\n    <div id=\"qmsckeditor_link-simple_body\" class=\"row\">\n        <div id=\"qmsckeditor_link-simple_url\">\n            <mat-form-field class=\"col-12\" appearance=\"fill\">\n                <mat-label>{{ LANG.QMSCKEDITOR.LINK_URL }}</mat-label>\n                <input matInput [(ngModel)]=\"url\" name=\"url\" [formControl]=\"urlFormControl\" />\n                <mat-error *ngIf=\"urlFormControl.hasError('required')\">\n                </mat-error>\n            </mat-form-field>\n        </div>\n    </div>\n    <div id=\"qmsckeditor_link-simple_footer\">\n        <div id=\"qmsckeditor_link-simple_action\" align=\"end\">\n            <button qms-btn-text (click)=\"onCloseDialog()\">{{LANG.CANCEL}}</button>\n            <button qms-btn (click)=\"setLink()\">{{LANG.SAVE}}</button>\n        </div>\n    </div>\n</div>", styles: [".mt5{margin-top:5px!important}.mt10{margin-top:10px!important}.mt7{margin-top:7px!important}.mt15{margin-top:15px!important}.mt20{margin-top:20px!important}.mt30{margin-top:30px!important}.mt40{margin-top:40px!important}.ml2{margin-left:2px!important}.ml3{margin-left:3px!important}.ml5{margin-left:5px!important}.ml15{margin-left:15px!important}.ml10{margin-left:10px!important}.ml12{margin-left:12px!important}.ml16{margin-left:16px!important}.ml-auto{margin-left:auto!important}.ml-25{margin-left:-25px!important}.mr5{margin-right:5px!important}.mr12{margin-right:12px!important}.mr15{margin-right:15px!important}.mb5{margin-bottom:5px!important}.mb10{margin-bottom:10px!important}.mb15{margin-bottom:15px!important}.pt8{padding-top:8px!important}.pt10{padding-top:10px!important}.pt15{padding-top:15px!important}.pt16{padding-top:16px!important}.pl15{padding-left:15px!important}.pl0{padding-left:0!important}.pr0{padding-right:0!important}.pr15{padding-right:15px!important}.fs12{font-size:12px}.fs14{font-size:14px!important}.fs16{font-size:16px!important}.fs22{font-size:22px!important}.fw500{font-weight:500!important}.italic-text{font-style:italic}.display-flex{display:flex}.qmsckeditor{font-family:Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:400}.qmsckeditor h2{font-size:20px;font-weight:400}.qmsckeditor .mat-icon{color:#909497}.qmsckeditor__fullscreen{position:fixed;inset:0;background:#fff;overflow-y:auto;max-height:100vh;overflow-x:hidden}.qmsckeditor__cursor{cursor:pointer}.qmsckeditor__notallowed{cursor:not-allowed}.qmsckeditor.button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qmsckeditor.button__done{float:right;top:-24px;right:-24px;cursor:pointer;margin-right:20px}.qmsckeditor.button__done .mat-icon{color:#28a745;font-weight:700}.qmsckeditor.button__groups button{min-height:40px;width:100%;border-radius:4px;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px}.qmsckeditor.button__groups .save{background:#f8f9f9}.qmsckeditor.button__groups .save:hover{background:#e5e7e9}.qmsckeditor.button__groups .save:disabled{cursor:not-allowed}.qmsckeditor.button__groups .cancel{background:#f8f9f9}.qmsckeditor.button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.button__groups .cancel:disabled{cursor:not-allowed}.qmsckeditor.button__groups .delete{background:#f8f9f9}.qmsckeditor.button__groups .delete:hover{background:#e5e7e9}.qmsckeditor.button__groups .delete:disabled{cursor:not-allowed}.qmsckeditor.confirm__button__groups button{min-height:36px;border-radius:4px;width:auto;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px;padding-left:15px;padding-right:15px}.qmsckeditor.confirm__button__groups .confirm{background:#f8f9f9}.qmsckeditor.confirm__button__groups .confirm:hover{background:#e5e7e9}.qmsckeditor.confirm__button__groups .cancel{background:#f8f9f9}.qmsckeditor.confirm__button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.template-content.height{min-height:420px;max-height:520px;overflow:auto}.qmsckeditor.template-content.title{margin-left:-9px}.qmsckeditor.link__content.height{min-height:400px;max-height:520px}.qmsckeditor.card{margin-bottom:10px;min-height:60px;box-shadow:none;border:1px solid #e5e5e5}.qmsckeditor.card .title{font-weight:700}.qmsckeditor.card .content{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.qmsckeditor.card .material-icons{font-size:20px}.qmsckeditor.tooltip-content.height{min-height:400px;max-height:472px;overflow:auto}.qmsckeditor.save__as__template.height{height:125px}.ck-content .page-break,.ck-content .ck-horizontal-line{width:100%}.ck-content hr{background:#ccc}.ck-font-size-dropdown .ck-dropdown__panel ul{max-height:320px;overflow-y:auto}.ck-font-size-dropdown .ck-dropdown__panel ul li .ck-fontsize-option .ck-button__label{line-height:50px}\n"], dependencies: [{ kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i11.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i11.MatLabel, selector: "mat-label" }, { kind: "directive", type: i11.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: QMSButton, selector: "button[qms-btn], button[qms-btn-lg], button[qms-btn-outlined],\n               button[qms-btn-outlined-lg], button[qms-btn-text], button[qms-btn-text-lg],\n               button[qms-btn-fab],button[qms-btn-fab-sm],button[qms-btn-fab-ext],\n               button[qms-btn-fab-outlined],button[qms-btn-fab-outlined-sm],button[qms-btn-fab-outlined-ext]", inputs: ["disabled", "color"], exportAs: ["qmsButton"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: QmsCkeditorLinkSimpleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-qms-ckeditor-link-simple', template: "<div id=\"qmsckeditor_link-simple\" class=\"qmsckeditor qmsckeditor__link-simple__container\">\n    <div id=\"qmsckeditor_link-simple_header\">\n        <span mat-icon-button class=\"qmsckeditor button__close\" (click)=\"onCloseDialog()\">\n            <mat-icon>close</mat-icon>\n        </span>\n        <div mat-dialog-content>\n            <h2>\n                {{LANG.QMSCKEDITOR.LINK}}\n            </h2>\n        </div>\n    </div>\n    <div id=\"qmsckeditor_link-simple_body\" class=\"row\">\n        <div id=\"qmsckeditor_link-simple_url\">\n            <mat-form-field class=\"col-12\" appearance=\"fill\">\n                <mat-label>{{ LANG.QMSCKEDITOR.LINK_URL }}</mat-label>\n                <input matInput [(ngModel)]=\"url\" name=\"url\" [formControl]=\"urlFormControl\" />\n                <mat-error *ngIf=\"urlFormControl.hasError('required')\">\n                </mat-error>\n            </mat-form-field>\n        </div>\n    </div>\n    <div id=\"qmsckeditor_link-simple_footer\">\n        <div id=\"qmsckeditor_link-simple_action\" align=\"end\">\n            <button qms-btn-text (click)=\"onCloseDialog()\">{{LANG.CANCEL}}</button>\n            <button qms-btn (click)=\"setLink()\">{{LANG.SAVE}}</button>\n        </div>\n    </div>\n</div>", styles: [".mt5{margin-top:5px!important}.mt10{margin-top:10px!important}.mt7{margin-top:7px!important}.mt15{margin-top:15px!important}.mt20{margin-top:20px!important}.mt30{margin-top:30px!important}.mt40{margin-top:40px!important}.ml2{margin-left:2px!important}.ml3{margin-left:3px!important}.ml5{margin-left:5px!important}.ml15{margin-left:15px!important}.ml10{margin-left:10px!important}.ml12{margin-left:12px!important}.ml16{margin-left:16px!important}.ml-auto{margin-left:auto!important}.ml-25{margin-left:-25px!important}.mr5{margin-right:5px!important}.mr12{margin-right:12px!important}.mr15{margin-right:15px!important}.mb5{margin-bottom:5px!important}.mb10{margin-bottom:10px!important}.mb15{margin-bottom:15px!important}.pt8{padding-top:8px!important}.pt10{padding-top:10px!important}.pt15{padding-top:15px!important}.pt16{padding-top:16px!important}.pl15{padding-left:15px!important}.pl0{padding-left:0!important}.pr0{padding-right:0!important}.pr15{padding-right:15px!important}.fs12{font-size:12px}.fs14{font-size:14px!important}.fs16{font-size:16px!important}.fs22{font-size:22px!important}.fw500{font-weight:500!important}.italic-text{font-style:italic}.display-flex{display:flex}.qmsckeditor{font-family:Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:400}.qmsckeditor h2{font-size:20px;font-weight:400}.qmsckeditor .mat-mdc-dialog-content{padding:0}.qmsckeditor .mat-icon{color:#909497}.qmsckeditor__fullscreen{position:fixed;inset:0;background:#fff;overflow-y:auto;max-height:100vh;overflow-x:hidden}.qmsckeditor__cursor{cursor:pointer}.qmsckeditor__notallowed{cursor:not-allowed}.qmsckeditor.button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qmsckeditor.button__done{float:right;top:-24px;right:-24px;cursor:pointer;margin-right:20px}.qmsckeditor.button__done .mat-icon{color:#28a745;font-weight:700}.qmsckeditor.button__groups button{min-height:40px;width:100%;border-radius:4px;border:1px solid #C5C5C5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px}.qmsckeditor.button__groups .save{background:#f8f9f9}.qmsckeditor.button__groups .save:hover{background:#e5e7e9}.qmsckeditor.button__groups .save:disabled{cursor:not-allowed}.qmsckeditor.button__groups .cancel{background:#f8f9f9}.qmsckeditor.button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.button__groups .cancel:disabled{cursor:not-allowed}.qmsckeditor.button__groups .delete{background:#f8f9f9}.qmsckeditor.button__groups .delete:hover{background:#e5e7e9}.qmsckeditor.button__groups .delete:disabled{cursor:not-allowed}.qmsckeditor.confirm__button__groups button{min-height:36px;border-radius:4px;width:auto;border:1px solid #C5C5C5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px;padding-left:15px;padding-right:15px}.qmsckeditor.confirm__button__groups .confirm{background:#f8f9f9}.qmsckeditor.confirm__button__groups .confirm:hover{background:#e5e7e9}.qmsckeditor.confirm__button__groups .cancel{background:#f8f9f9}.qmsckeditor.confirm__button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.template-content.height{min-height:420px;max-height:520px;overflow:auto}.qmsckeditor.template-content.title{margin-left:-9px}.qmsckeditor.link__content.height{min-height:400px;max-height:520px}.qmsckeditor.card{margin-bottom:10px;min-height:60px;box-shadow:none;border:1px solid #e5e5e5}.qmsckeditor.card .title{font-weight:700}.qmsckeditor.card .content{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.qmsckeditor.card .material-icons{font-size:20px}.qmsckeditor.tooltip-content.height{min-height:400px;max-height:472px;overflow:auto}.qmsckeditor.save__as__template.height{height:125px}.ck-content .page-break,.ck-content .ck-horizontal-line{width:100%}.ck-content hr{background:#ccc}.ck-font-size-dropdown .ck-dropdown__panel ul{max-height:320px;overflow-y:auto}.ck-font-size-dropdown .ck-dropdown__panel ul li .ck-fontsize-option .ck-button__label{line-height:50px}\n"] }]
+            args: [{ selector: 'lib-qms-ckeditor-link-simple', template: "<div id=\"qmsckeditor_link-simple\" class=\"qmsckeditor qmsckeditor__link-simple__container\">\n    <div id=\"qmsckeditor_link-simple_header\">\n        <span mat-icon-button class=\"qmsckeditor button__close\" (click)=\"onCloseDialog()\">\n            <mat-icon>close</mat-icon>\n        </span>\n        <div mat-dialog-content>\n            <h2>\n                {{LANG.QMSCKEDITOR.LINK}}\n            </h2>\n        </div>\n    </div>\n    <div id=\"qmsckeditor_link-simple_body\" class=\"row\">\n        <div id=\"qmsckeditor_link-simple_url\">\n            <mat-form-field class=\"col-12\" appearance=\"fill\">\n                <mat-label>{{ LANG.QMSCKEDITOR.LINK_URL }}</mat-label>\n                <input matInput [(ngModel)]=\"url\" name=\"url\" [formControl]=\"urlFormControl\" />\n                <mat-error *ngIf=\"urlFormControl.hasError('required')\">\n                </mat-error>\n            </mat-form-field>\n        </div>\n    </div>\n    <div id=\"qmsckeditor_link-simple_footer\">\n        <div id=\"qmsckeditor_link-simple_action\" align=\"end\">\n            <button qms-btn-text (click)=\"onCloseDialog()\">{{LANG.CANCEL}}</button>\n            <button qms-btn (click)=\"setLink()\">{{LANG.SAVE}}</button>\n        </div>\n    </div>\n</div>", styles: [".mt5{margin-top:5px!important}.mt10{margin-top:10px!important}.mt7{margin-top:7px!important}.mt15{margin-top:15px!important}.mt20{margin-top:20px!important}.mt30{margin-top:30px!important}.mt40{margin-top:40px!important}.ml2{margin-left:2px!important}.ml3{margin-left:3px!important}.ml5{margin-left:5px!important}.ml15{margin-left:15px!important}.ml10{margin-left:10px!important}.ml12{margin-left:12px!important}.ml16{margin-left:16px!important}.ml-auto{margin-left:auto!important}.ml-25{margin-left:-25px!important}.mr5{margin-right:5px!important}.mr12{margin-right:12px!important}.mr15{margin-right:15px!important}.mb5{margin-bottom:5px!important}.mb10{margin-bottom:10px!important}.mb15{margin-bottom:15px!important}.pt8{padding-top:8px!important}.pt10{padding-top:10px!important}.pt15{padding-top:15px!important}.pt16{padding-top:16px!important}.pl15{padding-left:15px!important}.pl0{padding-left:0!important}.pr0{padding-right:0!important}.pr15{padding-right:15px!important}.fs12{font-size:12px}.fs14{font-size:14px!important}.fs16{font-size:16px!important}.fs22{font-size:22px!important}.fw500{font-weight:500!important}.italic-text{font-style:italic}.display-flex{display:flex}.qmsckeditor{font-family:Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:400}.qmsckeditor h2{font-size:20px;font-weight:400}.qmsckeditor .mat-icon{color:#909497}.qmsckeditor__fullscreen{position:fixed;inset:0;background:#fff;overflow-y:auto;max-height:100vh;overflow-x:hidden}.qmsckeditor__cursor{cursor:pointer}.qmsckeditor__notallowed{cursor:not-allowed}.qmsckeditor.button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qmsckeditor.button__done{float:right;top:-24px;right:-24px;cursor:pointer;margin-right:20px}.qmsckeditor.button__done .mat-icon{color:#28a745;font-weight:700}.qmsckeditor.button__groups button{min-height:40px;width:100%;border-radius:4px;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px}.qmsckeditor.button__groups .save{background:#f8f9f9}.qmsckeditor.button__groups .save:hover{background:#e5e7e9}.qmsckeditor.button__groups .save:disabled{cursor:not-allowed}.qmsckeditor.button__groups .cancel{background:#f8f9f9}.qmsckeditor.button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.button__groups .cancel:disabled{cursor:not-allowed}.qmsckeditor.button__groups .delete{background:#f8f9f9}.qmsckeditor.button__groups .delete:hover{background:#e5e7e9}.qmsckeditor.button__groups .delete:disabled{cursor:not-allowed}.qmsckeditor.confirm__button__groups button{min-height:36px;border-radius:4px;width:auto;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px;padding-left:15px;padding-right:15px}.qmsckeditor.confirm__button__groups .confirm{background:#f8f9f9}.qmsckeditor.confirm__button__groups .confirm:hover{background:#e5e7e9}.qmsckeditor.confirm__button__groups .cancel{background:#f8f9f9}.qmsckeditor.confirm__button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.template-content.height{min-height:420px;max-height:520px;overflow:auto}.qmsckeditor.template-content.title{margin-left:-9px}.qmsckeditor.link__content.height{min-height:400px;max-height:520px}.qmsckeditor.card{margin-bottom:10px;min-height:60px;box-shadow:none;border:1px solid #e5e5e5}.qmsckeditor.card .title{font-weight:700}.qmsckeditor.card .content{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.qmsckeditor.card .material-icons{font-size:20px}.qmsckeditor.tooltip-content.height{min-height:400px;max-height:472px;overflow:auto}.qmsckeditor.save__as__template.height{height:125px}.ck-content .page-break,.ck-content .ck-horizontal-line{width:100%}.ck-content hr{background:#ccc}.ck-font-size-dropdown .ck-dropdown__panel ul{max-height:320px;overflow-y:auto}.ck-font-size-dropdown .ck-dropdown__panel ul li .ck-fontsize-option .ck-button__label{line-height:50px}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.MatDialogRef }, { type: TranslateLibraryService }, { type: QMSCKEditorCommonService }, { type: QMSCKEditorLink, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -32699,7 +32699,7 @@ class QMSCKEditorComponent extends QMSCKEditorBaseComponent {
                 useExisting: forwardRef(() => QMSCKEditorComponent),
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, template: "<div class=\"qmsckeditor_container\" [id]=\"editorId\">\n  <ckeditor class=\"qms-ckeditor\" [tagName]=\"ckTagname\" [(editor)]=\"ckEditor\" [config]=\"ckeditorConfig\"\n    (ready)=\"onReady($event)\" [(ngModel)]=\"qmsckContentInput\" (change)=\"onChanged($event)\" (blur)=\"onBlur($event)\"\n    [disabled]=\"isDisabled\">\n  </ckeditor>\n  <div class=\"sub-container\">\n    <div class=\"\">\n      <span>{{LANG.QMSCKEDITOR.ASSISTIVE_TEXT}}</span>\n    </div>\n    <div class=\"wordcount-content\"></div>\n  </div>\n</div>", styles: [".mt5{margin-top:5px!important}.mt10{margin-top:10px!important}.mt7{margin-top:7px!important}.mt15{margin-top:15px!important}.mt20{margin-top:20px!important}.mt30{margin-top:30px!important}.mt40{margin-top:40px!important}.ml2{margin-left:2px!important}.ml3{margin-left:3px!important}.ml5{margin-left:5px!important}.ml15{margin-left:15px!important}.ml10{margin-left:10px!important}.ml12{margin-left:12px!important}.ml16{margin-left:16px!important}.ml-auto{margin-left:auto!important}.ml-25{margin-left:-25px!important}.mr5{margin-right:5px!important}.mr12{margin-right:12px!important}.mr15{margin-right:15px!important}.mb5{margin-bottom:5px!important}.mb10{margin-bottom:10px!important}.mb15{margin-bottom:15px!important}.pt8{padding-top:8px!important}.pt10{padding-top:10px!important}.pt15{padding-top:15px!important}.pt16{padding-top:16px!important}.pl15{padding-left:15px!important}.pl0{padding-left:0!important}.pr0{padding-right:0!important}.pr15{padding-right:15px!important}.fs12{font-size:12px}.fs14{font-size:14px!important}.fs16{font-size:16px!important}.fs22{font-size:22px!important}.fw500{font-weight:500!important}.italic-text{font-style:italic}.display-flex{display:flex}.qmsckeditor{font-family:Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:400}.qmsckeditor h2{font-size:20px;font-weight:400}.qmsckeditor .mat-mdc-dialog-content{padding:0}.qmsckeditor .mat-icon{color:#909497}.qmsckeditor__fullscreen{position:fixed;inset:0;background:#fff;overflow-y:auto;max-height:100vh;overflow-x:hidden}.qmsckeditor__cursor{cursor:pointer}.qmsckeditor__notallowed{cursor:not-allowed}.qmsckeditor.button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qmsckeditor.button__done{float:right;top:-24px;right:-24px;cursor:pointer;margin-right:20px}.qmsckeditor.button__done .mat-icon{color:#28a745;font-weight:700}.qmsckeditor.button__groups button{min-height:40px;width:100%;border-radius:4px;border:1px solid #C5C5C5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px}.qmsckeditor.button__groups .save{background:#f8f9f9}.qmsckeditor.button__groups .save:hover{background:#e5e7e9}.qmsckeditor.button__groups .save:disabled{cursor:not-allowed}.qmsckeditor.button__groups .cancel{background:#f8f9f9}.qmsckeditor.button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.button__groups .cancel:disabled{cursor:not-allowed}.qmsckeditor.button__groups .delete{background:#f8f9f9}.qmsckeditor.button__groups .delete:hover{background:#e5e7e9}.qmsckeditor.button__groups .delete:disabled{cursor:not-allowed}.qmsckeditor.confirm__button__groups button{min-height:36px;border-radius:4px;width:auto;border:1px solid #C5C5C5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px;padding-left:15px;padding-right:15px}.qmsckeditor.confirm__button__groups .confirm{background:#f8f9f9}.qmsckeditor.confirm__button__groups .confirm:hover{background:#e5e7e9}.qmsckeditor.confirm__button__groups .cancel{background:#f8f9f9}.qmsckeditor.confirm__button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.template-content.height{min-height:420px;max-height:520px;overflow:auto}.qmsckeditor.template-content.title{margin-left:-9px}.qmsckeditor.link__content.height{min-height:400px;max-height:520px}.qmsckeditor.card{margin-bottom:10px;min-height:60px;box-shadow:none;border:1px solid #e5e5e5}.qmsckeditor.card .title{font-weight:700}.qmsckeditor.card .content{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.qmsckeditor.card .material-icons{font-size:20px}.qmsckeditor.tooltip-content.height{min-height:400px;max-height:472px;overflow:auto}.qmsckeditor.save__as__template.height{height:125px}.ck-content .page-break,.ck-content .ck-horizontal-line{width:100%}.ck-content hr{background:#ccc}.ck-font-size-dropdown .ck-dropdown__panel ul{max-height:320px;overflow-y:auto}.ck-font-size-dropdown .ck-dropdown__panel ul li .ck-fontsize-option .ck-button__label{line-height:50px}.qmsckeditor_container .qmsckeditor__minwidth{width:100%}.qmsckeditor_container .ck-editor__editable{overflow-y:auto}.qmsckeditor_container p{line-height:normal}.qms-ckeditor .ck.ck-editor__editable{max-height:172px;min-height:172px;background-color:#0000000a;font-family:Open Sans}.qms-ckeditor .ck.ck-editor__editable:not(.ck-focused,.ck-read-only):hover{background-color:#00000014;border-bottom:2px solid rgba(0,0,0,.38)}.qms-ckeditor .ck.ck-editor__editable::-webkit-scrollbar{width:12px}.qms-ckeditor .ck.ck-editor__editable::-webkit-scrollbar-track{background:transparent;background-clip:content-box}.qms-ckeditor .ck.ck-editor__editable::-webkit-scrollbar-thumb{background:#00000061;border-radius:20px;width:4px;border:4px solid transparent;background-clip:content-box}.qms-ckeditor .ck.ck-editor__editable::-webkit-scrollbar-thumb:hover{background:#00000080;background-clip:content-box;border:4px solid transparent}.qms-ckeditor .ck-placeholder{font-size:1rem;font-weight:600;color:#0009}.qms-ckeditor .ck-disabled .ck.ck-toolbar,.qms-ckeditor .ck-disabled .ck.ck-editor__main>.ck-editor__editable{background-color:var(--disabled);pointer-events:none}.qms-ckeditor .ck-disabled .ck-button{pointer-events:none}.qms-ckeditor .ck.ck-editor__main>.ck-editor__editable:not(.ck-focused):focus{border-radius:4px}.qms-ckeditor .ck.ck-editor__editable:not(.ck-editor__nested-editable).ck-focused{border:1px solid #c4c4c4;border-bottom:2px solid var(--primary);border-radius:4px;box-shadow:none;background-color:#00000014}.qms-ckeditor .ck.ck-toolbar{box-shadow:0 1px 3px #3333}.qms-ckeditor .ck.ck-sticky-panel .ck-sticky-panel__content_sticky{box-shadow:none;border-width:0}.qmsckeditor__fullscreen{position:fixed;inset:0;overflow:auto;background:#fff;z-index:99}.qmsckeditor__fullscreen .qms-ckeditor{height:98%;display:block;width:100%}.qmsckeditor__fullscreen .ck.ck-editor__main{height:98%}.qmsckeditor__fullscreen .ck.ck-editor__editable{height:calc(100vh - 100px);max-height:100%!important}.sub-container{display:flex;justify-content:space-between;padding:0 10px;font-family:Open Sans;font-size:.75rem;font-weight:400;line-height:16px;color:#0009}\n"], dependencies: [{ kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div class=\"qmsckeditor_container\" [id]=\"editorId\">\n  <ckeditor class=\"qms-ckeditor\" [tagName]=\"ckTagname\" [(editor)]=\"ckEditor\" [config]=\"ckeditorConfig\"\n    (ready)=\"onReady($event)\" [(ngModel)]=\"qmsckContentInput\" (change)=\"onChanged($event)\" (blur)=\"onBlur($event)\"\n    [disabled]=\"isDisabled\">\n  </ckeditor>\n  <div class=\"sub-container\">\n    <div class=\"\">\n      <span>{{LANG.QMSCKEDITOR.ASSISTIVE_TEXT}}</span>\n    </div>\n    <div class=\"wordcount-content\"></div>\n  </div>\n</div>", styles: [".mt5{margin-top:5px!important}.mt10{margin-top:10px!important}.mt7{margin-top:7px!important}.mt15{margin-top:15px!important}.mt20{margin-top:20px!important}.mt30{margin-top:30px!important}.mt40{margin-top:40px!important}.ml2{margin-left:2px!important}.ml3{margin-left:3px!important}.ml5{margin-left:5px!important}.ml15{margin-left:15px!important}.ml10{margin-left:10px!important}.ml12{margin-left:12px!important}.ml16{margin-left:16px!important}.ml-auto{margin-left:auto!important}.ml-25{margin-left:-25px!important}.mr5{margin-right:5px!important}.mr12{margin-right:12px!important}.mr15{margin-right:15px!important}.mb5{margin-bottom:5px!important}.mb10{margin-bottom:10px!important}.mb15{margin-bottom:15px!important}.pt8{padding-top:8px!important}.pt10{padding-top:10px!important}.pt15{padding-top:15px!important}.pt16{padding-top:16px!important}.pl15{padding-left:15px!important}.pl0{padding-left:0!important}.pr0{padding-right:0!important}.pr15{padding-right:15px!important}.fs12{font-size:12px}.fs14{font-size:14px!important}.fs16{font-size:16px!important}.fs22{font-size:22px!important}.fw500{font-weight:500!important}.italic-text{font-style:italic}.display-flex{display:flex}.qmsckeditor{font-family:Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:400}.qmsckeditor h2{font-size:20px;font-weight:400}.qmsckeditor .mat-icon{color:#909497}.qmsckeditor__fullscreen{position:fixed;inset:0;background:#fff;overflow-y:auto;max-height:100vh;overflow-x:hidden}.qmsckeditor__cursor{cursor:pointer}.qmsckeditor__notallowed{cursor:not-allowed}.qmsckeditor.button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qmsckeditor.button__done{float:right;top:-24px;right:-24px;cursor:pointer;margin-right:20px}.qmsckeditor.button__done .mat-icon{color:#28a745;font-weight:700}.qmsckeditor.button__groups button{min-height:40px;width:100%;border-radius:4px;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px}.qmsckeditor.button__groups .save{background:#f8f9f9}.qmsckeditor.button__groups .save:hover{background:#e5e7e9}.qmsckeditor.button__groups .save:disabled{cursor:not-allowed}.qmsckeditor.button__groups .cancel{background:#f8f9f9}.qmsckeditor.button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.button__groups .cancel:disabled{cursor:not-allowed}.qmsckeditor.button__groups .delete{background:#f8f9f9}.qmsckeditor.button__groups .delete:hover{background:#e5e7e9}.qmsckeditor.button__groups .delete:disabled{cursor:not-allowed}.qmsckeditor.confirm__button__groups button{min-height:36px;border-radius:4px;width:auto;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px;padding-left:15px;padding-right:15px}.qmsckeditor.confirm__button__groups .confirm{background:#f8f9f9}.qmsckeditor.confirm__button__groups .confirm:hover{background:#e5e7e9}.qmsckeditor.confirm__button__groups .cancel{background:#f8f9f9}.qmsckeditor.confirm__button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.template-content.height{min-height:420px;max-height:520px;overflow:auto}.qmsckeditor.template-content.title{margin-left:-9px}.qmsckeditor.link__content.height{min-height:400px;max-height:520px}.qmsckeditor.card{margin-bottom:10px;min-height:60px;box-shadow:none;border:1px solid #e5e5e5}.qmsckeditor.card .title{font-weight:700}.qmsckeditor.card .content{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.qmsckeditor.card .material-icons{font-size:20px}.qmsckeditor.tooltip-content.height{min-height:400px;max-height:472px;overflow:auto}.qmsckeditor.save__as__template.height{height:125px}.ck-content .page-break,.ck-content .ck-horizontal-line{width:100%}.ck-content hr{background:#ccc}.ck-font-size-dropdown .ck-dropdown__panel ul{max-height:320px;overflow-y:auto}.ck-font-size-dropdown .ck-dropdown__panel ul li .ck-fontsize-option .ck-button__label{line-height:50px}.qmsckeditor_container .qmsckeditor__minwidth{width:100%}.qmsckeditor_container .ck-editor__editable{overflow-y:auto}.qmsckeditor_container p{line-height:normal}.qms-ckeditor .ck.ck-editor__editable{max-height:172px;min-height:172px;background-color:#0000000a;font-family:Open Sans}.qms-ckeditor .ck.ck-editor__editable:not(.ck-focused,.ck-read-only):hover{background-color:#00000014;border-bottom:2px solid rgba(0,0,0,.38)}.qms-ckeditor .ck.ck-editor__editable::-webkit-scrollbar{width:12px}.qms-ckeditor .ck.ck-editor__editable::-webkit-scrollbar-track{background:transparent;background-clip:content-box}.qms-ckeditor .ck.ck-editor__editable::-webkit-scrollbar-thumb{background:#00000061;border-radius:20px;width:4px;border:4px solid transparent;background-clip:content-box}.qms-ckeditor .ck.ck-editor__editable::-webkit-scrollbar-thumb:hover{background:#00000080;background-clip:content-box;border:4px solid transparent}.qms-ckeditor .ck-placeholder{font-size:1rem;font-weight:600;color:#0009}.qms-ckeditor .ck-disabled .ck.ck-toolbar,.qms-ckeditor .ck-disabled .ck.ck-editor__main>.ck-editor__editable{background-color:var(--disabled);pointer-events:none}.qms-ckeditor .ck-disabled .ck-button{pointer-events:none}.qms-ckeditor .ck.ck-editor__main>.ck-editor__editable:not(.ck-focused):focus{border-radius:4px}.qms-ckeditor .ck.ck-editor__editable:not(.ck-editor__nested-editable).ck-focused{border:1px solid #c4c4c4;border-bottom:2px solid var(--primary);border-radius:4px;box-shadow:none;background-color:#00000014}.qms-ckeditor .ck.ck-toolbar{box-shadow:0 1px 3px #3333}.qms-ckeditor .ck.ck-sticky-panel .ck-sticky-panel__content_sticky{box-shadow:none;border-width:0}.qmsckeditor__fullscreen{position:fixed;inset:0;overflow:auto;background:#fff;z-index:99}.qmsckeditor__fullscreen .qms-ckeditor{height:98%;display:block;width:100%}.qmsckeditor__fullscreen .ck.ck-editor__main{height:98%}.qmsckeditor__fullscreen .ck.ck-editor__editable{height:calc(100vh - 100px);max-height:100%!important}.sub-container{display:flex;justify-content:space-between;padding:0 10px;font-family:Open Sans;font-size:.75rem;font-weight:400;line-height:16px;color:#0009}\n"], dependencies: [{ kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: QMSCKEditorComponent, decorators: [{
             type: Component,
@@ -32715,7 +32715,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                             useExisting: forwardRef(() => QMSCKEditorComponent),
                             multi: true,
                         },
-                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"qmsckeditor_container\" [id]=\"editorId\">\n  <ckeditor class=\"qms-ckeditor\" [tagName]=\"ckTagname\" [(editor)]=\"ckEditor\" [config]=\"ckeditorConfig\"\n    (ready)=\"onReady($event)\" [(ngModel)]=\"qmsckContentInput\" (change)=\"onChanged($event)\" (blur)=\"onBlur($event)\"\n    [disabled]=\"isDisabled\">\n  </ckeditor>\n  <div class=\"sub-container\">\n    <div class=\"\">\n      <span>{{LANG.QMSCKEDITOR.ASSISTIVE_TEXT}}</span>\n    </div>\n    <div class=\"wordcount-content\"></div>\n  </div>\n</div>", styles: [".mt5{margin-top:5px!important}.mt10{margin-top:10px!important}.mt7{margin-top:7px!important}.mt15{margin-top:15px!important}.mt20{margin-top:20px!important}.mt30{margin-top:30px!important}.mt40{margin-top:40px!important}.ml2{margin-left:2px!important}.ml3{margin-left:3px!important}.ml5{margin-left:5px!important}.ml15{margin-left:15px!important}.ml10{margin-left:10px!important}.ml12{margin-left:12px!important}.ml16{margin-left:16px!important}.ml-auto{margin-left:auto!important}.ml-25{margin-left:-25px!important}.mr5{margin-right:5px!important}.mr12{margin-right:12px!important}.mr15{margin-right:15px!important}.mb5{margin-bottom:5px!important}.mb10{margin-bottom:10px!important}.mb15{margin-bottom:15px!important}.pt8{padding-top:8px!important}.pt10{padding-top:10px!important}.pt15{padding-top:15px!important}.pt16{padding-top:16px!important}.pl15{padding-left:15px!important}.pl0{padding-left:0!important}.pr0{padding-right:0!important}.pr15{padding-right:15px!important}.fs12{font-size:12px}.fs14{font-size:14px!important}.fs16{font-size:16px!important}.fs22{font-size:22px!important}.fw500{font-weight:500!important}.italic-text{font-style:italic}.display-flex{display:flex}.qmsckeditor{font-family:Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:400}.qmsckeditor h2{font-size:20px;font-weight:400}.qmsckeditor .mat-mdc-dialog-content{padding:0}.qmsckeditor .mat-icon{color:#909497}.qmsckeditor__fullscreen{position:fixed;inset:0;background:#fff;overflow-y:auto;max-height:100vh;overflow-x:hidden}.qmsckeditor__cursor{cursor:pointer}.qmsckeditor__notallowed{cursor:not-allowed}.qmsckeditor.button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qmsckeditor.button__done{float:right;top:-24px;right:-24px;cursor:pointer;margin-right:20px}.qmsckeditor.button__done .mat-icon{color:#28a745;font-weight:700}.qmsckeditor.button__groups button{min-height:40px;width:100%;border-radius:4px;border:1px solid #C5C5C5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px}.qmsckeditor.button__groups .save{background:#f8f9f9}.qmsckeditor.button__groups .save:hover{background:#e5e7e9}.qmsckeditor.button__groups .save:disabled{cursor:not-allowed}.qmsckeditor.button__groups .cancel{background:#f8f9f9}.qmsckeditor.button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.button__groups .cancel:disabled{cursor:not-allowed}.qmsckeditor.button__groups .delete{background:#f8f9f9}.qmsckeditor.button__groups .delete:hover{background:#e5e7e9}.qmsckeditor.button__groups .delete:disabled{cursor:not-allowed}.qmsckeditor.confirm__button__groups button{min-height:36px;border-radius:4px;width:auto;border:1px solid #C5C5C5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px;padding-left:15px;padding-right:15px}.qmsckeditor.confirm__button__groups .confirm{background:#f8f9f9}.qmsckeditor.confirm__button__groups .confirm:hover{background:#e5e7e9}.qmsckeditor.confirm__button__groups .cancel{background:#f8f9f9}.qmsckeditor.confirm__button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.template-content.height{min-height:420px;max-height:520px;overflow:auto}.qmsckeditor.template-content.title{margin-left:-9px}.qmsckeditor.link__content.height{min-height:400px;max-height:520px}.qmsckeditor.card{margin-bottom:10px;min-height:60px;box-shadow:none;border:1px solid #e5e5e5}.qmsckeditor.card .title{font-weight:700}.qmsckeditor.card .content{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.qmsckeditor.card .material-icons{font-size:20px}.qmsckeditor.tooltip-content.height{min-height:400px;max-height:472px;overflow:auto}.qmsckeditor.save__as__template.height{height:125px}.ck-content .page-break,.ck-content .ck-horizontal-line{width:100%}.ck-content hr{background:#ccc}.ck-font-size-dropdown .ck-dropdown__panel ul{max-height:320px;overflow-y:auto}.ck-font-size-dropdown .ck-dropdown__panel ul li .ck-fontsize-option .ck-button__label{line-height:50px}.qmsckeditor_container .qmsckeditor__minwidth{width:100%}.qmsckeditor_container .ck-editor__editable{overflow-y:auto}.qmsckeditor_container p{line-height:normal}.qms-ckeditor .ck.ck-editor__editable{max-height:172px;min-height:172px;background-color:#0000000a;font-family:Open Sans}.qms-ckeditor .ck.ck-editor__editable:not(.ck-focused,.ck-read-only):hover{background-color:#00000014;border-bottom:2px solid rgba(0,0,0,.38)}.qms-ckeditor .ck.ck-editor__editable::-webkit-scrollbar{width:12px}.qms-ckeditor .ck.ck-editor__editable::-webkit-scrollbar-track{background:transparent;background-clip:content-box}.qms-ckeditor .ck.ck-editor__editable::-webkit-scrollbar-thumb{background:#00000061;border-radius:20px;width:4px;border:4px solid transparent;background-clip:content-box}.qms-ckeditor .ck.ck-editor__editable::-webkit-scrollbar-thumb:hover{background:#00000080;background-clip:content-box;border:4px solid transparent}.qms-ckeditor .ck-placeholder{font-size:1rem;font-weight:600;color:#0009}.qms-ckeditor .ck-disabled .ck.ck-toolbar,.qms-ckeditor .ck-disabled .ck.ck-editor__main>.ck-editor__editable{background-color:var(--disabled);pointer-events:none}.qms-ckeditor .ck-disabled .ck-button{pointer-events:none}.qms-ckeditor .ck.ck-editor__main>.ck-editor__editable:not(.ck-focused):focus{border-radius:4px}.qms-ckeditor .ck.ck-editor__editable:not(.ck-editor__nested-editable).ck-focused{border:1px solid #c4c4c4;border-bottom:2px solid var(--primary);border-radius:4px;box-shadow:none;background-color:#00000014}.qms-ckeditor .ck.ck-toolbar{box-shadow:0 1px 3px #3333}.qms-ckeditor .ck.ck-sticky-panel .ck-sticky-panel__content_sticky{box-shadow:none;border-width:0}.qmsckeditor__fullscreen{position:fixed;inset:0;overflow:auto;background:#fff;z-index:99}.qmsckeditor__fullscreen .qms-ckeditor{height:98%;display:block;width:100%}.qmsckeditor__fullscreen .ck.ck-editor__main{height:98%}.qmsckeditor__fullscreen .ck.ck-editor__editable{height:calc(100vh - 100px);max-height:100%!important}.sub-container{display:flex;justify-content:space-between;padding:0 10px;font-family:Open Sans;font-size:.75rem;font-weight:400;line-height:16px;color:#0009}\n"] }]
+                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"qmsckeditor_container\" [id]=\"editorId\">\n  <ckeditor class=\"qms-ckeditor\" [tagName]=\"ckTagname\" [(editor)]=\"ckEditor\" [config]=\"ckeditorConfig\"\n    (ready)=\"onReady($event)\" [(ngModel)]=\"qmsckContentInput\" (change)=\"onChanged($event)\" (blur)=\"onBlur($event)\"\n    [disabled]=\"isDisabled\">\n  </ckeditor>\n  <div class=\"sub-container\">\n    <div class=\"\">\n      <span>{{LANG.QMSCKEDITOR.ASSISTIVE_TEXT}}</span>\n    </div>\n    <div class=\"wordcount-content\"></div>\n  </div>\n</div>", styles: [".mt5{margin-top:5px!important}.mt10{margin-top:10px!important}.mt7{margin-top:7px!important}.mt15{margin-top:15px!important}.mt20{margin-top:20px!important}.mt30{margin-top:30px!important}.mt40{margin-top:40px!important}.ml2{margin-left:2px!important}.ml3{margin-left:3px!important}.ml5{margin-left:5px!important}.ml15{margin-left:15px!important}.ml10{margin-left:10px!important}.ml12{margin-left:12px!important}.ml16{margin-left:16px!important}.ml-auto{margin-left:auto!important}.ml-25{margin-left:-25px!important}.mr5{margin-right:5px!important}.mr12{margin-right:12px!important}.mr15{margin-right:15px!important}.mb5{margin-bottom:5px!important}.mb10{margin-bottom:10px!important}.mb15{margin-bottom:15px!important}.pt8{padding-top:8px!important}.pt10{padding-top:10px!important}.pt15{padding-top:15px!important}.pt16{padding-top:16px!important}.pl15{padding-left:15px!important}.pl0{padding-left:0!important}.pr0{padding-right:0!important}.pr15{padding-right:15px!important}.fs12{font-size:12px}.fs14{font-size:14px!important}.fs16{font-size:16px!important}.fs22{font-size:22px!important}.fw500{font-weight:500!important}.italic-text{font-style:italic}.display-flex{display:flex}.qmsckeditor{font-family:Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:400}.qmsckeditor h2{font-size:20px;font-weight:400}.qmsckeditor .mat-icon{color:#909497}.qmsckeditor__fullscreen{position:fixed;inset:0;background:#fff;overflow-y:auto;max-height:100vh;overflow-x:hidden}.qmsckeditor__cursor{cursor:pointer}.qmsckeditor__notallowed{cursor:not-allowed}.qmsckeditor.button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qmsckeditor.button__done{float:right;top:-24px;right:-24px;cursor:pointer;margin-right:20px}.qmsckeditor.button__done .mat-icon{color:#28a745;font-weight:700}.qmsckeditor.button__groups button{min-height:40px;width:100%;border-radius:4px;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px}.qmsckeditor.button__groups .save{background:#f8f9f9}.qmsckeditor.button__groups .save:hover{background:#e5e7e9}.qmsckeditor.button__groups .save:disabled{cursor:not-allowed}.qmsckeditor.button__groups .cancel{background:#f8f9f9}.qmsckeditor.button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.button__groups .cancel:disabled{cursor:not-allowed}.qmsckeditor.button__groups .delete{background:#f8f9f9}.qmsckeditor.button__groups .delete:hover{background:#e5e7e9}.qmsckeditor.button__groups .delete:disabled{cursor:not-allowed}.qmsckeditor.confirm__button__groups button{min-height:36px;border-radius:4px;width:auto;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px;padding-left:15px;padding-right:15px}.qmsckeditor.confirm__button__groups .confirm{background:#f8f9f9}.qmsckeditor.confirm__button__groups .confirm:hover{background:#e5e7e9}.qmsckeditor.confirm__button__groups .cancel{background:#f8f9f9}.qmsckeditor.confirm__button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.template-content.height{min-height:420px;max-height:520px;overflow:auto}.qmsckeditor.template-content.title{margin-left:-9px}.qmsckeditor.link__content.height{min-height:400px;max-height:520px}.qmsckeditor.card{margin-bottom:10px;min-height:60px;box-shadow:none;border:1px solid #e5e5e5}.qmsckeditor.card .title{font-weight:700}.qmsckeditor.card .content{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.qmsckeditor.card .material-icons{font-size:20px}.qmsckeditor.tooltip-content.height{min-height:400px;max-height:472px;overflow:auto}.qmsckeditor.save__as__template.height{height:125px}.ck-content .page-break,.ck-content .ck-horizontal-line{width:100%}.ck-content hr{background:#ccc}.ck-font-size-dropdown .ck-dropdown__panel ul{max-height:320px;overflow-y:auto}.ck-font-size-dropdown .ck-dropdown__panel ul li .ck-fontsize-option .ck-button__label{line-height:50px}.qmsckeditor_container .qmsckeditor__minwidth{width:100%}.qmsckeditor_container .ck-editor__editable{overflow-y:auto}.qmsckeditor_container p{line-height:normal}.qms-ckeditor .ck.ck-editor__editable{max-height:172px;min-height:172px;background-color:#0000000a;font-family:Open Sans}.qms-ckeditor .ck.ck-editor__editable:not(.ck-focused,.ck-read-only):hover{background-color:#00000014;border-bottom:2px solid rgba(0,0,0,.38)}.qms-ckeditor .ck.ck-editor__editable::-webkit-scrollbar{width:12px}.qms-ckeditor .ck.ck-editor__editable::-webkit-scrollbar-track{background:transparent;background-clip:content-box}.qms-ckeditor .ck.ck-editor__editable::-webkit-scrollbar-thumb{background:#00000061;border-radius:20px;width:4px;border:4px solid transparent;background-clip:content-box}.qms-ckeditor .ck.ck-editor__editable::-webkit-scrollbar-thumb:hover{background:#00000080;background-clip:content-box;border:4px solid transparent}.qms-ckeditor .ck-placeholder{font-size:1rem;font-weight:600;color:#0009}.qms-ckeditor .ck-disabled .ck.ck-toolbar,.qms-ckeditor .ck-disabled .ck.ck-editor__main>.ck-editor__editable{background-color:var(--disabled);pointer-events:none}.qms-ckeditor .ck-disabled .ck-button{pointer-events:none}.qms-ckeditor .ck.ck-editor__main>.ck-editor__editable:not(.ck-focused):focus{border-radius:4px}.qms-ckeditor .ck.ck-editor__editable:not(.ck-editor__nested-editable).ck-focused{border:1px solid #c4c4c4;border-bottom:2px solid var(--primary);border-radius:4px;box-shadow:none;background-color:#00000014}.qms-ckeditor .ck.ck-toolbar{box-shadow:0 1px 3px #3333}.qms-ckeditor .ck.ck-sticky-panel .ck-sticky-panel__content_sticky{box-shadow:none;border-width:0}.qmsckeditor__fullscreen{position:fixed;inset:0;overflow:auto;background:#fff;z-index:99}.qmsckeditor__fullscreen .qms-ckeditor{height:98%;display:block;width:100%}.qmsckeditor__fullscreen .ck.ck-editor__main{height:98%}.qmsckeditor__fullscreen .ck.ck-editor__editable{height:calc(100vh - 100px);max-height:100%!important}.sub-container{display:flex;justify-content:space-between;padding:0 10px;font-family:Open Sans;font-size:.75rem;font-weight:400;line-height:16px;color:#0009}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.MatDialog }, { type: TranslateLibraryService }, { type: QMSCKEditorGlobalService }, { type: QMSCKEditorTreeService }, { type: QMSCKEditorFullscreenComponent }, { type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { qmsckData: [{
                 type: Input
             }], qmsckPlugin: [{
@@ -33610,11 +33610,11 @@ class QmsBannerConfirmComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: QmsBannerConfirmComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: QmsBannerConfirmComponent, selector: "qms-banner-confirm", inputs: { type: "type", icon: "icon", title: "title", innerHTML: "innerHTML", contents: "contents", buttons: "buttons" }, outputs: { buttonClick: "buttonClick" }, ngImport: i0, template: "<div class=\"qms-banner-confirm-container banner-container-{{type}} text-color-{{type}} font-size-14 line-height-22\">\n    <div class=\"confirm-information\">\n        <mat-icon *ngIf=\"icon\" class=\"material-icons-outlined margin-right-18\">\n            {{ icon }}\n        </mat-icon>\n\n        <div class=\"qms-banner-confirm-container-content\">\n            <h1 class=\"title\" *ngIf=\"title\">\n                {{ title }}\n            </h1>\n\n            <div *ngIf=\"innerHTML\" class=\"qms-banner-container-text\" [innerHTML]=\"innerHTML\"></div>\n\n            <span *ngIf=\"!innerHTML\">\n                <span *ngFor=\"let content of contents\" [class.font-bold]=\"content.bold\" [qms-tool-tip]=\"content.tooltip\"\n                    mode=\"dark\">\n                    {{ content.text }}\n                </span>\n            </span>\n        </div>\n    </div>\n\n    <div class=\"actions banner-confirm-buttons\" *ngIf=\"buttons?.length > 0\">\n        <ng-container *ngFor=\"let button of buttons\">\n            <button *ngIf=\"!button.type\" qms-btn-text class=\"text-color-{{type}}\" mode=\"dark\"\n                [qms-tool-tip]=\"button.tooltip\" [hidden]=\"button.hidden && button.hidden()\"\n                [disabled]=\"button.disabled && button.disabled()\" (click)=\"onClickButton($event, button)\">\n                {{button.text}}\n            </button>\n\n            <button *ngIf=\"button.type === 1\" qms-btn-icon class=\"text-color-{{type}}\" [qms-tool-tip]=\"button.tooltip\"\n                [hidden]=\"button.hidden && button.hidden()\" [disabled]=\"button.disabled && button.disabled()\"\n                mode=\"dark\" (click)=\"onClickButton($event, button)\">\n                <mat-icon>{{ button.icon }}</mat-icon>\n            </button>\n        </ng-container>\n    </div>\n</div>", styles: [".banner-container-primary{background-color:#e5eefb;border-bottom:1px solid #1954A9}.banner-container-warning{background-color:#e4cf534d;border-bottom:1px solid #E4CF53}.banner-container-success{background-color:#00804c1a;border-bottom:1px solid #00804C}.banner-container-error{background-color:#b0002014;border-bottom:1px solid #B00020}.banner-container-light{background-color:#fafafa;border-bottom:1px solid rgba(0,0,0,.6)}.banner-container-none{background-color:#fff;border-bottom:1px solid rgba(0,0,0,.6)}.text-color-primary{color:#144285}.text-color-warning{color:#726729}.text-color-success{color:#005935}.text-color-error{color:#b00020}.text-color-light,.text-color-none{color:#323232}.qms-banner-confirm-container{width:100%;height:100%;font-family:Open Sans;padding:18px 16px 8px 18px;position:relative}.qms-banner-confirm-container-content .title{font-family:Raleway;font-size:16px;line-height:22px;font-weight:600;margin-bottom:4px}.qms-banner-confirm-container .margin-right-18{margin-right:18px}.qms-banner-confirm-container .confirm-information{display:flex;width:100%;padding-bottom:36px}.qms-banner-confirm-container .actions{position:absolute;right:8px;bottom:8px}.qms-banner-confirm-container .actions button{margin-left:16px}.qms-banner-confirm-container .actions.banner-confirm-buttons ::ng-deep button.qms-btn-icon.qms-btn-disabled{background:transparent}.qms-banner-confirm-container .actions.banner-confirm-buttons ::ng-deep button.qms-btn-text.qms-btn-disabled{background:transparent}.font-bold{font-weight:700}.font-size-14{font-size:14px}.line-height-22{line-height:22px}\n"], dependencies: [{ kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: QMSButton, selector: "button[qms-btn], button[qms-btn-lg], button[qms-btn-outlined],\n               button[qms-btn-outlined-lg], button[qms-btn-text], button[qms-btn-text-lg],\n               button[qms-btn-fab],button[qms-btn-fab-sm],button[qms-btn-fab-ext],\n               button[qms-btn-fab-outlined],button[qms-btn-fab-outlined-sm],button[qms-btn-fab-outlined-ext]", inputs: ["disabled", "color"], exportAs: ["qmsButton"] }, { kind: "component", type: QMSButtonIcon, selector: "button[qms-btn-icon]", inputs: ["disabled", "color", "active"], exportAs: ["qmsButtonIcon"] }, { kind: "directive", type: QMSToolTipRendererDirective, selector: "[qms-tool-tip]", inputs: ["showToolTip", "mode", "qms-tool-tip", "contentTemplate", "position"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: QmsBannerConfirmComponent, selector: "qms-banner-confirm", inputs: { type: "type", icon: "icon", title: "title", innerHTML: "innerHTML", contents: "contents", buttons: "buttons" }, outputs: { buttonClick: "buttonClick" }, ngImport: i0, template: "<div class=\"qms-banner-confirm-container banner-container-{{type}} text-color-{{type}} font-size-14 line-height-22\">\n    <div class=\"confirm-information\">\n        <mat-icon *ngIf=\"icon\" class=\"material-icons-outlined padding-right-28\">\n            {{ icon }}\n        </mat-icon>\n\n        <div class=\"qms-banner-confirm-container-content\">\n            <h1 class=\"title\" *ngIf=\"title\">\n                {{ title }}\n            </h1>\n\n            <div *ngIf=\"innerHTML\" class=\"qms-banner-container-text\" [innerHTML]=\"innerHTML\"></div>\n\n            <span *ngIf=\"!innerHTML\">\n                <span *ngFor=\"let content of contents\" [class.font-bold]=\"content.bold\" [qms-tool-tip]=\"content.tooltip\"\n                    mode=\"dark\">\n                    {{ content.text }}\n                </span>\n            </span>\n        </div>\n    </div>\n\n    <div class=\"actions banner-confirm-buttons\" *ngIf=\"buttons?.length > 0\">\n        <ng-container *ngFor=\"let button of buttons\">\n            <button *ngIf=\"!button.type\" qms-btn-text class=\"text-color-{{type}}\" mode=\"dark\"\n                [qms-tool-tip]=\"button.tooltip\" [hidden]=\"button.hidden && button.hidden()\"\n                [disabled]=\"button.disabled && button.disabled()\" (click)=\"onClickButton($event, button)\">\n                {{button.text}}\n            </button>\n\n            <button *ngIf=\"button.type === 1\" qms-btn-icon class=\"text-color-{{type}}\" [qms-tool-tip]=\"button.tooltip\"\n                [hidden]=\"button.hidden && button.hidden()\" [disabled]=\"button.disabled && button.disabled()\"\n                mode=\"dark\" (click)=\"onClickButton($event, button)\">\n                <mat-icon>{{ button.icon }}</mat-icon>\n            </button>\n        </ng-container>\n    </div>\n</div>", styles: [".banner-container-primary{background-color:#e5eefb;border-bottom:1px solid #1954A9}.banner-container-warning{background-color:#e4cf534d;border-bottom:1px solid #E4CF53}.banner-container-success{background-color:#00804c1a;border-bottom:1px solid #00804C}.banner-container-error{background-color:#b0002014;border-bottom:1px solid #B00020}.banner-container-light{background-color:#fafafa;border-bottom:1px solid rgba(0,0,0,.6)}.banner-container-none{background-color:#fff;border-bottom:1px solid rgba(0,0,0,.6)}.text-color-primary{color:#144285}.text-color-warning{color:#726729}.text-color-success{color:#005935}.text-color-error{color:#b00020}.text-color-light,.text-color-none{color:#323232}.qms-banner-confirm-container{width:100%;height:100%;font-family:Open Sans;padding:18px 16px 8px 18px;position:relative}.qms-banner-confirm-container-content .title{font-family:Raleway;font-size:16px;line-height:22px;font-weight:600;margin-bottom:4px}.qms-banner-confirm-container .padding-right-28{padding-right:28px}.qms-banner-confirm-container .confirm-information{display:flex;width:100%;padding-bottom:36px}.qms-banner-confirm-container .actions{position:absolute;right:8px;bottom:8px}.qms-banner-confirm-container .actions button{margin-left:16px}.qms-banner-confirm-container .actions.banner-confirm-buttons ::ng-deep button.qms-btn-icon.qms-btn-disabled{background:transparent}.qms-banner-confirm-container .actions.banner-confirm-buttons ::ng-deep button.qms-btn-text.qms-btn-disabled{background:transparent}.font-bold{font-weight:700}.font-size-14{font-size:14px}.line-height-22{line-height:22px}\n"], dependencies: [{ kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: QMSButton, selector: "button[qms-btn], button[qms-btn-lg], button[qms-btn-outlined],\n               button[qms-btn-outlined-lg], button[qms-btn-text], button[qms-btn-text-lg],\n               button[qms-btn-fab],button[qms-btn-fab-sm],button[qms-btn-fab-ext],\n               button[qms-btn-fab-outlined],button[qms-btn-fab-outlined-sm],button[qms-btn-fab-outlined-ext]", inputs: ["disabled", "color"], exportAs: ["qmsButton"] }, { kind: "component", type: QMSButtonIcon, selector: "button[qms-btn-icon]", inputs: ["disabled", "color", "active"], exportAs: ["qmsButtonIcon"] }, { kind: "directive", type: QMSToolTipRendererDirective, selector: "[qms-tool-tip]", inputs: ["showToolTip", "mode", "qms-tool-tip", "contentTemplate", "position"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: QmsBannerConfirmComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'qms-banner-confirm', template: "<div class=\"qms-banner-confirm-container banner-container-{{type}} text-color-{{type}} font-size-14 line-height-22\">\n    <div class=\"confirm-information\">\n        <mat-icon *ngIf=\"icon\" class=\"material-icons-outlined margin-right-18\">\n            {{ icon }}\n        </mat-icon>\n\n        <div class=\"qms-banner-confirm-container-content\">\n            <h1 class=\"title\" *ngIf=\"title\">\n                {{ title }}\n            </h1>\n\n            <div *ngIf=\"innerHTML\" class=\"qms-banner-container-text\" [innerHTML]=\"innerHTML\"></div>\n\n            <span *ngIf=\"!innerHTML\">\n                <span *ngFor=\"let content of contents\" [class.font-bold]=\"content.bold\" [qms-tool-tip]=\"content.tooltip\"\n                    mode=\"dark\">\n                    {{ content.text }}\n                </span>\n            </span>\n        </div>\n    </div>\n\n    <div class=\"actions banner-confirm-buttons\" *ngIf=\"buttons?.length > 0\">\n        <ng-container *ngFor=\"let button of buttons\">\n            <button *ngIf=\"!button.type\" qms-btn-text class=\"text-color-{{type}}\" mode=\"dark\"\n                [qms-tool-tip]=\"button.tooltip\" [hidden]=\"button.hidden && button.hidden()\"\n                [disabled]=\"button.disabled && button.disabled()\" (click)=\"onClickButton($event, button)\">\n                {{button.text}}\n            </button>\n\n            <button *ngIf=\"button.type === 1\" qms-btn-icon class=\"text-color-{{type}}\" [qms-tool-tip]=\"button.tooltip\"\n                [hidden]=\"button.hidden && button.hidden()\" [disabled]=\"button.disabled && button.disabled()\"\n                mode=\"dark\" (click)=\"onClickButton($event, button)\">\n                <mat-icon>{{ button.icon }}</mat-icon>\n            </button>\n        </ng-container>\n    </div>\n</div>", styles: [".banner-container-primary{background-color:#e5eefb;border-bottom:1px solid #1954A9}.banner-container-warning{background-color:#e4cf534d;border-bottom:1px solid #E4CF53}.banner-container-success{background-color:#00804c1a;border-bottom:1px solid #00804C}.banner-container-error{background-color:#b0002014;border-bottom:1px solid #B00020}.banner-container-light{background-color:#fafafa;border-bottom:1px solid rgba(0,0,0,.6)}.banner-container-none{background-color:#fff;border-bottom:1px solid rgba(0,0,0,.6)}.text-color-primary{color:#144285}.text-color-warning{color:#726729}.text-color-success{color:#005935}.text-color-error{color:#b00020}.text-color-light,.text-color-none{color:#323232}.qms-banner-confirm-container{width:100%;height:100%;font-family:Open Sans;padding:18px 16px 8px 18px;position:relative}.qms-banner-confirm-container-content .title{font-family:Raleway;font-size:16px;line-height:22px;font-weight:600;margin-bottom:4px}.qms-banner-confirm-container .margin-right-18{margin-right:18px}.qms-banner-confirm-container .confirm-information{display:flex;width:100%;padding-bottom:36px}.qms-banner-confirm-container .actions{position:absolute;right:8px;bottom:8px}.qms-banner-confirm-container .actions button{margin-left:16px}.qms-banner-confirm-container .actions.banner-confirm-buttons ::ng-deep button.qms-btn-icon.qms-btn-disabled{background:transparent}.qms-banner-confirm-container .actions.banner-confirm-buttons ::ng-deep button.qms-btn-text.qms-btn-disabled{background:transparent}.font-bold{font-weight:700}.font-size-14{font-size:14px}.line-height-22{line-height:22px}\n"] }]
+            args: [{ selector: 'qms-banner-confirm', template: "<div class=\"qms-banner-confirm-container banner-container-{{type}} text-color-{{type}} font-size-14 line-height-22\">\n    <div class=\"confirm-information\">\n        <mat-icon *ngIf=\"icon\" class=\"material-icons-outlined padding-right-28\">\n            {{ icon }}\n        </mat-icon>\n\n        <div class=\"qms-banner-confirm-container-content\">\n            <h1 class=\"title\" *ngIf=\"title\">\n                {{ title }}\n            </h1>\n\n            <div *ngIf=\"innerHTML\" class=\"qms-banner-container-text\" [innerHTML]=\"innerHTML\"></div>\n\n            <span *ngIf=\"!innerHTML\">\n                <span *ngFor=\"let content of contents\" [class.font-bold]=\"content.bold\" [qms-tool-tip]=\"content.tooltip\"\n                    mode=\"dark\">\n                    {{ content.text }}\n                </span>\n            </span>\n        </div>\n    </div>\n\n    <div class=\"actions banner-confirm-buttons\" *ngIf=\"buttons?.length > 0\">\n        <ng-container *ngFor=\"let button of buttons\">\n            <button *ngIf=\"!button.type\" qms-btn-text class=\"text-color-{{type}}\" mode=\"dark\"\n                [qms-tool-tip]=\"button.tooltip\" [hidden]=\"button.hidden && button.hidden()\"\n                [disabled]=\"button.disabled && button.disabled()\" (click)=\"onClickButton($event, button)\">\n                {{button.text}}\n            </button>\n\n            <button *ngIf=\"button.type === 1\" qms-btn-icon class=\"text-color-{{type}}\" [qms-tool-tip]=\"button.tooltip\"\n                [hidden]=\"button.hidden && button.hidden()\" [disabled]=\"button.disabled && button.disabled()\"\n                mode=\"dark\" (click)=\"onClickButton($event, button)\">\n                <mat-icon>{{ button.icon }}</mat-icon>\n            </button>\n        </ng-container>\n    </div>\n</div>", styles: [".banner-container-primary{background-color:#e5eefb;border-bottom:1px solid #1954A9}.banner-container-warning{background-color:#e4cf534d;border-bottom:1px solid #E4CF53}.banner-container-success{background-color:#00804c1a;border-bottom:1px solid #00804C}.banner-container-error{background-color:#b0002014;border-bottom:1px solid #B00020}.banner-container-light{background-color:#fafafa;border-bottom:1px solid rgba(0,0,0,.6)}.banner-container-none{background-color:#fff;border-bottom:1px solid rgba(0,0,0,.6)}.text-color-primary{color:#144285}.text-color-warning{color:#726729}.text-color-success{color:#005935}.text-color-error{color:#b00020}.text-color-light,.text-color-none{color:#323232}.qms-banner-confirm-container{width:100%;height:100%;font-family:Open Sans;padding:18px 16px 8px 18px;position:relative}.qms-banner-confirm-container-content .title{font-family:Raleway;font-size:16px;line-height:22px;font-weight:600;margin-bottom:4px}.qms-banner-confirm-container .padding-right-28{padding-right:28px}.qms-banner-confirm-container .confirm-information{display:flex;width:100%;padding-bottom:36px}.qms-banner-confirm-container .actions{position:absolute;right:8px;bottom:8px}.qms-banner-confirm-container .actions button{margin-left:16px}.qms-banner-confirm-container .actions.banner-confirm-buttons ::ng-deep button.qms-btn-icon.qms-btn-disabled{background:transparent}.qms-banner-confirm-container .actions.banner-confirm-buttons ::ng-deep button.qms-btn-text.qms-btn-disabled{background:transparent}.font-bold{font-weight:700}.font-size-14{font-size:14px}.line-height-22{line-height:22px}\n"] }]
         }], propDecorators: { type: [{
                 type: Input
             }], icon: [{
@@ -35940,7 +35940,7 @@ class SelectDepartmentTreeComponent {
         this.treeDepartmentService = treeDepartmentService;
         this.spinnerArr = new Array(12).fill(0);
         this.arrSkeleton = new Array(6).fill(0);
-        this.height = '50vh';
+        this.height = '40vh';
         this.config = new QMSSelectDepartmentTreeConfig();
         this.maxWidthNode = 650;
         this.isIncludeChildren = false;
@@ -36476,7 +36476,7 @@ class SelectDepartmentTreeComponent {
                 const nestedNode = this.convertToNestedNode(node);
                 nestedNode.isGroup = false;
             });
-            this.checkListSelection.deselect(...this.treeControl.dataNodes.filter(x => x.disabled));
+            this.checkListSelection.deselect(...this.treeControl.dataNodes.filter(x => x.disabled || true));
             return;
         }
         ;
@@ -37176,7 +37176,7 @@ class SelectDepartmentTreeComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectDepartmentTreeComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$3.DomSanitizer }, { token: QMSIconRegistryService }, { token: i4.MatIconRegistry }, { token: i0.ElementRef }, { token: TranslateLibraryService }, { token: i1$1.Overlay }, { token: i0.ViewContainerRef }, { token: QMSSelectDepartmentTreeGlobalService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SelectDepartmentTreeComponent, selector: "qms-select-department-tree", inputs: { rowsSkeleton: "rowsSkeleton", height: "height", config: "config", maxWidthNode: "maxWidthNode" }, outputs: { onSearchEvent: "onSearchEvent", onPagingSearchEvent: "onPagingSearchEvent", onValueChangeEvent: "onValueChangeEvent", selectionNodeChangeEvent: "selectionNodeChangeEvent", onCheckNodeEvent: "onCheckNodeEvent", onExpandNodeEvent: "onExpandNodeEvent", onLoadMoreEvent: "onLoadMoreEvent", onCheckItemSearchEvent: "onCheckItemSearchEvent", onCheckAllItemSearchEvent: "onCheckAllItemSearchEvent", toggleIncludeChildEvent: "toggleIncludeChildEvent", isPushingChildNodes: "isPushingChildNodes" }, viewQueries: [{ propertyName: "cdkVirtualScrollViewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }, { propertyName: "paginatorSearch", first: true, predicate: ["paginatorSearch"], descendants: true }], ngImport: i0, template: "<div [ngClass]=\"['qms-select-department-tree-container', (config.customClass || '')]\">\r\n  <div class=\"input-select-department\">\r\n    <form (ngSubmit)=\"!getLoading$.value && onSearch()\" *ngIf=\"config.enableTreeSearch\" class=\"input-field\">\r\n      <mat-form-field class=\"w100\" qms-form qms-search-field>\r\n        <input [formControl]=\"formSearchControl\" type=\"text\" placeholder=\"{{ LANG.SEARCH }}\" matInput />\r\n        <button *ngIf=\"!getLoading$.value\" type=\"submit\" qms-btn-icon color=\"light\" matSuffix>\r\n          <mat-icon>search</mat-icon>\r\n        </button>\r\n        <mat-progress-spinner [@inOutAnimation] matSuffix mode=\"indeterminate\" diameter=\"20\"\r\n          *ngIf=\"getLoading$.value\"></mat-progress-spinner>\r\n        <div *ngIf=\"!!formSearchControl.value && !getLoading$.value\" qms-input-clear matSuffix>\r\n          <button qms-btn-icon color=\"light\" [@inOutAnimation] aria-label=\"Clear\" (click)=\"formSearchControl.reset()\">\r\n            <mat-icon>close</mat-icon>\r\n          </button>\r\n        </div>\r\n      </mat-form-field>\r\n    </form>\r\n    <div [@inOutAnimation] *ngIf=\"(getIndexView$ | async) === 1 && (textSearchSubject$ | async)\"\r\n      class=\"sub-text ms-1 fw500\">\r\n      {{LANG.RESULT_SEARCH_FOR}}<i><b>\"{{textSearchSubject$ | async}}\"</b></i>\r\n    </div>\r\n    <div [class.justify-content-between]=\"config.enableIncludeChild && !config.isSelectOne\"\r\n      class=\"select__toggle-include toggle-include-child my-1 d-flex justify-content-end  align-items-center\">\r\n      <mat-slide-toggle *ngIf=\"config.enableIncludeChild && !config.isSelectOne\"\r\n        [disabled]=\"(getIndexView$ | async) === 1 && config.disableToggleIncludeChildWhenChangeView\"\r\n        [(ngModel)]=\"isIncludeChildren\" (ngModelChange)=\"toggleIncludeChildEvent.emit($event)\" color=\"default\"\r\n        qms-group-options>\r\n        <span class=\"text-label\">{{config.selectIncludeLabel || LANG.SELECT_INCLUDE_CHILD}}</span>\r\n      </mat-slide-toggle>\r\n      <button class=\"btn-arrow\" [@inOutAnimation] *ngIf=\"(getIndexView$ | async) === 1 && config.enableTreeSearch\"\r\n        (click)=\"setIndexView(0)\" qms-btn-icon color=\"light\" [qms-tool-tip]=\"LANG.BACK_TO_TREE\" mode=\"dark\"\r\n        position=\"top\">\r\n        <mat-icon>arrow_back</mat-icon>\r\n      </button>\r\n      <button class=\"btn-arrow\" [@inOutAnimation]\r\n        *ngIf=\"(getIndexView$ | async) === 0 && config.enableTreeSearch && (textSearchSubject$ | async)\"\r\n        (click)=\"setIndexView(1)\" qms-btn-icon color=\"light\" [qms-tool-tip]=\"LANG.GOTO_SEACH_RESULT\" mode=\"dark\"\r\n        position=\"top\">\r\n        <mat-icon>arrow_forward</mat-icon>\r\n      </button>\r\n    </div>\r\n  </div>\r\n  <div [@inOutAnimation]\r\n    *ngIf=\"(getIndexView$ | async) === 0 && config.modeView === MODE_VIEW_ENUM.ExternalView && !!config.headerName\"\r\n    class=\"header-view-tree\">\r\n    <div class=\"header-view header-title\">\r\n      {{config.headerName.treeName}}\r\n    </div>\r\n    <div class=\"header-view header-title\">\r\n      {{config.headerName.externalName}}\r\n    </div>\r\n  </div>\r\n  <mat-divider class=\"mx-auto\"></mat-divider>\r\n  <div [@animateSlideView]=\"(getIndexView$ | async)\" [ngStyle]=\"{\r\n    minHeight: height\r\n  }\" class=\"tree-department-wrapper\">\r\n    <div *ngIf=\"(getIndexView$ | async) === 0\" class=\"tree-view w100 h100\">\r\n      <div class=\"tree-view-main h100\">\r\n        <div *ngIf=\"!config.isSelectOne && !!treeControl.dataNodes && config.activeSelectAllNode\"\r\n          class=\"checkbox-all-tree\" [class.sticky-position]=\"config.modeView === MODE_VIEW_ENUM.ExternalView\">\r\n          <!-- Checkbox all root node -->\r\n          <mat-checkbox [@inOutAnimation] (click)=\"onCheckAllRootTreeNode()\"\r\n            [indeterminate]=\"isIndeterminateCheckboxAllTree\" [checked]=\"isAllDepartmentSelected\" qms-group-options\r\n            color=\"default\" label=\"none\" class=\"checkbox-all\">\r\n            <span class=\"text-label \">{{LANG.CHOOSE_ALL}}</span>\r\n            <span>(<b>{{treeControl.dataNodes.length}}</b>)</span>\r\n          </mat-checkbox>\r\n          <mat-divider class=\"mx-auto\"></mat-divider>\r\n        </div>\r\n        <cdk-virtual-scroll-viewport *ngIf=\"dataSource.data\" [ngClass]=\"{\r\n                    'has-checkbox-all': !config.isSelectOne && config.modeView === MODE_VIEW_ENUM.Basic,\r\n                    'select-department-tree': true\r\n                  }\" [itemSize]=\"ITEM_SIZE\" [ngStyle]=\"{height: height}\">\r\n          <ng-container *cdkVirtualFor=\"let node of dataSource; trackBy: trackBy\">\r\n            <div class=\"qms-tree-node mt-1\" [style.padding-left]=\"node.level * (config.isMobile ? 12 :24) + 'px'\"\r\n              [attr.data-id]=\"node.id\" [id]=\"'mat-node-'+node.id\" [@triggerColor]=\"activeNode == node.id\" [ngClass]=\"{\r\n                              'w-100': config.isSelectOne,\r\n                              'selected-theme': this.checkListSelection.isSelected(node) && config.isSelectOne,\r\n                              'expand-node': treeControl.isExpandable(node) && treeControl.isExpanded(node),\r\n                              'active-external-view': config.modeView === MODE_VIEW_ENUM.ExternalView,\r\n                              'node-loading': node.isLoading,\r\n                              'move-location-mode': config.moveLocationMode\r\n                        }\">\r\n              <div class=\"node-expand-area\">\r\n                <button class=\"btn-toggle\" qms-btn-icon color=\"light\"\r\n                  [disabled]=\"(config.moveLocationMode && checkListSelection.isSelected(node))\"\r\n                  (click)=\"onExpandNode(node)\" *ngIf=\"treeControl.isExpandable(node) && !node.isLoading\">\r\n                  <mat-icon>\r\n                    {{ treeControl.isExpanded(node) ? node?.expandIcon?.collapse : node?.expandIcon?.expand }}\r\n                  </mat-icon>\r\n                </button>\r\n                <ng-container *ngIf=\"node.isLoading; then loadingSpinner\"></ng-container>\r\n              </div>\r\n              <ng-container [ngTemplateOutlet]=\"config.isSelectOne ? nodeWithoutCheckboxTemplate : showCheckboxTemplate\"\r\n                [ngTemplateOutletContext]=\"{ node: node }\"></ng-container>\r\n              <div *ngIf=\"config.modeView === MODE_VIEW_ENUM.ExternalView\" class=\"external-view-node\">\r\n                <span class=\"node-external\" qms-elipsify position=\"top\" mode=\"dark\">\r\n                  {{node.externalName || ''}}\r\n                </span>\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n        </cdk-virtual-scroll-viewport>\r\n        <ng-container [@inOutAnimation] *ngIf=\"config.spinnerWhenGetMore && getLoadingMore$| async ;then maskOverlay\">\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"(getIndexView$ | async) === 1\" [ngStyle]=\"{\r\n      height: height\r\n    }\" class=\"qms-view-search-result\">\r\n      <div *ngIf=\"config.modeView === MODE_VIEW_ENUM.ExternalView\"\r\n        class=\"qms-view-search-result__header d-flex align-items-center justify-content-between\">\r\n        <div class=\"header-title\">\r\n          <span qms-elipsify mode=\"dark\" position=\"top\">\r\n            {{config.headerName.resultSearchName}}\r\n          </span>\r\n        </div>\r\n        <div class=\"header-title\">\r\n          <span qms-elipsify mode=\"dark\" position=\"top\">\r\n            {{config.headerName.externalName}}\r\n          </span>\r\n        </div>\r\n      </div>\r\n      <ng-container *ngIf=\"getLoading$.value; then loading\"></ng-container>\r\n      <div class=\"qms-view-search-result__wrapper\" [ngClass]=\"{\r\n        'active-external': config.modeView === MODE_VIEW_ENUM.ExternalView}\"\r\n        *ngIf=\"!!resultSearch.length && !getLoading$.value\">\r\n        <div *ngIf=\"!config.moveLocationMode\">\r\n          <mat-checkbox [@inOutAnimation]\r\n            [disabled]=\"!resultSearch.length || config.isSelectOne || isDisableChecboxAllSearch()\" #checkAllSearch\r\n            [indeterminate]=\"indeterminateSearchResult\" [checked]=\"isSelectAllResultSearch\" qms-group-options\r\n            color=\"default\" label=\"none\" class=\"checkbox-all\"\r\n            (click)=\"!config.isSelectOne && onSelectAllSearchResult(checkAllSearch.checked)\">\r\n            <span class=\"text-label header-title\">{{LANG.CHOOSE_ALL}}</span>\r\n            <span>(<b>{{resultSearch.length}}</b>)</span>\r\n          </mat-checkbox>\r\n        </div>\r\n        <div [@inOutAnimation] [@listAnimation]\r\n          [class.active-paging]=\"searchDepartment$.value.length > 10 && config.enablePagingSearch\" class=\"result\">\r\n          <div [qms-tool-tip]=\"!canHandleItemSearchResult(item) ? LANG.ITEM_NOT_MATCH_TO_TREE : ''\" mode=\"dark\"\r\n            position=\"top\" *ngFor=\"let item of resultSearch\"\r\n            (click)=\"$event.stopImmediatePropagation(); !item.disabled && onCheckItemSearchResult(item)\"\r\n            [ngClass]=\"{'active': checkListSelectionSearch.isSelected(item), 'no-checkbox': config.moveLocationMode}\"\r\n            class=\"result-item user-select-none\" matRipple>\r\n            <mat-checkbox [@inOutAnimation] *ngIf=\"!item.isLoading && !config.moveLocationMode\"\r\n              [disabled]=\"item.disabled\"\r\n              (click)=\"$event.stopImmediatePropagation(); !item.disabled && onCheckItemSearchResult(item)\"\r\n              [checked]=\"checkListSelectionSearch.isSelected(item)\" qms-group-options color=\"default\" label=\"none\">\r\n            </mat-checkbox>\r\n            <div *ngIf=\"item.isLoading\" [@inOutAnimation] class=\"position-relative\">\r\n              <ng-container *ngIf=\"item.isLoading; then loadingSpinner\"></ng-container>\r\n            </div>\r\n            <div class=\"result-item__content\">\r\n              <div class=\"item-result-content-wraper\">\r\n                <div class=\"text-gray fw-bold fs-base mb0\">{{item.name}}</div>\r\n                <qms-breadcrumb *ngIf=\"item.location?.length > 1\" [type]=\"config.isMobile ? 'mobile': ''\"\r\n                  [numDisplayItem]=\"6\" (onItemClick)=\"$event.stopImmediatePropagation()\" class=\"breadcrumb-container\"\r\n                  [nodes]=\"item.location\">\r\n                </qms-breadcrumb>\r\n                <div *ngIf=\"item.location?.length === 1\" class=\"d-flex align-items-center\">\r\n                  <span qms-elipsify mode=\"dark\" position=\"top\"\r\n                    class=\"item-breadcrumb-disable d-block\">{{item.location[0].name}}</span>\r\n                </div>\r\n              </div>\r\n              <div *ngIf=\"config.moveLocationMode\">\r\n                <button class=\"move-location-btn\" qms-btn-icon [matMenuTriggerFor]=\"menu\">\r\n                  <mat-icon>swap_vert</mat-icon>\r\n                </button>\r\n                <mat-menu class=\"move-location-menu\" #menu=\"matMenu\">\r\n                  <button (click)=\"setDestinationLocation(item, 'sibling')\" mat-menu-item>\r\n                    <span>{{LANG.PLACE_NEXT_TO}}</span>\r\n                  </button>\r\n                  <button (click)=\"setDestinationLocation(item, 'child')\" mat-menu-item>\r\n                    <span>{{LANG.PLACE_UNDER}}</span>\r\n                  </button>\r\n                </mat-menu>\r\n              </div>\r\n              <div *ngIf=\"config.modeView === MODE_VIEW_ENUM.ExternalView\" class=\"external-name\">\r\n                <span qms-elipsify mode=\"dark\" position=\"top\" class=\"text-gray fs-base mb0\">{{item.externalName}}\r\n                </span>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div [@inOutAnimation] *ngIf=\"!resultSearch.length && !getLoading$.value\" class=\"result no-result\">\r\n        <ng-container *ngTemplateOutlet=\"noResult\"></ng-container>\r\n      </div>\r\n      <mat-divider *ngIf=\"searchDepartment$.value.length > 10 && config.enablePagingSearch\"\r\n        class=\"mx-auto\"></mat-divider>\r\n      <qms-paginator #paginatorSearch *ngIf=\"searchDepartment$.value.length > 10 && config.enablePagingSearch \"\r\n        [length]=\"searchDepartment$.value.length\" [numHidden]=\"0\" [pageSize]=\"CURRENT_PAGESIZE\"\r\n        [pageSizeOptions]=\"PAGE_SIZE_OPTION\" (page)='onPagingSearchResult($event)'\r\n        [size]='config.isMobile ? PAGINATION_SIZE.small : PAGINATION_SIZE.medium'>\r\n      </qms-paginator>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Template for Checkbox -->\r\n  <ng-template #showCheckboxTemplate let-node=\"node\">\r\n    <mat-checkbox [id]=\"'node-'+node.id\" qms-group-options color=\"default\" label=\"none\" class=\"flex-direction-row\"\r\n      [disabled]=\"node.isLoading || node.disabled\" [checked]=\"checkListSelection.isSelected(node)\"\r\n      (click)=\"!node.isLoading && onCheckNode(node)\" [attr.disabled]=\"node.disabled || node.isLoading\">\r\n      <img [title]=\"node.itemIconSvg\" *ngIf=\"node.itemIconSvg\" class=\"material-icons type-icon\"\r\n        [src]=\"node.itemIconSvg\" />\r\n      <span *ngIf=\"node.itemIcon\" [class]=\"node.itemIcon\" [qmsTransformIcon]=\"node.itemIcon\"\r\n        class=\"material-icons-outlined type-icon\"></span>\r\n      <span *ngIf=\"node.itemMatIcon\" class=\"material-icons-outlined type-icon\">{{\r\n        node.itemMatIcon }}\r\n      </span>\r\n      <div class=\"node-text\" [ngStyle]=\"{\r\n        maxWidth: (maxWidthNode - 20*node.level)+ 'px'\r\n      }\">\r\n        <span qms-elipsify [mode]=\"'dark'\" position=\"top\" class=\"text-name cursor-pointer ml5 123\"\r\n          [ngClass]=\"{ disabled: node.disabled}\">{{ node.name}}\r\n        </span>\r\n      </div>\r\n    </mat-checkbox>\r\n  </ng-template>\r\n\r\n  <!-- Template node without checkbox -->\r\n  <ng-template #nodeWithoutCheckboxTemplate let-node=\"node\">\r\n    <div [id]=\"'node-'+node.id\" (click)=\"onCheckNode(node)\" class=\"node-without-checkbox\">\r\n      <div class=\"node-info\">\r\n        <span *ngIf=\"node.itemIcon\" [class]=\"node.itemIcon\" [qmsTransformIcon]=\"node.itemIcon\"\r\n          class=\"material-icons-outlined type-icon\"></span>\r\n        <span *ngIf=\"node.itemMatIcon\" class=\"material-icons-outlined type-icon\">{{\r\n          node.itemMatIcon }}\r\n        </span>\r\n        <span class=\"text-name cursor-pointer pl-10 123\" [ngClass]=\"{ disabled: node.disabled }\">{{ node.name }}</span>\r\n      </div>\r\n      <div class=\"node-state\">\r\n        <mat-icon [class.disabled]=\"(config.moveLocationMode && checkListSelection.isSelected(node))\"\r\n          *ngIf=\"checkListSelection.isSelected(node)\">check</mat-icon>\r\n        <button class=\"move-location-btn\" *ngIf=\"config.moveLocationMode && !checkListSelection.isSelected(node)\"\r\n          qms-btn-icon [matMenuTriggerFor]=\"menu\">\r\n          <mat-icon>swap_vert</mat-icon>\r\n        </button>\r\n        <mat-menu class=\"move-location-menu\" #menu=\"matMenu\">\r\n          <button (click)=\"moveToLocation(node, 'sibling')\" mat-menu-item>\r\n            <span>{{LANG.PLACE_NEXT_TO}}</span>\r\n          </button>\r\n          <button (click)=\"moveToLocation(node, 'child')\" mat-menu-item>\r\n            <span>{{LANG.PLACE_UNDER}}</span>\r\n          </button>\r\n        </mat-menu>\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n</div>\r\n\r\n<ng-template #noResult>\r\n  <svg width=\"89\" height=\"130\" viewBox=\"0 0 89 88\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n    <rect x=\"0.5\" width=\"88\" height=\"88\" rx=\"44\" fill=\"white\" />\r\n    <rect x=\"0.5\" width=\"88\" height=\"88\" rx=\"44\" fill=\"#0163B2\" fill-opacity=\"0.12\" />\r\n    <path\r\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\"\r\n      fill=\"#0163B3\" />\r\n    <text x=\"10\" y=\"105\" fill=\"#0163B2\">{{LANG.NO_RESULT}}</text>\r\n  </svg>\r\n</ng-template>\r\n\r\n<!-- Template loading -->\r\n<ng-template #loading>\r\n  <div [ngStyle]=\"{\r\n    'height': searchDepartment$.value.length ? (config.modeView === MODE_VIEW_ENUM.ExternalView ? 'calc(100% - 90px)' : 'calc(100% - 50px)' ) : height\r\n  }\" class=\"qms-loading-container\">\r\n    <div class=\"qms-loader\" *ngFor=\"let item of arrSkeleton\">\r\n      <div class=\"qms-loader__wrapper\">\r\n        <div class=\"row-loader\">\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- Template mask overlay -->\r\n<ng-template #maskOverlay>\r\n  <div class=\"mask-overlay\">\r\n    <mat-spinner [diameter]=\"50\" [strokeWidth]=\"5\" color=\"primary\"></mat-spinner>\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- Loading spinner -->\r\n<ng-template #loadingSpinner>\r\n  <div class=\"qms-spinner center\">\r\n    <mat-spinner [diameter]=\"20\" [strokeWidth]=\"2\"></mat-spinner>\r\n  </div>\r\n</ng-template>", styles: ["@font-face{font-family:icomoon;src:url(/assets/fonts/icomoon.eot?aghldx);src:url(/assets/fonts/icomoon.eot?aghldx#iefix) format(\"embedded-opentype\"),url(/assets/fonts/icomoon.ttf?aghldx) format(\"truetype\"),url(/assets/fonts/icomoon.woff?aghldx) format(\"woff\"),url(/assets/fonts/icomoon.svg?aghldx#icomoon) format(\"svg\");font-weight:400;font-style:normal;font-display:block}[class^=icon-],[class*=\" icon-\"]{font-family:icomoon!important;speak:never;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-acutely-toxic .path1:before{content:\"\\e91b\";color:#e32730}.icon-acutely-toxic .path2:before{content:\"\\e922\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path3:before{content:\"\\e923\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path4:before{content:\"\\e924\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path5:before{content:\"\\e925\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path6:before{content:\"\\e926\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path7:before{content:\"\\e927\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path8:before{content:\"\\e928\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path9:before{content:\"\\e929\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path10:before{content:\"\\e92a\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path11:before{content:\"\\e92b\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path12:before{content:\"\\e92c\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path13:before{content:\"\\e92d\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path14:before{content:\"\\e92e\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path15:before{content:\"\\e92f\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path16:before{content:\"\\e930\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path17:before{content:\"\\e931\";margin-left:-1em;color:#323232}.icon-add-column:before{content:\"\\e932\"}.icon-add-tooltip:before{content:\"\\e933\"}.icon-admin:before{content:\"\\e934\"}.icon-annual-cycle:before{content:\"\\e935\"}.icon-assignment-repete:before{content:\"\\e936\"}.icon-barrier-add:before{content:\"\\e937\"}.icon-barrier-edit:before{content:\"\\e938\"}.icon-barrier-view:before{content:\"\\e939\"}.icon-button-group:before{content:\"\\e93a\"}.icon-chemical-manager:before{content:\"\\e93b\"}.icon-chronic-health-hazard .path1:before{content:\"\\e93c\";color:#e32730}.icon-chronic-health-hazard .path2:before{content:\"\\e93d\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path3:before{content:\"\\e93e\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path4:before{content:\"\\e93f\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path5:before{content:\"\\e940\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path6:before{content:\"\\e941\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path7:before{content:\"\\e942\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path8:before{content:\"\\e943\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path9:before{content:\"\\e944\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path10:before{content:\"\\e945\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path11:before{content:\"\\e946\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path12:before{content:\"\\e947\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path13:before{content:\"\\e948\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path14:before{content:\"\\e949\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path15:before{content:\"\\e94a\";margin-left:-1em;color:#323232}.icon-contingency:before{content:\"\\e94b\"}.icon-corrosive .path1:before{content:\"\\e94c\";color:#323232}.icon-corrosive .path2:before{content:\"\\e94d\";margin-left:-1em;color:#323232}.icon-corrosive .path3:before{content:\"\\e94e\";margin-left:-1em;color:#323232}.icon-corrosive .path4:before{content:\"\\e94f\";margin-left:-1em;color:#323232}.icon-corrosive .path5:before{content:\"\\e950\";margin-left:-1em;color:#323232}.icon-corrosive .path6:before{content:\"\\e951\";margin-left:-1em;color:#323232}.icon-corrosive .path7:before{content:\"\\e952\";margin-left:-1em;color:#323232}.icon-corrosive .path8:before{content:\"\\e953\";margin-left:-1em;color:#323232}.icon-corrosive .path9:before{content:\"\\e954\";margin-left:-1em;color:#323232}.icon-corrosive .path10:before{content:\"\\e955\";margin-left:-1em;color:#323232}.icon-corrosive .path11:before{content:\"\\e956\";margin-left:-1em;color:#323232}.icon-corrosive .path12:before{content:\"\\e957\";margin-left:-1em;color:#323232}.icon-corrosive .path13:before{content:\"\\e958\";margin-left:-1em;color:#323232}.icon-corrosive .path14:before{content:\"\\e959\";margin-left:-1em;color:#323232}.icon-corrosive .path15:before{content:\"\\e95a\";margin-left:-1em;color:#323232}.icon-corrosive .path16:before{content:\"\\e95b\";margin-left:-1em;color:#323232}.icon-corrosive .path17:before{content:\"\\e95c\";margin-left:-1em;color:#323232}.icon-corrosive .path18:before{content:\"\\e95d\";margin-left:-1em;color:#323232}.icon-corrosive .path19:before{content:\"\\e95e\";margin-left:-1em;color:#323232}.icon-corrosive .path20:before{content:\"\\e95f\";margin-left:-1em;color:#323232}.icon-corrosive .path21:before{content:\"\\e960\";margin-left:-1em;color:#e32730}.icon-dashboard:before{content:\"\\e961\"}.icon-database-sds:before{content:\"\\e962\"}.icon-description-add:before{content:\"\\e963\"}.icon-description-edit:before{content:\"\\e964\"}.icon-description-view:before{content:\"\\e965\";color:#666}.icon-document-read .path1:before{content:\"\\e966\";color:#000;opacity:.6}.icon-document-read .path2:before{content:\"\\e967\";margin-left:-1em;color:#fff}.icon-document-read .path3:before{content:\"\\e968\";margin-left:-1em;color:#000;opacity:.6}.icon-draft:before{content:\"\\e969\"}.icon-expired-off:before{content:\"\\e96a\"}.icon-expired-on:before{content:\"\\e96b\"}.icon-explosive .path1:before{content:\"\\e96c\";color:#e32730}.icon-explosive .path2:before{content:\"\\e96d\";margin-left:-1em;color:#323232}.icon-explosive .path3:before{content:\"\\e96e\";margin-left:-1em;color:#323232}.icon-explosive .path4:before{content:\"\\e96f\";margin-left:-1em;color:#323232}.icon-explosive .path5:before{content:\"\\e970\";margin-left:-1em;color:#323232}.icon-explosive .path6:before{content:\"\\e971\";margin-left:-1em;color:#323232}.icon-explosive .path7:before{content:\"\\e972\";margin-left:-1em;color:#323232}.icon-explosive .path8:before{content:\"\\e973\";margin-left:-1em;color:#323232}.icon-explosive .path9:before{content:\"\\e974\";margin-left:-1em;color:#323232}.icon-explosive .path10:before{content:\"\\e975\";margin-left:-1em;color:#323232}.icon-explosive .path11:before{content:\"\\e976\";margin-left:-1em;color:#323232}.icon-explosive .path12:before{content:\"\\e977\";margin-left:-1em;color:#323232}.icon-explosive .path13:before{content:\"\\e978\";margin-left:-1em;color:#323232}.icon-explosive .path14:before{content:\"\\e979\";margin-left:-1em;color:#323232}.icon-explosive .path15:before{content:\"\\e97a\";margin-left:-1em;color:#323232}.icon-explosive .path16:before{content:\"\\e97b\";margin-left:-1em;color:#323232}.icon-explosive .path17:before{content:\"\\e97c\";margin-left:-1em;color:#323232}.icon-explosive .path18:before{content:\"\\e97d\";margin-left:-1em;color:#323232}.icon-explosive .path19:before{content:\"\\e97e\";margin-left:-1em;color:#323232}.icon-explosive .path20:before{content:\"\\e97f\";margin-left:-1em;color:#323232}.icon-explosive .path21:before{content:\"\\e980\";margin-left:-1em;color:#323232}.icon-explosive .path22:before{content:\"\\e981\";margin-left:-1em;color:#323232}.icon-explosive .path23:before{content:\"\\e982\";margin-left:-1em;color:#323232}.icon-explosive .path24:before{content:\"\\e983\";margin-left:-1em;color:#323232}.icon-explosive .path25:before{content:\"\\e984\";margin-left:-1em;color:#323232}.icon-explosive .path26:before{content:\"\\e985\";margin-left:-1em;color:#323232}.icon-explosive .path27:before{content:\"\\e986\";margin-left:-1em;color:#323232}.icon-explosive .path28:before{content:\"\\e987\";margin-left:-1em;color:#323232}.icon-explosive .path29:before{content:\"\\e988\";margin-left:-1em;color:#323232}.icon-explosive .path30:before{content:\"\\e989\";margin-left:-1em;color:#323232}.icon-explosive .path31:before{content:\"\\e98a\";margin-left:-1em;color:#323232}.icon-explosive .path32:before{content:\"\\e98b\";margin-left:-1em;color:#323232}.icon-explosive .path33:before{content:\"\\e98c\";margin-left:-1em;color:#323232}.icon-explosive .path34:before{content:\"\\e98d\";margin-left:-1em;color:#323232}.icon-explosive .path35:before{content:\"\\e98e\";margin-left:-1em;color:#323232}.icon-explosive .path36:before{content:\"\\e98f\";margin-left:-1em;color:#323232}.icon-explosive .path37:before{content:\"\\e990\";margin-left:-1em;color:#323232}.icon-explosive .path38:before{content:\"\\e991\";margin-left:-1em;color:#323232}.icon-explosive .path39:before{content:\"\\e992\";margin-left:-1em;color:#323232}.icon-explosive .path40:before{content:\"\\e993\";margin-left:-1em;color:#323232}.icon-explosive .path41:before{content:\"\\e994\";margin-left:-1em;color:#323232}.icon-explosive .path42:before{content:\"\\e995\";margin-left:-1em;color:#323232}.icon-explosive .path43:before{content:\"\\e996\";margin-left:-1em;color:#323232}.icon-explosive .path44:before{content:\"\\e997\";margin-left:-1em;color:#323232}.icon-explosive .path45:before{content:\"\\e998\";margin-left:-1em;color:#323232}.icon-explosive .path46:before{content:\"\\e999\";margin-left:-1em;color:#323232}.icon-file-excel:before{content:\"\\e99a\"}.icon-file-pdf:before{content:\"\\e99b\"}.icon-file-pdf-verified .path1:before{content:\"\\e99c\";color:#000;opacity:.6}.icon-file-pdf-verified .path2:before{content:\"\\e99d\";margin-left:-1em;color:#fff}.icon-file-pdf-verified .path3:before{content:\"\\e99e\";margin-left:-1em;color:#000;opacity:.6}.icon-file-word:before{content:\"\\e99f\"}.icon-filter-alt:before{content:\"\\e9a0\"}.icon-flammable .path1:before{content:\"\\e9a1\";color:#323232}.icon-flammable .path2:before{content:\"\\e9a2\";margin-left:-1em;color:#323232}.icon-flammable .path3:before{content:\"\\e9a3\";margin-left:-1em;color:#e32730}.icon-gas-under-pressure .path1:before{content:\"\\e9a4\";color:#323232}.icon-gas-under-pressure .path2:before{content:\"\\e9a5\";margin-left:-1em;color:#e32730}.icon-health-hazard .path1:before{content:\"\\e9a6\";color:#323232}.icon-health-hazard .path2:before{content:\"\\e9a7\";margin-left:-1em;color:#e32730}.icon-line-break:before{content:\"\\e9a8\"}.icon-location:before{content:\"\\e9a9\"}.icon-measure-add:before{content:\"\\e9aa\"}.icon-measure-edit:before{content:\"\\e9ab\"}.icon-measure-view:before{content:\"\\e9ac\";color:#666}.icon-messages:before{content:\"\\e9ad\"}.icon-monitoring:before{content:\"\\e9ae\";color:#666}.icon-move:before{content:\"\\e9af\"}.icon-oxidizing .path1:before{content:\"\\e9b0\";color:#e32730}.icon-oxidizing .path2:before{content:\"\\e9b1\";margin-left:-1em;color:#323232}.icon-oxidizing .path3:before{content:\"\\e9b2\";margin-left:-1em;color:#323232}.icon-oxidizing .path4:before{content:\"\\e9b3\";margin-left:-1em;color:#323232}.icon-process-area-closed:before{content:\"\\e9b4\"}.icon-process-area-open:before{content:\"\\e9b5\"}.icon-process-linked .path1:before{content:\"\\e9b6\";color:#000;opacity:.6}.icon-process-linked .path2:before{content:\"\\e9b7\";margin-left:-1em;color:#666}.icon-risk:before{content:\"\\e9b8\"}.icon-search-in-file:before{content:\"\\e9b9\"}.icon-sort-ascending:before{content:\"\\e9ba\"}.icon-sort-descending:before{content:\"\\e9bb\"}.icon-subscript:before{content:\"\\e9bc\"}.icon-superscript:before{content:\"\\e9bd\"}.icon-syncronice-favorites:before{content:\"\\e9be\"}.icon-system-settings:before{content:\"\\e9bf\"}.icon-view-three-outlined:before{content:\"\\e9c0\"}.icon-workplace-safety:before{content:\"\\e9c1\"}.icon-checklist:before{content:\"\\e900\"}.icon-department-document .path1:before{content:\"\\e901\";color:#000;opacity:.6}.icon-department-document .path2:before{content:\"\\e902\";margin-left:-1em;color:#00804c}.icon-department-folder-closed .path1:before{content:\"\\e903\";color:#000;opacity:.6}.icon-department-folder-closed .path2:before{content:\"\\e904\";margin-left:-1em;color:#00804c}.icon-department-folder-open .path1:before{content:\"\\e905\";color:#000;opacity:.6}.icon-department-folder-open .path2:before{content:\"\\e906\";margin-left:-1em;color:#00804c}.icon-deviation:before{content:\"\\e907\"}.icon-dropdown-folder .path1:before{content:\"\\e908\";color:#00324e}.icon-dropdown-folder .path2:before{content:\"\\e909\";margin-left:-1em;color:#fff;opacity:.6}.icon-enterprise-document .path1:before{content:\"\\e90a\";color:#000;opacity:.6}.icon-enterprise-document .path2:before{content:\"\\e90b\";margin-left:-1em;color:#cf4714}.icon-enterprise-folder-closed .path1:before{content:\"\\e90c\";color:#000;opacity:.6}.icon-enterprise-folder-closed .path2:before{content:\"\\e90d\";margin-left:-1em;color:#cf4714}.icon-enterprise-folder-open .path1:before{content:\"\\e90e\";color:#000;opacity:.6}.icon-enterprise-folder-open .path2:before{content:\"\\e90f\";margin-left:-1em;color:#cf4714}.icon-folder-closed:before{content:\"\\e910\"}.icon-folder-open:before{content:\"\\e911\"}.icon-keyboard_arrow_down:before{content:\"\\e912\"}.icon-keyboard_arrow_up:before{content:\"\\e913\"}.icon-local-document .path1:before{content:\"\\e914\";color:#000;opacity:.6}.icon-local-document .path2:before{content:\"\\e915\";margin-left:-1em;color:#1954a9}.icon-local-folder-closed .path1:before{content:\"\\e916\";color:#000;opacity:.6}.icon-local-folder-closed .path2:before{content:\"\\e917\";margin-left:-1em;color:#1954a9}.icon-local-folder-open .path1:before{content:\"\\e918\";color:#000;opacity:.6}.icon-local-folder-open .path2:before{content:\"\\e919\";margin-left:-1em;color:#1954a9}.icon-process:before{content:\"\\e91a\"}.icon-regional-document .path1:before{content:\"\\e91c\";color:#000;opacity:.6}.icon-regional-document .path2:before{content:\"\\e91d\";margin-left:-1em;color:#662e0d}.icon-regional-folder-closed .path1:before{content:\"\\e91e\";color:#000;opacity:.6}.icon-regional-folder-closed .path2:before{content:\"\\e91f\";margin-left:-1em;color:#662e0d}.icon-regional-folder-open .path1:before{content:\"\\e920\";color:#000;opacity:.6}.icon-regional-folder-open .path2:before{content:\"\\e921\";margin-left:-1em;color:#662e0d}.qms-select-department-tree-container{font-family:Open Sans,sans-serif}.qms-select-department-tree-container .mr10{margin-right:10px}.qms-select-department-tree-container .mt5{margin-bottom:5px}.qms-select-department-tree-container .mb5{margin-top:5px}.qms-select-department-tree-container .w100{width:100%}.qms-select-department-tree-container .h100{height:100%}.qms-select-department-tree-container .fw500{font-weight:500!important}.qms-select-department-tree-container .text-right{text-align:right}.qms-select-department-tree-container .mt20{margin-top:20px}.qms-select-department-tree-container .d-flex{display:flex}.qms-select-department-tree-container .align-items-center{align-items:center}.qms-select-department-tree-container .justify-content-end{justify-content:flex-end}.qms-select-department-tree-container .text-selected{color:#0009;font-size:12px;line-height:16px;margin-top:1rem}.qms-select-department-tree-container .input-field{display:flex;align-items:center;position:relative}.qms-select-department-tree-container .input-field ::ng-deep .mat-form-field-wrapper{padding-bottom:8px!important}.qms-select-department-tree-container .input-field ::ng-deep .mat-form-field-underline{bottom:8px!important}.qms-select-department-tree-container .input-field input.input-search{width:100%;padding:10px;outline:none;border:none;background:var(--background-input-text)}.qms-select-department-tree-container .input-field .btn-search{cursor:pointer;vertical-align:middle;position:absolute;top:50%;right:10px;transform:translateY(-50%)}.qms-select-department-tree-container .input-field .line__divider{border-bottom:1px solid #ccc;height:1px;margin-top:10px;min-width:300px;max-width:100%}.qms-select-department-tree-container .header-title{font-weight:500;color:var(--ws-text-primary);font-size:16px;display:flex;align-items:center}.qms-select-department-tree-container .header-title .header-view{padding:4px 0}.qms-select-department-tree-container .sticky-position{position:sticky;top:0;left:0;z-index:1;background:#fff}.qms-select-department-tree-container .header-view-tree{display:grid;grid-template-columns:1fr 200px;column-gap:2px;padding:4px 12px 4px 0}.qms-select-department-tree-container .header-view-tree .header-view:nth-child(1){padding-left:12px}.qms-select-department-tree-container .tree-department-wrapper{padding-right:4px;overflow:hidden;position:relative;transition:height .3s ease-in-out}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view{width:100%;display:grid;grid-template-columns:1fr 200px;column-gap:2px}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main>.separate{height:38px}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main>.separate.h-0{height:0}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main:last-child{height:100%;padding-left:4px;position:relative}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main:last-child:after{position:absolute;content:\"\";top:0;bottom:-38px;left:0;width:1px;background:#0000001f}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main .external-list-item-container .node-external{overflow:hidden;transition:all .1s ease-in-out}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main .external-list-item-container .node-external .node-external-content{padding:5px 15px;height:calc(100% - 2px);color:var(--default-color);font-size:14px;display:flex;align-items:center}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main .external-list-item-container .node-external .node-external-content span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.qms-select-department-tree-container .mask-overlay{z-index:1000;background-color:#2221211a;position:absolute;top:0;left:0;width:100%;height:100%;border-radius:4px;overflow:hidden;display:grid;place-items:center}.qms-select-department-tree-container .select-department-tree>.cdk-virtual-scroll-orientation-vertical .cdk-virtual-scroll-content-wrapper{padding:0 4px!important}.qms-select-department-tree-container .select-department-tree .qms-tree-node{display:flex;align-items:center;border-radius:4px}.qms-select-department-tree-container .select-department-tree .qms-tree-node:hover{background-color:#00000014}.qms-select-department-tree-container .select-department-tree .qms-tree-node>.node-expand-area{width:48px;height:48px;position:relative}.qms-select-department-tree-container .select-department-tree .qms-tree-node.active-external-view .mat-mdc-checkbox.qms-group-options{width:calc(100% - 250px)}.qms-select-department-tree-container .select-department-tree .qms-tree-node.node-loading{background:var(--primary-light-6-opacity)}.qms-select-department-tree-container .select-department-tree .qms-tree-node>.external-view-node{flex-basis:200px;overflow:hidden}.qms-select-department-tree-container .select-department-tree .qms-tree-node>.external-view-node .node-external{overflow:hidden;transition:all .1s ease-in-out;display:block}.qms-select-department-tree-container .select-department-tree .qms-tree-node>.external-view-node .node-external .node-external-content{padding:5px 15px;height:calc(100% - 2px);color:var(--default-color);font-size:14px;display:flex;align-items:center}.qms-select-department-tree-container .select-department-tree .qms-tree-node>.external-view-node .node-external .node-external-content span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.qms-select-department-tree-container .select-department-tree .qms-tree-node.expand-node{color:var(--primary)}.qms-select-department-tree-container .select-department-tree .qms-tree-node.expand-node:hover{background:var(--primary-light-6-opacity)}.qms-select-department-tree-container .select-department-tree .qms-tree-node.expand-node:active{background:var(--primary-light-12-opacity)}.qms-select-department-tree-container .select-department-tree .qms-tree-node.expand-node .mat-icon{color:var(--primary)}.qms-select-department-tree-container .select-department-tree .qms-tree-node .node-without-checkbox{cursor:pointer;width:100%;display:flex;justify-content:space-between;align-items:center}.qms-select-department-tree-container .select-department-tree .qms-tree-node .node-without-checkbox .mat-icon{color:var(--primary);margin-right:4px}.qms-select-department-tree-container .select-department-tree .qms-tree-node.selected-theme{background:var(--primary-light-12-opacity)}.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all{cursor:default!important;pointer-events:none;-webkit-user-select:none;user-select:none}.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all button.mat-button-disabled,.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all .mat-icon-rtl-mirror,.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all .type-icon{color:#00000061}.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all .text-name.disabled{color:#00000061;cursor:default!important;pointer-events:none;-webkit-user-select:none;user-select:none}.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all.active{background-color:transparent}.qms-select-department-tree-container .select-department-tree .qms-tree-node.move-location-mode:hover .move-location-btn,.qms-select-department-tree-container .select-department-tree .qms-tree-node.move-location-mode:active .move-location-btn{display:block}.qms-select-department-tree-container .text-name{position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;cursor:pointer;width:100%}.qms-select-department-tree-container .cursor-pointer{cursor:pointer}.qms-select-department-tree-container .ml5{margin-left:15px!important}.qms-select-department-tree-container .pl-10{padding-left:10px}.qms-select-department-tree-container ::ng-deep .mat-mdc-checkbox.qms-group-options.flex-direction-row .mat-checkbox-layout{white-space:normal}.qms-select-department-tree-container ::ng-deep .mat-mdc-checkbox.qms-group-options.flex-direction-row .node-text>span{display:block}.qms-select-department-tree-container ::ng-deep .mat-mdc-checkbox.qms-group-options.flex-direction-row .mat-checkbox-label{flex-direction:row;align-items:center;position:relative;padding-bottom:2px}.qms-select-department-tree-container .qms-view-search-result{width:100%;overflow:hidden}.qms-select-department-tree-container .qms-view-search-result__header{position:relative}.qms-select-department-tree-container .qms-view-search-result__header:after{position:absolute;content:\"\";bottom:0;left:0;width:100%;height:1px;background-color:#0000001a}.qms-select-department-tree-container .qms-view-search-result__header .header-title{padding:8px 0;display:inline-block}.qms-select-department-tree-container .qms-view-search-result__header .header-title:nth-child(1){padding-left:12px}.qms-select-department-tree-container .qms-view-search-result__header .header-title:nth-child(2){flex-basis:200px}.qms-select-department-tree-container .qms-view-search-result>.no-result{height:100%;display:flex;justify-content:center;align-items:center}.qms-select-department-tree-container .qms-view-search-result__wrapper{height:calc(100% - 50px);width:100%}.qms-select-department-tree-container .qms-view-search-result__wrapper.active-external{height:calc(100% - 90px)!important}.qms-select-department-tree-container .qms-view-search-result__wrapper .result{max-height:100%;overflow-y:auto;margin-bottom:4px;padding-right:4px}.qms-select-department-tree-container .qms-view-search-result__wrapper .result.active-paging{max-height:calc(100% - 40px)}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item{border-radius:4px;display:grid;grid-template-columns:45px 1fr;align-items:center;cursor:pointer;transition:background .3s ease;min-height:40px}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item:not(:nth-child(1)){margin-top:4px!important}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item:hover{background:linear-gradient(0deg,#0163b21f,#0163b21f),#fff}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item:hover .move-location-btn{display:block}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item.active{background:linear-gradient(0deg,#0163b21f,#0163b21f),#fff}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item.no-checkbox{grid-template-columns:1fr}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item__content{display:flex;align-items:center}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item__content .item-result-content-wraper{padding:5px 15px;width:100%}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item__content .external-name{flex-basis:200px}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item__content .external-name span{width:200px;display:inline-block}.qms-select-department-tree-container .qms-view-search-result ::ng-deep .mat-mdc-checkbox.qms-group-options{display:flex;height:100%}.qms-select-department-tree-container ::ng-deep .breadcrumb-container{flex-wrap:wrap}.qms-select-department-tree-container ::ng-deep .mat-button-focus-overlay{background-color:transparent}.qms-select-department-tree-container ::ng-deep .qms-breadcrumb-item{margin:0}.qms-select-department-tree-container ::ng-deep .qms-breadcrumb-item-text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;transition:color .3s ease}.qms-select-department-tree-container ::ng-deep .qms-breadcrumb-item-text:not(:last-child){max-width:150px!important}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-mdc-paginator-container .qms-total-result{margin-bottom:0;margin-right:12px;height:100%;display:flex;align-items:center}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-mdc-paginator-container .qms-total-result span{font-weight:600;color:#000c}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-mdc-paginator-container .qms-paginator-range-actions{margin-bottom:0;column-gap:2px}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-mdc-paginator-container .qms-paginator-range-actions>.qms-total-result{margin-bottom:0}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-form-field-wrapper{padding-bottom:0}.qms-select-department-tree-container ::ng-deep .qms-paginator .qms-paginator-page-size{align-items:center}.qms-select-department-tree-container .text-gray{color:#242424}.qms-select-department-tree-container .mb0{margin-bottom:0!important}.qms-select-department-tree-container .fs-base{font-size:14px!important}.qms-select-department-tree-container .user-select-none{-webkit-user-select:none;user-select:none}.qms-select-department-tree-container .item-breadcrumb-disable{cursor:not-allowed;color:#0009;font-weight:400;font-size:14px;max-width:250px}.qms-select-department-tree-container ::ng-deep .mat-mdc-checkbox.checkbox-all .mat-checkbox-label{flex-direction:row;align-items:center;column-gap:4px}.qms-select-department-tree-container ::ng-deep .btn-arrow{width:40px;height:40px;line-height:40px}.qms-select-department-tree-container .qms-loading-container{overflow:hidden;display:grid;grid-template-rows:repeat(60px)}.qms-select-department-tree-container .qms-loading-container .qms-loader{position:relative;width:100%;height:100%;padding:10px 0;overflow:hidden}.qms-select-department-tree-container .qms-loading-container .qms-loader:after{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;background:linear-gradient(110deg,#e9e9e900,#e3e3e300 40%,#e3e3e380 50%,#e3e3e300 60% 100%);animation:animate-loading 1.2s linear infinite}.qms-select-department-tree-container .qms-loading-container .qms-loader__wrapper{position:relative;width:100%;height:100%}.qms-select-department-tree-container .qms-loading-container .qms-loader__wrapper .row-loader{background-color:#eee;position:absolute;left:0;width:100%;height:40px}@keyframes animate-loading{0%{transform:translate(-100%)}to{transform:translate(100%)}}.qms-select-department-tree-container .qms-spinner{font-size:20px;position:relative;display:inline-block;width:1em;height:1em}.qms-select-department-tree-container .qms-spinner.center{position:absolute;inset:0;margin:auto}.qms-select-department-tree-container ::ng-deep .mat-mdc-progress-spinner circle,.qms-select-department-tree-container .mat-mdc-progress-spinner circle{stroke:#1b75be!important}@media screen and (max-width: 600px){.qms-select-department-tree-container .external-view-node{flex-basis:65px!important}.qms-select-department-tree-container .qms-tree-node.active-external-view .mat-mdc-checkbox.qms-group-options{width:calc(100% - 110px)!important}.qms-select-department-tree-container .header-view-tree{grid-template-columns:1fr 80px!important}.qms-select-department-tree-container ::ng-deep .cdk-virtual-scroll-content-wrapper{right:0!important}.qms-select-department-tree-container .header-title{font-size:14px!important}.qms-select-department-tree-container .text-name,.qms-select-department-tree-container .node-external,.qms-select-department-tree-container .text-label,.qms-select-department-tree-container .text-label+span{font-size:12px}.qms-select-department-tree-container .node-expand-area{width:30px!important;height:30px!important}.qms-select-department-tree-container .node-expand-area .qms-btn-icon{width:30px;height:30px;line-height:30px}.qms-select-department-tree-container .fs-base{font-size:12px!important}.qms-select-department-tree-container .qms-select-department-tree-container .breadcrumb-container{flex-wrap:nowrap!important}.qms-select-department-tree-container ::ng-deep .qms-breadcrumb-item-text{font-size:12px!important;max-width:175px!important}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-mdc-paginator-container .qms-total-result{display:none!important}.qms-select-department-tree-container ::ng-deep .qms-paginator .size-small .mat-mdc-paginator-container{justify-content:center!important}.qms-select-department-tree-container .qms-view-search-result__header>.header-title:nth-child(2){flex-basis:120px!important}.qms-select-department-tree-container .result-item__content .external-name{flex-basis:75px!important}.qms-select-department-tree-container .result-item__content .external-name span{width:75px!important}}.qms-select-department-tree-container ::ng-deep .qms-paginator{margin-top:0}.move-location-btn{display:none;color:var(--primary)}::ng-deep .move-location-menu .mat-mdc-menu-item:hover{color:var(--primary)}\n"], dependencies: [{ kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i7.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i7$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: QMSSearchFieldDirective, selector: "mat-form-field[qms-search-field]", inputs: ["isLoading"] }, { kind: "directive", type: QMSInputClearDirective, selector: "[qms-input-clear]" }, { kind: "directive", type: QMSFormFieldDirective, selector: "[qms-form]" }, { kind: "directive", type: QMSGroupOptionDirective, selector: "[qms-group-options]", inputs: ["label"] }, { kind: "directive", type: AutocompleteOffDirective, selector: "[qms-group-options]" }, { kind: "directive", type: QMSToolTipRendererDirective, selector: "[qms-tool-tip]", inputs: ["showToolTip", "mode", "qms-tool-tip", "contentTemplate", "position"] }, { kind: "directive", type: QMSMultiIconDirective, selector: "[qmsTransformIcon]", inputs: ["qmsTransformIcon"] }, { kind: "directive", type: EllipsifyDirective, selector: "[qms-elipsify]" }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i11.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i11.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i8.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i8.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i17.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: QMSButtonIcon, selector: "button[qms-btn-icon]", inputs: ["disabled", "color", "active"], exportAs: ["qmsButtonIcon"] }, { kind: "component", type: i16.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: QMSBreadcrumb, selector: "qms-breadcrumb", inputs: ["nodes", "type", "maxLine", "numDisplayItem", "onlyItem", "disabledLastItem"], outputs: ["onItemClick"] }, { kind: "directive", type: i14.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: QMSPaginatorComponent, selector: "qms-paginator", inputs: ["numHidden", "size", "pageSizeOptions", "pageSize", "length", "pageIndex", "overlayPanelClass"], outputs: ["page"] }, { kind: "component", type: i23.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i24.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i24.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i24.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: i10.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i10.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i10.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "pipe", type: i7.AsyncPipe, name: "async" }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SelectDepartmentTreeComponent, selector: "qms-select-department-tree", inputs: { rowsSkeleton: "rowsSkeleton", height: "height", config: "config", maxWidthNode: "maxWidthNode" }, outputs: { onSearchEvent: "onSearchEvent", onPagingSearchEvent: "onPagingSearchEvent", onValueChangeEvent: "onValueChangeEvent", selectionNodeChangeEvent: "selectionNodeChangeEvent", onCheckNodeEvent: "onCheckNodeEvent", onExpandNodeEvent: "onExpandNodeEvent", onLoadMoreEvent: "onLoadMoreEvent", onCheckItemSearchEvent: "onCheckItemSearchEvent", onCheckAllItemSearchEvent: "onCheckAllItemSearchEvent", toggleIncludeChildEvent: "toggleIncludeChildEvent", isPushingChildNodes: "isPushingChildNodes" }, viewQueries: [{ propertyName: "cdkVirtualScrollViewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }, { propertyName: "paginatorSearch", first: true, predicate: ["paginatorSearch"], descendants: true }], ngImport: i0, template: "<div [ngClass]=\"['qms-select-department-tree-container', (config.customClass || '')]\">\r\n  <div class=\"input-select-department\">\r\n    <form (ngSubmit)=\"!getLoading$.value && onSearch()\" *ngIf=\"config.enableTreeSearch\" class=\"input-field\">\r\n      <mat-form-field class=\"w100\" qms-form qms-search-field>\r\n        <input [formControl]=\"formSearchControl\" type=\"text\" placeholder=\"{{ LANG.SEARCH }}\" matInput />\r\n        <button *ngIf=\"!getLoading$.value\" type=\"submit\" qms-btn-icon color=\"light\" matSuffix>\r\n          <mat-icon>search</mat-icon>\r\n        </button>\r\n        <mat-progress-spinner [@inOutAnimation] matSuffix mode=\"indeterminate\" diameter=\"20\"\r\n          *ngIf=\"getLoading$.value\"></mat-progress-spinner>\r\n        <div *ngIf=\"!!formSearchControl.value && !getLoading$.value\" qms-input-clear matSuffix>\r\n          <button qms-btn-icon color=\"light\" [@inOutAnimation] aria-label=\"Clear\" (click)=\"formSearchControl.reset()\">\r\n            <mat-icon>close</mat-icon>\r\n          </button>\r\n        </div>\r\n      </mat-form-field>\r\n    </form>\r\n    <div [@inOutAnimation] *ngIf=\"(getIndexView$ | async) === 1 && (textSearchSubject$ | async)\"\r\n      class=\"sub-text ms-1 fw500\">\r\n      {{LANG.RESULT_SEARCH_FOR}}<i><b>\"{{textSearchSubject$ | async}}\"</b></i>\r\n    </div>\r\n    <div [class.justify-content-between]=\"config.enableIncludeChild && !config.isSelectOne\"\r\n      class=\"select__toggle-include toggle-include-child my-1 d-flex justify-content-end  align-items-center\">\r\n      <mat-slide-toggle *ngIf=\"config.enableIncludeChild && !config.isSelectOne\"\r\n        [disabled]=\"(getIndexView$ | async) === 1 && config.disableToggleIncludeChildWhenChangeView\"\r\n        [(ngModel)]=\"isIncludeChildren\" (ngModelChange)=\"toggleIncludeChildEvent.emit($event)\" color=\"default\"\r\n        qms-group-options>\r\n        <span class=\"text-label\">{{config.selectIncludeLabel || LANG.SELECT_INCLUDE_CHILD}}</span>\r\n      </mat-slide-toggle>\r\n      <button class=\"btn-arrow\" [@inOutAnimation] *ngIf=\"(getIndexView$ | async) === 1 && config.enableTreeSearch\"\r\n        (click)=\"setIndexView(0)\" qms-btn-icon color=\"light\" [qms-tool-tip]=\"LANG.BACK_TO_TREE\" mode=\"dark\"\r\n        position=\"top\">\r\n        <mat-icon>arrow_back</mat-icon>\r\n      </button>\r\n      <button class=\"btn-arrow\" [@inOutAnimation]\r\n        *ngIf=\"(getIndexView$ | async) === 0 && config.enableTreeSearch && (textSearchSubject$ | async)\"\r\n        (click)=\"setIndexView(1)\" qms-btn-icon color=\"light\" [qms-tool-tip]=\"LANG.GOTO_SEACH_RESULT\" mode=\"dark\"\r\n        position=\"top\">\r\n        <mat-icon>arrow_forward</mat-icon>\r\n      </button>\r\n    </div>\r\n  </div>\r\n  <div [@inOutAnimation]\r\n    *ngIf=\"(getIndexView$ | async) === 0 && config.modeView === MODE_VIEW_ENUM.ExternalView && !!config.headerName\"\r\n    class=\"header-view-tree\">\r\n    <div class=\"header-view header-title\">\r\n      {{config.headerName.treeName}}\r\n    </div>\r\n    <div class=\"header-view header-title\">\r\n      {{config.headerName.externalName}}\r\n    </div>\r\n  </div>\r\n  <mat-divider class=\"mx-auto\"></mat-divider>\r\n  <div [@animateSlideView]=\"(getIndexView$ | async)\" [ngStyle]=\"{\r\n    minHeight: height\r\n  }\" class=\"tree-department-wrapper\">\r\n    <div *ngIf=\"(getIndexView$ | async) === 0\" class=\"tree-view w100 h100\">\r\n      <div class=\"tree-view-main h100\">\r\n        <div *ngIf=\"!config.isSelectOne && !!treeControl.dataNodes && config.activeSelectAllNode\"\r\n          class=\"checkbox-all-tree\" [class.sticky-position]=\"config.modeView === MODE_VIEW_ENUM.ExternalView\">\r\n          <!-- Checkbox all root node -->\r\n          <mat-checkbox [@inOutAnimation] (click)=\"onCheckAllRootTreeNode()\"\r\n            [indeterminate]=\"isIndeterminateCheckboxAllTree\" [checked]=\"isAllDepartmentSelected\" qms-group-options\r\n            color=\"default\" label=\"none\" class=\"checkbox-all\">\r\n            <span class=\"text-label \">{{LANG.CHOOSE_ALL}} (<b>{{treeControl.dataNodes.length}}</b>)</span>\r\n          </mat-checkbox>\r\n          <mat-divider class=\"mx-auto\"></mat-divider>\r\n        </div>\r\n        <cdk-virtual-scroll-viewport *ngIf=\"dataSource.data\" [ngClass]=\"{\r\n                    'has-checkbox-all': !config.isSelectOne && config.modeView === MODE_VIEW_ENUM.Basic,\r\n                    'select-department-tree': true\r\n                  }\" [itemSize]=\"ITEM_SIZE\" [ngStyle]=\"{height: height}\">\r\n          <ng-container *cdkVirtualFor=\"let node of dataSource; trackBy: trackBy\">\r\n            <div class=\"qms-tree-node mt-1\" [style.padding-left]=\"node.level * (config.isMobile ? 12 :24) + 'px'\"\r\n              [attr.data-id]=\"node.id\" [id]=\"'mat-node-'+node.id\" [@triggerColor]=\"activeNode == node.id\" [ngClass]=\"{\r\n                              'w-100': config.isSelectOne,\r\n                              'selected-theme': this.checkListSelection.isSelected(node) && config.isSelectOne,\r\n                              'expand-node': treeControl.isExpandable(node) && treeControl.isExpanded(node),\r\n                              'active-external-view': config.modeView === MODE_VIEW_ENUM.ExternalView,\r\n                              'node-loading': node.isLoading,\r\n                              'move-location-mode': config.moveLocationMode\r\n                        }\">\r\n              <div class=\"node-expand-area\">\r\n                <button class=\"btn-toggle\" qms-btn-icon color=\"light\"\r\n                  [disabled]=\"(config.moveLocationMode && checkListSelection.isSelected(node))\"\r\n                  (click)=\"onExpandNode(node)\" *ngIf=\"treeControl.isExpandable(node) && !node.isLoading\">\r\n                  <mat-icon>\r\n                    {{ treeControl.isExpanded(node) ? node?.expandIcon?.collapse : node?.expandIcon?.expand }}\r\n                  </mat-icon>\r\n                </button>\r\n                <ng-container *ngIf=\"node.isLoading; then loadingSpinner\"></ng-container>\r\n              </div>\r\n              <ng-container [ngTemplateOutlet]=\"config.isSelectOne ? nodeWithoutCheckboxTemplate : showCheckboxTemplate\"\r\n                [ngTemplateOutletContext]=\"{ node: node }\"></ng-container>\r\n              <div *ngIf=\"config.modeView === MODE_VIEW_ENUM.ExternalView\" class=\"external-view-node\">\r\n                <span class=\"node-external\" qms-elipsify position=\"top\" mode=\"dark\">\r\n                  {{node.externalName || ''}}\r\n                </span>\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n        </cdk-virtual-scroll-viewport>\r\n        <ng-container [@inOutAnimation] *ngIf=\"config.spinnerWhenGetMore && getLoadingMore$| async ;then maskOverlay\">\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"(getIndexView$ | async) === 1\" [ngStyle]=\"{\r\n      height: height\r\n    }\" class=\"qms-view-search-result\">\r\n      <div *ngIf=\"config.modeView === MODE_VIEW_ENUM.ExternalView\"\r\n        class=\"qms-view-search-result__header d-flex align-items-center justify-content-between\">\r\n        <div class=\"header-title\">\r\n          <span qms-elipsify mode=\"dark\" position=\"top\">\r\n            {{config.headerName.resultSearchName}}\r\n          </span>\r\n        </div>\r\n        <div class=\"header-title\">\r\n          <span qms-elipsify mode=\"dark\" position=\"top\">\r\n            {{config.headerName.externalName}}\r\n          </span>\r\n        </div>\r\n      </div>\r\n      <ng-container *ngIf=\"getLoading$.value; then loading\"></ng-container>\r\n      <div class=\"qms-view-search-result__wrapper\" [ngClass]=\"{\r\n        'active-external': config.modeView === MODE_VIEW_ENUM.ExternalView}\"\r\n        *ngIf=\"!!resultSearch.length && !getLoading$.value\">\r\n        <div *ngIf=\"!config.moveLocationMode\">\r\n          <mat-checkbox [@inOutAnimation]\r\n            [disabled]=\"!resultSearch.length || config.isSelectOne || isDisableChecboxAllSearch()\" #checkAllSearch\r\n            [indeterminate]=\"indeterminateSearchResult\" [checked]=\"isSelectAllResultSearch\" qms-group-options\r\n            color=\"default\" label=\"none\" class=\"checkbox-all\"\r\n            (click)=\"!config.isSelectOne && onSelectAllSearchResult(checkAllSearch.checked)\">\r\n            <span class=\"text-label header-title\">{{LANG.CHOOSE_ALL}}</span>\r\n            <span>(<b>{{resultSearch.length}}</b>)</span>\r\n          </mat-checkbox>\r\n        </div>\r\n        <div [@inOutAnimation] [@listAnimation]\r\n          [class.active-paging]=\"searchDepartment$.value.length > 10 && config.enablePagingSearch\" class=\"result\">\r\n          <div [qms-tool-tip]=\"!canHandleItemSearchResult(item) ? LANG.ITEM_NOT_MATCH_TO_TREE : ''\" mode=\"dark\"\r\n            position=\"top\" *ngFor=\"let item of resultSearch\"\r\n            (click)=\"$event.stopImmediatePropagation(); !item.disabled && onCheckItemSearchResult(item)\"\r\n            [ngClass]=\"{'active': checkListSelectionSearch.isSelected(item), 'no-checkbox': config.moveLocationMode}\"\r\n            class=\"result-item user-select-none\" matRipple>\r\n            <mat-checkbox [@inOutAnimation] *ngIf=\"!item.isLoading && !config.moveLocationMode\"\r\n              [disabled]=\"item.disabled\"\r\n              (click)=\"$event.stopImmediatePropagation(); !item.disabled && onCheckItemSearchResult(item)\"\r\n              [checked]=\"checkListSelectionSearch.isSelected(item)\" qms-group-options color=\"default\" label=\"none\">\r\n            </mat-checkbox>\r\n            <div *ngIf=\"item.isLoading\" [@inOutAnimation] class=\"position-relative\">\r\n              <ng-container *ngIf=\"item.isLoading; then loadingSpinner\"></ng-container>\r\n            </div>\r\n            <div class=\"result-item__content\">\r\n              <div class=\"item-result-content-wraper\">\r\n                <div class=\"text-gray fw-bold fs-base mb0\">{{item.name}}</div>\r\n                <qms-breadcrumb *ngIf=\"item.location?.length > 1\" [type]=\"config.isMobile ? 'mobile': ''\"\r\n                  [numDisplayItem]=\"6\" (onItemClick)=\"$event.stopImmediatePropagation()\" class=\"breadcrumb-container\"\r\n                  [nodes]=\"item.location\">\r\n                </qms-breadcrumb>\r\n                <div *ngIf=\"item.location?.length === 1\" class=\"d-flex align-items-center\">\r\n                  <span qms-elipsify mode=\"dark\" position=\"top\"\r\n                    class=\"item-breadcrumb-disable d-block\">{{item.location[0].name}}</span>\r\n                </div>\r\n              </div>\r\n              <div *ngIf=\"config.moveLocationMode\">\r\n                <button class=\"move-location-btn\" qms-btn-icon [matMenuTriggerFor]=\"menu\">\r\n                  <mat-icon>swap_vert</mat-icon>\r\n                </button>\r\n                <mat-menu class=\"move-location-menu\" #menu=\"matMenu\">\r\n                  <button (click)=\"setDestinationLocation(item, 'sibling')\" mat-menu-item>\r\n                    <span>{{LANG.PLACE_NEXT_TO}}</span>\r\n                  </button>\r\n                  <button (click)=\"setDestinationLocation(item, 'child')\" mat-menu-item>\r\n                    <span>{{LANG.PLACE_UNDER}}</span>\r\n                  </button>\r\n                </mat-menu>\r\n              </div>\r\n              <div *ngIf=\"config.modeView === MODE_VIEW_ENUM.ExternalView\" class=\"external-name\">\r\n                <span qms-elipsify mode=\"dark\" position=\"top\" class=\"text-gray fs-base mb0\">{{item.externalName}}\r\n                </span>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div [@inOutAnimation] *ngIf=\"!resultSearch.length && !getLoading$.value\" class=\"result no-result\">\r\n        <ng-container *ngTemplateOutlet=\"noResult\"></ng-container>\r\n      </div>\r\n      <mat-divider *ngIf=\"searchDepartment$.value.length > 10 && config.enablePagingSearch\"\r\n        class=\"mx-auto\"></mat-divider>\r\n      <qms-paginator #paginatorSearch *ngIf=\"searchDepartment$.value.length > 10 && config.enablePagingSearch \"\r\n        [length]=\"searchDepartment$.value.length\" [numHidden]=\"0\" [pageSize]=\"CURRENT_PAGESIZE\"\r\n        [pageSizeOptions]=\"PAGE_SIZE_OPTION\" (page)='onPagingSearchResult($event)'\r\n        [size]='config.isMobile ? PAGINATION_SIZE.small : PAGINATION_SIZE.medium'>\r\n      </qms-paginator>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Template for Checkbox -->\r\n  <ng-template #showCheckboxTemplate let-node=\"node\">\r\n    <mat-checkbox [id]=\"'node-'+node.id\" qms-group-options color=\"default\" label=\"none\" class=\"flex-direction-row\"\r\n      [disabled]=\"node.isLoading || node.disabled\" [checked]=\"checkListSelection.isSelected(node)\"\r\n      (click)=\"!node.isLoading && onCheckNode(node)\" [attr.disabled]=\"node.disabled || node.isLoading\">\r\n      <img [title]=\"node.itemIconSvg\" *ngIf=\"node.itemIconSvg\" class=\"material-icons type-icon\"\r\n        [src]=\"node.itemIconSvg\" />\r\n      <span *ngIf=\"node.itemIcon\" [class]=\"node.itemIcon\" [qmsTransformIcon]=\"node.itemIcon\"\r\n        class=\"material-icons-outlined type-icon\"></span>\r\n      <span *ngIf=\"node.itemMatIcon\" class=\"material-icons-outlined type-icon\">{{\r\n        node.itemMatIcon }}\r\n      </span>\r\n      <div class=\"node-text\" [ngStyle]=\"{\r\n        maxWidth: (maxWidthNode - 20*node.level)+ 'px'\r\n      }\">\r\n        <span qms-elipsify [mode]=\"'dark'\" position=\"top\" class=\"text-name cursor-pointer ml5 123\"\r\n          [ngClass]=\"{ disabled: node.disabled}\">{{ node.name}}\r\n        </span>\r\n      </div>\r\n    </mat-checkbox>\r\n  </ng-template>\r\n\r\n  <!-- Template node without checkbox -->\r\n  <ng-template #nodeWithoutCheckboxTemplate let-node=\"node\">\r\n    <div [id]=\"'node-'+node.id\" (click)=\"onCheckNode(node)\" class=\"node-without-checkbox\">\r\n      <div class=\"node-info\">\r\n        <span *ngIf=\"node.itemIcon\" [class]=\"node.itemIcon\" [qmsTransformIcon]=\"node.itemIcon\"\r\n          class=\"material-icons-outlined type-icon\"></span>\r\n        <span *ngIf=\"node.itemMatIcon\" class=\"material-icons-outlined type-icon\">{{\r\n          node.itemMatIcon }}\r\n        </span>\r\n        <span class=\"text-name cursor-pointer pl-10 123\" [ngClass]=\"{ disabled: node.disabled }\">{{ node.name }}</span>\r\n      </div>\r\n      <div class=\"node-state\">\r\n        <mat-icon [class.disabled]=\"(config.moveLocationMode && checkListSelection.isSelected(node))\"\r\n          *ngIf=\"checkListSelection.isSelected(node)\">check</mat-icon>\r\n        <button class=\"move-location-btn\" *ngIf=\"config.moveLocationMode && !checkListSelection.isSelected(node)\"\r\n          qms-btn-icon [matMenuTriggerFor]=\"menu\">\r\n          <mat-icon>swap_vert</mat-icon>\r\n        </button>\r\n        <mat-menu class=\"move-location-menu\" #menu=\"matMenu\">\r\n          <button (click)=\"moveToLocation(node, 'sibling')\" mat-menu-item>\r\n            <span>{{LANG.PLACE_NEXT_TO}}</span>\r\n          </button>\r\n          <button (click)=\"moveToLocation(node, 'child')\" mat-menu-item>\r\n            <span>{{LANG.PLACE_UNDER}}</span>\r\n          </button>\r\n        </mat-menu>\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n</div>\r\n\r\n<ng-template #noResult>\r\n  <svg width=\"89\" height=\"130\" viewBox=\"0 0 89 88\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n    <rect x=\"0.5\" width=\"88\" height=\"88\" rx=\"44\" fill=\"white\" />\r\n    <rect x=\"0.5\" width=\"88\" height=\"88\" rx=\"44\" fill=\"#0163B2\" fill-opacity=\"0.12\" />\r\n    <path\r\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\"\r\n      fill=\"#0163B3\" />\r\n    <text x=\"10\" y=\"105\" fill=\"#0163B2\">{{LANG.NO_RESULT}}</text>\r\n  </svg>\r\n</ng-template>\r\n\r\n<!-- Template loading -->\r\n<ng-template #loading>\r\n  <div [ngStyle]=\"{\r\n    'height': searchDepartment$.value.length ? (config.modeView === MODE_VIEW_ENUM.ExternalView ? 'calc(100% - 90px)' : 'calc(100% - 50px)' ) : height\r\n  }\" class=\"qms-loading-container\">\r\n    <div class=\"qms-loader\" *ngFor=\"let item of arrSkeleton\">\r\n      <div class=\"qms-loader__wrapper\">\r\n        <div class=\"row-loader\">\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- Template mask overlay -->\r\n<ng-template #maskOverlay>\r\n  <div class=\"mask-overlay\">\r\n    <mat-spinner [diameter]=\"50\" [strokeWidth]=\"5\" color=\"primary\"></mat-spinner>\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- Loading spinner -->\r\n<ng-template #loadingSpinner>\r\n  <div class=\"qms-spinner center\">\r\n    <mat-spinner [diameter]=\"20\" [strokeWidth]=\"2\"></mat-spinner>\r\n  </div>\r\n</ng-template>", styles: ["@font-face{font-family:icomoon;src:url(/assets/fonts/icomoon.eot?aghldx);src:url(/assets/fonts/icomoon.eot?aghldx#iefix) format(\"embedded-opentype\"),url(/assets/fonts/icomoon.ttf?aghldx) format(\"truetype\"),url(/assets/fonts/icomoon.woff?aghldx) format(\"woff\"),url(/assets/fonts/icomoon.svg?aghldx#icomoon) format(\"svg\");font-weight:400;font-style:normal;font-display:block}[class^=icon-],[class*=\" icon-\"]{font-family:icomoon!important;speak:never;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-acutely-toxic .path1:before{content:\"\\e91b\";color:#e32730}.icon-acutely-toxic .path2:before{content:\"\\e922\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path3:before{content:\"\\e923\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path4:before{content:\"\\e924\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path5:before{content:\"\\e925\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path6:before{content:\"\\e926\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path7:before{content:\"\\e927\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path8:before{content:\"\\e928\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path9:before{content:\"\\e929\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path10:before{content:\"\\e92a\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path11:before{content:\"\\e92b\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path12:before{content:\"\\e92c\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path13:before{content:\"\\e92d\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path14:before{content:\"\\e92e\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path15:before{content:\"\\e92f\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path16:before{content:\"\\e930\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path17:before{content:\"\\e931\";margin-left:-1em;color:#323232}.icon-add-column:before{content:\"\\e932\"}.icon-add-tooltip:before{content:\"\\e933\"}.icon-admin:before{content:\"\\e934\"}.icon-annual-cycle:before{content:\"\\e935\"}.icon-assignment-repete:before{content:\"\\e936\"}.icon-barrier-add:before{content:\"\\e937\"}.icon-barrier-edit:before{content:\"\\e938\"}.icon-barrier-view:before{content:\"\\e939\"}.icon-button-group:before{content:\"\\e93a\"}.icon-chemical-manager:before{content:\"\\e93b\"}.icon-chronic-health-hazard .path1:before{content:\"\\e93c\";color:#e32730}.icon-chronic-health-hazard .path2:before{content:\"\\e93d\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path3:before{content:\"\\e93e\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path4:before{content:\"\\e93f\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path5:before{content:\"\\e940\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path6:before{content:\"\\e941\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path7:before{content:\"\\e942\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path8:before{content:\"\\e943\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path9:before{content:\"\\e944\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path10:before{content:\"\\e945\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path11:before{content:\"\\e946\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path12:before{content:\"\\e947\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path13:before{content:\"\\e948\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path14:before{content:\"\\e949\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path15:before{content:\"\\e94a\";margin-left:-1em;color:#323232}.icon-contingency:before{content:\"\\e94b\"}.icon-corrosive .path1:before{content:\"\\e94c\";color:#323232}.icon-corrosive .path2:before{content:\"\\e94d\";margin-left:-1em;color:#323232}.icon-corrosive .path3:before{content:\"\\e94e\";margin-left:-1em;color:#323232}.icon-corrosive .path4:before{content:\"\\e94f\";margin-left:-1em;color:#323232}.icon-corrosive .path5:before{content:\"\\e950\";margin-left:-1em;color:#323232}.icon-corrosive .path6:before{content:\"\\e951\";margin-left:-1em;color:#323232}.icon-corrosive .path7:before{content:\"\\e952\";margin-left:-1em;color:#323232}.icon-corrosive .path8:before{content:\"\\e953\";margin-left:-1em;color:#323232}.icon-corrosive .path9:before{content:\"\\e954\";margin-left:-1em;color:#323232}.icon-corrosive .path10:before{content:\"\\e955\";margin-left:-1em;color:#323232}.icon-corrosive .path11:before{content:\"\\e956\";margin-left:-1em;color:#323232}.icon-corrosive .path12:before{content:\"\\e957\";margin-left:-1em;color:#323232}.icon-corrosive .path13:before{content:\"\\e958\";margin-left:-1em;color:#323232}.icon-corrosive .path14:before{content:\"\\e959\";margin-left:-1em;color:#323232}.icon-corrosive .path15:before{content:\"\\e95a\";margin-left:-1em;color:#323232}.icon-corrosive .path16:before{content:\"\\e95b\";margin-left:-1em;color:#323232}.icon-corrosive .path17:before{content:\"\\e95c\";margin-left:-1em;color:#323232}.icon-corrosive .path18:before{content:\"\\e95d\";margin-left:-1em;color:#323232}.icon-corrosive .path19:before{content:\"\\e95e\";margin-left:-1em;color:#323232}.icon-corrosive .path20:before{content:\"\\e95f\";margin-left:-1em;color:#323232}.icon-corrosive .path21:before{content:\"\\e960\";margin-left:-1em;color:#e32730}.icon-dashboard:before{content:\"\\e961\"}.icon-database-sds:before{content:\"\\e962\"}.icon-description-add:before{content:\"\\e963\"}.icon-description-edit:before{content:\"\\e964\"}.icon-description-view:before{content:\"\\e965\";color:#666}.icon-document-read .path1:before{content:\"\\e966\";color:#000;opacity:.6}.icon-document-read .path2:before{content:\"\\e967\";margin-left:-1em;color:#fff}.icon-document-read .path3:before{content:\"\\e968\";margin-left:-1em;color:#000;opacity:.6}.icon-draft:before{content:\"\\e969\"}.icon-expired-off:before{content:\"\\e96a\"}.icon-expired-on:before{content:\"\\e96b\"}.icon-explosive .path1:before{content:\"\\e96c\";color:#e32730}.icon-explosive .path2:before{content:\"\\e96d\";margin-left:-1em;color:#323232}.icon-explosive .path3:before{content:\"\\e96e\";margin-left:-1em;color:#323232}.icon-explosive .path4:before{content:\"\\e96f\";margin-left:-1em;color:#323232}.icon-explosive .path5:before{content:\"\\e970\";margin-left:-1em;color:#323232}.icon-explosive .path6:before{content:\"\\e971\";margin-left:-1em;color:#323232}.icon-explosive .path7:before{content:\"\\e972\";margin-left:-1em;color:#323232}.icon-explosive .path8:before{content:\"\\e973\";margin-left:-1em;color:#323232}.icon-explosive .path9:before{content:\"\\e974\";margin-left:-1em;color:#323232}.icon-explosive .path10:before{content:\"\\e975\";margin-left:-1em;color:#323232}.icon-explosive .path11:before{content:\"\\e976\";margin-left:-1em;color:#323232}.icon-explosive .path12:before{content:\"\\e977\";margin-left:-1em;color:#323232}.icon-explosive .path13:before{content:\"\\e978\";margin-left:-1em;color:#323232}.icon-explosive .path14:before{content:\"\\e979\";margin-left:-1em;color:#323232}.icon-explosive .path15:before{content:\"\\e97a\";margin-left:-1em;color:#323232}.icon-explosive .path16:before{content:\"\\e97b\";margin-left:-1em;color:#323232}.icon-explosive .path17:before{content:\"\\e97c\";margin-left:-1em;color:#323232}.icon-explosive .path18:before{content:\"\\e97d\";margin-left:-1em;color:#323232}.icon-explosive .path19:before{content:\"\\e97e\";margin-left:-1em;color:#323232}.icon-explosive .path20:before{content:\"\\e97f\";margin-left:-1em;color:#323232}.icon-explosive .path21:before{content:\"\\e980\";margin-left:-1em;color:#323232}.icon-explosive .path22:before{content:\"\\e981\";margin-left:-1em;color:#323232}.icon-explosive .path23:before{content:\"\\e982\";margin-left:-1em;color:#323232}.icon-explosive .path24:before{content:\"\\e983\";margin-left:-1em;color:#323232}.icon-explosive .path25:before{content:\"\\e984\";margin-left:-1em;color:#323232}.icon-explosive .path26:before{content:\"\\e985\";margin-left:-1em;color:#323232}.icon-explosive .path27:before{content:\"\\e986\";margin-left:-1em;color:#323232}.icon-explosive .path28:before{content:\"\\e987\";margin-left:-1em;color:#323232}.icon-explosive .path29:before{content:\"\\e988\";margin-left:-1em;color:#323232}.icon-explosive .path30:before{content:\"\\e989\";margin-left:-1em;color:#323232}.icon-explosive .path31:before{content:\"\\e98a\";margin-left:-1em;color:#323232}.icon-explosive .path32:before{content:\"\\e98b\";margin-left:-1em;color:#323232}.icon-explosive .path33:before{content:\"\\e98c\";margin-left:-1em;color:#323232}.icon-explosive .path34:before{content:\"\\e98d\";margin-left:-1em;color:#323232}.icon-explosive .path35:before{content:\"\\e98e\";margin-left:-1em;color:#323232}.icon-explosive .path36:before{content:\"\\e98f\";margin-left:-1em;color:#323232}.icon-explosive .path37:before{content:\"\\e990\";margin-left:-1em;color:#323232}.icon-explosive .path38:before{content:\"\\e991\";margin-left:-1em;color:#323232}.icon-explosive .path39:before{content:\"\\e992\";margin-left:-1em;color:#323232}.icon-explosive .path40:before{content:\"\\e993\";margin-left:-1em;color:#323232}.icon-explosive .path41:before{content:\"\\e994\";margin-left:-1em;color:#323232}.icon-explosive .path42:before{content:\"\\e995\";margin-left:-1em;color:#323232}.icon-explosive .path43:before{content:\"\\e996\";margin-left:-1em;color:#323232}.icon-explosive .path44:before{content:\"\\e997\";margin-left:-1em;color:#323232}.icon-explosive .path45:before{content:\"\\e998\";margin-left:-1em;color:#323232}.icon-explosive .path46:before{content:\"\\e999\";margin-left:-1em;color:#323232}.icon-file-excel:before{content:\"\\e99a\"}.icon-file-pdf:before{content:\"\\e99b\"}.icon-file-pdf-verified .path1:before{content:\"\\e99c\";color:#000;opacity:.6}.icon-file-pdf-verified .path2:before{content:\"\\e99d\";margin-left:-1em;color:#fff}.icon-file-pdf-verified .path3:before{content:\"\\e99e\";margin-left:-1em;color:#000;opacity:.6}.icon-file-word:before{content:\"\\e99f\"}.icon-filter-alt:before{content:\"\\e9a0\"}.icon-flammable .path1:before{content:\"\\e9a1\";color:#323232}.icon-flammable .path2:before{content:\"\\e9a2\";margin-left:-1em;color:#323232}.icon-flammable .path3:before{content:\"\\e9a3\";margin-left:-1em;color:#e32730}.icon-gas-under-pressure .path1:before{content:\"\\e9a4\";color:#323232}.icon-gas-under-pressure .path2:before{content:\"\\e9a5\";margin-left:-1em;color:#e32730}.icon-health-hazard .path1:before{content:\"\\e9a6\";color:#323232}.icon-health-hazard .path2:before{content:\"\\e9a7\";margin-left:-1em;color:#e32730}.icon-line-break:before{content:\"\\e9a8\"}.icon-location:before{content:\"\\e9a9\"}.icon-measure-add:before{content:\"\\e9aa\"}.icon-measure-edit:before{content:\"\\e9ab\"}.icon-measure-view:before{content:\"\\e9ac\";color:#666}.icon-messages:before{content:\"\\e9ad\"}.icon-monitoring:before{content:\"\\e9ae\";color:#666}.icon-move:before{content:\"\\e9af\"}.icon-oxidizing .path1:before{content:\"\\e9b0\";color:#e32730}.icon-oxidizing .path2:before{content:\"\\e9b1\";margin-left:-1em;color:#323232}.icon-oxidizing .path3:before{content:\"\\e9b2\";margin-left:-1em;color:#323232}.icon-oxidizing .path4:before{content:\"\\e9b3\";margin-left:-1em;color:#323232}.icon-process-area-closed:before{content:\"\\e9b4\"}.icon-process-area-open:before{content:\"\\e9b5\"}.icon-process-linked .path1:before{content:\"\\e9b6\";color:#000;opacity:.6}.icon-process-linked .path2:before{content:\"\\e9b7\";margin-left:-1em;color:#666}.icon-risk:before{content:\"\\e9b8\"}.icon-search-in-file:before{content:\"\\e9b9\"}.icon-sort-ascending:before{content:\"\\e9ba\"}.icon-sort-descending:before{content:\"\\e9bb\"}.icon-subscript:before{content:\"\\e9bc\"}.icon-superscript:before{content:\"\\e9bd\"}.icon-syncronice-favorites:before{content:\"\\e9be\"}.icon-system-settings:before{content:\"\\e9bf\"}.icon-view-three-outlined:before{content:\"\\e9c0\"}.icon-workplace-safety:before{content:\"\\e9c1\"}.icon-checklist:before{content:\"\\e900\"}.icon-department-document .path1:before{content:\"\\e901\";color:#000;opacity:.6}.icon-department-document .path2:before{content:\"\\e902\";margin-left:-1em;color:#00804c}.icon-department-folder-closed .path1:before{content:\"\\e903\";color:#000;opacity:.6}.icon-department-folder-closed .path2:before{content:\"\\e904\";margin-left:-1em;color:#00804c}.icon-department-folder-open .path1:before{content:\"\\e905\";color:#000;opacity:.6}.icon-department-folder-open .path2:before{content:\"\\e906\";margin-left:-1em;color:#00804c}.icon-deviation:before{content:\"\\e907\"}.icon-dropdown-folder .path1:before{content:\"\\e908\";color:#00324e}.icon-dropdown-folder .path2:before{content:\"\\e909\";margin-left:-1em;color:#fff;opacity:.6}.icon-enterprise-document .path1:before{content:\"\\e90a\";color:#000;opacity:.6}.icon-enterprise-document .path2:before{content:\"\\e90b\";margin-left:-1em;color:#cf4714}.icon-enterprise-folder-closed .path1:before{content:\"\\e90c\";color:#000;opacity:.6}.icon-enterprise-folder-closed .path2:before{content:\"\\e90d\";margin-left:-1em;color:#cf4714}.icon-enterprise-folder-open .path1:before{content:\"\\e90e\";color:#000;opacity:.6}.icon-enterprise-folder-open .path2:before{content:\"\\e90f\";margin-left:-1em;color:#cf4714}.icon-folder-closed:before{content:\"\\e910\"}.icon-folder-open:before{content:\"\\e911\"}.icon-keyboard_arrow_down:before{content:\"\\e912\"}.icon-keyboard_arrow_up:before{content:\"\\e913\"}.icon-local-document .path1:before{content:\"\\e914\";color:#000;opacity:.6}.icon-local-document .path2:before{content:\"\\e915\";margin-left:-1em;color:#1954a9}.icon-local-folder-closed .path1:before{content:\"\\e916\";color:#000;opacity:.6}.icon-local-folder-closed .path2:before{content:\"\\e917\";margin-left:-1em;color:#1954a9}.icon-local-folder-open .path1:before{content:\"\\e918\";color:#000;opacity:.6}.icon-local-folder-open .path2:before{content:\"\\e919\";margin-left:-1em;color:#1954a9}.icon-process:before{content:\"\\e91a\"}.icon-regional-document .path1:before{content:\"\\e91c\";color:#000;opacity:.6}.icon-regional-document .path2:before{content:\"\\e91d\";margin-left:-1em;color:#662e0d}.icon-regional-folder-closed .path1:before{content:\"\\e91e\";color:#000;opacity:.6}.icon-regional-folder-closed .path2:before{content:\"\\e91f\";margin-left:-1em;color:#662e0d}.icon-regional-folder-open .path1:before{content:\"\\e920\";color:#000;opacity:.6}.icon-regional-folder-open .path2:before{content:\"\\e921\";margin-left:-1em;color:#662e0d}.qms-select-department-tree-container{font-family:Open Sans,sans-serif}.qms-select-department-tree-container .mr10{margin-right:10px}.qms-select-department-tree-container .mt5{margin-bottom:5px}.qms-select-department-tree-container .mb5{margin-top:5px}.qms-select-department-tree-container .w100{width:100%}.qms-select-department-tree-container .h100{height:100%}.qms-select-department-tree-container .fw500{font-weight:500!important}.qms-select-department-tree-container .text-right{text-align:right}.qms-select-department-tree-container .mt20{margin-top:20px}.qms-select-department-tree-container .d-flex{display:flex}.qms-select-department-tree-container .align-items-center{align-items:center}.qms-select-department-tree-container .justify-content-end{justify-content:flex-end}.qms-select-department-tree-container .text-selected{color:#0009;font-size:12px;line-height:16px;margin-top:1rem}.qms-select-department-tree-container .input-field{display:flex;align-items:center;position:relative}.qms-select-department-tree-container .input-field ::ng-deep .mat-form-field-wrapper{padding-bottom:8px!important}.qms-select-department-tree-container .input-field ::ng-deep .mat-form-field-underline{bottom:8px!important}.qms-select-department-tree-container .input-field input.input-search{width:100%;padding:10px;outline:none;border:none;background:var(--background-input-text)}.qms-select-department-tree-container .input-field .btn-search{cursor:pointer;vertical-align:middle;position:absolute;top:50%;right:10px;transform:translateY(-50%)}.qms-select-department-tree-container .input-field .line__divider{border-bottom:1px solid #ccc;height:1px;margin-top:10px;min-width:300px;max-width:100%}.qms-select-department-tree-container .header-title{font-weight:500;color:var(--ws-text-primary);font-size:16px;display:flex;align-items:center}.qms-select-department-tree-container .header-title .header-view{padding:4px 0}.qms-select-department-tree-container .sticky-position{position:sticky;top:0;left:0;z-index:1;background:#fff}.qms-select-department-tree-container .header-view-tree{display:grid;grid-template-columns:1fr 200px;column-gap:2px;padding:4px 12px 4px 0}.qms-select-department-tree-container .header-view-tree .header-view:nth-child(1){padding-left:12px}.qms-select-department-tree-container .tree-department-wrapper{padding-right:4px;overflow:hidden;position:relative;transition:height .3s ease-in-out}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view{width:100%;display:grid;grid-template-columns:1fr 200px;column-gap:2px}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main>.separate{height:38px}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main>.separate.h-0{height:0}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main:last-child{height:100%;padding-left:4px;position:relative}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main:last-child:after{position:absolute;content:\"\";top:0;bottom:-38px;left:0;width:1px;background:#0000001f}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main .external-list-item-container .node-external{overflow:hidden;transition:all .1s ease-in-out}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main .external-list-item-container .node-external .node-external-content{padding:5px 15px;height:calc(100% - 2px);color:var(--default-color);font-size:14px;display:flex;align-items:center}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main .external-list-item-container .node-external .node-external-content span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.qms-select-department-tree-container .mask-overlay{z-index:1000;background-color:#2221211a;position:absolute;top:0;left:0;width:100%;height:100%;border-radius:4px;overflow:hidden;display:grid;place-items:center}.qms-select-department-tree-container .select-department-tree>.cdk-virtual-scroll-orientation-vertical .cdk-virtual-scroll-content-wrapper{padding:0 4px!important}.qms-select-department-tree-container .select-department-tree .qms-tree-node{display:flex;align-items:center;border-radius:4px}.qms-select-department-tree-container .select-department-tree .qms-tree-node:hover{background-color:#00000014}.qms-select-department-tree-container .select-department-tree .qms-tree-node>.node-expand-area{width:48px;height:48px;position:relative}.qms-select-department-tree-container .select-department-tree .qms-tree-node.active-external-view .mat-mdc-checkbox.qms-group-options{width:calc(100% - 250px)}.qms-select-department-tree-container .select-department-tree .qms-tree-node.node-loading{background:var(--primary-light-6-opacity)}.qms-select-department-tree-container .select-department-tree .qms-tree-node>.external-view-node{flex-basis:200px;overflow:hidden}.qms-select-department-tree-container .select-department-tree .qms-tree-node>.external-view-node .node-external{overflow:hidden;transition:all .1s ease-in-out;display:block}.qms-select-department-tree-container .select-department-tree .qms-tree-node>.external-view-node .node-external .node-external-content{padding:5px 15px;height:calc(100% - 2px);color:var(--default-color);font-size:14px;display:flex;align-items:center}.qms-select-department-tree-container .select-department-tree .qms-tree-node>.external-view-node .node-external .node-external-content span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.qms-select-department-tree-container .select-department-tree .qms-tree-node.expand-node{color:var(--primary)}.qms-select-department-tree-container .select-department-tree .qms-tree-node.expand-node:hover{background:var(--primary-light-6-opacity)}.qms-select-department-tree-container .select-department-tree .qms-tree-node.expand-node:active{background:var(--primary-light-12-opacity)}.qms-select-department-tree-container .select-department-tree .qms-tree-node.expand-node .mat-icon{color:var(--primary)}.qms-select-department-tree-container .select-department-tree .qms-tree-node .node-without-checkbox{cursor:pointer;width:100%;display:flex;justify-content:space-between;align-items:center}.qms-select-department-tree-container .select-department-tree .qms-tree-node .node-without-checkbox .mat-icon{color:var(--primary);margin-right:4px}.qms-select-department-tree-container .select-department-tree .qms-tree-node.selected-theme{background:var(--primary-light-12-opacity)}.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all{cursor:default!important;pointer-events:none;-webkit-user-select:none;user-select:none}.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all button.mat-button-disabled,.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all .mat-icon-rtl-mirror,.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all .type-icon{color:#00000061}.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all .text-name.disabled{color:#00000061;cursor:default!important;pointer-events:none;-webkit-user-select:none;user-select:none}.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all.active{background-color:transparent}.qms-select-department-tree-container .select-department-tree .qms-tree-node.move-location-mode:hover .move-location-btn,.qms-select-department-tree-container .select-department-tree .qms-tree-node.move-location-mode:active .move-location-btn{display:block}.qms-select-department-tree-container .text-name{position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;cursor:pointer;width:100%}.qms-select-department-tree-container .cursor-pointer{cursor:pointer}.qms-select-department-tree-container .ml5{margin-left:15px!important}.qms-select-department-tree-container .pl-10{padding-left:10px}.qms-select-department-tree-container ::ng-deep .mat-mdc-checkbox.qms-group-options.flex-direction-row .mat-checkbox-layout{white-space:normal}.qms-select-department-tree-container ::ng-deep .mat-mdc-checkbox.qms-group-options.flex-direction-row .node-text>span{display:block}.qms-select-department-tree-container ::ng-deep .mat-mdc-checkbox.qms-group-options.flex-direction-row .mat-checkbox-label{flex-direction:row;align-items:center;position:relative;padding-bottom:2px}.qms-select-department-tree-container .qms-view-search-result{width:100%;overflow:hidden}.qms-select-department-tree-container .qms-view-search-result__header{position:relative}.qms-select-department-tree-container .qms-view-search-result__header:after{position:absolute;content:\"\";bottom:0;left:0;width:100%;height:1px;background-color:#0000001a}.qms-select-department-tree-container .qms-view-search-result__header .header-title{padding:8px 0;display:inline-block}.qms-select-department-tree-container .qms-view-search-result__header .header-title:nth-child(1){padding-left:12px}.qms-select-department-tree-container .qms-view-search-result__header .header-title:nth-child(2){flex-basis:200px}.qms-select-department-tree-container .qms-view-search-result>.no-result{height:100%;display:flex;justify-content:center;align-items:center}.qms-select-department-tree-container .qms-view-search-result__wrapper{height:calc(100% - 50px);width:100%}.qms-select-department-tree-container .qms-view-search-result__wrapper.active-external{height:calc(100% - 90px)!important}.qms-select-department-tree-container .qms-view-search-result__wrapper .result{max-height:100%;overflow-y:auto;margin-bottom:4px;padding-right:4px}.qms-select-department-tree-container .qms-view-search-result__wrapper .result.active-paging{max-height:calc(100% - 40px)}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item{border-radius:4px;display:grid;grid-template-columns:45px 1fr;align-items:center;cursor:pointer;transition:background .3s ease;min-height:40px}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item:not(:nth-child(1)){margin-top:4px!important}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item:hover{background:linear-gradient(0deg,#0163b21f,#0163b21f),#fff}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item:hover .move-location-btn{display:block}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item.active{background:linear-gradient(0deg,#0163b21f,#0163b21f),#fff}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item.no-checkbox{grid-template-columns:1fr}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item__content{display:flex;align-items:center}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item__content .item-result-content-wraper{padding:5px 15px;width:100%}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item__content .external-name{flex-basis:200px}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item__content .external-name span{width:200px;display:inline-block}.qms-select-department-tree-container .qms-view-search-result ::ng-deep .mat-mdc-checkbox.qms-group-options{display:flex;height:100%}.qms-select-department-tree-container ::ng-deep .breadcrumb-container{flex-wrap:wrap}.qms-select-department-tree-container ::ng-deep .mat-button-focus-overlay{background-color:transparent}.qms-select-department-tree-container ::ng-deep .qms-breadcrumb-item{margin:0}.qms-select-department-tree-container ::ng-deep .qms-breadcrumb-item-text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;transition:color .3s ease}.qms-select-department-tree-container ::ng-deep .qms-breadcrumb-item-text:not(:last-child){max-width:150px!important}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-mdc-paginator-container .qms-total-result{margin-bottom:0;margin-right:12px;height:100%;display:flex;align-items:center}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-mdc-paginator-container .qms-total-result span{font-weight:600;color:#000c}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-mdc-paginator-container .qms-paginator-range-actions{margin-bottom:0;column-gap:2px}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-mdc-paginator-container .qms-paginator-range-actions>.qms-total-result{margin-bottom:0}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-form-field-wrapper{padding-bottom:0}.qms-select-department-tree-container ::ng-deep .qms-paginator .qms-paginator-page-size{align-items:center}.qms-select-department-tree-container .text-gray{color:#242424}.qms-select-department-tree-container .mb0{margin-bottom:0!important}.qms-select-department-tree-container .fs-base{font-size:14px!important}.qms-select-department-tree-container .user-select-none{-webkit-user-select:none;user-select:none}.qms-select-department-tree-container .item-breadcrumb-disable{cursor:not-allowed;color:#0009;font-weight:400;font-size:14px}.qms-select-department-tree-container ::ng-deep .mat-mdc-checkbox.checkbox-all .mat-checkbox-label{flex-direction:row;align-items:center;column-gap:4px}.qms-select-department-tree-container ::ng-deep .btn-arrow{width:40px;height:40px;line-height:40px}.qms-select-department-tree-container .qms-loading-container{overflow:hidden;display:grid;grid-template-rows:repeat(60px)}.qms-select-department-tree-container .qms-loading-container .qms-loader{position:relative;width:100%;height:100%;padding:10px 0;overflow:hidden}.qms-select-department-tree-container .qms-loading-container .qms-loader:after{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;background:linear-gradient(110deg,#e9e9e900,#e3e3e300 40%,#e3e3e380 50%,#e3e3e300 60% 100%);animation:animate-loading 1.2s linear infinite}.qms-select-department-tree-container .qms-loading-container .qms-loader__wrapper{position:relative;width:100%;height:100%}.qms-select-department-tree-container .qms-loading-container .qms-loader__wrapper .row-loader{background-color:#eee;position:absolute;left:0;width:100%;height:40px}@keyframes animate-loading{0%{transform:translate(-100%)}to{transform:translate(100%)}}.qms-select-department-tree-container .qms-spinner{font-size:20px;position:relative;display:inline-block;width:1em;height:1em}.qms-select-department-tree-container .qms-spinner.center{position:absolute;inset:0;margin:auto}.qms-select-department-tree-container ::ng-deep .mat-mdc-progress-spinner circle,.qms-select-department-tree-container .mat-mdc-progress-spinner circle{stroke:#1b75be!important}@media screen and (max-width: 600px){.qms-select-department-tree-container .external-view-node{flex-basis:65px!important}.qms-select-department-tree-container .qms-tree-node.active-external-view .mat-mdc-checkbox.qms-group-options{width:calc(100% - 110px)!important}.qms-select-department-tree-container .header-view-tree{grid-template-columns:1fr 80px!important}.qms-select-department-tree-container ::ng-deep .cdk-virtual-scroll-content-wrapper{right:0!important}.qms-select-department-tree-container .header-title{font-size:14px!important}.qms-select-department-tree-container .text-name,.qms-select-department-tree-container .node-external,.qms-select-department-tree-container .text-label,.qms-select-department-tree-container .text-label+span{font-size:12px}.qms-select-department-tree-container .node-expand-area{width:30px!important;height:30px!important}.qms-select-department-tree-container .node-expand-area .qms-btn-icon{width:30px;height:30px;line-height:30px}.qms-select-department-tree-container .fs-base{font-size:12px!important}.qms-select-department-tree-container .qms-select-department-tree-container .breadcrumb-container{flex-wrap:nowrap!important}.qms-select-department-tree-container ::ng-deep .qms-breadcrumb-item-text{font-size:12px!important;max-width:175px!important}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-mdc-paginator-container .qms-total-result{display:none!important}.qms-select-department-tree-container ::ng-deep .qms-paginator .size-small .mat-mdc-paginator-container{justify-content:center!important}.qms-select-department-tree-container .qms-view-search-result__header>.header-title:nth-child(2){flex-basis:120px!important}.qms-select-department-tree-container .result-item__content .external-name{flex-basis:75px!important}.qms-select-department-tree-container .result-item__content .external-name span{width:75px!important}}.qms-select-department-tree-container ::ng-deep .qms-paginator{margin-top:0}.move-location-btn{display:none;color:var(--primary)}::ng-deep .move-location-menu .mat-mdc-menu-item:hover{color:var(--primary)}\n"], dependencies: [{ kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i7.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i7$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: QMSSearchFieldDirective, selector: "mat-form-field[qms-search-field]", inputs: ["isLoading"] }, { kind: "directive", type: QMSInputClearDirective, selector: "[qms-input-clear]" }, { kind: "directive", type: QMSFormFieldDirective, selector: "[qms-form]" }, { kind: "directive", type: QMSGroupOptionDirective, selector: "[qms-group-options]", inputs: ["label"] }, { kind: "directive", type: AutocompleteOffDirective, selector: "[qms-group-options]" }, { kind: "directive", type: QMSToolTipRendererDirective, selector: "[qms-tool-tip]", inputs: ["showToolTip", "mode", "qms-tool-tip", "contentTemplate", "position"] }, { kind: "directive", type: QMSMultiIconDirective, selector: "[qmsTransformIcon]", inputs: ["qmsTransformIcon"] }, { kind: "directive", type: EllipsifyDirective, selector: "[qms-elipsify]" }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i11.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i11.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i8.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i8.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i17.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: QMSButtonIcon, selector: "button[qms-btn-icon]", inputs: ["disabled", "color", "active"], exportAs: ["qmsButtonIcon"] }, { kind: "component", type: i16.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: QMSBreadcrumb, selector: "qms-breadcrumb", inputs: ["nodes", "type", "maxLine", "numDisplayItem", "onlyItem", "disabledLastItem"], outputs: ["onItemClick"] }, { kind: "directive", type: i14.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: QMSPaginatorComponent, selector: "qms-paginator", inputs: ["numHidden", "size", "pageSizeOptions", "pageSize", "length", "pageIndex", "overlayPanelClass"], outputs: ["page"] }, { kind: "component", type: i23.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i24.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i24.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i24.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: i10.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i10.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i10.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "pipe", type: i7.AsyncPipe, name: "async" }], animations: [
             AnimationTreeDepartment
         ], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
@@ -37184,7 +37184,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             type: Component,
             args: [{ selector: 'qms-select-department-tree', animations: [
                         AnimationTreeDepartment
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"['qms-select-department-tree-container', (config.customClass || '')]\">\r\n  <div class=\"input-select-department\">\r\n    <form (ngSubmit)=\"!getLoading$.value && onSearch()\" *ngIf=\"config.enableTreeSearch\" class=\"input-field\">\r\n      <mat-form-field class=\"w100\" qms-form qms-search-field>\r\n        <input [formControl]=\"formSearchControl\" type=\"text\" placeholder=\"{{ LANG.SEARCH }}\" matInput />\r\n        <button *ngIf=\"!getLoading$.value\" type=\"submit\" qms-btn-icon color=\"light\" matSuffix>\r\n          <mat-icon>search</mat-icon>\r\n        </button>\r\n        <mat-progress-spinner [@inOutAnimation] matSuffix mode=\"indeterminate\" diameter=\"20\"\r\n          *ngIf=\"getLoading$.value\"></mat-progress-spinner>\r\n        <div *ngIf=\"!!formSearchControl.value && !getLoading$.value\" qms-input-clear matSuffix>\r\n          <button qms-btn-icon color=\"light\" [@inOutAnimation] aria-label=\"Clear\" (click)=\"formSearchControl.reset()\">\r\n            <mat-icon>close</mat-icon>\r\n          </button>\r\n        </div>\r\n      </mat-form-field>\r\n    </form>\r\n    <div [@inOutAnimation] *ngIf=\"(getIndexView$ | async) === 1 && (textSearchSubject$ | async)\"\r\n      class=\"sub-text ms-1 fw500\">\r\n      {{LANG.RESULT_SEARCH_FOR}}<i><b>\"{{textSearchSubject$ | async}}\"</b></i>\r\n    </div>\r\n    <div [class.justify-content-between]=\"config.enableIncludeChild && !config.isSelectOne\"\r\n      class=\"select__toggle-include toggle-include-child my-1 d-flex justify-content-end  align-items-center\">\r\n      <mat-slide-toggle *ngIf=\"config.enableIncludeChild && !config.isSelectOne\"\r\n        [disabled]=\"(getIndexView$ | async) === 1 && config.disableToggleIncludeChildWhenChangeView\"\r\n        [(ngModel)]=\"isIncludeChildren\" (ngModelChange)=\"toggleIncludeChildEvent.emit($event)\" color=\"default\"\r\n        qms-group-options>\r\n        <span class=\"text-label\">{{config.selectIncludeLabel || LANG.SELECT_INCLUDE_CHILD}}</span>\r\n      </mat-slide-toggle>\r\n      <button class=\"btn-arrow\" [@inOutAnimation] *ngIf=\"(getIndexView$ | async) === 1 && config.enableTreeSearch\"\r\n        (click)=\"setIndexView(0)\" qms-btn-icon color=\"light\" [qms-tool-tip]=\"LANG.BACK_TO_TREE\" mode=\"dark\"\r\n        position=\"top\">\r\n        <mat-icon>arrow_back</mat-icon>\r\n      </button>\r\n      <button class=\"btn-arrow\" [@inOutAnimation]\r\n        *ngIf=\"(getIndexView$ | async) === 0 && config.enableTreeSearch && (textSearchSubject$ | async)\"\r\n        (click)=\"setIndexView(1)\" qms-btn-icon color=\"light\" [qms-tool-tip]=\"LANG.GOTO_SEACH_RESULT\" mode=\"dark\"\r\n        position=\"top\">\r\n        <mat-icon>arrow_forward</mat-icon>\r\n      </button>\r\n    </div>\r\n  </div>\r\n  <div [@inOutAnimation]\r\n    *ngIf=\"(getIndexView$ | async) === 0 && config.modeView === MODE_VIEW_ENUM.ExternalView && !!config.headerName\"\r\n    class=\"header-view-tree\">\r\n    <div class=\"header-view header-title\">\r\n      {{config.headerName.treeName}}\r\n    </div>\r\n    <div class=\"header-view header-title\">\r\n      {{config.headerName.externalName}}\r\n    </div>\r\n  </div>\r\n  <mat-divider class=\"mx-auto\"></mat-divider>\r\n  <div [@animateSlideView]=\"(getIndexView$ | async)\" [ngStyle]=\"{\r\n    minHeight: height\r\n  }\" class=\"tree-department-wrapper\">\r\n    <div *ngIf=\"(getIndexView$ | async) === 0\" class=\"tree-view w100 h100\">\r\n      <div class=\"tree-view-main h100\">\r\n        <div *ngIf=\"!config.isSelectOne && !!treeControl.dataNodes && config.activeSelectAllNode\"\r\n          class=\"checkbox-all-tree\" [class.sticky-position]=\"config.modeView === MODE_VIEW_ENUM.ExternalView\">\r\n          <!-- Checkbox all root node -->\r\n          <mat-checkbox [@inOutAnimation] (click)=\"onCheckAllRootTreeNode()\"\r\n            [indeterminate]=\"isIndeterminateCheckboxAllTree\" [checked]=\"isAllDepartmentSelected\" qms-group-options\r\n            color=\"default\" label=\"none\" class=\"checkbox-all\">\r\n            <span class=\"text-label \">{{LANG.CHOOSE_ALL}}</span>\r\n            <span>(<b>{{treeControl.dataNodes.length}}</b>)</span>\r\n          </mat-checkbox>\r\n          <mat-divider class=\"mx-auto\"></mat-divider>\r\n        </div>\r\n        <cdk-virtual-scroll-viewport *ngIf=\"dataSource.data\" [ngClass]=\"{\r\n                    'has-checkbox-all': !config.isSelectOne && config.modeView === MODE_VIEW_ENUM.Basic,\r\n                    'select-department-tree': true\r\n                  }\" [itemSize]=\"ITEM_SIZE\" [ngStyle]=\"{height: height}\">\r\n          <ng-container *cdkVirtualFor=\"let node of dataSource; trackBy: trackBy\">\r\n            <div class=\"qms-tree-node mt-1\" [style.padding-left]=\"node.level * (config.isMobile ? 12 :24) + 'px'\"\r\n              [attr.data-id]=\"node.id\" [id]=\"'mat-node-'+node.id\" [@triggerColor]=\"activeNode == node.id\" [ngClass]=\"{\r\n                              'w-100': config.isSelectOne,\r\n                              'selected-theme': this.checkListSelection.isSelected(node) && config.isSelectOne,\r\n                              'expand-node': treeControl.isExpandable(node) && treeControl.isExpanded(node),\r\n                              'active-external-view': config.modeView === MODE_VIEW_ENUM.ExternalView,\r\n                              'node-loading': node.isLoading,\r\n                              'move-location-mode': config.moveLocationMode\r\n                        }\">\r\n              <div class=\"node-expand-area\">\r\n                <button class=\"btn-toggle\" qms-btn-icon color=\"light\"\r\n                  [disabled]=\"(config.moveLocationMode && checkListSelection.isSelected(node))\"\r\n                  (click)=\"onExpandNode(node)\" *ngIf=\"treeControl.isExpandable(node) && !node.isLoading\">\r\n                  <mat-icon>\r\n                    {{ treeControl.isExpanded(node) ? node?.expandIcon?.collapse : node?.expandIcon?.expand }}\r\n                  </mat-icon>\r\n                </button>\r\n                <ng-container *ngIf=\"node.isLoading; then loadingSpinner\"></ng-container>\r\n              </div>\r\n              <ng-container [ngTemplateOutlet]=\"config.isSelectOne ? nodeWithoutCheckboxTemplate : showCheckboxTemplate\"\r\n                [ngTemplateOutletContext]=\"{ node: node }\"></ng-container>\r\n              <div *ngIf=\"config.modeView === MODE_VIEW_ENUM.ExternalView\" class=\"external-view-node\">\r\n                <span class=\"node-external\" qms-elipsify position=\"top\" mode=\"dark\">\r\n                  {{node.externalName || ''}}\r\n                </span>\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n        </cdk-virtual-scroll-viewport>\r\n        <ng-container [@inOutAnimation] *ngIf=\"config.spinnerWhenGetMore && getLoadingMore$| async ;then maskOverlay\">\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"(getIndexView$ | async) === 1\" [ngStyle]=\"{\r\n      height: height\r\n    }\" class=\"qms-view-search-result\">\r\n      <div *ngIf=\"config.modeView === MODE_VIEW_ENUM.ExternalView\"\r\n        class=\"qms-view-search-result__header d-flex align-items-center justify-content-between\">\r\n        <div class=\"header-title\">\r\n          <span qms-elipsify mode=\"dark\" position=\"top\">\r\n            {{config.headerName.resultSearchName}}\r\n          </span>\r\n        </div>\r\n        <div class=\"header-title\">\r\n          <span qms-elipsify mode=\"dark\" position=\"top\">\r\n            {{config.headerName.externalName}}\r\n          </span>\r\n        </div>\r\n      </div>\r\n      <ng-container *ngIf=\"getLoading$.value; then loading\"></ng-container>\r\n      <div class=\"qms-view-search-result__wrapper\" [ngClass]=\"{\r\n        'active-external': config.modeView === MODE_VIEW_ENUM.ExternalView}\"\r\n        *ngIf=\"!!resultSearch.length && !getLoading$.value\">\r\n        <div *ngIf=\"!config.moveLocationMode\">\r\n          <mat-checkbox [@inOutAnimation]\r\n            [disabled]=\"!resultSearch.length || config.isSelectOne || isDisableChecboxAllSearch()\" #checkAllSearch\r\n            [indeterminate]=\"indeterminateSearchResult\" [checked]=\"isSelectAllResultSearch\" qms-group-options\r\n            color=\"default\" label=\"none\" class=\"checkbox-all\"\r\n            (click)=\"!config.isSelectOne && onSelectAllSearchResult(checkAllSearch.checked)\">\r\n            <span class=\"text-label header-title\">{{LANG.CHOOSE_ALL}}</span>\r\n            <span>(<b>{{resultSearch.length}}</b>)</span>\r\n          </mat-checkbox>\r\n        </div>\r\n        <div [@inOutAnimation] [@listAnimation]\r\n          [class.active-paging]=\"searchDepartment$.value.length > 10 && config.enablePagingSearch\" class=\"result\">\r\n          <div [qms-tool-tip]=\"!canHandleItemSearchResult(item) ? LANG.ITEM_NOT_MATCH_TO_TREE : ''\" mode=\"dark\"\r\n            position=\"top\" *ngFor=\"let item of resultSearch\"\r\n            (click)=\"$event.stopImmediatePropagation(); !item.disabled && onCheckItemSearchResult(item)\"\r\n            [ngClass]=\"{'active': checkListSelectionSearch.isSelected(item), 'no-checkbox': config.moveLocationMode}\"\r\n            class=\"result-item user-select-none\" matRipple>\r\n            <mat-checkbox [@inOutAnimation] *ngIf=\"!item.isLoading && !config.moveLocationMode\"\r\n              [disabled]=\"item.disabled\"\r\n              (click)=\"$event.stopImmediatePropagation(); !item.disabled && onCheckItemSearchResult(item)\"\r\n              [checked]=\"checkListSelectionSearch.isSelected(item)\" qms-group-options color=\"default\" label=\"none\">\r\n            </mat-checkbox>\r\n            <div *ngIf=\"item.isLoading\" [@inOutAnimation] class=\"position-relative\">\r\n              <ng-container *ngIf=\"item.isLoading; then loadingSpinner\"></ng-container>\r\n            </div>\r\n            <div class=\"result-item__content\">\r\n              <div class=\"item-result-content-wraper\">\r\n                <div class=\"text-gray fw-bold fs-base mb0\">{{item.name}}</div>\r\n                <qms-breadcrumb *ngIf=\"item.location?.length > 1\" [type]=\"config.isMobile ? 'mobile': ''\"\r\n                  [numDisplayItem]=\"6\" (onItemClick)=\"$event.stopImmediatePropagation()\" class=\"breadcrumb-container\"\r\n                  [nodes]=\"item.location\">\r\n                </qms-breadcrumb>\r\n                <div *ngIf=\"item.location?.length === 1\" class=\"d-flex align-items-center\">\r\n                  <span qms-elipsify mode=\"dark\" position=\"top\"\r\n                    class=\"item-breadcrumb-disable d-block\">{{item.location[0].name}}</span>\r\n                </div>\r\n              </div>\r\n              <div *ngIf=\"config.moveLocationMode\">\r\n                <button class=\"move-location-btn\" qms-btn-icon [matMenuTriggerFor]=\"menu\">\r\n                  <mat-icon>swap_vert</mat-icon>\r\n                </button>\r\n                <mat-menu class=\"move-location-menu\" #menu=\"matMenu\">\r\n                  <button (click)=\"setDestinationLocation(item, 'sibling')\" mat-menu-item>\r\n                    <span>{{LANG.PLACE_NEXT_TO}}</span>\r\n                  </button>\r\n                  <button (click)=\"setDestinationLocation(item, 'child')\" mat-menu-item>\r\n                    <span>{{LANG.PLACE_UNDER}}</span>\r\n                  </button>\r\n                </mat-menu>\r\n              </div>\r\n              <div *ngIf=\"config.modeView === MODE_VIEW_ENUM.ExternalView\" class=\"external-name\">\r\n                <span qms-elipsify mode=\"dark\" position=\"top\" class=\"text-gray fs-base mb0\">{{item.externalName}}\r\n                </span>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div [@inOutAnimation] *ngIf=\"!resultSearch.length && !getLoading$.value\" class=\"result no-result\">\r\n        <ng-container *ngTemplateOutlet=\"noResult\"></ng-container>\r\n      </div>\r\n      <mat-divider *ngIf=\"searchDepartment$.value.length > 10 && config.enablePagingSearch\"\r\n        class=\"mx-auto\"></mat-divider>\r\n      <qms-paginator #paginatorSearch *ngIf=\"searchDepartment$.value.length > 10 && config.enablePagingSearch \"\r\n        [length]=\"searchDepartment$.value.length\" [numHidden]=\"0\" [pageSize]=\"CURRENT_PAGESIZE\"\r\n        [pageSizeOptions]=\"PAGE_SIZE_OPTION\" (page)='onPagingSearchResult($event)'\r\n        [size]='config.isMobile ? PAGINATION_SIZE.small : PAGINATION_SIZE.medium'>\r\n      </qms-paginator>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Template for Checkbox -->\r\n  <ng-template #showCheckboxTemplate let-node=\"node\">\r\n    <mat-checkbox [id]=\"'node-'+node.id\" qms-group-options color=\"default\" label=\"none\" class=\"flex-direction-row\"\r\n      [disabled]=\"node.isLoading || node.disabled\" [checked]=\"checkListSelection.isSelected(node)\"\r\n      (click)=\"!node.isLoading && onCheckNode(node)\" [attr.disabled]=\"node.disabled || node.isLoading\">\r\n      <img [title]=\"node.itemIconSvg\" *ngIf=\"node.itemIconSvg\" class=\"material-icons type-icon\"\r\n        [src]=\"node.itemIconSvg\" />\r\n      <span *ngIf=\"node.itemIcon\" [class]=\"node.itemIcon\" [qmsTransformIcon]=\"node.itemIcon\"\r\n        class=\"material-icons-outlined type-icon\"></span>\r\n      <span *ngIf=\"node.itemMatIcon\" class=\"material-icons-outlined type-icon\">{{\r\n        node.itemMatIcon }}\r\n      </span>\r\n      <div class=\"node-text\" [ngStyle]=\"{\r\n        maxWidth: (maxWidthNode - 20*node.level)+ 'px'\r\n      }\">\r\n        <span qms-elipsify [mode]=\"'dark'\" position=\"top\" class=\"text-name cursor-pointer ml5 123\"\r\n          [ngClass]=\"{ disabled: node.disabled}\">{{ node.name}}\r\n        </span>\r\n      </div>\r\n    </mat-checkbox>\r\n  </ng-template>\r\n\r\n  <!-- Template node without checkbox -->\r\n  <ng-template #nodeWithoutCheckboxTemplate let-node=\"node\">\r\n    <div [id]=\"'node-'+node.id\" (click)=\"onCheckNode(node)\" class=\"node-without-checkbox\">\r\n      <div class=\"node-info\">\r\n        <span *ngIf=\"node.itemIcon\" [class]=\"node.itemIcon\" [qmsTransformIcon]=\"node.itemIcon\"\r\n          class=\"material-icons-outlined type-icon\"></span>\r\n        <span *ngIf=\"node.itemMatIcon\" class=\"material-icons-outlined type-icon\">{{\r\n          node.itemMatIcon }}\r\n        </span>\r\n        <span class=\"text-name cursor-pointer pl-10 123\" [ngClass]=\"{ disabled: node.disabled }\">{{ node.name }}</span>\r\n      </div>\r\n      <div class=\"node-state\">\r\n        <mat-icon [class.disabled]=\"(config.moveLocationMode && checkListSelection.isSelected(node))\"\r\n          *ngIf=\"checkListSelection.isSelected(node)\">check</mat-icon>\r\n        <button class=\"move-location-btn\" *ngIf=\"config.moveLocationMode && !checkListSelection.isSelected(node)\"\r\n          qms-btn-icon [matMenuTriggerFor]=\"menu\">\r\n          <mat-icon>swap_vert</mat-icon>\r\n        </button>\r\n        <mat-menu class=\"move-location-menu\" #menu=\"matMenu\">\r\n          <button (click)=\"moveToLocation(node, 'sibling')\" mat-menu-item>\r\n            <span>{{LANG.PLACE_NEXT_TO}}</span>\r\n          </button>\r\n          <button (click)=\"moveToLocation(node, 'child')\" mat-menu-item>\r\n            <span>{{LANG.PLACE_UNDER}}</span>\r\n          </button>\r\n        </mat-menu>\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n</div>\r\n\r\n<ng-template #noResult>\r\n  <svg width=\"89\" height=\"130\" viewBox=\"0 0 89 88\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n    <rect x=\"0.5\" width=\"88\" height=\"88\" rx=\"44\" fill=\"white\" />\r\n    <rect x=\"0.5\" width=\"88\" height=\"88\" rx=\"44\" fill=\"#0163B2\" fill-opacity=\"0.12\" />\r\n    <path\r\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\"\r\n      fill=\"#0163B3\" />\r\n    <text x=\"10\" y=\"105\" fill=\"#0163B2\">{{LANG.NO_RESULT}}</text>\r\n  </svg>\r\n</ng-template>\r\n\r\n<!-- Template loading -->\r\n<ng-template #loading>\r\n  <div [ngStyle]=\"{\r\n    'height': searchDepartment$.value.length ? (config.modeView === MODE_VIEW_ENUM.ExternalView ? 'calc(100% - 90px)' : 'calc(100% - 50px)' ) : height\r\n  }\" class=\"qms-loading-container\">\r\n    <div class=\"qms-loader\" *ngFor=\"let item of arrSkeleton\">\r\n      <div class=\"qms-loader__wrapper\">\r\n        <div class=\"row-loader\">\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- Template mask overlay -->\r\n<ng-template #maskOverlay>\r\n  <div class=\"mask-overlay\">\r\n    <mat-spinner [diameter]=\"50\" [strokeWidth]=\"5\" color=\"primary\"></mat-spinner>\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- Loading spinner -->\r\n<ng-template #loadingSpinner>\r\n  <div class=\"qms-spinner center\">\r\n    <mat-spinner [diameter]=\"20\" [strokeWidth]=\"2\"></mat-spinner>\r\n  </div>\r\n</ng-template>", styles: ["@font-face{font-family:icomoon;src:url(/assets/fonts/icomoon.eot?aghldx);src:url(/assets/fonts/icomoon.eot?aghldx#iefix) format(\"embedded-opentype\"),url(/assets/fonts/icomoon.ttf?aghldx) format(\"truetype\"),url(/assets/fonts/icomoon.woff?aghldx) format(\"woff\"),url(/assets/fonts/icomoon.svg?aghldx#icomoon) format(\"svg\");font-weight:400;font-style:normal;font-display:block}[class^=icon-],[class*=\" icon-\"]{font-family:icomoon!important;speak:never;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-acutely-toxic .path1:before{content:\"\\e91b\";color:#e32730}.icon-acutely-toxic .path2:before{content:\"\\e922\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path3:before{content:\"\\e923\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path4:before{content:\"\\e924\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path5:before{content:\"\\e925\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path6:before{content:\"\\e926\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path7:before{content:\"\\e927\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path8:before{content:\"\\e928\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path9:before{content:\"\\e929\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path10:before{content:\"\\e92a\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path11:before{content:\"\\e92b\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path12:before{content:\"\\e92c\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path13:before{content:\"\\e92d\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path14:before{content:\"\\e92e\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path15:before{content:\"\\e92f\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path16:before{content:\"\\e930\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path17:before{content:\"\\e931\";margin-left:-1em;color:#323232}.icon-add-column:before{content:\"\\e932\"}.icon-add-tooltip:before{content:\"\\e933\"}.icon-admin:before{content:\"\\e934\"}.icon-annual-cycle:before{content:\"\\e935\"}.icon-assignment-repete:before{content:\"\\e936\"}.icon-barrier-add:before{content:\"\\e937\"}.icon-barrier-edit:before{content:\"\\e938\"}.icon-barrier-view:before{content:\"\\e939\"}.icon-button-group:before{content:\"\\e93a\"}.icon-chemical-manager:before{content:\"\\e93b\"}.icon-chronic-health-hazard .path1:before{content:\"\\e93c\";color:#e32730}.icon-chronic-health-hazard .path2:before{content:\"\\e93d\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path3:before{content:\"\\e93e\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path4:before{content:\"\\e93f\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path5:before{content:\"\\e940\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path6:before{content:\"\\e941\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path7:before{content:\"\\e942\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path8:before{content:\"\\e943\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path9:before{content:\"\\e944\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path10:before{content:\"\\e945\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path11:before{content:\"\\e946\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path12:before{content:\"\\e947\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path13:before{content:\"\\e948\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path14:before{content:\"\\e949\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path15:before{content:\"\\e94a\";margin-left:-1em;color:#323232}.icon-contingency:before{content:\"\\e94b\"}.icon-corrosive .path1:before{content:\"\\e94c\";color:#323232}.icon-corrosive .path2:before{content:\"\\e94d\";margin-left:-1em;color:#323232}.icon-corrosive .path3:before{content:\"\\e94e\";margin-left:-1em;color:#323232}.icon-corrosive .path4:before{content:\"\\e94f\";margin-left:-1em;color:#323232}.icon-corrosive .path5:before{content:\"\\e950\";margin-left:-1em;color:#323232}.icon-corrosive .path6:before{content:\"\\e951\";margin-left:-1em;color:#323232}.icon-corrosive .path7:before{content:\"\\e952\";margin-left:-1em;color:#323232}.icon-corrosive .path8:before{content:\"\\e953\";margin-left:-1em;color:#323232}.icon-corrosive .path9:before{content:\"\\e954\";margin-left:-1em;color:#323232}.icon-corrosive .path10:before{content:\"\\e955\";margin-left:-1em;color:#323232}.icon-corrosive .path11:before{content:\"\\e956\";margin-left:-1em;color:#323232}.icon-corrosive .path12:before{content:\"\\e957\";margin-left:-1em;color:#323232}.icon-corrosive .path13:before{content:\"\\e958\";margin-left:-1em;color:#323232}.icon-corrosive .path14:before{content:\"\\e959\";margin-left:-1em;color:#323232}.icon-corrosive .path15:before{content:\"\\e95a\";margin-left:-1em;color:#323232}.icon-corrosive .path16:before{content:\"\\e95b\";margin-left:-1em;color:#323232}.icon-corrosive .path17:before{content:\"\\e95c\";margin-left:-1em;color:#323232}.icon-corrosive .path18:before{content:\"\\e95d\";margin-left:-1em;color:#323232}.icon-corrosive .path19:before{content:\"\\e95e\";margin-left:-1em;color:#323232}.icon-corrosive .path20:before{content:\"\\e95f\";margin-left:-1em;color:#323232}.icon-corrosive .path21:before{content:\"\\e960\";margin-left:-1em;color:#e32730}.icon-dashboard:before{content:\"\\e961\"}.icon-database-sds:before{content:\"\\e962\"}.icon-description-add:before{content:\"\\e963\"}.icon-description-edit:before{content:\"\\e964\"}.icon-description-view:before{content:\"\\e965\";color:#666}.icon-document-read .path1:before{content:\"\\e966\";color:#000;opacity:.6}.icon-document-read .path2:before{content:\"\\e967\";margin-left:-1em;color:#fff}.icon-document-read .path3:before{content:\"\\e968\";margin-left:-1em;color:#000;opacity:.6}.icon-draft:before{content:\"\\e969\"}.icon-expired-off:before{content:\"\\e96a\"}.icon-expired-on:before{content:\"\\e96b\"}.icon-explosive .path1:before{content:\"\\e96c\";color:#e32730}.icon-explosive .path2:before{content:\"\\e96d\";margin-left:-1em;color:#323232}.icon-explosive .path3:before{content:\"\\e96e\";margin-left:-1em;color:#323232}.icon-explosive .path4:before{content:\"\\e96f\";margin-left:-1em;color:#323232}.icon-explosive .path5:before{content:\"\\e970\";margin-left:-1em;color:#323232}.icon-explosive .path6:before{content:\"\\e971\";margin-left:-1em;color:#323232}.icon-explosive .path7:before{content:\"\\e972\";margin-left:-1em;color:#323232}.icon-explosive .path8:before{content:\"\\e973\";margin-left:-1em;color:#323232}.icon-explosive .path9:before{content:\"\\e974\";margin-left:-1em;color:#323232}.icon-explosive .path10:before{content:\"\\e975\";margin-left:-1em;color:#323232}.icon-explosive .path11:before{content:\"\\e976\";margin-left:-1em;color:#323232}.icon-explosive .path12:before{content:\"\\e977\";margin-left:-1em;color:#323232}.icon-explosive .path13:before{content:\"\\e978\";margin-left:-1em;color:#323232}.icon-explosive .path14:before{content:\"\\e979\";margin-left:-1em;color:#323232}.icon-explosive .path15:before{content:\"\\e97a\";margin-left:-1em;color:#323232}.icon-explosive .path16:before{content:\"\\e97b\";margin-left:-1em;color:#323232}.icon-explosive .path17:before{content:\"\\e97c\";margin-left:-1em;color:#323232}.icon-explosive .path18:before{content:\"\\e97d\";margin-left:-1em;color:#323232}.icon-explosive .path19:before{content:\"\\e97e\";margin-left:-1em;color:#323232}.icon-explosive .path20:before{content:\"\\e97f\";margin-left:-1em;color:#323232}.icon-explosive .path21:before{content:\"\\e980\";margin-left:-1em;color:#323232}.icon-explosive .path22:before{content:\"\\e981\";margin-left:-1em;color:#323232}.icon-explosive .path23:before{content:\"\\e982\";margin-left:-1em;color:#323232}.icon-explosive .path24:before{content:\"\\e983\";margin-left:-1em;color:#323232}.icon-explosive .path25:before{content:\"\\e984\";margin-left:-1em;color:#323232}.icon-explosive .path26:before{content:\"\\e985\";margin-left:-1em;color:#323232}.icon-explosive .path27:before{content:\"\\e986\";margin-left:-1em;color:#323232}.icon-explosive .path28:before{content:\"\\e987\";margin-left:-1em;color:#323232}.icon-explosive .path29:before{content:\"\\e988\";margin-left:-1em;color:#323232}.icon-explosive .path30:before{content:\"\\e989\";margin-left:-1em;color:#323232}.icon-explosive .path31:before{content:\"\\e98a\";margin-left:-1em;color:#323232}.icon-explosive .path32:before{content:\"\\e98b\";margin-left:-1em;color:#323232}.icon-explosive .path33:before{content:\"\\e98c\";margin-left:-1em;color:#323232}.icon-explosive .path34:before{content:\"\\e98d\";margin-left:-1em;color:#323232}.icon-explosive .path35:before{content:\"\\e98e\";margin-left:-1em;color:#323232}.icon-explosive .path36:before{content:\"\\e98f\";margin-left:-1em;color:#323232}.icon-explosive .path37:before{content:\"\\e990\";margin-left:-1em;color:#323232}.icon-explosive .path38:before{content:\"\\e991\";margin-left:-1em;color:#323232}.icon-explosive .path39:before{content:\"\\e992\";margin-left:-1em;color:#323232}.icon-explosive .path40:before{content:\"\\e993\";margin-left:-1em;color:#323232}.icon-explosive .path41:before{content:\"\\e994\";margin-left:-1em;color:#323232}.icon-explosive .path42:before{content:\"\\e995\";margin-left:-1em;color:#323232}.icon-explosive .path43:before{content:\"\\e996\";margin-left:-1em;color:#323232}.icon-explosive .path44:before{content:\"\\e997\";margin-left:-1em;color:#323232}.icon-explosive .path45:before{content:\"\\e998\";margin-left:-1em;color:#323232}.icon-explosive .path46:before{content:\"\\e999\";margin-left:-1em;color:#323232}.icon-file-excel:before{content:\"\\e99a\"}.icon-file-pdf:before{content:\"\\e99b\"}.icon-file-pdf-verified .path1:before{content:\"\\e99c\";color:#000;opacity:.6}.icon-file-pdf-verified .path2:before{content:\"\\e99d\";margin-left:-1em;color:#fff}.icon-file-pdf-verified .path3:before{content:\"\\e99e\";margin-left:-1em;color:#000;opacity:.6}.icon-file-word:before{content:\"\\e99f\"}.icon-filter-alt:before{content:\"\\e9a0\"}.icon-flammable .path1:before{content:\"\\e9a1\";color:#323232}.icon-flammable .path2:before{content:\"\\e9a2\";margin-left:-1em;color:#323232}.icon-flammable .path3:before{content:\"\\e9a3\";margin-left:-1em;color:#e32730}.icon-gas-under-pressure .path1:before{content:\"\\e9a4\";color:#323232}.icon-gas-under-pressure .path2:before{content:\"\\e9a5\";margin-left:-1em;color:#e32730}.icon-health-hazard .path1:before{content:\"\\e9a6\";color:#323232}.icon-health-hazard .path2:before{content:\"\\e9a7\";margin-left:-1em;color:#e32730}.icon-line-break:before{content:\"\\e9a8\"}.icon-location:before{content:\"\\e9a9\"}.icon-measure-add:before{content:\"\\e9aa\"}.icon-measure-edit:before{content:\"\\e9ab\"}.icon-measure-view:before{content:\"\\e9ac\";color:#666}.icon-messages:before{content:\"\\e9ad\"}.icon-monitoring:before{content:\"\\e9ae\";color:#666}.icon-move:before{content:\"\\e9af\"}.icon-oxidizing .path1:before{content:\"\\e9b0\";color:#e32730}.icon-oxidizing .path2:before{content:\"\\e9b1\";margin-left:-1em;color:#323232}.icon-oxidizing .path3:before{content:\"\\e9b2\";margin-left:-1em;color:#323232}.icon-oxidizing .path4:before{content:\"\\e9b3\";margin-left:-1em;color:#323232}.icon-process-area-closed:before{content:\"\\e9b4\"}.icon-process-area-open:before{content:\"\\e9b5\"}.icon-process-linked .path1:before{content:\"\\e9b6\";color:#000;opacity:.6}.icon-process-linked .path2:before{content:\"\\e9b7\";margin-left:-1em;color:#666}.icon-risk:before{content:\"\\e9b8\"}.icon-search-in-file:before{content:\"\\e9b9\"}.icon-sort-ascending:before{content:\"\\e9ba\"}.icon-sort-descending:before{content:\"\\e9bb\"}.icon-subscript:before{content:\"\\e9bc\"}.icon-superscript:before{content:\"\\e9bd\"}.icon-syncronice-favorites:before{content:\"\\e9be\"}.icon-system-settings:before{content:\"\\e9bf\"}.icon-view-three-outlined:before{content:\"\\e9c0\"}.icon-workplace-safety:before{content:\"\\e9c1\"}.icon-checklist:before{content:\"\\e900\"}.icon-department-document .path1:before{content:\"\\e901\";color:#000;opacity:.6}.icon-department-document .path2:before{content:\"\\e902\";margin-left:-1em;color:#00804c}.icon-department-folder-closed .path1:before{content:\"\\e903\";color:#000;opacity:.6}.icon-department-folder-closed .path2:before{content:\"\\e904\";margin-left:-1em;color:#00804c}.icon-department-folder-open .path1:before{content:\"\\e905\";color:#000;opacity:.6}.icon-department-folder-open .path2:before{content:\"\\e906\";margin-left:-1em;color:#00804c}.icon-deviation:before{content:\"\\e907\"}.icon-dropdown-folder .path1:before{content:\"\\e908\";color:#00324e}.icon-dropdown-folder .path2:before{content:\"\\e909\";margin-left:-1em;color:#fff;opacity:.6}.icon-enterprise-document .path1:before{content:\"\\e90a\";color:#000;opacity:.6}.icon-enterprise-document .path2:before{content:\"\\e90b\";margin-left:-1em;color:#cf4714}.icon-enterprise-folder-closed .path1:before{content:\"\\e90c\";color:#000;opacity:.6}.icon-enterprise-folder-closed .path2:before{content:\"\\e90d\";margin-left:-1em;color:#cf4714}.icon-enterprise-folder-open .path1:before{content:\"\\e90e\";color:#000;opacity:.6}.icon-enterprise-folder-open .path2:before{content:\"\\e90f\";margin-left:-1em;color:#cf4714}.icon-folder-closed:before{content:\"\\e910\"}.icon-folder-open:before{content:\"\\e911\"}.icon-keyboard_arrow_down:before{content:\"\\e912\"}.icon-keyboard_arrow_up:before{content:\"\\e913\"}.icon-local-document .path1:before{content:\"\\e914\";color:#000;opacity:.6}.icon-local-document .path2:before{content:\"\\e915\";margin-left:-1em;color:#1954a9}.icon-local-folder-closed .path1:before{content:\"\\e916\";color:#000;opacity:.6}.icon-local-folder-closed .path2:before{content:\"\\e917\";margin-left:-1em;color:#1954a9}.icon-local-folder-open .path1:before{content:\"\\e918\";color:#000;opacity:.6}.icon-local-folder-open .path2:before{content:\"\\e919\";margin-left:-1em;color:#1954a9}.icon-process:before{content:\"\\e91a\"}.icon-regional-document .path1:before{content:\"\\e91c\";color:#000;opacity:.6}.icon-regional-document .path2:before{content:\"\\e91d\";margin-left:-1em;color:#662e0d}.icon-regional-folder-closed .path1:before{content:\"\\e91e\";color:#000;opacity:.6}.icon-regional-folder-closed .path2:before{content:\"\\e91f\";margin-left:-1em;color:#662e0d}.icon-regional-folder-open .path1:before{content:\"\\e920\";color:#000;opacity:.6}.icon-regional-folder-open .path2:before{content:\"\\e921\";margin-left:-1em;color:#662e0d}.qms-select-department-tree-container{font-family:Open Sans,sans-serif}.qms-select-department-tree-container .mr10{margin-right:10px}.qms-select-department-tree-container .mt5{margin-bottom:5px}.qms-select-department-tree-container .mb5{margin-top:5px}.qms-select-department-tree-container .w100{width:100%}.qms-select-department-tree-container .h100{height:100%}.qms-select-department-tree-container .fw500{font-weight:500!important}.qms-select-department-tree-container .text-right{text-align:right}.qms-select-department-tree-container .mt20{margin-top:20px}.qms-select-department-tree-container .d-flex{display:flex}.qms-select-department-tree-container .align-items-center{align-items:center}.qms-select-department-tree-container .justify-content-end{justify-content:flex-end}.qms-select-department-tree-container .text-selected{color:#0009;font-size:12px;line-height:16px;margin-top:1rem}.qms-select-department-tree-container .input-field{display:flex;align-items:center;position:relative}.qms-select-department-tree-container .input-field ::ng-deep .mat-form-field-wrapper{padding-bottom:8px!important}.qms-select-department-tree-container .input-field ::ng-deep .mat-form-field-underline{bottom:8px!important}.qms-select-department-tree-container .input-field input.input-search{width:100%;padding:10px;outline:none;border:none;background:var(--background-input-text)}.qms-select-department-tree-container .input-field .btn-search{cursor:pointer;vertical-align:middle;position:absolute;top:50%;right:10px;transform:translateY(-50%)}.qms-select-department-tree-container .input-field .line__divider{border-bottom:1px solid #ccc;height:1px;margin-top:10px;min-width:300px;max-width:100%}.qms-select-department-tree-container .header-title{font-weight:500;color:var(--ws-text-primary);font-size:16px;display:flex;align-items:center}.qms-select-department-tree-container .header-title .header-view{padding:4px 0}.qms-select-department-tree-container .sticky-position{position:sticky;top:0;left:0;z-index:1;background:#fff}.qms-select-department-tree-container .header-view-tree{display:grid;grid-template-columns:1fr 200px;column-gap:2px;padding:4px 12px 4px 0}.qms-select-department-tree-container .header-view-tree .header-view:nth-child(1){padding-left:12px}.qms-select-department-tree-container .tree-department-wrapper{padding-right:4px;overflow:hidden;position:relative;transition:height .3s ease-in-out}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view{width:100%;display:grid;grid-template-columns:1fr 200px;column-gap:2px}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main>.separate{height:38px}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main>.separate.h-0{height:0}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main:last-child{height:100%;padding-left:4px;position:relative}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main:last-child:after{position:absolute;content:\"\";top:0;bottom:-38px;left:0;width:1px;background:#0000001f}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main .external-list-item-container .node-external{overflow:hidden;transition:all .1s ease-in-out}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main .external-list-item-container .node-external .node-external-content{padding:5px 15px;height:calc(100% - 2px);color:var(--default-color);font-size:14px;display:flex;align-items:center}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main .external-list-item-container .node-external .node-external-content span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.qms-select-department-tree-container .mask-overlay{z-index:1000;background-color:#2221211a;position:absolute;top:0;left:0;width:100%;height:100%;border-radius:4px;overflow:hidden;display:grid;place-items:center}.qms-select-department-tree-container .select-department-tree>.cdk-virtual-scroll-orientation-vertical .cdk-virtual-scroll-content-wrapper{padding:0 4px!important}.qms-select-department-tree-container .select-department-tree .qms-tree-node{display:flex;align-items:center;border-radius:4px}.qms-select-department-tree-container .select-department-tree .qms-tree-node:hover{background-color:#00000014}.qms-select-department-tree-container .select-department-tree .qms-tree-node>.node-expand-area{width:48px;height:48px;position:relative}.qms-select-department-tree-container .select-department-tree .qms-tree-node.active-external-view .mat-mdc-checkbox.qms-group-options{width:calc(100% - 250px)}.qms-select-department-tree-container .select-department-tree .qms-tree-node.node-loading{background:var(--primary-light-6-opacity)}.qms-select-department-tree-container .select-department-tree .qms-tree-node>.external-view-node{flex-basis:200px;overflow:hidden}.qms-select-department-tree-container .select-department-tree .qms-tree-node>.external-view-node .node-external{overflow:hidden;transition:all .1s ease-in-out;display:block}.qms-select-department-tree-container .select-department-tree .qms-tree-node>.external-view-node .node-external .node-external-content{padding:5px 15px;height:calc(100% - 2px);color:var(--default-color);font-size:14px;display:flex;align-items:center}.qms-select-department-tree-container .select-department-tree .qms-tree-node>.external-view-node .node-external .node-external-content span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.qms-select-department-tree-container .select-department-tree .qms-tree-node.expand-node{color:var(--primary)}.qms-select-department-tree-container .select-department-tree .qms-tree-node.expand-node:hover{background:var(--primary-light-6-opacity)}.qms-select-department-tree-container .select-department-tree .qms-tree-node.expand-node:active{background:var(--primary-light-12-opacity)}.qms-select-department-tree-container .select-department-tree .qms-tree-node.expand-node .mat-icon{color:var(--primary)}.qms-select-department-tree-container .select-department-tree .qms-tree-node .node-without-checkbox{cursor:pointer;width:100%;display:flex;justify-content:space-between;align-items:center}.qms-select-department-tree-container .select-department-tree .qms-tree-node .node-without-checkbox .mat-icon{color:var(--primary);margin-right:4px}.qms-select-department-tree-container .select-department-tree .qms-tree-node.selected-theme{background:var(--primary-light-12-opacity)}.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all{cursor:default!important;pointer-events:none;-webkit-user-select:none;user-select:none}.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all button.mat-button-disabled,.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all .mat-icon-rtl-mirror,.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all .type-icon{color:#00000061}.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all .text-name.disabled{color:#00000061;cursor:default!important;pointer-events:none;-webkit-user-select:none;user-select:none}.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all.active{background-color:transparent}.qms-select-department-tree-container .select-department-tree .qms-tree-node.move-location-mode:hover .move-location-btn,.qms-select-department-tree-container .select-department-tree .qms-tree-node.move-location-mode:active .move-location-btn{display:block}.qms-select-department-tree-container .text-name{position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;cursor:pointer;width:100%}.qms-select-department-tree-container .cursor-pointer{cursor:pointer}.qms-select-department-tree-container .ml5{margin-left:15px!important}.qms-select-department-tree-container .pl-10{padding-left:10px}.qms-select-department-tree-container ::ng-deep .mat-mdc-checkbox.qms-group-options.flex-direction-row .mat-checkbox-layout{white-space:normal}.qms-select-department-tree-container ::ng-deep .mat-mdc-checkbox.qms-group-options.flex-direction-row .node-text>span{display:block}.qms-select-department-tree-container ::ng-deep .mat-mdc-checkbox.qms-group-options.flex-direction-row .mat-checkbox-label{flex-direction:row;align-items:center;position:relative;padding-bottom:2px}.qms-select-department-tree-container .qms-view-search-result{width:100%;overflow:hidden}.qms-select-department-tree-container .qms-view-search-result__header{position:relative}.qms-select-department-tree-container .qms-view-search-result__header:after{position:absolute;content:\"\";bottom:0;left:0;width:100%;height:1px;background-color:#0000001a}.qms-select-department-tree-container .qms-view-search-result__header .header-title{padding:8px 0;display:inline-block}.qms-select-department-tree-container .qms-view-search-result__header .header-title:nth-child(1){padding-left:12px}.qms-select-department-tree-container .qms-view-search-result__header .header-title:nth-child(2){flex-basis:200px}.qms-select-department-tree-container .qms-view-search-result>.no-result{height:100%;display:flex;justify-content:center;align-items:center}.qms-select-department-tree-container .qms-view-search-result__wrapper{height:calc(100% - 50px);width:100%}.qms-select-department-tree-container .qms-view-search-result__wrapper.active-external{height:calc(100% - 90px)!important}.qms-select-department-tree-container .qms-view-search-result__wrapper .result{max-height:100%;overflow-y:auto;margin-bottom:4px;padding-right:4px}.qms-select-department-tree-container .qms-view-search-result__wrapper .result.active-paging{max-height:calc(100% - 40px)}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item{border-radius:4px;display:grid;grid-template-columns:45px 1fr;align-items:center;cursor:pointer;transition:background .3s ease;min-height:40px}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item:not(:nth-child(1)){margin-top:4px!important}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item:hover{background:linear-gradient(0deg,#0163b21f,#0163b21f),#fff}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item:hover .move-location-btn{display:block}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item.active{background:linear-gradient(0deg,#0163b21f,#0163b21f),#fff}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item.no-checkbox{grid-template-columns:1fr}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item__content{display:flex;align-items:center}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item__content .item-result-content-wraper{padding:5px 15px;width:100%}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item__content .external-name{flex-basis:200px}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item__content .external-name span{width:200px;display:inline-block}.qms-select-department-tree-container .qms-view-search-result ::ng-deep .mat-mdc-checkbox.qms-group-options{display:flex;height:100%}.qms-select-department-tree-container ::ng-deep .breadcrumb-container{flex-wrap:wrap}.qms-select-department-tree-container ::ng-deep .mat-button-focus-overlay{background-color:transparent}.qms-select-department-tree-container ::ng-deep .qms-breadcrumb-item{margin:0}.qms-select-department-tree-container ::ng-deep .qms-breadcrumb-item-text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;transition:color .3s ease}.qms-select-department-tree-container ::ng-deep .qms-breadcrumb-item-text:not(:last-child){max-width:150px!important}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-mdc-paginator-container .qms-total-result{margin-bottom:0;margin-right:12px;height:100%;display:flex;align-items:center}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-mdc-paginator-container .qms-total-result span{font-weight:600;color:#000c}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-mdc-paginator-container .qms-paginator-range-actions{margin-bottom:0;column-gap:2px}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-mdc-paginator-container .qms-paginator-range-actions>.qms-total-result{margin-bottom:0}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-form-field-wrapper{padding-bottom:0}.qms-select-department-tree-container ::ng-deep .qms-paginator .qms-paginator-page-size{align-items:center}.qms-select-department-tree-container .text-gray{color:#242424}.qms-select-department-tree-container .mb0{margin-bottom:0!important}.qms-select-department-tree-container .fs-base{font-size:14px!important}.qms-select-department-tree-container .user-select-none{-webkit-user-select:none;user-select:none}.qms-select-department-tree-container .item-breadcrumb-disable{cursor:not-allowed;color:#0009;font-weight:400;font-size:14px;max-width:250px}.qms-select-department-tree-container ::ng-deep .mat-mdc-checkbox.checkbox-all .mat-checkbox-label{flex-direction:row;align-items:center;column-gap:4px}.qms-select-department-tree-container ::ng-deep .btn-arrow{width:40px;height:40px;line-height:40px}.qms-select-department-tree-container .qms-loading-container{overflow:hidden;display:grid;grid-template-rows:repeat(60px)}.qms-select-department-tree-container .qms-loading-container .qms-loader{position:relative;width:100%;height:100%;padding:10px 0;overflow:hidden}.qms-select-department-tree-container .qms-loading-container .qms-loader:after{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;background:linear-gradient(110deg,#e9e9e900,#e3e3e300 40%,#e3e3e380 50%,#e3e3e300 60% 100%);animation:animate-loading 1.2s linear infinite}.qms-select-department-tree-container .qms-loading-container .qms-loader__wrapper{position:relative;width:100%;height:100%}.qms-select-department-tree-container .qms-loading-container .qms-loader__wrapper .row-loader{background-color:#eee;position:absolute;left:0;width:100%;height:40px}@keyframes animate-loading{0%{transform:translate(-100%)}to{transform:translate(100%)}}.qms-select-department-tree-container .qms-spinner{font-size:20px;position:relative;display:inline-block;width:1em;height:1em}.qms-select-department-tree-container .qms-spinner.center{position:absolute;inset:0;margin:auto}.qms-select-department-tree-container ::ng-deep .mat-mdc-progress-spinner circle,.qms-select-department-tree-container .mat-mdc-progress-spinner circle{stroke:#1b75be!important}@media screen and (max-width: 600px){.qms-select-department-tree-container .external-view-node{flex-basis:65px!important}.qms-select-department-tree-container .qms-tree-node.active-external-view .mat-mdc-checkbox.qms-group-options{width:calc(100% - 110px)!important}.qms-select-department-tree-container .header-view-tree{grid-template-columns:1fr 80px!important}.qms-select-department-tree-container ::ng-deep .cdk-virtual-scroll-content-wrapper{right:0!important}.qms-select-department-tree-container .header-title{font-size:14px!important}.qms-select-department-tree-container .text-name,.qms-select-department-tree-container .node-external,.qms-select-department-tree-container .text-label,.qms-select-department-tree-container .text-label+span{font-size:12px}.qms-select-department-tree-container .node-expand-area{width:30px!important;height:30px!important}.qms-select-department-tree-container .node-expand-area .qms-btn-icon{width:30px;height:30px;line-height:30px}.qms-select-department-tree-container .fs-base{font-size:12px!important}.qms-select-department-tree-container .qms-select-department-tree-container .breadcrumb-container{flex-wrap:nowrap!important}.qms-select-department-tree-container ::ng-deep .qms-breadcrumb-item-text{font-size:12px!important;max-width:175px!important}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-mdc-paginator-container .qms-total-result{display:none!important}.qms-select-department-tree-container ::ng-deep .qms-paginator .size-small .mat-mdc-paginator-container{justify-content:center!important}.qms-select-department-tree-container .qms-view-search-result__header>.header-title:nth-child(2){flex-basis:120px!important}.qms-select-department-tree-container .result-item__content .external-name{flex-basis:75px!important}.qms-select-department-tree-container .result-item__content .external-name span{width:75px!important}}.qms-select-department-tree-container ::ng-deep .qms-paginator{margin-top:0}.move-location-btn{display:none;color:var(--primary)}::ng-deep .move-location-menu .mat-mdc-menu-item:hover{color:var(--primary)}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"['qms-select-department-tree-container', (config.customClass || '')]\">\r\n  <div class=\"input-select-department\">\r\n    <form (ngSubmit)=\"!getLoading$.value && onSearch()\" *ngIf=\"config.enableTreeSearch\" class=\"input-field\">\r\n      <mat-form-field class=\"w100\" qms-form qms-search-field>\r\n        <input [formControl]=\"formSearchControl\" type=\"text\" placeholder=\"{{ LANG.SEARCH }}\" matInput />\r\n        <button *ngIf=\"!getLoading$.value\" type=\"submit\" qms-btn-icon color=\"light\" matSuffix>\r\n          <mat-icon>search</mat-icon>\r\n        </button>\r\n        <mat-progress-spinner [@inOutAnimation] matSuffix mode=\"indeterminate\" diameter=\"20\"\r\n          *ngIf=\"getLoading$.value\"></mat-progress-spinner>\r\n        <div *ngIf=\"!!formSearchControl.value && !getLoading$.value\" qms-input-clear matSuffix>\r\n          <button qms-btn-icon color=\"light\" [@inOutAnimation] aria-label=\"Clear\" (click)=\"formSearchControl.reset()\">\r\n            <mat-icon>close</mat-icon>\r\n          </button>\r\n        </div>\r\n      </mat-form-field>\r\n    </form>\r\n    <div [@inOutAnimation] *ngIf=\"(getIndexView$ | async) === 1 && (textSearchSubject$ | async)\"\r\n      class=\"sub-text ms-1 fw500\">\r\n      {{LANG.RESULT_SEARCH_FOR}}<i><b>\"{{textSearchSubject$ | async}}\"</b></i>\r\n    </div>\r\n    <div [class.justify-content-between]=\"config.enableIncludeChild && !config.isSelectOne\"\r\n      class=\"select__toggle-include toggle-include-child my-1 d-flex justify-content-end  align-items-center\">\r\n      <mat-slide-toggle *ngIf=\"config.enableIncludeChild && !config.isSelectOne\"\r\n        [disabled]=\"(getIndexView$ | async) === 1 && config.disableToggleIncludeChildWhenChangeView\"\r\n        [(ngModel)]=\"isIncludeChildren\" (ngModelChange)=\"toggleIncludeChildEvent.emit($event)\" color=\"default\"\r\n        qms-group-options>\r\n        <span class=\"text-label\">{{config.selectIncludeLabel || LANG.SELECT_INCLUDE_CHILD}}</span>\r\n      </mat-slide-toggle>\r\n      <button class=\"btn-arrow\" [@inOutAnimation] *ngIf=\"(getIndexView$ | async) === 1 && config.enableTreeSearch\"\r\n        (click)=\"setIndexView(0)\" qms-btn-icon color=\"light\" [qms-tool-tip]=\"LANG.BACK_TO_TREE\" mode=\"dark\"\r\n        position=\"top\">\r\n        <mat-icon>arrow_back</mat-icon>\r\n      </button>\r\n      <button class=\"btn-arrow\" [@inOutAnimation]\r\n        *ngIf=\"(getIndexView$ | async) === 0 && config.enableTreeSearch && (textSearchSubject$ | async)\"\r\n        (click)=\"setIndexView(1)\" qms-btn-icon color=\"light\" [qms-tool-tip]=\"LANG.GOTO_SEACH_RESULT\" mode=\"dark\"\r\n        position=\"top\">\r\n        <mat-icon>arrow_forward</mat-icon>\r\n      </button>\r\n    </div>\r\n  </div>\r\n  <div [@inOutAnimation]\r\n    *ngIf=\"(getIndexView$ | async) === 0 && config.modeView === MODE_VIEW_ENUM.ExternalView && !!config.headerName\"\r\n    class=\"header-view-tree\">\r\n    <div class=\"header-view header-title\">\r\n      {{config.headerName.treeName}}\r\n    </div>\r\n    <div class=\"header-view header-title\">\r\n      {{config.headerName.externalName}}\r\n    </div>\r\n  </div>\r\n  <mat-divider class=\"mx-auto\"></mat-divider>\r\n  <div [@animateSlideView]=\"(getIndexView$ | async)\" [ngStyle]=\"{\r\n    minHeight: height\r\n  }\" class=\"tree-department-wrapper\">\r\n    <div *ngIf=\"(getIndexView$ | async) === 0\" class=\"tree-view w100 h100\">\r\n      <div class=\"tree-view-main h100\">\r\n        <div *ngIf=\"!config.isSelectOne && !!treeControl.dataNodes && config.activeSelectAllNode\"\r\n          class=\"checkbox-all-tree\" [class.sticky-position]=\"config.modeView === MODE_VIEW_ENUM.ExternalView\">\r\n          <!-- Checkbox all root node -->\r\n          <mat-checkbox [@inOutAnimation] (click)=\"onCheckAllRootTreeNode()\"\r\n            [indeterminate]=\"isIndeterminateCheckboxAllTree\" [checked]=\"isAllDepartmentSelected\" qms-group-options\r\n            color=\"default\" label=\"none\" class=\"checkbox-all\">\r\n            <span class=\"text-label \">{{LANG.CHOOSE_ALL}} (<b>{{treeControl.dataNodes.length}}</b>)</span>\r\n          </mat-checkbox>\r\n          <mat-divider class=\"mx-auto\"></mat-divider>\r\n        </div>\r\n        <cdk-virtual-scroll-viewport *ngIf=\"dataSource.data\" [ngClass]=\"{\r\n                    'has-checkbox-all': !config.isSelectOne && config.modeView === MODE_VIEW_ENUM.Basic,\r\n                    'select-department-tree': true\r\n                  }\" [itemSize]=\"ITEM_SIZE\" [ngStyle]=\"{height: height}\">\r\n          <ng-container *cdkVirtualFor=\"let node of dataSource; trackBy: trackBy\">\r\n            <div class=\"qms-tree-node mt-1\" [style.padding-left]=\"node.level * (config.isMobile ? 12 :24) + 'px'\"\r\n              [attr.data-id]=\"node.id\" [id]=\"'mat-node-'+node.id\" [@triggerColor]=\"activeNode == node.id\" [ngClass]=\"{\r\n                              'w-100': config.isSelectOne,\r\n                              'selected-theme': this.checkListSelection.isSelected(node) && config.isSelectOne,\r\n                              'expand-node': treeControl.isExpandable(node) && treeControl.isExpanded(node),\r\n                              'active-external-view': config.modeView === MODE_VIEW_ENUM.ExternalView,\r\n                              'node-loading': node.isLoading,\r\n                              'move-location-mode': config.moveLocationMode\r\n                        }\">\r\n              <div class=\"node-expand-area\">\r\n                <button class=\"btn-toggle\" qms-btn-icon color=\"light\"\r\n                  [disabled]=\"(config.moveLocationMode && checkListSelection.isSelected(node))\"\r\n                  (click)=\"onExpandNode(node)\" *ngIf=\"treeControl.isExpandable(node) && !node.isLoading\">\r\n                  <mat-icon>\r\n                    {{ treeControl.isExpanded(node) ? node?.expandIcon?.collapse : node?.expandIcon?.expand }}\r\n                  </mat-icon>\r\n                </button>\r\n                <ng-container *ngIf=\"node.isLoading; then loadingSpinner\"></ng-container>\r\n              </div>\r\n              <ng-container [ngTemplateOutlet]=\"config.isSelectOne ? nodeWithoutCheckboxTemplate : showCheckboxTemplate\"\r\n                [ngTemplateOutletContext]=\"{ node: node }\"></ng-container>\r\n              <div *ngIf=\"config.modeView === MODE_VIEW_ENUM.ExternalView\" class=\"external-view-node\">\r\n                <span class=\"node-external\" qms-elipsify position=\"top\" mode=\"dark\">\r\n                  {{node.externalName || ''}}\r\n                </span>\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n        </cdk-virtual-scroll-viewport>\r\n        <ng-container [@inOutAnimation] *ngIf=\"config.spinnerWhenGetMore && getLoadingMore$| async ;then maskOverlay\">\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"(getIndexView$ | async) === 1\" [ngStyle]=\"{\r\n      height: height\r\n    }\" class=\"qms-view-search-result\">\r\n      <div *ngIf=\"config.modeView === MODE_VIEW_ENUM.ExternalView\"\r\n        class=\"qms-view-search-result__header d-flex align-items-center justify-content-between\">\r\n        <div class=\"header-title\">\r\n          <span qms-elipsify mode=\"dark\" position=\"top\">\r\n            {{config.headerName.resultSearchName}}\r\n          </span>\r\n        </div>\r\n        <div class=\"header-title\">\r\n          <span qms-elipsify mode=\"dark\" position=\"top\">\r\n            {{config.headerName.externalName}}\r\n          </span>\r\n        </div>\r\n      </div>\r\n      <ng-container *ngIf=\"getLoading$.value; then loading\"></ng-container>\r\n      <div class=\"qms-view-search-result__wrapper\" [ngClass]=\"{\r\n        'active-external': config.modeView === MODE_VIEW_ENUM.ExternalView}\"\r\n        *ngIf=\"!!resultSearch.length && !getLoading$.value\">\r\n        <div *ngIf=\"!config.moveLocationMode\">\r\n          <mat-checkbox [@inOutAnimation]\r\n            [disabled]=\"!resultSearch.length || config.isSelectOne || isDisableChecboxAllSearch()\" #checkAllSearch\r\n            [indeterminate]=\"indeterminateSearchResult\" [checked]=\"isSelectAllResultSearch\" qms-group-options\r\n            color=\"default\" label=\"none\" class=\"checkbox-all\"\r\n            (click)=\"!config.isSelectOne && onSelectAllSearchResult(checkAllSearch.checked)\">\r\n            <span class=\"text-label header-title\">{{LANG.CHOOSE_ALL}}</span>\r\n            <span>(<b>{{resultSearch.length}}</b>)</span>\r\n          </mat-checkbox>\r\n        </div>\r\n        <div [@inOutAnimation] [@listAnimation]\r\n          [class.active-paging]=\"searchDepartment$.value.length > 10 && config.enablePagingSearch\" class=\"result\">\r\n          <div [qms-tool-tip]=\"!canHandleItemSearchResult(item) ? LANG.ITEM_NOT_MATCH_TO_TREE : ''\" mode=\"dark\"\r\n            position=\"top\" *ngFor=\"let item of resultSearch\"\r\n            (click)=\"$event.stopImmediatePropagation(); !item.disabled && onCheckItemSearchResult(item)\"\r\n            [ngClass]=\"{'active': checkListSelectionSearch.isSelected(item), 'no-checkbox': config.moveLocationMode}\"\r\n            class=\"result-item user-select-none\" matRipple>\r\n            <mat-checkbox [@inOutAnimation] *ngIf=\"!item.isLoading && !config.moveLocationMode\"\r\n              [disabled]=\"item.disabled\"\r\n              (click)=\"$event.stopImmediatePropagation(); !item.disabled && onCheckItemSearchResult(item)\"\r\n              [checked]=\"checkListSelectionSearch.isSelected(item)\" qms-group-options color=\"default\" label=\"none\">\r\n            </mat-checkbox>\r\n            <div *ngIf=\"item.isLoading\" [@inOutAnimation] class=\"position-relative\">\r\n              <ng-container *ngIf=\"item.isLoading; then loadingSpinner\"></ng-container>\r\n            </div>\r\n            <div class=\"result-item__content\">\r\n              <div class=\"item-result-content-wraper\">\r\n                <div class=\"text-gray fw-bold fs-base mb0\">{{item.name}}</div>\r\n                <qms-breadcrumb *ngIf=\"item.location?.length > 1\" [type]=\"config.isMobile ? 'mobile': ''\"\r\n                  [numDisplayItem]=\"6\" (onItemClick)=\"$event.stopImmediatePropagation()\" class=\"breadcrumb-container\"\r\n                  [nodes]=\"item.location\">\r\n                </qms-breadcrumb>\r\n                <div *ngIf=\"item.location?.length === 1\" class=\"d-flex align-items-center\">\r\n                  <span qms-elipsify mode=\"dark\" position=\"top\"\r\n                    class=\"item-breadcrumb-disable d-block\">{{item.location[0].name}}</span>\r\n                </div>\r\n              </div>\r\n              <div *ngIf=\"config.moveLocationMode\">\r\n                <button class=\"move-location-btn\" qms-btn-icon [matMenuTriggerFor]=\"menu\">\r\n                  <mat-icon>swap_vert</mat-icon>\r\n                </button>\r\n                <mat-menu class=\"move-location-menu\" #menu=\"matMenu\">\r\n                  <button (click)=\"setDestinationLocation(item, 'sibling')\" mat-menu-item>\r\n                    <span>{{LANG.PLACE_NEXT_TO}}</span>\r\n                  </button>\r\n                  <button (click)=\"setDestinationLocation(item, 'child')\" mat-menu-item>\r\n                    <span>{{LANG.PLACE_UNDER}}</span>\r\n                  </button>\r\n                </mat-menu>\r\n              </div>\r\n              <div *ngIf=\"config.modeView === MODE_VIEW_ENUM.ExternalView\" class=\"external-name\">\r\n                <span qms-elipsify mode=\"dark\" position=\"top\" class=\"text-gray fs-base mb0\">{{item.externalName}}\r\n                </span>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div [@inOutAnimation] *ngIf=\"!resultSearch.length && !getLoading$.value\" class=\"result no-result\">\r\n        <ng-container *ngTemplateOutlet=\"noResult\"></ng-container>\r\n      </div>\r\n      <mat-divider *ngIf=\"searchDepartment$.value.length > 10 && config.enablePagingSearch\"\r\n        class=\"mx-auto\"></mat-divider>\r\n      <qms-paginator #paginatorSearch *ngIf=\"searchDepartment$.value.length > 10 && config.enablePagingSearch \"\r\n        [length]=\"searchDepartment$.value.length\" [numHidden]=\"0\" [pageSize]=\"CURRENT_PAGESIZE\"\r\n        [pageSizeOptions]=\"PAGE_SIZE_OPTION\" (page)='onPagingSearchResult($event)'\r\n        [size]='config.isMobile ? PAGINATION_SIZE.small : PAGINATION_SIZE.medium'>\r\n      </qms-paginator>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Template for Checkbox -->\r\n  <ng-template #showCheckboxTemplate let-node=\"node\">\r\n    <mat-checkbox [id]=\"'node-'+node.id\" qms-group-options color=\"default\" label=\"none\" class=\"flex-direction-row\"\r\n      [disabled]=\"node.isLoading || node.disabled\" [checked]=\"checkListSelection.isSelected(node)\"\r\n      (click)=\"!node.isLoading && onCheckNode(node)\" [attr.disabled]=\"node.disabled || node.isLoading\">\r\n      <img [title]=\"node.itemIconSvg\" *ngIf=\"node.itemIconSvg\" class=\"material-icons type-icon\"\r\n        [src]=\"node.itemIconSvg\" />\r\n      <span *ngIf=\"node.itemIcon\" [class]=\"node.itemIcon\" [qmsTransformIcon]=\"node.itemIcon\"\r\n        class=\"material-icons-outlined type-icon\"></span>\r\n      <span *ngIf=\"node.itemMatIcon\" class=\"material-icons-outlined type-icon\">{{\r\n        node.itemMatIcon }}\r\n      </span>\r\n      <div class=\"node-text\" [ngStyle]=\"{\r\n        maxWidth: (maxWidthNode - 20*node.level)+ 'px'\r\n      }\">\r\n        <span qms-elipsify [mode]=\"'dark'\" position=\"top\" class=\"text-name cursor-pointer ml5 123\"\r\n          [ngClass]=\"{ disabled: node.disabled}\">{{ node.name}}\r\n        </span>\r\n      </div>\r\n    </mat-checkbox>\r\n  </ng-template>\r\n\r\n  <!-- Template node without checkbox -->\r\n  <ng-template #nodeWithoutCheckboxTemplate let-node=\"node\">\r\n    <div [id]=\"'node-'+node.id\" (click)=\"onCheckNode(node)\" class=\"node-without-checkbox\">\r\n      <div class=\"node-info\">\r\n        <span *ngIf=\"node.itemIcon\" [class]=\"node.itemIcon\" [qmsTransformIcon]=\"node.itemIcon\"\r\n          class=\"material-icons-outlined type-icon\"></span>\r\n        <span *ngIf=\"node.itemMatIcon\" class=\"material-icons-outlined type-icon\">{{\r\n          node.itemMatIcon }}\r\n        </span>\r\n        <span class=\"text-name cursor-pointer pl-10 123\" [ngClass]=\"{ disabled: node.disabled }\">{{ node.name }}</span>\r\n      </div>\r\n      <div class=\"node-state\">\r\n        <mat-icon [class.disabled]=\"(config.moveLocationMode && checkListSelection.isSelected(node))\"\r\n          *ngIf=\"checkListSelection.isSelected(node)\">check</mat-icon>\r\n        <button class=\"move-location-btn\" *ngIf=\"config.moveLocationMode && !checkListSelection.isSelected(node)\"\r\n          qms-btn-icon [matMenuTriggerFor]=\"menu\">\r\n          <mat-icon>swap_vert</mat-icon>\r\n        </button>\r\n        <mat-menu class=\"move-location-menu\" #menu=\"matMenu\">\r\n          <button (click)=\"moveToLocation(node, 'sibling')\" mat-menu-item>\r\n            <span>{{LANG.PLACE_NEXT_TO}}</span>\r\n          </button>\r\n          <button (click)=\"moveToLocation(node, 'child')\" mat-menu-item>\r\n            <span>{{LANG.PLACE_UNDER}}</span>\r\n          </button>\r\n        </mat-menu>\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n</div>\r\n\r\n<ng-template #noResult>\r\n  <svg width=\"89\" height=\"130\" viewBox=\"0 0 89 88\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n    <rect x=\"0.5\" width=\"88\" height=\"88\" rx=\"44\" fill=\"white\" />\r\n    <rect x=\"0.5\" width=\"88\" height=\"88\" rx=\"44\" fill=\"#0163B2\" fill-opacity=\"0.12\" />\r\n    <path\r\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\"\r\n      fill=\"#0163B3\" />\r\n    <text x=\"10\" y=\"105\" fill=\"#0163B2\">{{LANG.NO_RESULT}}</text>\r\n  </svg>\r\n</ng-template>\r\n\r\n<!-- Template loading -->\r\n<ng-template #loading>\r\n  <div [ngStyle]=\"{\r\n    'height': searchDepartment$.value.length ? (config.modeView === MODE_VIEW_ENUM.ExternalView ? 'calc(100% - 90px)' : 'calc(100% - 50px)' ) : height\r\n  }\" class=\"qms-loading-container\">\r\n    <div class=\"qms-loader\" *ngFor=\"let item of arrSkeleton\">\r\n      <div class=\"qms-loader__wrapper\">\r\n        <div class=\"row-loader\">\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- Template mask overlay -->\r\n<ng-template #maskOverlay>\r\n  <div class=\"mask-overlay\">\r\n    <mat-spinner [diameter]=\"50\" [strokeWidth]=\"5\" color=\"primary\"></mat-spinner>\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- Loading spinner -->\r\n<ng-template #loadingSpinner>\r\n  <div class=\"qms-spinner center\">\r\n    <mat-spinner [diameter]=\"20\" [strokeWidth]=\"2\"></mat-spinner>\r\n  </div>\r\n</ng-template>", styles: ["@font-face{font-family:icomoon;src:url(/assets/fonts/icomoon.eot?aghldx);src:url(/assets/fonts/icomoon.eot?aghldx#iefix) format(\"embedded-opentype\"),url(/assets/fonts/icomoon.ttf?aghldx) format(\"truetype\"),url(/assets/fonts/icomoon.woff?aghldx) format(\"woff\"),url(/assets/fonts/icomoon.svg?aghldx#icomoon) format(\"svg\");font-weight:400;font-style:normal;font-display:block}[class^=icon-],[class*=\" icon-\"]{font-family:icomoon!important;speak:never;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-acutely-toxic .path1:before{content:\"\\e91b\";color:#e32730}.icon-acutely-toxic .path2:before{content:\"\\e922\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path3:before{content:\"\\e923\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path4:before{content:\"\\e924\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path5:before{content:\"\\e925\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path6:before{content:\"\\e926\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path7:before{content:\"\\e927\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path8:before{content:\"\\e928\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path9:before{content:\"\\e929\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path10:before{content:\"\\e92a\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path11:before{content:\"\\e92b\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path12:before{content:\"\\e92c\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path13:before{content:\"\\e92d\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path14:before{content:\"\\e92e\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path15:before{content:\"\\e92f\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path16:before{content:\"\\e930\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path17:before{content:\"\\e931\";margin-left:-1em;color:#323232}.icon-add-column:before{content:\"\\e932\"}.icon-add-tooltip:before{content:\"\\e933\"}.icon-admin:before{content:\"\\e934\"}.icon-annual-cycle:before{content:\"\\e935\"}.icon-assignment-repete:before{content:\"\\e936\"}.icon-barrier-add:before{content:\"\\e937\"}.icon-barrier-edit:before{content:\"\\e938\"}.icon-barrier-view:before{content:\"\\e939\"}.icon-button-group:before{content:\"\\e93a\"}.icon-chemical-manager:before{content:\"\\e93b\"}.icon-chronic-health-hazard .path1:before{content:\"\\e93c\";color:#e32730}.icon-chronic-health-hazard .path2:before{content:\"\\e93d\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path3:before{content:\"\\e93e\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path4:before{content:\"\\e93f\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path5:before{content:\"\\e940\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path6:before{content:\"\\e941\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path7:before{content:\"\\e942\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path8:before{content:\"\\e943\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path9:before{content:\"\\e944\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path10:before{content:\"\\e945\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path11:before{content:\"\\e946\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path12:before{content:\"\\e947\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path13:before{content:\"\\e948\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path14:before{content:\"\\e949\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path15:before{content:\"\\e94a\";margin-left:-1em;color:#323232}.icon-contingency:before{content:\"\\e94b\"}.icon-corrosive .path1:before{content:\"\\e94c\";color:#323232}.icon-corrosive .path2:before{content:\"\\e94d\";margin-left:-1em;color:#323232}.icon-corrosive .path3:before{content:\"\\e94e\";margin-left:-1em;color:#323232}.icon-corrosive .path4:before{content:\"\\e94f\";margin-left:-1em;color:#323232}.icon-corrosive .path5:before{content:\"\\e950\";margin-left:-1em;color:#323232}.icon-corrosive .path6:before{content:\"\\e951\";margin-left:-1em;color:#323232}.icon-corrosive .path7:before{content:\"\\e952\";margin-left:-1em;color:#323232}.icon-corrosive .path8:before{content:\"\\e953\";margin-left:-1em;color:#323232}.icon-corrosive .path9:before{content:\"\\e954\";margin-left:-1em;color:#323232}.icon-corrosive .path10:before{content:\"\\e955\";margin-left:-1em;color:#323232}.icon-corrosive .path11:before{content:\"\\e956\";margin-left:-1em;color:#323232}.icon-corrosive .path12:before{content:\"\\e957\";margin-left:-1em;color:#323232}.icon-corrosive .path13:before{content:\"\\e958\";margin-left:-1em;color:#323232}.icon-corrosive .path14:before{content:\"\\e959\";margin-left:-1em;color:#323232}.icon-corrosive .path15:before{content:\"\\e95a\";margin-left:-1em;color:#323232}.icon-corrosive .path16:before{content:\"\\e95b\";margin-left:-1em;color:#323232}.icon-corrosive .path17:before{content:\"\\e95c\";margin-left:-1em;color:#323232}.icon-corrosive .path18:before{content:\"\\e95d\";margin-left:-1em;color:#323232}.icon-corrosive .path19:before{content:\"\\e95e\";margin-left:-1em;color:#323232}.icon-corrosive .path20:before{content:\"\\e95f\";margin-left:-1em;color:#323232}.icon-corrosive .path21:before{content:\"\\e960\";margin-left:-1em;color:#e32730}.icon-dashboard:before{content:\"\\e961\"}.icon-database-sds:before{content:\"\\e962\"}.icon-description-add:before{content:\"\\e963\"}.icon-description-edit:before{content:\"\\e964\"}.icon-description-view:before{content:\"\\e965\";color:#666}.icon-document-read .path1:before{content:\"\\e966\";color:#000;opacity:.6}.icon-document-read .path2:before{content:\"\\e967\";margin-left:-1em;color:#fff}.icon-document-read .path3:before{content:\"\\e968\";margin-left:-1em;color:#000;opacity:.6}.icon-draft:before{content:\"\\e969\"}.icon-expired-off:before{content:\"\\e96a\"}.icon-expired-on:before{content:\"\\e96b\"}.icon-explosive .path1:before{content:\"\\e96c\";color:#e32730}.icon-explosive .path2:before{content:\"\\e96d\";margin-left:-1em;color:#323232}.icon-explosive .path3:before{content:\"\\e96e\";margin-left:-1em;color:#323232}.icon-explosive .path4:before{content:\"\\e96f\";margin-left:-1em;color:#323232}.icon-explosive .path5:before{content:\"\\e970\";margin-left:-1em;color:#323232}.icon-explosive .path6:before{content:\"\\e971\";margin-left:-1em;color:#323232}.icon-explosive .path7:before{content:\"\\e972\";margin-left:-1em;color:#323232}.icon-explosive .path8:before{content:\"\\e973\";margin-left:-1em;color:#323232}.icon-explosive .path9:before{content:\"\\e974\";margin-left:-1em;color:#323232}.icon-explosive .path10:before{content:\"\\e975\";margin-left:-1em;color:#323232}.icon-explosive .path11:before{content:\"\\e976\";margin-left:-1em;color:#323232}.icon-explosive .path12:before{content:\"\\e977\";margin-left:-1em;color:#323232}.icon-explosive .path13:before{content:\"\\e978\";margin-left:-1em;color:#323232}.icon-explosive .path14:before{content:\"\\e979\";margin-left:-1em;color:#323232}.icon-explosive .path15:before{content:\"\\e97a\";margin-left:-1em;color:#323232}.icon-explosive .path16:before{content:\"\\e97b\";margin-left:-1em;color:#323232}.icon-explosive .path17:before{content:\"\\e97c\";margin-left:-1em;color:#323232}.icon-explosive .path18:before{content:\"\\e97d\";margin-left:-1em;color:#323232}.icon-explosive .path19:before{content:\"\\e97e\";margin-left:-1em;color:#323232}.icon-explosive .path20:before{content:\"\\e97f\";margin-left:-1em;color:#323232}.icon-explosive .path21:before{content:\"\\e980\";margin-left:-1em;color:#323232}.icon-explosive .path22:before{content:\"\\e981\";margin-left:-1em;color:#323232}.icon-explosive .path23:before{content:\"\\e982\";margin-left:-1em;color:#323232}.icon-explosive .path24:before{content:\"\\e983\";margin-left:-1em;color:#323232}.icon-explosive .path25:before{content:\"\\e984\";margin-left:-1em;color:#323232}.icon-explosive .path26:before{content:\"\\e985\";margin-left:-1em;color:#323232}.icon-explosive .path27:before{content:\"\\e986\";margin-left:-1em;color:#323232}.icon-explosive .path28:before{content:\"\\e987\";margin-left:-1em;color:#323232}.icon-explosive .path29:before{content:\"\\e988\";margin-left:-1em;color:#323232}.icon-explosive .path30:before{content:\"\\e989\";margin-left:-1em;color:#323232}.icon-explosive .path31:before{content:\"\\e98a\";margin-left:-1em;color:#323232}.icon-explosive .path32:before{content:\"\\e98b\";margin-left:-1em;color:#323232}.icon-explosive .path33:before{content:\"\\e98c\";margin-left:-1em;color:#323232}.icon-explosive .path34:before{content:\"\\e98d\";margin-left:-1em;color:#323232}.icon-explosive .path35:before{content:\"\\e98e\";margin-left:-1em;color:#323232}.icon-explosive .path36:before{content:\"\\e98f\";margin-left:-1em;color:#323232}.icon-explosive .path37:before{content:\"\\e990\";margin-left:-1em;color:#323232}.icon-explosive .path38:before{content:\"\\e991\";margin-left:-1em;color:#323232}.icon-explosive .path39:before{content:\"\\e992\";margin-left:-1em;color:#323232}.icon-explosive .path40:before{content:\"\\e993\";margin-left:-1em;color:#323232}.icon-explosive .path41:before{content:\"\\e994\";margin-left:-1em;color:#323232}.icon-explosive .path42:before{content:\"\\e995\";margin-left:-1em;color:#323232}.icon-explosive .path43:before{content:\"\\e996\";margin-left:-1em;color:#323232}.icon-explosive .path44:before{content:\"\\e997\";margin-left:-1em;color:#323232}.icon-explosive .path45:before{content:\"\\e998\";margin-left:-1em;color:#323232}.icon-explosive .path46:before{content:\"\\e999\";margin-left:-1em;color:#323232}.icon-file-excel:before{content:\"\\e99a\"}.icon-file-pdf:before{content:\"\\e99b\"}.icon-file-pdf-verified .path1:before{content:\"\\e99c\";color:#000;opacity:.6}.icon-file-pdf-verified .path2:before{content:\"\\e99d\";margin-left:-1em;color:#fff}.icon-file-pdf-verified .path3:before{content:\"\\e99e\";margin-left:-1em;color:#000;opacity:.6}.icon-file-word:before{content:\"\\e99f\"}.icon-filter-alt:before{content:\"\\e9a0\"}.icon-flammable .path1:before{content:\"\\e9a1\";color:#323232}.icon-flammable .path2:before{content:\"\\e9a2\";margin-left:-1em;color:#323232}.icon-flammable .path3:before{content:\"\\e9a3\";margin-left:-1em;color:#e32730}.icon-gas-under-pressure .path1:before{content:\"\\e9a4\";color:#323232}.icon-gas-under-pressure .path2:before{content:\"\\e9a5\";margin-left:-1em;color:#e32730}.icon-health-hazard .path1:before{content:\"\\e9a6\";color:#323232}.icon-health-hazard .path2:before{content:\"\\e9a7\";margin-left:-1em;color:#e32730}.icon-line-break:before{content:\"\\e9a8\"}.icon-location:before{content:\"\\e9a9\"}.icon-measure-add:before{content:\"\\e9aa\"}.icon-measure-edit:before{content:\"\\e9ab\"}.icon-measure-view:before{content:\"\\e9ac\";color:#666}.icon-messages:before{content:\"\\e9ad\"}.icon-monitoring:before{content:\"\\e9ae\";color:#666}.icon-move:before{content:\"\\e9af\"}.icon-oxidizing .path1:before{content:\"\\e9b0\";color:#e32730}.icon-oxidizing .path2:before{content:\"\\e9b1\";margin-left:-1em;color:#323232}.icon-oxidizing .path3:before{content:\"\\e9b2\";margin-left:-1em;color:#323232}.icon-oxidizing .path4:before{content:\"\\e9b3\";margin-left:-1em;color:#323232}.icon-process-area-closed:before{content:\"\\e9b4\"}.icon-process-area-open:before{content:\"\\e9b5\"}.icon-process-linked .path1:before{content:\"\\e9b6\";color:#000;opacity:.6}.icon-process-linked .path2:before{content:\"\\e9b7\";margin-left:-1em;color:#666}.icon-risk:before{content:\"\\e9b8\"}.icon-search-in-file:before{content:\"\\e9b9\"}.icon-sort-ascending:before{content:\"\\e9ba\"}.icon-sort-descending:before{content:\"\\e9bb\"}.icon-subscript:before{content:\"\\e9bc\"}.icon-superscript:before{content:\"\\e9bd\"}.icon-syncronice-favorites:before{content:\"\\e9be\"}.icon-system-settings:before{content:\"\\e9bf\"}.icon-view-three-outlined:before{content:\"\\e9c0\"}.icon-workplace-safety:before{content:\"\\e9c1\"}.icon-checklist:before{content:\"\\e900\"}.icon-department-document .path1:before{content:\"\\e901\";color:#000;opacity:.6}.icon-department-document .path2:before{content:\"\\e902\";margin-left:-1em;color:#00804c}.icon-department-folder-closed .path1:before{content:\"\\e903\";color:#000;opacity:.6}.icon-department-folder-closed .path2:before{content:\"\\e904\";margin-left:-1em;color:#00804c}.icon-department-folder-open .path1:before{content:\"\\e905\";color:#000;opacity:.6}.icon-department-folder-open .path2:before{content:\"\\e906\";margin-left:-1em;color:#00804c}.icon-deviation:before{content:\"\\e907\"}.icon-dropdown-folder .path1:before{content:\"\\e908\";color:#00324e}.icon-dropdown-folder .path2:before{content:\"\\e909\";margin-left:-1em;color:#fff;opacity:.6}.icon-enterprise-document .path1:before{content:\"\\e90a\";color:#000;opacity:.6}.icon-enterprise-document .path2:before{content:\"\\e90b\";margin-left:-1em;color:#cf4714}.icon-enterprise-folder-closed .path1:before{content:\"\\e90c\";color:#000;opacity:.6}.icon-enterprise-folder-closed .path2:before{content:\"\\e90d\";margin-left:-1em;color:#cf4714}.icon-enterprise-folder-open .path1:before{content:\"\\e90e\";color:#000;opacity:.6}.icon-enterprise-folder-open .path2:before{content:\"\\e90f\";margin-left:-1em;color:#cf4714}.icon-folder-closed:before{content:\"\\e910\"}.icon-folder-open:before{content:\"\\e911\"}.icon-keyboard_arrow_down:before{content:\"\\e912\"}.icon-keyboard_arrow_up:before{content:\"\\e913\"}.icon-local-document .path1:before{content:\"\\e914\";color:#000;opacity:.6}.icon-local-document .path2:before{content:\"\\e915\";margin-left:-1em;color:#1954a9}.icon-local-folder-closed .path1:before{content:\"\\e916\";color:#000;opacity:.6}.icon-local-folder-closed .path2:before{content:\"\\e917\";margin-left:-1em;color:#1954a9}.icon-local-folder-open .path1:before{content:\"\\e918\";color:#000;opacity:.6}.icon-local-folder-open .path2:before{content:\"\\e919\";margin-left:-1em;color:#1954a9}.icon-process:before{content:\"\\e91a\"}.icon-regional-document .path1:before{content:\"\\e91c\";color:#000;opacity:.6}.icon-regional-document .path2:before{content:\"\\e91d\";margin-left:-1em;color:#662e0d}.icon-regional-folder-closed .path1:before{content:\"\\e91e\";color:#000;opacity:.6}.icon-regional-folder-closed .path2:before{content:\"\\e91f\";margin-left:-1em;color:#662e0d}.icon-regional-folder-open .path1:before{content:\"\\e920\";color:#000;opacity:.6}.icon-regional-folder-open .path2:before{content:\"\\e921\";margin-left:-1em;color:#662e0d}.qms-select-department-tree-container{font-family:Open Sans,sans-serif}.qms-select-department-tree-container .mr10{margin-right:10px}.qms-select-department-tree-container .mt5{margin-bottom:5px}.qms-select-department-tree-container .mb5{margin-top:5px}.qms-select-department-tree-container .w100{width:100%}.qms-select-department-tree-container .h100{height:100%}.qms-select-department-tree-container .fw500{font-weight:500!important}.qms-select-department-tree-container .text-right{text-align:right}.qms-select-department-tree-container .mt20{margin-top:20px}.qms-select-department-tree-container .d-flex{display:flex}.qms-select-department-tree-container .align-items-center{align-items:center}.qms-select-department-tree-container .justify-content-end{justify-content:flex-end}.qms-select-department-tree-container .text-selected{color:#0009;font-size:12px;line-height:16px;margin-top:1rem}.qms-select-department-tree-container .input-field{display:flex;align-items:center;position:relative}.qms-select-department-tree-container .input-field ::ng-deep .mat-form-field-wrapper{padding-bottom:8px!important}.qms-select-department-tree-container .input-field ::ng-deep .mat-form-field-underline{bottom:8px!important}.qms-select-department-tree-container .input-field input.input-search{width:100%;padding:10px;outline:none;border:none;background:var(--background-input-text)}.qms-select-department-tree-container .input-field .btn-search{cursor:pointer;vertical-align:middle;position:absolute;top:50%;right:10px;transform:translateY(-50%)}.qms-select-department-tree-container .input-field .line__divider{border-bottom:1px solid #ccc;height:1px;margin-top:10px;min-width:300px;max-width:100%}.qms-select-department-tree-container .header-title{font-weight:500;color:var(--ws-text-primary);font-size:16px;display:flex;align-items:center}.qms-select-department-tree-container .header-title .header-view{padding:4px 0}.qms-select-department-tree-container .sticky-position{position:sticky;top:0;left:0;z-index:1;background:#fff}.qms-select-department-tree-container .header-view-tree{display:grid;grid-template-columns:1fr 200px;column-gap:2px;padding:4px 12px 4px 0}.qms-select-department-tree-container .header-view-tree .header-view:nth-child(1){padding-left:12px}.qms-select-department-tree-container .tree-department-wrapper{padding-right:4px;overflow:hidden;position:relative;transition:height .3s ease-in-out}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view{width:100%;display:grid;grid-template-columns:1fr 200px;column-gap:2px}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main>.separate{height:38px}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main>.separate.h-0{height:0}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main:last-child{height:100%;padding-left:4px;position:relative}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main:last-child:after{position:absolute;content:\"\";top:0;bottom:-38px;left:0;width:1px;background:#0000001f}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main .external-list-item-container .node-external{overflow:hidden;transition:all .1s ease-in-out}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main .external-list-item-container .node-external .node-external-content{padding:5px 15px;height:calc(100% - 2px);color:var(--default-color);font-size:14px;display:flex;align-items:center}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main .external-list-item-container .node-external .node-external-content span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.qms-select-department-tree-container .mask-overlay{z-index:1000;background-color:#2221211a;position:absolute;top:0;left:0;width:100%;height:100%;border-radius:4px;overflow:hidden;display:grid;place-items:center}.qms-select-department-tree-container .select-department-tree>.cdk-virtual-scroll-orientation-vertical .cdk-virtual-scroll-content-wrapper{padding:0 4px!important}.qms-select-department-tree-container .select-department-tree .qms-tree-node{display:flex;align-items:center;border-radius:4px}.qms-select-department-tree-container .select-department-tree .qms-tree-node:hover{background-color:#00000014}.qms-select-department-tree-container .select-department-tree .qms-tree-node>.node-expand-area{width:48px;height:48px;position:relative}.qms-select-department-tree-container .select-department-tree .qms-tree-node.active-external-view .mat-mdc-checkbox.qms-group-options{width:calc(100% - 250px)}.qms-select-department-tree-container .select-department-tree .qms-tree-node.node-loading{background:var(--primary-light-6-opacity)}.qms-select-department-tree-container .select-department-tree .qms-tree-node>.external-view-node{flex-basis:200px;overflow:hidden}.qms-select-department-tree-container .select-department-tree .qms-tree-node>.external-view-node .node-external{overflow:hidden;transition:all .1s ease-in-out;display:block}.qms-select-department-tree-container .select-department-tree .qms-tree-node>.external-view-node .node-external .node-external-content{padding:5px 15px;height:calc(100% - 2px);color:var(--default-color);font-size:14px;display:flex;align-items:center}.qms-select-department-tree-container .select-department-tree .qms-tree-node>.external-view-node .node-external .node-external-content span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.qms-select-department-tree-container .select-department-tree .qms-tree-node.expand-node{color:var(--primary)}.qms-select-department-tree-container .select-department-tree .qms-tree-node.expand-node:hover{background:var(--primary-light-6-opacity)}.qms-select-department-tree-container .select-department-tree .qms-tree-node.expand-node:active{background:var(--primary-light-12-opacity)}.qms-select-department-tree-container .select-department-tree .qms-tree-node.expand-node .mat-icon{color:var(--primary)}.qms-select-department-tree-container .select-department-tree .qms-tree-node .node-without-checkbox{cursor:pointer;width:100%;display:flex;justify-content:space-between;align-items:center}.qms-select-department-tree-container .select-department-tree .qms-tree-node .node-without-checkbox .mat-icon{color:var(--primary);margin-right:4px}.qms-select-department-tree-container .select-department-tree .qms-tree-node.selected-theme{background:var(--primary-light-12-opacity)}.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all{cursor:default!important;pointer-events:none;-webkit-user-select:none;user-select:none}.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all button.mat-button-disabled,.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all .mat-icon-rtl-mirror,.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all .type-icon{color:#00000061}.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all .text-name.disabled{color:#00000061;cursor:default!important;pointer-events:none;-webkit-user-select:none;user-select:none}.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all.active{background-color:transparent}.qms-select-department-tree-container .select-department-tree .qms-tree-node.move-location-mode:hover .move-location-btn,.qms-select-department-tree-container .select-department-tree .qms-tree-node.move-location-mode:active .move-location-btn{display:block}.qms-select-department-tree-container .text-name{position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;cursor:pointer;width:100%}.qms-select-department-tree-container .cursor-pointer{cursor:pointer}.qms-select-department-tree-container .ml5{margin-left:15px!important}.qms-select-department-tree-container .pl-10{padding-left:10px}.qms-select-department-tree-container ::ng-deep .mat-mdc-checkbox.qms-group-options.flex-direction-row .mat-checkbox-layout{white-space:normal}.qms-select-department-tree-container ::ng-deep .mat-mdc-checkbox.qms-group-options.flex-direction-row .node-text>span{display:block}.qms-select-department-tree-container ::ng-deep .mat-mdc-checkbox.qms-group-options.flex-direction-row .mat-checkbox-label{flex-direction:row;align-items:center;position:relative;padding-bottom:2px}.qms-select-department-tree-container .qms-view-search-result{width:100%;overflow:hidden}.qms-select-department-tree-container .qms-view-search-result__header{position:relative}.qms-select-department-tree-container .qms-view-search-result__header:after{position:absolute;content:\"\";bottom:0;left:0;width:100%;height:1px;background-color:#0000001a}.qms-select-department-tree-container .qms-view-search-result__header .header-title{padding:8px 0;display:inline-block}.qms-select-department-tree-container .qms-view-search-result__header .header-title:nth-child(1){padding-left:12px}.qms-select-department-tree-container .qms-view-search-result__header .header-title:nth-child(2){flex-basis:200px}.qms-select-department-tree-container .qms-view-search-result>.no-result{height:100%;display:flex;justify-content:center;align-items:center}.qms-select-department-tree-container .qms-view-search-result__wrapper{height:calc(100% - 50px);width:100%}.qms-select-department-tree-container .qms-view-search-result__wrapper.active-external{height:calc(100% - 90px)!important}.qms-select-department-tree-container .qms-view-search-result__wrapper .result{max-height:100%;overflow-y:auto;margin-bottom:4px;padding-right:4px}.qms-select-department-tree-container .qms-view-search-result__wrapper .result.active-paging{max-height:calc(100% - 40px)}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item{border-radius:4px;display:grid;grid-template-columns:45px 1fr;align-items:center;cursor:pointer;transition:background .3s ease;min-height:40px}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item:not(:nth-child(1)){margin-top:4px!important}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item:hover{background:linear-gradient(0deg,#0163b21f,#0163b21f),#fff}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item:hover .move-location-btn{display:block}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item.active{background:linear-gradient(0deg,#0163b21f,#0163b21f),#fff}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item.no-checkbox{grid-template-columns:1fr}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item__content{display:flex;align-items:center}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item__content .item-result-content-wraper{padding:5px 15px;width:100%}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item__content .external-name{flex-basis:200px}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item__content .external-name span{width:200px;display:inline-block}.qms-select-department-tree-container .qms-view-search-result ::ng-deep .mat-mdc-checkbox.qms-group-options{display:flex;height:100%}.qms-select-department-tree-container ::ng-deep .breadcrumb-container{flex-wrap:wrap}.qms-select-department-tree-container ::ng-deep .mat-button-focus-overlay{background-color:transparent}.qms-select-department-tree-container ::ng-deep .qms-breadcrumb-item{margin:0}.qms-select-department-tree-container ::ng-deep .qms-breadcrumb-item-text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;transition:color .3s ease}.qms-select-department-tree-container ::ng-deep .qms-breadcrumb-item-text:not(:last-child){max-width:150px!important}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-mdc-paginator-container .qms-total-result{margin-bottom:0;margin-right:12px;height:100%;display:flex;align-items:center}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-mdc-paginator-container .qms-total-result span{font-weight:600;color:#000c}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-mdc-paginator-container .qms-paginator-range-actions{margin-bottom:0;column-gap:2px}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-mdc-paginator-container .qms-paginator-range-actions>.qms-total-result{margin-bottom:0}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-form-field-wrapper{padding-bottom:0}.qms-select-department-tree-container ::ng-deep .qms-paginator .qms-paginator-page-size{align-items:center}.qms-select-department-tree-container .text-gray{color:#242424}.qms-select-department-tree-container .mb0{margin-bottom:0!important}.qms-select-department-tree-container .fs-base{font-size:14px!important}.qms-select-department-tree-container .user-select-none{-webkit-user-select:none;user-select:none}.qms-select-department-tree-container .item-breadcrumb-disable{cursor:not-allowed;color:#0009;font-weight:400;font-size:14px}.qms-select-department-tree-container ::ng-deep .mat-mdc-checkbox.checkbox-all .mat-checkbox-label{flex-direction:row;align-items:center;column-gap:4px}.qms-select-department-tree-container ::ng-deep .btn-arrow{width:40px;height:40px;line-height:40px}.qms-select-department-tree-container .qms-loading-container{overflow:hidden;display:grid;grid-template-rows:repeat(60px)}.qms-select-department-tree-container .qms-loading-container .qms-loader{position:relative;width:100%;height:100%;padding:10px 0;overflow:hidden}.qms-select-department-tree-container .qms-loading-container .qms-loader:after{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;background:linear-gradient(110deg,#e9e9e900,#e3e3e300 40%,#e3e3e380 50%,#e3e3e300 60% 100%);animation:animate-loading 1.2s linear infinite}.qms-select-department-tree-container .qms-loading-container .qms-loader__wrapper{position:relative;width:100%;height:100%}.qms-select-department-tree-container .qms-loading-container .qms-loader__wrapper .row-loader{background-color:#eee;position:absolute;left:0;width:100%;height:40px}@keyframes animate-loading{0%{transform:translate(-100%)}to{transform:translate(100%)}}.qms-select-department-tree-container .qms-spinner{font-size:20px;position:relative;display:inline-block;width:1em;height:1em}.qms-select-department-tree-container .qms-spinner.center{position:absolute;inset:0;margin:auto}.qms-select-department-tree-container ::ng-deep .mat-mdc-progress-spinner circle,.qms-select-department-tree-container .mat-mdc-progress-spinner circle{stroke:#1b75be!important}@media screen and (max-width: 600px){.qms-select-department-tree-container .external-view-node{flex-basis:65px!important}.qms-select-department-tree-container .qms-tree-node.active-external-view .mat-mdc-checkbox.qms-group-options{width:calc(100% - 110px)!important}.qms-select-department-tree-container .header-view-tree{grid-template-columns:1fr 80px!important}.qms-select-department-tree-container ::ng-deep .cdk-virtual-scroll-content-wrapper{right:0!important}.qms-select-department-tree-container .header-title{font-size:14px!important}.qms-select-department-tree-container .text-name,.qms-select-department-tree-container .node-external,.qms-select-department-tree-container .text-label,.qms-select-department-tree-container .text-label+span{font-size:12px}.qms-select-department-tree-container .node-expand-area{width:30px!important;height:30px!important}.qms-select-department-tree-container .node-expand-area .qms-btn-icon{width:30px;height:30px;line-height:30px}.qms-select-department-tree-container .fs-base{font-size:12px!important}.qms-select-department-tree-container .qms-select-department-tree-container .breadcrumb-container{flex-wrap:nowrap!important}.qms-select-department-tree-container ::ng-deep .qms-breadcrumb-item-text{font-size:12px!important;max-width:175px!important}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-mdc-paginator-container .qms-total-result{display:none!important}.qms-select-department-tree-container ::ng-deep .qms-paginator .size-small .mat-mdc-paginator-container{justify-content:center!important}.qms-select-department-tree-container .qms-view-search-result__header>.header-title:nth-child(2){flex-basis:120px!important}.qms-select-department-tree-container .result-item__content .external-name{flex-basis:75px!important}.qms-select-department-tree-container .result-item__content .external-name span{width:75px!important}}.qms-select-department-tree-container ::ng-deep .qms-paginator{margin-top:0}.move-location-btn{display:none;color:var(--primary)}::ng-deep .move-location-menu .mat-mdc-menu-item:hover{color:var(--primary)}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$3.DomSanitizer }, { type: QMSIconRegistryService }, { type: i4.MatIconRegistry }, { type: i0.ElementRef }, { type: TranslateLibraryService }, { type: i1$1.Overlay }, { type: i0.ViewContainerRef }, { type: QMSSelectDepartmentTreeGlobalService }], propDecorators: { rowsSkeleton: [{
                 type: Input
             }], height: [{
@@ -37621,7 +37621,7 @@ class SelectDepartmentComponent {
                     clickAction: 'noop'
                 }
             }
-        ], viewQueries: [{ propertyName: "treeDepartment", first: true, predicate: ["treeDepartment"], descendants: true }], ngImport: i0, template: "<h3 mat-dialog-title class=\"more-action\">\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</h3>\n<mat-dialog-content>\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        (isPushingChildNodes)=\"isPushingChildNodes($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 && !popupData.config.moveLocationMode\"\n    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-set 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            <button matChipRemove (click)=\"onRemoveNode(item)\"\n              *ngIf=\"!treeDepartment.isDisabledNode(item.id) && !isNodeLoading(item.id)\">\n              <mat-icon>cancel</mat-icon>\n            </button>\n          </mat-chip>\n        </div>\n      </mat-chip-set>\n    </div>\n  </div>\n</mat-dialog-content>\n<mat-dialog-actions align=\"end\">\n  <mat-divider *ngIf=\"treeDepartment && !!treeDepartment.resultSelected.length && !popupData.hidePanelResult\"\n    class=\"w-100 mb-3\"></mat-divider>\n  <button class=\"me-2\" qms-btn-text mat-dialog-close>\n    {{LANG.CANCEL}}\n  </button>\n  <button (click)=\"onCloseDialog()\" class=\"btn-add\"\n    [disabled]=\"(!treeDepartment.resultSelected.length && !popupData.config.canAddNullResult) || isPushing\"\n    [class.qms-btn-disabled]=\"(!treeDepartment.resultSelected.length && !popupData.config.canAddNullResult) || isPushing\"\n    qms-btn>\n    <span>{{LANG.ADD}}</span>\n    <span *ngIf=\"!popupData.config.moveLocationMode\">\n      ({{treeDepartment.resultSelected.length}})\n    </span>\n  </button>\n</mat-dialog-actions>\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\n<!-- \n<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          (isPushingChildNodes)=\"isPushingChildNodes($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 && !popupData.config.moveLocationMode\"\n      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-set 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              <button matChipRemove (click)=\"onRemoveNode(item)\"\n                *ngIf=\"!treeDepartment.isDisabledNode(item.id) && !isNodeLoading(item.id)\">\n                <mat-icon>cancel</mat-icon>\n              </button>\n            </mat-chip>\n          </div>\n        </mat-chip-set>\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\n      <button (click)=\"onCloseDialog()\" class=\"btn-add\"\n        [disabled]=\"(!treeDepartment.resultSelected.length && !popupData.config.canAddNullResult) || isPushing\"\n        [class.qms-btn-disabled]=\"(!treeDepartment.resultSelected.length && !popupData.config.canAddNullResult) || isPushing\"\n        qms-btn>\n        <span>{{LANG.ADD}}</span>\n        <span *ngIf=\"!popupData.config.moveLocationMode\">\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> -->", styles: ["@font-face{font-family:icomoon;src:url(/assets/fonts/icomoon.eot?aghldx);src:url(/assets/fonts/icomoon.eot?aghldx#iefix) format(\"embedded-opentype\"),url(/assets/fonts/icomoon.ttf?aghldx) format(\"truetype\"),url(/assets/fonts/icomoon.woff?aghldx) format(\"woff\"),url(/assets/fonts/icomoon.svg?aghldx#icomoon) format(\"svg\");font-weight:400;font-style:normal;font-display:block}[class^=icon-],[class*=\" icon-\"]{font-family:icomoon!important;speak:never;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-acutely-toxic .path1:before{content:\"\\e91b\";color:#e32730}.icon-acutely-toxic .path2:before{content:\"\\e922\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path3:before{content:\"\\e923\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path4:before{content:\"\\e924\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path5:before{content:\"\\e925\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path6:before{content:\"\\e926\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path7:before{content:\"\\e927\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path8:before{content:\"\\e928\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path9:before{content:\"\\e929\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path10:before{content:\"\\e92a\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path11:before{content:\"\\e92b\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path12:before{content:\"\\e92c\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path13:before{content:\"\\e92d\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path14:before{content:\"\\e92e\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path15:before{content:\"\\e92f\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path16:before{content:\"\\e930\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path17:before{content:\"\\e931\";margin-left:-1em;color:#323232}.icon-add-column:before{content:\"\\e932\"}.icon-add-tooltip:before{content:\"\\e933\"}.icon-admin:before{content:\"\\e934\"}.icon-annual-cycle:before{content:\"\\e935\"}.icon-assignment-repete:before{content:\"\\e936\"}.icon-barrier-add:before{content:\"\\e937\"}.icon-barrier-edit:before{content:\"\\e938\"}.icon-barrier-view:before{content:\"\\e939\"}.icon-button-group:before{content:\"\\e93a\"}.icon-chemical-manager:before{content:\"\\e93b\"}.icon-chronic-health-hazard .path1:before{content:\"\\e93c\";color:#e32730}.icon-chronic-health-hazard .path2:before{content:\"\\e93d\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path3:before{content:\"\\e93e\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path4:before{content:\"\\e93f\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path5:before{content:\"\\e940\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path6:before{content:\"\\e941\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path7:before{content:\"\\e942\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path8:before{content:\"\\e943\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path9:before{content:\"\\e944\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path10:before{content:\"\\e945\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path11:before{content:\"\\e946\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path12:before{content:\"\\e947\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path13:before{content:\"\\e948\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path14:before{content:\"\\e949\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path15:before{content:\"\\e94a\";margin-left:-1em;color:#323232}.icon-contingency:before{content:\"\\e94b\"}.icon-corrosive .path1:before{content:\"\\e94c\";color:#323232}.icon-corrosive .path2:before{content:\"\\e94d\";margin-left:-1em;color:#323232}.icon-corrosive .path3:before{content:\"\\e94e\";margin-left:-1em;color:#323232}.icon-corrosive .path4:before{content:\"\\e94f\";margin-left:-1em;color:#323232}.icon-corrosive .path5:before{content:\"\\e950\";margin-left:-1em;color:#323232}.icon-corrosive .path6:before{content:\"\\e951\";margin-left:-1em;color:#323232}.icon-corrosive .path7:before{content:\"\\e952\";margin-left:-1em;color:#323232}.icon-corrosive .path8:before{content:\"\\e953\";margin-left:-1em;color:#323232}.icon-corrosive .path9:before{content:\"\\e954\";margin-left:-1em;color:#323232}.icon-corrosive .path10:before{content:\"\\e955\";margin-left:-1em;color:#323232}.icon-corrosive .path11:before{content:\"\\e956\";margin-left:-1em;color:#323232}.icon-corrosive .path12:before{content:\"\\e957\";margin-left:-1em;color:#323232}.icon-corrosive .path13:before{content:\"\\e958\";margin-left:-1em;color:#323232}.icon-corrosive .path14:before{content:\"\\e959\";margin-left:-1em;color:#323232}.icon-corrosive .path15:before{content:\"\\e95a\";margin-left:-1em;color:#323232}.icon-corrosive .path16:before{content:\"\\e95b\";margin-left:-1em;color:#323232}.icon-corrosive .path17:before{content:\"\\e95c\";margin-left:-1em;color:#323232}.icon-corrosive .path18:before{content:\"\\e95d\";margin-left:-1em;color:#323232}.icon-corrosive .path19:before{content:\"\\e95e\";margin-left:-1em;color:#323232}.icon-corrosive .path20:before{content:\"\\e95f\";margin-left:-1em;color:#323232}.icon-corrosive .path21:before{content:\"\\e960\";margin-left:-1em;color:#e32730}.icon-dashboard:before{content:\"\\e961\"}.icon-database-sds:before{content:\"\\e962\"}.icon-description-add:before{content:\"\\e963\"}.icon-description-edit:before{content:\"\\e964\"}.icon-description-view:before{content:\"\\e965\";color:#666}.icon-document-read .path1:before{content:\"\\e966\";color:#000;opacity:.6}.icon-document-read .path2:before{content:\"\\e967\";margin-left:-1em;color:#fff}.icon-document-read .path3:before{content:\"\\e968\";margin-left:-1em;color:#000;opacity:.6}.icon-draft:before{content:\"\\e969\"}.icon-expired-off:before{content:\"\\e96a\"}.icon-expired-on:before{content:\"\\e96b\"}.icon-explosive .path1:before{content:\"\\e96c\";color:#e32730}.icon-explosive .path2:before{content:\"\\e96d\";margin-left:-1em;color:#323232}.icon-explosive .path3:before{content:\"\\e96e\";margin-left:-1em;color:#323232}.icon-explosive .path4:before{content:\"\\e96f\";margin-left:-1em;color:#323232}.icon-explosive .path5:before{content:\"\\e970\";margin-left:-1em;color:#323232}.icon-explosive .path6:before{content:\"\\e971\";margin-left:-1em;color:#323232}.icon-explosive .path7:before{content:\"\\e972\";margin-left:-1em;color:#323232}.icon-explosive .path8:before{content:\"\\e973\";margin-left:-1em;color:#323232}.icon-explosive .path9:before{content:\"\\e974\";margin-left:-1em;color:#323232}.icon-explosive .path10:before{content:\"\\e975\";margin-left:-1em;color:#323232}.icon-explosive .path11:before{content:\"\\e976\";margin-left:-1em;color:#323232}.icon-explosive .path12:before{content:\"\\e977\";margin-left:-1em;color:#323232}.icon-explosive .path13:before{content:\"\\e978\";margin-left:-1em;color:#323232}.icon-explosive .path14:before{content:\"\\e979\";margin-left:-1em;color:#323232}.icon-explosive .path15:before{content:\"\\e97a\";margin-left:-1em;color:#323232}.icon-explosive .path16:before{content:\"\\e97b\";margin-left:-1em;color:#323232}.icon-explosive .path17:before{content:\"\\e97c\";margin-left:-1em;color:#323232}.icon-explosive .path18:before{content:\"\\e97d\";margin-left:-1em;color:#323232}.icon-explosive .path19:before{content:\"\\e97e\";margin-left:-1em;color:#323232}.icon-explosive .path20:before{content:\"\\e97f\";margin-left:-1em;color:#323232}.icon-explosive .path21:before{content:\"\\e980\";margin-left:-1em;color:#323232}.icon-explosive .path22:before{content:\"\\e981\";margin-left:-1em;color:#323232}.icon-explosive .path23:before{content:\"\\e982\";margin-left:-1em;color:#323232}.icon-explosive .path24:before{content:\"\\e983\";margin-left:-1em;color:#323232}.icon-explosive .path25:before{content:\"\\e984\";margin-left:-1em;color:#323232}.icon-explosive .path26:before{content:\"\\e985\";margin-left:-1em;color:#323232}.icon-explosive .path27:before{content:\"\\e986\";margin-left:-1em;color:#323232}.icon-explosive .path28:before{content:\"\\e987\";margin-left:-1em;color:#323232}.icon-explosive .path29:before{content:\"\\e988\";margin-left:-1em;color:#323232}.icon-explosive .path30:before{content:\"\\e989\";margin-left:-1em;color:#323232}.icon-explosive .path31:before{content:\"\\e98a\";margin-left:-1em;color:#323232}.icon-explosive .path32:before{content:\"\\e98b\";margin-left:-1em;color:#323232}.icon-explosive .path33:before{content:\"\\e98c\";margin-left:-1em;color:#323232}.icon-explosive .path34:before{content:\"\\e98d\";margin-left:-1em;color:#323232}.icon-explosive .path35:before{content:\"\\e98e\";margin-left:-1em;color:#323232}.icon-explosive .path36:before{content:\"\\e98f\";margin-left:-1em;color:#323232}.icon-explosive .path37:before{content:\"\\e990\";margin-left:-1em;color:#323232}.icon-explosive .path38:before{content:\"\\e991\";margin-left:-1em;color:#323232}.icon-explosive .path39:before{content:\"\\e992\";margin-left:-1em;color:#323232}.icon-explosive .path40:before{content:\"\\e993\";margin-left:-1em;color:#323232}.icon-explosive .path41:before{content:\"\\e994\";margin-left:-1em;color:#323232}.icon-explosive .path42:before{content:\"\\e995\";margin-left:-1em;color:#323232}.icon-explosive .path43:before{content:\"\\e996\";margin-left:-1em;color:#323232}.icon-explosive .path44:before{content:\"\\e997\";margin-left:-1em;color:#323232}.icon-explosive .path45:before{content:\"\\e998\";margin-left:-1em;color:#323232}.icon-explosive .path46:before{content:\"\\e999\";margin-left:-1em;color:#323232}.icon-file-excel:before{content:\"\\e99a\"}.icon-file-pdf:before{content:\"\\e99b\"}.icon-file-pdf-verified .path1:before{content:\"\\e99c\";color:#000;opacity:.6}.icon-file-pdf-verified .path2:before{content:\"\\e99d\";margin-left:-1em;color:#fff}.icon-file-pdf-verified .path3:before{content:\"\\e99e\";margin-left:-1em;color:#000;opacity:.6}.icon-file-word:before{content:\"\\e99f\"}.icon-filter-alt:before{content:\"\\e9a0\"}.icon-flammable .path1:before{content:\"\\e9a1\";color:#323232}.icon-flammable .path2:before{content:\"\\e9a2\";margin-left:-1em;color:#323232}.icon-flammable .path3:before{content:\"\\e9a3\";margin-left:-1em;color:#e32730}.icon-gas-under-pressure .path1:before{content:\"\\e9a4\";color:#323232}.icon-gas-under-pressure .path2:before{content:\"\\e9a5\";margin-left:-1em;color:#e32730}.icon-health-hazard .path1:before{content:\"\\e9a6\";color:#323232}.icon-health-hazard .path2:before{content:\"\\e9a7\";margin-left:-1em;color:#e32730}.icon-line-break:before{content:\"\\e9a8\"}.icon-location:before{content:\"\\e9a9\"}.icon-measure-add:before{content:\"\\e9aa\"}.icon-measure-edit:before{content:\"\\e9ab\"}.icon-measure-view:before{content:\"\\e9ac\";color:#666}.icon-messages:before{content:\"\\e9ad\"}.icon-monitoring:before{content:\"\\e9ae\";color:#666}.icon-move:before{content:\"\\e9af\"}.icon-oxidizing .path1:before{content:\"\\e9b0\";color:#e32730}.icon-oxidizing .path2:before{content:\"\\e9b1\";margin-left:-1em;color:#323232}.icon-oxidizing .path3:before{content:\"\\e9b2\";margin-left:-1em;color:#323232}.icon-oxidizing .path4:before{content:\"\\e9b3\";margin-left:-1em;color:#323232}.icon-process-area-closed:before{content:\"\\e9b4\"}.icon-process-area-open:before{content:\"\\e9b5\"}.icon-process-linked .path1:before{content:\"\\e9b6\";color:#000;opacity:.6}.icon-process-linked .path2:before{content:\"\\e9b7\";margin-left:-1em;color:#666}.icon-risk:before{content:\"\\e9b8\"}.icon-search-in-file:before{content:\"\\e9b9\"}.icon-sort-ascending:before{content:\"\\e9ba\"}.icon-sort-descending:before{content:\"\\e9bb\"}.icon-subscript:before{content:\"\\e9bc\"}.icon-superscript:before{content:\"\\e9bd\"}.icon-syncronice-favorites:before{content:\"\\e9be\"}.icon-system-settings:before{content:\"\\e9bf\"}.icon-view-three-outlined:before{content:\"\\e9c0\"}.icon-workplace-safety:before{content:\"\\e9c1\"}.icon-checklist:before{content:\"\\e900\"}.icon-department-document .path1:before{content:\"\\e901\";color:#000;opacity:.6}.icon-department-document .path2:before{content:\"\\e902\";margin-left:-1em;color:#00804c}.icon-department-folder-closed .path1:before{content:\"\\e903\";color:#000;opacity:.6}.icon-department-folder-closed .path2:before{content:\"\\e904\";margin-left:-1em;color:#00804c}.icon-department-folder-open .path1:before{content:\"\\e905\";color:#000;opacity:.6}.icon-department-folder-open .path2:before{content:\"\\e906\";margin-left:-1em;color:#00804c}.icon-deviation:before{content:\"\\e907\"}.icon-dropdown-folder .path1:before{content:\"\\e908\";color:#00324e}.icon-dropdown-folder .path2:before{content:\"\\e909\";margin-left:-1em;color:#fff;opacity:.6}.icon-enterprise-document .path1:before{content:\"\\e90a\";color:#000;opacity:.6}.icon-enterprise-document .path2:before{content:\"\\e90b\";margin-left:-1em;color:#cf4714}.icon-enterprise-folder-closed .path1:before{content:\"\\e90c\";color:#000;opacity:.6}.icon-enterprise-folder-closed .path2:before{content:\"\\e90d\";margin-left:-1em;color:#cf4714}.icon-enterprise-folder-open .path1:before{content:\"\\e90e\";color:#000;opacity:.6}.icon-enterprise-folder-open .path2:before{content:\"\\e90f\";margin-left:-1em;color:#cf4714}.icon-folder-closed:before{content:\"\\e910\"}.icon-folder-open:before{content:\"\\e911\"}.icon-keyboard_arrow_down:before{content:\"\\e912\"}.icon-keyboard_arrow_up:before{content:\"\\e913\"}.icon-local-document .path1:before{content:\"\\e914\";color:#000;opacity:.6}.icon-local-document .path2:before{content:\"\\e915\";margin-left:-1em;color:#1954a9}.icon-local-folder-closed .path1:before{content:\"\\e916\";color:#000;opacity:.6}.icon-local-folder-closed .path2:before{content:\"\\e917\";margin-left:-1em;color:#1954a9}.icon-local-folder-open .path1:before{content:\"\\e918\";color:#000;opacity:.6}.icon-local-folder-open .path2:before{content:\"\\e919\";margin-left:-1em;color:#1954a9}.icon-process:before{content:\"\\e91a\"}.icon-regional-document .path1:before{content:\"\\e91c\";color:#000;opacity:.6}.icon-regional-document .path2:before{content:\"\\e91d\";margin-left:-1em;color:#662e0d}.icon-regional-folder-closed .path1:before{content:\"\\e91e\";color:#000;opacity:.6}.icon-regional-folder-closed .path2:before{content:\"\\e91f\";margin-left:-1em;color:#662e0d}.icon-regional-folder-open .path1:before{content:\"\\e920\";color:#000;opacity:.6}.icon-regional-folder-open .path2:before{content:\"\\e921\";margin-left:-1em;color:#662e0d}.cursor-pointer{cursor:pointer}.ml-5{margin-left:10px}.padding-5{padding:5px}.header-dialog{display:flex;justify-content:space-between;align-items:center;font-weight:600;font-size:16px}.input__field{display:flex;align-items:center;position:relative}.input__field input.input-search{width:100%;padding:10px;outline:none;border:none;background:var(--background-input-text)}.input__field .btn-search{cursor:pointer;vertical-align:middle;position:absolute;top:50%;right:10px;transform:translateY(-50%)}.line__divider{border-bottom:1px solid #ccc;height:1px;margin-top:10px;min-width:300px;max-width:100%}.mat-expansion-panel-header{height:30px;font-size:12px;letter-spacing:1px;font-family:Raleway;font-weight:600;padding:0}.mat-expansion-panel-header .mat-expansion-panel-header-title{align-items:center;margin-left:12px}.mat-expansion-panel:not([class*=mat-elevation-z]){box-shadow:none}.panel__item{max-height:175px;margin-top:4px;overflow-x:hidden;overflow-y:auto;padding-right:5px;width:100%;display:block}.panel__item .related__item__inline{max-width:100%}.panel__item ::ng-deep .mat-chip-list-wrapper{margin:0 -4px!important}.panel__item .select__toggle-include{width:100%}.panel__item .select__toggle-include.toggle-include-child .mat-mdc-slide-toggle.qms-group-options .mat-slide-toggle-thumb{background-color:#5a5a5a!important}.panel__item .related__item__content{height:32px;line-height:32px;background-color:var(--related-item-background);max-width:100%;margin-bottom:5px;margin-left:2.5px;margin-right:2.5px}.panel__item .related__item__content .mat-icon{color:var(--related-mat-icon-color);font-size:24px}.header-title{font-weight:600;color:#000000de}.result-content{padding-right:0!important}.result-content .mat-chip-list{min-height:40px}.result-content .mat-chip-list .mat-icon{color:#0000004d!important;cursor:pointer}.result-content .mat-chip-list .mat-icon:hover{color:#000!important}.result-content span.related__item__content_name{min-width:calc(100% - 13px);max-width:250px;display:flex;align-items:center}.result-content span.related__item__content_name>span:nth-child(1){display:inline-block;margin-right:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}.result-content span.related__item__content_name .select__include-children__count{font-size:.75rem;color:#00000080;font-weight:600;line-height:16px}.text-name{position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;cursor:pointer;width:100%}::ng-deep .mat-mdc-checkbox.qms-group-options.flex-direction-row .mat-checkbox-layout{white-space:normal}::ng-deep .mat-mdc-checkbox.qms-group-options.flex-direction-row .mat-checkbox-label{flex-direction:row;align-items:center;position:relative;padding-bottom:2px}.confirm__button__groups .btn-add>.qms-btn-wrapper{display:flex;justify-content:center;align-items:center}::ng-deep .custom-department-tree .qms-view-search-result{height:100%!important}::ng-deep .custom-department-tree .qms-view-search-result .result{max-height:calc(100% - 80px)!important}::ng-deep .custom-department-tree .loading-container{height:calc(100% - 40px)!important}::ng-deep .btn-close-dialog.qms-btn-icon:focus:not(:hover){background-color:unset!important;color:unset!important}.qms-spinner-wrapper{display:inline-block;width:22px;height:22px}.qms-spinner-wrapper .qms-spinner{font-size:20px;width:1em;height:1em;position:absolute;right:5px;top:50%;transform:translateY(-50%)}.qms-spinner-wrapper .qms-spinner .mat-mdc-progress-spinner circle{stroke:#1b75be!important}@media screen and (max-width: 600px){::ng-deep .cdk-global-overlay-wrapper{justify-content:center!important;width:100vw}.header-title{font-size:14px}.related__item__content_name{font-size:12px!important}}\n"], dependencies: [{ kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: QMSInputChipDirective, selector: "mat-chip[qms-chip]", inputs: ["selected"] }, { kind: "directive", type: QMSChipBodyDirective, selector: "[qms-chip-body]" }, { kind: "directive", type: QMSToolTipRendererDirective, selector: "[qms-tool-tip]", inputs: ["showToolTip", "mode", "qms-tool-tip", "contentTemplate", "position"] }, { kind: "directive", type: QMSContentChangesDirective, selector: "[qmsContentChanges]", inputs: ["qmsContentChanges"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1$2.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: QMSButton, selector: "button[qms-btn], button[qms-btn-lg], button[qms-btn-outlined],\n               button[qms-btn-outlined-lg], button[qms-btn-text], button[qms-btn-text-lg],\n               button[qms-btn-fab],button[qms-btn-fab-sm],button[qms-btn-fab-ext],\n               button[qms-btn-fab-outlined],button[qms-btn-fab-outlined-sm],button[qms-btn-fab-outlined-ext]", inputs: ["disabled", "color"], exportAs: ["qmsButton"] }, { kind: "component", type: QMSButtonIcon, selector: "button[qms-btn-icon]", inputs: ["disabled", "color", "active"], exportAs: ["qmsButtonIcon"] }, { kind: "component", type: i16.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i11$2.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled", "tabIndex"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: i11$2.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i11$2.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "component", type: SelectDepartmentTreeComponent, selector: "qms-select-department-tree", inputs: ["rowsSkeleton", "height", "config", "maxWidthNode"], outputs: ["onSearchEvent", "onPagingSearchEvent", "onValueChangeEvent", "selectionNodeChangeEvent", "onCheckNodeEvent", "onExpandNodeEvent", "onLoadMoreEvent", "onCheckItemSearchEvent", "onCheckAllItemSearchEvent", "toggleIncludeChildEvent", "isPushingChildNodes"] }, { kind: "component", type: i23.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }], animations: [SelectDepartmentAnimationTrigger] }); }
+        ], viewQueries: [{ propertyName: "treeDepartment", first: true, predicate: ["treeDepartment"], descendants: true }], ngImport: i0, template: "<h3 mat-dialog-title class=\"more-action\">\n  {{popupData.headerName}}\n  <button matDialogClose class=\"close-btn\" color=\"light\" qms-btn-icon>\n    <mat-icon>close</mat-icon>\n  </button>\n</h3>\n<mat-dialog-content>\n  <div class=\"qms-scrollbar\">\n    <div>\n      <qms-select-department-tree #treeDepartment customClass=\"custom-department-tree\"\n        [height]=\"popupData.config.isMobile ? '38vh' : '34vh'\" [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        (isPushingChildNodes)=\"isPushingChildNodes($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 && !popupData.config.moveLocationMode\"\n    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-set class=\"panel__item qms-scrollbar\">\n        <ng-container *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            <button matChipRemove (click)=\"onRemoveNode(item)\"\n              *ngIf=\"!treeDepartment.isDisabledNode(item.id) && !isNodeLoading(item.id)\">\n              <mat-icon>cancel</mat-icon>\n            </button>\n          </mat-chip>\n        </ng-container>\n      </mat-chip-set>\n    </div>\n  </div>\n</mat-dialog-content>\n<mat-dialog-actions align=\"end\">\n  <mat-divider *ngIf=\"treeDepartment && !!treeDepartment.resultSelected.length && !popupData.hidePanelResult\"\n    class=\"w-100 mb-3\"></mat-divider>\n  <button class=\"me-2\" qms-btn-text mat-dialog-close>\n    {{LANG.CANCEL}}\n  </button>\n  <button (click)=\"onCloseDialog()\" class=\"btn-add\"\n    [disabled]=\"(!treeDepartment.resultSelected.length && !popupData.config.canAddNullResult) || isPushing\"\n    [class.qms-btn-disabled]=\"(!treeDepartment.resultSelected.length && !popupData.config.canAddNullResult) || isPushing\"\n    qms-btn>\n    <span>{{LANG.ADD}}</span>\n    <span *ngIf=\"!popupData.config.moveLocationMode\">\n      ({{treeDepartment.resultSelected.length}})\n    </span>\n  </button>\n</mat-dialog-actions>\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>", styles: ["@font-face{font-family:icomoon;src:url(/assets/fonts/icomoon.eot?aghldx);src:url(/assets/fonts/icomoon.eot?aghldx#iefix) format(\"embedded-opentype\"),url(/assets/fonts/icomoon.ttf?aghldx) format(\"truetype\"),url(/assets/fonts/icomoon.woff?aghldx) format(\"woff\"),url(/assets/fonts/icomoon.svg?aghldx#icomoon) format(\"svg\");font-weight:400;font-style:normal;font-display:block}[class^=icon-],[class*=\" icon-\"]{font-family:icomoon!important;speak:never;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-acutely-toxic .path1:before{content:\"\\e91b\";color:#e32730}.icon-acutely-toxic .path2:before{content:\"\\e922\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path3:before{content:\"\\e923\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path4:before{content:\"\\e924\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path5:before{content:\"\\e925\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path6:before{content:\"\\e926\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path7:before{content:\"\\e927\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path8:before{content:\"\\e928\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path9:before{content:\"\\e929\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path10:before{content:\"\\e92a\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path11:before{content:\"\\e92b\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path12:before{content:\"\\e92c\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path13:before{content:\"\\e92d\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path14:before{content:\"\\e92e\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path15:before{content:\"\\e92f\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path16:before{content:\"\\e930\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path17:before{content:\"\\e931\";margin-left:-1em;color:#323232}.icon-add-column:before{content:\"\\e932\"}.icon-add-tooltip:before{content:\"\\e933\"}.icon-admin:before{content:\"\\e934\"}.icon-annual-cycle:before{content:\"\\e935\"}.icon-assignment-repete:before{content:\"\\e936\"}.icon-barrier-add:before{content:\"\\e937\"}.icon-barrier-edit:before{content:\"\\e938\"}.icon-barrier-view:before{content:\"\\e939\"}.icon-button-group:before{content:\"\\e93a\"}.icon-chemical-manager:before{content:\"\\e93b\"}.icon-chronic-health-hazard .path1:before{content:\"\\e93c\";color:#e32730}.icon-chronic-health-hazard .path2:before{content:\"\\e93d\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path3:before{content:\"\\e93e\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path4:before{content:\"\\e93f\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path5:before{content:\"\\e940\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path6:before{content:\"\\e941\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path7:before{content:\"\\e942\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path8:before{content:\"\\e943\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path9:before{content:\"\\e944\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path10:before{content:\"\\e945\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path11:before{content:\"\\e946\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path12:before{content:\"\\e947\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path13:before{content:\"\\e948\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path14:before{content:\"\\e949\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path15:before{content:\"\\e94a\";margin-left:-1em;color:#323232}.icon-contingency:before{content:\"\\e94b\"}.icon-corrosive .path1:before{content:\"\\e94c\";color:#323232}.icon-corrosive .path2:before{content:\"\\e94d\";margin-left:-1em;color:#323232}.icon-corrosive .path3:before{content:\"\\e94e\";margin-left:-1em;color:#323232}.icon-corrosive .path4:before{content:\"\\e94f\";margin-left:-1em;color:#323232}.icon-corrosive .path5:before{content:\"\\e950\";margin-left:-1em;color:#323232}.icon-corrosive .path6:before{content:\"\\e951\";margin-left:-1em;color:#323232}.icon-corrosive .path7:before{content:\"\\e952\";margin-left:-1em;color:#323232}.icon-corrosive .path8:before{content:\"\\e953\";margin-left:-1em;color:#323232}.icon-corrosive .path9:before{content:\"\\e954\";margin-left:-1em;color:#323232}.icon-corrosive .path10:before{content:\"\\e955\";margin-left:-1em;color:#323232}.icon-corrosive .path11:before{content:\"\\e956\";margin-left:-1em;color:#323232}.icon-corrosive .path12:before{content:\"\\e957\";margin-left:-1em;color:#323232}.icon-corrosive .path13:before{content:\"\\e958\";margin-left:-1em;color:#323232}.icon-corrosive .path14:before{content:\"\\e959\";margin-left:-1em;color:#323232}.icon-corrosive .path15:before{content:\"\\e95a\";margin-left:-1em;color:#323232}.icon-corrosive .path16:before{content:\"\\e95b\";margin-left:-1em;color:#323232}.icon-corrosive .path17:before{content:\"\\e95c\";margin-left:-1em;color:#323232}.icon-corrosive .path18:before{content:\"\\e95d\";margin-left:-1em;color:#323232}.icon-corrosive .path19:before{content:\"\\e95e\";margin-left:-1em;color:#323232}.icon-corrosive .path20:before{content:\"\\e95f\";margin-left:-1em;color:#323232}.icon-corrosive .path21:before{content:\"\\e960\";margin-left:-1em;color:#e32730}.icon-dashboard:before{content:\"\\e961\"}.icon-database-sds:before{content:\"\\e962\"}.icon-description-add:before{content:\"\\e963\"}.icon-description-edit:before{content:\"\\e964\"}.icon-description-view:before{content:\"\\e965\";color:#666}.icon-document-read .path1:before{content:\"\\e966\";color:#000;opacity:.6}.icon-document-read .path2:before{content:\"\\e967\";margin-left:-1em;color:#fff}.icon-document-read .path3:before{content:\"\\e968\";margin-left:-1em;color:#000;opacity:.6}.icon-draft:before{content:\"\\e969\"}.icon-expired-off:before{content:\"\\e96a\"}.icon-expired-on:before{content:\"\\e96b\"}.icon-explosive .path1:before{content:\"\\e96c\";color:#e32730}.icon-explosive .path2:before{content:\"\\e96d\";margin-left:-1em;color:#323232}.icon-explosive .path3:before{content:\"\\e96e\";margin-left:-1em;color:#323232}.icon-explosive .path4:before{content:\"\\e96f\";margin-left:-1em;color:#323232}.icon-explosive .path5:before{content:\"\\e970\";margin-left:-1em;color:#323232}.icon-explosive .path6:before{content:\"\\e971\";margin-left:-1em;color:#323232}.icon-explosive .path7:before{content:\"\\e972\";margin-left:-1em;color:#323232}.icon-explosive .path8:before{content:\"\\e973\";margin-left:-1em;color:#323232}.icon-explosive .path9:before{content:\"\\e974\";margin-left:-1em;color:#323232}.icon-explosive .path10:before{content:\"\\e975\";margin-left:-1em;color:#323232}.icon-explosive .path11:before{content:\"\\e976\";margin-left:-1em;color:#323232}.icon-explosive .path12:before{content:\"\\e977\";margin-left:-1em;color:#323232}.icon-explosive .path13:before{content:\"\\e978\";margin-left:-1em;color:#323232}.icon-explosive .path14:before{content:\"\\e979\";margin-left:-1em;color:#323232}.icon-explosive .path15:before{content:\"\\e97a\";margin-left:-1em;color:#323232}.icon-explosive .path16:before{content:\"\\e97b\";margin-left:-1em;color:#323232}.icon-explosive .path17:before{content:\"\\e97c\";margin-left:-1em;color:#323232}.icon-explosive .path18:before{content:\"\\e97d\";margin-left:-1em;color:#323232}.icon-explosive .path19:before{content:\"\\e97e\";margin-left:-1em;color:#323232}.icon-explosive .path20:before{content:\"\\e97f\";margin-left:-1em;color:#323232}.icon-explosive .path21:before{content:\"\\e980\";margin-left:-1em;color:#323232}.icon-explosive .path22:before{content:\"\\e981\";margin-left:-1em;color:#323232}.icon-explosive .path23:before{content:\"\\e982\";margin-left:-1em;color:#323232}.icon-explosive .path24:before{content:\"\\e983\";margin-left:-1em;color:#323232}.icon-explosive .path25:before{content:\"\\e984\";margin-left:-1em;color:#323232}.icon-explosive .path26:before{content:\"\\e985\";margin-left:-1em;color:#323232}.icon-explosive .path27:before{content:\"\\e986\";margin-left:-1em;color:#323232}.icon-explosive .path28:before{content:\"\\e987\";margin-left:-1em;color:#323232}.icon-explosive .path29:before{content:\"\\e988\";margin-left:-1em;color:#323232}.icon-explosive .path30:before{content:\"\\e989\";margin-left:-1em;color:#323232}.icon-explosive .path31:before{content:\"\\e98a\";margin-left:-1em;color:#323232}.icon-explosive .path32:before{content:\"\\e98b\";margin-left:-1em;color:#323232}.icon-explosive .path33:before{content:\"\\e98c\";margin-left:-1em;color:#323232}.icon-explosive .path34:before{content:\"\\e98d\";margin-left:-1em;color:#323232}.icon-explosive .path35:before{content:\"\\e98e\";margin-left:-1em;color:#323232}.icon-explosive .path36:before{content:\"\\e98f\";margin-left:-1em;color:#323232}.icon-explosive .path37:before{content:\"\\e990\";margin-left:-1em;color:#323232}.icon-explosive .path38:before{content:\"\\e991\";margin-left:-1em;color:#323232}.icon-explosive .path39:before{content:\"\\e992\";margin-left:-1em;color:#323232}.icon-explosive .path40:before{content:\"\\e993\";margin-left:-1em;color:#323232}.icon-explosive .path41:before{content:\"\\e994\";margin-left:-1em;color:#323232}.icon-explosive .path42:before{content:\"\\e995\";margin-left:-1em;color:#323232}.icon-explosive .path43:before{content:\"\\e996\";margin-left:-1em;color:#323232}.icon-explosive .path44:before{content:\"\\e997\";margin-left:-1em;color:#323232}.icon-explosive .path45:before{content:\"\\e998\";margin-left:-1em;color:#323232}.icon-explosive .path46:before{content:\"\\e999\";margin-left:-1em;color:#323232}.icon-file-excel:before{content:\"\\e99a\"}.icon-file-pdf:before{content:\"\\e99b\"}.icon-file-pdf-verified .path1:before{content:\"\\e99c\";color:#000;opacity:.6}.icon-file-pdf-verified .path2:before{content:\"\\e99d\";margin-left:-1em;color:#fff}.icon-file-pdf-verified .path3:before{content:\"\\e99e\";margin-left:-1em;color:#000;opacity:.6}.icon-file-word:before{content:\"\\e99f\"}.icon-filter-alt:before{content:\"\\e9a0\"}.icon-flammable .path1:before{content:\"\\e9a1\";color:#323232}.icon-flammable .path2:before{content:\"\\e9a2\";margin-left:-1em;color:#323232}.icon-flammable .path3:before{content:\"\\e9a3\";margin-left:-1em;color:#e32730}.icon-gas-under-pressure .path1:before{content:\"\\e9a4\";color:#323232}.icon-gas-under-pressure .path2:before{content:\"\\e9a5\";margin-left:-1em;color:#e32730}.icon-health-hazard .path1:before{content:\"\\e9a6\";color:#323232}.icon-health-hazard .path2:before{content:\"\\e9a7\";margin-left:-1em;color:#e32730}.icon-line-break:before{content:\"\\e9a8\"}.icon-location:before{content:\"\\e9a9\"}.icon-measure-add:before{content:\"\\e9aa\"}.icon-measure-edit:before{content:\"\\e9ab\"}.icon-measure-view:before{content:\"\\e9ac\";color:#666}.icon-messages:before{content:\"\\e9ad\"}.icon-monitoring:before{content:\"\\e9ae\";color:#666}.icon-move:before{content:\"\\e9af\"}.icon-oxidizing .path1:before{content:\"\\e9b0\";color:#e32730}.icon-oxidizing .path2:before{content:\"\\e9b1\";margin-left:-1em;color:#323232}.icon-oxidizing .path3:before{content:\"\\e9b2\";margin-left:-1em;color:#323232}.icon-oxidizing .path4:before{content:\"\\e9b3\";margin-left:-1em;color:#323232}.icon-process-area-closed:before{content:\"\\e9b4\"}.icon-process-area-open:before{content:\"\\e9b5\"}.icon-process-linked .path1:before{content:\"\\e9b6\";color:#000;opacity:.6}.icon-process-linked .path2:before{content:\"\\e9b7\";margin-left:-1em;color:#666}.icon-risk:before{content:\"\\e9b8\"}.icon-search-in-file:before{content:\"\\e9b9\"}.icon-sort-ascending:before{content:\"\\e9ba\"}.icon-sort-descending:before{content:\"\\e9bb\"}.icon-subscript:before{content:\"\\e9bc\"}.icon-superscript:before{content:\"\\e9bd\"}.icon-syncronice-favorites:before{content:\"\\e9be\"}.icon-system-settings:before{content:\"\\e9bf\"}.icon-view-three-outlined:before{content:\"\\e9c0\"}.icon-workplace-safety:before{content:\"\\e9c1\"}.icon-checklist:before{content:\"\\e900\"}.icon-department-document .path1:before{content:\"\\e901\";color:#000;opacity:.6}.icon-department-document .path2:before{content:\"\\e902\";margin-left:-1em;color:#00804c}.icon-department-folder-closed .path1:before{content:\"\\e903\";color:#000;opacity:.6}.icon-department-folder-closed .path2:before{content:\"\\e904\";margin-left:-1em;color:#00804c}.icon-department-folder-open .path1:before{content:\"\\e905\";color:#000;opacity:.6}.icon-department-folder-open .path2:before{content:\"\\e906\";margin-left:-1em;color:#00804c}.icon-deviation:before{content:\"\\e907\"}.icon-dropdown-folder .path1:before{content:\"\\e908\";color:#00324e}.icon-dropdown-folder .path2:before{content:\"\\e909\";margin-left:-1em;color:#fff;opacity:.6}.icon-enterprise-document .path1:before{content:\"\\e90a\";color:#000;opacity:.6}.icon-enterprise-document .path2:before{content:\"\\e90b\";margin-left:-1em;color:#cf4714}.icon-enterprise-folder-closed .path1:before{content:\"\\e90c\";color:#000;opacity:.6}.icon-enterprise-folder-closed .path2:before{content:\"\\e90d\";margin-left:-1em;color:#cf4714}.icon-enterprise-folder-open .path1:before{content:\"\\e90e\";color:#000;opacity:.6}.icon-enterprise-folder-open .path2:before{content:\"\\e90f\";margin-left:-1em;color:#cf4714}.icon-folder-closed:before{content:\"\\e910\"}.icon-folder-open:before{content:\"\\e911\"}.icon-keyboard_arrow_down:before{content:\"\\e912\"}.icon-keyboard_arrow_up:before{content:\"\\e913\"}.icon-local-document .path1:before{content:\"\\e914\";color:#000;opacity:.6}.icon-local-document .path2:before{content:\"\\e915\";margin-left:-1em;color:#1954a9}.icon-local-folder-closed .path1:before{content:\"\\e916\";color:#000;opacity:.6}.icon-local-folder-closed .path2:before{content:\"\\e917\";margin-left:-1em;color:#1954a9}.icon-local-folder-open .path1:before{content:\"\\e918\";color:#000;opacity:.6}.icon-local-folder-open .path2:before{content:\"\\e919\";margin-left:-1em;color:#1954a9}.icon-process:before{content:\"\\e91a\"}.icon-regional-document .path1:before{content:\"\\e91c\";color:#000;opacity:.6}.icon-regional-document .path2:before{content:\"\\e91d\";margin-left:-1em;color:#662e0d}.icon-regional-folder-closed .path1:before{content:\"\\e91e\";color:#000;opacity:.6}.icon-regional-folder-closed .path2:before{content:\"\\e91f\";margin-left:-1em;color:#662e0d}.icon-regional-folder-open .path1:before{content:\"\\e920\";color:#000;opacity:.6}.icon-regional-folder-open .path2:before{content:\"\\e921\";margin-left:-1em;color:#662e0d}.cursor-pointer{cursor:pointer}.ml-5{margin-left:10px}.padding-5{padding:5px}.header-dialog{display:flex;justify-content:space-between;align-items:center;font-weight:600;font-size:16px}.input__field{display:flex;align-items:center;position:relative}.input__field input.input-search{width:100%;padding:10px;outline:none;border:none;background:var(--background-input-text)}.input__field .btn-search{cursor:pointer;vertical-align:middle;position:absolute;top:50%;right:10px;transform:translateY(-50%)}.line__divider{border-bottom:1px solid #ccc;height:1px;margin-top:10px;min-width:300px;max-width:100%}.mat-expansion-panel-header{height:30px;font-size:12px;letter-spacing:1px;font-family:Raleway;font-weight:600;padding:0}.mat-expansion-panel-header .mat-expansion-panel-header-title{align-items:center;margin-left:12px}.mat-expansion-panel:not([class*=mat-elevation-z]){box-shadow:none}.panel__item{max-height:110px;margin-top:4px;overflow-x:hidden;overflow-y:auto;padding-right:5px;width:100%;display:block}.panel__item .related__item__inline{max-width:100%}.panel__item ::ng-deep .mat-chip-list-wrapper{margin:0 -4px!important}.panel__item .select__toggle-include{width:100%}.panel__item .select__toggle-include.toggle-include-child .mat-mdc-slide-toggle.qms-group-options .mat-slide-toggle-thumb{background-color:#5a5a5a!important}.panel__item .related__item__content{height:32px;line-height:32px;background-color:var(--related-item-background);max-width:100%;margin-bottom:5px;margin-left:2.5px;margin-right:2.5px}.panel__item .related__item__content .mat-icon{color:var(--related-mat-icon-color);font-size:24px}.header-title{font-weight:600;color:#000000de}.result-content{padding-right:0!important}.result-content .mat-chip-list{min-height:40px}.result-content .mat-chip-list .mat-icon{color:#0000004d!important;cursor:pointer}.result-content .mat-chip-list .mat-icon:hover{color:#000!important}.result-content span.related__item__content_name{min-width:calc(100% - 13px);display:flex;align-items:center}.result-content span.related__item__content_name>span:nth-child(1){display:inline-block;margin-right:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}.result-content span.related__item__content_name .select__include-children__count{font-size:.75rem;color:#00000080;font-weight:600;line-height:16px}.text-name{position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;cursor:pointer;width:100%}::ng-deep .mat-mdc-checkbox.qms-group-options.flex-direction-row .mat-checkbox-layout{white-space:normal}::ng-deep .mat-mdc-checkbox.qms-group-options.flex-direction-row .mat-checkbox-label{flex-direction:row;align-items:center;position:relative;padding-bottom:2px}.confirm__button__groups .btn-add>.qms-btn-wrapper{display:flex;justify-content:center;align-items:center}::ng-deep .custom-department-tree .qms-view-search-result{height:100%!important}::ng-deep .custom-department-tree .qms-view-search-result .result{max-height:calc(100% - 80px)!important}::ng-deep .custom-department-tree .loading-container{height:calc(100% - 40px)!important}::ng-deep .btn-close-dialog.qms-btn-icon:focus:not(:hover){background-color:unset!important;color:unset!important}.qms-spinner-wrapper{display:inline-block;width:22px;height:22px}.qms-spinner-wrapper .qms-spinner{font-size:20px;width:1em;height:1em;position:absolute;right:5px;top:50%;transform:translateY(-50%)}.qms-spinner-wrapper .qms-spinner .mat-mdc-progress-spinner circle{stroke:#1b75be!important}@media screen and (max-width: 600px){::ng-deep .cdk-global-overlay-wrapper{justify-content:center!important;width:100vw}.header-title{font-size:14px}.related__item__content_name{font-size:12px!important}}\n"], dependencies: [{ kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: QMSInputChipDirective, selector: "mat-chip[qms-chip]", inputs: ["selected"] }, { kind: "directive", type: QMSChipBodyDirective, selector: "[qms-chip-body]" }, { kind: "directive", type: QMSToolTipRendererDirective, selector: "[qms-tool-tip]", inputs: ["showToolTip", "mode", "qms-tool-tip", "contentTemplate", "position"] }, { kind: "directive", type: QMSContentChangesDirective, selector: "[qmsContentChanges]", inputs: ["qmsContentChanges"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1$2.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: QMSButton, selector: "button[qms-btn], button[qms-btn-lg], button[qms-btn-outlined],\n               button[qms-btn-outlined-lg], button[qms-btn-text], button[qms-btn-text-lg],\n               button[qms-btn-fab],button[qms-btn-fab-sm],button[qms-btn-fab-ext],\n               button[qms-btn-fab-outlined],button[qms-btn-fab-outlined-sm],button[qms-btn-fab-outlined-ext]", inputs: ["disabled", "color"], exportAs: ["qmsButton"] }, { kind: "component", type: QMSButtonIcon, selector: "button[qms-btn-icon]", inputs: ["disabled", "color", "active"], exportAs: ["qmsButtonIcon"] }, { kind: "component", type: i16.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i11$2.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled", "tabIndex"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: i11$2.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i11$2.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "component", type: SelectDepartmentTreeComponent, selector: "qms-select-department-tree", inputs: ["rowsSkeleton", "height", "config", "maxWidthNode"], outputs: ["onSearchEvent", "onPagingSearchEvent", "onValueChangeEvent", "selectionNodeChangeEvent", "onCheckNodeEvent", "onExpandNodeEvent", "onLoadMoreEvent", "onCheckItemSearchEvent", "onCheckAllItemSearchEvent", "toggleIncludeChildEvent", "isPushingChildNodes"] }, { kind: "component", type: i23.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }], animations: [SelectDepartmentAnimationTrigger] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectDepartmentComponent, decorators: [{
             type: Component,
@@ -37632,7 +37632,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                                 clickAction: 'noop'
                             }
                         }
-                    ], animations: [SelectDepartmentAnimationTrigger], template: "<h3 mat-dialog-title class=\"more-action\">\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</h3>\n<mat-dialog-content>\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        (isPushingChildNodes)=\"isPushingChildNodes($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 && !popupData.config.moveLocationMode\"\n    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-set 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            <button matChipRemove (click)=\"onRemoveNode(item)\"\n              *ngIf=\"!treeDepartment.isDisabledNode(item.id) && !isNodeLoading(item.id)\">\n              <mat-icon>cancel</mat-icon>\n            </button>\n          </mat-chip>\n        </div>\n      </mat-chip-set>\n    </div>\n  </div>\n</mat-dialog-content>\n<mat-dialog-actions align=\"end\">\n  <mat-divider *ngIf=\"treeDepartment && !!treeDepartment.resultSelected.length && !popupData.hidePanelResult\"\n    class=\"w-100 mb-3\"></mat-divider>\n  <button class=\"me-2\" qms-btn-text mat-dialog-close>\n    {{LANG.CANCEL}}\n  </button>\n  <button (click)=\"onCloseDialog()\" class=\"btn-add\"\n    [disabled]=\"(!treeDepartment.resultSelected.length && !popupData.config.canAddNullResult) || isPushing\"\n    [class.qms-btn-disabled]=\"(!treeDepartment.resultSelected.length && !popupData.config.canAddNullResult) || isPushing\"\n    qms-btn>\n    <span>{{LANG.ADD}}</span>\n    <span *ngIf=\"!popupData.config.moveLocationMode\">\n      ({{treeDepartment.resultSelected.length}})\n    </span>\n  </button>\n</mat-dialog-actions>\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\n<!-- \n<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          (isPushingChildNodes)=\"isPushingChildNodes($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 && !popupData.config.moveLocationMode\"\n      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-set 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              <button matChipRemove (click)=\"onRemoveNode(item)\"\n                *ngIf=\"!treeDepartment.isDisabledNode(item.id) && !isNodeLoading(item.id)\">\n                <mat-icon>cancel</mat-icon>\n              </button>\n            </mat-chip>\n          </div>\n        </mat-chip-set>\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\n      <button (click)=\"onCloseDialog()\" class=\"btn-add\"\n        [disabled]=\"(!treeDepartment.resultSelected.length && !popupData.config.canAddNullResult) || isPushing\"\n        [class.qms-btn-disabled]=\"(!treeDepartment.resultSelected.length && !popupData.config.canAddNullResult) || isPushing\"\n        qms-btn>\n        <span>{{LANG.ADD}}</span>\n        <span *ngIf=\"!popupData.config.moveLocationMode\">\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> -->", styles: ["@font-face{font-family:icomoon;src:url(/assets/fonts/icomoon.eot?aghldx);src:url(/assets/fonts/icomoon.eot?aghldx#iefix) format(\"embedded-opentype\"),url(/assets/fonts/icomoon.ttf?aghldx) format(\"truetype\"),url(/assets/fonts/icomoon.woff?aghldx) format(\"woff\"),url(/assets/fonts/icomoon.svg?aghldx#icomoon) format(\"svg\");font-weight:400;font-style:normal;font-display:block}[class^=icon-],[class*=\" icon-\"]{font-family:icomoon!important;speak:never;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-acutely-toxic .path1:before{content:\"\\e91b\";color:#e32730}.icon-acutely-toxic .path2:before{content:\"\\e922\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path3:before{content:\"\\e923\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path4:before{content:\"\\e924\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path5:before{content:\"\\e925\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path6:before{content:\"\\e926\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path7:before{content:\"\\e927\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path8:before{content:\"\\e928\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path9:before{content:\"\\e929\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path10:before{content:\"\\e92a\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path11:before{content:\"\\e92b\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path12:before{content:\"\\e92c\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path13:before{content:\"\\e92d\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path14:before{content:\"\\e92e\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path15:before{content:\"\\e92f\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path16:before{content:\"\\e930\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path17:before{content:\"\\e931\";margin-left:-1em;color:#323232}.icon-add-column:before{content:\"\\e932\"}.icon-add-tooltip:before{content:\"\\e933\"}.icon-admin:before{content:\"\\e934\"}.icon-annual-cycle:before{content:\"\\e935\"}.icon-assignment-repete:before{content:\"\\e936\"}.icon-barrier-add:before{content:\"\\e937\"}.icon-barrier-edit:before{content:\"\\e938\"}.icon-barrier-view:before{content:\"\\e939\"}.icon-button-group:before{content:\"\\e93a\"}.icon-chemical-manager:before{content:\"\\e93b\"}.icon-chronic-health-hazard .path1:before{content:\"\\e93c\";color:#e32730}.icon-chronic-health-hazard .path2:before{content:\"\\e93d\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path3:before{content:\"\\e93e\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path4:before{content:\"\\e93f\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path5:before{content:\"\\e940\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path6:before{content:\"\\e941\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path7:before{content:\"\\e942\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path8:before{content:\"\\e943\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path9:before{content:\"\\e944\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path10:before{content:\"\\e945\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path11:before{content:\"\\e946\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path12:before{content:\"\\e947\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path13:before{content:\"\\e948\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path14:before{content:\"\\e949\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path15:before{content:\"\\e94a\";margin-left:-1em;color:#323232}.icon-contingency:before{content:\"\\e94b\"}.icon-corrosive .path1:before{content:\"\\e94c\";color:#323232}.icon-corrosive .path2:before{content:\"\\e94d\";margin-left:-1em;color:#323232}.icon-corrosive .path3:before{content:\"\\e94e\";margin-left:-1em;color:#323232}.icon-corrosive .path4:before{content:\"\\e94f\";margin-left:-1em;color:#323232}.icon-corrosive .path5:before{content:\"\\e950\";margin-left:-1em;color:#323232}.icon-corrosive .path6:before{content:\"\\e951\";margin-left:-1em;color:#323232}.icon-corrosive .path7:before{content:\"\\e952\";margin-left:-1em;color:#323232}.icon-corrosive .path8:before{content:\"\\e953\";margin-left:-1em;color:#323232}.icon-corrosive .path9:before{content:\"\\e954\";margin-left:-1em;color:#323232}.icon-corrosive .path10:before{content:\"\\e955\";margin-left:-1em;color:#323232}.icon-corrosive .path11:before{content:\"\\e956\";margin-left:-1em;color:#323232}.icon-corrosive .path12:before{content:\"\\e957\";margin-left:-1em;color:#323232}.icon-corrosive .path13:before{content:\"\\e958\";margin-left:-1em;color:#323232}.icon-corrosive .path14:before{content:\"\\e959\";margin-left:-1em;color:#323232}.icon-corrosive .path15:before{content:\"\\e95a\";margin-left:-1em;color:#323232}.icon-corrosive .path16:before{content:\"\\e95b\";margin-left:-1em;color:#323232}.icon-corrosive .path17:before{content:\"\\e95c\";margin-left:-1em;color:#323232}.icon-corrosive .path18:before{content:\"\\e95d\";margin-left:-1em;color:#323232}.icon-corrosive .path19:before{content:\"\\e95e\";margin-left:-1em;color:#323232}.icon-corrosive .path20:before{content:\"\\e95f\";margin-left:-1em;color:#323232}.icon-corrosive .path21:before{content:\"\\e960\";margin-left:-1em;color:#e32730}.icon-dashboard:before{content:\"\\e961\"}.icon-database-sds:before{content:\"\\e962\"}.icon-description-add:before{content:\"\\e963\"}.icon-description-edit:before{content:\"\\e964\"}.icon-description-view:before{content:\"\\e965\";color:#666}.icon-document-read .path1:before{content:\"\\e966\";color:#000;opacity:.6}.icon-document-read .path2:before{content:\"\\e967\";margin-left:-1em;color:#fff}.icon-document-read .path3:before{content:\"\\e968\";margin-left:-1em;color:#000;opacity:.6}.icon-draft:before{content:\"\\e969\"}.icon-expired-off:before{content:\"\\e96a\"}.icon-expired-on:before{content:\"\\e96b\"}.icon-explosive .path1:before{content:\"\\e96c\";color:#e32730}.icon-explosive .path2:before{content:\"\\e96d\";margin-left:-1em;color:#323232}.icon-explosive .path3:before{content:\"\\e96e\";margin-left:-1em;color:#323232}.icon-explosive .path4:before{content:\"\\e96f\";margin-left:-1em;color:#323232}.icon-explosive .path5:before{content:\"\\e970\";margin-left:-1em;color:#323232}.icon-explosive .path6:before{content:\"\\e971\";margin-left:-1em;color:#323232}.icon-explosive .path7:before{content:\"\\e972\";margin-left:-1em;color:#323232}.icon-explosive .path8:before{content:\"\\e973\";margin-left:-1em;color:#323232}.icon-explosive .path9:before{content:\"\\e974\";margin-left:-1em;color:#323232}.icon-explosive .path10:before{content:\"\\e975\";margin-left:-1em;color:#323232}.icon-explosive .path11:before{content:\"\\e976\";margin-left:-1em;color:#323232}.icon-explosive .path12:before{content:\"\\e977\";margin-left:-1em;color:#323232}.icon-explosive .path13:before{content:\"\\e978\";margin-left:-1em;color:#323232}.icon-explosive .path14:before{content:\"\\e979\";margin-left:-1em;color:#323232}.icon-explosive .path15:before{content:\"\\e97a\";margin-left:-1em;color:#323232}.icon-explosive .path16:before{content:\"\\e97b\";margin-left:-1em;color:#323232}.icon-explosive .path17:before{content:\"\\e97c\";margin-left:-1em;color:#323232}.icon-explosive .path18:before{content:\"\\e97d\";margin-left:-1em;color:#323232}.icon-explosive .path19:before{content:\"\\e97e\";margin-left:-1em;color:#323232}.icon-explosive .path20:before{content:\"\\e97f\";margin-left:-1em;color:#323232}.icon-explosive .path21:before{content:\"\\e980\";margin-left:-1em;color:#323232}.icon-explosive .path22:before{content:\"\\e981\";margin-left:-1em;color:#323232}.icon-explosive .path23:before{content:\"\\e982\";margin-left:-1em;color:#323232}.icon-explosive .path24:before{content:\"\\e983\";margin-left:-1em;color:#323232}.icon-explosive .path25:before{content:\"\\e984\";margin-left:-1em;color:#323232}.icon-explosive .path26:before{content:\"\\e985\";margin-left:-1em;color:#323232}.icon-explosive .path27:before{content:\"\\e986\";margin-left:-1em;color:#323232}.icon-explosive .path28:before{content:\"\\e987\";margin-left:-1em;color:#323232}.icon-explosive .path29:before{content:\"\\e988\";margin-left:-1em;color:#323232}.icon-explosive .path30:before{content:\"\\e989\";margin-left:-1em;color:#323232}.icon-explosive .path31:before{content:\"\\e98a\";margin-left:-1em;color:#323232}.icon-explosive .path32:before{content:\"\\e98b\";margin-left:-1em;color:#323232}.icon-explosive .path33:before{content:\"\\e98c\";margin-left:-1em;color:#323232}.icon-explosive .path34:before{content:\"\\e98d\";margin-left:-1em;color:#323232}.icon-explosive .path35:before{content:\"\\e98e\";margin-left:-1em;color:#323232}.icon-explosive .path36:before{content:\"\\e98f\";margin-left:-1em;color:#323232}.icon-explosive .path37:before{content:\"\\e990\";margin-left:-1em;color:#323232}.icon-explosive .path38:before{content:\"\\e991\";margin-left:-1em;color:#323232}.icon-explosive .path39:before{content:\"\\e992\";margin-left:-1em;color:#323232}.icon-explosive .path40:before{content:\"\\e993\";margin-left:-1em;color:#323232}.icon-explosive .path41:before{content:\"\\e994\";margin-left:-1em;color:#323232}.icon-explosive .path42:before{content:\"\\e995\";margin-left:-1em;color:#323232}.icon-explosive .path43:before{content:\"\\e996\";margin-left:-1em;color:#323232}.icon-explosive .path44:before{content:\"\\e997\";margin-left:-1em;color:#323232}.icon-explosive .path45:before{content:\"\\e998\";margin-left:-1em;color:#323232}.icon-explosive .path46:before{content:\"\\e999\";margin-left:-1em;color:#323232}.icon-file-excel:before{content:\"\\e99a\"}.icon-file-pdf:before{content:\"\\e99b\"}.icon-file-pdf-verified .path1:before{content:\"\\e99c\";color:#000;opacity:.6}.icon-file-pdf-verified .path2:before{content:\"\\e99d\";margin-left:-1em;color:#fff}.icon-file-pdf-verified .path3:before{content:\"\\e99e\";margin-left:-1em;color:#000;opacity:.6}.icon-file-word:before{content:\"\\e99f\"}.icon-filter-alt:before{content:\"\\e9a0\"}.icon-flammable .path1:before{content:\"\\e9a1\";color:#323232}.icon-flammable .path2:before{content:\"\\e9a2\";margin-left:-1em;color:#323232}.icon-flammable .path3:before{content:\"\\e9a3\";margin-left:-1em;color:#e32730}.icon-gas-under-pressure .path1:before{content:\"\\e9a4\";color:#323232}.icon-gas-under-pressure .path2:before{content:\"\\e9a5\";margin-left:-1em;color:#e32730}.icon-health-hazard .path1:before{content:\"\\e9a6\";color:#323232}.icon-health-hazard .path2:before{content:\"\\e9a7\";margin-left:-1em;color:#e32730}.icon-line-break:before{content:\"\\e9a8\"}.icon-location:before{content:\"\\e9a9\"}.icon-measure-add:before{content:\"\\e9aa\"}.icon-measure-edit:before{content:\"\\e9ab\"}.icon-measure-view:before{content:\"\\e9ac\";color:#666}.icon-messages:before{content:\"\\e9ad\"}.icon-monitoring:before{content:\"\\e9ae\";color:#666}.icon-move:before{content:\"\\e9af\"}.icon-oxidizing .path1:before{content:\"\\e9b0\";color:#e32730}.icon-oxidizing .path2:before{content:\"\\e9b1\";margin-left:-1em;color:#323232}.icon-oxidizing .path3:before{content:\"\\e9b2\";margin-left:-1em;color:#323232}.icon-oxidizing .path4:before{content:\"\\e9b3\";margin-left:-1em;color:#323232}.icon-process-area-closed:before{content:\"\\e9b4\"}.icon-process-area-open:before{content:\"\\e9b5\"}.icon-process-linked .path1:before{content:\"\\e9b6\";color:#000;opacity:.6}.icon-process-linked .path2:before{content:\"\\e9b7\";margin-left:-1em;color:#666}.icon-risk:before{content:\"\\e9b8\"}.icon-search-in-file:before{content:\"\\e9b9\"}.icon-sort-ascending:before{content:\"\\e9ba\"}.icon-sort-descending:before{content:\"\\e9bb\"}.icon-subscript:before{content:\"\\e9bc\"}.icon-superscript:before{content:\"\\e9bd\"}.icon-syncronice-favorites:before{content:\"\\e9be\"}.icon-system-settings:before{content:\"\\e9bf\"}.icon-view-three-outlined:before{content:\"\\e9c0\"}.icon-workplace-safety:before{content:\"\\e9c1\"}.icon-checklist:before{content:\"\\e900\"}.icon-department-document .path1:before{content:\"\\e901\";color:#000;opacity:.6}.icon-department-document .path2:before{content:\"\\e902\";margin-left:-1em;color:#00804c}.icon-department-folder-closed .path1:before{content:\"\\e903\";color:#000;opacity:.6}.icon-department-folder-closed .path2:before{content:\"\\e904\";margin-left:-1em;color:#00804c}.icon-department-folder-open .path1:before{content:\"\\e905\";color:#000;opacity:.6}.icon-department-folder-open .path2:before{content:\"\\e906\";margin-left:-1em;color:#00804c}.icon-deviation:before{content:\"\\e907\"}.icon-dropdown-folder .path1:before{content:\"\\e908\";color:#00324e}.icon-dropdown-folder .path2:before{content:\"\\e909\";margin-left:-1em;color:#fff;opacity:.6}.icon-enterprise-document .path1:before{content:\"\\e90a\";color:#000;opacity:.6}.icon-enterprise-document .path2:before{content:\"\\e90b\";margin-left:-1em;color:#cf4714}.icon-enterprise-folder-closed .path1:before{content:\"\\e90c\";color:#000;opacity:.6}.icon-enterprise-folder-closed .path2:before{content:\"\\e90d\";margin-left:-1em;color:#cf4714}.icon-enterprise-folder-open .path1:before{content:\"\\e90e\";color:#000;opacity:.6}.icon-enterprise-folder-open .path2:before{content:\"\\e90f\";margin-left:-1em;color:#cf4714}.icon-folder-closed:before{content:\"\\e910\"}.icon-folder-open:before{content:\"\\e911\"}.icon-keyboard_arrow_down:before{content:\"\\e912\"}.icon-keyboard_arrow_up:before{content:\"\\e913\"}.icon-local-document .path1:before{content:\"\\e914\";color:#000;opacity:.6}.icon-local-document .path2:before{content:\"\\e915\";margin-left:-1em;color:#1954a9}.icon-local-folder-closed .path1:before{content:\"\\e916\";color:#000;opacity:.6}.icon-local-folder-closed .path2:before{content:\"\\e917\";margin-left:-1em;color:#1954a9}.icon-local-folder-open .path1:before{content:\"\\e918\";color:#000;opacity:.6}.icon-local-folder-open .path2:before{content:\"\\e919\";margin-left:-1em;color:#1954a9}.icon-process:before{content:\"\\e91a\"}.icon-regional-document .path1:before{content:\"\\e91c\";color:#000;opacity:.6}.icon-regional-document .path2:before{content:\"\\e91d\";margin-left:-1em;color:#662e0d}.icon-regional-folder-closed .path1:before{content:\"\\e91e\";color:#000;opacity:.6}.icon-regional-folder-closed .path2:before{content:\"\\e91f\";margin-left:-1em;color:#662e0d}.icon-regional-folder-open .path1:before{content:\"\\e920\";color:#000;opacity:.6}.icon-regional-folder-open .path2:before{content:\"\\e921\";margin-left:-1em;color:#662e0d}.cursor-pointer{cursor:pointer}.ml-5{margin-left:10px}.padding-5{padding:5px}.header-dialog{display:flex;justify-content:space-between;align-items:center;font-weight:600;font-size:16px}.input__field{display:flex;align-items:center;position:relative}.input__field input.input-search{width:100%;padding:10px;outline:none;border:none;background:var(--background-input-text)}.input__field .btn-search{cursor:pointer;vertical-align:middle;position:absolute;top:50%;right:10px;transform:translateY(-50%)}.line__divider{border-bottom:1px solid #ccc;height:1px;margin-top:10px;min-width:300px;max-width:100%}.mat-expansion-panel-header{height:30px;font-size:12px;letter-spacing:1px;font-family:Raleway;font-weight:600;padding:0}.mat-expansion-panel-header .mat-expansion-panel-header-title{align-items:center;margin-left:12px}.mat-expansion-panel:not([class*=mat-elevation-z]){box-shadow:none}.panel__item{max-height:175px;margin-top:4px;overflow-x:hidden;overflow-y:auto;padding-right:5px;width:100%;display:block}.panel__item .related__item__inline{max-width:100%}.panel__item ::ng-deep .mat-chip-list-wrapper{margin:0 -4px!important}.panel__item .select__toggle-include{width:100%}.panel__item .select__toggle-include.toggle-include-child .mat-mdc-slide-toggle.qms-group-options .mat-slide-toggle-thumb{background-color:#5a5a5a!important}.panel__item .related__item__content{height:32px;line-height:32px;background-color:var(--related-item-background);max-width:100%;margin-bottom:5px;margin-left:2.5px;margin-right:2.5px}.panel__item .related__item__content .mat-icon{color:var(--related-mat-icon-color);font-size:24px}.header-title{font-weight:600;color:#000000de}.result-content{padding-right:0!important}.result-content .mat-chip-list{min-height:40px}.result-content .mat-chip-list .mat-icon{color:#0000004d!important;cursor:pointer}.result-content .mat-chip-list .mat-icon:hover{color:#000!important}.result-content span.related__item__content_name{min-width:calc(100% - 13px);max-width:250px;display:flex;align-items:center}.result-content span.related__item__content_name>span:nth-child(1){display:inline-block;margin-right:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}.result-content span.related__item__content_name .select__include-children__count{font-size:.75rem;color:#00000080;font-weight:600;line-height:16px}.text-name{position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;cursor:pointer;width:100%}::ng-deep .mat-mdc-checkbox.qms-group-options.flex-direction-row .mat-checkbox-layout{white-space:normal}::ng-deep .mat-mdc-checkbox.qms-group-options.flex-direction-row .mat-checkbox-label{flex-direction:row;align-items:center;position:relative;padding-bottom:2px}.confirm__button__groups .btn-add>.qms-btn-wrapper{display:flex;justify-content:center;align-items:center}::ng-deep .custom-department-tree .qms-view-search-result{height:100%!important}::ng-deep .custom-department-tree .qms-view-search-result .result{max-height:calc(100% - 80px)!important}::ng-deep .custom-department-tree .loading-container{height:calc(100% - 40px)!important}::ng-deep .btn-close-dialog.qms-btn-icon:focus:not(:hover){background-color:unset!important;color:unset!important}.qms-spinner-wrapper{display:inline-block;width:22px;height:22px}.qms-spinner-wrapper .qms-spinner{font-size:20px;width:1em;height:1em;position:absolute;right:5px;top:50%;transform:translateY(-50%)}.qms-spinner-wrapper .qms-spinner .mat-mdc-progress-spinner circle{stroke:#1b75be!important}@media screen and (max-width: 600px){::ng-deep .cdk-global-overlay-wrapper{justify-content:center!important;width:100vw}.header-title{font-size:14px}.related__item__content_name{font-size:12px!important}}\n"] }]
+                    ], animations: [SelectDepartmentAnimationTrigger], template: "<h3 mat-dialog-title class=\"more-action\">\n  {{popupData.headerName}}\n  <button matDialogClose class=\"close-btn\" color=\"light\" qms-btn-icon>\n    <mat-icon>close</mat-icon>\n  </button>\n</h3>\n<mat-dialog-content>\n  <div class=\"qms-scrollbar\">\n    <div>\n      <qms-select-department-tree #treeDepartment customClass=\"custom-department-tree\"\n        [height]=\"popupData.config.isMobile ? '38vh' : '34vh'\" [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        (isPushingChildNodes)=\"isPushingChildNodes($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 && !popupData.config.moveLocationMode\"\n    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-set class=\"panel__item qms-scrollbar\">\n        <ng-container *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            <button matChipRemove (click)=\"onRemoveNode(item)\"\n              *ngIf=\"!treeDepartment.isDisabledNode(item.id) && !isNodeLoading(item.id)\">\n              <mat-icon>cancel</mat-icon>\n            </button>\n          </mat-chip>\n        </ng-container>\n      </mat-chip-set>\n    </div>\n  </div>\n</mat-dialog-content>\n<mat-dialog-actions align=\"end\">\n  <mat-divider *ngIf=\"treeDepartment && !!treeDepartment.resultSelected.length && !popupData.hidePanelResult\"\n    class=\"w-100 mb-3\"></mat-divider>\n  <button class=\"me-2\" qms-btn-text mat-dialog-close>\n    {{LANG.CANCEL}}\n  </button>\n  <button (click)=\"onCloseDialog()\" class=\"btn-add\"\n    [disabled]=\"(!treeDepartment.resultSelected.length && !popupData.config.canAddNullResult) || isPushing\"\n    [class.qms-btn-disabled]=\"(!treeDepartment.resultSelected.length && !popupData.config.canAddNullResult) || isPushing\"\n    qms-btn>\n    <span>{{LANG.ADD}}</span>\n    <span *ngIf=\"!popupData.config.moveLocationMode\">\n      ({{treeDepartment.resultSelected.length}})\n    </span>\n  </button>\n</mat-dialog-actions>\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>", styles: ["@font-face{font-family:icomoon;src:url(/assets/fonts/icomoon.eot?aghldx);src:url(/assets/fonts/icomoon.eot?aghldx#iefix) format(\"embedded-opentype\"),url(/assets/fonts/icomoon.ttf?aghldx) format(\"truetype\"),url(/assets/fonts/icomoon.woff?aghldx) format(\"woff\"),url(/assets/fonts/icomoon.svg?aghldx#icomoon) format(\"svg\");font-weight:400;font-style:normal;font-display:block}[class^=icon-],[class*=\" icon-\"]{font-family:icomoon!important;speak:never;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-acutely-toxic .path1:before{content:\"\\e91b\";color:#e32730}.icon-acutely-toxic .path2:before{content:\"\\e922\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path3:before{content:\"\\e923\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path4:before{content:\"\\e924\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path5:before{content:\"\\e925\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path6:before{content:\"\\e926\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path7:before{content:\"\\e927\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path8:before{content:\"\\e928\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path9:before{content:\"\\e929\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path10:before{content:\"\\e92a\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path11:before{content:\"\\e92b\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path12:before{content:\"\\e92c\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path13:before{content:\"\\e92d\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path14:before{content:\"\\e92e\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path15:before{content:\"\\e92f\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path16:before{content:\"\\e930\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path17:before{content:\"\\e931\";margin-left:-1em;color:#323232}.icon-add-column:before{content:\"\\e932\"}.icon-add-tooltip:before{content:\"\\e933\"}.icon-admin:before{content:\"\\e934\"}.icon-annual-cycle:before{content:\"\\e935\"}.icon-assignment-repete:before{content:\"\\e936\"}.icon-barrier-add:before{content:\"\\e937\"}.icon-barrier-edit:before{content:\"\\e938\"}.icon-barrier-view:before{content:\"\\e939\"}.icon-button-group:before{content:\"\\e93a\"}.icon-chemical-manager:before{content:\"\\e93b\"}.icon-chronic-health-hazard .path1:before{content:\"\\e93c\";color:#e32730}.icon-chronic-health-hazard .path2:before{content:\"\\e93d\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path3:before{content:\"\\e93e\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path4:before{content:\"\\e93f\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path5:before{content:\"\\e940\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path6:before{content:\"\\e941\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path7:before{content:\"\\e942\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path8:before{content:\"\\e943\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path9:before{content:\"\\e944\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path10:before{content:\"\\e945\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path11:before{content:\"\\e946\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path12:before{content:\"\\e947\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path13:before{content:\"\\e948\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path14:before{content:\"\\e949\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path15:before{content:\"\\e94a\";margin-left:-1em;color:#323232}.icon-contingency:before{content:\"\\e94b\"}.icon-corrosive .path1:before{content:\"\\e94c\";color:#323232}.icon-corrosive .path2:before{content:\"\\e94d\";margin-left:-1em;color:#323232}.icon-corrosive .path3:before{content:\"\\e94e\";margin-left:-1em;color:#323232}.icon-corrosive .path4:before{content:\"\\e94f\";margin-left:-1em;color:#323232}.icon-corrosive .path5:before{content:\"\\e950\";margin-left:-1em;color:#323232}.icon-corrosive .path6:before{content:\"\\e951\";margin-left:-1em;color:#323232}.icon-corrosive .path7:before{content:\"\\e952\";margin-left:-1em;color:#323232}.icon-corrosive .path8:before{content:\"\\e953\";margin-left:-1em;color:#323232}.icon-corrosive .path9:before{content:\"\\e954\";margin-left:-1em;color:#323232}.icon-corrosive .path10:before{content:\"\\e955\";margin-left:-1em;color:#323232}.icon-corrosive .path11:before{content:\"\\e956\";margin-left:-1em;color:#323232}.icon-corrosive .path12:before{content:\"\\e957\";margin-left:-1em;color:#323232}.icon-corrosive .path13:before{content:\"\\e958\";margin-left:-1em;color:#323232}.icon-corrosive .path14:before{content:\"\\e959\";margin-left:-1em;color:#323232}.icon-corrosive .path15:before{content:\"\\e95a\";margin-left:-1em;color:#323232}.icon-corrosive .path16:before{content:\"\\e95b\";margin-left:-1em;color:#323232}.icon-corrosive .path17:before{content:\"\\e95c\";margin-left:-1em;color:#323232}.icon-corrosive .path18:before{content:\"\\e95d\";margin-left:-1em;color:#323232}.icon-corrosive .path19:before{content:\"\\e95e\";margin-left:-1em;color:#323232}.icon-corrosive .path20:before{content:\"\\e95f\";margin-left:-1em;color:#323232}.icon-corrosive .path21:before{content:\"\\e960\";margin-left:-1em;color:#e32730}.icon-dashboard:before{content:\"\\e961\"}.icon-database-sds:before{content:\"\\e962\"}.icon-description-add:before{content:\"\\e963\"}.icon-description-edit:before{content:\"\\e964\"}.icon-description-view:before{content:\"\\e965\";color:#666}.icon-document-read .path1:before{content:\"\\e966\";color:#000;opacity:.6}.icon-document-read .path2:before{content:\"\\e967\";margin-left:-1em;color:#fff}.icon-document-read .path3:before{content:\"\\e968\";margin-left:-1em;color:#000;opacity:.6}.icon-draft:before{content:\"\\e969\"}.icon-expired-off:before{content:\"\\e96a\"}.icon-expired-on:before{content:\"\\e96b\"}.icon-explosive .path1:before{content:\"\\e96c\";color:#e32730}.icon-explosive .path2:before{content:\"\\e96d\";margin-left:-1em;color:#323232}.icon-explosive .path3:before{content:\"\\e96e\";margin-left:-1em;color:#323232}.icon-explosive .path4:before{content:\"\\e96f\";margin-left:-1em;color:#323232}.icon-explosive .path5:before{content:\"\\e970\";margin-left:-1em;color:#323232}.icon-explosive .path6:before{content:\"\\e971\";margin-left:-1em;color:#323232}.icon-explosive .path7:before{content:\"\\e972\";margin-left:-1em;color:#323232}.icon-explosive .path8:before{content:\"\\e973\";margin-left:-1em;color:#323232}.icon-explosive .path9:before{content:\"\\e974\";margin-left:-1em;color:#323232}.icon-explosive .path10:before{content:\"\\e975\";margin-left:-1em;color:#323232}.icon-explosive .path11:before{content:\"\\e976\";margin-left:-1em;color:#323232}.icon-explosive .path12:before{content:\"\\e977\";margin-left:-1em;color:#323232}.icon-explosive .path13:before{content:\"\\e978\";margin-left:-1em;color:#323232}.icon-explosive .path14:before{content:\"\\e979\";margin-left:-1em;color:#323232}.icon-explosive .path15:before{content:\"\\e97a\";margin-left:-1em;color:#323232}.icon-explosive .path16:before{content:\"\\e97b\";margin-left:-1em;color:#323232}.icon-explosive .path17:before{content:\"\\e97c\";margin-left:-1em;color:#323232}.icon-explosive .path18:before{content:\"\\e97d\";margin-left:-1em;color:#323232}.icon-explosive .path19:before{content:\"\\e97e\";margin-left:-1em;color:#323232}.icon-explosive .path20:before{content:\"\\e97f\";margin-left:-1em;color:#323232}.icon-explosive .path21:before{content:\"\\e980\";margin-left:-1em;color:#323232}.icon-explosive .path22:before{content:\"\\e981\";margin-left:-1em;color:#323232}.icon-explosive .path23:before{content:\"\\e982\";margin-left:-1em;color:#323232}.icon-explosive .path24:before{content:\"\\e983\";margin-left:-1em;color:#323232}.icon-explosive .path25:before{content:\"\\e984\";margin-left:-1em;color:#323232}.icon-explosive .path26:before{content:\"\\e985\";margin-left:-1em;color:#323232}.icon-explosive .path27:before{content:\"\\e986\";margin-left:-1em;color:#323232}.icon-explosive .path28:before{content:\"\\e987\";margin-left:-1em;color:#323232}.icon-explosive .path29:before{content:\"\\e988\";margin-left:-1em;color:#323232}.icon-explosive .path30:before{content:\"\\e989\";margin-left:-1em;color:#323232}.icon-explosive .path31:before{content:\"\\e98a\";margin-left:-1em;color:#323232}.icon-explosive .path32:before{content:\"\\e98b\";margin-left:-1em;color:#323232}.icon-explosive .path33:before{content:\"\\e98c\";margin-left:-1em;color:#323232}.icon-explosive .path34:before{content:\"\\e98d\";margin-left:-1em;color:#323232}.icon-explosive .path35:before{content:\"\\e98e\";margin-left:-1em;color:#323232}.icon-explosive .path36:before{content:\"\\e98f\";margin-left:-1em;color:#323232}.icon-explosive .path37:before{content:\"\\e990\";margin-left:-1em;color:#323232}.icon-explosive .path38:before{content:\"\\e991\";margin-left:-1em;color:#323232}.icon-explosive .path39:before{content:\"\\e992\";margin-left:-1em;color:#323232}.icon-explosive .path40:before{content:\"\\e993\";margin-left:-1em;color:#323232}.icon-explosive .path41:before{content:\"\\e994\";margin-left:-1em;color:#323232}.icon-explosive .path42:before{content:\"\\e995\";margin-left:-1em;color:#323232}.icon-explosive .path43:before{content:\"\\e996\";margin-left:-1em;color:#323232}.icon-explosive .path44:before{content:\"\\e997\";margin-left:-1em;color:#323232}.icon-explosive .path45:before{content:\"\\e998\";margin-left:-1em;color:#323232}.icon-explosive .path46:before{content:\"\\e999\";margin-left:-1em;color:#323232}.icon-file-excel:before{content:\"\\e99a\"}.icon-file-pdf:before{content:\"\\e99b\"}.icon-file-pdf-verified .path1:before{content:\"\\e99c\";color:#000;opacity:.6}.icon-file-pdf-verified .path2:before{content:\"\\e99d\";margin-left:-1em;color:#fff}.icon-file-pdf-verified .path3:before{content:\"\\e99e\";margin-left:-1em;color:#000;opacity:.6}.icon-file-word:before{content:\"\\e99f\"}.icon-filter-alt:before{content:\"\\e9a0\"}.icon-flammable .path1:before{content:\"\\e9a1\";color:#323232}.icon-flammable .path2:before{content:\"\\e9a2\";margin-left:-1em;color:#323232}.icon-flammable .path3:before{content:\"\\e9a3\";margin-left:-1em;color:#e32730}.icon-gas-under-pressure .path1:before{content:\"\\e9a4\";color:#323232}.icon-gas-under-pressure .path2:before{content:\"\\e9a5\";margin-left:-1em;color:#e32730}.icon-health-hazard .path1:before{content:\"\\e9a6\";color:#323232}.icon-health-hazard .path2:before{content:\"\\e9a7\";margin-left:-1em;color:#e32730}.icon-line-break:before{content:\"\\e9a8\"}.icon-location:before{content:\"\\e9a9\"}.icon-measure-add:before{content:\"\\e9aa\"}.icon-measure-edit:before{content:\"\\e9ab\"}.icon-measure-view:before{content:\"\\e9ac\";color:#666}.icon-messages:before{content:\"\\e9ad\"}.icon-monitoring:before{content:\"\\e9ae\";color:#666}.icon-move:before{content:\"\\e9af\"}.icon-oxidizing .path1:before{content:\"\\e9b0\";color:#e32730}.icon-oxidizing .path2:before{content:\"\\e9b1\";margin-left:-1em;color:#323232}.icon-oxidizing .path3:before{content:\"\\e9b2\";margin-left:-1em;color:#323232}.icon-oxidizing .path4:before{content:\"\\e9b3\";margin-left:-1em;color:#323232}.icon-process-area-closed:before{content:\"\\e9b4\"}.icon-process-area-open:before{content:\"\\e9b5\"}.icon-process-linked .path1:before{content:\"\\e9b6\";color:#000;opacity:.6}.icon-process-linked .path2:before{content:\"\\e9b7\";margin-left:-1em;color:#666}.icon-risk:before{content:\"\\e9b8\"}.icon-search-in-file:before{content:\"\\e9b9\"}.icon-sort-ascending:before{content:\"\\e9ba\"}.icon-sort-descending:before{content:\"\\e9bb\"}.icon-subscript:before{content:\"\\e9bc\"}.icon-superscript:before{content:\"\\e9bd\"}.icon-syncronice-favorites:before{content:\"\\e9be\"}.icon-system-settings:before{content:\"\\e9bf\"}.icon-view-three-outlined:before{content:\"\\e9c0\"}.icon-workplace-safety:before{content:\"\\e9c1\"}.icon-checklist:before{content:\"\\e900\"}.icon-department-document .path1:before{content:\"\\e901\";color:#000;opacity:.6}.icon-department-document .path2:before{content:\"\\e902\";margin-left:-1em;color:#00804c}.icon-department-folder-closed .path1:before{content:\"\\e903\";color:#000;opacity:.6}.icon-department-folder-closed .path2:before{content:\"\\e904\";margin-left:-1em;color:#00804c}.icon-department-folder-open .path1:before{content:\"\\e905\";color:#000;opacity:.6}.icon-department-folder-open .path2:before{content:\"\\e906\";margin-left:-1em;color:#00804c}.icon-deviation:before{content:\"\\e907\"}.icon-dropdown-folder .path1:before{content:\"\\e908\";color:#00324e}.icon-dropdown-folder .path2:before{content:\"\\e909\";margin-left:-1em;color:#fff;opacity:.6}.icon-enterprise-document .path1:before{content:\"\\e90a\";color:#000;opacity:.6}.icon-enterprise-document .path2:before{content:\"\\e90b\";margin-left:-1em;color:#cf4714}.icon-enterprise-folder-closed .path1:before{content:\"\\e90c\";color:#000;opacity:.6}.icon-enterprise-folder-closed .path2:before{content:\"\\e90d\";margin-left:-1em;color:#cf4714}.icon-enterprise-folder-open .path1:before{content:\"\\e90e\";color:#000;opacity:.6}.icon-enterprise-folder-open .path2:before{content:\"\\e90f\";margin-left:-1em;color:#cf4714}.icon-folder-closed:before{content:\"\\e910\"}.icon-folder-open:before{content:\"\\e911\"}.icon-keyboard_arrow_down:before{content:\"\\e912\"}.icon-keyboard_arrow_up:before{content:\"\\e913\"}.icon-local-document .path1:before{content:\"\\e914\";color:#000;opacity:.6}.icon-local-document .path2:before{content:\"\\e915\";margin-left:-1em;color:#1954a9}.icon-local-folder-closed .path1:before{content:\"\\e916\";color:#000;opacity:.6}.icon-local-folder-closed .path2:before{content:\"\\e917\";margin-left:-1em;color:#1954a9}.icon-local-folder-open .path1:before{content:\"\\e918\";color:#000;opacity:.6}.icon-local-folder-open .path2:before{content:\"\\e919\";margin-left:-1em;color:#1954a9}.icon-process:before{content:\"\\e91a\"}.icon-regional-document .path1:before{content:\"\\e91c\";color:#000;opacity:.6}.icon-regional-document .path2:before{content:\"\\e91d\";margin-left:-1em;color:#662e0d}.icon-regional-folder-closed .path1:before{content:\"\\e91e\";color:#000;opacity:.6}.icon-regional-folder-closed .path2:before{content:\"\\e91f\";margin-left:-1em;color:#662e0d}.icon-regional-folder-open .path1:before{content:\"\\e920\";color:#000;opacity:.6}.icon-regional-folder-open .path2:before{content:\"\\e921\";margin-left:-1em;color:#662e0d}.cursor-pointer{cursor:pointer}.ml-5{margin-left:10px}.padding-5{padding:5px}.header-dialog{display:flex;justify-content:space-between;align-items:center;font-weight:600;font-size:16px}.input__field{display:flex;align-items:center;position:relative}.input__field input.input-search{width:100%;padding:10px;outline:none;border:none;background:var(--background-input-text)}.input__field .btn-search{cursor:pointer;vertical-align:middle;position:absolute;top:50%;right:10px;transform:translateY(-50%)}.line__divider{border-bottom:1px solid #ccc;height:1px;margin-top:10px;min-width:300px;max-width:100%}.mat-expansion-panel-header{height:30px;font-size:12px;letter-spacing:1px;font-family:Raleway;font-weight:600;padding:0}.mat-expansion-panel-header .mat-expansion-panel-header-title{align-items:center;margin-left:12px}.mat-expansion-panel:not([class*=mat-elevation-z]){box-shadow:none}.panel__item{max-height:110px;margin-top:4px;overflow-x:hidden;overflow-y:auto;padding-right:5px;width:100%;display:block}.panel__item .related__item__inline{max-width:100%}.panel__item ::ng-deep .mat-chip-list-wrapper{margin:0 -4px!important}.panel__item .select__toggle-include{width:100%}.panel__item .select__toggle-include.toggle-include-child .mat-mdc-slide-toggle.qms-group-options .mat-slide-toggle-thumb{background-color:#5a5a5a!important}.panel__item .related__item__content{height:32px;line-height:32px;background-color:var(--related-item-background);max-width:100%;margin-bottom:5px;margin-left:2.5px;margin-right:2.5px}.panel__item .related__item__content .mat-icon{color:var(--related-mat-icon-color);font-size:24px}.header-title{font-weight:600;color:#000000de}.result-content{padding-right:0!important}.result-content .mat-chip-list{min-height:40px}.result-content .mat-chip-list .mat-icon{color:#0000004d!important;cursor:pointer}.result-content .mat-chip-list .mat-icon:hover{color:#000!important}.result-content span.related__item__content_name{min-width:calc(100% - 13px);display:flex;align-items:center}.result-content span.related__item__content_name>span:nth-child(1){display:inline-block;margin-right:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}.result-content span.related__item__content_name .select__include-children__count{font-size:.75rem;color:#00000080;font-weight:600;line-height:16px}.text-name{position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;cursor:pointer;width:100%}::ng-deep .mat-mdc-checkbox.qms-group-options.flex-direction-row .mat-checkbox-layout{white-space:normal}::ng-deep .mat-mdc-checkbox.qms-group-options.flex-direction-row .mat-checkbox-label{flex-direction:row;align-items:center;position:relative;padding-bottom:2px}.confirm__button__groups .btn-add>.qms-btn-wrapper{display:flex;justify-content:center;align-items:center}::ng-deep .custom-department-tree .qms-view-search-result{height:100%!important}::ng-deep .custom-department-tree .qms-view-search-result .result{max-height:calc(100% - 80px)!important}::ng-deep .custom-department-tree .loading-container{height:calc(100% - 40px)!important}::ng-deep .btn-close-dialog.qms-btn-icon:focus:not(:hover){background-color:unset!important;color:unset!important}.qms-spinner-wrapper{display:inline-block;width:22px;height:22px}.qms-spinner-wrapper .qms-spinner{font-size:20px;width:1em;height:1em;position:absolute;right:5px;top:50%;transform:translateY(-50%)}.qms-spinner-wrapper .qms-spinner .mat-mdc-progress-spinner circle{stroke:#1b75be!important}@media screen and (max-width: 600px){::ng-deep .cdk-global-overlay-wrapper{justify-content:center!important;width:100vw}.header-title{font-size:14px}.related__item__content_name{font-size:12px!important}}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$2.MatDialogRef }, { type: SelectDepartmentPopupData, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -38439,7 +38439,7 @@ class QMSSelectAccessDialogComponent {
                     clickAction: 'noop'
                 }
             }
-        ], viewQueries: [{ propertyName: "tree", first: true, predicate: ["tree"], descendants: true, read: SelectDepartmentTreeComponent }, { propertyName: "pagingPerson", first: true, predicate: ["pagingPerson"], descendants: true }, { propertyName: "pagingUserGroup", first: true, predicate: ["pagingUserGroup"], descendants: true }], ngImport: i0, template: "<h3 mat-dialog-title class=\"more-action\">\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</h3>\n<mat-dialog-content>\n  <div [class.active]=\"optionSelect.value !== null\" 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 mb-2\"\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        <div class=\"option-selected-content\">\n          <ng-container *ngIf=\"optionSelect.value === OPTION_ENUM.PERSON\">\n            <form *ngIf=\"personForm\" [formGroup]=\"personForm\">\n              <div class=\"group-filter-person-option\">\n                <mat-form-field *ngIf=\"optionFilterPersonDataGlobal.userGroups.length\" qms-form qms-select-input\n                  class=\"w-100  mb-2\" 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 \" matSuffix\n                    aria-label=\"Clear\" *ngIf=\"personForm.get('userGroup').value && !getLoading$.value\">\n                    <mat-icon>close</mat-icon>\n                  </span>\n                </mat-form-field>\n                <mat-form-field *ngIf=\"optionFilterPersonDataGlobal.departments.length\"\n                  class=\"w-100 input-select-option  mb-2\" 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  mb-2\" 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\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] *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            </form>\n          </ng-container>\n          <ng-container *ngIf=\"optionSelect.value === OPTION_ENUM.USER_GROUP\">\n            <div>\n              <form (submit)=\"onFilterUserGroup()\">\n                <mat-form-field class=\"w-100  mb-2\" 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 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              <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] 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            </div>\n          </ng-container>\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          <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          <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          <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\n</mat-dialog-content>\n<mat-dialog-actions align=\"end\">\n  <mat-divider class=\"w-100 mb-3\"></mat-divider>\n  <button class=\"me-2\" qms-btn-text mat-dialog-close>\n    {{dialogData.cancelTitle || LANG.CANCEL}}\n  </button>\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>{{dialogData.confirmTitle || LANG.ADD}}</span>\n  </button>\n</mat-dialog-actions>\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<ng-template #listChip let-data=\"data\" let-type=\"type\">\n  <mat-chip-set [@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\n        <button matChipRemove *ngIf=\"allowRemove(type, item)\" (click)=\"onRemoveChip(type,item, i)\">\n          <mat-icon 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        </button>\n        <button matChipRemove *ngIf=\"!allowRemove(type, item) && dialogData.formatMsgDisable\"\n          (click)=\"onRemoveChip(type,item, i)\">\n          <mat-icon 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        </button>\n      </mat-chip>\n    </div>\n  </mat-chip-set>\n</ng-template>\n\n\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<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<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<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>\n\n\n<!-- <div qms-dialog-container-v2 class=\"select-access-dialog-container\">\n  <div qms-dialog-header>\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 [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        <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                  <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          <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          <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          <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          <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          <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>{{dialogData.confirmTitle || LANG.ADD}}</span>\n    </button>\n    <button qms-btn-text mat-dialog-close>\n      {{dialogData.cancelTitle || LANG.CANCEL}}\n    </button>\n  </div>\n</div> -->", styles: ["@font-face{font-family:icomoon;src:url(/assets/fonts/icomoon.eot?aghldx);src:url(/assets/fonts/icomoon.eot?aghldx#iefix) format(\"embedded-opentype\"),url(/assets/fonts/icomoon.ttf?aghldx) format(\"truetype\"),url(/assets/fonts/icomoon.woff?aghldx) format(\"woff\"),url(/assets/fonts/icomoon.svg?aghldx#icomoon) format(\"svg\");font-weight:400;font-style:normal;font-display:block}[class^=icon-],[class*=\" icon-\"]{font-family:icomoon!important;speak:never;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-acutely-toxic .path1:before{content:\"\\e91b\";color:#e32730}.icon-acutely-toxic .path2:before{content:\"\\e922\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path3:before{content:\"\\e923\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path4:before{content:\"\\e924\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path5:before{content:\"\\e925\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path6:before{content:\"\\e926\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path7:before{content:\"\\e927\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path8:before{content:\"\\e928\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path9:before{content:\"\\e929\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path10:before{content:\"\\e92a\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path11:before{content:\"\\e92b\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path12:before{content:\"\\e92c\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path13:before{content:\"\\e92d\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path14:before{content:\"\\e92e\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path15:before{content:\"\\e92f\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path16:before{content:\"\\e930\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path17:before{content:\"\\e931\";margin-left:-1em;color:#323232}.icon-add-column:before{content:\"\\e932\"}.icon-add-tooltip:before{content:\"\\e933\"}.icon-admin:before{content:\"\\e934\"}.icon-annual-cycle:before{content:\"\\e935\"}.icon-assignment-repete:before{content:\"\\e936\"}.icon-barrier-add:before{content:\"\\e937\"}.icon-barrier-edit:before{content:\"\\e938\"}.icon-barrier-view:before{content:\"\\e939\"}.icon-button-group:before{content:\"\\e93a\"}.icon-chemical-manager:before{content:\"\\e93b\"}.icon-chronic-health-hazard .path1:before{content:\"\\e93c\";color:#e32730}.icon-chronic-health-hazard .path2:before{content:\"\\e93d\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path3:before{content:\"\\e93e\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path4:before{content:\"\\e93f\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path5:before{content:\"\\e940\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path6:before{content:\"\\e941\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path7:before{content:\"\\e942\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path8:before{content:\"\\e943\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path9:before{content:\"\\e944\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path10:before{content:\"\\e945\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path11:before{content:\"\\e946\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path12:before{content:\"\\e947\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path13:before{content:\"\\e948\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path14:before{content:\"\\e949\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path15:before{content:\"\\e94a\";margin-left:-1em;color:#323232}.icon-contingency:before{content:\"\\e94b\"}.icon-corrosive .path1:before{content:\"\\e94c\";color:#323232}.icon-corrosive .path2:before{content:\"\\e94d\";margin-left:-1em;color:#323232}.icon-corrosive .path3:before{content:\"\\e94e\";margin-left:-1em;color:#323232}.icon-corrosive .path4:before{content:\"\\e94f\";margin-left:-1em;color:#323232}.icon-corrosive .path5:before{content:\"\\e950\";margin-left:-1em;color:#323232}.icon-corrosive .path6:before{content:\"\\e951\";margin-left:-1em;color:#323232}.icon-corrosive .path7:before{content:\"\\e952\";margin-left:-1em;color:#323232}.icon-corrosive .path8:before{content:\"\\e953\";margin-left:-1em;color:#323232}.icon-corrosive .path9:before{content:\"\\e954\";margin-left:-1em;color:#323232}.icon-corrosive .path10:before{content:\"\\e955\";margin-left:-1em;color:#323232}.icon-corrosive .path11:before{content:\"\\e956\";margin-left:-1em;color:#323232}.icon-corrosive .path12:before{content:\"\\e957\";margin-left:-1em;color:#323232}.icon-corrosive .path13:before{content:\"\\e958\";margin-left:-1em;color:#323232}.icon-corrosive .path14:before{content:\"\\e959\";margin-left:-1em;color:#323232}.icon-corrosive .path15:before{content:\"\\e95a\";margin-left:-1em;color:#323232}.icon-corrosive .path16:before{content:\"\\e95b\";margin-left:-1em;color:#323232}.icon-corrosive .path17:before{content:\"\\e95c\";margin-left:-1em;color:#323232}.icon-corrosive .path18:before{content:\"\\e95d\";margin-left:-1em;color:#323232}.icon-corrosive .path19:before{content:\"\\e95e\";margin-left:-1em;color:#323232}.icon-corrosive .path20:before{content:\"\\e95f\";margin-left:-1em;color:#323232}.icon-corrosive .path21:before{content:\"\\e960\";margin-left:-1em;color:#e32730}.icon-dashboard:before{content:\"\\e961\"}.icon-database-sds:before{content:\"\\e962\"}.icon-description-add:before{content:\"\\e963\"}.icon-description-edit:before{content:\"\\e964\"}.icon-description-view:before{content:\"\\e965\";color:#666}.icon-document-read .path1:before{content:\"\\e966\";color:#000;opacity:.6}.icon-document-read .path2:before{content:\"\\e967\";margin-left:-1em;color:#fff}.icon-document-read .path3:before{content:\"\\e968\";margin-left:-1em;color:#000;opacity:.6}.icon-draft:before{content:\"\\e969\"}.icon-expired-off:before{content:\"\\e96a\"}.icon-expired-on:before{content:\"\\e96b\"}.icon-explosive .path1:before{content:\"\\e96c\";color:#e32730}.icon-explosive .path2:before{content:\"\\e96d\";margin-left:-1em;color:#323232}.icon-explosive .path3:before{content:\"\\e96e\";margin-left:-1em;color:#323232}.icon-explosive .path4:before{content:\"\\e96f\";margin-left:-1em;color:#323232}.icon-explosive .path5:before{content:\"\\e970\";margin-left:-1em;color:#323232}.icon-explosive .path6:before{content:\"\\e971\";margin-left:-1em;color:#323232}.icon-explosive .path7:before{content:\"\\e972\";margin-left:-1em;color:#323232}.icon-explosive .path8:before{content:\"\\e973\";margin-left:-1em;color:#323232}.icon-explosive .path9:before{content:\"\\e974\";margin-left:-1em;color:#323232}.icon-explosive .path10:before{content:\"\\e975\";margin-left:-1em;color:#323232}.icon-explosive .path11:before{content:\"\\e976\";margin-left:-1em;color:#323232}.icon-explosive .path12:before{content:\"\\e977\";margin-left:-1em;color:#323232}.icon-explosive .path13:before{content:\"\\e978\";margin-left:-1em;color:#323232}.icon-explosive .path14:before{content:\"\\e979\";margin-left:-1em;color:#323232}.icon-explosive .path15:before{content:\"\\e97a\";margin-left:-1em;color:#323232}.icon-explosive .path16:before{content:\"\\e97b\";margin-left:-1em;color:#323232}.icon-explosive .path17:before{content:\"\\e97c\";margin-left:-1em;color:#323232}.icon-explosive .path18:before{content:\"\\e97d\";margin-left:-1em;color:#323232}.icon-explosive .path19:before{content:\"\\e97e\";margin-left:-1em;color:#323232}.icon-explosive .path20:before{content:\"\\e97f\";margin-left:-1em;color:#323232}.icon-explosive .path21:before{content:\"\\e980\";margin-left:-1em;color:#323232}.icon-explosive .path22:before{content:\"\\e981\";margin-left:-1em;color:#323232}.icon-explosive .path23:before{content:\"\\e982\";margin-left:-1em;color:#323232}.icon-explosive .path24:before{content:\"\\e983\";margin-left:-1em;color:#323232}.icon-explosive .path25:before{content:\"\\e984\";margin-left:-1em;color:#323232}.icon-explosive .path26:before{content:\"\\e985\";margin-left:-1em;color:#323232}.icon-explosive .path27:before{content:\"\\e986\";margin-left:-1em;color:#323232}.icon-explosive .path28:before{content:\"\\e987\";margin-left:-1em;color:#323232}.icon-explosive .path29:before{content:\"\\e988\";margin-left:-1em;color:#323232}.icon-explosive .path30:before{content:\"\\e989\";margin-left:-1em;color:#323232}.icon-explosive .path31:before{content:\"\\e98a\";margin-left:-1em;color:#323232}.icon-explosive .path32:before{content:\"\\e98b\";margin-left:-1em;color:#323232}.icon-explosive .path33:before{content:\"\\e98c\";margin-left:-1em;color:#323232}.icon-explosive .path34:before{content:\"\\e98d\";margin-left:-1em;color:#323232}.icon-explosive .path35:before{content:\"\\e98e\";margin-left:-1em;color:#323232}.icon-explosive .path36:before{content:\"\\e98f\";margin-left:-1em;color:#323232}.icon-explosive .path37:before{content:\"\\e990\";margin-left:-1em;color:#323232}.icon-explosive .path38:before{content:\"\\e991\";margin-left:-1em;color:#323232}.icon-explosive .path39:before{content:\"\\e992\";margin-left:-1em;color:#323232}.icon-explosive .path40:before{content:\"\\e993\";margin-left:-1em;color:#323232}.icon-explosive .path41:before{content:\"\\e994\";margin-left:-1em;color:#323232}.icon-explosive .path42:before{content:\"\\e995\";margin-left:-1em;color:#323232}.icon-explosive .path43:before{content:\"\\e996\";margin-left:-1em;color:#323232}.icon-explosive .path44:before{content:\"\\e997\";margin-left:-1em;color:#323232}.icon-explosive .path45:before{content:\"\\e998\";margin-left:-1em;color:#323232}.icon-explosive .path46:before{content:\"\\e999\";margin-left:-1em;color:#323232}.icon-file-excel:before{content:\"\\e99a\"}.icon-file-pdf:before{content:\"\\e99b\"}.icon-file-pdf-verified .path1:before{content:\"\\e99c\";color:#000;opacity:.6}.icon-file-pdf-verified .path2:before{content:\"\\e99d\";margin-left:-1em;color:#fff}.icon-file-pdf-verified .path3:before{content:\"\\e99e\";margin-left:-1em;color:#000;opacity:.6}.icon-file-word:before{content:\"\\e99f\"}.icon-filter-alt:before{content:\"\\e9a0\"}.icon-flammable .path1:before{content:\"\\e9a1\";color:#323232}.icon-flammable .path2:before{content:\"\\e9a2\";margin-left:-1em;color:#323232}.icon-flammable .path3:before{content:\"\\e9a3\";margin-left:-1em;color:#e32730}.icon-gas-under-pressure .path1:before{content:\"\\e9a4\";color:#323232}.icon-gas-under-pressure .path2:before{content:\"\\e9a5\";margin-left:-1em;color:#e32730}.icon-health-hazard .path1:before{content:\"\\e9a6\";color:#323232}.icon-health-hazard .path2:before{content:\"\\e9a7\";margin-left:-1em;color:#e32730}.icon-line-break:before{content:\"\\e9a8\"}.icon-location:before{content:\"\\e9a9\"}.icon-measure-add:before{content:\"\\e9aa\"}.icon-measure-edit:before{content:\"\\e9ab\"}.icon-measure-view:before{content:\"\\e9ac\";color:#666}.icon-messages:before{content:\"\\e9ad\"}.icon-monitoring:before{content:\"\\e9ae\";color:#666}.icon-move:before{content:\"\\e9af\"}.icon-oxidizing .path1:before{content:\"\\e9b0\";color:#e32730}.icon-oxidizing .path2:before{content:\"\\e9b1\";margin-left:-1em;color:#323232}.icon-oxidizing .path3:before{content:\"\\e9b2\";margin-left:-1em;color:#323232}.icon-oxidizing .path4:before{content:\"\\e9b3\";margin-left:-1em;color:#323232}.icon-process-area-closed:before{content:\"\\e9b4\"}.icon-process-area-open:before{content:\"\\e9b5\"}.icon-process-linked .path1:before{content:\"\\e9b6\";color:#000;opacity:.6}.icon-process-linked .path2:before{content:\"\\e9b7\";margin-left:-1em;color:#666}.icon-risk:before{content:\"\\e9b8\"}.icon-search-in-file:before{content:\"\\e9b9\"}.icon-sort-ascending:before{content:\"\\e9ba\"}.icon-sort-descending:before{content:\"\\e9bb\"}.icon-subscript:before{content:\"\\e9bc\"}.icon-superscript:before{content:\"\\e9bd\"}.icon-syncronice-favorites:before{content:\"\\e9be\"}.icon-system-settings:before{content:\"\\e9bf\"}.icon-view-three-outlined:before{content:\"\\e9c0\"}.icon-workplace-safety:before{content:\"\\e9c1\"}.icon-checklist:before{content:\"\\e900\"}.icon-department-document .path1:before{content:\"\\e901\";color:#000;opacity:.6}.icon-department-document .path2:before{content:\"\\e902\";margin-left:-1em;color:#00804c}.icon-department-folder-closed .path1:before{content:\"\\e903\";color:#000;opacity:.6}.icon-department-folder-closed .path2:before{content:\"\\e904\";margin-left:-1em;color:#00804c}.icon-department-folder-open .path1:before{content:\"\\e905\";color:#000;opacity:.6}.icon-department-folder-open .path2:before{content:\"\\e906\";margin-left:-1em;color:#00804c}.icon-deviation:before{content:\"\\e907\"}.icon-dropdown-folder .path1:before{content:\"\\e908\";color:#00324e}.icon-dropdown-folder .path2:before{content:\"\\e909\";margin-left:-1em;color:#fff;opacity:.6}.icon-enterprise-document .path1:before{content:\"\\e90a\";color:#000;opacity:.6}.icon-enterprise-document .path2:before{content:\"\\e90b\";margin-left:-1em;color:#cf4714}.icon-enterprise-folder-closed .path1:before{content:\"\\e90c\";color:#000;opacity:.6}.icon-enterprise-folder-closed .path2:before{content:\"\\e90d\";margin-left:-1em;color:#cf4714}.icon-enterprise-folder-open .path1:before{content:\"\\e90e\";color:#000;opacity:.6}.icon-enterprise-folder-open .path2:before{content:\"\\e90f\";margin-left:-1em;color:#cf4714}.icon-folder-closed:before{content:\"\\e910\"}.icon-folder-open:before{content:\"\\e911\"}.icon-keyboard_arrow_down:before{content:\"\\e912\"}.icon-keyboard_arrow_up:before{content:\"\\e913\"}.icon-local-document .path1:before{content:\"\\e914\";color:#000;opacity:.6}.icon-local-document .path2:before{content:\"\\e915\";margin-left:-1em;color:#1954a9}.icon-local-folder-closed .path1:before{content:\"\\e916\";color:#000;opacity:.6}.icon-local-folder-closed .path2:before{content:\"\\e917\";margin-left:-1em;color:#1954a9}.icon-local-folder-open .path1:before{content:\"\\e918\";color:#000;opacity:.6}.icon-local-folder-open .path2:before{content:\"\\e919\";margin-left:-1em;color:#1954a9}.icon-process:before{content:\"\\e91a\"}.icon-regional-document .path1:before{content:\"\\e91c\";color:#000;opacity:.6}.icon-regional-document .path2:before{content:\"\\e91d\";margin-left:-1em;color:#662e0d}.icon-regional-folder-closed .path1:before{content:\"\\e91e\";color:#000;opacity:.6}.icon-regional-folder-closed .path2:before{content:\"\\e91f\";margin-left:-1em;color:#662e0d}.icon-regional-folder-open .path1:before{content:\"\\e920\";color:#000;opacity:.6}.icon-regional-folder-open .path2:before{content:\"\\e921\";margin-left:-1em;color:#662e0d}.select-access-paginator{max-height:150px!important}.mat-expansion-panel .mat-expansion-panel-body{padding-top:0!important}.mat-expansion-panel-header{font-size:12px!important;font-weight:800!important}.w-100{width:100%}.h-100{height:100%}.pointer{cursor:pointer}.fw-600{font-weight:600}.label-item{font-weight:600;color:var(--ws-text-primary)}.sub-label{color:var(--ws-text-secondary)}.fs-14{font-size:14px}.fs-12{font-size:12px}.color-primary{color:var(--primary-light)!important}.header-title{font-weight:600;color:var(--ws-text-primary);font-size:16px}.chip-item-result{max-width:250px}.chip-item-result.item-department .qms-chip-body{display:flex;justify-content:center;align-items:center}.remove-chip-icon{color:#0000004d;cursor:pointer}.remove-chip-icon:hover{color:#000000b3}.mat-form-field-wrapper{padding-bottom:8px!important}.mat-expansion-panel{border-radius:unset!important}.mat-expansion-panel-header:not([aria-disabled=true]){background:unset}.mat-expansion-panel.mat-expanded .mat-expansion-panel-header{background:#e5eefb}.mat-expansion-panel.mat-expanded .mat-expansion-panel-header .qms-line{color:var(--primary-light)!important}.access-dialog-header{display:flex;justify-content:space-between;align-items:center}.mat-chip-list-wrapper{margin:unset!important}.item-list-wrapper{height:40vh;padding:4px 4px 4px 0;overflow-y:auto}.item-list-wrapper.no-result{height:50vh;display:flex;justify-content:center;align-items:center}.item-list-wrapper .item{min-height:40px}.item-list-wrapper .item-without-checkbox{min-height:45px;display:flex;justify-content:space-between;align-items:center;padding:4px 8px;cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:4px;transition:background .3s ease}.item-list-wrapper .item-without-checkbox.active{background:var(--primary-light-12-opacity)}.item-list-wrapper .item-without-checkbox:hover{background:var(--primary-light-6-opacity)}.item-list-wrapper .item-without-checkbox .mat-icon{color:var(--primary-light)!important}.confirm__button__groups .btn-add>.qms-btn-wrapper{display:flex;justify-content:center;align-items:center}.qms-dialog-content{display:grid;column-gap:8px}.qms-dialog-content.active{grid-template-columns:2fr 1fr;min-height:50vh}.qms-dialog-content .access-dialog-wraper .field-select-option .mat-form-field-wrapper{padding-bottom:16px!important}.qms-dialog-content .access-dialog-wraper .field-select-option .mat-form-field-underline{bottom:16px!important}.qms-dialog-content .result-wrapper{position:relative;width:100%;margin-left:8px}.qms-dialog-content .result-wrapper:after{position:absolute;content:\"\";top:0;left:0;background-color:#0000001f;height:100%;width:1px}.qms-dialog-content .result-selected-container{position:absolute;inset:0;overflow-y:auto;padding:0 8px}.qms-dialog-content .result-selected-container .result-header{height:51px;display:flex;align-items:center;position:sticky;top:0;z-index:10;padding:0!important;background:#fff;margin-bottom:12px}.qms-dialog-content .result-selected-container .result-header:after{position:absolute;content:\"\";bottom:0;left:0;width:100%;height:1px;background:#0000000a}.qms-dialog-content .result-selected-container .result-header .mat-mdc-card-content{height:51px;width:100%;padding-left:4px;display:flex;align-items:center;background-color:#0000000a}.option-selected-content .group-filter-person-option{display:flex;flex-direction:row-reverse;justify-content:center;align-items:center;gap:8px}span.chip-item__content_name{display:inline-block;max-width:175px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}span.chip-item-children__count{font-size:.75rem;color:#00000080;font-weight:600}.mat-mdc-slide-toggle.qms-group-options{padding:unset!important}.input-option-filter .mat-form-field-wrapper{padding-bottom:8px!important}.input-option-filter .mat-form-field-underline{bottom:8px!important}.slide-toggle{margin-bottom:8px}.confirm__button__groups.none-option{margin-top:85px}.btn-icon-clear{position:relative;padding:0 1rem}.btn-icon-clear .qms-btn-icon{margin-right:unset!important}.btn-icon-clear:after{position:absolute;content:\"\";left:0;top:0;height:100%;width:1px;background:#0000004d}.qms-paginator .mat-mdc-paginator-container .qms-total-result{margin-bottom:0;margin-right:12px;height:100%;display:flex;align-items:center}.qms-paginator .mat-mdc-paginator-container .qms-total-result span{font-weight:600;color:#000c}.qms-paginator .mat-mdc-paginator-container .qms-paginator-range-actions{margin-bottom:0;column-gap:2px}.qms-paginator .mat-mdc-paginator-container .qms-paginator-range-actions>.qms-total-result{margin-bottom:0}.qms-paginator .qms-paginator-page-size{align-items:center}.qms-paginator .mat-form-field-wrapper{padding-bottom:0!important}.mat-mdc-checkbox.checkbox-all .mat-checkbox-label{flex-direction:row!important;align-items:center!important;column-gap:4px!important}.mat-expansion-panel.qms-expansion{margin:0!important}.access-department .qms-view-search-result{height:100%!important}.access-department .qms-view-search-result .result{max-height:calc(100% - 80px)!important}.access-department .loading-container{height:calc(100% - 40px)!important}.qms-loading-container{height:45vh;overflow:hidden;display:grid;grid-template-rows:repeat(60px)}.qms-loading-container .qms-loader{position:relative;width:100%;height:100%;padding:10px 0;overflow:hidden}.qms-loading-container .qms-loader:after{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;background:linear-gradient(110deg,#e9e9e900,#e3e3e300 40%,#e3e3e380 50%,#e3e3e300 60% 100%);animation:animate-loading 1.2s linear infinite}.qms-loading-container .qms-loader__wrapper{position:relative;width:100%;height:100%}.qms-loading-container .qms-loader__wrapper .row-loader{background-color:#eee;position:absolute;left:0;width:100%;height:40px;overflow:hidden}@keyframes animate-loading{0%{transform:translate(-100%)}to{transform:translate(100%)}}.btn-close-dialog.qms-btn-icon:focus:not(:hover){background-color:unset!important;color:unset!important}\n"], dependencies: [{ kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i11.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i11.MatLabel, selector: "mat-label" }, { kind: "directive", type: i11.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i7$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: QMSSearchFieldDirective, selector: "mat-form-field[qms-search-field]", inputs: ["isLoading"] }, { kind: "directive", type: QMSInputClearDirective, selector: "[qms-input-clear]" }, { kind: "directive", type: QMSFormFieldDirective, selector: "[qms-form]" }, { kind: "directive", type: QMSGroupOptionDirective, selector: "[qms-group-options]", inputs: ["label"] }, { kind: "directive", type: AutocompleteOffDirective, selector: "[qms-group-options]" }, { kind: "directive", type: QMSInputChipDirective, selector: "mat-chip[qms-chip]", inputs: ["selected"] }, { kind: "directive", type: QMSChipBodyDirective, selector: "[qms-chip-body]" }, { kind: "directive", type: QMSScrollbarDirective, selector: "[qms-scrollbar]", inputs: ["isNoneBackground"] }, { kind: "directive", type: QMSToolTipRendererDirective, selector: "[qms-tool-tip]", inputs: ["showToolTip", "mode", "qms-tool-tip", "contentTemplate", "position"] }, { kind: "directive", type: EllipsifyDirective, selector: "[qms-elipsify]" }, { kind: "directive", type: QMSContentChangesDirective, selector: "[qmsContentChanges]", inputs: ["qmsContentChanges"] }, { kind: "component", type: i13.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i13.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i14.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i23$1.MatSelectSearchComponent, selector: "ngx-mat-select-search", inputs: ["placeholderLabel", "type", "closeIcon", "closeSvgIcon", "noEntriesFoundLabel", "clearSearchInput", "searching", "disableInitialFocus", "enableClearOnEscapePressed", "preventHomeEndKeyPropagation", "disableScrollToActiveOnOptionsChanged", "ariaLabel", "showToggleAllCheckbox", "toggleAllCheckboxChecked", "toggleAllCheckboxIndeterminate", "toggleAllCheckboxTooltipMessage", "toggleAllCheckboxTooltipPosition", "hideClearSearchButton", "alwaysRestoreSelectedOptionsMulti", "recreateValuesArray"], outputs: ["toggleAll"] }, { kind: "directive", type: i8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i8.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1$2.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: QMSButton, selector: "button[qms-btn], button[qms-btn-lg], button[qms-btn-outlined],\n               button[qms-btn-outlined-lg], button[qms-btn-text], button[qms-btn-text-lg],\n               button[qms-btn-fab],button[qms-btn-fab-sm],button[qms-btn-fab-ext],\n               button[qms-btn-fab-outlined],button[qms-btn-fab-outlined-sm],button[qms-btn-fab-outlined-ext]", inputs: ["disabled", "color"], exportAs: ["qmsButton"] }, { kind: "component", type: QMSButtonIcon, selector: "button[qms-btn-icon]", inputs: ["disabled", "color", "active"], exportAs: ["qmsButtonIcon"] }, { kind: "component", type: i16.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i11$2.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled", "tabIndex"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: i11$2.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i11$2.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "component", type: i23.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i9.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i9.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "component", type: SelectDepartmentTreeComponent, selector: "qms-select-department-tree", inputs: ["rowsSkeleton", "height", "config", "maxWidthNode"], outputs: ["onSearchEvent", "onPagingSearchEvent", "onValueChangeEvent", "selectionNodeChangeEvent", "onCheckNodeEvent", "onExpandNodeEvent", "onLoadMoreEvent", "onCheckItemSearchEvent", "onCheckAllItemSearchEvent", "toggleIncludeChildEvent", "isPushingChildNodes"] }, { kind: "component", type: i17.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "directive", type: QMSListLine, selector: "[qms-line]", inputs: ["size", "type", "color"] }, { kind: "directive", type: QMSListExpansion, selector: "[qms-expansion]" }, { kind: "component", type: QMSPaginatorComponent, selector: "qms-paginator", inputs: ["numHidden", "size", "pageSizeOptions", "pageSize", "length", "pageIndex", "overlayPanelClass"], outputs: ["page"] }], animations: [SelectAccessAnimationTrigger], encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "tree", first: true, predicate: ["tree"], descendants: true, read: SelectDepartmentTreeComponent }, { propertyName: "pagingPerson", first: true, predicate: ["pagingPerson"], descendants: true }, { propertyName: "pagingUserGroup", first: true, predicate: ["pagingUserGroup"], descendants: true }], ngImport: i0, template: "<h3 mat-dialog-title class=\"more-action\">\n  {{dialogData.titleDialog || LANG.SELECT_ACCESS}}\n  <button matDialogClose class=\"close-btn\" qms-btn-icon color=\"light\">\n    <mat-icon class=\"mat-icons-outlined\">close</mat-icon>\n  </button>\n</h3>\n<mat-dialog-content>\n  <div [class.active]=\"optionSelect.value !== null\" 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 mb-2\"\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        <div class=\"option-selected-content\">\n          <ng-container *ngIf=\"optionSelect.value === OPTION_ENUM.PERSON\">\n            <form *ngIf=\"personForm\" [formGroup]=\"personForm\">\n              <div class=\"group-filter-person-option\">\n                <mat-form-field *ngIf=\"optionFilterPersonDataGlobal.userGroups.length\" qms-form qms-select-input\n                  class=\"w-100  mb-2\" 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 \" matSuffix\n                    aria-label=\"Clear\" *ngIf=\"personForm.get('userGroup').value && !getLoading$.value\">\n                    <mat-icon>close</mat-icon>\n                  </span>\n                </mat-form-field>\n                <mat-form-field *ngIf=\"optionFilterPersonDataGlobal.departments.length\"\n                  class=\"w-100 input-select-option  mb-2\" 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  mb-2\" 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\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] *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            </form>\n          </ng-container>\n          <ng-container *ngIf=\"optionSelect.value === OPTION_ENUM.USER_GROUP\">\n            <div>\n              <form (submit)=\"onFilterUserGroup()\">\n                <mat-form-field class=\"w-100  mb-2\" 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 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              <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] 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            </div>\n          </ng-container>\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          <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          <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          <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\n</mat-dialog-content>\n<mat-dialog-actions align=\"end\">\n  <mat-divider class=\"w-100 mb-3\"></mat-divider>\n  <button class=\"me-2\" qms-btn-text mat-dialog-close>\n    {{dialogData.cancelTitle || LANG.CANCEL}}\n  </button>\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>{{dialogData.confirmTitle || LANG.ADD}}</span>\n  </button>\n</mat-dialog-actions>\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<ng-template #listChip let-data=\"data\" let-type=\"type\">\n  <mat-chip-set [@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\n        <button matChipRemove *ngIf=\"allowRemove(type, item)\" (click)=\"onRemoveChip(type,item, i)\">\n          <mat-icon 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        </button>\n        <button matChipRemove *ngIf=\"!allowRemove(type, item) && dialogData.formatMsgDisable\"\n          (click)=\"onRemoveChip(type,item, i)\">\n          <mat-icon 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        </button>\n      </mat-chip>\n    </div>\n  </mat-chip-set>\n</ng-template>\n\n\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<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<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<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>", styles: ["@font-face{font-family:icomoon;src:url(/assets/fonts/icomoon.eot?aghldx);src:url(/assets/fonts/icomoon.eot?aghldx#iefix) format(\"embedded-opentype\"),url(/assets/fonts/icomoon.ttf?aghldx) format(\"truetype\"),url(/assets/fonts/icomoon.woff?aghldx) format(\"woff\"),url(/assets/fonts/icomoon.svg?aghldx#icomoon) format(\"svg\");font-weight:400;font-style:normal;font-display:block}[class^=icon-],[class*=\" icon-\"]{font-family:icomoon!important;speak:never;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-acutely-toxic .path1:before{content:\"\\e91b\";color:#e32730}.icon-acutely-toxic .path2:before{content:\"\\e922\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path3:before{content:\"\\e923\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path4:before{content:\"\\e924\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path5:before{content:\"\\e925\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path6:before{content:\"\\e926\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path7:before{content:\"\\e927\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path8:before{content:\"\\e928\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path9:before{content:\"\\e929\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path10:before{content:\"\\e92a\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path11:before{content:\"\\e92b\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path12:before{content:\"\\e92c\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path13:before{content:\"\\e92d\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path14:before{content:\"\\e92e\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path15:before{content:\"\\e92f\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path16:before{content:\"\\e930\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path17:before{content:\"\\e931\";margin-left:-1em;color:#323232}.icon-add-column:before{content:\"\\e932\"}.icon-add-tooltip:before{content:\"\\e933\"}.icon-admin:before{content:\"\\e934\"}.icon-annual-cycle:before{content:\"\\e935\"}.icon-assignment-repete:before{content:\"\\e936\"}.icon-barrier-add:before{content:\"\\e937\"}.icon-barrier-edit:before{content:\"\\e938\"}.icon-barrier-view:before{content:\"\\e939\"}.icon-button-group:before{content:\"\\e93a\"}.icon-chemical-manager:before{content:\"\\e93b\"}.icon-chronic-health-hazard .path1:before{content:\"\\e93c\";color:#e32730}.icon-chronic-health-hazard .path2:before{content:\"\\e93d\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path3:before{content:\"\\e93e\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path4:before{content:\"\\e93f\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path5:before{content:\"\\e940\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path6:before{content:\"\\e941\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path7:before{content:\"\\e942\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path8:before{content:\"\\e943\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path9:before{content:\"\\e944\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path10:before{content:\"\\e945\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path11:before{content:\"\\e946\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path12:before{content:\"\\e947\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path13:before{content:\"\\e948\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path14:before{content:\"\\e949\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path15:before{content:\"\\e94a\";margin-left:-1em;color:#323232}.icon-contingency:before{content:\"\\e94b\"}.icon-corrosive .path1:before{content:\"\\e94c\";color:#323232}.icon-corrosive .path2:before{content:\"\\e94d\";margin-left:-1em;color:#323232}.icon-corrosive .path3:before{content:\"\\e94e\";margin-left:-1em;color:#323232}.icon-corrosive .path4:before{content:\"\\e94f\";margin-left:-1em;color:#323232}.icon-corrosive .path5:before{content:\"\\e950\";margin-left:-1em;color:#323232}.icon-corrosive .path6:before{content:\"\\e951\";margin-left:-1em;color:#323232}.icon-corrosive .path7:before{content:\"\\e952\";margin-left:-1em;color:#323232}.icon-corrosive .path8:before{content:\"\\e953\";margin-left:-1em;color:#323232}.icon-corrosive .path9:before{content:\"\\e954\";margin-left:-1em;color:#323232}.icon-corrosive .path10:before{content:\"\\e955\";margin-left:-1em;color:#323232}.icon-corrosive .path11:before{content:\"\\e956\";margin-left:-1em;color:#323232}.icon-corrosive .path12:before{content:\"\\e957\";margin-left:-1em;color:#323232}.icon-corrosive .path13:before{content:\"\\e958\";margin-left:-1em;color:#323232}.icon-corrosive .path14:before{content:\"\\e959\";margin-left:-1em;color:#323232}.icon-corrosive .path15:before{content:\"\\e95a\";margin-left:-1em;color:#323232}.icon-corrosive .path16:before{content:\"\\e95b\";margin-left:-1em;color:#323232}.icon-corrosive .path17:before{content:\"\\e95c\";margin-left:-1em;color:#323232}.icon-corrosive .path18:before{content:\"\\e95d\";margin-left:-1em;color:#323232}.icon-corrosive .path19:before{content:\"\\e95e\";margin-left:-1em;color:#323232}.icon-corrosive .path20:before{content:\"\\e95f\";margin-left:-1em;color:#323232}.icon-corrosive .path21:before{content:\"\\e960\";margin-left:-1em;color:#e32730}.icon-dashboard:before{content:\"\\e961\"}.icon-database-sds:before{content:\"\\e962\"}.icon-description-add:before{content:\"\\e963\"}.icon-description-edit:before{content:\"\\e964\"}.icon-description-view:before{content:\"\\e965\";color:#666}.icon-document-read .path1:before{content:\"\\e966\";color:#000;opacity:.6}.icon-document-read .path2:before{content:\"\\e967\";margin-left:-1em;color:#fff}.icon-document-read .path3:before{content:\"\\e968\";margin-left:-1em;color:#000;opacity:.6}.icon-draft:before{content:\"\\e969\"}.icon-expired-off:before{content:\"\\e96a\"}.icon-expired-on:before{content:\"\\e96b\"}.icon-explosive .path1:before{content:\"\\e96c\";color:#e32730}.icon-explosive .path2:before{content:\"\\e96d\";margin-left:-1em;color:#323232}.icon-explosive .path3:before{content:\"\\e96e\";margin-left:-1em;color:#323232}.icon-explosive .path4:before{content:\"\\e96f\";margin-left:-1em;color:#323232}.icon-explosive .path5:before{content:\"\\e970\";margin-left:-1em;color:#323232}.icon-explosive .path6:before{content:\"\\e971\";margin-left:-1em;color:#323232}.icon-explosive .path7:before{content:\"\\e972\";margin-left:-1em;color:#323232}.icon-explosive .path8:before{content:\"\\e973\";margin-left:-1em;color:#323232}.icon-explosive .path9:before{content:\"\\e974\";margin-left:-1em;color:#323232}.icon-explosive .path10:before{content:\"\\e975\";margin-left:-1em;color:#323232}.icon-explosive .path11:before{content:\"\\e976\";margin-left:-1em;color:#323232}.icon-explosive .path12:before{content:\"\\e977\";margin-left:-1em;color:#323232}.icon-explosive .path13:before{content:\"\\e978\";margin-left:-1em;color:#323232}.icon-explosive .path14:before{content:\"\\e979\";margin-left:-1em;color:#323232}.icon-explosive .path15:before{content:\"\\e97a\";margin-left:-1em;color:#323232}.icon-explosive .path16:before{content:\"\\e97b\";margin-left:-1em;color:#323232}.icon-explosive .path17:before{content:\"\\e97c\";margin-left:-1em;color:#323232}.icon-explosive .path18:before{content:\"\\e97d\";margin-left:-1em;color:#323232}.icon-explosive .path19:before{content:\"\\e97e\";margin-left:-1em;color:#323232}.icon-explosive .path20:before{content:\"\\e97f\";margin-left:-1em;color:#323232}.icon-explosive .path21:before{content:\"\\e980\";margin-left:-1em;color:#323232}.icon-explosive .path22:before{content:\"\\e981\";margin-left:-1em;color:#323232}.icon-explosive .path23:before{content:\"\\e982\";margin-left:-1em;color:#323232}.icon-explosive .path24:before{content:\"\\e983\";margin-left:-1em;color:#323232}.icon-explosive .path25:before{content:\"\\e984\";margin-left:-1em;color:#323232}.icon-explosive .path26:before{content:\"\\e985\";margin-left:-1em;color:#323232}.icon-explosive .path27:before{content:\"\\e986\";margin-left:-1em;color:#323232}.icon-explosive .path28:before{content:\"\\e987\";margin-left:-1em;color:#323232}.icon-explosive .path29:before{content:\"\\e988\";margin-left:-1em;color:#323232}.icon-explosive .path30:before{content:\"\\e989\";margin-left:-1em;color:#323232}.icon-explosive .path31:before{content:\"\\e98a\";margin-left:-1em;color:#323232}.icon-explosive .path32:before{content:\"\\e98b\";margin-left:-1em;color:#323232}.icon-explosive .path33:before{content:\"\\e98c\";margin-left:-1em;color:#323232}.icon-explosive .path34:before{content:\"\\e98d\";margin-left:-1em;color:#323232}.icon-explosive .path35:before{content:\"\\e98e\";margin-left:-1em;color:#323232}.icon-explosive .path36:before{content:\"\\e98f\";margin-left:-1em;color:#323232}.icon-explosive .path37:before{content:\"\\e990\";margin-left:-1em;color:#323232}.icon-explosive .path38:before{content:\"\\e991\";margin-left:-1em;color:#323232}.icon-explosive .path39:before{content:\"\\e992\";margin-left:-1em;color:#323232}.icon-explosive .path40:before{content:\"\\e993\";margin-left:-1em;color:#323232}.icon-explosive .path41:before{content:\"\\e994\";margin-left:-1em;color:#323232}.icon-explosive .path42:before{content:\"\\e995\";margin-left:-1em;color:#323232}.icon-explosive .path43:before{content:\"\\e996\";margin-left:-1em;color:#323232}.icon-explosive .path44:before{content:\"\\e997\";margin-left:-1em;color:#323232}.icon-explosive .path45:before{content:\"\\e998\";margin-left:-1em;color:#323232}.icon-explosive .path46:before{content:\"\\e999\";margin-left:-1em;color:#323232}.icon-file-excel:before{content:\"\\e99a\"}.icon-file-pdf:before{content:\"\\e99b\"}.icon-file-pdf-verified .path1:before{content:\"\\e99c\";color:#000;opacity:.6}.icon-file-pdf-verified .path2:before{content:\"\\e99d\";margin-left:-1em;color:#fff}.icon-file-pdf-verified .path3:before{content:\"\\e99e\";margin-left:-1em;color:#000;opacity:.6}.icon-file-word:before{content:\"\\e99f\"}.icon-filter-alt:before{content:\"\\e9a0\"}.icon-flammable .path1:before{content:\"\\e9a1\";color:#323232}.icon-flammable .path2:before{content:\"\\e9a2\";margin-left:-1em;color:#323232}.icon-flammable .path3:before{content:\"\\e9a3\";margin-left:-1em;color:#e32730}.icon-gas-under-pressure .path1:before{content:\"\\e9a4\";color:#323232}.icon-gas-under-pressure .path2:before{content:\"\\e9a5\";margin-left:-1em;color:#e32730}.icon-health-hazard .path1:before{content:\"\\e9a6\";color:#323232}.icon-health-hazard .path2:before{content:\"\\e9a7\";margin-left:-1em;color:#e32730}.icon-line-break:before{content:\"\\e9a8\"}.icon-location:before{content:\"\\e9a9\"}.icon-measure-add:before{content:\"\\e9aa\"}.icon-measure-edit:before{content:\"\\e9ab\"}.icon-measure-view:before{content:\"\\e9ac\";color:#666}.icon-messages:before{content:\"\\e9ad\"}.icon-monitoring:before{content:\"\\e9ae\";color:#666}.icon-move:before{content:\"\\e9af\"}.icon-oxidizing .path1:before{content:\"\\e9b0\";color:#e32730}.icon-oxidizing .path2:before{content:\"\\e9b1\";margin-left:-1em;color:#323232}.icon-oxidizing .path3:before{content:\"\\e9b2\";margin-left:-1em;color:#323232}.icon-oxidizing .path4:before{content:\"\\e9b3\";margin-left:-1em;color:#323232}.icon-process-area-closed:before{content:\"\\e9b4\"}.icon-process-area-open:before{content:\"\\e9b5\"}.icon-process-linked .path1:before{content:\"\\e9b6\";color:#000;opacity:.6}.icon-process-linked .path2:before{content:\"\\e9b7\";margin-left:-1em;color:#666}.icon-risk:before{content:\"\\e9b8\"}.icon-search-in-file:before{content:\"\\e9b9\"}.icon-sort-ascending:before{content:\"\\e9ba\"}.icon-sort-descending:before{content:\"\\e9bb\"}.icon-subscript:before{content:\"\\e9bc\"}.icon-superscript:before{content:\"\\e9bd\"}.icon-syncronice-favorites:before{content:\"\\e9be\"}.icon-system-settings:before{content:\"\\e9bf\"}.icon-view-three-outlined:before{content:\"\\e9c0\"}.icon-workplace-safety:before{content:\"\\e9c1\"}.icon-checklist:before{content:\"\\e900\"}.icon-department-document .path1:before{content:\"\\e901\";color:#000;opacity:.6}.icon-department-document .path2:before{content:\"\\e902\";margin-left:-1em;color:#00804c}.icon-department-folder-closed .path1:before{content:\"\\e903\";color:#000;opacity:.6}.icon-department-folder-closed .path2:before{content:\"\\e904\";margin-left:-1em;color:#00804c}.icon-department-folder-open .path1:before{content:\"\\e905\";color:#000;opacity:.6}.icon-department-folder-open .path2:before{content:\"\\e906\";margin-left:-1em;color:#00804c}.icon-deviation:before{content:\"\\e907\"}.icon-dropdown-folder .path1:before{content:\"\\e908\";color:#00324e}.icon-dropdown-folder .path2:before{content:\"\\e909\";margin-left:-1em;color:#fff;opacity:.6}.icon-enterprise-document .path1:before{content:\"\\e90a\";color:#000;opacity:.6}.icon-enterprise-document .path2:before{content:\"\\e90b\";margin-left:-1em;color:#cf4714}.icon-enterprise-folder-closed .path1:before{content:\"\\e90c\";color:#000;opacity:.6}.icon-enterprise-folder-closed .path2:before{content:\"\\e90d\";margin-left:-1em;color:#cf4714}.icon-enterprise-folder-open .path1:before{content:\"\\e90e\";color:#000;opacity:.6}.icon-enterprise-folder-open .path2:before{content:\"\\e90f\";margin-left:-1em;color:#cf4714}.icon-folder-closed:before{content:\"\\e910\"}.icon-folder-open:before{content:\"\\e911\"}.icon-keyboard_arrow_down:before{content:\"\\e912\"}.icon-keyboard_arrow_up:before{content:\"\\e913\"}.icon-local-document .path1:before{content:\"\\e914\";color:#000;opacity:.6}.icon-local-document .path2:before{content:\"\\e915\";margin-left:-1em;color:#1954a9}.icon-local-folder-closed .path1:before{content:\"\\e916\";color:#000;opacity:.6}.icon-local-folder-closed .path2:before{content:\"\\e917\";margin-left:-1em;color:#1954a9}.icon-local-folder-open .path1:before{content:\"\\e918\";color:#000;opacity:.6}.icon-local-folder-open .path2:before{content:\"\\e919\";margin-left:-1em;color:#1954a9}.icon-process:before{content:\"\\e91a\"}.icon-regional-document .path1:before{content:\"\\e91c\";color:#000;opacity:.6}.icon-regional-document .path2:before{content:\"\\e91d\";margin-left:-1em;color:#662e0d}.icon-regional-folder-closed .path1:before{content:\"\\e91e\";color:#000;opacity:.6}.icon-regional-folder-closed .path2:before{content:\"\\e91f\";margin-left:-1em;color:#662e0d}.icon-regional-folder-open .path1:before{content:\"\\e920\";color:#000;opacity:.6}.icon-regional-folder-open .path2:before{content:\"\\e921\";margin-left:-1em;color:#662e0d}.select-access-paginator{max-height:150px!important}.mat-expansion-panel .mat-expansion-panel-body{padding-top:0!important}.mat-expansion-panel-header{font-size:12px!important;font-weight:800!important}.w-100{width:100%}.h-100{height:100%}.pointer{cursor:pointer}.fw-600{font-weight:600}.label-item{font-weight:600;color:var(--ws-text-primary)}.sub-label{color:var(--ws-text-secondary)}.fs-14{font-size:14px}.fs-12{font-size:12px}.color-primary{color:var(--primary-light)!important}.header-title{font-weight:600;color:var(--ws-text-primary);font-size:16px}.chip-item-result.item-department .qms-chip-body{display:flex;justify-content:center;align-items:center}.remove-chip-icon{cursor:pointer}.remove-chip-icon:hover{color:#000000b3}.mat-form-field-wrapper{padding-bottom:8px!important}.mat-expansion-panel{border-radius:unset!important}.mat-expansion-panel-header:not([aria-disabled=true]){background:unset}.mat-expansion-panel.mat-expanded .mat-expansion-panel-header{background:#e5eefb}.mat-expansion-panel.mat-expanded .mat-expansion-panel-header .qms-line{color:var(--primary-light)!important}.access-dialog-header{display:flex;justify-content:space-between;align-items:center}.mat-chip-list-wrapper{margin:unset!important}.item-list-wrapper{height:40vh;padding:4px 4px 4px 0;overflow-y:auto}.item-list-wrapper.no-result{height:50vh;display:flex;justify-content:center;align-items:center}.item-list-wrapper .item{min-height:40px}.item-list-wrapper .item-without-checkbox{min-height:45px;display:flex;justify-content:space-between;align-items:center;padding:4px 8px;cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:4px;transition:background .3s ease}.item-list-wrapper .item-without-checkbox.active{background:var(--primary-light-12-opacity)}.item-list-wrapper .item-without-checkbox:hover{background:var(--primary-light-6-opacity)}.item-list-wrapper .item-without-checkbox .mat-icon{color:var(--primary-light)!important}.confirm__button__groups .btn-add>.qms-btn-wrapper{display:flex;justify-content:center;align-items:center}.qms-dialog-content{display:grid;column-gap:8px}.qms-dialog-content.active{grid-template-columns:2fr 1fr;min-height:50vh}.qms-dialog-content .access-dialog-wraper .field-select-option .mat-form-field-wrapper{padding-bottom:16px!important}.qms-dialog-content .access-dialog-wraper .field-select-option .mat-form-field-underline{bottom:16px!important}.qms-dialog-content .result-wrapper{position:relative;width:100%;margin-left:8px}.qms-dialog-content .result-wrapper:after{position:absolute;content:\"\";top:0;left:0;background-color:#0000001f;height:100%;width:1px}.qms-dialog-content .result-selected-container{position:absolute;inset:0;overflow-y:auto;padding:0 8px}.qms-dialog-content .result-selected-container .result-header{height:51px;display:flex;align-items:center;position:sticky;top:0;z-index:10;padding:0!important;background:#fff;margin-bottom:12px}.qms-dialog-content .result-selected-container .result-header:after{position:absolute;content:\"\";bottom:0;left:0;width:100%;height:1px;background:#0000000a}.qms-dialog-content .result-selected-container .result-header .mat-mdc-card-content{height:51px;width:100%;padding-left:4px;display:flex;align-items:center;background-color:#0000000a}.option-selected-content .group-filter-person-option{display:flex;flex-direction:row-reverse;justify-content:center;align-items:center;gap:8px}span.chip-item__content_name{display:inline-block;max-width:175px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}span.chip-item-children__count{font-size:.75rem;color:#00000080;font-weight:600}.mat-mdc-slide-toggle.qms-group-options{padding:unset!important}.input-option-filter .mat-form-field-wrapper{padding-bottom:8px!important}.input-option-filter .mat-form-field-underline{bottom:8px!important}.slide-toggle{margin-bottom:8px}.confirm__button__groups.none-option{margin-top:85px}.btn-icon-clear{position:relative;padding:0 1rem}.btn-icon-clear .qms-btn-icon{margin-right:unset!important}.btn-icon-clear:after{position:absolute;content:\"\";left:0;top:0;height:100%;width:1px;background:#0000004d}.qms-paginator .mat-mdc-paginator-container .qms-total-result{margin-bottom:0;margin-right:12px;height:100%;display:flex;align-items:center}.qms-paginator .mat-mdc-paginator-container .qms-total-result span{font-weight:600;color:#000c}.qms-paginator .mat-mdc-paginator-container .qms-paginator-range-actions{margin-bottom:0;column-gap:2px}.qms-paginator .mat-mdc-paginator-container .qms-paginator-range-actions>.qms-total-result{margin-bottom:0}.qms-paginator .qms-paginator-page-size{align-items:center}.qms-paginator .mat-form-field-wrapper{padding-bottom:0!important}.mat-mdc-checkbox.checkbox-all .mat-checkbox-label{flex-direction:row!important;align-items:center!important;column-gap:4px!important}.mat-expansion-panel.qms-expansion{margin:0!important}.access-department .qms-view-search-result{height:100%!important}.access-department .qms-view-search-result .result{max-height:calc(100% - 80px)!important}.access-department .loading-container{height:calc(100% - 40px)!important}.qms-loading-container{height:45vh;overflow:hidden;display:grid;grid-template-rows:repeat(60px)}.qms-loading-container .qms-loader{position:relative;width:100%;height:100%;padding:10px 0;overflow:hidden}.qms-loading-container .qms-loader:after{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;background:linear-gradient(110deg,#e9e9e900,#e3e3e300 40%,#e3e3e380 50%,#e3e3e300 60% 100%);animation:animate-loading 1.2s linear infinite}.qms-loading-container .qms-loader__wrapper{position:relative;width:100%;height:100%}.qms-loading-container .qms-loader__wrapper .row-loader{background-color:#eee;position:absolute;left:0;width:100%;height:40px;overflow:hidden}@keyframes animate-loading{0%{transform:translate(-100%)}to{transform:translate(100%)}}.btn-close-dialog.qms-btn-icon:focus:not(:hover){background-color:unset!important;color:unset!important}::ng-deep .mdc-evolution-chip__text-label.mat-mdc-chip-action-label{white-space:nowrap;width:225px;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i11.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i11.MatLabel, selector: "mat-label" }, { kind: "directive", type: i11.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i7$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: QMSSearchFieldDirective, selector: "mat-form-field[qms-search-field]", inputs: ["isLoading"] }, { kind: "directive", type: QMSInputClearDirective, selector: "[qms-input-clear]" }, { kind: "directive", type: QMSFormFieldDirective, selector: "[qms-form]" }, { kind: "directive", type: QMSGroupOptionDirective, selector: "[qms-group-options]", inputs: ["label"] }, { kind: "directive", type: AutocompleteOffDirective, selector: "[qms-group-options]" }, { kind: "directive", type: QMSInputChipDirective, selector: "mat-chip[qms-chip]", inputs: ["selected"] }, { kind: "directive", type: QMSChipBodyDirective, selector: "[qms-chip-body]" }, { kind: "directive", type: QMSScrollbarDirective, selector: "[qms-scrollbar]", inputs: ["isNoneBackground"] }, { kind: "directive", type: QMSToolTipRendererDirective, selector: "[qms-tool-tip]", inputs: ["showToolTip", "mode", "qms-tool-tip", "contentTemplate", "position"] }, { kind: "directive", type: EllipsifyDirective, selector: "[qms-elipsify]" }, { kind: "directive", type: QMSContentChangesDirective, selector: "[qmsContentChanges]", inputs: ["qmsContentChanges"] }, { kind: "component", type: i13.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i13.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i14.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i23$1.MatSelectSearchComponent, selector: "ngx-mat-select-search", inputs: ["placeholderLabel", "type", "closeIcon", "closeSvgIcon", "noEntriesFoundLabel", "clearSearchInput", "searching", "disableInitialFocus", "enableClearOnEscapePressed", "preventHomeEndKeyPropagation", "disableScrollToActiveOnOptionsChanged", "ariaLabel", "showToggleAllCheckbox", "toggleAllCheckboxChecked", "toggleAllCheckboxIndeterminate", "toggleAllCheckboxTooltipMessage", "toggleAllCheckboxTooltipPosition", "hideClearSearchButton", "alwaysRestoreSelectedOptionsMulti", "recreateValuesArray"], outputs: ["toggleAll"] }, { kind: "directive", type: i8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i8.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1$2.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: QMSButton, selector: "button[qms-btn], button[qms-btn-lg], button[qms-btn-outlined],\n               button[qms-btn-outlined-lg], button[qms-btn-text], button[qms-btn-text-lg],\n               button[qms-btn-fab],button[qms-btn-fab-sm],button[qms-btn-fab-ext],\n               button[qms-btn-fab-outlined],button[qms-btn-fab-outlined-sm],button[qms-btn-fab-outlined-ext]", inputs: ["disabled", "color"], exportAs: ["qmsButton"] }, { kind: "component", type: QMSButtonIcon, selector: "button[qms-btn-icon]", inputs: ["disabled", "color", "active"], exportAs: ["qmsButtonIcon"] }, { kind: "component", type: i16.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i11$2.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled", "tabIndex"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: i11$2.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i11$2.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "component", type: i23.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i9.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i9.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "component", type: SelectDepartmentTreeComponent, selector: "qms-select-department-tree", inputs: ["rowsSkeleton", "height", "config", "maxWidthNode"], outputs: ["onSearchEvent", "onPagingSearchEvent", "onValueChangeEvent", "selectionNodeChangeEvent", "onCheckNodeEvent", "onExpandNodeEvent", "onLoadMoreEvent", "onCheckItemSearchEvent", "onCheckAllItemSearchEvent", "toggleIncludeChildEvent", "isPushingChildNodes"] }, { kind: "component", type: i17.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "directive", type: QMSListLine, selector: "[qms-line]", inputs: ["size", "type", "color"] }, { kind: "directive", type: QMSListExpansion, selector: "[qms-expansion]" }, { kind: "component", type: QMSPaginatorComponent, selector: "qms-paginator", inputs: ["numHidden", "size", "pageSizeOptions", "pageSize", "length", "pageIndex", "overlayPanelClass"], outputs: ["page"] }], animations: [SelectAccessAnimationTrigger], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: QMSSelectAccessDialogComponent, decorators: [{
             type: Component,
@@ -38450,7 +38450,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                                 clickAction: 'noop'
                             }
                         }
-                    ], encapsulation: ViewEncapsulation.None, template: "<h3 mat-dialog-title class=\"more-action\">\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</h3>\n<mat-dialog-content>\n  <div [class.active]=\"optionSelect.value !== null\" 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 mb-2\"\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        <div class=\"option-selected-content\">\n          <ng-container *ngIf=\"optionSelect.value === OPTION_ENUM.PERSON\">\n            <form *ngIf=\"personForm\" [formGroup]=\"personForm\">\n              <div class=\"group-filter-person-option\">\n                <mat-form-field *ngIf=\"optionFilterPersonDataGlobal.userGroups.length\" qms-form qms-select-input\n                  class=\"w-100  mb-2\" 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 \" matSuffix\n                    aria-label=\"Clear\" *ngIf=\"personForm.get('userGroup').value && !getLoading$.value\">\n                    <mat-icon>close</mat-icon>\n                  </span>\n                </mat-form-field>\n                <mat-form-field *ngIf=\"optionFilterPersonDataGlobal.departments.length\"\n                  class=\"w-100 input-select-option  mb-2\" 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  mb-2\" 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\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] *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            </form>\n          </ng-container>\n          <ng-container *ngIf=\"optionSelect.value === OPTION_ENUM.USER_GROUP\">\n            <div>\n              <form (submit)=\"onFilterUserGroup()\">\n                <mat-form-field class=\"w-100  mb-2\" 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 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              <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] 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            </div>\n          </ng-container>\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          <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          <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          <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\n</mat-dialog-content>\n<mat-dialog-actions align=\"end\">\n  <mat-divider class=\"w-100 mb-3\"></mat-divider>\n  <button class=\"me-2\" qms-btn-text mat-dialog-close>\n    {{dialogData.cancelTitle || LANG.CANCEL}}\n  </button>\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>{{dialogData.confirmTitle || LANG.ADD}}</span>\n  </button>\n</mat-dialog-actions>\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<ng-template #listChip let-data=\"data\" let-type=\"type\">\n  <mat-chip-set [@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\n        <button matChipRemove *ngIf=\"allowRemove(type, item)\" (click)=\"onRemoveChip(type,item, i)\">\n          <mat-icon 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        </button>\n        <button matChipRemove *ngIf=\"!allowRemove(type, item) && dialogData.formatMsgDisable\"\n          (click)=\"onRemoveChip(type,item, i)\">\n          <mat-icon 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        </button>\n      </mat-chip>\n    </div>\n  </mat-chip-set>\n</ng-template>\n\n\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<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<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<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>\n\n\n<!-- <div qms-dialog-container-v2 class=\"select-access-dialog-container\">\n  <div qms-dialog-header>\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 [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        <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                  <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          <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          <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          <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          <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          <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>{{dialogData.confirmTitle || LANG.ADD}}</span>\n    </button>\n    <button qms-btn-text mat-dialog-close>\n      {{dialogData.cancelTitle || LANG.CANCEL}}\n    </button>\n  </div>\n</div> -->", styles: ["@font-face{font-family:icomoon;src:url(/assets/fonts/icomoon.eot?aghldx);src:url(/assets/fonts/icomoon.eot?aghldx#iefix) format(\"embedded-opentype\"),url(/assets/fonts/icomoon.ttf?aghldx) format(\"truetype\"),url(/assets/fonts/icomoon.woff?aghldx) format(\"woff\"),url(/assets/fonts/icomoon.svg?aghldx#icomoon) format(\"svg\");font-weight:400;font-style:normal;font-display:block}[class^=icon-],[class*=\" icon-\"]{font-family:icomoon!important;speak:never;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-acutely-toxic .path1:before{content:\"\\e91b\";color:#e32730}.icon-acutely-toxic .path2:before{content:\"\\e922\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path3:before{content:\"\\e923\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path4:before{content:\"\\e924\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path5:before{content:\"\\e925\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path6:before{content:\"\\e926\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path7:before{content:\"\\e927\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path8:before{content:\"\\e928\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path9:before{content:\"\\e929\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path10:before{content:\"\\e92a\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path11:before{content:\"\\e92b\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path12:before{content:\"\\e92c\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path13:before{content:\"\\e92d\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path14:before{content:\"\\e92e\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path15:before{content:\"\\e92f\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path16:before{content:\"\\e930\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path17:before{content:\"\\e931\";margin-left:-1em;color:#323232}.icon-add-column:before{content:\"\\e932\"}.icon-add-tooltip:before{content:\"\\e933\"}.icon-admin:before{content:\"\\e934\"}.icon-annual-cycle:before{content:\"\\e935\"}.icon-assignment-repete:before{content:\"\\e936\"}.icon-barrier-add:before{content:\"\\e937\"}.icon-barrier-edit:before{content:\"\\e938\"}.icon-barrier-view:before{content:\"\\e939\"}.icon-button-group:before{content:\"\\e93a\"}.icon-chemical-manager:before{content:\"\\e93b\"}.icon-chronic-health-hazard .path1:before{content:\"\\e93c\";color:#e32730}.icon-chronic-health-hazard .path2:before{content:\"\\e93d\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path3:before{content:\"\\e93e\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path4:before{content:\"\\e93f\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path5:before{content:\"\\e940\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path6:before{content:\"\\e941\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path7:before{content:\"\\e942\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path8:before{content:\"\\e943\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path9:before{content:\"\\e944\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path10:before{content:\"\\e945\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path11:before{content:\"\\e946\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path12:before{content:\"\\e947\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path13:before{content:\"\\e948\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path14:before{content:\"\\e949\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path15:before{content:\"\\e94a\";margin-left:-1em;color:#323232}.icon-contingency:before{content:\"\\e94b\"}.icon-corrosive .path1:before{content:\"\\e94c\";color:#323232}.icon-corrosive .path2:before{content:\"\\e94d\";margin-left:-1em;color:#323232}.icon-corrosive .path3:before{content:\"\\e94e\";margin-left:-1em;color:#323232}.icon-corrosive .path4:before{content:\"\\e94f\";margin-left:-1em;color:#323232}.icon-corrosive .path5:before{content:\"\\e950\";margin-left:-1em;color:#323232}.icon-corrosive .path6:before{content:\"\\e951\";margin-left:-1em;color:#323232}.icon-corrosive .path7:before{content:\"\\e952\";margin-left:-1em;color:#323232}.icon-corrosive .path8:before{content:\"\\e953\";margin-left:-1em;color:#323232}.icon-corrosive .path9:before{content:\"\\e954\";margin-left:-1em;color:#323232}.icon-corrosive .path10:before{content:\"\\e955\";margin-left:-1em;color:#323232}.icon-corrosive .path11:before{content:\"\\e956\";margin-left:-1em;color:#323232}.icon-corrosive .path12:before{content:\"\\e957\";margin-left:-1em;color:#323232}.icon-corrosive .path13:before{content:\"\\e958\";margin-left:-1em;color:#323232}.icon-corrosive .path14:before{content:\"\\e959\";margin-left:-1em;color:#323232}.icon-corrosive .path15:before{content:\"\\e95a\";margin-left:-1em;color:#323232}.icon-corrosive .path16:before{content:\"\\e95b\";margin-left:-1em;color:#323232}.icon-corrosive .path17:before{content:\"\\e95c\";margin-left:-1em;color:#323232}.icon-corrosive .path18:before{content:\"\\e95d\";margin-left:-1em;color:#323232}.icon-corrosive .path19:before{content:\"\\e95e\";margin-left:-1em;color:#323232}.icon-corrosive .path20:before{content:\"\\e95f\";margin-left:-1em;color:#323232}.icon-corrosive .path21:before{content:\"\\e960\";margin-left:-1em;color:#e32730}.icon-dashboard:before{content:\"\\e961\"}.icon-database-sds:before{content:\"\\e962\"}.icon-description-add:before{content:\"\\e963\"}.icon-description-edit:before{content:\"\\e964\"}.icon-description-view:before{content:\"\\e965\";color:#666}.icon-document-read .path1:before{content:\"\\e966\";color:#000;opacity:.6}.icon-document-read .path2:before{content:\"\\e967\";margin-left:-1em;color:#fff}.icon-document-read .path3:before{content:\"\\e968\";margin-left:-1em;color:#000;opacity:.6}.icon-draft:before{content:\"\\e969\"}.icon-expired-off:before{content:\"\\e96a\"}.icon-expired-on:before{content:\"\\e96b\"}.icon-explosive .path1:before{content:\"\\e96c\";color:#e32730}.icon-explosive .path2:before{content:\"\\e96d\";margin-left:-1em;color:#323232}.icon-explosive .path3:before{content:\"\\e96e\";margin-left:-1em;color:#323232}.icon-explosive .path4:before{content:\"\\e96f\";margin-left:-1em;color:#323232}.icon-explosive .path5:before{content:\"\\e970\";margin-left:-1em;color:#323232}.icon-explosive .path6:before{content:\"\\e971\";margin-left:-1em;color:#323232}.icon-explosive .path7:before{content:\"\\e972\";margin-left:-1em;color:#323232}.icon-explosive .path8:before{content:\"\\e973\";margin-left:-1em;color:#323232}.icon-explosive .path9:before{content:\"\\e974\";margin-left:-1em;color:#323232}.icon-explosive .path10:before{content:\"\\e975\";margin-left:-1em;color:#323232}.icon-explosive .path11:before{content:\"\\e976\";margin-left:-1em;color:#323232}.icon-explosive .path12:before{content:\"\\e977\";margin-left:-1em;color:#323232}.icon-explosive .path13:before{content:\"\\e978\";margin-left:-1em;color:#323232}.icon-explosive .path14:before{content:\"\\e979\";margin-left:-1em;color:#323232}.icon-explosive .path15:before{content:\"\\e97a\";margin-left:-1em;color:#323232}.icon-explosive .path16:before{content:\"\\e97b\";margin-left:-1em;color:#323232}.icon-explosive .path17:before{content:\"\\e97c\";margin-left:-1em;color:#323232}.icon-explosive .path18:before{content:\"\\e97d\";margin-left:-1em;color:#323232}.icon-explosive .path19:before{content:\"\\e97e\";margin-left:-1em;color:#323232}.icon-explosive .path20:before{content:\"\\e97f\";margin-left:-1em;color:#323232}.icon-explosive .path21:before{content:\"\\e980\";margin-left:-1em;color:#323232}.icon-explosive .path22:before{content:\"\\e981\";margin-left:-1em;color:#323232}.icon-explosive .path23:before{content:\"\\e982\";margin-left:-1em;color:#323232}.icon-explosive .path24:before{content:\"\\e983\";margin-left:-1em;color:#323232}.icon-explosive .path25:before{content:\"\\e984\";margin-left:-1em;color:#323232}.icon-explosive .path26:before{content:\"\\e985\";margin-left:-1em;color:#323232}.icon-explosive .path27:before{content:\"\\e986\";margin-left:-1em;color:#323232}.icon-explosive .path28:before{content:\"\\e987\";margin-left:-1em;color:#323232}.icon-explosive .path29:before{content:\"\\e988\";margin-left:-1em;color:#323232}.icon-explosive .path30:before{content:\"\\e989\";margin-left:-1em;color:#323232}.icon-explosive .path31:before{content:\"\\e98a\";margin-left:-1em;color:#323232}.icon-explosive .path32:before{content:\"\\e98b\";margin-left:-1em;color:#323232}.icon-explosive .path33:before{content:\"\\e98c\";margin-left:-1em;color:#323232}.icon-explosive .path34:before{content:\"\\e98d\";margin-left:-1em;color:#323232}.icon-explosive .path35:before{content:\"\\e98e\";margin-left:-1em;color:#323232}.icon-explosive .path36:before{content:\"\\e98f\";margin-left:-1em;color:#323232}.icon-explosive .path37:before{content:\"\\e990\";margin-left:-1em;color:#323232}.icon-explosive .path38:before{content:\"\\e991\";margin-left:-1em;color:#323232}.icon-explosive .path39:before{content:\"\\e992\";margin-left:-1em;color:#323232}.icon-explosive .path40:before{content:\"\\e993\";margin-left:-1em;color:#323232}.icon-explosive .path41:before{content:\"\\e994\";margin-left:-1em;color:#323232}.icon-explosive .path42:before{content:\"\\e995\";margin-left:-1em;color:#323232}.icon-explosive .path43:before{content:\"\\e996\";margin-left:-1em;color:#323232}.icon-explosive .path44:before{content:\"\\e997\";margin-left:-1em;color:#323232}.icon-explosive .path45:before{content:\"\\e998\";margin-left:-1em;color:#323232}.icon-explosive .path46:before{content:\"\\e999\";margin-left:-1em;color:#323232}.icon-file-excel:before{content:\"\\e99a\"}.icon-file-pdf:before{content:\"\\e99b\"}.icon-file-pdf-verified .path1:before{content:\"\\e99c\";color:#000;opacity:.6}.icon-file-pdf-verified .path2:before{content:\"\\e99d\";margin-left:-1em;color:#fff}.icon-file-pdf-verified .path3:before{content:\"\\e99e\";margin-left:-1em;color:#000;opacity:.6}.icon-file-word:before{content:\"\\e99f\"}.icon-filter-alt:before{content:\"\\e9a0\"}.icon-flammable .path1:before{content:\"\\e9a1\";color:#323232}.icon-flammable .path2:before{content:\"\\e9a2\";margin-left:-1em;color:#323232}.icon-flammable .path3:before{content:\"\\e9a3\";margin-left:-1em;color:#e32730}.icon-gas-under-pressure .path1:before{content:\"\\e9a4\";color:#323232}.icon-gas-under-pressure .path2:before{content:\"\\e9a5\";margin-left:-1em;color:#e32730}.icon-health-hazard .path1:before{content:\"\\e9a6\";color:#323232}.icon-health-hazard .path2:before{content:\"\\e9a7\";margin-left:-1em;color:#e32730}.icon-line-break:before{content:\"\\e9a8\"}.icon-location:before{content:\"\\e9a9\"}.icon-measure-add:before{content:\"\\e9aa\"}.icon-measure-edit:before{content:\"\\e9ab\"}.icon-measure-view:before{content:\"\\e9ac\";color:#666}.icon-messages:before{content:\"\\e9ad\"}.icon-monitoring:before{content:\"\\e9ae\";color:#666}.icon-move:before{content:\"\\e9af\"}.icon-oxidizing .path1:before{content:\"\\e9b0\";color:#e32730}.icon-oxidizing .path2:before{content:\"\\e9b1\";margin-left:-1em;color:#323232}.icon-oxidizing .path3:before{content:\"\\e9b2\";margin-left:-1em;color:#323232}.icon-oxidizing .path4:before{content:\"\\e9b3\";margin-left:-1em;color:#323232}.icon-process-area-closed:before{content:\"\\e9b4\"}.icon-process-area-open:before{content:\"\\e9b5\"}.icon-process-linked .path1:before{content:\"\\e9b6\";color:#000;opacity:.6}.icon-process-linked .path2:before{content:\"\\e9b7\";margin-left:-1em;color:#666}.icon-risk:before{content:\"\\e9b8\"}.icon-search-in-file:before{content:\"\\e9b9\"}.icon-sort-ascending:before{content:\"\\e9ba\"}.icon-sort-descending:before{content:\"\\e9bb\"}.icon-subscript:before{content:\"\\e9bc\"}.icon-superscript:before{content:\"\\e9bd\"}.icon-syncronice-favorites:before{content:\"\\e9be\"}.icon-system-settings:before{content:\"\\e9bf\"}.icon-view-three-outlined:before{content:\"\\e9c0\"}.icon-workplace-safety:before{content:\"\\e9c1\"}.icon-checklist:before{content:\"\\e900\"}.icon-department-document .path1:before{content:\"\\e901\";color:#000;opacity:.6}.icon-department-document .path2:before{content:\"\\e902\";margin-left:-1em;color:#00804c}.icon-department-folder-closed .path1:before{content:\"\\e903\";color:#000;opacity:.6}.icon-department-folder-closed .path2:before{content:\"\\e904\";margin-left:-1em;color:#00804c}.icon-department-folder-open .path1:before{content:\"\\e905\";color:#000;opacity:.6}.icon-department-folder-open .path2:before{content:\"\\e906\";margin-left:-1em;color:#00804c}.icon-deviation:before{content:\"\\e907\"}.icon-dropdown-folder .path1:before{content:\"\\e908\";color:#00324e}.icon-dropdown-folder .path2:before{content:\"\\e909\";margin-left:-1em;color:#fff;opacity:.6}.icon-enterprise-document .path1:before{content:\"\\e90a\";color:#000;opacity:.6}.icon-enterprise-document .path2:before{content:\"\\e90b\";margin-left:-1em;color:#cf4714}.icon-enterprise-folder-closed .path1:before{content:\"\\e90c\";color:#000;opacity:.6}.icon-enterprise-folder-closed .path2:before{content:\"\\e90d\";margin-left:-1em;color:#cf4714}.icon-enterprise-folder-open .path1:before{content:\"\\e90e\";color:#000;opacity:.6}.icon-enterprise-folder-open .path2:before{content:\"\\e90f\";margin-left:-1em;color:#cf4714}.icon-folder-closed:before{content:\"\\e910\"}.icon-folder-open:before{content:\"\\e911\"}.icon-keyboard_arrow_down:before{content:\"\\e912\"}.icon-keyboard_arrow_up:before{content:\"\\e913\"}.icon-local-document .path1:before{content:\"\\e914\";color:#000;opacity:.6}.icon-local-document .path2:before{content:\"\\e915\";margin-left:-1em;color:#1954a9}.icon-local-folder-closed .path1:before{content:\"\\e916\";color:#000;opacity:.6}.icon-local-folder-closed .path2:before{content:\"\\e917\";margin-left:-1em;color:#1954a9}.icon-local-folder-open .path1:before{content:\"\\e918\";color:#000;opacity:.6}.icon-local-folder-open .path2:before{content:\"\\e919\";margin-left:-1em;color:#1954a9}.icon-process:before{content:\"\\e91a\"}.icon-regional-document .path1:before{content:\"\\e91c\";color:#000;opacity:.6}.icon-regional-document .path2:before{content:\"\\e91d\";margin-left:-1em;color:#662e0d}.icon-regional-folder-closed .path1:before{content:\"\\e91e\";color:#000;opacity:.6}.icon-regional-folder-closed .path2:before{content:\"\\e91f\";margin-left:-1em;color:#662e0d}.icon-regional-folder-open .path1:before{content:\"\\e920\";color:#000;opacity:.6}.icon-regional-folder-open .path2:before{content:\"\\e921\";margin-left:-1em;color:#662e0d}.select-access-paginator{max-height:150px!important}.mat-expansion-panel .mat-expansion-panel-body{padding-top:0!important}.mat-expansion-panel-header{font-size:12px!important;font-weight:800!important}.w-100{width:100%}.h-100{height:100%}.pointer{cursor:pointer}.fw-600{font-weight:600}.label-item{font-weight:600;color:var(--ws-text-primary)}.sub-label{color:var(--ws-text-secondary)}.fs-14{font-size:14px}.fs-12{font-size:12px}.color-primary{color:var(--primary-light)!important}.header-title{font-weight:600;color:var(--ws-text-primary);font-size:16px}.chip-item-result{max-width:250px}.chip-item-result.item-department .qms-chip-body{display:flex;justify-content:center;align-items:center}.remove-chip-icon{color:#0000004d;cursor:pointer}.remove-chip-icon:hover{color:#000000b3}.mat-form-field-wrapper{padding-bottom:8px!important}.mat-expansion-panel{border-radius:unset!important}.mat-expansion-panel-header:not([aria-disabled=true]){background:unset}.mat-expansion-panel.mat-expanded .mat-expansion-panel-header{background:#e5eefb}.mat-expansion-panel.mat-expanded .mat-expansion-panel-header .qms-line{color:var(--primary-light)!important}.access-dialog-header{display:flex;justify-content:space-between;align-items:center}.mat-chip-list-wrapper{margin:unset!important}.item-list-wrapper{height:40vh;padding:4px 4px 4px 0;overflow-y:auto}.item-list-wrapper.no-result{height:50vh;display:flex;justify-content:center;align-items:center}.item-list-wrapper .item{min-height:40px}.item-list-wrapper .item-without-checkbox{min-height:45px;display:flex;justify-content:space-between;align-items:center;padding:4px 8px;cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:4px;transition:background .3s ease}.item-list-wrapper .item-without-checkbox.active{background:var(--primary-light-12-opacity)}.item-list-wrapper .item-without-checkbox:hover{background:var(--primary-light-6-opacity)}.item-list-wrapper .item-without-checkbox .mat-icon{color:var(--primary-light)!important}.confirm__button__groups .btn-add>.qms-btn-wrapper{display:flex;justify-content:center;align-items:center}.qms-dialog-content{display:grid;column-gap:8px}.qms-dialog-content.active{grid-template-columns:2fr 1fr;min-height:50vh}.qms-dialog-content .access-dialog-wraper .field-select-option .mat-form-field-wrapper{padding-bottom:16px!important}.qms-dialog-content .access-dialog-wraper .field-select-option .mat-form-field-underline{bottom:16px!important}.qms-dialog-content .result-wrapper{position:relative;width:100%;margin-left:8px}.qms-dialog-content .result-wrapper:after{position:absolute;content:\"\";top:0;left:0;background-color:#0000001f;height:100%;width:1px}.qms-dialog-content .result-selected-container{position:absolute;inset:0;overflow-y:auto;padding:0 8px}.qms-dialog-content .result-selected-container .result-header{height:51px;display:flex;align-items:center;position:sticky;top:0;z-index:10;padding:0!important;background:#fff;margin-bottom:12px}.qms-dialog-content .result-selected-container .result-header:after{position:absolute;content:\"\";bottom:0;left:0;width:100%;height:1px;background:#0000000a}.qms-dialog-content .result-selected-container .result-header .mat-mdc-card-content{height:51px;width:100%;padding-left:4px;display:flex;align-items:center;background-color:#0000000a}.option-selected-content .group-filter-person-option{display:flex;flex-direction:row-reverse;justify-content:center;align-items:center;gap:8px}span.chip-item__content_name{display:inline-block;max-width:175px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}span.chip-item-children__count{font-size:.75rem;color:#00000080;font-weight:600}.mat-mdc-slide-toggle.qms-group-options{padding:unset!important}.input-option-filter .mat-form-field-wrapper{padding-bottom:8px!important}.input-option-filter .mat-form-field-underline{bottom:8px!important}.slide-toggle{margin-bottom:8px}.confirm__button__groups.none-option{margin-top:85px}.btn-icon-clear{position:relative;padding:0 1rem}.btn-icon-clear .qms-btn-icon{margin-right:unset!important}.btn-icon-clear:after{position:absolute;content:\"\";left:0;top:0;height:100%;width:1px;background:#0000004d}.qms-paginator .mat-mdc-paginator-container .qms-total-result{margin-bottom:0;margin-right:12px;height:100%;display:flex;align-items:center}.qms-paginator .mat-mdc-paginator-container .qms-total-result span{font-weight:600;color:#000c}.qms-paginator .mat-mdc-paginator-container .qms-paginator-range-actions{margin-bottom:0;column-gap:2px}.qms-paginator .mat-mdc-paginator-container .qms-paginator-range-actions>.qms-total-result{margin-bottom:0}.qms-paginator .qms-paginator-page-size{align-items:center}.qms-paginator .mat-form-field-wrapper{padding-bottom:0!important}.mat-mdc-checkbox.checkbox-all .mat-checkbox-label{flex-direction:row!important;align-items:center!important;column-gap:4px!important}.mat-expansion-panel.qms-expansion{margin:0!important}.access-department .qms-view-search-result{height:100%!important}.access-department .qms-view-search-result .result{max-height:calc(100% - 80px)!important}.access-department .loading-container{height:calc(100% - 40px)!important}.qms-loading-container{height:45vh;overflow:hidden;display:grid;grid-template-rows:repeat(60px)}.qms-loading-container .qms-loader{position:relative;width:100%;height:100%;padding:10px 0;overflow:hidden}.qms-loading-container .qms-loader:after{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;background:linear-gradient(110deg,#e9e9e900,#e3e3e300 40%,#e3e3e380 50%,#e3e3e300 60% 100%);animation:animate-loading 1.2s linear infinite}.qms-loading-container .qms-loader__wrapper{position:relative;width:100%;height:100%}.qms-loading-container .qms-loader__wrapper .row-loader{background-color:#eee;position:absolute;left:0;width:100%;height:40px;overflow:hidden}@keyframes animate-loading{0%{transform:translate(-100%)}to{transform:translate(100%)}}.btn-close-dialog.qms-btn-icon:focus:not(:hover){background-color:unset!important;color:unset!important}\n"] }]
+                    ], encapsulation: ViewEncapsulation.None, template: "<h3 mat-dialog-title class=\"more-action\">\n  {{dialogData.titleDialog || LANG.SELECT_ACCESS}}\n  <button matDialogClose class=\"close-btn\" qms-btn-icon color=\"light\">\n    <mat-icon class=\"mat-icons-outlined\">close</mat-icon>\n  </button>\n</h3>\n<mat-dialog-content>\n  <div [class.active]=\"optionSelect.value !== null\" 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 mb-2\"\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        <div class=\"option-selected-content\">\n          <ng-container *ngIf=\"optionSelect.value === OPTION_ENUM.PERSON\">\n            <form *ngIf=\"personForm\" [formGroup]=\"personForm\">\n              <div class=\"group-filter-person-option\">\n                <mat-form-field *ngIf=\"optionFilterPersonDataGlobal.userGroups.length\" qms-form qms-select-input\n                  class=\"w-100  mb-2\" 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 \" matSuffix\n                    aria-label=\"Clear\" *ngIf=\"personForm.get('userGroup').value && !getLoading$.value\">\n                    <mat-icon>close</mat-icon>\n                  </span>\n                </mat-form-field>\n                <mat-form-field *ngIf=\"optionFilterPersonDataGlobal.departments.length\"\n                  class=\"w-100 input-select-option  mb-2\" 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  mb-2\" 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\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] *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            </form>\n          </ng-container>\n          <ng-container *ngIf=\"optionSelect.value === OPTION_ENUM.USER_GROUP\">\n            <div>\n              <form (submit)=\"onFilterUserGroup()\">\n                <mat-form-field class=\"w-100  mb-2\" 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 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              <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] 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            </div>\n          </ng-container>\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          <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          <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          <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\n</mat-dialog-content>\n<mat-dialog-actions align=\"end\">\n  <mat-divider class=\"w-100 mb-3\"></mat-divider>\n  <button class=\"me-2\" qms-btn-text mat-dialog-close>\n    {{dialogData.cancelTitle || LANG.CANCEL}}\n  </button>\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>{{dialogData.confirmTitle || LANG.ADD}}</span>\n  </button>\n</mat-dialog-actions>\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<ng-template #listChip let-data=\"data\" let-type=\"type\">\n  <mat-chip-set [@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\n        <button matChipRemove *ngIf=\"allowRemove(type, item)\" (click)=\"onRemoveChip(type,item, i)\">\n          <mat-icon 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        </button>\n        <button matChipRemove *ngIf=\"!allowRemove(type, item) && dialogData.formatMsgDisable\"\n          (click)=\"onRemoveChip(type,item, i)\">\n          <mat-icon 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        </button>\n      </mat-chip>\n    </div>\n  </mat-chip-set>\n</ng-template>\n\n\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<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<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<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>", styles: ["@font-face{font-family:icomoon;src:url(/assets/fonts/icomoon.eot?aghldx);src:url(/assets/fonts/icomoon.eot?aghldx#iefix) format(\"embedded-opentype\"),url(/assets/fonts/icomoon.ttf?aghldx) format(\"truetype\"),url(/assets/fonts/icomoon.woff?aghldx) format(\"woff\"),url(/assets/fonts/icomoon.svg?aghldx#icomoon) format(\"svg\");font-weight:400;font-style:normal;font-display:block}[class^=icon-],[class*=\" icon-\"]{font-family:icomoon!important;speak:never;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-acutely-toxic .path1:before{content:\"\\e91b\";color:#e32730}.icon-acutely-toxic .path2:before{content:\"\\e922\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path3:before{content:\"\\e923\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path4:before{content:\"\\e924\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path5:before{content:\"\\e925\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path6:before{content:\"\\e926\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path7:before{content:\"\\e927\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path8:before{content:\"\\e928\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path9:before{content:\"\\e929\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path10:before{content:\"\\e92a\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path11:before{content:\"\\e92b\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path12:before{content:\"\\e92c\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path13:before{content:\"\\e92d\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path14:before{content:\"\\e92e\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path15:before{content:\"\\e92f\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path16:before{content:\"\\e930\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path17:before{content:\"\\e931\";margin-left:-1em;color:#323232}.icon-add-column:before{content:\"\\e932\"}.icon-add-tooltip:before{content:\"\\e933\"}.icon-admin:before{content:\"\\e934\"}.icon-annual-cycle:before{content:\"\\e935\"}.icon-assignment-repete:before{content:\"\\e936\"}.icon-barrier-add:before{content:\"\\e937\"}.icon-barrier-edit:before{content:\"\\e938\"}.icon-barrier-view:before{content:\"\\e939\"}.icon-button-group:before{content:\"\\e93a\"}.icon-chemical-manager:before{content:\"\\e93b\"}.icon-chronic-health-hazard .path1:before{content:\"\\e93c\";color:#e32730}.icon-chronic-health-hazard .path2:before{content:\"\\e93d\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path3:before{content:\"\\e93e\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path4:before{content:\"\\e93f\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path5:before{content:\"\\e940\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path6:before{content:\"\\e941\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path7:before{content:\"\\e942\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path8:before{content:\"\\e943\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path9:before{content:\"\\e944\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path10:before{content:\"\\e945\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path11:before{content:\"\\e946\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path12:before{content:\"\\e947\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path13:before{content:\"\\e948\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path14:before{content:\"\\e949\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path15:before{content:\"\\e94a\";margin-left:-1em;color:#323232}.icon-contingency:before{content:\"\\e94b\"}.icon-corrosive .path1:before{content:\"\\e94c\";color:#323232}.icon-corrosive .path2:before{content:\"\\e94d\";margin-left:-1em;color:#323232}.icon-corrosive .path3:before{content:\"\\e94e\";margin-left:-1em;color:#323232}.icon-corrosive .path4:before{content:\"\\e94f\";margin-left:-1em;color:#323232}.icon-corrosive .path5:before{content:\"\\e950\";margin-left:-1em;color:#323232}.icon-corrosive .path6:before{content:\"\\e951\";margin-left:-1em;color:#323232}.icon-corrosive .path7:before{content:\"\\e952\";margin-left:-1em;color:#323232}.icon-corrosive .path8:before{content:\"\\e953\";margin-left:-1em;color:#323232}.icon-corrosive .path9:before{content:\"\\e954\";margin-left:-1em;color:#323232}.icon-corrosive .path10:before{content:\"\\e955\";margin-left:-1em;color:#323232}.icon-corrosive .path11:before{content:\"\\e956\";margin-left:-1em;color:#323232}.icon-corrosive .path12:before{content:\"\\e957\";margin-left:-1em;color:#323232}.icon-corrosive .path13:before{content:\"\\e958\";margin-left:-1em;color:#323232}.icon-corrosive .path14:before{content:\"\\e959\";margin-left:-1em;color:#323232}.icon-corrosive .path15:before{content:\"\\e95a\";margin-left:-1em;color:#323232}.icon-corrosive .path16:before{content:\"\\e95b\";margin-left:-1em;color:#323232}.icon-corrosive .path17:before{content:\"\\e95c\";margin-left:-1em;color:#323232}.icon-corrosive .path18:before{content:\"\\e95d\";margin-left:-1em;color:#323232}.icon-corrosive .path19:before{content:\"\\e95e\";margin-left:-1em;color:#323232}.icon-corrosive .path20:before{content:\"\\e95f\";margin-left:-1em;color:#323232}.icon-corrosive .path21:before{content:\"\\e960\";margin-left:-1em;color:#e32730}.icon-dashboard:before{content:\"\\e961\"}.icon-database-sds:before{content:\"\\e962\"}.icon-description-add:before{content:\"\\e963\"}.icon-description-edit:before{content:\"\\e964\"}.icon-description-view:before{content:\"\\e965\";color:#666}.icon-document-read .path1:before{content:\"\\e966\";color:#000;opacity:.6}.icon-document-read .path2:before{content:\"\\e967\";margin-left:-1em;color:#fff}.icon-document-read .path3:before{content:\"\\e968\";margin-left:-1em;color:#000;opacity:.6}.icon-draft:before{content:\"\\e969\"}.icon-expired-off:before{content:\"\\e96a\"}.icon-expired-on:before{content:\"\\e96b\"}.icon-explosive .path1:before{content:\"\\e96c\";color:#e32730}.icon-explosive .path2:before{content:\"\\e96d\";margin-left:-1em;color:#323232}.icon-explosive .path3:before{content:\"\\e96e\";margin-left:-1em;color:#323232}.icon-explosive .path4:before{content:\"\\e96f\";margin-left:-1em;color:#323232}.icon-explosive .path5:before{content:\"\\e970\";margin-left:-1em;color:#323232}.icon-explosive .path6:before{content:\"\\e971\";margin-left:-1em;color:#323232}.icon-explosive .path7:before{content:\"\\e972\";margin-left:-1em;color:#323232}.icon-explosive .path8:before{content:\"\\e973\";margin-left:-1em;color:#323232}.icon-explosive .path9:before{content:\"\\e974\";margin-left:-1em;color:#323232}.icon-explosive .path10:before{content:\"\\e975\";margin-left:-1em;color:#323232}.icon-explosive .path11:before{content:\"\\e976\";margin-left:-1em;color:#323232}.icon-explosive .path12:before{content:\"\\e977\";margin-left:-1em;color:#323232}.icon-explosive .path13:before{content:\"\\e978\";margin-left:-1em;color:#323232}.icon-explosive .path14:before{content:\"\\e979\";margin-left:-1em;color:#323232}.icon-explosive .path15:before{content:\"\\e97a\";margin-left:-1em;color:#323232}.icon-explosive .path16:before{content:\"\\e97b\";margin-left:-1em;color:#323232}.icon-explosive .path17:before{content:\"\\e97c\";margin-left:-1em;color:#323232}.icon-explosive .path18:before{content:\"\\e97d\";margin-left:-1em;color:#323232}.icon-explosive .path19:before{content:\"\\e97e\";margin-left:-1em;color:#323232}.icon-explosive .path20:before{content:\"\\e97f\";margin-left:-1em;color:#323232}.icon-explosive .path21:before{content:\"\\e980\";margin-left:-1em;color:#323232}.icon-explosive .path22:before{content:\"\\e981\";margin-left:-1em;color:#323232}.icon-explosive .path23:before{content:\"\\e982\";margin-left:-1em;color:#323232}.icon-explosive .path24:before{content:\"\\e983\";margin-left:-1em;color:#323232}.icon-explosive .path25:before{content:\"\\e984\";margin-left:-1em;color:#323232}.icon-explosive .path26:before{content:\"\\e985\";margin-left:-1em;color:#323232}.icon-explosive .path27:before{content:\"\\e986\";margin-left:-1em;color:#323232}.icon-explosive .path28:before{content:\"\\e987\";margin-left:-1em;color:#323232}.icon-explosive .path29:before{content:\"\\e988\";margin-left:-1em;color:#323232}.icon-explosive .path30:before{content:\"\\e989\";margin-left:-1em;color:#323232}.icon-explosive .path31:before{content:\"\\e98a\";margin-left:-1em;color:#323232}.icon-explosive .path32:before{content:\"\\e98b\";margin-left:-1em;color:#323232}.icon-explosive .path33:before{content:\"\\e98c\";margin-left:-1em;color:#323232}.icon-explosive .path34:before{content:\"\\e98d\";margin-left:-1em;color:#323232}.icon-explosive .path35:before{content:\"\\e98e\";margin-left:-1em;color:#323232}.icon-explosive .path36:before{content:\"\\e98f\";margin-left:-1em;color:#323232}.icon-explosive .path37:before{content:\"\\e990\";margin-left:-1em;color:#323232}.icon-explosive .path38:before{content:\"\\e991\";margin-left:-1em;color:#323232}.icon-explosive .path39:before{content:\"\\e992\";margin-left:-1em;color:#323232}.icon-explosive .path40:before{content:\"\\e993\";margin-left:-1em;color:#323232}.icon-explosive .path41:before{content:\"\\e994\";margin-left:-1em;color:#323232}.icon-explosive .path42:before{content:\"\\e995\";margin-left:-1em;color:#323232}.icon-explosive .path43:before{content:\"\\e996\";margin-left:-1em;color:#323232}.icon-explosive .path44:before{content:\"\\e997\";margin-left:-1em;color:#323232}.icon-explosive .path45:before{content:\"\\e998\";margin-left:-1em;color:#323232}.icon-explosive .path46:before{content:\"\\e999\";margin-left:-1em;color:#323232}.icon-file-excel:before{content:\"\\e99a\"}.icon-file-pdf:before{content:\"\\e99b\"}.icon-file-pdf-verified .path1:before{content:\"\\e99c\";color:#000;opacity:.6}.icon-file-pdf-verified .path2:before{content:\"\\e99d\";margin-left:-1em;color:#fff}.icon-file-pdf-verified .path3:before{content:\"\\e99e\";margin-left:-1em;color:#000;opacity:.6}.icon-file-word:before{content:\"\\e99f\"}.icon-filter-alt:before{content:\"\\e9a0\"}.icon-flammable .path1:before{content:\"\\e9a1\";color:#323232}.icon-flammable .path2:before{content:\"\\e9a2\";margin-left:-1em;color:#323232}.icon-flammable .path3:before{content:\"\\e9a3\";margin-left:-1em;color:#e32730}.icon-gas-under-pressure .path1:before{content:\"\\e9a4\";color:#323232}.icon-gas-under-pressure .path2:before{content:\"\\e9a5\";margin-left:-1em;color:#e32730}.icon-health-hazard .path1:before{content:\"\\e9a6\";color:#323232}.icon-health-hazard .path2:before{content:\"\\e9a7\";margin-left:-1em;color:#e32730}.icon-line-break:before{content:\"\\e9a8\"}.icon-location:before{content:\"\\e9a9\"}.icon-measure-add:before{content:\"\\e9aa\"}.icon-measure-edit:before{content:\"\\e9ab\"}.icon-measure-view:before{content:\"\\e9ac\";color:#666}.icon-messages:before{content:\"\\e9ad\"}.icon-monitoring:before{content:\"\\e9ae\";color:#666}.icon-move:before{content:\"\\e9af\"}.icon-oxidizing .path1:before{content:\"\\e9b0\";color:#e32730}.icon-oxidizing .path2:before{content:\"\\e9b1\";margin-left:-1em;color:#323232}.icon-oxidizing .path3:before{content:\"\\e9b2\";margin-left:-1em;color:#323232}.icon-oxidizing .path4:before{content:\"\\e9b3\";margin-left:-1em;color:#323232}.icon-process-area-closed:before{content:\"\\e9b4\"}.icon-process-area-open:before{content:\"\\e9b5\"}.icon-process-linked .path1:before{content:\"\\e9b6\";color:#000;opacity:.6}.icon-process-linked .path2:before{content:\"\\e9b7\";margin-left:-1em;color:#666}.icon-risk:before{content:\"\\e9b8\"}.icon-search-in-file:before{content:\"\\e9b9\"}.icon-sort-ascending:before{content:\"\\e9ba\"}.icon-sort-descending:before{content:\"\\e9bb\"}.icon-subscript:before{content:\"\\e9bc\"}.icon-superscript:before{content:\"\\e9bd\"}.icon-syncronice-favorites:before{content:\"\\e9be\"}.icon-system-settings:before{content:\"\\e9bf\"}.icon-view-three-outlined:before{content:\"\\e9c0\"}.icon-workplace-safety:before{content:\"\\e9c1\"}.icon-checklist:before{content:\"\\e900\"}.icon-department-document .path1:before{content:\"\\e901\";color:#000;opacity:.6}.icon-department-document .path2:before{content:\"\\e902\";margin-left:-1em;color:#00804c}.icon-department-folder-closed .path1:before{content:\"\\e903\";color:#000;opacity:.6}.icon-department-folder-closed .path2:before{content:\"\\e904\";margin-left:-1em;color:#00804c}.icon-department-folder-open .path1:before{content:\"\\e905\";color:#000;opacity:.6}.icon-department-folder-open .path2:before{content:\"\\e906\";margin-left:-1em;color:#00804c}.icon-deviation:before{content:\"\\e907\"}.icon-dropdown-folder .path1:before{content:\"\\e908\";color:#00324e}.icon-dropdown-folder .path2:before{content:\"\\e909\";margin-left:-1em;color:#fff;opacity:.6}.icon-enterprise-document .path1:before{content:\"\\e90a\";color:#000;opacity:.6}.icon-enterprise-document .path2:before{content:\"\\e90b\";margin-left:-1em;color:#cf4714}.icon-enterprise-folder-closed .path1:before{content:\"\\e90c\";color:#000;opacity:.6}.icon-enterprise-folder-closed .path2:before{content:\"\\e90d\";margin-left:-1em;color:#cf4714}.icon-enterprise-folder-open .path1:before{content:\"\\e90e\";color:#000;opacity:.6}.icon-enterprise-folder-open .path2:before{content:\"\\e90f\";margin-left:-1em;color:#cf4714}.icon-folder-closed:before{content:\"\\e910\"}.icon-folder-open:before{content:\"\\e911\"}.icon-keyboard_arrow_down:before{content:\"\\e912\"}.icon-keyboard_arrow_up:before{content:\"\\e913\"}.icon-local-document .path1:before{content:\"\\e914\";color:#000;opacity:.6}.icon-local-document .path2:before{content:\"\\e915\";margin-left:-1em;color:#1954a9}.icon-local-folder-closed .path1:before{content:\"\\e916\";color:#000;opacity:.6}.icon-local-folder-closed .path2:before{content:\"\\e917\";margin-left:-1em;color:#1954a9}.icon-local-folder-open .path1:before{content:\"\\e918\";color:#000;opacity:.6}.icon-local-folder-open .path2:before{content:\"\\e919\";margin-left:-1em;color:#1954a9}.icon-process:before{content:\"\\e91a\"}.icon-regional-document .path1:before{content:\"\\e91c\";color:#000;opacity:.6}.icon-regional-document .path2:before{content:\"\\e91d\";margin-left:-1em;color:#662e0d}.icon-regional-folder-closed .path1:before{content:\"\\e91e\";color:#000;opacity:.6}.icon-regional-folder-closed .path2:before{content:\"\\e91f\";margin-left:-1em;color:#662e0d}.icon-regional-folder-open .path1:before{content:\"\\e920\";color:#000;opacity:.6}.icon-regional-folder-open .path2:before{content:\"\\e921\";margin-left:-1em;color:#662e0d}.select-access-paginator{max-height:150px!important}.mat-expansion-panel .mat-expansion-panel-body{padding-top:0!important}.mat-expansion-panel-header{font-size:12px!important;font-weight:800!important}.w-100{width:100%}.h-100{height:100%}.pointer{cursor:pointer}.fw-600{font-weight:600}.label-item{font-weight:600;color:var(--ws-text-primary)}.sub-label{color:var(--ws-text-secondary)}.fs-14{font-size:14px}.fs-12{font-size:12px}.color-primary{color:var(--primary-light)!important}.header-title{font-weight:600;color:var(--ws-text-primary);font-size:16px}.chip-item-result.item-department .qms-chip-body{display:flex;justify-content:center;align-items:center}.remove-chip-icon{cursor:pointer}.remove-chip-icon:hover{color:#000000b3}.mat-form-field-wrapper{padding-bottom:8px!important}.mat-expansion-panel{border-radius:unset!important}.mat-expansion-panel-header:not([aria-disabled=true]){background:unset}.mat-expansion-panel.mat-expanded .mat-expansion-panel-header{background:#e5eefb}.mat-expansion-panel.mat-expanded .mat-expansion-panel-header .qms-line{color:var(--primary-light)!important}.access-dialog-header{display:flex;justify-content:space-between;align-items:center}.mat-chip-list-wrapper{margin:unset!important}.item-list-wrapper{height:40vh;padding:4px 4px 4px 0;overflow-y:auto}.item-list-wrapper.no-result{height:50vh;display:flex;justify-content:center;align-items:center}.item-list-wrapper .item{min-height:40px}.item-list-wrapper .item-without-checkbox{min-height:45px;display:flex;justify-content:space-between;align-items:center;padding:4px 8px;cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:4px;transition:background .3s ease}.item-list-wrapper .item-without-checkbox.active{background:var(--primary-light-12-opacity)}.item-list-wrapper .item-without-checkbox:hover{background:var(--primary-light-6-opacity)}.item-list-wrapper .item-without-checkbox .mat-icon{color:var(--primary-light)!important}.confirm__button__groups .btn-add>.qms-btn-wrapper{display:flex;justify-content:center;align-items:center}.qms-dialog-content{display:grid;column-gap:8px}.qms-dialog-content.active{grid-template-columns:2fr 1fr;min-height:50vh}.qms-dialog-content .access-dialog-wraper .field-select-option .mat-form-field-wrapper{padding-bottom:16px!important}.qms-dialog-content .access-dialog-wraper .field-select-option .mat-form-field-underline{bottom:16px!important}.qms-dialog-content .result-wrapper{position:relative;width:100%;margin-left:8px}.qms-dialog-content .result-wrapper:after{position:absolute;content:\"\";top:0;left:0;background-color:#0000001f;height:100%;width:1px}.qms-dialog-content .result-selected-container{position:absolute;inset:0;overflow-y:auto;padding:0 8px}.qms-dialog-content .result-selected-container .result-header{height:51px;display:flex;align-items:center;position:sticky;top:0;z-index:10;padding:0!important;background:#fff;margin-bottom:12px}.qms-dialog-content .result-selected-container .result-header:after{position:absolute;content:\"\";bottom:0;left:0;width:100%;height:1px;background:#0000000a}.qms-dialog-content .result-selected-container .result-header .mat-mdc-card-content{height:51px;width:100%;padding-left:4px;display:flex;align-items:center;background-color:#0000000a}.option-selected-content .group-filter-person-option{display:flex;flex-direction:row-reverse;justify-content:center;align-items:center;gap:8px}span.chip-item__content_name{display:inline-block;max-width:175px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}span.chip-item-children__count{font-size:.75rem;color:#00000080;font-weight:600}.mat-mdc-slide-toggle.qms-group-options{padding:unset!important}.input-option-filter .mat-form-field-wrapper{padding-bottom:8px!important}.input-option-filter .mat-form-field-underline{bottom:8px!important}.slide-toggle{margin-bottom:8px}.confirm__button__groups.none-option{margin-top:85px}.btn-icon-clear{position:relative;padding:0 1rem}.btn-icon-clear .qms-btn-icon{margin-right:unset!important}.btn-icon-clear:after{position:absolute;content:\"\";left:0;top:0;height:100%;width:1px;background:#0000004d}.qms-paginator .mat-mdc-paginator-container .qms-total-result{margin-bottom:0;margin-right:12px;height:100%;display:flex;align-items:center}.qms-paginator .mat-mdc-paginator-container .qms-total-result span{font-weight:600;color:#000c}.qms-paginator .mat-mdc-paginator-container .qms-paginator-range-actions{margin-bottom:0;column-gap:2px}.qms-paginator .mat-mdc-paginator-container .qms-paginator-range-actions>.qms-total-result{margin-bottom:0}.qms-paginator .qms-paginator-page-size{align-items:center}.qms-paginator .mat-form-field-wrapper{padding-bottom:0!important}.mat-mdc-checkbox.checkbox-all .mat-checkbox-label{flex-direction:row!important;align-items:center!important;column-gap:4px!important}.mat-expansion-panel.qms-expansion{margin:0!important}.access-department .qms-view-search-result{height:100%!important}.access-department .qms-view-search-result .result{max-height:calc(100% - 80px)!important}.access-department .loading-container{height:calc(100% - 40px)!important}.qms-loading-container{height:45vh;overflow:hidden;display:grid;grid-template-rows:repeat(60px)}.qms-loading-container .qms-loader{position:relative;width:100%;height:100%;padding:10px 0;overflow:hidden}.qms-loading-container .qms-loader:after{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;background:linear-gradient(110deg,#e9e9e900,#e3e3e300 40%,#e3e3e380 50%,#e3e3e300 60% 100%);animation:animate-loading 1.2s linear infinite}.qms-loading-container .qms-loader__wrapper{position:relative;width:100%;height:100%}.qms-loading-container .qms-loader__wrapper .row-loader{background-color:#eee;position:absolute;left:0;width:100%;height:40px;overflow:hidden}@keyframes animate-loading{0%{transform:translate(-100%)}to{transform:translate(100%)}}.btn-close-dialog.qms-btn-icon:focus:not(:hover){background-color:unset!important;color:unset!important}::ng-deep .mdc-evolution-chip__text-label.mat-mdc-chip-action-label{white-space:nowrap;width:225px;overflow:hidden;text-overflow:ellipsis}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.MatDialogRef }, { type: QMSSelectAccessDialog, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -39630,7 +39630,7 @@ class SelectProcessDataTreeComponent {
         //this.handleCheckNode(node);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectProcessDataTreeComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$3.DomSanitizer }, { token: QMSIconRegistryService }, { token: i4.MatIconRegistry }, { token: i0.ElementRef }, { token: TranslateLibraryService }, { token: i1$1.Overlay }, { token: i0.ViewContainerRef }, { token: QMSSelectDepartmentTreeGlobalService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SelectProcessDataTreeComponent, selector: "qms-select-process-data-tree", inputs: { rowsSkeleton: "rowsSkeleton", height: "height", config: "config" }, outputs: { onSearchEvent: "onSearchEvent", onPagingSearchEvent: "onPagingSearchEvent", onValueChangeEvent: "onValueChangeEvent", selectionNodeChangeEvent: "selectionNodeChangeEvent", onCheckNodeEvent: "onCheckNodeEvent", onExpandNodeEvent: "onExpandNodeEvent", onLoadMoreEvent: "onLoadMoreEvent", onCheckItemSearchEvent: "onCheckItemSearchEvent", onCheckAllItemSearchEvent: "onCheckAllItemSearchEvent", toggleIncludeChildEvent: "toggleIncludeChildEvent" }, viewQueries: [{ propertyName: "cdkVirtualScrollViewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }, { propertyName: "paginatorSearch", first: true, predicate: ["paginatorSearch"], descendants: true }], ngImport: i0, 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>", styles: [".qms-select-department-tree-container{font-family:Open Sans,sans-serif}.qms-select-department-tree-container .mr10{margin-right:10px}.qms-select-department-tree-container .mt5{margin-bottom:5px}.qms-select-department-tree-container .mb5{margin-top:5px}.qms-select-department-tree-container .w100{width:100%}.qms-select-department-tree-container .h100{height:100%}.qms-select-department-tree-container .fw500{font-weight:500!important}.qms-select-department-tree-container .text-right{text-align:right}.qms-select-department-tree-container .mt20{margin-top:20px}.qms-select-department-tree-container .d-flex{display:flex}.qms-select-department-tree-container .align-items-center{align-items:center}.qms-select-department-tree-container .justify-content-end{justify-content:flex-end}.qms-select-department-tree-container .text-selected{color:#0009;font-size:12px;line-height:16px;margin-top:1rem}.qms-select-department-tree-container .input-field{display:flex;align-items:center;position:relative}.qms-select-department-tree-container .input-field ::ng-deep .mat-form-field-wrapper{padding-bottom:8px!important}.qms-select-department-tree-container .input-field ::ng-deep .mat-form-field-underline{bottom:8px!important}.qms-select-department-tree-container .input-field input.input-search{width:100%;padding:10px;outline:none;border:none;background:var(--background-input-text)}.qms-select-department-tree-container .input-field .btn-search{cursor:pointer;vertical-align:middle;position:absolute;top:50%;right:10px;transform:translateY(-50%)}.qms-select-department-tree-container .input-field .line__divider{border-bottom:1px solid #ccc;height:1px;margin-top:10px;min-width:300px;max-width:100%}.qms-select-department-tree-container .header-title{font-weight:500;color:var(--ws-text-primary);font-size:16px;display:flex;align-items:center}.qms-select-department-tree-container .header-title .header-view{padding:4px 0}.qms-select-department-tree-container .sticky-position{position:sticky;top:0;left:0;z-index:1;background:#fff}.qms-select-department-tree-container .header-view-tree{display:grid;grid-template-columns:1fr 200px;column-gap:2px;padding:4px 12px 4px 0}.qms-select-department-tree-container .header-view-tree .header-view:nth-child(1){padding-left:12px}.qms-select-department-tree-container .tree-department-wrapper{padding-right:4px;overflow:hidden;position:relative;transition:height .3s ease-in-out}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view{width:100%;display:grid;grid-template-columns:1fr 200px;column-gap:2px}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main>.separate{height:38px}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main>.separate.h-0{height:0}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main:last-child{height:100%;padding-left:4px;position:relative}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main:last-child:after{position:absolute;content:\"\";top:0;bottom:-38px;left:0;width:1px;background:#0000001f}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main .external-list-item-container .node-external{overflow:hidden;transition:all .1s ease-in-out}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main .external-list-item-container .node-external .node-external-content{padding:5px 15px;height:calc(100% - 2px);color:var(--default-color);font-size:14px;display:flex;align-items:center}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main .external-list-item-container .node-external .node-external-content span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.qms-select-department-tree-container .mask-overlay{z-index:1000;background-color:#2221211a;position:absolute;top:0;left:0;width:100%;height:100%;border-radius:4px;overflow:hidden;display:grid;place-items:center}.qms-select-department-tree-container .select-department-tree>.cdk-virtual-scroll-orientation-vertical .cdk-virtual-scroll-content-wrapper{padding:0 4px!important}.qms-select-department-tree-container .select-department-tree .qms-tree-node{display:flex;align-items:center;border-radius:4px}.qms-select-department-tree-container .select-department-tree .qms-tree-node:hover{background-color:#00000014}.qms-select-department-tree-container .select-department-tree .qms-tree-node>.node-expand-area{width:48px;height:48px;position:relative}.qms-select-department-tree-container .select-department-tree .qms-tree-node.active-external-view .mat-mdc-checkbox.qms-group-options{width:calc(100% - 250px)}.qms-select-department-tree-container .select-department-tree .qms-tree-node.node-loading{background:var(--primary-light-6-opacity)}.qms-select-department-tree-container .select-department-tree .qms-tree-node>.external-view-node{flex-basis:200px;overflow:hidden}.qms-select-department-tree-container .select-department-tree .qms-tree-node>.external-view-node .node-external{overflow:hidden;transition:all .1s ease-in-out;display:block}.qms-select-department-tree-container .select-department-tree .qms-tree-node>.external-view-node .node-external .node-external-content{padding:5px 15px;height:calc(100% - 2px);color:var(--default-color);font-size:14px;display:flex;align-items:center}.qms-select-department-tree-container .select-department-tree .qms-tree-node>.external-view-node .node-external .node-external-content span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.qms-select-department-tree-container .select-department-tree .qms-tree-node.expand-node{color:var(--primary)}.qms-select-department-tree-container .select-department-tree .qms-tree-node.expand-node:hover{background:var(--primary-light-6-opacity)}.qms-select-department-tree-container .select-department-tree .qms-tree-node.expand-node:active{background:var(--primary-light-12-opacity)}.qms-select-department-tree-container .select-department-tree .qms-tree-node.expand-node .mat-icon{color:var(--primary)}.qms-select-department-tree-container .select-department-tree .qms-tree-node .node-without-checkbox{cursor:pointer;width:100%;display:flex;justify-content:space-between;align-items:center}.qms-select-department-tree-container .select-department-tree .qms-tree-node .node-without-checkbox .mat-icon{color:var(--primary);margin-right:4px}.qms-select-department-tree-container .select-department-tree .qms-tree-node.selected-theme{background:var(--primary-light-12-opacity)}.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all{cursor:default!important;pointer-events:none;-webkit-user-select:none;user-select:none}.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all button.mat-button-disabled,.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all .mat-icon-rtl-mirror,.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all .type-icon{color:#00000061}.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all .text-name.disabled{color:#00000061;cursor:default!important;pointer-events:none;-webkit-user-select:none;user-select:none}.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all.active{background-color:transparent}.qms-select-department-tree-container .text-name{position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;cursor:pointer;width:100%}.qms-select-department-tree-container .cursor-pointer{cursor:pointer}.qms-select-department-tree-container .ml5{margin-left:15px!important}.qms-select-department-tree-container .pl-10{padding-left:10px}.qms-select-department-tree-container ::ng-deep .mat-mdc-checkbox.qms-group-options.flex-direction-row .mat-checkbox-layout{white-space:normal}.qms-select-department-tree-container ::ng-deep .mat-mdc-checkbox.qms-group-options.flex-direction-row .node-text>span{display:block}.qms-select-department-tree-container ::ng-deep .mat-mdc-checkbox.qms-group-options.flex-direction-row .mat-checkbox-label{flex-direction:row;align-items:center;position:relative;padding-bottom:2px}.qms-select-department-tree-container .qms-view-search-result{width:100%;overflow:hidden}.qms-select-department-tree-container .qms-view-search-result__header{position:relative}.qms-select-department-tree-container .qms-view-search-result__header:after{position:absolute;content:\"\";bottom:0;left:0;width:100%;height:1px;background-color:#0000001a}.qms-select-department-tree-container .qms-view-search-result__header .header-title{padding:8px 0;display:inline-block}.qms-select-department-tree-container .qms-view-search-result__header .header-title:nth-child(1){padding-left:12px}.qms-select-department-tree-container .qms-view-search-result__header .header-title:nth-child(2){flex-basis:200px}.qms-select-department-tree-container .qms-view-search-result>.no-result{height:100%;display:flex;justify-content:center;align-items:center}.qms-select-department-tree-container .qms-view-search-result__wrapper{height:calc(100% - 50px);width:100%}.qms-select-department-tree-container .qms-view-search-result__wrapper.active-external{height:calc(100% - 90px)!important}.qms-select-department-tree-container .qms-view-search-result__wrapper .result{max-height:calc(100% - 44px);overflow-y:auto;margin-bottom:4px;padding-right:4px}.qms-select-department-tree-container .qms-view-search-result__wrapper .result.active-paging{max-height:calc(100% - 40px)}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item{border-radius:4px;display:grid;grid-template-columns:45px 1fr;align-items:center;cursor:pointer;transition:background .3s ease;min-height:40px}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item:not(:nth-child(1)){margin-top:4px!important}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item:hover,.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item.active{background:linear-gradient(0deg,#0163b21f,#0163b21f),#fff}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item__content{display:flex;align-items:center}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item__content .item-result-content-wraper{padding:5px 15px;width:100%}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item__content .external-name{flex-basis:200px}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item__content .external-name span{width:200px;display:inline-block}.qms-select-department-tree-container .qms-view-search-result ::ng-deep .mat-mdc-checkbox.qms-group-options{display:flex;height:100%}.qms-select-department-tree-container ::ng-deep .breadcrumb-container{flex-wrap:wrap}.qms-select-department-tree-container ::ng-deep .mat-button-focus-overlay{background-color:transparent}.qms-select-department-tree-container ::ng-deep .qms-breadcrumb-item{margin:0}.qms-select-department-tree-container ::ng-deep .qms-breadcrumb-item-text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;transition:color .3s ease}.qms-select-department-tree-container ::ng-deep .qms-breadcrumb-item-text:not(:last-child){max-width:150px!important}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-mdc-paginator-container .qms-total-result{margin-bottom:0;margin-right:12px;height:100%;display:flex;align-items:center}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-mdc-paginator-container .qms-total-result span{font-weight:600;color:#000c}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-mdc-paginator-container .qms-paginator-range-actions{margin-bottom:0;column-gap:2px}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-mdc-paginator-container .qms-paginator-range-actions>.qms-total-result{margin-bottom:0}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-form-field-wrapper{padding-bottom:0}.qms-select-department-tree-container ::ng-deep .qms-paginator .qms-paginator-page-size{align-items:center}.qms-select-department-tree-container .text-gray{color:#242424}.qms-select-department-tree-container .mb0{margin-bottom:0!important}.qms-select-department-tree-container .fs-base{font-size:14px!important}.qms-select-department-tree-container .user-select-none{-webkit-user-select:none;user-select:none}.qms-select-department-tree-container .item-breadcrumb-disable{cursor:not-allowed;color:#0009;font-weight:400;font-size:14px;max-width:250px}.qms-select-department-tree-container ::ng-deep .mat-mdc-checkbox.checkbox-all .mat-checkbox-label{flex-direction:row;align-items:center;column-gap:4px}.qms-select-department-tree-container ::ng-deep .btn-arrow{width:40px;height:40px;line-height:40px}.qms-select-department-tree-container .qms-loading-container{overflow:hidden;display:grid;grid-template-rows:repeat(60px)}.qms-select-department-tree-container .qms-loading-container .qms-loader{position:relative;width:100%;height:100%;padding:10px 0;overflow:hidden}.qms-select-department-tree-container .qms-loading-container .qms-loader:after{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;background:linear-gradient(110deg,#e9e9e900,#e3e3e300 40%,#e3e3e380 50%,#e3e3e300 60% 100%);animation:animate-loading 1.2s linear infinite}.qms-select-department-tree-container .qms-loading-container .qms-loader__wrapper{position:relative;width:100%;height:100%}.qms-select-department-tree-container .qms-loading-container .qms-loader__wrapper .row-loader{background-color:#eee;position:absolute;left:0;width:100%;height:40px}@keyframes animate-loading{0%{transform:translate(-100%)}to{transform:translate(100%)}}.qms-select-department-tree-container .qms-spinner{font-size:20px;position:relative;display:inline-block;width:1em;height:1em}.qms-select-department-tree-container .qms-spinner.center{position:absolute;inset:0;margin:auto}.qms-select-department-tree-container ::ng-deep .mat-mdc-progress-spinner circle,.qms-select-department-tree-container .mat-mdc-progress-spinner circle{stroke:#1b75be!important}@media screen and (max-width: 600px){.qms-select-department-tree-container .external-view-node{flex-basis:65px!important}.qms-select-department-tree-container .qms-tree-node.active-external-view .mat-mdc-checkbox.qms-group-options{width:calc(100% - 110px)!important}.qms-select-department-tree-container .header-view-tree{grid-template-columns:1fr 80px!important}.qms-select-department-tree-container ::ng-deep .cdk-virtual-scroll-content-wrapper{right:0!important}.qms-select-department-tree-container .header-title{font-size:14px!important}.qms-select-department-tree-container .text-name,.qms-select-department-tree-container .node-external,.qms-select-department-tree-container .text-label,.qms-select-department-tree-container .text-label+span{font-size:12px}.qms-select-department-tree-container .node-expand-area{width:30px!important;height:30px!important}.qms-select-department-tree-container .node-expand-area .qms-btn-icon{width:30px;height:30px;line-height:30px}.qms-select-department-tree-container .fs-base{font-size:12px!important}.qms-select-department-tree-container .qms-select-department-tree-container .breadcrumb-container{flex-wrap:nowrap!important}.qms-select-department-tree-container ::ng-deep .qms-breadcrumb-item-text{font-size:12px!important;max-width:175px!important}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-mdc-paginator-container .qms-total-result{display:none!important}.qms-select-department-tree-container ::ng-deep .qms-paginator .size-small .mat-mdc-paginator-container{justify-content:center!important}.qms-select-department-tree-container .qms-view-search-result__header>.header-title:nth-child(2){flex-basis:120px!important}.qms-select-department-tree-container .result-item__content .external-name{flex-basis:75px!important}.qms-select-department-tree-container .result-item__content .external-name span{width:75px!important}}\n"], dependencies: [{ kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i7.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i7$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: QMSSearchFieldDirective, selector: "mat-form-field[qms-search-field]", inputs: ["isLoading"] }, { kind: "directive", type: QMSInputClearDirective, selector: "[qms-input-clear]" }, { kind: "directive", type: QMSFormFieldDirective, selector: "[qms-form]" }, { kind: "directive", type: QMSGroupOptionDirective, selector: "[qms-group-options]", inputs: ["label"] }, { kind: "directive", type: AutocompleteOffDirective, selector: "[qms-group-options]" }, { kind: "directive", type: QMSToolTipRendererDirective, selector: "[qms-tool-tip]", inputs: ["showToolTip", "mode", "qms-tool-tip", "contentTemplate", "position"] }, { kind: "directive", type: QMSMultiIconDirective, selector: "[qmsTransformIcon]", inputs: ["qmsTransformIcon"] }, { kind: "directive", type: EllipsifyDirective, selector: "[qms-elipsify]" }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i11.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i11.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i8.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i8.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i17.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: QMSButtonIcon, selector: "button[qms-btn-icon]", inputs: ["disabled", "color", "active"], exportAs: ["qmsButtonIcon"] }, { kind: "component", type: i16.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: QMSBreadcrumb, selector: "qms-breadcrumb", inputs: ["nodes", "type", "maxLine", "numDisplayItem", "onlyItem", "disabledLastItem"], outputs: ["onItemClick"] }, { kind: "directive", type: i14.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: QMSPaginatorComponent, selector: "qms-paginator", inputs: ["numHidden", "size", "pageSizeOptions", "pageSize", "length", "pageIndex", "overlayPanelClass"], outputs: ["page"] }, { kind: "component", type: i23.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i24.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i24.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i24.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "pipe", type: i7.AsyncPipe, name: "async" }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SelectProcessDataTreeComponent, selector: "qms-select-process-data-tree", inputs: { rowsSkeleton: "rowsSkeleton", height: "height", config: "config" }, outputs: { onSearchEvent: "onSearchEvent", onPagingSearchEvent: "onPagingSearchEvent", onValueChangeEvent: "onValueChangeEvent", selectionNodeChangeEvent: "selectionNodeChangeEvent", onCheckNodeEvent: "onCheckNodeEvent", onExpandNodeEvent: "onExpandNodeEvent", onLoadMoreEvent: "onLoadMoreEvent", onCheckItemSearchEvent: "onCheckItemSearchEvent", onCheckAllItemSearchEvent: "onCheckAllItemSearchEvent", toggleIncludeChildEvent: "toggleIncludeChildEvent" }, viewQueries: [{ propertyName: "cdkVirtualScrollViewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }, { propertyName: "paginatorSearch", first: true, predicate: ["paginatorSearch"], descendants: true }], ngImport: i0, 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}}(<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>", styles: [".qms-select-department-tree-container{font-family:Open Sans,sans-serif}.qms-select-department-tree-container .mr10{margin-right:10px}.qms-select-department-tree-container .mt5{margin-bottom:5px}.qms-select-department-tree-container .mb5{margin-top:5px}.qms-select-department-tree-container .w100{width:100%}.qms-select-department-tree-container .h100{height:100%}.qms-select-department-tree-container .fw500{font-weight:500!important}.qms-select-department-tree-container .text-right{text-align:right}.qms-select-department-tree-container .mt20{margin-top:20px}.qms-select-department-tree-container .d-flex{display:flex}.qms-select-department-tree-container .align-items-center{align-items:center}.qms-select-department-tree-container .justify-content-end{justify-content:flex-end}.qms-select-department-tree-container .text-selected{color:#0009;font-size:12px;line-height:16px;margin-top:1rem}.qms-select-department-tree-container .input-field{display:flex;align-items:center;position:relative}.qms-select-department-tree-container .input-field ::ng-deep .mat-form-field-wrapper{padding-bottom:8px!important}.qms-select-department-tree-container .input-field ::ng-deep .mat-form-field-underline{bottom:8px!important}.qms-select-department-tree-container .input-field input.input-search{width:100%;padding:10px;outline:none;border:none;background:var(--background-input-text)}.qms-select-department-tree-container .input-field .btn-search{cursor:pointer;vertical-align:middle;position:absolute;top:50%;right:10px;transform:translateY(-50%)}.qms-select-department-tree-container .input-field .line__divider{border-bottom:1px solid #ccc;height:1px;margin-top:10px;min-width:300px;max-width:100%}.qms-select-department-tree-container .header-title{font-weight:500;color:var(--ws-text-primary);font-size:16px;display:flex;align-items:center}.qms-select-department-tree-container .header-title .header-view{padding:4px 0}.qms-select-department-tree-container .sticky-position{position:sticky;top:0;left:0;z-index:1;background:#fff}.qms-select-department-tree-container .header-view-tree{display:grid;grid-template-columns:1fr 200px;column-gap:2px;padding:4px 12px 4px 0}.qms-select-department-tree-container .header-view-tree .header-view:nth-child(1){padding-left:12px}.qms-select-department-tree-container .tree-department-wrapper{padding-right:4px;overflow:hidden;position:relative;transition:height .3s ease-in-out}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view{width:100%;display:grid;grid-template-columns:1fr 200px;column-gap:2px}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main>.separate{height:38px}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main>.separate.h-0{height:0}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main:last-child{height:100%;padding-left:4px;position:relative}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main:last-child:after{position:absolute;content:\"\";top:0;bottom:-38px;left:0;width:1px;background:#0000001f}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main .external-list-item-container .node-external{overflow:hidden;transition:all .1s ease-in-out}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main .external-list-item-container .node-external .node-external-content{padding:5px 15px;height:calc(100% - 2px);color:var(--default-color);font-size:14px;display:flex;align-items:center}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main .external-list-item-container .node-external .node-external-content span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.qms-select-department-tree-container .mask-overlay{z-index:1000;background-color:#2221211a;position:absolute;top:0;left:0;width:100%;height:100%;border-radius:4px;overflow:hidden;display:grid;place-items:center}.qms-select-department-tree-container .select-department-tree>.cdk-virtual-scroll-orientation-vertical .cdk-virtual-scroll-content-wrapper{padding:0 4px!important}.qms-select-department-tree-container .select-department-tree .qms-tree-node{display:flex;align-items:center;border-radius:4px}.qms-select-department-tree-container .select-department-tree .qms-tree-node:hover{background-color:#00000014}.qms-select-department-tree-container .select-department-tree .qms-tree-node>.node-expand-area{width:48px;height:48px;position:relative}.qms-select-department-tree-container .select-department-tree .qms-tree-node.active-external-view .mat-mdc-checkbox.qms-group-options{width:calc(100% - 250px)}.qms-select-department-tree-container .select-department-tree .qms-tree-node.node-loading{background:var(--primary-light-6-opacity)}.qms-select-department-tree-container .select-department-tree .qms-tree-node>.external-view-node{flex-basis:200px;overflow:hidden}.qms-select-department-tree-container .select-department-tree .qms-tree-node>.external-view-node .node-external{overflow:hidden;transition:all .1s ease-in-out;display:block}.qms-select-department-tree-container .select-department-tree .qms-tree-node>.external-view-node .node-external .node-external-content{padding:5px 15px;height:calc(100% - 2px);color:var(--default-color);font-size:14px;display:flex;align-items:center}.qms-select-department-tree-container .select-department-tree .qms-tree-node>.external-view-node .node-external .node-external-content span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.qms-select-department-tree-container .select-department-tree .qms-tree-node.expand-node{color:var(--primary)}.qms-select-department-tree-container .select-department-tree .qms-tree-node.expand-node:hover{background:var(--primary-light-6-opacity)}.qms-select-department-tree-container .select-department-tree .qms-tree-node.expand-node:active{background:var(--primary-light-12-opacity)}.qms-select-department-tree-container .select-department-tree .qms-tree-node.expand-node .mat-icon{color:var(--primary)}.qms-select-department-tree-container .select-department-tree .qms-tree-node .node-without-checkbox{cursor:pointer;width:100%;display:flex;justify-content:space-between;align-items:center}.qms-select-department-tree-container .select-department-tree .qms-tree-node .node-without-checkbox .mat-icon{color:var(--primary);margin-right:4px}.qms-select-department-tree-container .select-department-tree .qms-tree-node.selected-theme{background:var(--primary-light-12-opacity)}.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all{cursor:default!important;pointer-events:none;-webkit-user-select:none;user-select:none}.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all button.mat-button-disabled,.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all .mat-icon-rtl-mirror,.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all .type-icon{color:#00000061}.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all .text-name.disabled{color:#00000061;cursor:default!important;pointer-events:none;-webkit-user-select:none;user-select:none}.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all.active{background-color:transparent}.qms-select-department-tree-container .text-name{position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;cursor:pointer;width:100%}.qms-select-department-tree-container .cursor-pointer{cursor:pointer}.qms-select-department-tree-container .ml5{margin-left:15px!important}.qms-select-department-tree-container .pl-10{padding-left:10px}.qms-select-department-tree-container ::ng-deep .mat-mdc-checkbox.qms-group-options.flex-direction-row .mat-checkbox-layout{white-space:normal}.qms-select-department-tree-container ::ng-deep .mat-mdc-checkbox.qms-group-options.flex-direction-row .node-text>span{display:block}.qms-select-department-tree-container ::ng-deep .mat-mdc-checkbox.qms-group-options.flex-direction-row .mat-checkbox-label{flex-direction:row;align-items:center;position:relative;padding-bottom:2px}.qms-select-department-tree-container .qms-view-search-result{width:100%;overflow:hidden}.qms-select-department-tree-container .qms-view-search-result__header{position:relative}.qms-select-department-tree-container .qms-view-search-result__header:after{position:absolute;content:\"\";bottom:0;left:0;width:100%;height:1px;background-color:#0000001a}.qms-select-department-tree-container .qms-view-search-result__header .header-title{padding:8px 0;display:inline-block}.qms-select-department-tree-container .qms-view-search-result__header .header-title:nth-child(1){padding-left:12px}.qms-select-department-tree-container .qms-view-search-result__header .header-title:nth-child(2){flex-basis:200px}.qms-select-department-tree-container .qms-view-search-result>.no-result{height:100%;display:flex;justify-content:center;align-items:center}.qms-select-department-tree-container .qms-view-search-result__wrapper{height:calc(100% - 50px);width:100%}.qms-select-department-tree-container .qms-view-search-result__wrapper.active-external{height:calc(100% - 90px)!important}.qms-select-department-tree-container .qms-view-search-result__wrapper .result{max-height:calc(100% - 44px);overflow-y:auto;margin-bottom:4px;padding-right:4px}.qms-select-department-tree-container .qms-view-search-result__wrapper .result.active-paging{max-height:calc(100% - 40px)}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item{border-radius:4px;display:grid;grid-template-columns:45px 1fr;align-items:center;cursor:pointer;transition:background .3s ease;min-height:40px}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item:not(:nth-child(1)){margin-top:4px!important}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item:hover,.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item.active{background:linear-gradient(0deg,#0163b21f,#0163b21f),#fff}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item__content{display:flex;align-items:center}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item__content .item-result-content-wraper{padding:5px 15px;width:100%}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item__content .external-name{flex-basis:200px}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item__content .external-name span{width:200px;display:inline-block}.qms-select-department-tree-container .qms-view-search-result ::ng-deep .mat-mdc-checkbox.qms-group-options{display:flex;height:100%}.qms-select-department-tree-container ::ng-deep .breadcrumb-container{flex-wrap:wrap}.qms-select-department-tree-container ::ng-deep .mat-button-focus-overlay{background-color:transparent}.qms-select-department-tree-container ::ng-deep .qms-breadcrumb-item{margin:0}.qms-select-department-tree-container ::ng-deep .qms-breadcrumb-item-text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;transition:color .3s ease}.qms-select-department-tree-container ::ng-deep .qms-breadcrumb-item-text:not(:last-child){max-width:150px!important}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-mdc-paginator-container .qms-total-result{margin-bottom:0;margin-right:12px;height:100%;display:flex;align-items:center}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-mdc-paginator-container .qms-total-result span{font-weight:600;color:#000c}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-mdc-paginator-container .qms-paginator-range-actions{margin-bottom:0;column-gap:2px}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-mdc-paginator-container .qms-paginator-range-actions>.qms-total-result{margin-bottom:0}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-form-field-wrapper{padding-bottom:0}.qms-select-department-tree-container ::ng-deep .qms-paginator .qms-paginator-page-size{align-items:center}.qms-select-department-tree-container .text-gray{color:#242424}.qms-select-department-tree-container .mb0{margin-bottom:0!important}.qms-select-department-tree-container .fs-base{font-size:14px!important}.qms-select-department-tree-container .user-select-none{-webkit-user-select:none;user-select:none}.qms-select-department-tree-container .item-breadcrumb-disable{cursor:not-allowed;color:#0009;font-weight:400;font-size:14px}.qms-select-department-tree-container ::ng-deep .mat-mdc-checkbox.checkbox-all .mat-checkbox-label{flex-direction:row;align-items:center;column-gap:4px}.qms-select-department-tree-container ::ng-deep .btn-arrow{width:40px;height:40px;line-height:40px}.qms-select-department-tree-container .qms-loading-container{overflow:hidden;display:grid;grid-template-rows:repeat(60px)}.qms-select-department-tree-container .qms-loading-container .qms-loader{position:relative;width:100%;height:100%;padding:10px 0;overflow:hidden}.qms-select-department-tree-container .qms-loading-container .qms-loader:after{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;background:linear-gradient(110deg,#e9e9e900,#e3e3e300 40%,#e3e3e380 50%,#e3e3e300 60% 100%);animation:animate-loading 1.2s linear infinite}.qms-select-department-tree-container .qms-loading-container .qms-loader__wrapper{position:relative;width:100%;height:100%}.qms-select-department-tree-container .qms-loading-container .qms-loader__wrapper .row-loader{background-color:#eee;position:absolute;left:0;width:100%;height:40px}@keyframes animate-loading{0%{transform:translate(-100%)}to{transform:translate(100%)}}.qms-select-department-tree-container .qms-spinner{font-size:20px;position:relative;display:inline-block;width:1em;height:1em}.qms-select-department-tree-container .qms-spinner.center{position:absolute;inset:0;margin:auto}.qms-select-department-tree-container ::ng-deep .mat-mdc-progress-spinner circle,.qms-select-department-tree-container .mat-mdc-progress-spinner circle{stroke:#1b75be!important}@media screen and (max-width: 600px){.qms-select-department-tree-container .external-view-node{flex-basis:65px!important}.qms-select-department-tree-container .qms-tree-node.active-external-view .mat-mdc-checkbox.qms-group-options{width:calc(100% - 110px)!important}.qms-select-department-tree-container .header-view-tree{grid-template-columns:1fr 80px!important}.qms-select-department-tree-container ::ng-deep .cdk-virtual-scroll-content-wrapper{right:0!important}.qms-select-department-tree-container .header-title{font-size:14px!important}.qms-select-department-tree-container .text-name,.qms-select-department-tree-container .node-external,.qms-select-department-tree-container .text-label,.qms-select-department-tree-container .text-label+span{font-size:12px}.qms-select-department-tree-container .node-expand-area{width:30px!important;height:30px!important}.qms-select-department-tree-container .node-expand-area .qms-btn-icon{width:30px;height:30px;line-height:30px}.qms-select-department-tree-container .fs-base{font-size:12px!important}.qms-select-department-tree-container .qms-select-department-tree-container .breadcrumb-container{flex-wrap:nowrap!important}.qms-select-department-tree-container ::ng-deep .qms-breadcrumb-item-text{font-size:12px!important;max-width:175px!important}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-mdc-paginator-container .qms-total-result{display:none!important}.qms-select-department-tree-container ::ng-deep .qms-paginator .size-small .mat-mdc-paginator-container{justify-content:center!important}.qms-select-department-tree-container .qms-view-search-result__header>.header-title:nth-child(2){flex-basis:120px!important}.qms-select-department-tree-container .result-item__content .external-name{flex-basis:75px!important}.qms-select-department-tree-container .result-item__content .external-name span{width:75px!important}}\n"], dependencies: [{ kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i7.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i7$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: QMSSearchFieldDirective, selector: "mat-form-field[qms-search-field]", inputs: ["isLoading"] }, { kind: "directive", type: QMSInputClearDirective, selector: "[qms-input-clear]" }, { kind: "directive", type: QMSFormFieldDirective, selector: "[qms-form]" }, { kind: "directive", type: QMSGroupOptionDirective, selector: "[qms-group-options]", inputs: ["label"] }, { kind: "directive", type: AutocompleteOffDirective, selector: "[qms-group-options]" }, { kind: "directive", type: QMSToolTipRendererDirective, selector: "[qms-tool-tip]", inputs: ["showToolTip", "mode", "qms-tool-tip", "contentTemplate", "position"] }, { kind: "directive", type: QMSMultiIconDirective, selector: "[qmsTransformIcon]", inputs: ["qmsTransformIcon"] }, { kind: "directive", type: EllipsifyDirective, selector: "[qms-elipsify]" }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i11.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i11.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i8.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i8.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i17.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: QMSButtonIcon, selector: "button[qms-btn-icon]", inputs: ["disabled", "color", "active"], exportAs: ["qmsButtonIcon"] }, { kind: "component", type: i16.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: QMSBreadcrumb, selector: "qms-breadcrumb", inputs: ["nodes", "type", "maxLine", "numDisplayItem", "onlyItem", "disabledLastItem"], outputs: ["onItemClick"] }, { kind: "directive", type: i14.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: QMSPaginatorComponent, selector: "qms-paginator", inputs: ["numHidden", "size", "pageSizeOptions", "pageSize", "length", "pageIndex", "overlayPanelClass"], outputs: ["page"] }, { kind: "component", type: i23.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i24.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i24.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i24.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "pipe", type: i7.AsyncPipe, name: "async" }], animations: [
             AnimationTreeDepartment
         ], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
@@ -39638,7 +39638,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             type: Component,
             args: [{ selector: 'qms-select-process-data-tree', animations: [
                         AnimationTreeDepartment
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, 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>", styles: [".qms-select-department-tree-container{font-family:Open Sans,sans-serif}.qms-select-department-tree-container .mr10{margin-right:10px}.qms-select-department-tree-container .mt5{margin-bottom:5px}.qms-select-department-tree-container .mb5{margin-top:5px}.qms-select-department-tree-container .w100{width:100%}.qms-select-department-tree-container .h100{height:100%}.qms-select-department-tree-container .fw500{font-weight:500!important}.qms-select-department-tree-container .text-right{text-align:right}.qms-select-department-tree-container .mt20{margin-top:20px}.qms-select-department-tree-container .d-flex{display:flex}.qms-select-department-tree-container .align-items-center{align-items:center}.qms-select-department-tree-container .justify-content-end{justify-content:flex-end}.qms-select-department-tree-container .text-selected{color:#0009;font-size:12px;line-height:16px;margin-top:1rem}.qms-select-department-tree-container .input-field{display:flex;align-items:center;position:relative}.qms-select-department-tree-container .input-field ::ng-deep .mat-form-field-wrapper{padding-bottom:8px!important}.qms-select-department-tree-container .input-field ::ng-deep .mat-form-field-underline{bottom:8px!important}.qms-select-department-tree-container .input-field input.input-search{width:100%;padding:10px;outline:none;border:none;background:var(--background-input-text)}.qms-select-department-tree-container .input-field .btn-search{cursor:pointer;vertical-align:middle;position:absolute;top:50%;right:10px;transform:translateY(-50%)}.qms-select-department-tree-container .input-field .line__divider{border-bottom:1px solid #ccc;height:1px;margin-top:10px;min-width:300px;max-width:100%}.qms-select-department-tree-container .header-title{font-weight:500;color:var(--ws-text-primary);font-size:16px;display:flex;align-items:center}.qms-select-department-tree-container .header-title .header-view{padding:4px 0}.qms-select-department-tree-container .sticky-position{position:sticky;top:0;left:0;z-index:1;background:#fff}.qms-select-department-tree-container .header-view-tree{display:grid;grid-template-columns:1fr 200px;column-gap:2px;padding:4px 12px 4px 0}.qms-select-department-tree-container .header-view-tree .header-view:nth-child(1){padding-left:12px}.qms-select-department-tree-container .tree-department-wrapper{padding-right:4px;overflow:hidden;position:relative;transition:height .3s ease-in-out}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view{width:100%;display:grid;grid-template-columns:1fr 200px;column-gap:2px}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main>.separate{height:38px}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main>.separate.h-0{height:0}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main:last-child{height:100%;padding-left:4px;position:relative}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main:last-child:after{position:absolute;content:\"\";top:0;bottom:-38px;left:0;width:1px;background:#0000001f}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main .external-list-item-container .node-external{overflow:hidden;transition:all .1s ease-in-out}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main .external-list-item-container .node-external .node-external-content{padding:5px 15px;height:calc(100% - 2px);color:var(--default-color);font-size:14px;display:flex;align-items:center}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main .external-list-item-container .node-external .node-external-content span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.qms-select-department-tree-container .mask-overlay{z-index:1000;background-color:#2221211a;position:absolute;top:0;left:0;width:100%;height:100%;border-radius:4px;overflow:hidden;display:grid;place-items:center}.qms-select-department-tree-container .select-department-tree>.cdk-virtual-scroll-orientation-vertical .cdk-virtual-scroll-content-wrapper{padding:0 4px!important}.qms-select-department-tree-container .select-department-tree .qms-tree-node{display:flex;align-items:center;border-radius:4px}.qms-select-department-tree-container .select-department-tree .qms-tree-node:hover{background-color:#00000014}.qms-select-department-tree-container .select-department-tree .qms-tree-node>.node-expand-area{width:48px;height:48px;position:relative}.qms-select-department-tree-container .select-department-tree .qms-tree-node.active-external-view .mat-mdc-checkbox.qms-group-options{width:calc(100% - 250px)}.qms-select-department-tree-container .select-department-tree .qms-tree-node.node-loading{background:var(--primary-light-6-opacity)}.qms-select-department-tree-container .select-department-tree .qms-tree-node>.external-view-node{flex-basis:200px;overflow:hidden}.qms-select-department-tree-container .select-department-tree .qms-tree-node>.external-view-node .node-external{overflow:hidden;transition:all .1s ease-in-out;display:block}.qms-select-department-tree-container .select-department-tree .qms-tree-node>.external-view-node .node-external .node-external-content{padding:5px 15px;height:calc(100% - 2px);color:var(--default-color);font-size:14px;display:flex;align-items:center}.qms-select-department-tree-container .select-department-tree .qms-tree-node>.external-view-node .node-external .node-external-content span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.qms-select-department-tree-container .select-department-tree .qms-tree-node.expand-node{color:var(--primary)}.qms-select-department-tree-container .select-department-tree .qms-tree-node.expand-node:hover{background:var(--primary-light-6-opacity)}.qms-select-department-tree-container .select-department-tree .qms-tree-node.expand-node:active{background:var(--primary-light-12-opacity)}.qms-select-department-tree-container .select-department-tree .qms-tree-node.expand-node .mat-icon{color:var(--primary)}.qms-select-department-tree-container .select-department-tree .qms-tree-node .node-without-checkbox{cursor:pointer;width:100%;display:flex;justify-content:space-between;align-items:center}.qms-select-department-tree-container .select-department-tree .qms-tree-node .node-without-checkbox .mat-icon{color:var(--primary);margin-right:4px}.qms-select-department-tree-container .select-department-tree .qms-tree-node.selected-theme{background:var(--primary-light-12-opacity)}.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all{cursor:default!important;pointer-events:none;-webkit-user-select:none;user-select:none}.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all button.mat-button-disabled,.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all .mat-icon-rtl-mirror,.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all .type-icon{color:#00000061}.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all .text-name.disabled{color:#00000061;cursor:default!important;pointer-events:none;-webkit-user-select:none;user-select:none}.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all.active{background-color:transparent}.qms-select-department-tree-container .text-name{position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;cursor:pointer;width:100%}.qms-select-department-tree-container .cursor-pointer{cursor:pointer}.qms-select-department-tree-container .ml5{margin-left:15px!important}.qms-select-department-tree-container .pl-10{padding-left:10px}.qms-select-department-tree-container ::ng-deep .mat-mdc-checkbox.qms-group-options.flex-direction-row .mat-checkbox-layout{white-space:normal}.qms-select-department-tree-container ::ng-deep .mat-mdc-checkbox.qms-group-options.flex-direction-row .node-text>span{display:block}.qms-select-department-tree-container ::ng-deep .mat-mdc-checkbox.qms-group-options.flex-direction-row .mat-checkbox-label{flex-direction:row;align-items:center;position:relative;padding-bottom:2px}.qms-select-department-tree-container .qms-view-search-result{width:100%;overflow:hidden}.qms-select-department-tree-container .qms-view-search-result__header{position:relative}.qms-select-department-tree-container .qms-view-search-result__header:after{position:absolute;content:\"\";bottom:0;left:0;width:100%;height:1px;background-color:#0000001a}.qms-select-department-tree-container .qms-view-search-result__header .header-title{padding:8px 0;display:inline-block}.qms-select-department-tree-container .qms-view-search-result__header .header-title:nth-child(1){padding-left:12px}.qms-select-department-tree-container .qms-view-search-result__header .header-title:nth-child(2){flex-basis:200px}.qms-select-department-tree-container .qms-view-search-result>.no-result{height:100%;display:flex;justify-content:center;align-items:center}.qms-select-department-tree-container .qms-view-search-result__wrapper{height:calc(100% - 50px);width:100%}.qms-select-department-tree-container .qms-view-search-result__wrapper.active-external{height:calc(100% - 90px)!important}.qms-select-department-tree-container .qms-view-search-result__wrapper .result{max-height:calc(100% - 44px);overflow-y:auto;margin-bottom:4px;padding-right:4px}.qms-select-department-tree-container .qms-view-search-result__wrapper .result.active-paging{max-height:calc(100% - 40px)}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item{border-radius:4px;display:grid;grid-template-columns:45px 1fr;align-items:center;cursor:pointer;transition:background .3s ease;min-height:40px}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item:not(:nth-child(1)){margin-top:4px!important}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item:hover,.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item.active{background:linear-gradient(0deg,#0163b21f,#0163b21f),#fff}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item__content{display:flex;align-items:center}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item__content .item-result-content-wraper{padding:5px 15px;width:100%}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item__content .external-name{flex-basis:200px}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item__content .external-name span{width:200px;display:inline-block}.qms-select-department-tree-container .qms-view-search-result ::ng-deep .mat-mdc-checkbox.qms-group-options{display:flex;height:100%}.qms-select-department-tree-container ::ng-deep .breadcrumb-container{flex-wrap:wrap}.qms-select-department-tree-container ::ng-deep .mat-button-focus-overlay{background-color:transparent}.qms-select-department-tree-container ::ng-deep .qms-breadcrumb-item{margin:0}.qms-select-department-tree-container ::ng-deep .qms-breadcrumb-item-text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;transition:color .3s ease}.qms-select-department-tree-container ::ng-deep .qms-breadcrumb-item-text:not(:last-child){max-width:150px!important}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-mdc-paginator-container .qms-total-result{margin-bottom:0;margin-right:12px;height:100%;display:flex;align-items:center}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-mdc-paginator-container .qms-total-result span{font-weight:600;color:#000c}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-mdc-paginator-container .qms-paginator-range-actions{margin-bottom:0;column-gap:2px}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-mdc-paginator-container .qms-paginator-range-actions>.qms-total-result{margin-bottom:0}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-form-field-wrapper{padding-bottom:0}.qms-select-department-tree-container ::ng-deep .qms-paginator .qms-paginator-page-size{align-items:center}.qms-select-department-tree-container .text-gray{color:#242424}.qms-select-department-tree-container .mb0{margin-bottom:0!important}.qms-select-department-tree-container .fs-base{font-size:14px!important}.qms-select-department-tree-container .user-select-none{-webkit-user-select:none;user-select:none}.qms-select-department-tree-container .item-breadcrumb-disable{cursor:not-allowed;color:#0009;font-weight:400;font-size:14px;max-width:250px}.qms-select-department-tree-container ::ng-deep .mat-mdc-checkbox.checkbox-all .mat-checkbox-label{flex-direction:row;align-items:center;column-gap:4px}.qms-select-department-tree-container ::ng-deep .btn-arrow{width:40px;height:40px;line-height:40px}.qms-select-department-tree-container .qms-loading-container{overflow:hidden;display:grid;grid-template-rows:repeat(60px)}.qms-select-department-tree-container .qms-loading-container .qms-loader{position:relative;width:100%;height:100%;padding:10px 0;overflow:hidden}.qms-select-department-tree-container .qms-loading-container .qms-loader:after{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;background:linear-gradient(110deg,#e9e9e900,#e3e3e300 40%,#e3e3e380 50%,#e3e3e300 60% 100%);animation:animate-loading 1.2s linear infinite}.qms-select-department-tree-container .qms-loading-container .qms-loader__wrapper{position:relative;width:100%;height:100%}.qms-select-department-tree-container .qms-loading-container .qms-loader__wrapper .row-loader{background-color:#eee;position:absolute;left:0;width:100%;height:40px}@keyframes animate-loading{0%{transform:translate(-100%)}to{transform:translate(100%)}}.qms-select-department-tree-container .qms-spinner{font-size:20px;position:relative;display:inline-block;width:1em;height:1em}.qms-select-department-tree-container .qms-spinner.center{position:absolute;inset:0;margin:auto}.qms-select-department-tree-container ::ng-deep .mat-mdc-progress-spinner circle,.qms-select-department-tree-container .mat-mdc-progress-spinner circle{stroke:#1b75be!important}@media screen and (max-width: 600px){.qms-select-department-tree-container .external-view-node{flex-basis:65px!important}.qms-select-department-tree-container .qms-tree-node.active-external-view .mat-mdc-checkbox.qms-group-options{width:calc(100% - 110px)!important}.qms-select-department-tree-container .header-view-tree{grid-template-columns:1fr 80px!important}.qms-select-department-tree-container ::ng-deep .cdk-virtual-scroll-content-wrapper{right:0!important}.qms-select-department-tree-container .header-title{font-size:14px!important}.qms-select-department-tree-container .text-name,.qms-select-department-tree-container .node-external,.qms-select-department-tree-container .text-label,.qms-select-department-tree-container .text-label+span{font-size:12px}.qms-select-department-tree-container .node-expand-area{width:30px!important;height:30px!important}.qms-select-department-tree-container .node-expand-area .qms-btn-icon{width:30px;height:30px;line-height:30px}.qms-select-department-tree-container .fs-base{font-size:12px!important}.qms-select-department-tree-container .qms-select-department-tree-container .breadcrumb-container{flex-wrap:nowrap!important}.qms-select-department-tree-container ::ng-deep .qms-breadcrumb-item-text{font-size:12px!important;max-width:175px!important}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-mdc-paginator-container .qms-total-result{display:none!important}.qms-select-department-tree-container ::ng-deep .qms-paginator .size-small .mat-mdc-paginator-container{justify-content:center!important}.qms-select-department-tree-container .qms-view-search-result__header>.header-title:nth-child(2){flex-basis:120px!important}.qms-select-department-tree-container .result-item__content .external-name{flex-basis:75px!important}.qms-select-department-tree-container .result-item__content .external-name span{width:75px!important}}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, 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}}(<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>", styles: [".qms-select-department-tree-container{font-family:Open Sans,sans-serif}.qms-select-department-tree-container .mr10{margin-right:10px}.qms-select-department-tree-container .mt5{margin-bottom:5px}.qms-select-department-tree-container .mb5{margin-top:5px}.qms-select-department-tree-container .w100{width:100%}.qms-select-department-tree-container .h100{height:100%}.qms-select-department-tree-container .fw500{font-weight:500!important}.qms-select-department-tree-container .text-right{text-align:right}.qms-select-department-tree-container .mt20{margin-top:20px}.qms-select-department-tree-container .d-flex{display:flex}.qms-select-department-tree-container .align-items-center{align-items:center}.qms-select-department-tree-container .justify-content-end{justify-content:flex-end}.qms-select-department-tree-container .text-selected{color:#0009;font-size:12px;line-height:16px;margin-top:1rem}.qms-select-department-tree-container .input-field{display:flex;align-items:center;position:relative}.qms-select-department-tree-container .input-field ::ng-deep .mat-form-field-wrapper{padding-bottom:8px!important}.qms-select-department-tree-container .input-field ::ng-deep .mat-form-field-underline{bottom:8px!important}.qms-select-department-tree-container .input-field input.input-search{width:100%;padding:10px;outline:none;border:none;background:var(--background-input-text)}.qms-select-department-tree-container .input-field .btn-search{cursor:pointer;vertical-align:middle;position:absolute;top:50%;right:10px;transform:translateY(-50%)}.qms-select-department-tree-container .input-field .line__divider{border-bottom:1px solid #ccc;height:1px;margin-top:10px;min-width:300px;max-width:100%}.qms-select-department-tree-container .header-title{font-weight:500;color:var(--ws-text-primary);font-size:16px;display:flex;align-items:center}.qms-select-department-tree-container .header-title .header-view{padding:4px 0}.qms-select-department-tree-container .sticky-position{position:sticky;top:0;left:0;z-index:1;background:#fff}.qms-select-department-tree-container .header-view-tree{display:grid;grid-template-columns:1fr 200px;column-gap:2px;padding:4px 12px 4px 0}.qms-select-department-tree-container .header-view-tree .header-view:nth-child(1){padding-left:12px}.qms-select-department-tree-container .tree-department-wrapper{padding-right:4px;overflow:hidden;position:relative;transition:height .3s ease-in-out}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view{width:100%;display:grid;grid-template-columns:1fr 200px;column-gap:2px}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main>.separate{height:38px}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main>.separate.h-0{height:0}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main:last-child{height:100%;padding-left:4px;position:relative}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main:last-child:after{position:absolute;content:\"\";top:0;bottom:-38px;left:0;width:1px;background:#0000001f}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main .external-list-item-container .node-external{overflow:hidden;transition:all .1s ease-in-out}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main .external-list-item-container .node-external .node-external-content{padding:5px 15px;height:calc(100% - 2px);color:var(--default-color);font-size:14px;display:flex;align-items:center}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main .external-list-item-container .node-external .node-external-content span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.qms-select-department-tree-container .mask-overlay{z-index:1000;background-color:#2221211a;position:absolute;top:0;left:0;width:100%;height:100%;border-radius:4px;overflow:hidden;display:grid;place-items:center}.qms-select-department-tree-container .select-department-tree>.cdk-virtual-scroll-orientation-vertical .cdk-virtual-scroll-content-wrapper{padding:0 4px!important}.qms-select-department-tree-container .select-department-tree .qms-tree-node{display:flex;align-items:center;border-radius:4px}.qms-select-department-tree-container .select-department-tree .qms-tree-node:hover{background-color:#00000014}.qms-select-department-tree-container .select-department-tree .qms-tree-node>.node-expand-area{width:48px;height:48px;position:relative}.qms-select-department-tree-container .select-department-tree .qms-tree-node.active-external-view .mat-mdc-checkbox.qms-group-options{width:calc(100% - 250px)}.qms-select-department-tree-container .select-department-tree .qms-tree-node.node-loading{background:var(--primary-light-6-opacity)}.qms-select-department-tree-container .select-department-tree .qms-tree-node>.external-view-node{flex-basis:200px;overflow:hidden}.qms-select-department-tree-container .select-department-tree .qms-tree-node>.external-view-node .node-external{overflow:hidden;transition:all .1s ease-in-out;display:block}.qms-select-department-tree-container .select-department-tree .qms-tree-node>.external-view-node .node-external .node-external-content{padding:5px 15px;height:calc(100% - 2px);color:var(--default-color);font-size:14px;display:flex;align-items:center}.qms-select-department-tree-container .select-department-tree .qms-tree-node>.external-view-node .node-external .node-external-content span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.qms-select-department-tree-container .select-department-tree .qms-tree-node.expand-node{color:var(--primary)}.qms-select-department-tree-container .select-department-tree .qms-tree-node.expand-node:hover{background:var(--primary-light-6-opacity)}.qms-select-department-tree-container .select-department-tree .qms-tree-node.expand-node:active{background:var(--primary-light-12-opacity)}.qms-select-department-tree-container .select-department-tree .qms-tree-node.expand-node .mat-icon{color:var(--primary)}.qms-select-department-tree-container .select-department-tree .qms-tree-node .node-without-checkbox{cursor:pointer;width:100%;display:flex;justify-content:space-between;align-items:center}.qms-select-department-tree-container .select-department-tree .qms-tree-node .node-without-checkbox .mat-icon{color:var(--primary);margin-right:4px}.qms-select-department-tree-container .select-department-tree .qms-tree-node.selected-theme{background:var(--primary-light-12-opacity)}.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all{cursor:default!important;pointer-events:none;-webkit-user-select:none;user-select:none}.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all button.mat-button-disabled,.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all .mat-icon-rtl-mirror,.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all .type-icon{color:#00000061}.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all .text-name.disabled{color:#00000061;cursor:default!important;pointer-events:none;-webkit-user-select:none;user-select:none}.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all.active{background-color:transparent}.qms-select-department-tree-container .text-name{position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;cursor:pointer;width:100%}.qms-select-department-tree-container .cursor-pointer{cursor:pointer}.qms-select-department-tree-container .ml5{margin-left:15px!important}.qms-select-department-tree-container .pl-10{padding-left:10px}.qms-select-department-tree-container ::ng-deep .mat-mdc-checkbox.qms-group-options.flex-direction-row .mat-checkbox-layout{white-space:normal}.qms-select-department-tree-container ::ng-deep .mat-mdc-checkbox.qms-group-options.flex-direction-row .node-text>span{display:block}.qms-select-department-tree-container ::ng-deep .mat-mdc-checkbox.qms-group-options.flex-direction-row .mat-checkbox-label{flex-direction:row;align-items:center;position:relative;padding-bottom:2px}.qms-select-department-tree-container .qms-view-search-result{width:100%;overflow:hidden}.qms-select-department-tree-container .qms-view-search-result__header{position:relative}.qms-select-department-tree-container .qms-view-search-result__header:after{position:absolute;content:\"\";bottom:0;left:0;width:100%;height:1px;background-color:#0000001a}.qms-select-department-tree-container .qms-view-search-result__header .header-title{padding:8px 0;display:inline-block}.qms-select-department-tree-container .qms-view-search-result__header .header-title:nth-child(1){padding-left:12px}.qms-select-department-tree-container .qms-view-search-result__header .header-title:nth-child(2){flex-basis:200px}.qms-select-department-tree-container .qms-view-search-result>.no-result{height:100%;display:flex;justify-content:center;align-items:center}.qms-select-department-tree-container .qms-view-search-result__wrapper{height:calc(100% - 50px);width:100%}.qms-select-department-tree-container .qms-view-search-result__wrapper.active-external{height:calc(100% - 90px)!important}.qms-select-department-tree-container .qms-view-search-result__wrapper .result{max-height:calc(100% - 44px);overflow-y:auto;margin-bottom:4px;padding-right:4px}.qms-select-department-tree-container .qms-view-search-result__wrapper .result.active-paging{max-height:calc(100% - 40px)}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item{border-radius:4px;display:grid;grid-template-columns:45px 1fr;align-items:center;cursor:pointer;transition:background .3s ease;min-height:40px}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item:not(:nth-child(1)){margin-top:4px!important}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item:hover,.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item.active{background:linear-gradient(0deg,#0163b21f,#0163b21f),#fff}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item__content{display:flex;align-items:center}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item__content .item-result-content-wraper{padding:5px 15px;width:100%}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item__content .external-name{flex-basis:200px}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item__content .external-name span{width:200px;display:inline-block}.qms-select-department-tree-container .qms-view-search-result ::ng-deep .mat-mdc-checkbox.qms-group-options{display:flex;height:100%}.qms-select-department-tree-container ::ng-deep .breadcrumb-container{flex-wrap:wrap}.qms-select-department-tree-container ::ng-deep .mat-button-focus-overlay{background-color:transparent}.qms-select-department-tree-container ::ng-deep .qms-breadcrumb-item{margin:0}.qms-select-department-tree-container ::ng-deep .qms-breadcrumb-item-text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;transition:color .3s ease}.qms-select-department-tree-container ::ng-deep .qms-breadcrumb-item-text:not(:last-child){max-width:150px!important}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-mdc-paginator-container .qms-total-result{margin-bottom:0;margin-right:12px;height:100%;display:flex;align-items:center}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-mdc-paginator-container .qms-total-result span{font-weight:600;color:#000c}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-mdc-paginator-container .qms-paginator-range-actions{margin-bottom:0;column-gap:2px}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-mdc-paginator-container .qms-paginator-range-actions>.qms-total-result{margin-bottom:0}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-form-field-wrapper{padding-bottom:0}.qms-select-department-tree-container ::ng-deep .qms-paginator .qms-paginator-page-size{align-items:center}.qms-select-department-tree-container .text-gray{color:#242424}.qms-select-department-tree-container .mb0{margin-bottom:0!important}.qms-select-department-tree-container .fs-base{font-size:14px!important}.qms-select-department-tree-container .user-select-none{-webkit-user-select:none;user-select:none}.qms-select-department-tree-container .item-breadcrumb-disable{cursor:not-allowed;color:#0009;font-weight:400;font-size:14px}.qms-select-department-tree-container ::ng-deep .mat-mdc-checkbox.checkbox-all .mat-checkbox-label{flex-direction:row;align-items:center;column-gap:4px}.qms-select-department-tree-container ::ng-deep .btn-arrow{width:40px;height:40px;line-height:40px}.qms-select-department-tree-container .qms-loading-container{overflow:hidden;display:grid;grid-template-rows:repeat(60px)}.qms-select-department-tree-container .qms-loading-container .qms-loader{position:relative;width:100%;height:100%;padding:10px 0;overflow:hidden}.qms-select-department-tree-container .qms-loading-container .qms-loader:after{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;background:linear-gradient(110deg,#e9e9e900,#e3e3e300 40%,#e3e3e380 50%,#e3e3e300 60% 100%);animation:animate-loading 1.2s linear infinite}.qms-select-department-tree-container .qms-loading-container .qms-loader__wrapper{position:relative;width:100%;height:100%}.qms-select-department-tree-container .qms-loading-container .qms-loader__wrapper .row-loader{background-color:#eee;position:absolute;left:0;width:100%;height:40px}@keyframes animate-loading{0%{transform:translate(-100%)}to{transform:translate(100%)}}.qms-select-department-tree-container .qms-spinner{font-size:20px;position:relative;display:inline-block;width:1em;height:1em}.qms-select-department-tree-container .qms-spinner.center{position:absolute;inset:0;margin:auto}.qms-select-department-tree-container ::ng-deep .mat-mdc-progress-spinner circle,.qms-select-department-tree-container .mat-mdc-progress-spinner circle{stroke:#1b75be!important}@media screen and (max-width: 600px){.qms-select-department-tree-container .external-view-node{flex-basis:65px!important}.qms-select-department-tree-container .qms-tree-node.active-external-view .mat-mdc-checkbox.qms-group-options{width:calc(100% - 110px)!important}.qms-select-department-tree-container .header-view-tree{grid-template-columns:1fr 80px!important}.qms-select-department-tree-container ::ng-deep .cdk-virtual-scroll-content-wrapper{right:0!important}.qms-select-department-tree-container .header-title{font-size:14px!important}.qms-select-department-tree-container .text-name,.qms-select-department-tree-container .node-external,.qms-select-department-tree-container .text-label,.qms-select-department-tree-container .text-label+span{font-size:12px}.qms-select-department-tree-container .node-expand-area{width:30px!important;height:30px!important}.qms-select-department-tree-container .node-expand-area .qms-btn-icon{width:30px;height:30px;line-height:30px}.qms-select-department-tree-container .fs-base{font-size:12px!important}.qms-select-department-tree-container .qms-select-department-tree-container .breadcrumb-container{flex-wrap:nowrap!important}.qms-select-department-tree-container ::ng-deep .qms-breadcrumb-item-text{font-size:12px!important;max-width:175px!important}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-mdc-paginator-container .qms-total-result{display:none!important}.qms-select-department-tree-container ::ng-deep .qms-paginator .size-small .mat-mdc-paginator-container{justify-content:center!important}.qms-select-department-tree-container .qms-view-search-result__header>.header-title:nth-child(2){flex-basis:120px!important}.qms-select-department-tree-container .result-item__content .external-name{flex-basis:75px!important}.qms-select-department-tree-container .result-item__content .external-name span{width:75px!important}}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$3.DomSanitizer }, { type: QMSIconRegistryService }, { type: i4.MatIconRegistry }, { type: i0.ElementRef }, { type: TranslateLibraryService }, { type: i1$1.Overlay }, { type: i0.ViewContainerRef }, { type: QMSSelectDepartmentTreeGlobalService }], propDecorators: { rowsSkeleton: [{
                 type: Input
             }], height: [{
@@ -39996,7 +39996,7 @@ class SelectProcessDataComponent {
                     clickAction: 'noop'
                 }
             }
-        ], viewQueries: [{ propertyName: "treeProcessData", first: true, predicate: ["treeProcessData"], descendants: true }], ngImport: i0, 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-process-data-tree #treeProcessData 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-process-data-tree>\n      </div>\n    </div>\n    <div class=\"line__divider\"></div>\n    <div [@heightAnimation] *ngIf=\"treeProcessData && !!treeProcessData.resultSelected.length\" 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-set class=\"panel__item qms-scrollbar\">\n          <div [@inOutAnimation_2] [id]=\"'item-result-'+item.id\" *ngFor=\"let item of treeProcessData.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.childCount}}\n                  </span>\n                </span>\n              </span>\n\n              <button (click)=\"onRemoveNode(item)\" matChipRemove *ngIf=\"!isNodeLoading(item.id); else loadingSpinner\">\n                <mat-icon>cancel</mat-icon>\n              </button>\n\n\n            </mat-chip>\n          </div>\n        </mat-chip-set>\n      </div>\n    </div>\n    <mat-divider *ngIf=\"treeProcessData && !!treeProcessData.resultSelected.length\" 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          ({{treeProcessData.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\"></mat-spinner>\n    </div>\n  </div>\n</ng-template>", styles: [".qms-select-department{font-family:Open Sans,sans-serif}.qms-select-department .cursor-pointer{cursor:pointer}.qms-select-department .ml-5{margin-left:10px}.qms-select-department .padding-5{padding:5px}.qms-select-department .header-dialog{display:flex;justify-content:space-between;align-items:center;font-weight:600;font-size:16px}.qms-select-department .input__field{display:flex;align-items:center;position:relative}.qms-select-department .input__field input.input-search{width:100%;padding:10px;outline:none;border:none;background:var(--background-input-text)}.qms-select-department .input__field .btn-search{cursor:pointer;vertical-align:middle;position:absolute;top:50%;right:10px;transform:translateY(-50%)}.qms-select-department .line__divider{border-bottom:1px solid #ccc;height:1px;margin-top:10px;min-width:300px;max-width:100%}.qms-select-department .mat-expansion-panel-header{height:30px;font-size:12px;letter-spacing:1px;font-family:Raleway;font-weight:600;padding:0}.qms-select-department .mat-expansion-panel-header .mat-expansion-panel-header-title{align-items:center;margin-left:12px}.qms-select-department .mat-expansion-panel:not([class*=mat-elevation-z]){box-shadow:none}.qms-select-department .panel__item{max-height:175px;margin-top:4px;overflow-x:hidden;overflow-y:auto;padding-right:5px;width:100%;display:block}.qms-select-department .panel__item .related__item__inline{max-width:100%}.qms-select-department .panel__item ::ng-deep .mat-chip-list-wrapper{margin:0 -4px!important}.qms-select-department .panel__item .select__toggle-include{width:100%}.qms-select-department .panel__item .select__toggle-include.toggle-include-child .mat-mdc-slide-toggle.qms-group-options .mat-slide-toggle-thumb{background-color:#5a5a5a!important}.qms-select-department .panel__item .related__item__content{height:32px;line-height:32px;background-color:var(--related-item-background);max-width:100%;margin-bottom:5px;margin-left:2.5px;margin-right:2.5px}.qms-select-department .panel__item .related__item__content .mat-icon{color:var(--related-mat-icon-color);font-size:24px}.qms-select-department .header-title{font-weight:600;color:#000000de}.qms-select-department .result-content{padding-right:0!important}.qms-select-department .result-content .mat-chip-list{min-height:40px}.qms-select-department .result-content .mat-chip-list .mat-icon{color:#0000004d!important;cursor:pointer}.qms-select-department .result-content .mat-chip-list .mat-icon:hover{color:#000!important}.qms-select-department .result-content span.related__item__content_name{min-width:calc(100% - 13px);max-width:250px;display:flex;align-items:center}.qms-select-department .result-content span.related__item__content_name>span:nth-child(1){display:inline-block;margin-right:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}.qms-select-department .result-content span.related__item__content_name .select__include-children__count{font-size:.75rem;color:#00000080;font-weight:600;line-height:16px}.qms-select-department .text-name{position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;cursor:pointer;width:100%}.qms-select-department ::ng-deep .mat-mdc-checkbox.qms-group-options.flex-direction-row .mat-checkbox-layout{white-space:normal}.qms-select-department ::ng-deep .mat-mdc-checkbox.qms-group-options.flex-direction-row .mat-checkbox-label{flex-direction:row;align-items:center;position:relative;padding-bottom:2px}.qms-select-department .confirm__button__groups .btn-add>.qms-btn-wrapper{display:flex;justify-content:center;align-items:center}.qms-select-department ::ng-deep .custom-department-tree .qms-view-search-result{height:100%!important}.qms-select-department ::ng-deep .custom-department-tree .qms-view-search-result .result{max-height:calc(100% - 80px)!important}.qms-select-department ::ng-deep .custom-department-tree .loading-container{height:calc(100% - 40px)!important}.qms-select-department ::ng-deep .btn-close-dialog.qms-btn-icon:focus:not(:hover){background-color:unset!important;color:unset!important}.qms-spinner-wrapper{display:inline-block;width:22px;height:22px}.qms-spinner-wrapper .qms-spinner{font-size:20px;width:1em;height:1em;position:absolute;right:5px;top:50%;transform:translateY(-50%)}.qms-spinner-wrapper .qms-spinner .mat-mdc-progress-spinner circle{stroke:#1b75be!important}@media screen and (max-width: 600px){::ng-deep .cdk-global-overlay-wrapper{justify-content:center!important;width:100vw}.header-title{font-size:14px}.related__item__content_name{font-size:12px!important}}\n"], dependencies: [{ kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: QMSInputChipDirective, selector: "mat-chip[qms-chip]", inputs: ["selected"] }, { kind: "directive", type: QMSChipBodyDirective, selector: "[qms-chip-body]" }, { kind: "directive", type: QMSToolTipRendererDirective, selector: "[qms-tool-tip]", inputs: ["showToolTip", "mode", "qms-tool-tip", "contentTemplate", "position"] }, { kind: "directive", type: QMSContentChangesDirective, selector: "[qmsContentChanges]", inputs: ["qmsContentChanges"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1$2.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "component", type: QMSButton, selector: "button[qms-btn], button[qms-btn-lg], button[qms-btn-outlined],\n               button[qms-btn-outlined-lg], button[qms-btn-text], button[qms-btn-text-lg],\n               button[qms-btn-fab],button[qms-btn-fab-sm],button[qms-btn-fab-ext],\n               button[qms-btn-fab-outlined],button[qms-btn-fab-outlined-sm],button[qms-btn-fab-outlined-ext]", inputs: ["disabled", "color"], exportAs: ["qmsButton"] }, { kind: "component", type: QMSButtonIcon, selector: "button[qms-btn-icon]", inputs: ["disabled", "color", "active"], exportAs: ["qmsButtonIcon"] }, { kind: "component", type: i16.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i11$2.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled", "tabIndex"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: i11$2.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i11$2.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "component", type: SelectProcessDataTreeComponent, selector: "qms-select-process-data-tree", inputs: ["rowsSkeleton", "height", "config"], outputs: ["onSearchEvent", "onPagingSearchEvent", "onValueChangeEvent", "selectionNodeChangeEvent", "onCheckNodeEvent", "onExpandNodeEvent", "onLoadMoreEvent", "onCheckItemSearchEvent", "onCheckAllItemSearchEvent", "toggleIncludeChildEvent"] }, { kind: "component", type: i23.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }], animations: [SelectDepartmentAnimationTrigger] }); }
+        ], viewQueries: [{ propertyName: "treeProcessData", first: true, predicate: ["treeProcessData"], descendants: true }], ngImport: i0, 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-process-data-tree #treeProcessData 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-process-data-tree>\n      </div>\n    </div>\n    <div class=\"line__divider\"></div>\n    <div [@heightAnimation] *ngIf=\"treeProcessData && !!treeProcessData.resultSelected.length\" 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-set class=\"panel__item qms-scrollbar\">\n          <div [@inOutAnimation_2] [id]=\"'item-result-'+item.id\" *ngFor=\"let item of treeProcessData.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.childCount}}\n                  </span>\n                </span>\n              </span>\n\n              <button (click)=\"onRemoveNode(item)\" matChipRemove *ngIf=\"!isNodeLoading(item.id); else loadingSpinner\">\n                <mat-icon>cancel</mat-icon>\n              </button>\n\n\n            </mat-chip>\n          </div>\n        </mat-chip-set>\n      </div>\n    </div>\n    <mat-divider *ngIf=\"treeProcessData && !!treeProcessData.resultSelected.length\" 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          ({{treeProcessData.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\"></mat-spinner>\n    </div>\n  </div>\n</ng-template>", styles: [".qms-select-department{font-family:Open Sans,sans-serif}.qms-select-department .cursor-pointer{cursor:pointer}.qms-select-department .ml-5{margin-left:10px}.qms-select-department .padding-5{padding:5px}.qms-select-department .header-dialog{display:flex;justify-content:space-between;align-items:center;font-weight:600;font-size:16px}.qms-select-department .input__field{display:flex;align-items:center;position:relative}.qms-select-department .input__field input.input-search{width:100%;padding:10px;outline:none;border:none;background:var(--background-input-text)}.qms-select-department .input__field .btn-search{cursor:pointer;vertical-align:middle;position:absolute;top:50%;right:10px;transform:translateY(-50%)}.qms-select-department .line__divider{border-bottom:1px solid #ccc;height:1px;margin-top:10px;min-width:300px;max-width:100%}.qms-select-department .mat-expansion-panel-header{height:30px;font-size:12px;letter-spacing:1px;font-family:Raleway;font-weight:600;padding:0}.qms-select-department .mat-expansion-panel-header .mat-expansion-panel-header-title{align-items:center;margin-left:12px}.qms-select-department .mat-expansion-panel:not([class*=mat-elevation-z]){box-shadow:none}.qms-select-department .panel__item{max-height:175px;margin-top:4px;overflow-x:hidden;overflow-y:auto;padding-right:5px;width:100%;display:block}.qms-select-department .panel__item .related__item__inline{max-width:100%}.qms-select-department .panel__item ::ng-deep .mat-chip-list-wrapper{margin:0 -4px!important}.qms-select-department .panel__item .select__toggle-include{width:100%}.qms-select-department .panel__item .select__toggle-include.toggle-include-child .mat-mdc-slide-toggle.qms-group-options .mat-slide-toggle-thumb{background-color:#5a5a5a!important}.qms-select-department .panel__item .related__item__content{height:32px;line-height:32px;background-color:var(--related-item-background);max-width:100%;margin-bottom:5px;margin-left:2.5px;margin-right:2.5px}.qms-select-department .panel__item .related__item__content .mat-icon{color:var(--related-mat-icon-color);font-size:24px}.qms-select-department .header-title{font-weight:600;color:#000000de}.qms-select-department .result-content{padding-right:0!important}.qms-select-department .result-content .mat-chip-list{min-height:40px}.qms-select-department .result-content .mat-chip-list .mat-icon{color:#0000004d!important;cursor:pointer}.qms-select-department .result-content .mat-chip-list .mat-icon:hover{color:#000!important}.qms-select-department .result-content span.related__item__content_name{min-width:calc(100% - 13px);display:flex;align-items:center}.qms-select-department .result-content span.related__item__content_name>span:nth-child(1){display:inline-block;margin-right:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}.qms-select-department .result-content span.related__item__content_name .select__include-children__count{font-size:.75rem;color:#00000080;font-weight:600;line-height:16px}.qms-select-department .text-name{position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;cursor:pointer;width:100%}.qms-select-department ::ng-deep .mat-mdc-checkbox.qms-group-options.flex-direction-row .mat-checkbox-layout{white-space:normal}.qms-select-department ::ng-deep .mat-mdc-checkbox.qms-group-options.flex-direction-row .mat-checkbox-label{flex-direction:row;align-items:center;position:relative;padding-bottom:2px}.qms-select-department .confirm__button__groups .btn-add>.qms-btn-wrapper{display:flex;justify-content:center;align-items:center}.qms-select-department ::ng-deep .custom-department-tree .qms-view-search-result{height:100%!important}.qms-select-department ::ng-deep .custom-department-tree .qms-view-search-result .result{max-height:calc(100% - 80px)!important}.qms-select-department ::ng-deep .custom-department-tree .loading-container{height:calc(100% - 40px)!important}.qms-select-department ::ng-deep .btn-close-dialog.qms-btn-icon:focus:not(:hover){background-color:unset!important;color:unset!important}.qms-spinner-wrapper{display:inline-block;width:22px;height:22px}.qms-spinner-wrapper .qms-spinner{font-size:20px;width:1em;height:1em;position:absolute;right:5px;top:50%;transform:translateY(-50%)}.qms-spinner-wrapper .qms-spinner .mat-mdc-progress-spinner circle{stroke:#1b75be!important}@media screen and (max-width: 600px){::ng-deep .cdk-global-overlay-wrapper{justify-content:center!important;width:100vw}.header-title{font-size:14px}.related__item__content_name{font-size:12px!important}}\n"], dependencies: [{ kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: QMSInputChipDirective, selector: "mat-chip[qms-chip]", inputs: ["selected"] }, { kind: "directive", type: QMSChipBodyDirective, selector: "[qms-chip-body]" }, { kind: "directive", type: QMSToolTipRendererDirective, selector: "[qms-tool-tip]", inputs: ["showToolTip", "mode", "qms-tool-tip", "contentTemplate", "position"] }, { kind: "directive", type: QMSContentChangesDirective, selector: "[qmsContentChanges]", inputs: ["qmsContentChanges"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1$2.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "component", type: QMSButton, selector: "button[qms-btn], button[qms-btn-lg], button[qms-btn-outlined],\n               button[qms-btn-outlined-lg], button[qms-btn-text], button[qms-btn-text-lg],\n               button[qms-btn-fab],button[qms-btn-fab-sm],button[qms-btn-fab-ext],\n               button[qms-btn-fab-outlined],button[qms-btn-fab-outlined-sm],button[qms-btn-fab-outlined-ext]", inputs: ["disabled", "color"], exportAs: ["qmsButton"] }, { kind: "component", type: QMSButtonIcon, selector: "button[qms-btn-icon]", inputs: ["disabled", "color", "active"], exportAs: ["qmsButtonIcon"] }, { kind: "component", type: i16.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i11$2.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled", "tabIndex"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: i11$2.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i11$2.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "component", type: SelectProcessDataTreeComponent, selector: "qms-select-process-data-tree", inputs: ["rowsSkeleton", "height", "config"], outputs: ["onSearchEvent", "onPagingSearchEvent", "onValueChangeEvent", "selectionNodeChangeEvent", "onCheckNodeEvent", "onExpandNodeEvent", "onLoadMoreEvent", "onCheckItemSearchEvent", "onCheckAllItemSearchEvent", "toggleIncludeChildEvent"] }, { kind: "component", type: i23.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }], animations: [SelectDepartmentAnimationTrigger] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectProcessDataComponent, decorators: [{
             type: Component,
@@ -40007,7 +40007,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                                 clickAction: 'noop'
                             }
                         }
-                    ], animations: [SelectDepartmentAnimationTrigger], 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-process-data-tree #treeProcessData 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-process-data-tree>\n      </div>\n    </div>\n    <div class=\"line__divider\"></div>\n    <div [@heightAnimation] *ngIf=\"treeProcessData && !!treeProcessData.resultSelected.length\" 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-set class=\"panel__item qms-scrollbar\">\n          <div [@inOutAnimation_2] [id]=\"'item-result-'+item.id\" *ngFor=\"let item of treeProcessData.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.childCount}}\n                  </span>\n                </span>\n              </span>\n\n              <button (click)=\"onRemoveNode(item)\" matChipRemove *ngIf=\"!isNodeLoading(item.id); else loadingSpinner\">\n                <mat-icon>cancel</mat-icon>\n              </button>\n\n\n            </mat-chip>\n          </div>\n        </mat-chip-set>\n      </div>\n    </div>\n    <mat-divider *ngIf=\"treeProcessData && !!treeProcessData.resultSelected.length\" 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          ({{treeProcessData.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\"></mat-spinner>\n    </div>\n  </div>\n</ng-template>", styles: [".qms-select-department{font-family:Open Sans,sans-serif}.qms-select-department .cursor-pointer{cursor:pointer}.qms-select-department .ml-5{margin-left:10px}.qms-select-department .padding-5{padding:5px}.qms-select-department .header-dialog{display:flex;justify-content:space-between;align-items:center;font-weight:600;font-size:16px}.qms-select-department .input__field{display:flex;align-items:center;position:relative}.qms-select-department .input__field input.input-search{width:100%;padding:10px;outline:none;border:none;background:var(--background-input-text)}.qms-select-department .input__field .btn-search{cursor:pointer;vertical-align:middle;position:absolute;top:50%;right:10px;transform:translateY(-50%)}.qms-select-department .line__divider{border-bottom:1px solid #ccc;height:1px;margin-top:10px;min-width:300px;max-width:100%}.qms-select-department .mat-expansion-panel-header{height:30px;font-size:12px;letter-spacing:1px;font-family:Raleway;font-weight:600;padding:0}.qms-select-department .mat-expansion-panel-header .mat-expansion-panel-header-title{align-items:center;margin-left:12px}.qms-select-department .mat-expansion-panel:not([class*=mat-elevation-z]){box-shadow:none}.qms-select-department .panel__item{max-height:175px;margin-top:4px;overflow-x:hidden;overflow-y:auto;padding-right:5px;width:100%;display:block}.qms-select-department .panel__item .related__item__inline{max-width:100%}.qms-select-department .panel__item ::ng-deep .mat-chip-list-wrapper{margin:0 -4px!important}.qms-select-department .panel__item .select__toggle-include{width:100%}.qms-select-department .panel__item .select__toggle-include.toggle-include-child .mat-mdc-slide-toggle.qms-group-options .mat-slide-toggle-thumb{background-color:#5a5a5a!important}.qms-select-department .panel__item .related__item__content{height:32px;line-height:32px;background-color:var(--related-item-background);max-width:100%;margin-bottom:5px;margin-left:2.5px;margin-right:2.5px}.qms-select-department .panel__item .related__item__content .mat-icon{color:var(--related-mat-icon-color);font-size:24px}.qms-select-department .header-title{font-weight:600;color:#000000de}.qms-select-department .result-content{padding-right:0!important}.qms-select-department .result-content .mat-chip-list{min-height:40px}.qms-select-department .result-content .mat-chip-list .mat-icon{color:#0000004d!important;cursor:pointer}.qms-select-department .result-content .mat-chip-list .mat-icon:hover{color:#000!important}.qms-select-department .result-content span.related__item__content_name{min-width:calc(100% - 13px);max-width:250px;display:flex;align-items:center}.qms-select-department .result-content span.related__item__content_name>span:nth-child(1){display:inline-block;margin-right:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}.qms-select-department .result-content span.related__item__content_name .select__include-children__count{font-size:.75rem;color:#00000080;font-weight:600;line-height:16px}.qms-select-department .text-name{position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;cursor:pointer;width:100%}.qms-select-department ::ng-deep .mat-mdc-checkbox.qms-group-options.flex-direction-row .mat-checkbox-layout{white-space:normal}.qms-select-department ::ng-deep .mat-mdc-checkbox.qms-group-options.flex-direction-row .mat-checkbox-label{flex-direction:row;align-items:center;position:relative;padding-bottom:2px}.qms-select-department .confirm__button__groups .btn-add>.qms-btn-wrapper{display:flex;justify-content:center;align-items:center}.qms-select-department ::ng-deep .custom-department-tree .qms-view-search-result{height:100%!important}.qms-select-department ::ng-deep .custom-department-tree .qms-view-search-result .result{max-height:calc(100% - 80px)!important}.qms-select-department ::ng-deep .custom-department-tree .loading-container{height:calc(100% - 40px)!important}.qms-select-department ::ng-deep .btn-close-dialog.qms-btn-icon:focus:not(:hover){background-color:unset!important;color:unset!important}.qms-spinner-wrapper{display:inline-block;width:22px;height:22px}.qms-spinner-wrapper .qms-spinner{font-size:20px;width:1em;height:1em;position:absolute;right:5px;top:50%;transform:translateY(-50%)}.qms-spinner-wrapper .qms-spinner .mat-mdc-progress-spinner circle{stroke:#1b75be!important}@media screen and (max-width: 600px){::ng-deep .cdk-global-overlay-wrapper{justify-content:center!important;width:100vw}.header-title{font-size:14px}.related__item__content_name{font-size:12px!important}}\n"] }]
+                    ], animations: [SelectDepartmentAnimationTrigger], 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-process-data-tree #treeProcessData 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-process-data-tree>\n      </div>\n    </div>\n    <div class=\"line__divider\"></div>\n    <div [@heightAnimation] *ngIf=\"treeProcessData && !!treeProcessData.resultSelected.length\" 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-set class=\"panel__item qms-scrollbar\">\n          <div [@inOutAnimation_2] [id]=\"'item-result-'+item.id\" *ngFor=\"let item of treeProcessData.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.childCount}}\n                  </span>\n                </span>\n              </span>\n\n              <button (click)=\"onRemoveNode(item)\" matChipRemove *ngIf=\"!isNodeLoading(item.id); else loadingSpinner\">\n                <mat-icon>cancel</mat-icon>\n              </button>\n\n\n            </mat-chip>\n          </div>\n        </mat-chip-set>\n      </div>\n    </div>\n    <mat-divider *ngIf=\"treeProcessData && !!treeProcessData.resultSelected.length\" 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          ({{treeProcessData.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\"></mat-spinner>\n    </div>\n  </div>\n</ng-template>", styles: [".qms-select-department{font-family:Open Sans,sans-serif}.qms-select-department .cursor-pointer{cursor:pointer}.qms-select-department .ml-5{margin-left:10px}.qms-select-department .padding-5{padding:5px}.qms-select-department .header-dialog{display:flex;justify-content:space-between;align-items:center;font-weight:600;font-size:16px}.qms-select-department .input__field{display:flex;align-items:center;position:relative}.qms-select-department .input__field input.input-search{width:100%;padding:10px;outline:none;border:none;background:var(--background-input-text)}.qms-select-department .input__field .btn-search{cursor:pointer;vertical-align:middle;position:absolute;top:50%;right:10px;transform:translateY(-50%)}.qms-select-department .line__divider{border-bottom:1px solid #ccc;height:1px;margin-top:10px;min-width:300px;max-width:100%}.qms-select-department .mat-expansion-panel-header{height:30px;font-size:12px;letter-spacing:1px;font-family:Raleway;font-weight:600;padding:0}.qms-select-department .mat-expansion-panel-header .mat-expansion-panel-header-title{align-items:center;margin-left:12px}.qms-select-department .mat-expansion-panel:not([class*=mat-elevation-z]){box-shadow:none}.qms-select-department .panel__item{max-height:175px;margin-top:4px;overflow-x:hidden;overflow-y:auto;padding-right:5px;width:100%;display:block}.qms-select-department .panel__item .related__item__inline{max-width:100%}.qms-select-department .panel__item ::ng-deep .mat-chip-list-wrapper{margin:0 -4px!important}.qms-select-department .panel__item .select__toggle-include{width:100%}.qms-select-department .panel__item .select__toggle-include.toggle-include-child .mat-mdc-slide-toggle.qms-group-options .mat-slide-toggle-thumb{background-color:#5a5a5a!important}.qms-select-department .panel__item .related__item__content{height:32px;line-height:32px;background-color:var(--related-item-background);max-width:100%;margin-bottom:5px;margin-left:2.5px;margin-right:2.5px}.qms-select-department .panel__item .related__item__content .mat-icon{color:var(--related-mat-icon-color);font-size:24px}.qms-select-department .header-title{font-weight:600;color:#000000de}.qms-select-department .result-content{padding-right:0!important}.qms-select-department .result-content .mat-chip-list{min-height:40px}.qms-select-department .result-content .mat-chip-list .mat-icon{color:#0000004d!important;cursor:pointer}.qms-select-department .result-content .mat-chip-list .mat-icon:hover{color:#000!important}.qms-select-department .result-content span.related__item__content_name{min-width:calc(100% - 13px);display:flex;align-items:center}.qms-select-department .result-content span.related__item__content_name>span:nth-child(1){display:inline-block;margin-right:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}.qms-select-department .result-content span.related__item__content_name .select__include-children__count{font-size:.75rem;color:#00000080;font-weight:600;line-height:16px}.qms-select-department .text-name{position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;cursor:pointer;width:100%}.qms-select-department ::ng-deep .mat-mdc-checkbox.qms-group-options.flex-direction-row .mat-checkbox-layout{white-space:normal}.qms-select-department ::ng-deep .mat-mdc-checkbox.qms-group-options.flex-direction-row .mat-checkbox-label{flex-direction:row;align-items:center;position:relative;padding-bottom:2px}.qms-select-department .confirm__button__groups .btn-add>.qms-btn-wrapper{display:flex;justify-content:center;align-items:center}.qms-select-department ::ng-deep .custom-department-tree .qms-view-search-result{height:100%!important}.qms-select-department ::ng-deep .custom-department-tree .qms-view-search-result .result{max-height:calc(100% - 80px)!important}.qms-select-department ::ng-deep .custom-department-tree .loading-container{height:calc(100% - 40px)!important}.qms-select-department ::ng-deep .btn-close-dialog.qms-btn-icon:focus:not(:hover){background-color:unset!important;color:unset!important}.qms-spinner-wrapper{display:inline-block;width:22px;height:22px}.qms-spinner-wrapper .qms-spinner{font-size:20px;width:1em;height:1em;position:absolute;right:5px;top:50%;transform:translateY(-50%)}.qms-spinner-wrapper .qms-spinner .mat-mdc-progress-spinner circle{stroke:#1b75be!important}@media screen and (max-width: 600px){::ng-deep .cdk-global-overlay-wrapper{justify-content:center!important;width:100vw}.header-title{font-size:14px}.related__item__content_name{font-size:12px!important}}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$2.MatDialogRef }, { type: SelectDepartmentPopupData, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]