qms-angular 2.0.8 → 2.0.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/esm2022/lib/components/select-access-dialog/select-access-dialog.component.mjs +3 -3
  2. package/fesm2022/qms-angular.mjs +2 -2
  3. package/fesm2022/qms-angular.mjs.map +1 -1
  4. package/package.json +2 -2
  5. package/src/assets/qms-ckeditor-plugin/build/ckeditor.js +1 -1
  6. package/src/assets/qms-ckeditor-plugin/build/ckeditor.js.map +1 -1
  7. package/src/assets/qms-ckeditor-plugin/package-lock.json +1673 -877
package/fesm2022/qms-angular.mjs CHANGED
@@ -38499,7 +38499,7 @@ class QMSSelectAccessDialogComponent {
38499
38499
  clickAction: 'noop'
38500
38500
  }
38501
38501
  }
38502
- ], 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 }, { propertyName: "pagingDepartment", first: true, predicate: ["pagingDepartment"], 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 [attr.aria-label]=\"LANG.TYPE\" 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 [attr.aria-label]=\"LANG.ROLE\" 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 [attr.aria-label]=\"LANG.DEPARTMENT_UNIT\">{{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 <mat-label [attr.aria-label]=\"LANG.SEARCH_WITH_NAME\" class=\"visually-hidden\"\n qms-select-input>{{LANG.SEARCH_WITH_NAME}}</mat-label>\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 <div matSuffix class=\"d-inline-block\">\n <mat-progress-spinner [@inOutAnimation] *ngIf=\"getLoading$.value\" mode=\"indeterminate\"\n diameter=\"20\"></mat-progress-spinner>\n </div>\n <button [@inOutAnimation] (click)=\"personForm.get('keyword').setValue('')\" matSuffix aria-label=\"Clear\"\n *ngIf=\"personForm.get('keyword').value && !getLoading$.value\">\n <mat-icon>close</mat-icon>\n </button>\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}} (<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 <mat-label aria-label=\"User group\" class=\"visually-hidden\" qms-select-input>User group</mat-label>\n <input [formControl]=\"userGroupForm\" matInput type=\"text\" autocomplete=\"off\"\n placeholder=\"{{ LANG.SEARCH }}\" />\n <button [@inOutAnimation] *ngIf=\"!getLoading$.value\" type=\"submit\" qms-btn-icon color=\"light\"\n matSuffix>\n <mat-icon>search</mat-icon>\n </button>\n <div matSuffix class=\"d-inline-block\">\n <mat-progress-spinner [@inOutAnimation] *ngIf=\"getLoading$.value\" mode=\"indeterminate\"\n diameter=\"20\"></mat-progress-spinner>\n </div>\n <button matSuffix (click)=\"userGroupForm.setValue('')\" qms-btn-icon color=\"light\">\n <mat-icon>close</mat-icon>\n </button>\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}}\n (<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 *ngIf=\"optionSelect.value === OPTION_ENUM.DEPARTMENT\">\n\n <ng-container *ngIf=\"!dialogData.isDepartmentPaging\">\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\n <ng-container *ngIf=\"dialogData.isDepartmentPaging\">\n\n <form (ngSubmit)=\"onFilterDepartment()\">\n <mat-form-field class=\"w-100 mb-2\" qms-form qms-search-field>\n <mat-label aria-label=\"Department\" class=\"visually-hidden\" qms-select-input>Department</mat-label>\n <input [formControl]=\"departmentSearchForm\" matInput type=\"text\" autocomplete=\"off\"\n placeholder=\"{{ LANG.SEARCH }}\" />\n <button [@inOutAnimation] *ngIf=\"!getLoading$.value\" type=\"submit\" qms-btn-icon color=\"light\"\n matSuffix>\n <mat-icon>search</mat-icon>\n </button>\n <div matSuffix class=\"d-inline-block\">\n <mat-progress-spinner [@inOutAnimation] *ngIf=\"getLoading$.value\" mode=\"indeterminate\"\n diameter=\"20\"></mat-progress-spinner>\n </div>\n <div [@inOutAnimation] *ngIf=\"!!departmentSearchForm.value && !getLoading$.value\" matSuffix\n qms-input-clear>\n <button (click)=\"departmentSearchForm.setValue('')\" qms-btn-icon color=\"light\">\n <mat-icon>close</mat-icon>\n </button>\n </div>\n </mat-form-field>\n </form>\n\n <div qms-scrollbar>\n <div class=\"item\">\n <mat-checkbox [@inOutAnimation] *ngIf=\"!getLoading$.value && departmentFiltered.length\"\n [disabled]=\"isDisabledSelectAll(OPTION_ENUM.DEPARTMENT)\" #checkDepartment\n class=\"w-100 checkbox-all mb-1\" color=\"default\" [checked]=\"isCheckAll(OPTION_ENUM.DEPARTMENT)\"\n [indeterminate]=\"isIndeterminate(OPTION_ENUM.DEPARTMENT)\"\n (click)=\"departmentFiltered.length && onCheckAll(OPTION_ENUM.DEPARTMENT,checkDepartment)\"\n qms-group-options>\n <span class=\"text-label header-title\">{{LANG.CHOOSE_ALL}}\n (<b>{{departmentFiltered.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=\"departmentFiltered.length && !getLoading$.value\" [@listAnimation] class=\"item-list-wrapper\">\n <div [@inOutAnimation] class=\"item mt-1\" *ngFor=\"let item of departmentFiltered\">\n <ng-container [ngTemplateOutlet]=\"itemCheckboxTemplate\"\n [ngTemplateOutletContext]=\"{item: item,type: OPTION_ENUM.DEPARTMENT}\">\n </ng-container>\n </div>\n </div>\n <div [@inOutAnimation] *ngIf=\"!departmentFiltered.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\" #pagingDepartment class=\"my-1\"\n *ngIf=\"getDepartment$.value.length > 10 \" [length]=\"getDepartment$.value.length\" [numHidden]=\"0\"\n [pageSize]=\"getDepartment$.value.pageSize\" [pageSizeOptions]=\"PAGE_SIZE_OPTION\"\n (page)='onPaginatorEvent($event, OPTION_ENUM.DEPARTMENT)' [size]='PAGINATION_SIZE.medium'>\n </qms-paginator>\n </div>\n </ng-container>\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) && !dialogData.isDepartmentPaging\"\n [ngTemplateOutlet]=\"options?.length == 1 ? listChip : viewResultCollapse\"\n [ngTemplateOutletContext]=\"{data: resultAccess.departments || resultAccess.departmentsFlat, type:OPTION_ENUM.DEPARTMENT, title:LANG.DEPARTMENT}\">\n </ng-container>\n <ng-container *ngIf=\"checkExistOptionSelect(OPTION_ENUM.DEPARTMENT) && dialogData.isDepartmentPaging\"\n [ngTemplateOutlet]=\"options?.length == 1 ? listChip : viewResultCollapse\"\n [ngTemplateOutletContext]=\"{data: resultAccess.departmentsFlat, 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-weight:800!important}.mat-expansion-panel-header .title-content{font-size:12px!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}.mat-mdc-chip.chip-item-result{max-width:250px}.mat-mdc-chip.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}.mdc-evolution-chip-set .mat-mdc-standard-chip .mdc-evolution-chip__cell--primary,.mdc-evolution-chip-set .mat-mdc-standard-chip .mdc-evolution-chip__action--primary,.mdc-evolution-chip-set .mat-mdc-standard-chip .mat-mdc-chip-action-label{overflow:hidden}\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 }); }
38502
+ ], 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 }, { propertyName: "pagingDepartment", first: true, predicate: ["pagingDepartment"], 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 [attr.aria-label]=\"LANG.TYPE\" 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 [attr.aria-label]=\"LANG.ROLE\" 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 [attr.aria-label]=\"LANG.DEPARTMENT_UNIT\">{{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 <mat-label [attr.aria-label]=\"LANG.SEARCH_WITH_NAME\"\n qms-select-input>{{LANG.SEARCH_WITH_NAME}}</mat-label>\n <input matInput appearance=\"off\" formControlName=\"keyword\" 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 <div matSuffix class=\"d-inline-block\">\n <mat-progress-spinner [@inOutAnimation] *ngIf=\"getLoading$.value\" mode=\"indeterminate\"\n diameter=\"20\"></mat-progress-spinner>\n </div>\n <button [@inOutAnimation] (click)=\"personForm.get('keyword').setValue('')\" matSuffix aria-label=\"Clear\"\n *ngIf=\"personForm.get('keyword').value && !getLoading$.value\">\n <mat-icon>close</mat-icon>\n </button>\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}} (<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 <mat-label aria-label=\"User group\" qms-select-input>{{ LANG.SEARCH }} {{ LANG.USER_GROUP\n }}</mat-label>\n <input [formControl]=\"userGroupForm\" matInput type=\"text\" autocomplete=\"off\" />\n <button [@inOutAnimation] *ngIf=\"!getLoading$.value\" type=\"submit\" qms-btn-icon color=\"light\"\n matSuffix>\n <mat-icon>search</mat-icon>\n </button>\n <div matSuffix class=\"d-inline-block\">\n <mat-progress-spinner [@inOutAnimation] *ngIf=\"getLoading$.value\" mode=\"indeterminate\"\n diameter=\"20\"></mat-progress-spinner>\n </div>\n <button matSuffix (click)=\"userGroupForm.setValue('')\" qms-btn-icon color=\"light\">\n <mat-icon>close</mat-icon>\n </button>\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}}\n (<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 *ngIf=\"optionSelect.value === OPTION_ENUM.DEPARTMENT\">\n\n <ng-container *ngIf=\"!dialogData.isDepartmentPaging\">\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\n <ng-container *ngIf=\"dialogData.isDepartmentPaging\">\n\n <form (ngSubmit)=\"onFilterDepartment()\">\n <mat-form-field class=\"w-100 mb-2\" qms-form qms-search-field>\n <mat-label aria-label=\"Department\" qms-select-input>{{ LANG.SEARCH }} {{LANG.DEPARTMENT}}</mat-label>\n <input [formControl]=\"departmentSearchForm\" matInput type=\"text\" autocomplete=\"off\" />\n <button [@inOutAnimation] *ngIf=\"!getLoading$.value\" type=\"submit\" qms-btn-icon color=\"light\"\n matSuffix>\n <mat-icon>search</mat-icon>\n </button>\n <div matSuffix class=\"d-inline-block\">\n <mat-progress-spinner [@inOutAnimation] *ngIf=\"getLoading$.value\" mode=\"indeterminate\"\n diameter=\"20\"></mat-progress-spinner>\n </div>\n <div [@inOutAnimation] *ngIf=\"!!departmentSearchForm.value && !getLoading$.value\" matSuffix\n qms-input-clear>\n <button (click)=\"departmentSearchForm.setValue('')\" qms-btn-icon color=\"light\">\n <mat-icon>close</mat-icon>\n </button>\n </div>\n </mat-form-field>\n </form>\n\n <div qms-scrollbar>\n <div class=\"item\">\n <mat-checkbox [@inOutAnimation] *ngIf=\"!getLoading$.value && departmentFiltered.length\"\n [disabled]=\"isDisabledSelectAll(OPTION_ENUM.DEPARTMENT)\" #checkDepartment\n class=\"w-100 checkbox-all mb-1\" color=\"default\" [checked]=\"isCheckAll(OPTION_ENUM.DEPARTMENT)\"\n [indeterminate]=\"isIndeterminate(OPTION_ENUM.DEPARTMENT)\"\n (click)=\"departmentFiltered.length && onCheckAll(OPTION_ENUM.DEPARTMENT,checkDepartment)\"\n qms-group-options>\n <span class=\"text-label header-title\">{{LANG.CHOOSE_ALL}}\n (<b>{{departmentFiltered.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=\"departmentFiltered.length && !getLoading$.value\" [@listAnimation] class=\"item-list-wrapper\">\n <div [@inOutAnimation] class=\"item mt-1\" *ngFor=\"let item of departmentFiltered\">\n <ng-container [ngTemplateOutlet]=\"itemCheckboxTemplate\"\n [ngTemplateOutletContext]=\"{item: item,type: OPTION_ENUM.DEPARTMENT}\">\n </ng-container>\n </div>\n </div>\n <div [@inOutAnimation] *ngIf=\"!departmentFiltered.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\" #pagingDepartment class=\"my-1\"\n *ngIf=\"getDepartment$.value.length > 10 \" [length]=\"getDepartment$.value.length\" [numHidden]=\"0\"\n [pageSize]=\"getDepartment$.value.pageSize\" [pageSizeOptions]=\"PAGE_SIZE_OPTION\"\n (page)='onPaginatorEvent($event, OPTION_ENUM.DEPARTMENT)' [size]='PAGINATION_SIZE.medium'>\n </qms-paginator>\n </div>\n </ng-container>\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) && !dialogData.isDepartmentPaging\"\n [ngTemplateOutlet]=\"options?.length == 1 ? listChip : viewResultCollapse\"\n [ngTemplateOutletContext]=\"{data: resultAccess.departments || resultAccess.departmentsFlat, type:OPTION_ENUM.DEPARTMENT, title:LANG.DEPARTMENT}\">\n </ng-container>\n <ng-container *ngIf=\"checkExistOptionSelect(OPTION_ENUM.DEPARTMENT) && dialogData.isDepartmentPaging\"\n [ngTemplateOutlet]=\"options?.length == 1 ? listChip : viewResultCollapse\"\n [ngTemplateOutletContext]=\"{data: resultAccess.departmentsFlat, 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-weight:800!important}.mat-expansion-panel-header .title-content{font-size:12px!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}.mat-mdc-chip.chip-item-result{max-width:250px}.mat-mdc-chip.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}.mdc-evolution-chip-set .mat-mdc-standard-chip .mdc-evolution-chip__cell--primary,.mdc-evolution-chip-set .mat-mdc-standard-chip .mdc-evolution-chip__action--primary,.mdc-evolution-chip-set .mat-mdc-standard-chip .mat-mdc-chip-action-label{overflow:hidden}\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 }); }
38503
38503
  }
