qms-angular 1.1.71 → 1.1.73

package/bundles/qms-angular.umd.js

@@ -3152,7 +3152,7 @@
     OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
     PERFORMANCE OF THIS SOFTWARE.
     ***************************************************************************** */
-    /* global Reflect, Promise, SuppressedError, Symbol */
+    /* global Reflect, Promise */
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
@@ -3205,64 +3205,6 @@
     function __param(paramIndex, decorator) {
         return function (target, key) { decorator(target, key, paramIndex); };
     }
-    function __esDecorate(ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
-        function accept(f) { if (f !== void 0 && typeof f !== "function")
-            throw new TypeError("Function expected"); return f; }
-        var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
-        var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
-        var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
-        var _, done = false;
-        for (var i = decorators.length - 1; i >= 0; i--) {
-            var context = {};
-            for (var p in contextIn)
-                context[p] = p === "access" ? {} : contextIn[p];
-            for (var p in contextIn.access)
-                context.access[p] = contextIn.access[p];
-            context.addInitializer = function (f) { if (done)
-                throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
-            var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
-            if (kind === "accessor") {
-                if (result === void 0)
-                    continue;
-                if (result === null || typeof result !== "object")
-                    throw new TypeError("Object expected");
-                if (_ = accept(result.get))
-                    descriptor.get = _;
-                if (_ = accept(result.set))
-                    descriptor.set = _;
-                if (_ = accept(result.init))
-                    initializers.unshift(_);
-            }
-            else if (_ = accept(result)) {
-                if (kind === "field")
-                    initializers.unshift(_);
-                else
-                    descriptor[key] = _;
-            }
-        }
-        if (target)
-            Object.defineProperty(target, contextIn.name, descriptor);
-        done = true;
-    }
-    ;
-    function __runInitializers(thisArg, initializers, value) {
-        var useValue = arguments.length > 2;
-        for (var i = 0; i < initializers.length; i++) {
-            value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
-        }
-        return useValue ? value : void 0;
-    }
-    ;
-    function __propKey(x) {
-        return typeof x === "symbol" ? x : "".concat(x);
-    }
-    ;
-    function __setFunctionName(f, name, prefix) {
-        if (typeof name === "symbol")
-            name = name.description ? "[".concat(name.description, "]") : "";
-        return Object.defineProperty(f, "name", { configurable: true, value: prefix ? "".concat(prefix, " ", name) : name });
-    }
-    ;
     function __metadata(metadataKey, metadataValue) {
         if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
             return Reflect.metadata(metadataKey, metadataValue);
@@ -3294,7 +3236,7 @@
         function step(op) {
             if (f)
                 throw new TypeError("Generator is already executing.");
-            while (g && (g = 0, op[0] && (_ = 0)), _)
+            while (_)
                 try {
                     if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done)
                         return t;
@@ -3444,13 +3386,9 @@
         if (!Symbol.asyncIterator)
             throw new TypeError("Symbol.asyncIterator is not defined.");
         var g = generator.apply(thisArg, _arguments || []), i, q = [];
-        return i = {}, verb("next"), verb("throw"), verb("return", awaitReturn), i[Symbol.asyncIterator] = function () { return this; }, i;
-        function awaitReturn(f) { return function (v) { return Promise.resolve(v).then(f, reject); }; }
-        function verb(n, f) { if (g[n]) {
-            i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); };
-            if (f)
-                i[n] = f(i[n]);
-        } }
+        return i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i;
+        function verb(n) { if (g[n])
+            i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }
         function resume(n, v) { try {
             step(g[n](v));
         }
@@ -3466,7 +3404,7 @@
     function __asyncDelegator(o) {
         var i, p;
         return i = {}, verb("next"), verb("throw", function (e) { throw e; }), verb("return"), i[Symbol.iterator] = function () { return this; }, i;
-        function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: false } : f ? f(v) : v; } : f; }
+        function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === "return" } : f ? f(v) : v; } : f; }
     }
     function __asyncValues(o) {
         if (!Symbol.asyncIterator)
@@ -3525,95 +3463,7 @@
         if (receiver === null || (typeof receiver !== "object" && typeof receiver !== "function"))
             throw new TypeError("Cannot use 'in' operator on non-object");
         return typeof state === "function" ? receiver === state : state.has(receiver);
-    }
-    function __addDisposableResource(env, value, async) {
-        if (value !== null && value !== void 0) {
-            if (typeof value !== "object" && typeof value !== "function")
-                throw new TypeError("Object expected.");
-            var dispose, inner;
-            if (async) {
-                if (!Symbol.asyncDispose)
-                    throw new TypeError("Symbol.asyncDispose is not defined.");
-                dispose = value[Symbol.asyncDispose];
-            }
-            if (dispose === void 0) {
-                if (!Symbol.dispose)
-                    throw new TypeError("Symbol.dispose is not defined.");
-                dispose = value[Symbol.dispose];
-                if (async)
-                    inner = dispose;
-            }
-            if (typeof dispose !== "function")
-                throw new TypeError("Object not disposable.");
-            if (inner)
-                dispose = function () { try {
-                    inner.call(this);
-                }
-                catch (e) {
-                    return Promise.reject(e);
-                } };
-            env.stack.push({ value: value, dispose: dispose, async: async });
-        }
-        else if (async) {
-            env.stack.push({ async: true });
-        }
-        return value;
-    }
-    var _SuppressedError = typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
-        var e = new Error(message);
-        return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
-    };
-    function __disposeResources(env) {
-        function fail(e) {
-            env.error = env.hasError ? new _SuppressedError(e, env.error, "An error was suppressed during disposal.") : e;
-            env.hasError = true;
-        }
-        function next() {
-            while (env.stack.length) {
-                var rec = env.stack.pop();
-                try {
-                    var result = rec.dispose && rec.dispose.call(rec.value);
-                    if (rec.async)
-                        return Promise.resolve(result).then(next, function (e) { fail(e); return next(); });
-                }
-                catch (e) {
-                    fail(e);
-                }
-            }
-            if (env.hasError)
-                throw env.error;
-        }
-        return next();
-    }
-    var tslib_es6 = {
-        __extends: __extends,
-        __assign: __assign,
-        __rest: __rest,
-        __decorate: __decorate,
-        __param: __param,
-        __metadata: __metadata,
-        __awaiter: __awaiter,
-        __generator: __generator,
-        __createBinding: __createBinding,
-        __exportStar: __exportStar,
-        __values: __values,
-        __read: __read,
-        __spread: __spread,
-        __spreadArrays: __spreadArrays,
-        __spreadArray: __spreadArray,
-        __await: __await,
-        __asyncGenerator: __asyncGenerator,
-        __asyncDelegator: __asyncDelegator,
-        __asyncValues: __asyncValues,
-        __makeTemplateObject: __makeTemplateObject,
-        __importStar: __importStar,
-        __importDefault: __importDefault,
-        __classPrivateFieldGet: __classPrivateFieldGet,
-        __classPrivateFieldSet: __classPrivateFieldSet,
-        __classPrivateFieldIn: __classPrivateFieldIn,
-        __addDisposableResource: __addDisposableResource,
-        __disposeResources: __disposeResources,
-    };
+    }
 
     var BUTTON_TOGGLE_DEFAULT_OPTIONS = new i0.InjectionToken('BUTTON_TOGGLE_DEFAULT_OPTIONS');
     var BUTTON_TOGGLE_GROUP = new i0.InjectionToken('QMSButtonToggleGroup');
