qms-angular 1.1.56 → 1.1.57

package/bundles/qms-angular.umd.js

@@ -110,7 +110,7 @@
         "SEARCH_DEPARTMENT_UNIT": "Search department / unit",
         "FILTER": "Filter",
         "TYPE": "Type",
-        "SEARCH_WITH_NAME": "Search first and last name",
+        "SEARCH_WITH_NAME": "Search name and username",
         "RESULT_SEARCH_FOR": "Results search for ",
         "TOOLTIP_INCLUDE_SUB_DEPARTMENT": "{0} - include {1} sub-departments",
         "TOOLTIP_INCLUDE_SUB_ITEM": "{0} - include {1} sub-items",
@@ -674,7 +674,7 @@
         "SEARCH_DEPARTMENT_UNIT": "Søk avdeling/enhet",
         "FILTER": "Bruk filter",
         "TYPE": "Type",
-        "SEARCH_WITH_NAME": "Søk for- og etternavn",
+        "SEARCH_WITH_NAME": "Søk navn og brukernavn",
         "RESULT_SEARCH_FOR": "Resultater søk etter ",
         "TOOLTIP_INCLUDE_SUB_DEPARTMENT": "{0} – inkluderer {1} barn",
         "TOOLTIP_INCLUDE_SUB_ITEM": "{0} - inkluderer {1} underelementer",
@@ -1238,7 +1238,7 @@
         "SEARCH_DEPARTMENT_UNIT": "Sökavdelning/enhet",
         "FILTER": "Använd filter",
         "TYPE": "Typ",
-        "SEARCH_WITH_NAME": "Sök efter för- och efternamn",
+        "SEARCH_WITH_NAME": "Sök namn och användarnamn",
         "RESULT_SEARCH_FOR": "Sök resultat efter",
         "TOOLTIP_INCLUDE_SUB_DEPARTMENT": "{0} – inkluderar {1} barn",
         "TOOLTIP_INCLUDE_SUB_ITEM": "{0} – innehåller {1} underelement",
@@ -7991,7 +7991,9 @@
         };
         RelatedPopupComponent.prototype.removeCheckedNodeList = function (item) {
             var _this = this;
-            this.videoData.src = this.originVideoDataSrc;
+            if (this.videoData) {
+                this.videoData.src = this.originVideoDataSrc;
+            }
             this.selectedData = [];
             this.selectedData2 = [];
             this.checkedNodeList = this.checkedNodeList.filter(function (x) { var _a, _b; return (x.id.toLowerCase() !== item.id.toLowerCase() || ((_a = x.parentId) === null || _a === void 0 ? void 0 : _a.toLowerCase()) !== ((_b = item.parentId) === null || _b === void 0 ? void 0 : _b.toLowerCase())); });
@@ -8621,7 +8623,7 @@
                     });
                     if (!this.canUploadImage && !this.canUploadVideo)
                         return [2 /*return*/, this.dialogRef.close(this.checkedNodeList)];
-                    if (this.originVideoDataSrc && !this.videoData.src) {
+                    if (this.originVideoDataSrc && this.videoData && !this.videoData.src) {
                         this.videoData.src = this.originVideoDataSrc;
                     }
                     this.dialogRef.close(this.videoData);
@@ -8870,10 +8872,14 @@
             });
             if (index >= 0) {
                 this.commonCheckedList = this.commonCheckedList.filter(function (_, ind) { return ind !== index; });
-                this.videoData.src = this.originVideoDataSrc;
+                if (this.videoData) {
+                    this.videoData.src = this.originVideoDataSrc;
+                }
             }
             else {
-                this.videoData.src = "/video?id=" + node.id;
+                if (this.videoData) {
+                    this.videoData.src = "/video?id=" + node.id;
+                }
                 this.commonCheckedList = __spreadArray(__spreadArray([], __read(this.commonCheckedList)), [node]);
             }
             this.selectedData = this.commonCheckedList;
@@ -8956,6 +8962,7 @@
                             });
                             return [3 /*break*/, 3];
                         case 1:
+                            if (!this.videoData) return [3 /*break*/, 3];
                             _j = this.videoData;
                             return [4 /*yield*/, this.uploadService.uploadImage(this.qmsInputImageFile.file, this.imageUpload.height, this.imageUpload.width).toPromise()];
                         case 2:
@@ -8989,7 +8996,9 @@
                             return [4 /*yield*/, this.uploadService.uploadSingleFile(this.qmsInputVideoFile.file, '', '1', this.entityId).toPromise()];
                         case 1:
                             resUploadVideo = _j.sent();
-                            this.videoData.src = resUploadVideo.url;
+                            if (this.videoData) {
+                                this.videoData.src = resUploadVideo.url;
+                            }
                             this.isLoadingVideoFile = false;
                             return [2 /*return*/];
                     }