38504
38504
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: QMSSelectAccessDialogComponent, decorators: [{
38505
38505
  type: Component,
@@ -38510,7 +38510,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
38510
38510
  clickAction: 'noop'
38511
38511
  }
38512
38512
  }
38513
- ], 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 [attr.aria-label]=\"LANG.TYPE\" 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 [attr.aria-label]=\"LANG.ROLE\" 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 [attr.aria-label]=\"LANG.DEPARTMENT_UNIT\">{{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 <mat-label [attr.aria-label]=\"LANG.SEARCH_WITH_NAME\" class=\"visually-hidden\"\n qms-select-input>{{LANG.SEARCH_WITH_NAME}}</mat-label>\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 <div matSuffix class=\"d-inline-block\">\n <mat-progress-spinner [@inOutAnimation] *ngIf=\"getLoading$.value\" mode=\"indeterminate\"\n diameter=\"20\"></mat-progress-spinner>\n </div>\n <button [@inOutAnimation] (click)=\"personForm.get('keyword').setValue('')\" matSuffix aria-label=\"Clear\"\n *ngIf=\"personForm.get('keyword').value && !getLoading$.value\">\n <mat-icon>close</mat-icon>\n </button>\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}} (<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 <mat-label aria-label=\"User group\" class=\"visually-hidden\" qms-select-input>User group</mat-label>\n <input [formControl]=\"userGroupForm\" matInput type=\"text\" autocomplete=\"off\"\n placeholder=\"{{ LANG.SEARCH }}\" />\n <button [@inOutAnimation] *ngIf=\"!getLoading$.value\" type=\"submit\" qms-btn-icon color=\"light\"\n matSuffix>\n <mat-icon>search</mat-icon>\n </button>\n <div matSuffix class=\"d-inline-block\">\n <mat-progress-spinner [@inOutAnimation] *ngIf=\"getLoading$.value\" mode=\"indeterminate\"\n diameter=\"20\"></mat-progress-spinner>\n </div>\n <button matSuffix (click)=\"userGroupForm.setValue('')\" qms-btn-icon color=\"light\">\n <mat-icon>close</mat-icon>\n </button>\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}}\n (<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 *ngIf=\"optionSelect.value === OPTION_ENUM.DEPARTMENT\">\n\n <ng-container *ngIf=\"!dialogData.isDepartmentPaging\">\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\n <ng-container *ngIf=\"dialogData.isDepartmentPaging\">\n\n <form (ngSubmit)=\"onFilterDepartment()\">\n <mat-form-field class=\"w-100 mb-2\" qms-form qms-search-field>\n <mat-label aria-label=\"Department\" class=\"visually-hidden\" qms-select-input>Department</mat-label>\n <input [formControl]=\"departmentSearchForm\" matInput type=\"text\" autocomplete=\"off\"\n placeholder=\"{{ LANG.SEARCH }}\" />\n <button [@inOutAnimation] *ngIf=\"!getLoading$.value\" type=\"submit\" qms-btn-icon color=\"light\"\n matSuffix>\n <mat-icon>search</mat-icon>\n </button>\n <div matSuffix class=\"d-inline-block\">\n <mat-progress-spinner [@inOutAnimation] *ngIf=\"getLoading$.value\" mode=\"indeterminate\"\n diameter=\"20\"></mat-progress-spinner>\n </div>\n <div [@inOutAnimation] *ngIf=\"!!departmentSearchForm.value && !getLoading$.value\" matSuffix\n qms-input-clear>\n <button (click)=\"departmentSearchForm.setValue('')\" qms-btn-icon color=\"light\">\n <mat-icon>close</mat-icon>\n </button>\n </div>\n </mat-form-field>\n </form>\n\n <div qms-scrollbar>\n <div class=\"item\">\n <mat-checkbox [@inOutAnimation] *ngIf=\"!getLoading$.value && departmentFiltered.length\"\n [disabled]=\"isDisabledSelectAll(OPTION_ENUM.DEPARTMENT)\" #checkDepartment\n class=\"w-100 checkbox-all mb-1\" color=\"default\" [checked]=\"isCheckAll(OPTION_ENUM.DEPARTMENT)\"\n [indeterminate]=\"isIndeterminate(OPTION_ENUM.DEPARTMENT)\"\n (click)=\"departmentFiltered.length && onCheckAll(OPTION_ENUM.DEPARTMENT,checkDepartment)\"\n qms-group-options>\n <span class=\"text-label header-title\">{{LANG.CHOOSE_ALL}}\n (<b>{{departmentFiltered.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=\"departmentFiltered.length && !getLoading$.value\" [@listAnimation] class=\"item-list-wrapper\">\n <div [@inOutAnimation] class=\"item mt-1\" *ngFor=\"let item of departmentFiltered\">\n <ng-container [ngTemplateOutlet]=\"itemCheckboxTemplate\"\n [ngTemplateOutletContext]=\"{item: item,type: OPTION_ENUM.DEPARTMENT}\">\n </ng-container>\n </div>\n </div>\n <div [@inOutAnimation] *ngIf=\"!departmentFiltered.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\" #pagingDepartment class=\"my-1\"\n *ngIf=\"getDepartment$.value.length > 10 \" [length]=\"getDepartment$.value.length\" [numHidden]=\"0\"\n [pageSize]=\"getDepartment$.value.pageSize\" [pageSizeOptions]=\"PAGE_SIZE_OPTION\"\n (page)='onPaginatorEvent($event, OPTION_ENUM.DEPARTMENT)' [size]='PAGINATION_SIZE.medium'>\n </qms-paginator>\n </div>\n </ng-container>\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) && !dialogData.isDepartmentPaging\"\n [ngTemplateOutlet]=\"options?.length == 1 ? listChip : viewResultCollapse\"\n [ngTemplateOutletContext]=\"{data: resultAccess.departments || resultAccess.departmentsFlat, type:OPTION_ENUM.DEPARTMENT, title:LANG.DEPARTMENT}\">\n </ng-container>\n <ng-container *ngIf=\"checkExistOptionSelect(OPTION_ENUM.DEPARTMENT) && dialogData.isDepartmentPaging\"\n [ngTemplateOutlet]=\"options?.length == 1 ? listChip : viewResultCollapse\"\n [ngTemplateOutletContext]=\"{data: resultAccess.departmentsFlat, 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-weight:800!important}.mat-expansion-panel-header .title-content{font-size:12px!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}.mat-mdc-chip.chip-item-result{max-width:250px}.mat-mdc-chip.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}.mdc-evolution-chip-set .mat-mdc-standard-chip .mdc-evolution-chip__cell--primary,.mdc-evolution-chip-set .mat-mdc-standard-chip .mdc-evolution-chip__action--primary,.mdc-evolution-chip-set .mat-mdc-standard-chip .mat-mdc-chip-action-label{overflow:hidden}\n"] }]
38513
+ ], 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 [attr.aria-label]=\"LANG.TYPE\" 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 [attr.aria-label]=\"LANG.ROLE\" 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 [attr.aria-label]=\"LANG.DEPARTMENT_UNIT\">{{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 <mat-label [attr.aria-label]=\"LANG.SEARCH_WITH_NAME\"\n qms-select-input>{{LANG.SEARCH_WITH_NAME}}</mat-label>\n <input matInput appearance=\"off\" formControlName=\"keyword\" 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 <div matSuffix class=\"d-inline-block\">\n <mat-progress-spinner [@inOutAnimation] *ngIf=\"getLoading$.value\" mode=\"indeterminate\"\n diameter=\"20\"></mat-progress-spinner>\n </div>\n <button [@inOutAnimation] (click)=\"personForm.get('keyword').setValue('')\" matSuffix aria-label=\"Clear\"\n *ngIf=\"personForm.get('keyword').value && !getLoading$.value\">\n <mat-icon>close</mat-icon>\n </button>\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}} (<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 <mat-label aria-label=\"User group\" qms-select-input>{{ LANG.SEARCH }} {{ LANG.USER_GROUP\n }}</mat-label>\n <input [formControl]=\"userGroupForm\" matInput type=\"text\" autocomplete=\"off\" />\n <button [@inOutAnimation] *ngIf=\"!getLoading$.value\" type=\"submit\" qms-btn-icon color=\"light\"\n matSuffix>\n <mat-icon>search</mat-icon>\n </button>\n <div matSuffix class=\"d-inline-block\">\n <mat-progress-spinner [@inOutAnimation] *ngIf=\"getLoading$.value\" mode=\"indeterminate\"\n diameter=\"20\"></mat-progress-spinner>\n </div>\n <button matSuffix (click)=\"userGroupForm.setValue('')\" qms-btn-icon color=\"light\">\n <mat-icon>close</mat-icon>\n </button>\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}}\n (<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 *ngIf=\"optionSelect.value === OPTION_ENUM.DEPARTMENT\">\n\n <ng-container *ngIf=\"!dialogData.isDepartmentPaging\">\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\n <ng-container *ngIf=\"dialogData.isDepartmentPaging\">\n\n <form (ngSubmit)=\"onFilterDepartment()\">\n <mat-form-field class=\"w-100 mb-2\" qms-form qms-search-field>\n <mat-label aria-label=\"Department\" qms-select-input>{{ LANG.SEARCH }} {{LANG.DEPARTMENT}}</mat-label>\n <input [formControl]=\"departmentSearchForm\" matInput type=\"text\" autocomplete=\"off\" />\n <button [@inOutAnimation] *ngIf=\"!getLoading$.value\" type=\"submit\" qms-btn-icon color=\"light\"\n matSuffix>\n <mat-icon>search</mat-icon>\n </button>\n <div matSuffix class=\"d-inline-block\">\n <mat-progress-spinner [@inOutAnimation] *ngIf=\"getLoading$.value\" mode=\"indeterminate\"\n diameter=\"20\"></mat-progress-spinner>\n </div>\n <div [@inOutAnimation] *ngIf=\"!!departmentSearchForm.value && !getLoading$.value\" matSuffix\n qms-input-clear>\n <button (click)=\"departmentSearchForm.setValue('')\" qms-btn-icon color=\"light\">\n <mat-icon>close</mat-icon>\n </button>\n </div>\n </mat-form-field>\n </form>\n\n <div qms-scrollbar>\n <div class=\"item\">\n <mat-checkbox [@inOutAnimation] *ngIf=\"!getLoading$.value && departmentFiltered.length\"\n [disabled]=\"isDisabledSelectAll(OPTION_ENUM.DEPARTMENT)\" #checkDepartment\n class=\"w-100 checkbox-all mb-1\" color=\"default\" [checked]=\"isCheckAll(OPTION_ENUM.DEPARTMENT)\"\n [indeterminate]=\"isIndeterminate(OPTION_ENUM.DEPARTMENT)\"\n (click)=\"departmentFiltered.length && onCheckAll(OPTION_ENUM.DEPARTMENT,checkDepartment)\"\n qms-group-options>\n <span class=\"text-label header-title\">{{LANG.CHOOSE_ALL}}\n (<b>{{departmentFiltered.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=\"departmentFiltered.length && !getLoading$.value\" [@listAnimation] class=\"item-list-wrapper\">\n <div [@inOutAnimation] class=\"item mt-1\" *ngFor=\"let item of departmentFiltered\">\n <ng-container [ngTemplateOutlet]=\"itemCheckboxTemplate\"\n [ngTemplateOutletContext]=\"{item: item,type: OPTION_ENUM.DEPARTMENT}\">\n </ng-container>\n </div>\n </div>\n <div [@inOutAnimation] *ngIf=\"!departmentFiltered.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\" #pagingDepartment class=\"my-1\"\n *ngIf=\"getDepartment$.value.length > 10 \" [length]=\"getDepartment$.value.length\" [numHidden]=\"0\"\n [pageSize]=\"getDepartment$.value.pageSize\" [pageSizeOptions]=\"PAGE_SIZE_OPTION\"\n (page)='onPaginatorEvent($event, OPTION_ENUM.DEPARTMENT)' [size]='PAGINATION_SIZE.medium'>\n </qms-paginator>\n </div>\n </ng-container>\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) && !dialogData.isDepartmentPaging\"\n [ngTemplateOutlet]=\"options?.length == 1 ? listChip : viewResultCollapse\"\n [ngTemplateOutletContext]=\"{data: resultAccess.departments || resultAccess.departmentsFlat, type:OPTION_ENUM.DEPARTMENT, title:LANG.DEPARTMENT}\">\n </ng-container>\n <ng-container *ngIf=\"checkExistOptionSelect(OPTION_ENUM.DEPARTMENT) && dialogData.isDepartmentPaging\"\n [ngTemplateOutlet]=\"options?.length == 1 ? listChip : viewResultCollapse\"\n [ngTemplateOutletContext]=\"{data: resultAccess.departmentsFlat, 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-weight:800!important}.mat-expansion-panel-header .title-content{font-size:12px!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}.mat-mdc-chip.chip-item-result{max-width:250px}.mat-mdc-chip.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}.mdc-evolution-chip-set .mat-mdc-standard-chip .mdc-evolution-chip__cell--primary,.mdc-evolution-chip-set .mat-mdc-standard-chip .mdc-evolution-chip__action--primary,.mdc-evolution-chip-set .mat-mdc-standard-chip .mat-mdc-chip-action-label{overflow:hidden}\n"] }]
38514
38514
  }], ctorParameters: () => [{ type: i1$2.MatDialogRef }, { type: QMSSelectAccessDialog, decorators: [{
38515
38515
  type: Inject,
38516
38516
  args: [MAT_DIALOG_DATA]