@@ -32737,11 +32587,38 @@
                 var wordsBox = document.querySelector("#" + _this.editorId + " .wordcount-content");
                 if (!!wordsBox) {
                     wordsBox.textContent = _this.LANG.QMSCKEDITOR.WORDS + ": " + stats.words + " / " + _this.LANG.QMSCKEDITOR.CHARACTERS + ": " + stats.characters;
+                    if (_this.qmsckData.maxLength) {
+                        wordsBox.textContent = _this.LANG.QMSCKEDITOR.MAXIMIZE + " " + _this.LANG.QMSCKEDITOR.CHARACTERS + ": " + _this.qmsckData.maxLength;
+                        var tempDiv = document.createElement('div');
+                        tempDiv.innerHTML = editor.getData();
+                        var plainText = tempDiv.textContent || tempDiv.innerText || '';
+                        if (plainText.length > _this.qmsckData.maxLength) {
+                            var trimmedText = plainText.slice(0, _this.qmsckData.maxLength);
+                            _this.editorInstance.setData(trimmedText);
+                            setTimeout(function () {
+                                var editorElement = _this.editorInstance.editing.view.domRoots.get('main');
+                                if (editorElement) {
+                                    editorElement.blur();
+                                }
+                            }, 0);
+                        }
+                    }
                 }
             });
             if (this.qmsckData.isReadOnly) {
                 editor.isReadOnly = true;
             }
+            this.editorInstance.editing.view.document.on('keydown', function (event, data) {
+                if (_this.qmsckData.maxLength) {
+                    var tempDiv = document.createElement('div');
+                    tempDiv.innerHTML = editor.getData();
+                    var plainText = tempDiv.textContent || tempDiv.innerText || '';
+                    if (plainText.length > _this.qmsckData.maxLength) {
+                        data.preventDefault();
+                        event.stop();
+                    }
+                }
+            });
             this._setEditorInstanceObserver(this.editorId);
         };
         /**
@@ -38818,6 +38695,12 @@
                 },] }
     ];
 
+    var QMSCustomConfigDialog = /** @class */ (function () {
+        function QMSCustomConfigDialog() {
+        }
+        return QMSCustomConfigDialog;
+    }());
+
     var QMSSelectAccessDialog = /** @class */ (function () {
         function QMSSelectAccessDialog() {
             this.enableSelectPerson = true;
@@ -38838,6 +38721,8 @@
             this.formatMsgDisable = null;
             this.maxWidthNode = 510;
             this.skipFirstAskingScreen = false;
+            this.userGroupConfig = new QMSCustomConfigDialog();
+            this.personConfig = new QMSCustomConfigDialog();
         }
         return QMSSelectAccessDialog;
     }());