@@ -30423,9 +30432,6 @@
             }
         };
         QMSCKEditorComponent.prototype.ngOnDestroy = function () {
-            if (this.editorInstance) {
-                this.editorInstance.destroy();
-            }
             $(document).off();
         };
         QMSCKEditorComponent.prototype.registerOnChange = function (fn) {
@@ -36615,6 +36621,8 @@
             if (this.options.length === 1) {
                 this.dialogRef.updateSize(this.dialogData.sizeUpdateDefault);
                 this.optionSelect.setValue(this.options[0].type);
+                var event$ = new select.MatSelectChange(null, this.options[0].type);
+                this.onSelectionTypeChange(event$);
             }
         };
         QMSSelectAccessDialogComponent.prototype._initResultAccess = function () {
@@ -37026,7 +37034,7 @@
     QMSSelectAccessDialogComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'qms-select-access-dialog',
-                    template: "<div qms-dialog-container-v2 class=\"select-access-dialog-container\">\n  <div qms-dialog-header>\n    <div class=\"access-dialog-header mb-2\">\n      <span class=\"header-title\">{{dialogData.titleDialog || LANG.SELECT_ACCESS}}</span>\n      <button matDialogClose class=\"btn-close-dialog\" qms-btn-icon color=\"light\">\n        <mat-icon class=\"mat-icons-outlined\">close</mat-icon>\n      </button>\n    </div>\n  </div>\n  <div [class.active]=\"optionSelect.value !== null\" qms-dialog-content class=\"qms-dialog-content\">\n    <div class=\"access-dialog-wraper\">\n      <mat-form-field *ngIf=\"options.length > 1\" qms-form qms-select-input class=\"field-select-option  w-100\"\n        appearance=\"fill\">\n        <mat-label qms-select-input>{{LANG.TYPE}}</mat-label>\n        <mat-select (selectionChange)=\"onSelectionTypeChange($event)\" [formControl]=\"optionSelect\" placeholder=\"Select\"\n          disableOptionCentering #singleSelect panelClass=\"qms-select-panel\" qms-select>\n\n          <mat-option *ngFor=\"let item of options\" [value]=\"item.type\">\n            {{ LANG[item.displayName] }}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n      <div class=\"body-dialog-container\">\n        <!-- Person Access -->\n        <div class=\"option-selected-content\">\n          <ng-container *ngIf=\"optionSelect.value === OPTION_ENUM.PERSON\">\n            <form *ngIf=\"personForm\" [formGroup]=\"personForm\">\n              <mat-dialog-content>\n                <div class=\"group-filter-person-option\">\n                  <mat-form-field *ngIf=\"optionFilterPersonDataGlobal.userGroups.length\" qms-form qms-select-input\n                    class=\"w-100\" appearance=\"fill\">\n                    <mat-label qms-select-input>{{LANG.ROLE}}</mat-label>\n                    <mat-select panelClass=\"qms-select-panel\" qms-select formControlName=\"userGroup\"\n                      disableOptionCentering>\n                      <mat-select-trigger>\n                        {{personForm.controls['userGroup'].value?.name || ''}}\n                      </mat-select-trigger>\n                      <mat-option>\n                        <ngx-mat-select-search formControlName=\"userGroupFilter\" placeholderLabel=\"{{ LANG.ROLE }}\"\n                          noEntriesFoundLabel=\"\">\n                        </ngx-mat-select-search>\n                      </mat-option>\n                      <mat-option mode=\"dark\" class=\"opt-check-icon\"\n                        *ngFor=\"let item of filteredSearchTextBox.userGroup.value\" [value]=\"item\">\n                        <span qms-elipsify position=\"top\" mode=\"dark\" class=\"text-option-content\">{{ item.name }}</span>\n                        <mat-icon class=\"check-icon\"\n                          *ngIf=\"personForm.controls['userGroup'].value?.id == item.id\">check</mat-icon>\n                      </mat-option>\n                    </mat-select>\n                    <span [@inOutAnimation] (click)=\"personForm.get('userGroup').setValue('')\" class=\"pointer \"\n                      matSuffix aria-label=\"Clear\" *ngIf=\"personForm.get('userGroup').value && !getLoading$.value\">\n                      <mat-icon>close</mat-icon>\n                    </span>\n                  </mat-form-field>\n                  <!-- input field department filter person -->\n                  <mat-form-field *ngIf=\"optionFilterPersonDataGlobal.departments.length\"\n                    class=\"w-100 input-select-option\" qms-form qms-select-input>\n                    <mat-label>{{LANG.DEPARTMENT_UNIT}}</mat-label>\n                    <mat-select panelClass=\"qms-select-panel\" qms-select disableOptionCentering\n                      formControlName=\"department\">\n                      <mat-select-trigger>\n                        {{personForm.controls['department'].value?.name || ''}}\n                      </mat-select-trigger>\n                      <mat-option>\n                        <ngx-mat-select-search formControlName=\"departmentFilter\"\n                          [placeholderLabel]=\"LANG.DEPARTMENT_UNIT\" noEntriesFoundLabel=\"\">\n                        </ngx-mat-select-search>\n                      </mat-option>\n                      <mat-option class=\"opt-check-icon\" *ngFor=\"let item of filteredSearchTextBox.department.value\"\n                        [value]=\"item\">\n                        <span qms-elipsify mode=\"dark\" position=\"top\" class=\"text-option-content\">{{ item.name }}</span>\n                        <mat-icon class=\"check-icon\"\n                          *ngIf=\"personForm.controls['department'].value?.id == item.id\">check</mat-icon>\n                      </mat-option>\n                    </mat-select>\n                    <span (click)=\"setFormControlValue(['recursive','department'], [false,''])\" [@inOutAnimation]\n                      class=\"pointer\" matSuffix aria-label=\"Clear\"\n                      *ngIf=\"personForm.get('department').value && !getLoading$.value\">\n                      <mat-icon>close</mat-icon>\n                    </span>\n                  </mat-form-field>\n                </div>\n\n                <mat-slide-toggle [@inOutAnimation] *ngIf=\"personForm.controls['department'].value\"\n                  class=\"w-100 slide-toggle\" formControlName=\"recursive\" color=\"default\" qms-group-options>\n                  <span class=\"text-label\">{{LANG.INCLUDE_SUB_DEPARTMENTS}}</span>\n                </mat-slide-toggle>\n\n                <mat-form-field class=\"w-100\" appearance=\"fill\" qms-form qms-search-field>\n                  <input matInput appearance=\"off\" [placeholder]=\"LANG.SEARCH_WITH_NAME\" formControlName=\"keyword\"\n                    type=\"text\" autocomplete=\"off\" />\n                  <button *ngIf=\"!getLoading$.value\" qms-btn-icon color=\"light\" [@inOutAnimation]\n                    (click)=\"onSearchPersonFreeText()\" class=\"pointer me-1\" matSuffix aria-label=\"Search\">\n                    <mat-icon>search</mat-icon>\n                  </button>\n                  <mat-progress-spinner [@inOutAnimation] *ngIf=\"getLoading$.value\" matSuffix mode=\"indeterminate\"\n                    diameter=\"20\"></mat-progress-spinner>\n                  <span [@inOutAnimation] (click)=\"personForm.get('keyword').setValue('')\"\n                    class=\"pointer btn-icon-clear d-flex justify-content-center align-items-center \" matSuffix\n                    aria-label=\"Clear\" *ngIf=\"personForm.get('keyword').value && !getLoading$.value\">\n                    <button qms-btn-icon color=\"light\">\n                      <mat-icon>close</mat-icon>\n                    </button>\n                  </span>\n                </mat-form-field>\n                <button (click)=\"onFilterPerson()\" qms-btn-outlined class=\"w-100 my-1\">\n                  {{LANG.FILTER}}\n                </button>\n              </mat-dialog-content>\n\n              <mat-dialog-content class=\"items-list\">\n                <div qms-scrollbar>\n                  <div class=\"item\">\n                    <mat-checkbox [@inOutAnimation]\n                      *ngIf=\"!getLoading$.value && personFiltered.length && !dialogData.modeSelectOnePerson\"\n                                  [disabled]=\"isDisabledSelectAll(OPTION_ENUM.PERSON)\"\n                      #checkPerson class=\"w-100 mb-1 checkbox-all\"\n                      (click)=\"personFiltered.length && onCheckAll(OPTION_ENUM.PERSON,checkPerson)\"\n                      [checked]=\"isCheckAll(OPTION_ENUM.PERSON)\" [indeterminate]=\"isIndeterminate(OPTION_ENUM.PERSON)\"\n                      color=\"default\" qms-group-options>\n                      <span class=\"text-label header-title\">{{LANG.CHOOSE_ALL}} </span>\n                      <span>(<b>{{personFiltered.length}}</b>)</span>\n                    </mat-checkbox>\n                  </div>\n                  <mat-divider class=\"mx-auto\"></mat-divider>\n                  <ng-container *ngIf=\"getLoading$.value; then loading\">\n                  </ng-container>\n                  <div [@inOutAnimation] *ngIf=\"personFiltered.length && !getLoading$.value\" [@listAnimation]\n                    class=\"item-list-wrapper\">\n                    <div class=\"item  mt-1\" [@inOutAnimation]\n                      *ngFor=\"let employee of personFiltered; trackBy: trackByFn\">\n                      <ng-container\n                        [ngTemplateOutlet]=\"dialogData.modeSelectOnePerson ?itemWithoutCheckboxTemplate : itemCheckboxTemplate\"\n                        [ngTemplateOutletContext]=\"{item: employee, type: OPTION_ENUM.PERSON}\">\n                      </ng-container>\n                    </div>\n                  </div>\n                  <div [@inOutAnimation] *ngIf=\"!personFiltered.length && !getLoading$.value\"\n                    class=\"item-list-wrapper no-result\">\n                    <ng-container *ngTemplateOutlet=\"noResult\"></ng-container>\n                  </div>\n                  <mat-divider class=\"mx-auto\"></mat-divider>\n                  <qms-paginator overlayPanelClass=\"select-access-paginator\" #pagingPerson *ngIf=\"getPerson$.value.length > 10\" [length]=\"getPerson$.value.length\"\n                    [numHidden]=\"0\" [pageSize]=\"getPerson$.value.pageSize\" [pageSizeOptions]=\"PAGE_SIZE_OPTION\"\n                    (page)='onPaginatorEvent($event, OPTION_ENUM.PERSON)' [size]='PAGINATION_SIZE.medium'>\n                  </qms-paginator>\n                </div>\n              </mat-dialog-content>\n            </form>\n          </ng-container>\n\n          <!-- UserGroup Access -->\n          <ng-container *ngIf=\"optionSelect.value === OPTION_ENUM.USER_GROUP\">\n            <div>\n              <mat-dialog-content>\n                <form (submit)=\"onFilterUserGroup()\">\n                  <mat-form-field class=\"w-100\" qms-form qms-search-field>\n                    <input [formControl]=\"userGroupForm\" matInput type=\"text\" autocomplete=\"off\"\n                           placeholder=\"User group\" />\n                    <button [@inOutAnimation] *ngIf=\"!getLoading$.value\" type=\"submit\" qms-btn-icon color=\"light\"\n                            matSuffix>\n                      <mat-icon>search</mat-icon>\n                    </button>\n                    <mat-progress-spinner [@inOutAnimation] *ngIf=\"getLoading$.value\" matSuffix mode=\"indeterminate\"\n                                          diameter=\"20\"></mat-progress-spinner>\n                    <div [@inOutAnimation] *ngIf=\"!!userGroupForm.value && !getLoading$.value\" matSuffix qms-input-clear>\n                      <button (click)=\"userGroupForm.setValue('')\" qms-btn-icon color=\"light\">\n                        <mat-icon>close</mat-icon>\n                      </button>\n                    </div>\n                  </mat-form-field>\n                </form>\n              </mat-dialog-content>\n              <mat-dialog-content class=\"items-list\">\n                <div qms-scrollbar>\n                  <div class=\"item\">\n                    <mat-checkbox [@inOutAnimation]\n                      *ngIf=\"!getLoading$.value && (userGroupFiltered.length && !dialogData.modeSelectOneUserGroup)\"\n                                  [disabled]=\"isDisabledSelectAll(OPTION_ENUM.USER_GROUP)\"\n                      #checkUserGroup class=\"w-100 checkbox-all mb-1\" color=\"default\"\n                      [checked]=\"isCheckAll(OPTION_ENUM.USER_GROUP)\"\n                      [indeterminate]=\"isIndeterminate(OPTION_ENUM.USER_GROUP)\"\n                      (click)=\"userGroupFiltered.length && onCheckAll(OPTION_ENUM.USER_GROUP,checkUserGroup)\"\n                      qms-group-options>\n                      <span class=\"text-label header-title\">{{LANG.CHOOSE_ALL}}</span>\n                      <span>(<b>{{userGroupFiltered.length}}</b>)</span>\n                    </mat-checkbox>\n                  </div>\n                  <mat-divider class=\"mx-auto\"></mat-divider>\n                  <ng-container *ngIf=\"getLoading$.value;then loading\">\n                  </ng-container>\n                  <div *ngIf=\"userGroupFiltered.length && !getLoading$.value\" [@listAnimation]\n                    class=\"item-list-wrapper\">\n                    <div [@inOutAnimation] class=\"item mt-1\" *ngFor=\"let userGroup of userGroupFiltered\">\n                      <ng-container\n                        [ngTemplateOutlet]=\"dialogData.modeSelectOneUserGroup ? itemWithoutCheckboxTemplate : itemCheckboxTemplate\"\n                        [ngTemplateOutletContext]=\"{item: userGroup,type: OPTION_ENUM.USER_GROUP}\">\n                      </ng-container>\n                    </div>\n                  </div>\n                  <div [@inOutAnimation] *ngIf=\"!userGroupFiltered.length && !getLoading$.value\"\n                    class=\"item-list-wrapper no-result\">\n                    <ng-container *ngTemplateOutlet=\"noResult\"></ng-container>\n                  </div>\n                  <mat-divider class=\"mx-auto\"></mat-divider>\n                  <qms-paginator overlayPanelClass=\"select-access-paginator\" #pagingUserGroup class=\"my-1\" *ngIf=\"getUserGroup$.value.length > 10 \"\n                    [length]=\"getUserGroup$.value.length\" [numHidden]=\"0\" [pageSize]=\"getUserGroup$.value.pageSize\"\n                    [pageSizeOptions]=\"PAGE_SIZE_OPTION\" (page)='onPaginatorEvent($event, OPTION_ENUM.USER_GROUP)'\n                    [size]='PAGINATION_SIZE.medium'>\n                  </qms-paginator>\n                </div>\n              </mat-dialog-content>\n            </div>\n          </ng-container>\n\n          <!-- Department Access -->\n          <ng-container\n            *ngIf=\"optionSelect.value === OPTION_ENUM.DEPARTMENT && getLoading$.value; then loading\"></ng-container>\n          <ng-container *ngIf=\"optionSelect.value === OPTION_ENUM.DEPARTMENT && !getLoading$.value\"\n            class=\"person-access\">\n            <qms-select-department-tree #tree [rowsSkeleton]=\"8\" [config]=\"dialogData.treeDepartmentConfig\" [maxWidthNode]=\"dialogData.maxWidthNode\"\n              (onSearchEvent)=\"onSearchDepartmentEvent.emit($event)\"\n              (onValueChangeEvent)=\"onResultDepartmentChange($event)\"\n              (selectionNodeChangeEvent)=\"onSelectionNodeDepartmentChange($event)\"\n              (onPagingSearchEvent)=\"onPaginatorEvent($event, OPTION_ENUM.DEPARTMENT)\">\n            </qms-select-department-tree>\n          </ng-container>\n        </div>\n      </div>\n    </div>\n\n    <div *ngIf=\"optionSelect.value !== null\" class=\"result-wrapper\">\n      <div class=\"result-selected-container\">\n        <div [@inOutAnimation] *ngIf=\"(options.length === 1) || (options.length > 1 && optionSelect.value !== null)\"\n          class=\"header-title result-header\">\n          <span>\n            {{\n            dialogData.titleResult || LANG.RESULTS}}\n            <span *ngIf=\"options.length === 1 && hasItemSelected()\">\n              ({{getResultTabActive().length}})\n            </span>\n          </span>\n        </div>\n        <div class=\"result-body\">\n          <!-- Result Person  -->\n          <ng-container *ngIf=\"checkExistOptionSelect(OPTION_ENUM.PERSON)\"\n            [ngTemplateOutlet]=\"options?.length == 1 ? listChip : viewResultCollapse\"\n            [ngTemplateOutletContext]=\"{data:resultAccess.persons, type:OPTION_ENUM.PERSON, title:LANG.PERSON}\">\n          </ng-container>\n          <!-- Result User group -->\n          <ng-container *ngIf=\"checkExistOptionSelect(OPTION_ENUM.USER_GROUP)\"\n            [ngTemplateOutlet]=\"options?.length == 1 ? listChip : viewResultCollapse\"\n            [ngTemplateOutletContext]=\"{data:resultAccess.userGroups, type:OPTION_ENUM.USER_GROUP, title:LANG.USER_GROUP}\">\n          </ng-container>\n          <!-- Result Department -->\n          <ng-container *ngIf=\"checkExistOptionSelect(OPTION_ENUM.DEPARTMENT)\"\n            [ngTemplateOutlet]=\"options?.length == 1 ? listChip : viewResultCollapse\"\n            [ngTemplateOutletContext]=\"{data: resultAccess.departments, type:OPTION_ENUM.DEPARTMENT, title:LANG.DEPARTMENT}\">\n          </ng-container>\n        </div>\n      </div>\n    </div>\n  </div>\n  <mat-divider class=\"mx-auto\"></mat-divider>\n  <div qms-dialog-footer class=\"confirm__button__groups\" [class.none-option]=\"optionSelect.value === null\">\n    <button *ngIf=\"optionSelect.value !== null\" [disabled]=\"!hasItemSelected()\" class=\"btn-add\"\n      [class.qms-btn-disabled]=\"!hasItemSelected()\" [mat-dialog-close]=\"resultAccess\" qms-btn>\n      <span>{{LANG.ADD}}</span>\n    </button>\n    <button qms-btn-text mat-dialog-close>\n      {{LANG.CANCEL}}\n    </button>\n  </div>\n</div>\n\n<!-- Template -->\n<ng-template #noResult>\n  <svg width=\"89\" height=\"130\" viewBox=\"0 0 89 88\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <rect x=\"0.5\" width=\"88\" height=\"88\" rx=\"44\" fill=\"white\" />\n    <rect x=\"0.5\" width=\"88\" height=\"88\" rx=\"44\" fill=\"#0163B2\" fill-opacity=\"0.12\" />\n    <path\n      d=\"M44.5 56.6936L58.096 64.8996L54.488 49.4336L66.5 39.0276L50.682 37.6856L44.5 23.0996L38.318 37.6856L22.5 39.0276L34.512 49.4336L30.904 64.8996L44.5 56.6936Z\"\n      fill=\"#0163B3\" />\n    <text x=\"10\" y=\"105\" fill=\"#0163B2\">{{LANG.NO_RESULT}}</text>\n  </svg>\n</ng-template>\n\n<!-- Template list chip -->\n<ng-template #listChip let-data=\"data\" let-type=\"type\">\n  <mat-chip-list [@inOutAnimation] *ngIf=\"data?.length\" class=\"panel__item qms-scrollbar\">\n    <div [@inOutAnimation_2] *ngFor=\"let item of data; let i = index\">\n      <mat-chip (click)=\"onScollToNodeTreeDepartment(item)\" [@updateItemAnimation]\n        *qmsContentChanges=\"item.children?.length\" class=\"chip-item-result\"  qms-chip [removable]=\"true\">\n        <span qms-chip-body>\n          <span [qms-tool-tip]=\"generateTooltip(item)\"\n                position=\"top\" mode=\"dark\" class=\"text-label\">\n            {{item.name}}\n            <span *ngIf=\"item.subName\">({{ item.subName }})</span>\n          </span>\n          <span class=\"chip-item-children__count ms-1\" *ngIf=\"item?.children && item?.isGroup\">\n            {{item.children.length}}/{{item.childCount}}\n          </span>\n        </span>\n        <mat-icon *ngIf=\"allowRemove(type, item)\" (click)=\"onRemoveChip(type,item, i)\" class=\"remove-chip-icon\">cancel</mat-icon>\n        <mat-icon *ngIf=\"!allowRemove(type, item) && dialogData.formatMsgDisable\" position=\"top\" mode=\"dark\" [qms-tool-tip]=\"dialogData.formatMsgDisable(item)\" class=\"remove-chip-icon\">info_i</mat-icon>\n      </mat-chip>\n    </div>\n  </mat-chip-list>\n</ng-template>\n\n<!-- Template result with collapse -->\n<ng-template #viewResultCollapse let-title=\"title\" let-data=\"data\" let-type=\"type\">\n  <mat-expansion-panel qms-expansion [expanded]=\"optionSelect.value === type\">\n    <mat-expansion-panel-header>\n      <div class=\"title-content\">\n        <div class=\"qms-list-text\">\n          <div qms-line color=\"default-subtitle\">{{title}}\n            <span class=\"fw-600\">\n              ({{data?.length}})\n            </span>\n          </div>\n        </div>\n      </div>\n    </mat-expansion-panel-header>\n    <ng-container [ngTemplateOutlet]=\"listChip\" [ngTemplateOutletContext]=\"{data: data,type: type}\">\n    </ng-container>\n  </mat-expansion-panel>\n</ng-template>\n\n<!-- Template row without checkbox -->\n<ng-template #itemWithoutCheckboxTemplate let-item=\"item\" let-type=\"type\">\n  <div (click)=\"onSelectItem(type,item)\" class=\"item-without-checkbox w-100\" [class.active]=\"item.selected\">\n    <div class=\"item-content\">\n      <div class=\"text-label\">\n        <span class=\"text-label label-item fs-14 \">\n          {{ item.name }}\n        </span>\n        <span *ngIf=\"item.subName\" class=\"ms-1 sub-label\">({{item.subName}})</span>\n      </div>\n      <small *ngIf=\"item.helpText\" class=\"text-help px-1 fs-12 sub-label\">{{ item.helpText }}</small>\n    </div>\n    <div class=\"item-state\">\n      <mat-icon [@inOutAnimation] *ngIf=\"item.selected\">check</mat-icon>\n    </div>\n  </div>\n</ng-template>\n\n<!-- Template checkbox  -->\n<ng-template #itemCheckboxTemplate let-item=\"item\" let-type=\"type\">\n  <mat-checkbox [disabled]=\"!allowRemove(type, item)\" [checked]=\"item.selected\" (click)=\"onSelectItem(type,item)\" class=\"w-100\" color=\"default\"\n    qms-group-options>\n    <div class=\"text-label\">\n      <span class=\"text-label label-item fs-14 \">\n        {{ item.name }}\n      </span>\n      <span *ngIf=\"item.subName\" class=\"ms-1 sub-label\">({{item.subName}})</span>\n    </div>\n    <small *ngIf=\"item.helpText\" class=\"text-help px-1 fs-12 sub-label\">{{ item.helpText }}</small>\n  </mat-checkbox>\n</ng-template>\n\n<!-- Template loading -->\n<ng-template #loading>\n  <div class=\"qms-loading-container\">\n    <div class=\"qms-loader\" *ngFor=\"let item of arrSkeleton\">\n      <div class=\"qms-loader__wrapper\">\n        <div class=\"row-loader\">\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>\n",
+                    template: "<div qms-dialog-container-v2 class=\"select-access-dialog-container\">\n  <div qms-dialog-header>\n    <div class=\"access-dialog-header mb-2\">\n      <span class=\"header-title\">{{dialogData.titleDialog || LANG.SELECT_ACCESS}}</span>\n      <button matDialogClose class=\"btn-close-dialog\" qms-btn-icon color=\"light\">\n        <mat-icon class=\"mat-icons-outlined\">close</mat-icon>\n      </button>\n    </div>\n  </div>\n  <div [class.active]=\"optionSelect.value !== null\" qms-dialog-content class=\"qms-dialog-content\">\n    <div class=\"access-dialog-wraper\">\n      <mat-form-field *ngIf=\"options.length > 1\" qms-form qms-select-input class=\"field-select-option  w-100\"\n        appearance=\"fill\">\n        <mat-label qms-select-input>{{LANG.TYPE}}</mat-label>\n        <mat-select (selectionChange)=\"onSelectionTypeChange($event)\" [formControl]=\"optionSelect\" placeholder=\"Select\"\n          disableOptionCentering #singleSelect panelClass=\"qms-select-panel\" qms-select>\n\n          <mat-option *ngFor=\"let item of options\" [value]=\"item.type\">\n            {{ LANG[item.displayName] }}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n      <div class=\"body-dialog-container\">\n        <!-- Person Access -->\n        <div class=\"option-selected-content\">\n          <ng-container *ngIf=\"optionSelect.value === OPTION_ENUM.PERSON\">\n            <form *ngIf=\"personForm\" [formGroup]=\"personForm\">\n              <mat-dialog-content>\n                <div class=\"group-filter-person-option\">\n                  <mat-form-field *ngIf=\"optionFilterPersonDataGlobal.userGroups.length\" qms-form qms-select-input\n                    class=\"w-100\" appearance=\"fill\">\n                    <mat-label qms-select-input>{{LANG.ROLE}}</mat-label>\n                    <mat-select panelClass=\"qms-select-panel\" qms-select formControlName=\"userGroup\"\n                      disableOptionCentering>\n                      <mat-select-trigger>\n                        {{personForm.controls['userGroup'].value?.name || ''}}\n                      </mat-select-trigger>\n                      <mat-option>\n                        <ngx-mat-select-search formControlName=\"userGroupFilter\" placeholderLabel=\"{{ LANG.ROLE }}\"\n                          noEntriesFoundLabel=\"\">\n                        </ngx-mat-select-search>\n                      </mat-option>\n                      <mat-option mode=\"dark\" class=\"opt-check-icon\"\n                        *ngFor=\"let item of filteredSearchTextBox.userGroup.value\" [value]=\"item\">\n                        <span qms-elipsify position=\"top\" mode=\"dark\" class=\"text-option-content\">{{ item.name }}</span>\n                        <mat-icon class=\"check-icon\"\n                          *ngIf=\"personForm.controls['userGroup'].value?.id == item.id\">check</mat-icon>\n                      </mat-option>\n                    </mat-select>\n                    <span [@inOutAnimation] (click)=\"personForm.get('userGroup').setValue('')\" class=\"pointer \"\n                      matSuffix aria-label=\"Clear\" *ngIf=\"personForm.get('userGroup').value && !getLoading$.value\">\n                      <mat-icon>close</mat-icon>\n                    </span>\n                  </mat-form-field>\n                  <!-- input field department filter person -->\n                  <mat-form-field *ngIf=\"optionFilterPersonDataGlobal.departments.length\"\n                    class=\"w-100 input-select-option\" qms-form qms-select-input>\n                    <mat-label>{{LANG.DEPARTMENT_UNIT}}</mat-label>\n                    <mat-select panelClass=\"qms-select-panel\" qms-select disableOptionCentering\n                      formControlName=\"department\">\n                      <mat-select-trigger>\n                        {{personForm.controls['department'].value?.name || ''}}\n                      </mat-select-trigger>\n                      <mat-option>\n                        <ngx-mat-select-search formControlName=\"departmentFilter\"\n                          [placeholderLabel]=\"LANG.DEPARTMENT_UNIT\" noEntriesFoundLabel=\"\">\n                        </ngx-mat-select-search>\n                      </mat-option>\n                      <mat-option class=\"opt-check-icon\" *ngFor=\"let item of filteredSearchTextBox.department.value\"\n                        [value]=\"item\">\n                        <span qms-elipsify mode=\"dark\" position=\"top\" class=\"text-option-content\">{{ item.name }}</span>\n                        <mat-icon class=\"check-icon\"\n                          *ngIf=\"personForm.controls['department'].value?.id == item.id\">check</mat-icon>\n                      </mat-option>\n                    </mat-select>\n                    <span (click)=\"setFormControlValue(['recursive','department'], [false,''])\" [@inOutAnimation]\n                      class=\"pointer\" matSuffix aria-label=\"Clear\"\n                      *ngIf=\"personForm.get('department').value && !getLoading$.value\">\n                      <mat-icon>close</mat-icon>\n                    </span>\n                  </mat-form-field>\n                </div>\n\n                <mat-slide-toggle [@inOutAnimation] *ngIf=\"personForm.controls['department'].value\"\n                  class=\"w-100 slide-toggle\" formControlName=\"recursive\" color=\"default\" qms-group-options>\n                  <span class=\"text-label\">{{LANG.INCLUDE_SUB_DEPARTMENTS}}</span>\n                </mat-slide-toggle>\n\n                <mat-form-field class=\"w-100\" appearance=\"fill\" qms-form qms-search-field>\n                  <input matInput appearance=\"off\" [placeholder]=\"LANG.SEARCH_WITH_NAME\" formControlName=\"keyword\"\n                    type=\"text\" autocomplete=\"off\" />\n                  <button *ngIf=\"!getLoading$.value\" qms-btn-icon color=\"light\" [@inOutAnimation]\n                    (click)=\"onSearchPersonFreeText()\" class=\"pointer me-1\" matSuffix aria-label=\"Search\">\n                    <mat-icon>search</mat-icon>\n                  </button>\n                  <mat-progress-spinner [@inOutAnimation] *ngIf=\"getLoading$.value\" matSuffix mode=\"indeterminate\"\n                    diameter=\"20\"></mat-progress-spinner>\n                  <span [@inOutAnimation] (click)=\"personForm.get('keyword').setValue('')\"\n                    class=\"pointer btn-icon-clear d-flex justify-content-center align-items-center \" matSuffix\n                    aria-label=\"Clear\" *ngIf=\"personForm.get('keyword').value && !getLoading$.value\">\n                    <button qms-btn-icon color=\"light\">\n                      <mat-icon>close</mat-icon>\n                    </button>\n                  </span>\n                </mat-form-field>\n                <button (click)=\"onFilterPerson()\" qms-btn-outlined class=\"w-100 my-1\">\n                  {{LANG.FILTER}}\n                </button>\n              </mat-dialog-content>\n\n              <mat-dialog-content class=\"items-list\">\n                <div qms-scrollbar>\n                  <div class=\"item\">\n                    <mat-checkbox [@inOutAnimation]\n                      *ngIf=\"!getLoading$.value && personFiltered.length && !dialogData.modeSelectOnePerson\"\n                      [disabled]=\"isDisabledSelectAll(OPTION_ENUM.PERSON)\" #checkPerson class=\"w-100 mb-1 checkbox-all\"\n                      (click)=\"personFiltered.length && onCheckAll(OPTION_ENUM.PERSON,checkPerson)\"\n                      [checked]=\"isCheckAll(OPTION_ENUM.PERSON)\" [indeterminate]=\"isIndeterminate(OPTION_ENUM.PERSON)\"\n                      color=\"default\" qms-group-options>\n                      <span class=\"text-label header-title\">{{LANG.CHOOSE_ALL}} </span>\n                      <span>(<b>{{personFiltered.length}}</b>)</span>\n                    </mat-checkbox>\n                  </div>\n                  <mat-divider class=\"mx-auto\"></mat-divider>\n                  <ng-container *ngIf=\"getLoading$.value; then loading\">\n                  </ng-container>\n                  <div [@inOutAnimation] *ngIf=\"personFiltered.length && !getLoading$.value\" [@listAnimation]\n                    class=\"item-list-wrapper\">\n                    <div class=\"item  mt-1\" [@inOutAnimation]\n                      *ngFor=\"let employee of personFiltered; trackBy: trackByFn\">\n                      <ng-container\n                        [ngTemplateOutlet]=\"dialogData.modeSelectOnePerson ?itemWithoutCheckboxTemplate : itemCheckboxTemplate\"\n                        [ngTemplateOutletContext]=\"{item: employee, type: OPTION_ENUM.PERSON}\">\n                      </ng-container>\n                    </div>\n                  </div>\n                  <div [@inOutAnimation] *ngIf=\"!personFiltered.length && !getLoading$.value\"\n                    class=\"item-list-wrapper no-result\">\n                    <ng-container *ngTemplateOutlet=\"noResult\"></ng-container>\n                  </div>\n                  <mat-divider class=\"mx-auto\"></mat-divider>\n                  <qms-paginator overlayPanelClass=\"select-access-paginator\" #pagingPerson\n                    *ngIf=\"getPerson$.value.length > 10\" [length]=\"getPerson$.value.length\" [numHidden]=\"0\"\n                    [pageSize]=\"getPerson$.value.pageSize\" [pageSizeOptions]=\"PAGE_SIZE_OPTION\"\n                    (page)='onPaginatorEvent($event, OPTION_ENUM.PERSON)' [size]='PAGINATION_SIZE.medium'>\n                  </qms-paginator>\n                </div>\n              </mat-dialog-content>\n            </form>\n          </ng-container>\n\n          <!-- UserGroup Access -->\n          <ng-container *ngIf=\"optionSelect.value === OPTION_ENUM.USER_GROUP\">\n            <div>\n              <mat-dialog-content>\n                <form (submit)=\"onFilterUserGroup()\">\n                  <mat-form-field class=\"w-100\" qms-form qms-search-field>\n                    <input [formControl]=\"userGroupForm\" matInput type=\"text\" autocomplete=\"off\"\n                      placeholder=\"User group\" />\n                    <button [@inOutAnimation] *ngIf=\"!getLoading$.value\" type=\"submit\" qms-btn-icon color=\"light\"\n                      matSuffix>\n                      <mat-icon>search</mat-icon>\n                    </button>\n                    <mat-progress-spinner [@inOutAnimation] *ngIf=\"getLoading$.value\" matSuffix mode=\"indeterminate\"\n                      diameter=\"20\"></mat-progress-spinner>\n                    <div [@inOutAnimation] *ngIf=\"!!userGroupForm.value && !getLoading$.value\" matSuffix\n                      qms-input-clear>\n                      <button (click)=\"userGroupForm.setValue('')\" qms-btn-icon color=\"light\">\n                        <mat-icon>close</mat-icon>\n                      </button>\n                    </div>\n                  </mat-form-field>\n                </form>\n              </mat-dialog-content>\n              <mat-dialog-content class=\"items-list\">\n                <div qms-scrollbar>\n                  <div class=\"item\">\n                    <mat-checkbox [@inOutAnimation]\n                      *ngIf=\"!getLoading$.value && (userGroupFiltered.length && !dialogData.modeSelectOneUserGroup)\"\n                      [disabled]=\"isDisabledSelectAll(OPTION_ENUM.USER_GROUP)\" #checkUserGroup\n                      class=\"w-100 checkbox-all mb-1\" color=\"default\" [checked]=\"isCheckAll(OPTION_ENUM.USER_GROUP)\"\n                      [indeterminate]=\"isIndeterminate(OPTION_ENUM.USER_GROUP)\"\n                      (click)=\"userGroupFiltered.length && onCheckAll(OPTION_ENUM.USER_GROUP,checkUserGroup)\"\n                      qms-group-options>\n                      <span class=\"text-label header-title\">{{LANG.CHOOSE_ALL}}</span>\n                      <span>(<b>{{userGroupFiltered.length}}</b>)</span>\n                    </mat-checkbox>\n                  </div>\n                  <mat-divider class=\"mx-auto\"></mat-divider>\n                  <ng-container *ngIf=\"getLoading$.value;then loading\">\n                  </ng-container>\n                  <div *ngIf=\"userGroupFiltered.length && !getLoading$.value\" [@listAnimation]\n                    class=\"item-list-wrapper\">\n                    <div [@inOutAnimation] class=\"item mt-1\" *ngFor=\"let userGroup of userGroupFiltered\">\n                      <ng-container\n                        [ngTemplateOutlet]=\"dialogData.modeSelectOneUserGroup ? itemWithoutCheckboxTemplate : itemCheckboxTemplate\"\n                        [ngTemplateOutletContext]=\"{item: userGroup,type: OPTION_ENUM.USER_GROUP}\">\n                      </ng-container>\n                    </div>\n                  </div>\n                  <div [@inOutAnimation] *ngIf=\"!userGroupFiltered.length && !getLoading$.value\"\n                    class=\"item-list-wrapper no-result\">\n                    <ng-container *ngTemplateOutlet=\"noResult\"></ng-container>\n                  </div>\n                  <mat-divider class=\"mx-auto\"></mat-divider>\n                  <qms-paginator overlayPanelClass=\"select-access-paginator\" #pagingUserGroup class=\"my-1\"\n                    *ngIf=\"getUserGroup$.value.length > 10 \" [length]=\"getUserGroup$.value.length\" [numHidden]=\"0\"\n                    [pageSize]=\"getUserGroup$.value.pageSize\" [pageSizeOptions]=\"PAGE_SIZE_OPTION\"\n                    (page)='onPaginatorEvent($event, OPTION_ENUM.USER_GROUP)' [size]='PAGINATION_SIZE.medium'>\n                  </qms-paginator>\n                </div>\n              </mat-dialog-content>\n            </div>\n          </ng-container>\n\n          <!-- Department Access -->\n          <ng-container\n            *ngIf=\"optionSelect.value === OPTION_ENUM.DEPARTMENT && getLoading$.value; then loading\"></ng-container>\n          <ng-container *ngIf=\"optionSelect.value === OPTION_ENUM.DEPARTMENT && !getLoading$.value\"\n            class=\"person-access\">\n            <qms-select-department-tree #tree [rowsSkeleton]=\"8\" [config]=\"dialogData.treeDepartmentConfig\"\n              [maxWidthNode]=\"dialogData.maxWidthNode\" (onSearchEvent)=\"onSearchDepartmentEvent.emit($event)\"\n              (onValueChangeEvent)=\"onResultDepartmentChange($event)\"\n              (selectionNodeChangeEvent)=\"onSelectionNodeDepartmentChange($event)\"\n              (onPagingSearchEvent)=\"onPaginatorEvent($event, OPTION_ENUM.DEPARTMENT)\">\n            </qms-select-department-tree>\n          </ng-container>\n        </div>\n      </div>\n    </div>\n\n    <div *ngIf=\"optionSelect.value !== null\" class=\"result-wrapper\">\n      <div class=\"result-selected-container\">\n        <div [@inOutAnimation] *ngIf=\"(options.length === 1) || (options.length > 1 && optionSelect.value !== null)\"\n          class=\"header-title result-header\">\n          <span>\n            {{\n            dialogData.titleResult || LANG.RESULTS}}\n            <span *ngIf=\"options.length === 1 && hasItemSelected()\">\n              ({{getResultTabActive().length}})\n            </span>\n          </span>\n        </div>\n        <div class=\"result-body\">\n          <!-- Result Person  -->\n          <ng-container *ngIf=\"checkExistOptionSelect(OPTION_ENUM.PERSON)\"\n            [ngTemplateOutlet]=\"options?.length == 1 ? listChip : viewResultCollapse\"\n            [ngTemplateOutletContext]=\"{data:resultAccess.persons, type:OPTION_ENUM.PERSON, title:LANG.PERSON}\">\n          </ng-container>\n          <!-- Result User group -->\n          <ng-container *ngIf=\"checkExistOptionSelect(OPTION_ENUM.USER_GROUP)\"\n            [ngTemplateOutlet]=\"options?.length == 1 ? listChip : viewResultCollapse\"\n            [ngTemplateOutletContext]=\"{data:resultAccess.userGroups, type:OPTION_ENUM.USER_GROUP, title:LANG.USER_GROUP}\">\n          </ng-container>\n          <!-- Result Department -->\n          <ng-container *ngIf=\"checkExistOptionSelect(OPTION_ENUM.DEPARTMENT)\"\n            [ngTemplateOutlet]=\"options?.length == 1 ? listChip : viewResultCollapse\"\n            [ngTemplateOutletContext]=\"{data: resultAccess.departments, type:OPTION_ENUM.DEPARTMENT, title:LANG.DEPARTMENT}\">\n          </ng-container>\n        </div>\n      </div>\n    </div>\n  </div>\n  <mat-divider class=\"mx-auto\"></mat-divider>\n  <div qms-dialog-footer class=\"confirm__button__groups\" [class.none-option]=\"optionSelect.value === null\">\n    <button *ngIf=\"optionSelect.value !== null\" [disabled]=\"!hasItemSelected()\" class=\"btn-add\"\n      [class.qms-btn-disabled]=\"!hasItemSelected()\" [mat-dialog-close]=\"resultAccess\" qms-btn>\n      <span>{{LANG.ADD}}</span>\n    </button>\n    <button qms-btn-text mat-dialog-close>\n      {{LANG.CANCEL}}\n    </button>\n  </div>\n</div>\n\n<!-- Template -->\n<ng-template #noResult>\n  <svg width=\"89\" height=\"130\" viewBox=\"0 0 89 88\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <rect x=\"0.5\" width=\"88\" height=\"88\" rx=\"44\" fill=\"white\" />\n    <rect x=\"0.5\" width=\"88\" height=\"88\" rx=\"44\" fill=\"#0163B2\" fill-opacity=\"0.12\" />\n    <path\n      d=\"M44.5 56.6936L58.096 64.8996L54.488 49.4336L66.5 39.0276L50.682 37.6856L44.5 23.0996L38.318 37.6856L22.5 39.0276L34.512 49.4336L30.904 64.8996L44.5 56.6936Z\"\n      fill=\"#0163B3\" />\n    <text x=\"10\" y=\"105\" fill=\"#0163B2\">{{LANG.NO_RESULT}}</text>\n  </svg>\n</ng-template>\n\n<!-- Template list chip -->\n<ng-template #listChip let-data=\"data\" let-type=\"type\">\n  <mat-chip-list [@inOutAnimation] *ngIf=\"data?.length\" class=\"panel__item qms-scrollbar\">\n    <div [@inOutAnimation_2] *ngFor=\"let item of data; let i = index\">\n      <mat-chip (click)=\"onScollToNodeTreeDepartment(item)\" [@updateItemAnimation]\n        *qmsContentChanges=\"item.children?.length\" class=\"chip-item-result\" qms-chip [removable]=\"true\">\n        <span qms-chip-body>\n          <span [qms-tool-tip]=\"generateTooltip(item)\" position=\"top\" mode=\"dark\" class=\"text-label\">\n            {{item.name}}\n            <span *ngIf=\"item.subName\">({{ item.subName }})</span>\n          </span>\n          <span class=\"chip-item-children__count ms-1\" *ngIf=\"item?.children && item?.isGroup\">\n            {{item.children.length}}/{{item.childCount}}\n          </span>\n        </span>\n        <mat-icon *ngIf=\"allowRemove(type, item)\" (click)=\"onRemoveChip(type,item, i)\"\n          class=\"remove-chip-icon\">cancel</mat-icon>\n        <mat-icon *ngIf=\"!allowRemove(type, item) && dialogData.formatMsgDisable\" position=\"top\" mode=\"dark\"\n          [qms-tool-tip]=\"dialogData.formatMsgDisable(item)\" class=\"remove-chip-icon\">info_i</mat-icon>\n      </mat-chip>\n    </div>\n  </mat-chip-list>\n</ng-template>\n\n<!-- Template result with collapse -->\n<ng-template #viewResultCollapse let-title=\"title\" let-data=\"data\" let-type=\"type\">\n  <mat-expansion-panel qms-expansion [expanded]=\"optionSelect.value === type\">\n    <mat-expansion-panel-header>\n      <div class=\"title-content\">\n        <div class=\"qms-list-text\">\n          <div qms-line color=\"default-subtitle\">{{title}}\n            <span class=\"fw-600\">\n              ({{data?.length}})\n            </span>\n          </div>\n        </div>\n      </div>\n    </mat-expansion-panel-header>\n    <ng-container [ngTemplateOutlet]=\"listChip\" [ngTemplateOutletContext]=\"{data: data,type: type}\">\n    </ng-container>\n  </mat-expansion-panel>\n</ng-template>\n\n<!-- Template row without checkbox -->\n<ng-template #itemWithoutCheckboxTemplate let-item=\"item\" let-type=\"type\">\n  <div (click)=\"onSelectItem(type,item)\" class=\"item-without-checkbox w-100\" [class.active]=\"item.selected\">\n    <div class=\"item-content\">\n      <div class=\"text-label\">\n        <span class=\"text-label label-item fs-14 \">\n          {{ item.name }}\n        </span>\n        <span *ngIf=\"item.subName\" class=\"ms-1 sub-label\">({{item.subName}})</span>\n      </div>\n      <small *ngIf=\"item.helpText\" class=\"text-help px-1 fs-12 sub-label\">{{ item.helpText }}</small>\n    </div>\n    <div class=\"item-state\">\n      <mat-icon [@inOutAnimation] *ngIf=\"item.selected\">check</mat-icon>\n    </div>\n  </div>\n</ng-template>\n\n<!-- Template checkbox  -->\n<ng-template #itemCheckboxTemplate let-item=\"item\" let-type=\"type\">\n  <mat-checkbox [disabled]=\"!allowRemove(type, item)\" [checked]=\"item.selected\" (click)=\"onSelectItem(type,item)\"\n    class=\"w-100\" color=\"default\" qms-group-options>\n    <div class=\"text-label\">\n      <span class=\"text-label label-item fs-14 \">\n        {{ item.name }}\n      </span>\n      <span *ngIf=\"item.subName\" class=\"ms-1 sub-label\">({{item.subName}})</span>\n    </div>\n    <small *ngIf=\"item.helpText\" class=\"text-help px-1 fs-12 sub-label\">{{ item.helpText }}</small>\n  </mat-checkbox>\n</ng-template>\n\n<!-- Template loading -->\n<ng-template #loading>\n  <div class=\"qms-loading-container\">\n    <div class=\"qms-loader\" *ngFor=\"let item of arrSkeleton\">\n      <div class=\"qms-loader__wrapper\">\n        <div class=\"row-loader\">\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>",
                     animations: [SelectAccessAnimationTrigger],
                     providers: [
                         {