@@ -39018,8 +38903,12 @@
             }
             if (this.options.length === 1 || this.dialogData.skipFirstAskingScreen) {
                 this.dialogRef.updateSize(this.dialogData.sizeUpdateDefault);
-                this.optionSelect.setValue(this.options[0].type);
-                var event$ = new select.MatSelectChange(null, this.options[0].type);
+                var defaultType = this.options[0].type;
+                if (this.dialogData.defaultSelectMode) {
+                    defaultType = this.dialogData.defaultSelectMode;
+                }
+                this.optionSelect.setValue(defaultType);
+                var event$ = new select.MatSelectChange(null, defaultType);
                 this.onSelectionTypeChange(event$);
             }
         };
@@ -39372,7 +39261,7 @@
             this.onPagingEvent.emit(Object.assign(Object.assign({}, val), { type: type }));
         };
         QMSSelectAccessDialogComponent.prototype.onResultDepartmentChange = function (event) {
-            // this.resultAccess.departments = event;
+            this.resultAccess.departments = event;
         };
         QMSSelectAccessDialogComponent.prototype.updateResultSearchDepartment = function (data) {
             var _this = this;
@@ -39432,7 +39321,7 @@
     QMSSelectAccessDialogComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'qms-select-access-dialog',
-                    template: "<div qms-dialog-container-v2 class=\"select-access-dialog-container\">\n  <div qms-dialog-header>\n    <div class=\"access-dialog-header mb-2\">\n      <span class=\"header-title\">{{dialogData.titleDialog || LANG.SELECT_ACCESS}}</span>\n      <button matDialogClose class=\"btn-close-dialog\" qms-btn-icon color=\"light\">\n        <mat-icon class=\"mat-icons-outlined\">close</mat-icon>\n      </button>\n    </div>\n  </div>\n  <div [class.active]=\"optionSelect.value !== null\" qms-dialog-content class=\"qms-dialog-content\">\n    <div class=\"access-dialog-wraper\">\n      <mat-form-field *ngIf=\"options.length > 1\" qms-form qms-select-input class=\"field-select-option  w-100\"\n        appearance=\"fill\">\n        <mat-label qms-select-input>{{LANG.TYPE}}</mat-label>\n        <mat-select (selectionChange)=\"onSelectionTypeChange($event)\" [formControl]=\"optionSelect\" placeholder=\"Select\"\n          disableOptionCentering #singleSelect panelClass=\"qms-select-panel\" qms-select>\n\n          <mat-option *ngFor=\"let item of options\" [value]=\"item.type\">\n            {{ LANG[item.displayName] }}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n      <div class=\"body-dialog-container\">\n        <!-- Person Access -->\n        <div class=\"option-selected-content\">\n          <ng-container *ngIf=\"optionSelect.value === OPTION_ENUM.PERSON\">\n            <form *ngIf=\"personForm\" [formGroup]=\"personForm\">\n              <mat-dialog-content>\n                <div class=\"group-filter-person-option\">\n                  <mat-form-field *ngIf=\"optionFilterPersonDataGlobal.userGroups.length\" qms-form qms-select-input\n                    class=\"w-100\" appearance=\"fill\">\n                    <mat-label qms-select-input>{{LANG.ROLE}}</mat-label>\n                    <mat-select panelClass=\"qms-select-panel\" qms-select formControlName=\"userGroup\"\n                      disableOptionCentering>\n                      <mat-select-trigger>\n                        {{personForm.controls['userGroup'].value?.name || ''}}\n                      </mat-select-trigger>\n                      <mat-option>\n                        <ngx-mat-select-search formControlName=\"userGroupFilter\" placeholderLabel=\"{{ LANG.ROLE }}\"\n                          noEntriesFoundLabel=\"\">\n                        </ngx-mat-select-search>\n                      </mat-option>\n                      <mat-option mode=\"dark\" class=\"opt-check-icon\"\n                        *ngFor=\"let item of filteredSearchTextBox.userGroup.value\" [value]=\"item\">\n                        <span qms-elipsify position=\"top\" mode=\"dark\" class=\"text-option-content\">{{ item.name }}</span>\n                        <mat-icon class=\"check-icon\"\n                          *ngIf=\"personForm.controls['userGroup'].value?.id == item.id\">check</mat-icon>\n                      </mat-option>\n                    </mat-select>\n                    <span [@inOutAnimation] (click)=\"personForm.get('userGroup').setValue('')\" class=\"pointer \"\n                      matSuffix aria-label=\"Clear\" *ngIf=\"personForm.get('userGroup').value && !getLoading$.value\">\n                      <mat-icon>close</mat-icon>\n                    </span>\n                  </mat-form-field>\n                  <!-- input field department filter person -->\n                  <mat-form-field *ngIf=\"optionFilterPersonDataGlobal.departments.length\"\n                    class=\"w-100 input-select-option\" qms-form qms-select-input>\n                    <mat-label>{{LANG.DEPARTMENT_UNIT}}</mat-label>\n                    <mat-select panelClass=\"qms-select-panel\" qms-select disableOptionCentering\n                      formControlName=\"department\">\n                      <mat-select-trigger>\n                        {{personForm.controls['department'].value?.name || ''}}\n                      </mat-select-trigger>\n                      <mat-option>\n                        <ngx-mat-select-search formControlName=\"departmentFilter\"\n                          [placeholderLabel]=\"LANG.DEPARTMENT_UNIT\" noEntriesFoundLabel=\"\">\n                        </ngx-mat-select-search>\n                      </mat-option>\n                      <mat-option class=\"opt-check-icon\" *ngFor=\"let item of filteredSearchTextBox.department.value\"\n                        [value]=\"item\">\n                        <span qms-elipsify mode=\"dark\" position=\"top\" class=\"text-option-content\">{{ item.name }}</span>\n                        <mat-icon class=\"check-icon\"\n                          *ngIf=\"personForm.controls['department'].value?.id == item.id\">check</mat-icon>\n                      </mat-option>\n                    </mat-select>\n                    <span (click)=\"setFormControlValue(['recursive','department'], [false,''])\" [@inOutAnimation]\n                      class=\"pointer\" matSuffix aria-label=\"Clear\"\n                      *ngIf=\"personForm.get('department').value && !getLoading$.value\">\n                      <mat-icon>close</mat-icon>\n                    </span>\n                  </mat-form-field>\n                </div>\n\n                <mat-slide-toggle [@inOutAnimation] *ngIf=\"personForm.controls['department'].value\"\n                  class=\"w-100 slide-toggle\" formControlName=\"recursive\" color=\"default\" qms-group-options>\n                  <span class=\"text-label\">{{LANG.INCLUDE_SUB_DEPARTMENTS}}</span>\n                </mat-slide-toggle>\n\n                <mat-form-field class=\"w-100\" appearance=\"fill\" qms-form qms-search-field>\n                  <input matInput appearance=\"off\" [placeholder]=\"LANG.SEARCH_WITH_NAME\" formControlName=\"keyword\"\n                    type=\"text\" autocomplete=\"off\" />\n                  <button *ngIf=\"!getLoading$.value\" qms-btn-icon color=\"light\" [@inOutAnimation]\n                    (click)=\"onSearchPersonFreeText()\" class=\"pointer me-1\" matSuffix aria-label=\"Search\">\n                    <mat-icon>search</mat-icon>\n                  </button>\n                  <mat-progress-spinner [@inOutAnimation] *ngIf=\"getLoading$.value\" matSuffix mode=\"indeterminate\"\n                    diameter=\"20\"></mat-progress-spinner>\n                  <span [@inOutAnimation] (click)=\"personForm.get('keyword').setValue('')\"\n                    class=\"pointer btn-icon-clear d-flex justify-content-center align-items-center \" matSuffix\n                    aria-label=\"Clear\" *ngIf=\"personForm.get('keyword').value && !getLoading$.value\">\n                    <button qms-btn-icon color=\"light\">\n                      <mat-icon>close</mat-icon>\n                    </button>\n                  </span>\n                </mat-form-field>\n                <button (click)=\"onFilterPerson()\" qms-btn-outlined class=\"w-100 my-1\">\n                  {{LANG.FILTER}}\n                </button>\n              </mat-dialog-content>\n\n              <mat-dialog-content class=\"items-list\">\n                <div qms-scrollbar>\n                  <div class=\"item\">\n                    <mat-checkbox [@inOutAnimation]\n                      *ngIf=\"!getLoading$.value && personFiltered.length && !dialogData.modeSelectOnePerson\"\n                      [disabled]=\"isDisabledSelectAll(OPTION_ENUM.PERSON)\" #checkPerson class=\"w-100 mb-1 checkbox-all\"\n                      (click)=\"personFiltered.length && onCheckAll(OPTION_ENUM.PERSON,checkPerson)\"\n                      [checked]=\"isCheckAll(OPTION_ENUM.PERSON)\" [indeterminate]=\"isIndeterminate(OPTION_ENUM.PERSON)\"\n                      color=\"default\" qms-group-options>\n                      <span class=\"text-label header-title\">{{LANG.CHOOSE_ALL}} </span>\n                      <span>(<b>{{personFiltered.length}}</b>)</span>\n                    </mat-checkbox>\n                  </div>\n                  <mat-divider class=\"mx-auto\"></mat-divider>\n                  <ng-container *ngIf=\"getLoading$.value; then loading\">\n                  </ng-container>\n                  <div [@inOutAnimation] *ngIf=\"personFiltered.length && !getLoading$.value\" [@listAnimation]\n                    class=\"item-list-wrapper\">\n                    <div class=\"item  mt-1\" [@inOutAnimation]\n                      *ngFor=\"let employee of personFiltered; trackBy: trackByFn\">\n                      <ng-container\n                        [ngTemplateOutlet]=\"dialogData.modeSelectOnePerson ?itemWithoutCheckboxTemplate : itemCheckboxTemplate\"\n                        [ngTemplateOutletContext]=\"{item: employee, type: OPTION_ENUM.PERSON}\">\n                      </ng-container>\n                    </div>\n                  </div>\n                  <div [@inOutAnimation] *ngIf=\"!personFiltered.length && !getLoading$.value\"\n                    class=\"item-list-wrapper no-result\">\n                    <ng-container *ngTemplateOutlet=\"noResult\"></ng-container>\n                  </div>\n                  <mat-divider class=\"mx-auto\"></mat-divider>\n                  <qms-paginator overlayPanelClass=\"select-access-paginator\" #pagingPerson\n                    *ngIf=\"getPerson$.value.length > 10\" [length]=\"getPerson$.value.length\" [numHidden]=\"0\"\n                    [pageSize]=\"getPerson$.value.pageSize\" [pageSizeOptions]=\"PAGE_SIZE_OPTION\"\n                    (page)='onPaginatorEvent($event, OPTION_ENUM.PERSON)' [size]='PAGINATION_SIZE.medium'>\n                  </qms-paginator>\n                </div>\n              </mat-dialog-content>\n            </form>\n          </ng-container>\n\n          <!-- UserGroup Access -->\n          <ng-container *ngIf=\"optionSelect.value === OPTION_ENUM.USER_GROUP\">\n            <div>\n              <mat-dialog-content>\n                <form (submit)=\"onFilterUserGroup()\">\n                  <mat-form-field class=\"w-100\" qms-form qms-search-field>\n                    <input [formControl]=\"userGroupForm\" matInput type=\"text\" autocomplete=\"off\"\n                      placeholder=\"User group\" />\n                    <button [@inOutAnimation] *ngIf=\"!getLoading$.value\" type=\"submit\" qms-btn-icon color=\"light\"\n                      matSuffix>\n                      <mat-icon>search</mat-icon>\n                    </button>\n                    <mat-progress-spinner [@inOutAnimation] *ngIf=\"getLoading$.value\" matSuffix mode=\"indeterminate\"\n                      diameter=\"20\"></mat-progress-spinner>\n                    <div [@inOutAnimation] *ngIf=\"!!userGroupForm.value && !getLoading$.value\" matSuffix\n                      qms-input-clear>\n                      <button (click)=\"userGroupForm.setValue('')\" qms-btn-icon color=\"light\">\n                        <mat-icon>close</mat-icon>\n                      </button>\n                    </div>\n                  </mat-form-field>\n                </form>\n              </mat-dialog-content>\n              <mat-dialog-content class=\"items-list\">\n                <div qms-scrollbar>\n                  <div class=\"item\">\n                    <mat-checkbox [@inOutAnimation]\n                      *ngIf=\"!getLoading$.value && (userGroupFiltered.length && !dialogData.modeSelectOneUserGroup)\"\n                      [disabled]=\"isDisabledSelectAll(OPTION_ENUM.USER_GROUP)\" #checkUserGroup\n                      class=\"w-100 checkbox-all mb-1\" color=\"default\" [checked]=\"isCheckAll(OPTION_ENUM.USER_GROUP)\"\n                      [indeterminate]=\"isIndeterminate(OPTION_ENUM.USER_GROUP)\"\n                      (click)=\"userGroupFiltered.length && onCheckAll(OPTION_ENUM.USER_GROUP,checkUserGroup)\"\n                      qms-group-options>\n                      <span class=\"text-label header-title\">{{LANG.CHOOSE_ALL}}</span>\n                      <span>(<b>{{userGroupFiltered.length}}</b>)</span>\n                    </mat-checkbox>\n                  </div>\n                  <mat-divider class=\"mx-auto\"></mat-divider>\n                  <ng-container *ngIf=\"getLoading$.value;then loading\">\n                  </ng-container>\n                  <div *ngIf=\"userGroupFiltered.length && !getLoading$.value\" [@listAnimation]\n                    class=\"item-list-wrapper\">\n                    <div [@inOutAnimation] class=\"item mt-1\" *ngFor=\"let userGroup of userGroupFiltered\">\n                      <ng-container\n                        [ngTemplateOutlet]=\"dialogData.modeSelectOneUserGroup ? itemWithoutCheckboxTemplate : itemCheckboxTemplate\"\n                        [ngTemplateOutletContext]=\"{item: userGroup,type: OPTION_ENUM.USER_GROUP}\">\n                      </ng-container>\n                    </div>\n                  </div>\n                  <div [@inOutAnimation] *ngIf=\"!userGroupFiltered.length && !getLoading$.value\"\n                    class=\"item-list-wrapper no-result\">\n                    <ng-container *ngTemplateOutlet=\"noResult\"></ng-container>\n                  </div>\n                  <mat-divider class=\"mx-auto\"></mat-divider>\n                  <qms-paginator overlayPanelClass=\"select-access-paginator\" #pagingUserGroup class=\"my-1\"\n                    *ngIf=\"getUserGroup$.value.length > 10 \" [length]=\"getUserGroup$.value.length\" [numHidden]=\"0\"\n                    [pageSize]=\"getUserGroup$.value.pageSize\" [pageSizeOptions]=\"PAGE_SIZE_OPTION\"\n                    (page)='onPaginatorEvent($event, OPTION_ENUM.USER_GROUP)' [size]='PAGINATION_SIZE.medium'>\n                  </qms-paginator>\n                </div>\n              </mat-dialog-content>\n            </div>\n          </ng-container>\n\n          <!-- Department Access -->\n          <ng-container\n            *ngIf=\"optionSelect.value === OPTION_ENUM.DEPARTMENT && getLoading$.value; then loading\"></ng-container>\n          <ng-container *ngIf=\"optionSelect.value === OPTION_ENUM.DEPARTMENT && !getLoading$.value\"\n            class=\"person-access\">\n            <qms-select-department-tree #tree [rowsSkeleton]=\"8\" [config]=\"dialogData.treeDepartmentConfig\"\n              [maxWidthNode]=\"dialogData.maxWidthNode\" (onSearchEvent)=\"onSearchDepartmentEvent.emit($event)\"\n              (onValueChangeEvent)=\"onResultDepartmentChange($event)\"\n              (selectionNodeChangeEvent)=\"onSelectionNodeDepartmentChange($event)\"\n              (onPagingSearchEvent)=\"onPaginatorEvent($event, OPTION_ENUM.DEPARTMENT)\">\n            </qms-select-department-tree>\n          </ng-container>\n        </div>\n      </div>\n    </div>\n\n    <div *ngIf=\"optionSelect.value !== null\" class=\"result-wrapper\">\n      <div class=\"result-selected-container\">\n        <div [@inOutAnimation] *ngIf=\"(options.length === 1) || (options.length > 1 && optionSelect.value !== null)\"\n          class=\"header-title result-header\">\n          <span>\n            {{\n            dialogData.titleResult || LANG.RESULTS}}\n            <span *ngIf=\"options.length === 1 && hasItemSelected()\">\n              ({{getResultTabActive().length}})\n            </span>\n          </span>\n        </div>\n        <div class=\"result-body\">\n          <!-- Result Person  -->\n          <ng-container *ngIf=\"checkExistOptionSelect(OPTION_ENUM.PERSON)\"\n            [ngTemplateOutlet]=\"options?.length == 1 ? listChip : viewResultCollapse\"\n            [ngTemplateOutletContext]=\"{data:resultAccess.persons, type:OPTION_ENUM.PERSON, title:LANG.PERSON}\">\n          </ng-container>\n          <!-- Result User group -->\n          <ng-container *ngIf=\"checkExistOptionSelect(OPTION_ENUM.USER_GROUP)\"\n            [ngTemplateOutlet]=\"options?.length == 1 ? listChip : viewResultCollapse\"\n            [ngTemplateOutletContext]=\"{data:resultAccess.userGroups, type:OPTION_ENUM.USER_GROUP, title:LANG.USER_GROUP}\">\n          </ng-container>\n          <!-- Result Department -->\n          <ng-container *ngIf=\"checkExistOptionSelect(OPTION_ENUM.DEPARTMENT)\"\n            [ngTemplateOutlet]=\"options?.length == 1 ? listChip : viewResultCollapse\"\n            [ngTemplateOutletContext]=\"{data: resultAccess.departments, type:OPTION_ENUM.DEPARTMENT, title:LANG.DEPARTMENT}\">\n          </ng-container>\n        </div>\n      </div>\n    </div>\n  </div>\n  <mat-divider class=\"mx-auto\"></mat-divider>\n  <div qms-dialog-footer class=\"confirm__button__groups\" [class.none-option]=\"optionSelect.value === null\">\n    <button *ngIf=\"optionSelect.value !== null\"\n      [disabled]=\"!hasItemSelected() && !dialogData.treeDepartmentConfig.canAddNullResult\" class=\"btn-add\"\n      [class.qms-btn-disabled]=\"!hasItemSelected() && !dialogData.treeDepartmentConfig.canAddNullResult\"\n      [mat-dialog-close]=\"resultAccess\" qms-btn>\n      <span>{{dialogData.confirmTitle || LANG.ADD}}</span>\n    </button>\n    <button qms-btn-text mat-dialog-close>\n      {{dialogData.cancelTitle || LANG.CANCEL}}\n    </button>\n  </div>\n</div>\n\n<!-- Template -->\n<ng-template #noResult>\n  <svg width=\"89\" height=\"130\" viewBox=\"0 0 89 88\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <rect x=\"0.5\" width=\"88\" height=\"88\" rx=\"44\" fill=\"white\" />\n    <rect x=\"0.5\" width=\"88\" height=\"88\" rx=\"44\" fill=\"#0163B2\" fill-opacity=\"0.12\" />\n    <path\n      d=\"M44.5 56.6936L58.096 64.8996L54.488 49.4336L66.5 39.0276L50.682 37.6856L44.5 23.0996L38.318 37.6856L22.5 39.0276L34.512 49.4336L30.904 64.8996L44.5 56.6936Z\"\n      fill=\"#0163B3\" />\n    <text x=\"10\" y=\"105\" fill=\"#0163B2\">{{LANG.NO_RESULT}}</text>\n  </svg>\n</ng-template>\n\n<!-- Template list chip -->\n<ng-template #listChip let-data=\"data\" let-type=\"type\">\n  <mat-chip-list [@inOutAnimation] *ngIf=\"data?.length\" class=\"panel__item qms-scrollbar\">\n    <div [@inOutAnimation_2] *ngFor=\"let item of data; let i = index\">\n      <mat-chip (click)=\"onScollToNodeTreeDepartment(item)\" [@updateItemAnimation]\n        *qmsContentChanges=\"item.children?.length\" class=\"chip-item-result\" qms-chip [removable]=\"true\">\n        <span qms-chip-body>\n          <span [qms-tool-tip]=\"generateTooltip(item)\" position=\"top\" mode=\"dark\" class=\"text-label\">\n            {{item.name}}\n            <span *ngIf=\"item.subName\">({{ item.subName }})</span>\n          </span>\n          <span class=\"chip-item-children__count ms-1\" *ngIf=\"item?.children && item?.isGroup\">\n            {{item.children.length}}/{{item.childCount}}\n          </span>\n        </span>\n        <mat-icon *ngIf=\"allowRemove(type, item)\" (click)=\"onRemoveChip(type,item, i)\"\n          class=\"remove-chip-icon\">cancel</mat-icon>\n        <mat-icon *ngIf=\"!allowRemove(type, item) && dialogData.formatMsgDisable\" position=\"top\" mode=\"dark\"\n          [qms-tool-tip]=\"dialogData.formatMsgDisable(item)\" class=\"remove-chip-icon\">info_i</mat-icon>\n      </mat-chip>\n    </div>\n  </mat-chip-list>\n</ng-template>\n\n<!-- Template result with collapse -->\n<ng-template #viewResultCollapse let-title=\"title\" let-data=\"data\" let-type=\"type\">\n  <mat-expansion-panel qms-expansion [expanded]=\"optionSelect.value === type\">\n    <mat-expansion-panel-header>\n      <div class=\"title-content\">\n        <div class=\"qms-list-text\">\n          <div qms-line color=\"default-subtitle\">{{title}}\n            <span class=\"fw-600\">\n              ({{data?.length}})\n            </span>\n          </div>\n        </div>\n      </div>\n    </mat-expansion-panel-header>\n    <ng-container [ngTemplateOutlet]=\"listChip\" [ngTemplateOutletContext]=\"{data: data,type: type}\">\n    </ng-container>\n  </mat-expansion-panel>\n</ng-template>\n\n<!-- Template row without checkbox -->\n<ng-template #itemWithoutCheckboxTemplate let-item=\"item\" let-type=\"type\">\n  <div (click)=\"onSelectItem(type,item)\" class=\"item-without-checkbox w-100\" [class.active]=\"item.selected\">\n    <div class=\"item-content\">\n      <div class=\"text-label\">\n        <span class=\"text-label label-item fs-14 \">\n          {{ item.name }}\n        </span>\n        <span *ngIf=\"item.subName\" class=\"ms-1 sub-label\">({{item.subName}})</span>\n      </div>\n      <small *ngIf=\"item.helpText\" class=\"text-help px-1 fs-12 sub-label\">{{ item.helpText }}</small>\n    </div>\n    <div class=\"item-state\">\n      <mat-icon [@inOutAnimation] *ngIf=\"item.selected\">check</mat-icon>\n    </div>\n  </div>\n</ng-template>\n\n<!-- Template checkbox  -->\n<ng-template #itemCheckboxTemplate let-item=\"item\" let-type=\"type\">\n  <mat-checkbox [disabled]=\"!allowRemove(type, item)\" [checked]=\"item.selected\" (click)=\"onSelectItem(type,item)\"\n    class=\"w-100\" color=\"default\" qms-group-options>\n    <div class=\"text-label\">\n      <span class=\"text-label label-item fs-14 \">\n        {{ item.name }}\n      </span>\n      <span *ngIf=\"item.subName\" class=\"ms-1 sub-label\">({{item.subName}})</span>\n    </div>\n    <small *ngIf=\"item.helpText\" class=\"text-help px-1 fs-12 sub-label\">{{ item.helpText }}</small>\n  </mat-checkbox>\n</ng-template>\n\n<!-- Template loading -->\n<ng-template #loading>\n  <div class=\"qms-loading-container\">\n    <div class=\"qms-loader\" *ngFor=\"let item of arrSkeleton\">\n      <div class=\"qms-loader__wrapper\">\n        <div class=\"row-loader\">\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>",
+                    template: "<div qms-dialog-container-v2 class=\"select-access-dialog-container\">\n  <div qms-dialog-header>\n    <div class=\"access-dialog-header mb-2\">\n      <span class=\"header-title\">{{dialogData.titleDialog || LANG.SELECT_ACCESS}}</span>\n      <button matDialogClose class=\"btn-close-dialog\" qms-btn-icon color=\"light\">\n        <mat-icon class=\"mat-icons-outlined\">close</mat-icon>\n      </button>\n    </div>\n  </div>\n  <div [class.active]=\"optionSelect.value !== null\" qms-dialog-content class=\"qms-dialog-content\">\n    <div class=\"access-dialog-wraper\">\n      <mat-form-field *ngIf=\"options.length > 1\" qms-form qms-select-input class=\"field-select-option  w-100\"\n        appearance=\"fill\">\n        <mat-label qms-select-input>{{LANG.TYPE}}</mat-label>\n        <mat-select (selectionChange)=\"onSelectionTypeChange($event)\" [formControl]=\"optionSelect\" placeholder=\"Select\"\n          disableOptionCentering #singleSelect panelClass=\"qms-select-panel\" qms-select>\n\n          <mat-option *ngFor=\"let item of options\" [value]=\"item.type\">\n            {{ LANG[item.displayName] }}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n      <div class=\"body-dialog-container\">\n        <!-- Person Access -->\n        <div class=\"option-selected-content\">\n          <ng-container *ngIf=\"optionSelect.value === OPTION_ENUM.PERSON\">\n            <form *ngIf=\"personForm\" [formGroup]=\"personForm\">\n              <mat-dialog-content>\n                <div class=\"group-filter-person-option\">\n                  <mat-form-field *ngIf=\"optionFilterPersonDataGlobal.userGroups.length\" qms-form qms-select-input\n                    class=\"w-100\" appearance=\"fill\">\n                    <mat-label qms-select-input>{{LANG.ROLE}}</mat-label>\n                    <mat-select panelClass=\"qms-select-panel\" qms-select formControlName=\"userGroup\"\n                      (selectionChange)=\"onFilterPerson()\"\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(''); onFilterPerson()\" 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                      (selectionChange)=\"onFilterPerson()\"\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,'']); onFilterPerson()\" [@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]=\"dialogData.userGroupConfig?.searchName || LANG.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: dialogData.userGroupConfig?.searchName || LANG.USER_GROUP}\">\n          </ng-container>\n          <!-- Result Department -->\n          <ng-container *ngIf=\"checkExistOptionSelect(OPTION_ENUM.DEPARTMENT)\"\n            [ngTemplateOutlet]=\"options?.length == 1 ? listChip : viewResultCollapse\"\n            [ngTemplateOutletContext]=\"{data: resultAccess.departments, type:OPTION_ENUM.DEPARTMENT, title:LANG.DEPARTMENT}\">\n          </ng-container>\n        </div>\n      </div>\n    </div>\n  </div>\n  <mat-divider class=\"mx-auto\"></mat-divider>\n  <div qms-dialog-footer class=\"confirm__button__groups\" [class.none-option]=\"optionSelect.value === null\">\n    <button *ngIf=\"optionSelect.value !== null\"\n      [disabled]=\"!hasItemSelected() && !dialogData.treeDepartmentConfig.canAddNullResult\" class=\"btn-add\"\n      [class.qms-btn-disabled]=\"!hasItemSelected() && !dialogData.treeDepartmentConfig.canAddNullResult\"\n      [mat-dialog-close]=\"resultAccess\" qms-btn>\n      <span>{{dialogData.confirmTitle || LANG.ADD}}</span>\n    </button>\n    <button qms-btn-text mat-dialog-close>\n      {{dialogData.cancelTitle || LANG.CANCEL}}\n    </button>\n  </div>\n</div>\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: [
                         {