qms-angular 1.0.73 → 1.0.77

package/bundles/qms-angular.umd.js

@@ -737,7 +737,7 @@
     QMSComment.decorators = [
         { type: i0.Component, args: [{
                     selector: 'qms-comment',
-                    template: "<div class=\"qms-comment\" *ngFor=\"let item of sourceLog; let i = index\">\r\n  <mat-card-header *ngIf=\"!item.isDelete\">\r\n    <mat-card-subtitle\r\n      >{{ item.user }} {{ item.date | dateFormat }}\r\n    </mat-card-subtitle>\r\n  </mat-card-header>\r\n  <mat-card-content>\r\n    <div\r\n      qms-scrollbar\r\n      *ngIf=\"!item.isEdit && !item.isDelete\"\r\n      class=\"content\"\r\n      [ngClass]=\"{ secondary: 0 != i % 2 }\"\r\n      [innerHTML]=\"showContent(item.content)\"\r\n    ></div>\r\n    <div class=\"content delete-action-wrap\" *ngIf=\"item.isDelete\">\r\n      <i>{{ LANG.DELETE_MESSAGE_COMMENT }}</i>\r\n      <button qms-btn-text class=\"btn-action\" (click)=\"regretItem(item)\">\r\n        {{ LANG.REGRET }}\r\n      </button>\r\n    </div>\r\n    <mat-form-field *ngIf=\"item.isEdit && !item.isDelete\" qms-form-textarea>\r\n      <textarea\r\n        qms-scrollbar\r\n        class=\"textarea-comment\"\r\n        matInput\r\n        cdkTextareaAutosize\r\n        cdkAutosizeMinRows=\"1\"\r\n        cdkAutosizeMaxRows=\"5\"\r\n        [(ngModel)]=\"item.editedContent\"\r\n      ></textarea>\r\n    </mat-form-field>\r\n  </mat-card-content>\r\n  <mat-card-actions *ngIf=\"item.isDraft && !item.isEdit && !item.isDelete\">\r\n    <a class=\"btn-action\" (click)=\"editContent(item)\"> {{ LANG.EDIT }} </a>\r\n    <a class=\"btn-action ml-20\" (click)=\"removeItem(item)\">{{ LANG.DELETE }}</a>\r\n  </mat-card-actions>\r\n  <mat-card-actions *ngIf=\"item.isEdit\" class=\"edit-action-wrap\">\r\n    <button qms-btn (click)=\"saveEditedContent(item)\">{{ LANG.SAVE }}</button>\r\n    <button qms-btn-text (click)=\"item.isEdit = false\" class=\"ml-10\">\r\n      {{ LANG.CANCEL }}\r\n    </button>\r\n  </mat-card-actions>\r\n</div>\r\n",
+                    template: "<div class=\"qms-comment\" *ngFor=\"let item of sourceLog; let i = index\">\r\n  <mat-card-header *ngIf=\"!item.isDelete\">\r\n    <mat-card-subtitle>{{ item.user }} {{ item.date }} </mat-card-subtitle>\r\n  </mat-card-header>\r\n  <mat-card-content>\r\n    <div\r\n      qms-scrollbar\r\n      *ngIf=\"!item.isEdit && !item.isDelete\"\r\n      class=\"content\"\r\n      [ngClass]=\"{ secondary: 0 != i % 2 }\"\r\n      [innerHTML]=\"showContent(item.content)\"\r\n    ></div>\r\n    <div class=\"content delete-action-wrap\" *ngIf=\"item.isDelete\">\r\n      <i>{{ LANG.DELETE_MESSAGE_COMMENT }}</i>\r\n      <button qms-btn-text class=\"btn-action\" (click)=\"regretItem(item)\">\r\n        {{ LANG.REGRET }}\r\n      </button>\r\n    </div>\r\n    <mat-form-field *ngIf=\"item.isEdit && !item.isDelete\" qms-form-textarea>\r\n      <textarea\r\n        qms-scrollbar\r\n        class=\"textarea-comment\"\r\n        matInput\r\n        cdkTextareaAutosize\r\n        cdkAutosizeMinRows=\"1\"\r\n        cdkAutosizeMaxRows=\"5\"\r\n        [(ngModel)]=\"item.editedContent\"\r\n      ></textarea>\r\n    </mat-form-field>\r\n  </mat-card-content>\r\n  <mat-card-actions *ngIf=\"item.isDraft && !item.isEdit && !item.isDelete\">\r\n    <a class=\"btn-action\" (click)=\"editContent(item)\"> {{ LANG.EDIT }} </a>\r\n    <a class=\"btn-action ml-20\" (click)=\"removeItem(item)\">{{ LANG.DELETE }}</a>\r\n  </mat-card-actions>\r\n  <mat-card-actions *ngIf=\"item.isEdit\" class=\"edit-action-wrap\">\r\n    <button qms-btn (click)=\"saveEditedContent(item)\">{{ LANG.SAVE }}</button>\r\n    <button qms-btn-text (click)=\"item.isEdit = false\" class=\"ml-10\">\r\n      {{ LANG.CANCEL }}\r\n    </button>\r\n  </mat-card-actions>\r\n</div>\r\n",
                     host: { 'class': 'qms-comment' },
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     styles: ["@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFWJ0bbck.woff2) format(\"woff2\");unicode-range:U+0460-052f,U+1c80-1c88,U+20b4,U+2de0-2dff,U+a640-a69f,U+fe2e-fe2f}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFUZ0bbck.woff2) format(\"woff2\");unicode-range:U+0400-045f,U+0490-0491,U+04b0-04b1,U+2116}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFWZ0bbck.woff2) format(\"woff2\");unicode-range:U+1f??}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFVp0bbck.woff2) format(\"woff2\");unicode-range:U+0370-03ff}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFWp0bbck.woff2) format(\"woff2\");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01a0-01a1,U+01af-01b0,U+1ea0-1ef9,U+20ab}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFW50bbck.woff2) format(\"woff2\");unicode-range:U+0100-024f,U+0259,U+1e??,U+2020,U+20a0-20ab,U+20ad-20cf,U+2113,U+2c60-2c7f,U+a720-a7ff}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFVZ0b.woff2) format(\"woff2\");unicode-range:U+00??,U+0131,U+0152-0153,U+02bb-02bc,U+02c6,U+02da,U+02dc,U+2000-206f,U+2074,U+20ac,U+2122,U+2191,U+2193,U+2212,U+2215,U+feff,U+fffd}@font-face{font-family:Raleway;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCFPrEHJA.woff2) format(\"woff2\");unicode-range:U+0460-052f,U+1c80-1c88,U+20b4,U+2de0-2dff,U+a640-a69f,U+fe2e-fe2f}@font-face{font-family:Raleway;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCMPrEHJA.woff2) format(\"woff2\");unicode-range:U+0400-045f,U+0490-0491,U+04b0-04b1,U+2116}@font-face{font-family:Raleway;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCHPrEHJA.woff2) format(\"woff2\");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01a0-01a1,U+01af-01b0,U+1ea0-1ef9,U+20ab}@font-face{font-family:Raleway;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCGPrEHJA.woff2) format(\"woff2\");unicode-range:U+0100-024f,U+0259,U+1e??,U+2020,U+20a0-20ab,U+20ad-20cf,U+2113,U+2c60-2c7f,U+a720-a7ff}@font-face{font-family:Raleway;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCIPrE.woff2) format(\"woff2\");unicode-range:U+00??,U+0131,U+0152-0153,U+02bb-02bc,U+02c6,U+02da,U+02dc,U+2000-206f,U+2074,U+20ac,U+2122,U+2191,U+2193,U+2212,U+2215,U+feff,U+fffd}.qms-comment{font-family:Open Sans;margin-bottom:1rem;display:block}.qms-comment .mat-card-subtitle{font-size:.75rem;color:rgba(0,0,0,.6)}.qms-comment .mat-card-content .content{padding:10px 16px;background-color:rgba(0,0,0,.04);display:block;border-radius:4px;font-size:.875rem;max-height:125px;overflow-y:auto}.qms-comment .mat-card-content .content.delete-action-wrap{display:flex;justify-content:space-between;align-items:center}.qms-comment .mat-card-content .content.secondary{background-color:rgba(62,87,183,.12)}.qms-comment .mat-card-content .qms-form{width:100%}.qms-comment .btn-action{color:#1954a9;font-weight:600;font-size:13px;cursor:pointer}.qms-comment .textarea-comment{font-size:.875rem}.ml-10{margin-left:10px}.mt-15{margin-top:15px}.ml-20{margin-left:20px}.edit-action-wrap{display:block;margin-top:-10px}"]
@@ -1809,86 +1809,6 @@
         isLoading: [{ type: i0.Input }]
     };
 
-    var QMSDrawerContentDirective = /** @class */ (function () {
-        function QMSDrawerContentDirective(ele) {
-            this.ele = ele;
-        }
-        QMSDrawerContentDirective.prototype.ngOnInit = function () {
-            if (this.ele) {
-                this.ele.nativeElement.classList.add('qms-drawer-content');
-            }
-        };
-        return QMSDrawerContentDirective;
-    }());
-    QMSDrawerContentDirective.decorators = [
-        { type: i0.Directive, args: [{
-                    selector: '[qms-drawer-content]',
-                },] }
-    ];
-    QMSDrawerContentDirective.ctorParameters = function () { return [
-        { type: i0.ElementRef }
-    ]; };
-
-    var QMSDrawerHeaderActionDirective = /** @class */ (function () {
-        function QMSDrawerHeaderActionDirective(ele) {
-            this.ele = ele;
-        }
-        QMSDrawerHeaderActionDirective.prototype.ngOnInit = function () {
-            if (this.ele) {
-                this.ele.nativeElement.classList.add('qms-drawer-header__action');
-            }
-        };
-        return QMSDrawerHeaderActionDirective;
-    }());
-    QMSDrawerHeaderActionDirective.decorators = [
-        { type: i0.Directive, args: [{
-                    selector: '[qms-drawer-header-action]',
-                },] }
-    ];
-    QMSDrawerHeaderActionDirective.ctorParameters = function () { return [
-        { type: i0.ElementRef }
-    ]; };
-
-    var QMSDrawerHeaderDirective = /** @class */ (function () {
-        function QMSDrawerHeaderDirective(ele) {
-            this.ele = ele;
-        }
-        QMSDrawerHeaderDirective.prototype.ngOnInit = function () {
-            if (this.ele) {
-                this.ele.nativeElement.classList.add('qms-drawer-header');
-            }
-        };
-        return QMSDrawerHeaderDirective;
-    }());
-    QMSDrawerHeaderDirective.decorators = [
-        { type: i0.Directive, args: [{
-                    selector: '[qms-drawer-header]',
-                },] }
-    ];
-    QMSDrawerHeaderDirective.ctorParameters = function () { return [
-        { type: i0.ElementRef }
-    ]; };
-
-    var QMSDrawerDirective = /** @class */ (function () {
-        function QMSDrawerDirective(ele) {
-            this.ele = ele;
-        }
-        QMSDrawerDirective.prototype.ngOnInit = function () {
-            if (this.ele) {
-                this.ele.nativeElement.classList.add('qms-drawer');
-            }
-        };
-        return QMSDrawerDirective;
-    }());
-    QMSDrawerDirective.decorators = [
-        { type: i0.Directive, args: [{
-                    selector: '[qms-drawer]',
-                },] }
-    ];
-    QMSDrawerDirective.ctorParameters = function () { return [
-        { type: i0.ElementRef }
-    ]; };
-
     var QMSTextBlockLine = /** @class */ (function () {
         function QMSTextBlockLine(elRef, renderer) {
             this.elRef = elRef;
@@ -3219,62 +3139,12 @@
         mode: [{ type: i0.Input, args: ['mode',] }]
     };
 
-    var QMSTableExpandDirective = /** @class */ (function () {
-        function QMSTableExpandDirective(_el, renderer) {
-            this._el = _el;
-            this.renderer = renderer;
-            this._el.nativeElement.classList.add('qms-table');
-        }
-        QMSTableExpandDirective.prototype.ngAfterViewChecked = function () {
-            var e_1, _c;
-            var matRows = this._el.nativeElement.querySelectorAll('mat-row');
-            try {
-                for (var _d = __values(Object.entries(matRows)), _e = _d.next(); !_e.done; _e = _d.next()) {
-                    var _f = __read(_e.value, 2), key = _f[0], value = _f[1];
-                    this.renderer.addClass(value, 'qms-row');
-                }
-            }
-            catch (e_1_1) { e_1 = { error: e_1_1 }; }
-            finally {
-                try {
-                    if (_e && !_e.done && (_c = _d.return)) _c.call(_d);
-                }
-                finally { if (e_1) throw e_1.error; }
-            }
-        };
-        return QMSTableExpandDirective;
-    }());
-    QMSTableExpandDirective.decorators = [
-        { type: i0.Directive, args: [{
-                    selector: '[qms-table-expand]',
-                    host: { 'class': 'qms-table-expand' }
-                },] }
-    ];
-    QMSTableExpandDirective.ctorParameters = function () { return [
-        { type: i0.ElementRef },
-        { type: i0.Renderer2 }
-    ]; };
     var QMSTableDirective = /** @class */ (function () {
         function QMSTableDirective(_el, renderer) {
             this._el = _el;
             this.renderer = renderer;
         }
         QMSTableDirective.prototype.ngAfterViewChecked = function () {
-            var e_2, _c;
-            var matRows = this._el.nativeElement.querySelectorAll('mat-row');
-            try {
-                for (var _d = __values(Object.entries(matRows)), _e = _d.next(); !_e.done; _e = _d.next()) {
-                    var _f = __read(_e.value, 2), key = _f[0], value = _f[1];
-                    this.renderer.addClass(value, 'qms-row');
-                }
-            }
-            catch (e_2_1) { e_2 = { error: e_2_1 }; }
-            finally {
-                try {
-                    if (_e && !_e.done && (_c = _d.return)) _c.call(_d);
-                }
-                finally { if (e_2) throw e_2.error; }
-            }
         };
         return QMSTableDirective;
     }());
@@ -3294,21 +3164,20 @@
             this.renderer = renderer;
         }
         QMSTableChildrenDirective.prototype.ngAfterViewChecked = function () {
-            var e_3, _c;
+            var e_1, _c;
             var matRows = this._el.nativeElement.querySelectorAll('mat-row');
             try {
                 for (var _d = __values(Object.entries(matRows)), _e = _d.next(); !_e.done; _e = _d.next()) {
                     var _f = __read(_e.value, 2), key = _f[0], value = _f[1];
                     this.renderer.addClass(value, 'qms-row-children');
-                    this.renderer.addClass(value, 'qms-row-group');
                 }
             }
-            catch (e_3_1) { e_3 = { error: e_3_1 }; }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
             finally {
                 try {
                     if (_e && !_e.done && (_c = _d.return)) _c.call(_d);
                 }
-                finally { if (e_3) throw e_3.error; }
+                finally { if (e_1) throw e_1.error; }
             }
         };
         return QMSTableChildrenDirective;
@@ -3323,18 +3192,6 @@
         { type: i0.ElementRef },
         { type: i0.Renderer2 }
     ]; };
-    var QMSRowExpandDirective = /** @class */ (function () {
-        function QMSRowExpandDirective() {
-        }
-        return QMSRowExpandDirective;
-    }());
-    QMSRowExpandDirective.decorators = [
-        { type: i0.Directive, args: [{
-                    selector: '[qms-row-expand]',
-                    host: { 'class': 'qms-row-expand' }
-                },] }
-    ];
-    QMSRowExpandDirective.ctorParameters = function () { return []; };
     var QMSRowDetailDirective = /** @class */ (function () {
         function QMSRowDetailDirective() {
         }
@@ -3366,7 +3223,7 @@
             this.focusClass = 'focus-grid-style';
             this.onRowExpandEvent = new i0.EventEmitter();
         }
-        Object.defineProperty(CdkDetailRowDirective.prototype, "expended", {
+        Object.defineProperty(CdkDetailRowDirective.prototype, "expanded", {
             get: function () {
                 return this.opened;
             },
@@ -3403,6 +3260,8 @@
         CdkDetailRowDirective.prototype.ngOnChanges = function (changes) {
             this.vcRef.clear();
             if (this.othertRef && this.row) {
+                if (this.opened)
+                    this.vcRef.createEmbeddedView(this.tRef, { $implicit: this.row });
                 this.vcRef.createEmbeddedView(this.othertRef, { $implicit: this.row });
             }
         };
@@ -3412,13 +3271,17 @@
             if (this.othertRef && this.row) {
                 this.vcRef.createEmbeddedView(this.othertRef, { $implicit: this.row });
                 if (((_a = this.row) === null || _a === void 0 ? void 0 : _a.children) && ((_b = this.row) === null || _b === void 0 ? void 0 : _b.children.length) > 0) {
-                    this._el.nativeElement.classList.add('qms-row-group');
+                    this._el.nativeElement.classList.add('expandable-group');
                 }
             }
         };
         CdkDetailRowDirective.prototype.onClick = function () {
             this.toggle();
         };
+        CdkDetailRowDirective.prototype.onKeydownHandler = function (event) {
+            if (event.target == event.currentTarget)
+                this.toggle();
+        };
         CdkDetailRowDirective.prototype.onClickItem = function (event) {
             if (event && event.parentNode && event.parentNode.classList && !event.parentNode.classList.contains(this.focusClass)) {
                 var elements = document.getElementsByClassName(this.focusClass);
@@ -3434,25 +3297,13 @@
             }
         };
         CdkDetailRowDirective.prototype.toggle = function () {
-            if (this.opened) {
-                this.vcRef.clear();
-                if (this.othertRef) {
-                    this.vcRef.createEmbeddedView(this.othertRef, { $implicit: this.row });
-                }
-            }
-            else {
-                this.render();
-            }
-            this.opened = !this.opened;
-            this.onRowExpandEvent.emit(this.opened);
-        };
-        CdkDetailRowDirective.prototype.render = function () {
-            this.vcRef.clear();
-            if (this.tRef && this.row) {
-                this.vcRef.createEmbeddedView(this.tRef, { $implicit: this.row });
-                if (this.othertRef) {
-                    this.vcRef.createEmbeddedView(this.othertRef, { $implicit: this.row });
-                }
+            if (this.tRef) {
+                if (this.opened)
+                    this.vcRef.detach(0);
+                else
+                    this.vcRef.createEmbeddedView(this.tRef, { $implicit: this.row }, 0);
+                this.opened = !this.opened;
+                this.onRowExpandEvent.emit(this.opened);
             }
         };
         return CdkDetailRowDirective;
@@ -3468,15 +3319,97 @@
     ]; };
     CdkDetailRowDirective.propDecorators = {
         onRowExpandEvent: [{ type: i0.Output }],
-        expended: [{ type: i0.HostBinding, args: ['class.expanded',] }],
+        expanded: [{ type: i0.HostBinding, args: ['class.qms-row-expanded',] }],
         cdkDetailRow: [{ type: i0.Input }],
         template: [{ type: i0.Input, args: ['cdkDetailRowTpl',] }],
         otherTemplate: [{ type: i0.Input, args: ['cdkotherTemplate',] }],
         onClick: [{ type: i0.HostListener, args: ['click',] }],
+        onKeydownHandler: [{ type: i0.HostListener, args: ['keydown.enter', ['$event'],] }],
         onClickItem: [{ type: i0.HostListener, args: ['document:click', ['$event.target'],] }],
         onKeydown: [{ type: i0.HostListener, args: ['document:keydown', ['$event.target'],] }]
     };
 
+    var QMSTableRowDirective = /** @class */ (function () {
+        function QMSTableRowDirective(_el, renderer) {
+            this._el = _el;
+            this.renderer = renderer;
+        }
+        QMSTableRowDirective.prototype.ngAfterViewChecked = function () {
+            var e_1, _a;
+            if (!this._rowData.disabled)
+                this.renderer.setAttribute(this._el.nativeElement, 'tabindex', "0");
+            else {
+                var matButtons = this._el.nativeElement.querySelectorAll('button, [tabindex]');
+                try {
+                    for (var _b = __values(Object.entries(matButtons)), _c = _b.next(); !_c.done; _c = _b.next()) {
+                        var _d = __read(_c.value, 2), key = _d[0], value = _d[1];
+                        this.renderer.setAttribute(value, "tabindex", "-1");
+                    }
+                }
+                catch (e_1_1) { e_1 = { error: e_1_1 }; }
+                finally {
+                    try {
+                        if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+                    }
+                    finally { if (e_1) throw e_1.error; }
+                }
+            }
+        };
+        Object.defineProperty(QMSTableRowDirective.prototype, "cdkDetailRow", {
+            set: function (value) {
+                this._rowData = value;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(QMSTableRowDirective.prototype, "disable", {
+            get: function () {
+                return this._rowData.disabled;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(QMSTableRowDirective.prototype, "select", {
+            get: function () {
+                return this._rowData.selected;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(QMSTableRowDirective.prototype, "group", {
+            get: function () {
+                return this._rowData.childen;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(QMSTableRowDirective.prototype, "isDraft", {
+            get: function () {
+                return this._rowData.isDraft;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return QMSTableRowDirective;
+    }());
+    QMSTableRowDirective.decorators = [
+        { type: i0.Directive, args: [{
+                    selector: '[qms-table-row]',
+                    host: { 'class': 'qms-table-row' }
+                },] }
+    ];
+    QMSTableRowDirective.ctorParameters = function () { return [
+        { type: i0.ElementRef },
+        { type: i0.Renderer2 }
+    ]; };
+    QMSTableRowDirective.propDecorators = {
+        cdkDetailRow: [{ type: i0.Input }],
+        disable: [{ type: i0.HostBinding, args: ['class.qms-table-row-disabled',] }],
+        select: [{ type: i0.HostBinding, args: ['class.qms-table-row-selected',] }],
+        group: [{ type: i0.HostBinding, args: ['class.qms-table-row-group',] }],
+        isDraft: [{ type: i0.HostBinding, args: ['class.qms-table-row-draft',] }]
+    };
+
     var ɵ0$2 = { appearance: 'fill' }, ɵ1 = { color: 'none' };
     var QmsAngularModule = /** @class */ (function () {
         function QmsAngularModule() {
@@ -3515,16 +3448,11 @@
                         QMSScrollbarDirective,
                         QMSTextBlockDirective,
                         QMSTextBlockLine,
-                        QMSDrawerDirective,
-                        QMSDrawerHeaderDirective,
-                        QMSDrawerContentDirective,
-                        QMSDrawerHeaderActionDirective,
                         QMSToolTipRendererDirective,
-                        QMSTableExpandDirective,
                         QMSTableDirective,
+                        QMSTableRowDirective,
                         QMSRowDetailDirective,
                         QMSTableChildrenDirective,
-                        QMSRowExpandDirective,
                         CdkDetailRowDirective,
                         QMSCollapseGroupDirective,
                         DateFormatPipe,
@@ -3574,10 +3502,6 @@
                         QMSScrollbarDirective,
                         QMSTextBlockDirective,
                         QMSTextBlockLine,
-                        QMSDrawerDirective,
-                        QMSDrawerHeaderDirective,
-                        QMSDrawerContentDirective,
-                        QMSDrawerHeaderActionDirective,
                         QMSToolTipRendererDirective,
                         DateFormatPipe,
                         QMSChipInputDirective,
@@ -3589,11 +3513,10 @@
                         QMSTooltipImageDirective,
                         SelectDialog,
                         QMSAppBar,
-                        QMSTableExpandDirective,
                         QMSTableDirective,
+                        QMSTableRowDirective,
                         QMSTableChildrenDirective,
                         QMSRowDetailDirective,
-                        QMSRowExpandDirective,
                         CdkDetailRowDirective,
                         QMSCollapseGroupDirective
                     ],
@@ -6151,7 +6074,7 @@
             this.selectedNode = [];
             if (this.treeConfig1.showCheckBox) {
                 index = this.checkedNodeList.findIndex(function (x) {
-                    return x.id === item.id && x.parentId === item.parentId;
+                    return x.id.toLowerCase() === item.id.toLowerCase() && x.parentId.toLowerCase() === item.parentId.toLowerCase();
                 });
             }
             if (index < 0) {
@@ -6161,13 +6084,13 @@
                 if (item.itemType === this.dataType.document) {
                     // document  
                     var isExistInDisabled = this.disabledList2.findIndex(function (x) {
-                        return x.id && x.id.toLowerCase() === item.id.toLowerCase();
+                        return x.id && x.id.toLowerCase() === item.id.toLowerCase() && x.parentId.toLowerCase() === item.parentId.toLowerCase();
                     });
                     if (isExistInDisabled >= 0) {
                         return;
                     }
                     position = this.treeData2.findIndex(function (x) {
-                        return x.childId === item.id;
+                        return x.childId === item.id && x.rootId.toLowerCase() === item.parentId.toLowerCase();
                     });
                     if (position >= 0) {
                         node = this.treeData2[position];
@@ -6256,7 +6179,7 @@
                 }
                 else if (item.itemType === this.dataType.folder) {
                     position = this.treeData2.findIndex(function (x) {
-                        return x.rootId === item.id;
+                        return x.rootId === item.id && x.parentId === item.parentId;
                     });
                     typeId = item.itemType;
                     if (position >= 0) {
@@ -6297,13 +6220,13 @@
                     || item.itemType === this.dataType.checklistCategory
                     || item.itemType === this.dataType.riskFolder) && !this.canOnlySelectItem) {
                     position = this.treeData1.findIndex(function (x) {
-                        return x.rootId === item.id;
+                        return x.rootId.toLowerCase() === item.id.toLowerCase() && x.parentId.toLowerCase() === item.parentId.toLowerCase();
                     });
                     this.selectNodeRecursive(this.treeData1[position], item.itemType);
                 }
                 else if (item.itemType === this.dataType.area) {
                     position = this.treeData1.findIndex(function (x) {
-                        return x.rootId === item.id;
+                        return x.rootId.toLowerCase() === item.id.toLowerCase() && x.parentId.toLowerCase() === item.parentId.toLowerCase();
                     });
                     typeId = item.itemType;
                     if (position >= 0) {
@@ -6343,7 +6266,7 @@
                 else if (item.itemType === this.dataType.deviation ||
                     item.itemType === this.dataType.checklist) {
                     position = this.treeData1.findIndex(function (x) {
-                        return x.childId && x.childId.toLowerCase() === item.id.toLowerCase();
+                        return x.childId && x.childId.toLowerCase() === item.id.toLowerCase() && x.rootId.toLowerCase() === item.parentId.toLowerCase();
                     });
                     if (position >= 0) {
                         node = this.treeData1[position];
@@ -6359,13 +6282,13 @@
                 }
                 else {
                     var isExistInDisabled = this.disabledList.findIndex(function (x) {
-                        return x.id && x.id.toLowerCase() === item.id.toLowerCase();
+                        return x.id && x.id.toLowerCase() === item.id.toLowerCase() && x.parentId.toLowerCase() === item.parentId.toLowerCase();
                     });
                     if (isExistInDisabled >= 0) {
                         return;
                     }
                     position = this.treeData1.findIndex(function (x) {
-                        return x.childId && x.childId.toLowerCase() === item.id.toLowerCase();
+                        return x.childId && x.childId.toLowerCase() === item.id.toLowerCase() && x.rootId.toLowerCase() === item.parentId.toLowerCase();
                     });
                     if (position >= 0) {
                         node = this.treeData1[position];
@@ -6984,7 +6907,7 @@
     RelatedPopupComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'qms-related-popup',
-                    template: "<div id=\"qmslib_related_popup\" class=\"qmslib__related__popup__container\">\r\n  <div id=\"qmslib_related_popup_header\">\r\n    <span mat-icon-button class=\"button__close\" (click)=\"onCloseClick()\">\r\n      <mat-icon mat-icon>close</mat-icon>\r\n    </span>\r\n    <div id=\"qmslib_related_popup_header_001\" mat-dialog-content>\r\n      <span>{{ moduleName | uppercase }}</span>\r\n    </div>\r\n  </div>\r\n\r\n  <div id=\"qmslib_related_popup_search\" class=\"input__field\">\r\n    <input\r\n      type=\"text\"\r\n      placeholder=\"{{ LANG.SEARCH }}\"\r\n      matInput\r\n      [formControl]=\"myControl\"\r\n      [matAutocomplete]=\"auto\"\r\n    />\r\n    <mat-icon>search</mat-icon>\r\n  </div>\r\n\r\n  <div class=\"line__divider\"></div>\r\n\r\n  <mat-autocomplete\r\n    #auto=\"matAutocomplete\"\r\n    class=\"mat-autocomplete_related-viewport\"\r\n    (optionSelected)=\"selectRelated($event.option.value)\"\r\n    [displayWith]=\"displayWhenSelectRelatedOption\"\r\n  >\r\n    <cdk-virtual-scroll-viewport\r\n      qms-scrollbar\r\n      itemSize=\"10\"\r\n      [class.related-viewport]=\"isInputValue\"\r\n    >\r\n      <ng-container *ngFor=\"let type of searchOrder\">\r\n        <div\r\n          class=\"search__module-result\"\r\n          *ngIf=\"canShowSearchOption(type.value)\"\r\n        >\r\n          <span class=\"search__module-title\">{{ getTitle(type.value) }}</span>\r\n          <mat-option\r\n            class=\"search__option\"\r\n            *ngFor=\"let option of getModuleFilteredOptions(type.value)\"\r\n            [value]=\"option\"\r\n            [disabled]=\"option.disabled\"\r\n          >\r\n            <qms-list-item type=\"image-square\">\r\n              <mat-icon\r\n                leading-icon\r\n                type=\"image-square\"\r\n                [svgIcon]=\"getNodeIcon(option)\"\r\n              ></mat-icon>\r\n              <div qms-list-header>\r\n                <div\r\n                  qms-line\r\n                  type=\"caption\"\r\n                  qms-tool-tip=\"{{\r\n                    isEllipsisActive(searchItemResult) ? option.parentName : ''\r\n                  }}\"\r\n                  mode=\"dark\"\r\n                  *ngIf=\"getParentName(option)\"\r\n                >\r\n                  <span #searchItemResult class=\"search__result__parent-name\">\r\n                    {{ option.parentName }}\r\n                  </span>\r\n                </div>\r\n                <div qms-line type=\"subtitle\" class=\"search__option-name\">\r\n                  {{ option.itemName }}\r\n                </div>\r\n                <div\r\n                  class=\"caption\"\r\n                  *ngIf=\"option.breadcumbs && option.breadcumbs.length\"\r\n                >\r\n                  <qms-breadcrumb\r\n                    class=\"breadcrumb-containe\"\r\n                    type=\"table\"\r\n                    numDisplayItem=\"1\"\r\n                    [nodes]=\"option.breadcumbs\"\r\n                  >\r\n                  </qms-breadcrumb>\r\n                </div>\r\n              </div>\r\n              <div qms-line color=\"default-subtitle\" *ngIf=\"getItemId(option)\">\r\n                <span class=\"material-icons-outlined search__description-icon\">\r\n                  local_offer\r\n                </span>\r\n                {{ getItemId(option) }}\r\n              </div>\r\n            </qms-list-item>\r\n          </mat-option>\r\n        </div>\r\n      </ng-container>\r\n    </cdk-virtual-scroll-viewport>\r\n  </mat-autocomplete>\r\n\r\n  <div class=\"row\">\r\n    <div\r\n      class=\"qms-scrollbar qmslib_related_popup_content\"\r\n      [ngClass]=\"{\r\n        panel__content_item: checkedNodeList.length,\r\n        panel__content: !checkedNodeList.length,\r\n        'col-6': splitView,\r\n        'col-12': !splitView\r\n      }\"\r\n    >\r\n      <ng-container *ngIf=\"treeData1.length > 0\">\r\n        <mat-expansion-panel\r\n          hideToggle\r\n          id=\"qmslib_related_popup_common_001\"\r\n          [expanded]=\"isCommonExpanded\"\r\n          (opened)=\"isCommonExpanded = true\"\r\n          (closed)=\"isCommonExpanded = false\"\r\n          class=\"panel-tree\"\r\n        >\r\n          <mat-expansion-panel-header class=\"padding-5\">\r\n            <mat-panel-title *ngIf=\"moduleId === module.documentProcess\">\r\n              {{ LANG.PROCESSES | uppercase }}\r\n            </mat-panel-title>\r\n            <mat-panel-title *ngIf=\"moduleId === module.deviation\">\r\n              {{ LANG.DEVIATION | uppercase }}\r\n            </mat-panel-title>\r\n            <mat-panel-title *ngIf=\"moduleId === module.checklist\">\r\n              {{ LANG.CHECKLIST | uppercase }}\r\n            </mat-panel-title>\r\n            <mat-panel-title *ngIf=\"moduleId === module.risk\">\r\n              {{ LANG.ASSESSMENT | uppercase }}\r\n            </mat-panel-title>\r\n            <button qms-btn-icon class=\"related_popup_toggle-btn\">\r\n              <mat-icon>\r\n                {{\r\n                  isCommonExpanded ? \"keyboard_arrow_up\" : \"keyboard_arrow_down\"\r\n                }}\r\n              </mat-icon>\r\n            </button>\r\n          </mat-expansion-panel-header>\r\n          <div id=\"qmslib_related_popup_common_002\">\r\n            <qms-tree\r\n              [treeData]=\"treeData1\"\r\n              [treeConfig]=\"treeConfig1\"\r\n              [selectedData]=\"selectedData\"\r\n              [selectedRiskData]=\"selectedRiskData\"\r\n              [disabledList]=\"disabledList\"\r\n              (checkBoxEvent)=\"getCommonCheckedNode($event)\"\r\n              (nodeExpandEvent)=\"getChildrenOfFolder($event, dataType.area)\"\r\n              (selectNodeEvent)=\"selectNodeTreeEvent($event)\"\r\n              (getChildNodeSelectOne)=\"getChildNodeSelectOne($event)\"\r\n              [expandOnTitleClick]=\"!splitView\"\r\n              [parentNodeOnClick]=\"parentNodeSelected\"\r\n              (treeControlNodes)=\"selectTreeControlNodeProcess($event)\"\r\n            ></qms-tree>\r\n          </div>\r\n        </mat-expansion-panel>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"treeData2.length > 0\">\r\n        <div\r\n          *ngIf=\"moduleId === module.documentProcess\"\r\n          class=\"line__divider\"\r\n        ></div>\r\n\r\n        <mat-expansion-panel\r\n          hideToggle\r\n          *ngIf=\"moduleId === module.documentProcess\"\r\n          id=\"qmslib_related_popup_document_001\"\r\n          [expanded]=\"isDocumentExpanded\"\r\n          (opened)=\"isDocumentExpanded = true\"\r\n          (closed)=\"isDocumentExpanded = false\"\r\n          class=\"panel-tree\"\r\n        >\r\n          <mat-expansion-panel-header class=\"padding-5\">\r\n            <mat-panel-title>\r\n              {{ LANG.DOCUMENTS | uppercase }}\r\n            </mat-panel-title>\r\n            <button qms-btn-icon class=\"related_popup_toggle-btn\">\r\n              <mat-icon>\r\n                {{\r\n                  isDocumentExpanded\r\n                    ? \"keyboard_arrow_up\"\r\n                    : \"keyboard_arrow_down\"\r\n                }}\r\n              </mat-icon>\r\n            </button>\r\n          </mat-expansion-panel-header>\r\n          <div id=\"qmslib_related_popup_document_002\">\r\n            <qms-tree\r\n              [treeData]=\"treeData2\"\r\n              [treeConfig]=\"treeConfig2\"\r\n              [selectedData]=\"selectedData2\"\r\n              [disabledList]=\"disabledList2\"\r\n              (checkBoxEvent)=\"getDocumentCheckedNode($event)\"\r\n              (nodeExpandEvent)=\"getChildrenOfFolder($event, dataType.folder)\"\r\n              (selectNodeEvent)=\"selectNodeTreeEvent($event)\"\r\n              (getChildNodeSelectOne)=\"getChildNodeSelectOne($event)\"\r\n              [expandOnTitleClick]=\"!splitView\"\r\n              [parentNodeOnClick]=\"parentNodeSelected\"\r\n              (treeControlNodes)=\"selectTreeControlNodeDocument($event)\"\r\n            ></qms-tree>\r\n          </div>\r\n        </mat-expansion-panel>\r\n      </ng-container>\r\n    </div>\r\n    <div\r\n      *ngIf=\"splitView\"\r\n      class=\"\r\n        qms-scrollbar\r\n        qmslib-related-popup-splitview qmslib_related_popup_content\r\n        col-6\r\n      \"\r\n      [ngClass]=\"{\r\n        panel__content_item: checkedNodeList.length,\r\n        panel__content: !checkedNodeList.length\r\n      }\"\r\n    >\r\n      <div class=\"splitview-header\" *ngIf=\"selectedFolder\">\r\n        {{ splitViewTitle }}\r\n      </div>\r\n      <div class=\"expand-node\" *ngFor=\"let node of itemInSplitview\">\r\n        <mat-checkbox\r\n          qms-group-options\r\n          [disabled]=\"node.disabled\"\r\n          color=\"default\"\r\n          [checked]=\"isNodeSelected(node)\"\r\n          (change)=\"toggleSelectItem(node)\"\r\n        ></mat-checkbox>\r\n        <mat-icon\r\n          class=\"mat-icon-rtl-mirror material-icons-outlined\"\r\n          [svgIcon]=\"getNodeIcon(node)\"\r\n        ></mat-icon>\r\n        <span class=\"text-node\">{{ node.itemName }}</span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div *ngIf=\"checkedNodeList.length\" class=\"line__divider\"></div>\r\n\r\n  <div *ngIf=\"checkedNodeList.length\" class=\"panel__item qms-scrollbar\">\r\n    <div class=\"related__item__inline\" *ngFor=\"let item of checkedNodeList\">\r\n      <button\r\n        *ngIf=\"item.itemName\"\r\n        mat-button\r\n        class=\"related__item__content\"\r\n        qms-tool-tip=\"{{\r\n          isEllipsisActive(itemName) ? getItemChipName(item) : ''\r\n        }}\"\r\n        mode=\"dark\"\r\n      >\r\n        <span class=\"related__item__content_name\" #itemName>{{\r\n          getItemChipName(item)\r\n        }}</span>\r\n        <mat-icon\r\n          *ngIf=\"!(treeConfig1?.selectOne || treeConfig2?.selectOne)\"\r\n          (click)=\"removeCheckedNodeList(item)\"\r\n          >cancel</mat-icon\r\n        >\r\n      </button>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"line__divider\"></div>\r\n\r\n  <div class=\"confirm__button__groups\">\r\n    <button\r\n      *ngIf=\"!checkedNodeList.length\"\r\n      qms-btn\r\n      style=\"margin-top: 7px\"\r\n      (click)=\"onAddClick()\"\r\n    >\r\n      {{ LANG.ADD }}\r\n    </button>\r\n    <button\r\n      *ngIf=\"checkedNodeList.length\"\r\n      qms-btn\r\n      style=\"margin-top: 0px\"\r\n      (click)=\"onAddClick()\"\r\n    >\r\n      {{ LANG.ADD }} ({{ checkedNodeList.length }})\r\n    </button>\r\n    <button\r\n      qms-btn-text\r\n      [ngStyle]=\"{ 'margin-top': checkedNodeList.length ? '0px' : '7px' }\"\r\n      (click)=\"onCloseClick()\"\r\n    >\r\n      {{ LANG.CANCEL }}\r\n    </button>\r\n  </div>\r\n</div>\r\n",
+                    template: "<div id=\"qmslib_related_popup\" class=\"qmslib__related__popup__container\">\r\n  <div id=\"qmslib_related_popup_header\">\r\n    <span mat-icon-button class=\"button__close\" (click)=\"onCloseClick()\">\r\n      <mat-icon mat-icon>close</mat-icon>\r\n    </span>\r\n    <div id=\"qmslib_related_popup_header_001\" mat-dialog-content>\r\n      <span>{{ moduleName | uppercase }}</span>\r\n    </div>\r\n  </div>\r\n\r\n  <div id=\"qmslib_related_popup_search\" class=\"input__field\">\r\n    <input\r\n      type=\"text\"\r\n      placeholder=\"{{ LANG.SEARCH }}\"\r\n      matInput\r\n      [formControl]=\"myControl\"\r\n      [matAutocomplete]=\"auto\"\r\n    />\r\n    <mat-icon>search</mat-icon>\r\n  </div>\r\n\r\n  <div class=\"line__divider\"></div>\r\n\r\n  <mat-autocomplete\r\n    #auto=\"matAutocomplete\"\r\n    class=\"mat-autocomplete_related-viewport\"\r\n    (optionSelected)=\"selectRelated($event.option.value)\"\r\n    [displayWith]=\"displayWhenSelectRelatedOption\"\r\n  >\r\n    <cdk-virtual-scroll-viewport\r\n      qms-scrollbar\r\n      itemSize=\"10\"\r\n      [class.related-viewport]=\"isInputValue\"\r\n      *ngIf=\"filteredOptions.length\"\r\n    >\r\n      <ng-container *ngFor=\"let type of searchOrder\">\r\n        <div\r\n          class=\"search__module-result\"\r\n          *ngIf=\"canShowSearchOption(type.value)\"\r\n        >\r\n          <span class=\"search__module-title\">{{ getTitle(type.value) }}</span>\r\n          <mat-option\r\n            class=\"search__option\"\r\n            *ngFor=\"let option of getModuleFilteredOptions(type.value)\"\r\n            [value]=\"option\"\r\n            [disabled]=\"option.disabled\"\r\n          >\r\n            <qms-list-item type=\"image-square\">\r\n              <mat-icon\r\n                leading-icon\r\n                type=\"image-square\"\r\n                [svgIcon]=\"getNodeIcon(option)\"\r\n              ></mat-icon>\r\n              <div qms-list-header>\r\n                <div\r\n                  qms-line\r\n                  type=\"caption\"\r\n                  qms-tool-tip=\"{{\r\n                    isEllipsisActive(searchItemResult) ? option.parentName : ''\r\n                  }}\"\r\n                  mode=\"dark\"\r\n                  *ngIf=\"getParentName(option)\"\r\n                >\r\n                  <span #searchItemResult class=\"search__result__parent-name\">\r\n                    {{ option.parentName }}\r\n                  </span>\r\n                </div>\r\n                <div qms-line type=\"subtitle\" class=\"search__option-name\">\r\n                  {{ option.itemName }}\r\n                </div>\r\n                <div\r\n                  class=\"caption\"\r\n                  *ngIf=\"option.breadcumbs && option.breadcumbs.length\"\r\n                >\r\n                  <qms-breadcrumb\r\n                    class=\"breadcrumb-containe\"\r\n                    type=\"table\"\r\n                    numDisplayItem=\"1\"\r\n                    [nodes]=\"option.breadcumbs\"\r\n                  >\r\n                  </qms-breadcrumb>\r\n                </div>\r\n              </div>\r\n              <div qms-line color=\"default-subtitle\" *ngIf=\"getItemId(option)\">\r\n                <span class=\"material-icons-outlined search__description-icon\">\r\n                  local_offer\r\n                </span>\r\n                {{ getItemId(option) }}\r\n              </div>\r\n            </qms-list-item>\r\n          </mat-option>\r\n        </div>\r\n      </ng-container>\r\n    </cdk-virtual-scroll-viewport>\r\n  </mat-autocomplete>\r\n\r\n  <div class=\"row\">\r\n    <div\r\n      class=\"qms-scrollbar qmslib_related_popup_content\"\r\n      [ngClass]=\"{\r\n        panel__content_item: checkedNodeList.length,\r\n        panel__content: !checkedNodeList.length,\r\n        'col-6': splitView,\r\n        'col-12': !splitView\r\n      }\"\r\n    >\r\n      <ng-container *ngIf=\"treeData1.length > 0\">\r\n        <mat-expansion-panel\r\n          hideToggle\r\n          id=\"qmslib_related_popup_common_001\"\r\n          [expanded]=\"isCommonExpanded\"\r\n          (opened)=\"isCommonExpanded = true\"\r\n          (closed)=\"isCommonExpanded = false\"\r\n          class=\"panel-tree\"\r\n        >\r\n          <mat-expansion-panel-header class=\"padding-5\">\r\n            <mat-panel-title *ngIf=\"moduleId === module.documentProcess\">\r\n              {{ LANG.PROCESSES | uppercase }}\r\n            </mat-panel-title>\r\n            <mat-panel-title *ngIf=\"moduleId === module.deviation\">\r\n              {{ LANG.DEVIATION | uppercase }}\r\n            </mat-panel-title>\r\n            <mat-panel-title *ngIf=\"moduleId === module.checklist\">\r\n              {{ LANG.CHECKLIST | uppercase }}\r\n            </mat-panel-title>\r\n            <mat-panel-title *ngIf=\"moduleId === module.risk\">\r\n              {{ LANG.ASSESSMENT | uppercase }}\r\n            </mat-panel-title>\r\n            <button qms-btn-icon class=\"related_popup_toggle-btn\">\r\n              <mat-icon>\r\n                {{\r\n                  isCommonExpanded ? \"keyboard_arrow_up\" : \"keyboard_arrow_down\"\r\n                }}\r\n              </mat-icon>\r\n            </button>\r\n          </mat-expansion-panel-header>\r\n          <div id=\"qmslib_related_popup_common_002\">\r\n            <qms-tree\r\n              [treeData]=\"treeData1\"\r\n              [treeConfig]=\"treeConfig1\"\r\n              [selectedData]=\"selectedData\"\r\n              [selectedRiskData]=\"selectedRiskData\"\r\n              [disabledList]=\"disabledList\"\r\n              (checkBoxEvent)=\"getCommonCheckedNode($event)\"\r\n              (nodeExpandEvent)=\"getChildrenOfFolder($event, dataType.area)\"\r\n              (selectNodeEvent)=\"selectNodeTreeEvent($event)\"\r\n              (getChildNodeSelectOne)=\"getChildNodeSelectOne($event)\"\r\n              [expandOnTitleClick]=\"!splitView\"\r\n              [parentNodeOnClick]=\"parentNodeSelected\"\r\n              (treeControlNodes)=\"selectTreeControlNodeProcess($event)\"\r\n            ></qms-tree>\r\n          </div>\r\n        </mat-expansion-panel>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"treeData2.length > 0\">\r\n        <div\r\n          *ngIf=\"moduleId === module.documentProcess\"\r\n          class=\"line__divider\"\r\n        ></div>\r\n\r\n        <mat-expansion-panel\r\n          hideToggle\r\n          *ngIf=\"moduleId === module.documentProcess\"\r\n          id=\"qmslib_related_popup_document_001\"\r\n          [expanded]=\"isDocumentExpanded\"\r\n          (opened)=\"isDocumentExpanded = true\"\r\n          (closed)=\"isDocumentExpanded = false\"\r\n          class=\"panel-tree\"\r\n        >\r\n          <mat-expansion-panel-header class=\"padding-5\">\r\n            <mat-panel-title>\r\n              {{ LANG.DOCUMENTS | uppercase }}\r\n            </mat-panel-title>\r\n            <button qms-btn-icon class=\"related_popup_toggle-btn\">\r\n              <mat-icon>\r\n                {{\r\n                  isDocumentExpanded\r\n                    ? \"keyboard_arrow_up\"\r\n                    : \"keyboard_arrow_down\"\r\n                }}\r\n              </mat-icon>\r\n            </button>\r\n          </mat-expansion-panel-header>\r\n          <div id=\"qmslib_related_popup_document_002\">\r\n            <qms-tree\r\n              [treeData]=\"treeData2\"\r\n              [treeConfig]=\"treeConfig2\"\r\n              [selectedData]=\"selectedData2\"\r\n              [disabledList]=\"disabledList2\"\r\n              (checkBoxEvent)=\"getDocumentCheckedNode($event)\"\r\n              (nodeExpandEvent)=\"getChildrenOfFolder($event, dataType.folder)\"\r\n              (selectNodeEvent)=\"selectNodeTreeEvent($event)\"\r\n              (getChildNodeSelectOne)=\"getChildNodeSelectOne($event)\"\r\n              [expandOnTitleClick]=\"!splitView\"\r\n              [parentNodeOnClick]=\"parentNodeSelected\"\r\n              (treeControlNodes)=\"selectTreeControlNodeDocument($event)\"\r\n            ></qms-tree>\r\n          </div>\r\n        </mat-expansion-panel>\r\n      </ng-container>\r\n    </div>\r\n    <div\r\n      *ngIf=\"splitView\"\r\n      class=\"\r\n        qms-scrollbar\r\n        qmslib-related-popup-splitview qmslib_related_popup_content\r\n        col-6\r\n      \"\r\n      [ngClass]=\"{\r\n        panel__content_item: checkedNodeList.length,\r\n        panel__content: !checkedNodeList.length\r\n      }\"\r\n    >\r\n      <div class=\"splitview-header\" *ngIf=\"selectedFolder\">\r\n        {{ splitViewTitle }}\r\n      </div>\r\n      <div class=\"expand-node\" *ngFor=\"let node of itemInSplitview\">\r\n        <mat-checkbox\r\n          qms-group-options\r\n          [disabled]=\"node.disabled\"\r\n          color=\"default\"\r\n          [checked]=\"isNodeSelected(node)\"\r\n          (change)=\"toggleSelectItem(node)\"\r\n        ></mat-checkbox>\r\n        <mat-icon\r\n          class=\"mat-icon-rtl-mirror material-icons-outlined\"\r\n          [svgIcon]=\"getNodeIcon(node)\"\r\n        ></mat-icon>\r\n        <span class=\"text-node\">{{ node.itemName }}</span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div *ngIf=\"checkedNodeList.length\" class=\"line__divider\"></div>\r\n\r\n  <div *ngIf=\"checkedNodeList.length\" class=\"panel__item qms-scrollbar\">\r\n    <div class=\"related__item__inline\" *ngFor=\"let item of checkedNodeList\">\r\n      <button\r\n        *ngIf=\"item.itemName\"\r\n        mat-button\r\n        class=\"related__item__content\"\r\n        qms-tool-tip=\"{{\r\n          isEllipsisActive(itemName) ? getItemChipName(item) : ''\r\n        }}\"\r\n        mode=\"dark\"\r\n      >\r\n        <span class=\"related__item__content_name\" #itemName>{{\r\n          getItemChipName(item)\r\n        }}</span>\r\n        <mat-icon\r\n          *ngIf=\"!(treeConfig1?.selectOne || treeConfig2?.selectOne)\"\r\n          (click)=\"removeCheckedNodeList(item)\"\r\n          >cancel</mat-icon\r\n        >\r\n      </button>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"line__divider\"></div>\r\n\r\n  <div class=\"confirm__button__groups\">\r\n    <button\r\n      *ngIf=\"!checkedNodeList.length\"\r\n      qms-btn\r\n      style=\"margin-top: 7px\"\r\n      (click)=\"onAddClick()\"\r\n    >\r\n      {{ LANG.ADD }}\r\n    </button>\r\n    <button\r\n      *ngIf=\"checkedNodeList.length\"\r\n      qms-btn\r\n      style=\"margin-top: 0px\"\r\n      (click)=\"onAddClick()\"\r\n    >\r\n      {{ LANG.ADD }} ({{ checkedNodeList.length }})\r\n    </button>\r\n    <button\r\n      qms-btn-text\r\n      [ngStyle]=\"{ 'margin-top': checkedNodeList.length ? '0px' : '7px' }\"\r\n      (click)=\"onCloseClick()\"\r\n    >\r\n      {{ LANG.CANCEL }}\r\n    </button>\r\n  </div>\r\n</div>\r\n",
                     encapsulation: i0.ViewEncapsulation.None,
                     styles: [".qms-scrollbar::-webkit-scrollbar{width:12px}.qms-scrollbar::-webkit-scrollbar-track{background:rgba(0,0,0,.12);background-clip:content-box}.qms-scrollbar::-webkit-scrollbar-thumb{background:rgba(0,0,0,.38);border-radius:20px;width:4px;border:4px solid transparent;background-clip:content-box}.qms-scrollbar::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.5);background-clip:content-box;border:4px solid transparent}.qms-scrollbar.none-scroll-bg::-webkit-scrollbar-track{background:transparent;background-clip:content-box}.qms__popup .button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qms__danger button{border:none;color:#fff;padding:0;text-align:center;text-decoration:none;display:inline-block;cursor:pointer;height:20px;width:20px;font-family:Open Sans;font-size:12px;font-weight:600;font-style:normal;line-height:16px}.qms__danger .red{background-color:#9e360f;margin-left:10px}.qms__danger .yellow{background-color:#e4cf53;margin-left:10px;color:#323232}.qms__danger .green{background-color:#00804c;margin-left:10px}.confirm__button__groups{margin-top:11px}.confirm__button__groups button{min-height:36px;width:auto;font-family:Open Sans;font-weight:500;font-size:14px;letter-spacing:1px;line-height:16px;padding-left:15px;padding-right:15px;margin-right:5px;float:right}.confirm__button__groups .confirm{background:#f8f9f9}.confirm__button__groups .confirm:hover{background:#001983;color:#fff}.confirm__button__groups .confirm:disabled{cursor:not-allowed}.confirm__button__groups .cancel{background:#f8f9f9}.confirm__button__groups .cancel:hover{background:#001983;color:#fff}.qmslib__related__popup__container .input__field{display:flex;align-items:center}.qmslib__related__popup__container .input__field input{width:100%;padding:10px;outline:none;border:none;background:#eee}.qmslib__related__popup__container .input__field .mat-icon{margin-left:-30px;cursor:pointer;vertical-align:middle}.qmslib__related__popup__container .line__divider{border-bottom:1px solid #ccc;height:1px;margin-top:10px;min-width:300px;max-width:100%}.qmslib__related__popup__container .button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qmslib__related__popup__container .panel__content{height:450px;overflow:auto;margin-top:12px}.qmslib__related__popup__container .panel__content_item{height:350px;overflow:auto;margin-top:12px}.qmslib__related__popup__container .panel-tree .mat-expansion-panel-body{padding:0 12px 12px}.qmslib__related__popup__container .mat-expansion-panel-header{height:30px;font-size:12px;letter-spacing:1px;font-family:Raleway;font-weight:600;padding:0}.qmslib__related__popup__container .mat-expansion-panel-header .mat-expansion-panel-header-title{align-items:center;margin-left:12px}.qmslib__related__popup__container .mat-expansion-panel-header .related_popup_toggle-btn{width:1.5rem;height:1.5rem;line-height:1.5rem}.qmslib__related__popup__container .mat-expansion-panel:not([class*=mat-elevation-z]){box-shadow:none}.qmslib__related__popup__container .panel__item{height:100px;margin-top:12px;overflow-x:hidden;overflow-y:auto;padding-right:5px;width:100%;max-width:100%;display:flex;flex-wrap:wrap;align-content:flex-start}.qmslib__related__popup__container .panel__item .related__item__inline{max-width:100%}.qmslib__related__popup__container .panel__item .related__item__content{height:32px;line-height:32px;background-color:#e5e5e5;max-width:100%;margin-bottom:5px;margin-left:2.5px;margin-right:2.5px}.qmslib__related__popup__container .panel__item .related__item__content .mat-icon{color:#8e8e8e;font-size:24px}.qmslib__related__popup__container .panel__item .related__item__content span.related__item__content_name{display:inline-block;min-width:calc(100% - 13px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:278px}.qmslib__related__popup__container .qmslib-related-popup-splitview{background-color:#fff;border-left:1px solid #ccc;height:450px;overflow-y:auto;margin-top:12px}.qmslib__related__popup__container .qmslib-related-popup-splitview.panel__content{height:450px;overflow:auto;margin-top:12px}.qmslib__related__popup__container .qmslib-related-popup-splitview.panel__content_item{height:350px;overflow:auto;margin-top:12px}.qmslib__related__popup__container .qmslib-related-popup-splitview .splitview-header{height:30px;font-size:12px;letter-spacing:1px;font-family:RALEWAY;font-weight:600;display:flex;align-items:center}.qmslib__related__popup__container .qmslib-related-popup-splitview .mat-checkbox.qms-group-options{padding:0}.qmslib__related__popup__container .qmslib-related-popup-splitview .mat-checkbox.qms-group-options .mat-checkbox-inner-container{margin-right:11px}.qmslib__related__popup__container .qmslib-related-popup-splitview .mat-checkbox.qms-group-options.mat-checkbox-checked{background:transparent!important}.qmslib__related__popup__container .qmslib-related-popup-splitview .expand-node{margin-left:8px;display:flex;align-items:center;min-height:40px}.qmslib__related__popup__container .qmslib-related-popup-splitview .expand-node .mat-icon{color:rgba(0,0,0,.6);margin-right:17px;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content}.qmslib__related__popup__container .qmslib-related-popup-splitview .expand-node .mat-icon svg{display:block;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content}cdk-virtual-scroll-viewport{overflow-x:hidden}cdk-virtual-scroll-viewport .search__module-result{margin:1.5rem;padding:0 0 .5rem}cdk-virtual-scroll-viewport .search__module-result .search__module-title{font-size:14px;font-weight:600}cdk-virtual-scroll-viewport .search__module-result .search__option{height:auto;line-height:normal;padding:8px 0;border-bottom:1px solid #e0e0e0}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item.mat-2-line.image-item{height:auto}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content{margin:0;border-bottom:none}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .wrap-image.image-square{width:2.5rem;height:100%;background:transparent;align-self:center;margin-right:0}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .wrap-image.image-square img{width:24px;height:24px}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .material-icons-outlined.leading-icon,cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content mat-icon.leading-icon{padding:4px 0 4px 4px}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .subtitle{font-weight:400}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .caption{overflow:hidden;line-height:normal;white-space:normal;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;padding:0;margin:0}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .caption span.search__result__parent-name{display:inline-block;width:auto;width:calc(100% - 13px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .default-subtitle{color:rgba(0,0,0,.38)}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .search__description-icon{margin-right:0;width:12px;height:12px;font-size:12px}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .qms-list-text{border-bottom:none}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .breadcrumb-containe .qms-breadcrumb-item .mat-icon{font-size:16px!important;padding-bottom:1px}cdk-virtual-scroll-viewport .search__module-result .mat-option[aria-disabled=true] .breadcrumb-containe .qms-breadcrumb-item-text,cdk-virtual-scroll-viewport .search__module-result .mat-option[aria-disabled=true] .breadcrumb-containe .qms-breadcrumb-item .mat-icon,cdk-virtual-scroll-viewport .search__module-result .mat-option[aria-disabled=true] .subtitle{color:rgba(0,0,0,.38)}cdk-virtual-scroll-viewport .search__module-result svg{display:block}#qmslib_related_popup_header_001{margin-bottom:20px;padding:0;font-weight:600;font-family:Raleway}.padding-5{padding:5px}.mat-autocomplete_related-viewport{height:100%;max-height:100%!important}.mat-autocomplete_related-viewport .cdk-virtual-scroll-content-wrapper{width:100%}.mat-autocomplete_related-viewport .related-viewport{min-height:300px}"]
                 },] }
@@ -16800,7 +16723,7 @@
         { type: i0.Component, args: [{
                     selector: 'app-qmsck-imagemap',
                     template: "<div id=\"qmsckeditor-imagemap\" class=\"qmsckeditor qmsckeditor__imagemap__container\">\r\n    <div id=\"qmsckeditor-imagemap-header\">\r\n        <span id=\"qmsckeditor-imagemap-header_001\" mat-icon-button class=\"qmsckeditor button__close\"\r\n            (click)=\"onCloseDialog()\">\r\n            <mat-icon>close</mat-icon>\r\n        </span>\r\n        <div id=\"qmsckeditor-imagemap-header_002\" mat-dialog-content>\r\n            <h2 id=\"qmsckeditor-imagemap_002_001\">\r\n                {{ LANG.QMSCKEDITOR.IMAGE_MAP_PROPERTIES }}\r\n            </h2>\r\n        </div>\r\n    </div>\r\n    <div id=\"qmsckeditor-imagemap-content\">\r\n        <div id=\"qmsckeditor-imagemap-content_001\" class=\"col-12 mt-1 pl-2 pr-2\">\r\n            <mat-expansion-panel id=\"qmsckeditor-imagemap-panel\" [expanded]=\"true\" (opened)=\"(true)\" (closed)=\"(false)\">\r\n                <div id=\"qmsckeditor-imagemap-panel_001\">\r\n                    <div id=\"qmsckeditor-imagemap-panel_001_001\" class=\"qmsckeditor__imagemap__information\">\r\n                        <form [formGroup]=\"imageMapFormGroup\">\r\n                            <div class=\"row\">\r\n                                <div class=\"col-9\">\r\n                                    <mat-button-toggle-group [(ngModel)]=\"selectedMode\" formControlName=\"modeList\"\r\n                                        (change)=\"onModeChange($event)\">\r\n                                        <mat-button-toggle *ngFor=\"let mode of modes\" [value]=\"mode.id\"\r\n                                            [matTooltip]=\"mode.name\">\r\n                                            <mat-icon color=\"red\" [svgIcon]=\"mode.icon\" aria-hidden=\"true\">\r\n                                            </mat-icon>\r\n                                        </mat-button-toggle>\r\n                                    </mat-button-toggle-group>\r\n                                    <span style=\"margin-left: 15px;\" #myStatus></span>\r\n                                </div>\r\n                                <div class=\"col-3\">\r\n                                    <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-3 pb-1\">\r\n                                        <mat-label>{{ LANG.QMSCKEDITOR.ZOOM }}</mat-label>\r\n                                        <mat-select [(ngModel)]=\"selectedZoom\" formControlName=\"zoomList\"\r\n                                            (ngModelChange)=\"onZoomChange()\" disableOptionCentering>\r\n                                            <mat-option *ngFor=\"let zoomType of zoomTypes\" [value]=\"zoomType.id\">\r\n                                                {{ zoomType.name }}\r\n                                            </mat-option>\r\n                                        </mat-select>\r\n                                    </mat-form-field>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"row\" [ngClass]=\"{'hidden': !showImageMapInformation}\">\r\n                                <div class=\"col-3\">\r\n                                    <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-3 pb-1\">\r\n                                        <mat-label>{{ LANG.QMSCKEDITOR.LINK_TYPE }}</mat-label>\r\n                                        <mat-select [(ngModel)]=\"selectedLinkType\" formControlName=\"linkTypeList\"\r\n                                            (ngModelChange)=\"onLinkTypeChange()\" disableOptionCentering>\r\n                                            <mat-option *ngFor=\"let link of linkTypes\" [value]=\"link.id\">\r\n                                                {{ link.name }}\r\n                                            </mat-option>\r\n                                        </mat-select>\r\n                                    </mat-form-field>\r\n                                </div>\r\n                                <div class=\"col-3\" *ngIf=\"selectedLinkType === 0\">\r\n                                    <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-3 pb-1\">\r\n                                        <mat-label>{{ LANG.QMSCKEDITOR.TARGET }}</mat-label>\r\n                                        <mat-select [(ngModel)]=\"selectedTarget\" formControlName=\"targetList\"\r\n                                            (ngModelChange)=\"onTargetChange()\" disableOptionCentering>\r\n                                            <mat-option *ngFor=\"let target of targets\" [value]=\"target.id\">\r\n                                                {{ target.name }}\r\n                                            </mat-option>\r\n                                        </mat-select>\r\n                                    </mat-form-field>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"row\" [ngClass]=\"{'hidden': !showImageMapInformation}\"\r\n                                *ngIf=\"selectedLinkType === 1\">\r\n                                <div class=\"col-3\">\r\n                                    <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-\">\r\n                                        <mat-label>{{ LANG.QMSCKEDITOR.ANCHOR_BY_NAME }}</mat-label>\r\n                                        <mat-select [(ngModel)]=\"anchorText\" formControlName=\"anchorTextList\"\r\n                                            (ngModelChange)=\"onAnchorTextChange()\">\r\n                                            <mat-option *ngFor=\"let editorAnchor of editorAnchors\"\r\n                                                [value]=\"editorAnchor.anchorValue\" disableOptionCentering>\r\n                                                {{ editorAnchor.viewValue }}\r\n                                            </mat-option>\r\n                                        </mat-select>\r\n                                    </mat-form-field>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"row\" [ngClass]=\"{'hidden': !showImageMapInformation}\"\r\n                                *ngIf=\"selectedLinkType === 0\">\r\n                                <div class=\"col-3\">\r\n                                    <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-3 pb-1\">\r\n                                        <mat-label>{{ LANG.QMSCKEDITOR.PROTOCOL }}</mat-label>\r\n                                        <mat-select [(ngModel)]=\"selectedProtocol\" formControlName=\"protocolList\"\r\n                                            (ngModelChange)=\"onProtocolChange()\" disableOptionCentering>\r\n                                            <mat-option *ngFor=\"let protocol of protocols\" [value]=\"protocol.id\">\r\n                                                {{ protocol.name }}\r\n                                            </mat-option>\r\n                                        </mat-select>\r\n                                    </mat-form-field>\r\n                                </div>\r\n                                <div class=\"col-5\">\r\n                                    <mat-form-field appearance=\"fill\" class=\"col-12 pl-3 pr-3 pb-1\">\r\n                                        <mat-label>{{ LANG.QMSCKEDITOR.LINK_URL }}</mat-label>\r\n                                        <input matInput [(ngModel)]=\"url\" name=\"url\" formControlName=\"url\"\r\n                                            (ngModelChange)=\"onUrlChange()\" (keyup)=\"onUrlKeyup()\" />\r\n                                        <mat-error *ngIf=\"imageMapFormGroup.get('url').hasError('required')\">{{\r\n                                            LANG.QMSCKEDITOR.REQUIRED_URL }}\r\n                                        </mat-error>\r\n                                        <mat-error *ngIf=\"imageMapFormGroup.get('url').hasError('invalidURL')\">{{\r\n                                            LANG.QMSCKEDITOR.INVALID_URL }}</mat-error>\r\n                                    </mat-form-field>\r\n                                </div>\r\n                                <div class=\"col-4\">\r\n                                    <div class=\"row button__groups\">\r\n                                        <div class=\"col-6\">\r\n                                            <button class=\"save\" mat-stroked-button (click)=\"attachment()\">\r\n                                                {{ LANG.QMSCKEDITOR.ATTACHMENT }}\r\n                                            </button>\r\n                                        </div>\r\n                                        <div class=\"col-6\">\r\n                                            <button class=\"save\" mat-stroked-button (click)=\"eHandbook(false, false)\">\r\n                                                {{ LANG.QMSCKEDITOR.HANDBOOK }}\r\n                                            </button>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </form>\r\n                    </div>\r\n                    <div id=\"qmsckeditor-imagemap-panel_001_002\" class=\"qmsckeditor__imagemap__map\">\r\n                        <img #myImage [src]=\"imageMapData.imageUrl\">\r\n                        <mat-spinner diameter=\"40\" mode=\"indeterminate\" *ngIf=\"isImageLoading\"></mat-spinner>\r\n                    </div>\r\n                    <div id=\"qmsckeditor-imagemap-panel_001_003\" class=\"qmsckeditor button__groups row mr-0 ml-0 mt-4\">\r\n                        <div class=\"col-4 pr-0\">\r\n                            <button class=\"save\" mat-flat-button (click)=\"removeMap()\">\r\n                                {{ LANG.QMSCKEDITOR.REMOVE_MAP }}\r\n                            </button>\r\n                        </div>\r\n                        <div class=\"col-4 pr-0\">\r\n                            <button class=\"save\" mat-flat-button (click)=\"save()\">\r\n                                {{ LANG.QMSCKEDITOR.SAVE }}\r\n                            </button>\r\n                        </div>\r\n                        <div class=\"col-4 pl-0\">\r\n                            <button class=\"cancel\" mat-flat-button (click)=\"cancel()\">\r\n                                {{ LANG.QMSCKEDITOR.CANCEL }}\r\n                            </button>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </mat-expansion-panel>\r\n        </div>\r\n    </div>\r\n</div>\r\n",
-                    styles: [".mt5{margin-top:5px!important}.mt10{margin-top:10px!important}.mt7{margin-top:7px!important}.mt15{margin-top:15px!important}.mt20{margin-top:20px!important}.mt30{margin-top:30px!important}.mt40{margin-top:40px!important}.ml2{margin-left:2px!important}.ml3{margin-left:3px!important}.ml5{margin-left:5px!important}.ml15{margin-left:15px!important}.ml10{margin-left:10px!important}.ml12{margin-left:12px!important}.ml16{margin-left:16px!important}.ml-auto{margin-left:auto!important}.ml-25{margin-left:-25px!important}.mr5{margin-right:5px!important}.mr12{margin-right:12px!important}.mr15{margin-right:15px!important}.mb5{margin-bottom:5px!important}.mb10{margin-bottom:10px!important}.mb15{margin-bottom:15px!important}.pt8{padding-top:8px!important}.pt10{padding-top:10px!important}.pt15{padding-top:15px!important}.pt16{padding-top:16px!important}.pl15{padding-left:15px!important}.pl0{padding-left:0!important}.pr0{padding-right:0!important}.pr15{padding-right:15px!important}.fs12{font-size:12px}.fs14{font-size:14px!important}.fs16{font-size:16px!important}.fs22{font-size:22px!important}.fw500{font-weight:500!important}.italic-text{font-style:italic}.display-flex{display:flex}.qmsckeditor{font-family:Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:400}.qmsckeditor h2{font-size:20px;font-weight:400}.qmsckeditor .mat-dialog-content{padding:0}.qmsckeditor .mat-icon{color:#909497}.qmsckeditor__fullscreen{position:fixed;top:0;left:0;right:0;bottom:0;background:#fff;overflow-y:auto;max-height:100vh;overflow-x:hidden}.qmsckeditor__cursor{cursor:pointer}.qmsckeditor__notallowed{cursor:not-allowed}.qmsckeditor.button__close,.qmsckeditor.button__done{float:right;top:-24px;right:-24px;cursor:pointer}.qmsckeditor.button__done{margin-right:20px}.qmsckeditor.button__done .mat-icon{color:#28a745;font-weight:700}.qmsckeditor.button__groups button{min-height:40px;width:100%;border-radius:4px;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px}.qmsckeditor.button__groups .save{background:#f8f9f9}.qmsckeditor.button__groups .save:hover{background:#e5e7e9}.qmsckeditor.button__groups .save:disabled{cursor:not-allowed}.qmsckeditor.button__groups .cancel{background:#f8f9f9}.qmsckeditor.button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.button__groups .cancel:disabled{cursor:not-allowed}.qmsckeditor.button__groups .delete{background:#f8f9f9}.qmsckeditor.button__groups .delete:hover{background:#e5e7e9}.qmsckeditor.button__groups .delete:disabled{cursor:not-allowed}.qmsckeditor.confirm__button__groups button{min-height:36px;border-radius:4px;width:auto;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px;padding-left:15px;padding-right:15px}.qmsckeditor.confirm__button__groups .confirm{background:#f8f9f9}.qmsckeditor.confirm__button__groups .confirm:hover{background:#e5e7e9}.qmsckeditor.confirm__button__groups .cancel{background:#f8f9f9}.qmsckeditor.confirm__button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.template-content.height{min-height:420px;max-height:520px;overflow:auto}.qmsckeditor.template-content.title{margin-left:-9px}.qmsckeditor.link__content.height{min-height:400px;max-height:520px}.qmsckeditor.card{margin-bottom:10px;min-height:60px;box-shadow:none;border:1px solid #e5e5e5}.qmsckeditor.card .title{font-weight:700}.qmsckeditor.card .content{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.qmsckeditor.card .material-icons{font-size:20px}.qmsckeditor.tooltip-content.height{min-height:400px;max-height:472px;overflow:auto}.qmsckeditor.save__as__template.height{height:125px}.ck-content .ck-horizontal-line,.ck-content .page-break{width:100%}.ck-content hr{background:#ccc}::ng-deep .qmsckeditor__imagemap__container .mat-form-field{width:100%}::ng-deep .qmsckeditor__imagemap__container .qmsckeditor__imagemap__information{position:relative}::ng-deep .qmsckeditor__imagemap__container .qmsckeditor__imagemap__map{overflow:auto;width:800px;min-height:371px;position:relative;max-height:460px;display:flex;justify-content:center;align-items:flex-start}::ng-deep .qmsckeditor__imagemap__container .mat-button-toggle-checked{border:1px solid #000!important}::ng-deep .qmsckeditor__imagemap__container .hidden{visibility:hidden}"]
+                    styles: [".mt5{margin-top:5px!important}.mt10{margin-top:10px!important}.mt7{margin-top:7px!important}.mt15{margin-top:15px!important}.mt20{margin-top:20px!important}.mt30{margin-top:30px!important}.mt40{margin-top:40px!important}.ml2{margin-left:2px!important}.ml3{margin-left:3px!important}.ml5{margin-left:5px!important}.ml15{margin-left:15px!important}.ml10{margin-left:10px!important}.ml12{margin-left:12px!important}.ml16{margin-left:16px!important}.ml-auto{margin-left:auto!important}.ml-25{margin-left:-25px!important}.mr5{margin-right:5px!important}.mr12{margin-right:12px!important}.mr15{margin-right:15px!important}.mb5{margin-bottom:5px!important}.mb10{margin-bottom:10px!important}.mb15{margin-bottom:15px!important}.pt8{padding-top:8px!important}.pt10{padding-top:10px!important}.pt15{padding-top:15px!important}.pt16{padding-top:16px!important}.pl15{padding-left:15px!important}.pl0{padding-left:0!important}.pr0{padding-right:0!important}.pr15{padding-right:15px!important}.fs12{font-size:12px}.fs14{font-size:14px!important}.fs16{font-size:16px!important}.fs22{font-size:22px!important}.fw500{font-weight:500!important}.italic-text{font-style:italic}.display-flex{display:flex}.qmsckeditor{font-family:Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:400}.qmsckeditor h2{font-size:20px;font-weight:400}.qmsckeditor .mat-dialog-content{padding:0}.qmsckeditor .mat-icon{color:#909497}.qmsckeditor__fullscreen{position:fixed;top:0;left:0;right:0;bottom:0;background:#fff;overflow-y:auto;max-height:100vh;overflow-x:hidden}.qmsckeditor__cursor{cursor:pointer}.qmsckeditor__notallowed{cursor:not-allowed}.qmsckeditor.button__close,.qmsckeditor.button__done{float:right;top:-24px;right:-24px;cursor:pointer}.qmsckeditor.button__done{margin-right:20px}.qmsckeditor.button__done .mat-icon{color:#28a745;font-weight:700}.qmsckeditor.button__groups button{min-height:40px;width:100%;border-radius:4px;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px}.qmsckeditor.button__groups .save{background:#f8f9f9}.qmsckeditor.button__groups .save:hover{background:#e5e7e9}.qmsckeditor.button__groups .save:disabled{cursor:not-allowed}.qmsckeditor.button__groups .cancel{background:#f8f9f9}.qmsckeditor.button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.button__groups .cancel:disabled{cursor:not-allowed}.qmsckeditor.button__groups .delete{background:#f8f9f9}.qmsckeditor.button__groups .delete:hover{background:#e5e7e9}.qmsckeditor.button__groups .delete:disabled{cursor:not-allowed}.qmsckeditor.confirm__button__groups button{min-height:36px;border-radius:4px;width:auto;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px;padding-left:15px;padding-right:15px}.qmsckeditor.confirm__button__groups .confirm{background:#f8f9f9}.qmsckeditor.confirm__button__groups .confirm:hover{background:#e5e7e9}.qmsckeditor.confirm__button__groups .cancel{background:#f8f9f9}.qmsckeditor.confirm__button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.template-content.height{min-height:420px;max-height:520px;overflow:auto}.qmsckeditor.template-content.title{margin-left:-9px}.qmsckeditor.link__content.height{min-height:400px;max-height:520px}.qmsckeditor.card{margin-bottom:10px;min-height:60px;box-shadow:none;border:1px solid #e5e5e5}.qmsckeditor.card .title{font-weight:700}.qmsckeditor.card .content{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.qmsckeditor.card .material-icons{font-size:20px}.qmsckeditor.tooltip-content.height{min-height:400px;max-height:472px;overflow:auto}.qmsckeditor.save__as__template.height{height:125px}.ck-content .ck-horizontal-line,.ck-content .page-break{width:100%}.ck-content hr{background:#ccc}::ng-deep .qmsckeditor__imagemap__container .mat-form-field{width:100%}::ng-deep .qmsckeditor__imagemap__container .qmsckeditor__imagemap__information{position:relative}::ng-deep .qmsckeditor__imagemap__container .qmsckeditor__imagemap__map{overflow:auto;width:800px;min-height:371px;position:relative;max-height:460px;display:flex;align-items:flex-start}::ng-deep .qmsckeditor__imagemap__container .mat-button-toggle-checked{border:1px solid #000!important}::ng-deep .qmsckeditor__imagemap__container .hidden{visibility:hidden}"]
                 },] }
     ];
     QMSCKEditorImageMapComponent.ctorParameters = function () { return [
@@ -17508,7 +17431,7 @@
                     ],
                     encapsulation: i0.ViewEncapsulation.None,
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    styles: [".mt5{margin-top:5px!important}.mt10{margin-top:10px!important}.mt7{margin-top:7px!important}.mt15{margin-top:15px!important}.mt20{margin-top:20px!important}.mt30{margin-top:30px!important}.mt40{margin-top:40px!important}.ml2{margin-left:2px!important}.ml3{margin-left:3px!important}.ml5{margin-left:5px!important}.ml15{margin-left:15px!important}.ml10{margin-left:10px!important}.ml12{margin-left:12px!important}.ml16{margin-left:16px!important}.ml-auto{margin-left:auto!important}.ml-25{margin-left:-25px!important}.mr5{margin-right:5px!important}.mr12{margin-right:12px!important}.mr15{margin-right:15px!important}.mb5{margin-bottom:5px!important}.mb10{margin-bottom:10px!important}.mb15{margin-bottom:15px!important}.pt8{padding-top:8px!important}.pt10{padding-top:10px!important}.pt15{padding-top:15px!important}.pt16{padding-top:16px!important}.pl15{padding-left:15px!important}.pl0{padding-left:0!important}.pr0{padding-right:0!important}.pr15{padding-right:15px!important}.fs12{font-size:12px}.fs14{font-size:14px!important}.fs16{font-size:16px!important}.fs22{font-size:22px!important}.fw500{font-weight:500!important}.italic-text{font-style:italic}.display-flex{display:flex}.qmsckeditor{font-family:Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:400}.qmsckeditor h2{font-size:20px;font-weight:400}.qmsckeditor .mat-dialog-content{padding:0}.qmsckeditor .mat-icon{color:#909497}.qmsckeditor__fullscreen{overflow-y:auto;max-height:100vh;overflow-x:hidden}.qmsckeditor__cursor{cursor:pointer}.qmsckeditor__notallowed{cursor:not-allowed}.qmsckeditor.button__close,.qmsckeditor.button__done{float:right;top:-24px;right:-24px;cursor:pointer}.qmsckeditor.button__done{margin-right:20px}.qmsckeditor.button__done .mat-icon{color:#28a745;font-weight:700}.qmsckeditor.button__groups button{min-height:40px;width:100%;border-radius:4px;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px}.qmsckeditor.button__groups .save{background:#f8f9f9}.qmsckeditor.button__groups .save:hover{background:#e5e7e9}.qmsckeditor.button__groups .save:disabled{cursor:not-allowed}.qmsckeditor.button__groups .cancel{background:#f8f9f9}.qmsckeditor.button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.button__groups .cancel:disabled{cursor:not-allowed}.qmsckeditor.button__groups .delete{background:#f8f9f9}.qmsckeditor.button__groups .delete:hover{background:#e5e7e9}.qmsckeditor.button__groups .delete:disabled{cursor:not-allowed}.qmsckeditor.confirm__button__groups button{min-height:36px;border-radius:4px;width:auto;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px;padding-left:15px;padding-right:15px}.qmsckeditor.confirm__button__groups .confirm{background:#f8f9f9}.qmsckeditor.confirm__button__groups .confirm:hover{background:#e5e7e9}.qmsckeditor.confirm__button__groups .cancel{background:#f8f9f9}.qmsckeditor.confirm__button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.template-content.height{min-height:420px;max-height:520px;overflow:auto}.qmsckeditor.template-content.title{margin-left:-9px}.qmsckeditor.link__content.height{min-height:400px;max-height:520px}.qmsckeditor.card{margin-bottom:10px;min-height:60px;box-shadow:none;border:1px solid #e5e5e5}.qmsckeditor.card .title{font-weight:700}.qmsckeditor.card .content{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.qmsckeditor.card .material-icons{font-size:20px}.qmsckeditor.tooltip-content.height{min-height:400px;max-height:472px;overflow:auto}.qmsckeditor.save__as__template.height{height:125px}.ck-content .ck-horizontal-line,.ck-content .page-break{width:100%}.ck-content hr{background:#ccc}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFWJ0bbck.woff2) format(\"woff2\");unicode-range:U+0460-052f,U+1c80-1c88,U+20b4,U+2de0-2dff,U+a640-a69f,U+fe2e-fe2f}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFUZ0bbck.woff2) format(\"woff2\");unicode-range:U+0400-045f,U+0490-0491,U+04b0-04b1,U+2116}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFWZ0bbck.woff2) format(\"woff2\");unicode-range:U+1f??}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFVp0bbck.woff2) format(\"woff2\");unicode-range:U+0370-03ff}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFWp0bbck.woff2) format(\"woff2\");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01a0-01a1,U+01af-01b0,U+1ea0-1ef9,U+20ab}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFW50bbck.woff2) format(\"woff2\");unicode-range:U+0100-024f,U+0259,U+1e??,U+2020,U+20a0-20ab,U+20ad-20cf,U+2113,U+2c60-2c7f,U+a720-a7ff}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFVZ0b.woff2) format(\"woff2\");unicode-range:U+00??,U+0131,U+0152-0153,U+02bb-02bc,U+02c6,U+02da,U+02dc,U+2000-206f,U+2074,U+20ac,U+2122,U+2191,U+2193,U+2212,U+2215,U+feff,U+fffd}@font-face{font-family:Raleway;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCFPrEHJA.woff2) format(\"woff2\");unicode-range:U+0460-052f,U+1c80-1c88,U+20b4,U+2de0-2dff,U+a640-a69f,U+fe2e-fe2f}@font-face{font-family:Raleway;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCMPrEHJA.woff2) format(\"woff2\");unicode-range:U+0400-045f,U+0490-0491,U+04b0-04b1,U+2116}@font-face{font-family:Raleway;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCHPrEHJA.woff2) format(\"woff2\");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01a0-01a1,U+01af-01b0,U+1ea0-1ef9,U+20ab}@font-face{font-family:Raleway;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCGPrEHJA.woff2) format(\"woff2\");unicode-range:U+0100-024f,U+0259,U+1e??,U+2020,U+20a0-20ab,U+20ad-20cf,U+2113,U+2c60-2c7f,U+a720-a7ff}@font-face{font-family:Raleway;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCIPrE.woff2) format(\"woff2\");unicode-range:U+00??,U+0131,U+0152-0153,U+02bb-02bc,U+02c6,U+02da,U+02dc,U+2000-206f,U+2074,U+20ac,U+2122,U+2191,U+2193,U+2212,U+2215,U+feff,U+fffd}.qmsckeditor_container .qmsckeditor__minwidth{width:100%}.qmsckeditor_container .ck-editor__editable{overflow-y:auto}.qms-ckeditor .ck.ck-editor__editable{max-height:172px;min-height:172px;background-color:rgba(0,0,0,.04);font-family:Open Sans}.qms-ckeditor .ck.ck-editor__editable:not(.ck-focused,.ck-read-only):hover{background-color:rgba(0,0,0,.08);border-bottom:2px solid rgba(0,0,0,.38)}.qms-ckeditor .ck.ck-editor__editable::-webkit-scrollbar{width:12px}.qms-ckeditor .ck.ck-editor__editable::-webkit-scrollbar-track{background:transparent;background-clip:content-box}.qms-ckeditor .ck.ck-editor__editable::-webkit-scrollbar-thumb{background:rgba(0,0,0,.38);border-radius:20px;width:4px;border:4px solid transparent;background-clip:content-box}.qms-ckeditor .ck.ck-editor__editable::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.5);background-clip:content-box;border:4px solid transparent}.qms-ckeditor .ck-placeholder{font-size:1rem;font-weight:600;color:rgba(0,0,0,.6)}.qms-ckeditor .ck-disabled .ck.ck-editor__main>.ck-editor__editable,.qms-ckeditor .ck-disabled .ck.ck-toolbar{background-color:#e4e4e4;pointer-events:none}.qms-ckeditor .ck-disabled .ck-button{pointer-events:none}.qms-ckeditor .ck.ck-editor__main>.ck-editor__editable:not(.ck-focused):focus{border-radius:4px}.qms-ckeditor .ck.ck-editor__editable:not(.ck-editor__nested-editable).ck-focused{border:1px solid #c4c4c4;border-bottom:2px solid #1954a9;border-radius:4px;box-shadow:none;background-color:rgba(0,0,0,.08)}.qms-ckeditor .ck.ck-toolbar{box-shadow:0 1px 3px rgba(51,51,51,.2)}.qms-ckeditor .ck.ck-sticky-panel .ck-sticky-panel__content_sticky{box-shadow:none;border-width:0}.qmsckeditor__fullscreen{position:fixed;top:0;left:0;bottom:0;right:0;overflow:auto;background:#fff}.qmsckeditor__fullscreen .qms-ckeditor{height:98%;display:inline-block;width:100%}.qmsckeditor__fullscreen .ck.ck-editor__main{height:98%}.qmsckeditor__fullscreen .ck.ck-editor__editable{height:inherit}.sub-container{display:flex;justify-content:space-between;padding:0 10px;font-family:Open Sans;font-size:.75rem;font-weight:400;line-height:16px;color:rgba(0,0,0,.6)}"]
+                    styles: [".mt5{margin-top:5px!important}.mt10{margin-top:10px!important}.mt7{margin-top:7px!important}.mt15{margin-top:15px!important}.mt20{margin-top:20px!important}.mt30{margin-top:30px!important}.mt40{margin-top:40px!important}.ml2{margin-left:2px!important}.ml3{margin-left:3px!important}.ml5{margin-left:5px!important}.ml15{margin-left:15px!important}.ml10{margin-left:10px!important}.ml12{margin-left:12px!important}.ml16{margin-left:16px!important}.ml-auto{margin-left:auto!important}.ml-25{margin-left:-25px!important}.mr5{margin-right:5px!important}.mr12{margin-right:12px!important}.mr15{margin-right:15px!important}.mb5{margin-bottom:5px!important}.mb10{margin-bottom:10px!important}.mb15{margin-bottom:15px!important}.pt8{padding-top:8px!important}.pt10{padding-top:10px!important}.pt15{padding-top:15px!important}.pt16{padding-top:16px!important}.pl15{padding-left:15px!important}.pl0{padding-left:0!important}.pr0{padding-right:0!important}.pr15{padding-right:15px!important}.fs12{font-size:12px}.fs14{font-size:14px!important}.fs16{font-size:16px!important}.fs22{font-size:22px!important}.fw500{font-weight:500!important}.italic-text{font-style:italic}.display-flex{display:flex}.qmsckeditor{font-family:Roboto,Helvetica Neue,sans-serif;font-size:14px;font-weight:400}.qmsckeditor h2{font-size:20px;font-weight:400}.qmsckeditor .mat-dialog-content{padding:0}.qmsckeditor .mat-icon{color:#909497}.qmsckeditor__fullscreen{overflow-y:auto;max-height:100vh;overflow-x:hidden}.qmsckeditor__cursor{cursor:pointer}.qmsckeditor__notallowed{cursor:not-allowed}.qmsckeditor.button__close,.qmsckeditor.button__done{float:right;top:-24px;right:-24px;cursor:pointer}.qmsckeditor.button__done{margin-right:20px}.qmsckeditor.button__done .mat-icon{color:#28a745;font-weight:700}.qmsckeditor.button__groups button{min-height:40px;width:100%;border-radius:4px;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px}.qmsckeditor.button__groups .save{background:#f8f9f9}.qmsckeditor.button__groups .save:hover{background:#e5e7e9}.qmsckeditor.button__groups .save:disabled{cursor:not-allowed}.qmsckeditor.button__groups .cancel{background:#f8f9f9}.qmsckeditor.button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.button__groups .cancel:disabled{cursor:not-allowed}.qmsckeditor.button__groups .delete{background:#f8f9f9}.qmsckeditor.button__groups .delete:hover{background:#e5e7e9}.qmsckeditor.button__groups .delete:disabled{cursor:not-allowed}.qmsckeditor.confirm__button__groups button{min-height:36px;border-radius:4px;width:auto;border:1px solid #c5c5c5;font-family:Open Sans;font-weight:600;font-size:14px;letter-spacing:1px;line-height:16px;padding-left:15px;padding-right:15px}.qmsckeditor.confirm__button__groups .confirm{background:#f8f9f9}.qmsckeditor.confirm__button__groups .confirm:hover{background:#e5e7e9}.qmsckeditor.confirm__button__groups .cancel{background:#f8f9f9}.qmsckeditor.confirm__button__groups .cancel:hover{background:#e5e7e9}.qmsckeditor.template-content.height{min-height:420px;max-height:520px;overflow:auto}.qmsckeditor.template-content.title{margin-left:-9px}.qmsckeditor.link__content.height{min-height:400px;max-height:520px}.qmsckeditor.card{margin-bottom:10px;min-height:60px;box-shadow:none;border:1px solid #e5e5e5}.qmsckeditor.card .title{font-weight:700}.qmsckeditor.card .content{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.qmsckeditor.card .material-icons{font-size:20px}.qmsckeditor.tooltip-content.height{min-height:400px;max-height:472px;overflow:auto}.qmsckeditor.save__as__template.height{height:125px}.ck-content .ck-horizontal-line,.ck-content .page-break{width:100%}.ck-content hr{background:#ccc}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFWJ0bbck.woff2) format(\"woff2\");unicode-range:U+0460-052f,U+1c80-1c88,U+20b4,U+2de0-2dff,U+a640-a69f,U+fe2e-fe2f}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFUZ0bbck.woff2) format(\"woff2\");unicode-range:U+0400-045f,U+0490-0491,U+04b0-04b1,U+2116}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFWZ0bbck.woff2) format(\"woff2\");unicode-range:U+1f??}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFVp0bbck.woff2) format(\"woff2\");unicode-range:U+0370-03ff}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFWp0bbck.woff2) format(\"woff2\");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01a0-01a1,U+01af-01b0,U+1ea0-1ef9,U+20ab}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFW50bbck.woff2) format(\"woff2\");unicode-range:U+0100-024f,U+0259,U+1e??,U+2020,U+20a0-20ab,U+20ad-20cf,U+2113,U+2c60-2c7f,U+a720-a7ff}@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFVZ0b.woff2) format(\"woff2\");unicode-range:U+00??,U+0131,U+0152-0153,U+02bb-02bc,U+02c6,U+02da,U+02dc,U+2000-206f,U+2074,U+20ac,U+2122,U+2191,U+2193,U+2212,U+2215,U+feff,U+fffd}@font-face{font-family:Raleway;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCFPrEHJA.woff2) format(\"woff2\");unicode-range:U+0460-052f,U+1c80-1c88,U+20b4,U+2de0-2dff,U+a640-a69f,U+fe2e-fe2f}@font-face{font-family:Raleway;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCMPrEHJA.woff2) format(\"woff2\");unicode-range:U+0400-045f,U+0490-0491,U+04b0-04b1,U+2116}@font-face{font-family:Raleway;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCHPrEHJA.woff2) format(\"woff2\");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01a0-01a1,U+01af-01b0,U+1ea0-1ef9,U+20ab}@font-face{font-family:Raleway;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCGPrEHJA.woff2) format(\"woff2\");unicode-range:U+0100-024f,U+0259,U+1e??,U+2020,U+20a0-20ab,U+20ad-20cf,U+2113,U+2c60-2c7f,U+a720-a7ff}@font-face{font-family:Raleway;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCIPrE.woff2) format(\"woff2\");unicode-range:U+00??,U+0131,U+0152-0153,U+02bb-02bc,U+02c6,U+02da,U+02dc,U+2000-206f,U+2074,U+20ac,U+2122,U+2191,U+2193,U+2212,U+2215,U+feff,U+fffd}.qmsckeditor_container .qmsckeditor__minwidth{width:100%}.qmsckeditor_container .ck-editor__editable{overflow-y:auto}.qms-ckeditor .ck.ck-editor__editable{max-height:172px;min-height:172px;background-color:rgba(0,0,0,.04);font-family:Open Sans}.qms-ckeditor .ck.ck-editor__editable:not(.ck-focused,.ck-read-only):hover{background-color:rgba(0,0,0,.08);border-bottom:2px solid rgba(0,0,0,.38)}.qms-ckeditor .ck.ck-editor__editable::-webkit-scrollbar{width:12px}.qms-ckeditor .ck.ck-editor__editable::-webkit-scrollbar-track{background:transparent;background-clip:content-box}.qms-ckeditor .ck.ck-editor__editable::-webkit-scrollbar-thumb{background:rgba(0,0,0,.38);border-radius:20px;width:4px;border:4px solid transparent;background-clip:content-box}.qms-ckeditor .ck.ck-editor__editable::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.5);background-clip:content-box;border:4px solid transparent}.qms-ckeditor .ck-placeholder{font-size:1rem;font-weight:600;color:rgba(0,0,0,.6)}.qms-ckeditor .ck-disabled .ck.ck-editor__main>.ck-editor__editable,.qms-ckeditor .ck-disabled .ck.ck-toolbar{background-color:#e4e4e4;pointer-events:none}.qms-ckeditor .ck-disabled .ck-button{pointer-events:none}.qms-ckeditor .ck.ck-editor__main>.ck-editor__editable:not(.ck-focused):focus{border-radius:4px}.qms-ckeditor .ck.ck-editor__editable:not(.ck-editor__nested-editable).ck-focused{border:1px solid #c4c4c4;border-bottom:2px solid #1954a9;border-radius:4px;box-shadow:none;background-color:rgba(0,0,0,.08)}.qms-ckeditor .ck.ck-toolbar{box-shadow:0 1px 3px rgba(51,51,51,.2)}.qms-ckeditor .ck.ck-sticky-panel .ck-sticky-panel__content_sticky{box-shadow:none;border-width:0}.qmsckeditor__fullscreen{position:fixed;top:0;left:0;bottom:0;right:0;overflow:auto;background:#fff}.qmsckeditor__fullscreen .qms-ckeditor{height:98%;display:block;width:100%}.qmsckeditor__fullscreen .ck.ck-editor__main{height:98%}.qmsckeditor__fullscreen .ck.ck-editor__editable{height:inherit}.sub-container{display:flex;justify-content:space-between;padding:0 10px;font-family:Open Sans;font-size:.75rem;font-weight:400;line-height:16px;color:rgba(0,0,0,.6)}"]
                 },] }
     ];
     QMSCKEditorComponent.ctorParameters = function () { return [
@@ -17775,6 +17698,111 @@
         return QMSDialogConfig;
     }(dialog.MatDialogConfig));
 
+    var QMSDrawerContentDirective = /** @class */ (function () {
+        function QMSDrawerContentDirective(ele) {
+            this.ele = ele;
+        }
+        QMSDrawerContentDirective.prototype.ngOnInit = function () {
+            if (this.ele) {
+                this.ele.nativeElement.classList.add('qms-drawer-content');
+            }
+        };
+        return QMSDrawerContentDirective;
+    }());
+    QMSDrawerContentDirective.decorators = [
+        { type: i0.Directive, args: [{
+                    selector: '[qms-drawer-content]',
+                },] }
+    ];
+    QMSDrawerContentDirective.ctorParameters = function () { return [
+        { type: i0.ElementRef }
+    ]; };
+
+    var QMSDrawerHeaderActionDirective = /** @class */ (function () {
+        function QMSDrawerHeaderActionDirective(ele) {
+            this.ele = ele;
+        }
+        QMSDrawerHeaderActionDirective.prototype.ngOnInit = function () {
+            if (this.ele) {
+                this.ele.nativeElement.classList.add('qms-drawer-header__action');
+            }
+        };
+        return QMSDrawerHeaderActionDirective;
+    }());
+    QMSDrawerHeaderActionDirective.decorators = [
+        { type: i0.Directive, args: [{
+                    selector: '[qms-drawer-header-action]',
+                },] }
+    ];
+    QMSDrawerHeaderActionDirective.ctorParameters = function () { return [
+        { type: i0.ElementRef }
+    ]; };
+
+    var QMSDrawerHeaderDirective = /** @class */ (function () {
+        function QMSDrawerHeaderDirective(ele) {
+            this.ele = ele;
+        }
+        QMSDrawerHeaderDirective.prototype.ngOnInit = function () {
+            if (this.ele) {
+                this.ele.nativeElement.classList.add('qms-drawer-header');
+            }
+        };
+        return QMSDrawerHeaderDirective;
+    }());
+    QMSDrawerHeaderDirective.decorators = [
+        { type: i0.Directive, args: [{
+                    selector: '[qms-drawer-header]',
+                },] }
+    ];
+    QMSDrawerHeaderDirective.ctorParameters = function () { return [
+        { type: i0.ElementRef }
+    ]; };
+
+    var QMSDrawerDirective = /** @class */ (function () {
+        function QMSDrawerDirective(ele) {
+            this.ele = ele;
+        }
+        QMSDrawerDirective.prototype.ngOnInit = function () {
+            if (this.ele) {
+                this.ele.nativeElement.classList.add('qms-drawer');
+            }
+        };
+        return QMSDrawerDirective;
+    }());
+    QMSDrawerDirective.decorators = [
+        { type: i0.Directive, args: [{
+                    selector: '[qms-drawer]',
+                },] }
+    ];
+    QMSDrawerDirective.ctorParameters = function () { return [
+        { type: i0.ElementRef }
+    ]; };
+
+    var QMSSideSheetModule = /** @class */ (function () {
+        function QMSSideSheetModule() {
+        }
+        return QMSSideSheetModule;
+    }());
+    QMSSideSheetModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    declarations: [
+                        QMSDrawerDirective,
+                        QMSDrawerHeaderDirective,
+                        QMSDrawerContentDirective,
+                        QMSDrawerHeaderActionDirective,
+                    ],
+                    imports: [
+                        common.CommonModule
+                    ],
+                    exports: [
+                        QMSDrawerDirective,
+                        QMSDrawerHeaderDirective,
+                        QMSDrawerContentDirective,
+                        QMSDrawerHeaderActionDirective,
+                    ]
+                },] }
+    ];
+
     var QMSTooltipModule = /** @class */ (function () {
         function QMSTooltipModule() {
         }
@@ -18278,7 +18306,7 @@
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     selector: 'app-qms-stepper',
                     template: "<div class=\"qms-stepper-container\">\r\n    <div *ngIf=\"isHorizontal\">\r\n        <mat-horizontal-stepper [style.width.px]=\"width\" labelPosition=\"{{labelPosition}}\" #stepper\r\n            (selectionChange)=\"changeStep($event.selectedIndex)\" class=\"overflow-auto\" [selectedIndex]=\"currentStep\">\r\n            <mat-step *ngFor=\"let step of steps; let i = index;\" [completed]=\"false\"\r\n                [aria-labelledby]=\"step.disabled ? 'disabled' : 'step-item'\">\r\n                <ng-template matStepLabel>\r\n                    <span tabindex=\"0\" (keydown.enter)=\"changeStep(i)\" class=\"title-step\">{{step.name}}</span>\r\n                </ng-template>\r\n                <ng-template matStepContent>\r\n                </ng-template>\r\n            </mat-step>\r\n            <ng-template matStepperIcon=\"edit\">\r\n                {{stepper.selectedIndex + 1}}\r\n            </ng-template>\r\n        </mat-horizontal-stepper>\r\n    </div>\r\n    <div *ngIf=\"!isHorizontal\">\r\n        <mat-vertical-stepper [style.height.px]=\"height\" #stepper (selectionChange)=\"changeStep($event.selectedIndex)\"\r\n            [selectedIndex]=\"currentStep\" class=\"overflow-auto\">\r\n            <mat-step *ngFor=\"let step of steps; let i = index;\" [completed]=\"false\"\r\n                [aria-labelledby]=\"step.disabled ? 'disabled' : 'step-item'\">\r\n                <ng-template matStepLabel>\r\n                    <span tabindex=\"0\" (keydown.enter)=\"changeStep(i)\" class=\"title-step\">{{step.name}}</span>\r\n                </ng-template>\r\n                <ng-template matStepContent>\r\n                </ng-template>\r\n            </mat-step>\r\n            <ng-template matStepperIcon=\"edit\">\r\n                <span>{{stepper.selectedIndex + 1}}</span>\r\n            </ng-template>\r\n        </mat-vertical-stepper>\r\n    </div>\r\n</div>",
-                    styles: [".qms-stepper-container ::ng-deep .mat-step-header[aria-labelledby=step-item]{height:22px!important;padding:8px 12px;left:0;top:0;border-radius:4px;color:#fff}.qms-stepper-container ::ng-deep .mat-step-header[aria-labelledby=step-item].mat-horizontal-stepper-header{width:auto}.qms-stepper-container ::ng-deep .mat-step-header[aria-labelledby=step-item].mat-vertical-stepper-header{width:156px}.qms-stepper-container ::ng-deep .mat-step-header .mat-step-icon{background:rgba(0,0,0,.6);margin-right:14px}.qms-stepper-container ::ng-deep .mat-step-header .mat-step-icon-selected{background-color:#1954a9!important;color:#fff}.qms-stepper-container ::ng-deep .mat-step-header[aria-selected=true] .title-step{font-weight:600!important;outline:none!important}.qms-stepper-container ::ng-deep mat-step-header:active{background:#e5eefb}.qms-stepper-container ::ng-deep mat-step-header:active mat-step-label{color:#fff}.qms-stepper-container ::ng-deep mat-step-header:active mat-step-icon{color:#323232;background:rgba(0,0,0,.6)}.qms-stepper-container ::ng-deep mat-step-header .mat-ripple-element{background-color:rgba(229,238,251,.3)}.qms-stepper-container ::ng-deep mat-step-header:hover{background:#f2f7fd}.qms-stepper-container ::ng-deep mat-step-header:hover mat-step-label{color:#fff}.qms-stepper-container ::ng-deep mat-step-header:hover mat-step-icon{color:#323232;background:rgba(0,0,0,.6)}.qms-stepper-container ::ng-deep .mat-step-header[aria-labelledby=disabled]{pointer-events:none!important;cursor:not-allowed;opacity:.6;height:22px!important;width:156px;left:0;top:0;border-radius:4px;padding:8px 12px}.qms-stepper-container ::ng-deep mat-step-header:focus{border:2px solid #1954a9}.qms-stepper-container ::ng-deep mat-step-header:focus mat-step-label{color:#fff}.qms-stepper-container ::ng-deep mat-step-header:focus mat-step-icon{color:#323232;background:rgba(0,0,0,.6)}.qms-stepper-container ::ng-deep mat-step-header.mat-step-header.cdk-keyboard-focused,.qms-stepper-container ::ng-deep mat-step-header.mat-step-header.cdk-program-focused{border:3px solid #1954a9;background:#fff}.qms-stepper-container ::ng-deep mat-step-header:focus:not(:focus-visible){border:none}.qms-stepper-container ::ng-deep .mat-step-header[aria-labelledby=active]{pointer-events:none!important;cursor:not-allowed;opacity:.6}.qms-stepper-container .title-step{font-family:Open Sans;font-size:14px;font-style:normal;font-weight:400;letter-spacing:0;text-align:center;color:#323232;outline:none!important}.qms-stepper-container ::ng-deep .mat-step-icon{width:24px;height:24px}.qms-stepper-container ::ng-deep .mat-step-icon .mat-step-icon-content{font-family:Open Sans;font-size:14px;font-style:normal;font-weight:400;letter-spacing:0;text-align:center;color:#fff;padding-top:1px}.qms-stepper-container ::ng-deep .mat-stepper-vertical-line:before{border-left-width:0;border-right-width:0}.qms-stepper-container ::ng-deep .mat-stepper-vertical-line{margin-left:23px;background:#0000001f;height:30px;width:1px}.qms-stepper-container ::ng-deep .mat-stepper-horizontal-line{height:1px;width:22px!important;left:0;top:18px;border-radius:0;margin:8px;background:#0000001f;max-width:22px!important}"]
+                    styles: [".qms-stepper-container ::ng-deep .mat-step-header[aria-labelledby=step-item]{height:22px!important;padding:8px 12px;left:0;top:0;border-radius:4px;color:#fff}.qms-stepper-container ::ng-deep .mat-step-header[aria-labelledby=step-item].mat-horizontal-stepper-header{min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content}.qms-stepper-container ::ng-deep .mat-step-header[aria-labelledby=step-item].mat-vertical-stepper-header{width:156px}.qms-stepper-container ::ng-deep .mat-step-header .mat-step-icon{background:rgba(0,0,0,.6);margin-right:14px}.qms-stepper-container ::ng-deep .mat-step-header .mat-step-icon-selected{background-color:#1954a9!important;color:#fff}.qms-stepper-container ::ng-deep .mat-step-header[aria-selected=true] .title-step{font-weight:600!important;outline:none!important;-webkit-font-smoothing:antialiased!important}.qms-stepper-container ::ng-deep mat-step-header:active{background:#e5eefb}.qms-stepper-container ::ng-deep mat-step-header:active mat-step-label{color:#fff}.qms-stepper-container ::ng-deep mat-step-header:active mat-step-icon{color:#323232;background:rgba(0,0,0,.6)}.qms-stepper-container ::ng-deep mat-step-header .mat-ripple-element{background-color:rgba(229,238,251,.3)}.qms-stepper-container ::ng-deep mat-step-header:hover{background:#f2f7fd}.qms-stepper-container ::ng-deep mat-step-header:hover mat-step-label{color:#fff}.qms-stepper-container ::ng-deep mat-step-header:hover mat-step-icon{color:#323232;background:rgba(0,0,0,.6)}.qms-stepper-container ::ng-deep .mat-step-header[aria-labelledby=disabled]{pointer-events:none!important;cursor:not-allowed;opacity:.6;height:22px!important;width:156px;left:0;top:0;border-radius:4px;padding:8px 12px}.qms-stepper-container ::ng-deep mat-step-header:focus{border:2px solid #1954a9}.qms-stepper-container ::ng-deep mat-step-header:focus mat-step-label{color:#fff}.qms-stepper-container ::ng-deep mat-step-header:focus mat-step-icon{color:#323232;background:rgba(0,0,0,.6)}.qms-stepper-container ::ng-deep mat-step-header.mat-step-header.cdk-keyboard-focused,.qms-stepper-container ::ng-deep mat-step-header.mat-step-header.cdk-program-focused{border:3px solid #1954a9;background:#fff}.qms-stepper-container ::ng-deep mat-step-header:focus:not(:focus-visible){border:none}.qms-stepper-container ::ng-deep .mat-step-header[aria-labelledby=active]{pointer-events:none!important;cursor:not-allowed;opacity:.6}.qms-stepper-container .title-step{font-family:Open Sans;font-size:14px;font-style:normal;font-weight:400;letter-spacing:0;text-align:center;color:#323232;outline:none!important}.qms-stepper-container ::ng-deep .mat-step-icon{width:24px;height:24px}.qms-stepper-container ::ng-deep .mat-step-icon .mat-step-icon-content{font-family:Open Sans;font-size:14px;font-style:normal;font-weight:400;letter-spacing:0;text-align:center;color:#fff;padding-top:1px}.qms-stepper-container ::ng-deep .mat-stepper-vertical-line:before{border-left-width:0;border-right-width:0}.qms-stepper-container ::ng-deep .mat-stepper-vertical-line{margin-left:23px;background:#0000001f;height:30px;width:1px}.qms-stepper-container ::ng-deep .mat-stepper-horizontal-line{height:1px;width:22px!important;left:0;top:18px;border-radius:0;margin:8px;background:#0000001f;max-width:22px!important}"]
                 },] }
     ];
     QmsStepperComponent.ctorParameters = function () { return [
@@ -19157,7 +19185,7 @@
     SelectIncludeChildrenPopUpComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'qms-select-include-children-popup',
-                    template: "<div id=\"qmslib_related_popup\" class=\"qmslib__related__popup__container\">\r\n  <div id=\"qmslib_related_popup_header\">\r\n    <span mat-icon-button class=\"button__close\" (click)=\"onCloseClick()\">\r\n      <mat-icon mat-icon>close</mat-icon>\r\n    </span>\r\n    <div id=\"qmslib_related_popup_header_001\" mat-dialog-content>\r\n      <span>{{ headerName | uppercase }}</span>\r\n    </div>\r\n  </div>\r\n\r\n  <div\r\n    id=\"qmslib_related_popup_search\"\r\n    class=\"input__field\"\r\n    (click)=\"showSearchResult()\"\r\n  >\r\n    <input\r\n      #name\r\n      type=\"text\"\r\n      placeholder=\"{{ LANG.SEARCH }}\"\r\n      matInput\r\n      [formControl]=\"myControl\"\r\n      [matAutocomplete]=\"auto\"\r\n      #autoCompleteInputSearch\r\n    />\r\n    <mat-icon>search</mat-icon>\r\n  </div>\r\n  <div class=\"select__toggle-include\">\r\n    <mat-slide-toggle\r\n      [checked]=\"includeChildren\"\r\n      (change)=\"setValue($event)\"\r\n      color=\"default\"\r\n      qms-group-options\r\n    >\r\n      <span class=\"text-label\">{{ selectIncludeLabel }}</span>\r\n    </mat-slide-toggle>\r\n  </div>\r\n  <div class=\"line__divider\"></div>\r\n\r\n  <mat-autocomplete\r\n    #auto=\"matAutocomplete\"\r\n    [displayWith]=\"displayRelated\"\r\n    class=\"mat-autocomplete_related-viewport\"\r\n  >\r\n    <cdk-virtual-scroll-viewport\r\n      qms-scrollbar\r\n      itemSize=\"10\"\r\n      class=\"related-viewport\"\r\n    >\r\n      <div class=\"search__module-result\" *ngIf=\"filteredOptions\">\r\n        <mat-option\r\n          class=\"search__option\"\r\n          *ngFor=\"let option of filteredOptions\"\r\n          [value]=\"option\"\r\n          (click)=\"selectSearchOption(option)\"\r\n        >\r\n          <qms-list-item type=\"image-square\">\r\n            <mat-icon\r\n              leading-icon\r\n              *ngIf=\"getItemIconType(option) === itemIconType.name\"\r\n              class=\"mat-icon-rtl-mirror material-icons-outlined\"\r\n              type=\"image-square\"\r\n            >\r\n              {{ option.itemIcon }}\r\n            </mat-icon>\r\n\r\n            <mat-icon\r\n              leading-icon\r\n              *ngIf=\"getItemIconType(option) === itemIconType.svg\"\r\n              class=\"mat-icon-rtl-mirror material-icons-outlined\"\r\n              type=\"image-square\"\r\n              [svgIcon]=\"option.itemIconSvg\"\r\n            >\r\n            </mat-icon>\r\n\r\n            <img\r\n              leading-icon\r\n              *ngIf=\"getItemIconType(option) === itemIconType.path\"\r\n              class=\"mat-icon\"\r\n              [src]=\"option.itemIconPath\"\r\n              type=\"image-square\"\r\n            />\r\n\r\n            <img\r\n              leading-icon\r\n              *ngIf=\"getItemIconType(option) === itemIconType.base64\"\r\n              class=\"mat-icon image-base64\"\r\n              [src]=\"getImagePath(option)\"\r\n              type=\"image-square\"\r\n            />\r\n            <div qms-list-header>\r\n              <div qms-line type=\"subtitle\" class=\"search__option-name\">\r\n                {{ option.itemName }}\r\n              </div>\r\n            </div>\r\n          </qms-list-item>\r\n        </mat-option>\r\n      </div>\r\n    </cdk-virtual-scroll-viewport>\r\n  </mat-autocomplete>\r\n\r\n  <div class=\"row\">\r\n    <div\r\n      class=\"qms-scrollbar qmslib_related_popup_content col-12\"\r\n      [ngClass]=\"{\r\n        panel__content_item: checkedNodeList.length,\r\n        panel__content: !checkedNodeList.length\r\n      }\"\r\n    >\r\n      <div id=\"qmslib_related_popup_common_002\">\r\n        <qms-tree\r\n          [treeData]=\"treeData\"\r\n          [treeConfig]=\"treeConfig\"\r\n          [selectedData]=\"selectedData\"\r\n          [selectedRiskData]=\"selectedRiskData\"\r\n          [disabledList]=\"disabledList\"\r\n          (checkBoxEvent)=\"getCommonCheckedNode($event)\"\r\n          (nodeExpandEvent)=\"getChildrenOfFolder($event)\"\r\n          (selectNodeEvent)=\"selectNodeTreeEvent($event)\"\r\n        ></qms-tree>\r\n      </div>\r\n    </div>\r\n\r\n    <div *ngIf=\"checkedNodeList.length\" class=\"line__divider\"></div>\r\n\r\n    <div *ngIf=\"checkedNodeList.length\" class=\"panel__item qms-scrollbar\">\r\n      <div class=\"related__item__inline\" *ngFor=\"let item of checkedNodeList\">\r\n        <button\r\n          *ngIf=\"item.itemName\"\r\n          mat-button\r\n          class=\"related__item__content\"\r\n          qms-tool-tip=\"{{\r\n            isEllipsisActive(itemName) ? getItemChipName(item) : ''\r\n          }}\"\r\n          mode=\"dark\"\r\n        >\r\n          <span class=\"related__item__content_name\" #itemName>\r\n            {{ getItemChipName(item) }}\r\n            <span\r\n              class=\"select__include-children__count\"\r\n              *ngIf=\"item.noSelectedChildren > 0\"\r\n            >\r\n              {{ getItemSelectedChildrenRatio(item) }}\r\n            </span>\r\n          </span>\r\n\r\n          <mat-icon (click)=\"removeCheckedNodeList(item)\">cancel</mat-icon>\r\n        </button>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"line__divider\"></div>\r\n\r\n    <div class=\"confirm__button__groups\">\r\n      <button\r\n        *ngIf=\"!checkedNodeList.length\"\r\n        qms-btn\r\n        style=\"margin-top: 7px\"\r\n        (click)=\"onAddClick()\"\r\n      >\r\n        {{ LANG.ADD }}\r\n      </button>\r\n      <button\r\n        *ngIf=\"checkedNodeList.length\"\r\n        qms-btn\r\n        style=\"margin-top: 0px\"\r\n        (click)=\"onAddClick()\"\r\n      >\r\n        {{ LANG.ADD }} ({{ checkedNodeList.length }})\r\n      </button>\r\n      <button\r\n        qms-btn-text\r\n        [ngStyle]=\"{ 'margin-top': checkedNodeList.length ? '0px' : '7px' }\"\r\n        (click)=\"onCloseClick()\"\r\n      >\r\n        {{ LANG.CANCEL }}\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n",
+                    template: "<div id=\"qmslib_related_popup\" class=\"qmslib__related__popup__container\">\r\n  <div id=\"qmslib_related_popup_header\">\r\n    <span mat-icon-button class=\"button__close\" (click)=\"onCloseClick()\">\r\n      <mat-icon mat-icon>close</mat-icon>\r\n    </span>\r\n    <div id=\"qmslib_related_popup_header_001\" mat-dialog-content>\r\n      <span>{{ headerName | uppercase }}</span>\r\n    </div>\r\n  </div>\r\n\r\n  <div\r\n    id=\"qmslib_related_popup_search\"\r\n    class=\"input__field\"\r\n    (click)=\"showSearchResult()\"\r\n  >\r\n    <input\r\n      #name\r\n      type=\"text\"\r\n      placeholder=\"{{ LANG.SEARCH }}\"\r\n      matInput\r\n      [formControl]=\"myControl\"\r\n      [matAutocomplete]=\"auto\"\r\n      #autoCompleteInputSearch\r\n    />\r\n    <mat-icon>search</mat-icon>\r\n  </div>\r\n  <div class=\"select__toggle-include\">\r\n    <mat-slide-toggle\r\n      [checked]=\"includeChildren\"\r\n      (change)=\"setValue($event)\"\r\n      color=\"default\"\r\n      qms-group-options\r\n    >\r\n      <span class=\"text-label\">{{ selectIncludeLabel }}</span>\r\n    </mat-slide-toggle>\r\n  </div>\r\n  <div class=\"line__divider\"></div>\r\n\r\n  <mat-autocomplete\r\n    #auto=\"matAutocomplete\"\r\n    [displayWith]=\"displayRelated\"\r\n    class=\"mat-autocomplete_related-viewport\"\r\n  >\r\n    <cdk-virtual-scroll-viewport\r\n      qms-scrollbar\r\n      itemSize=\"10\"\r\n      class=\"related-viewport\"\r\n      *ngIf=\"filteredOptions.length\"\r\n    >\r\n      <div class=\"search__module-result\" *ngIf=\"filteredOptions\">\r\n        <mat-option\r\n          class=\"search__option\"\r\n          *ngFor=\"let option of filteredOptions\"\r\n          [value]=\"option\"\r\n          (click)=\"selectSearchOption(option)\"\r\n        >\r\n          <qms-list-item type=\"image-square\">\r\n            <mat-icon\r\n              leading-icon\r\n              *ngIf=\"getItemIconType(option) === itemIconType.name\"\r\n              class=\"mat-icon-rtl-mirror material-icons-outlined\"\r\n              type=\"image-square\"\r\n            >\r\n              {{ option.itemIcon }}\r\n            </mat-icon>\r\n\r\n            <mat-icon\r\n              leading-icon\r\n              *ngIf=\"getItemIconType(option) === itemIconType.svg\"\r\n              class=\"mat-icon-rtl-mirror material-icons-outlined\"\r\n              type=\"image-square\"\r\n              [svgIcon]=\"option.itemIconSvg\"\r\n            >\r\n            </mat-icon>\r\n\r\n            <img\r\n              leading-icon\r\n              *ngIf=\"getItemIconType(option) === itemIconType.path\"\r\n              class=\"mat-icon\"\r\n              [src]=\"option.itemIconPath\"\r\n              type=\"image-square\"\r\n            />\r\n\r\n            <img\r\n              leading-icon\r\n              *ngIf=\"getItemIconType(option) === itemIconType.base64\"\r\n              class=\"mat-icon image-base64\"\r\n              [src]=\"getImagePath(option)\"\r\n              type=\"image-square\"\r\n            />\r\n            <div qms-list-header>\r\n              <div qms-line type=\"subtitle\" class=\"search__option-name\">\r\n                {{ option.itemName }}\r\n              </div>\r\n            </div>\r\n          </qms-list-item>\r\n        </mat-option>\r\n      </div>\r\n    </cdk-virtual-scroll-viewport>\r\n  </mat-autocomplete>\r\n\r\n  <div class=\"row\">\r\n    <div\r\n      class=\"qms-scrollbar qmslib_related_popup_content col-12\"\r\n      [ngClass]=\"{\r\n        panel__content_item: checkedNodeList.length,\r\n        panel__content: !checkedNodeList.length\r\n      }\"\r\n    >\r\n      <div id=\"qmslib_related_popup_common_002\">\r\n        <qms-tree\r\n          [treeData]=\"treeData\"\r\n          [treeConfig]=\"treeConfig\"\r\n          [selectedData]=\"selectedData\"\r\n          [selectedRiskData]=\"selectedRiskData\"\r\n          [disabledList]=\"disabledList\"\r\n          (checkBoxEvent)=\"getCommonCheckedNode($event)\"\r\n          (nodeExpandEvent)=\"getChildrenOfFolder($event)\"\r\n          (selectNodeEvent)=\"selectNodeTreeEvent($event)\"\r\n        ></qms-tree>\r\n      </div>\r\n    </div>\r\n\r\n    <div *ngIf=\"checkedNodeList.length\" class=\"line__divider\"></div>\r\n\r\n    <div *ngIf=\"checkedNodeList.length\" class=\"panel__item qms-scrollbar\">\r\n      <div class=\"related__item__inline\" *ngFor=\"let item of checkedNodeList\">\r\n        <button\r\n          *ngIf=\"item.itemName\"\r\n          mat-button\r\n          class=\"related__item__content\"\r\n          qms-tool-tip=\"{{\r\n            isEllipsisActive(itemName) ? getItemChipName(item) : ''\r\n          }}\"\r\n          mode=\"dark\"\r\n        >\r\n          <span class=\"related__item__content_name\" #itemName>\r\n            {{ getItemChipName(item) }}\r\n            <span\r\n              class=\"select__include-children__count\"\r\n              *ngIf=\"item.noSelectedChildren > 0\"\r\n            >\r\n              {{ getItemSelectedChildrenRatio(item) }}\r\n            </span>\r\n          </span>\r\n\r\n          <mat-icon (click)=\"removeCheckedNodeList(item)\">cancel</mat-icon>\r\n        </button>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"line__divider\"></div>\r\n\r\n    <div class=\"confirm__button__groups\">\r\n      <button\r\n        *ngIf=\"!checkedNodeList.length\"\r\n        qms-btn\r\n        style=\"margin-top: 7px\"\r\n        (click)=\"onAddClick()\"\r\n      >\r\n        {{ LANG.ADD }}\r\n      </button>\r\n      <button\r\n        *ngIf=\"checkedNodeList.length\"\r\n        qms-btn\r\n        style=\"margin-top: 0px\"\r\n        (click)=\"onAddClick()\"\r\n      >\r\n        {{ LANG.ADD }} ({{ checkedNodeList.length }})\r\n      </button>\r\n      <button\r\n        qms-btn-text\r\n        [ngStyle]=\"{ 'margin-top': checkedNodeList.length ? '0px' : '7px' }\"\r\n        (click)=\"onCloseClick()\"\r\n      >\r\n        {{ LANG.CANCEL }}\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n",
                     encapsulation: i0.ViewEncapsulation.None,
                     styles: [".qms-scrollbar::-webkit-scrollbar{width:12px}.qms-scrollbar::-webkit-scrollbar-track{background:rgba(0,0,0,.12);background-clip:content-box}.qms-scrollbar::-webkit-scrollbar-thumb{background:rgba(0,0,0,.38);border-radius:20px;width:4px;border:4px solid transparent;background-clip:content-box}.qms-scrollbar::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.5);background-clip:content-box;border:4px solid transparent}.qms-scrollbar.none-scroll-bg::-webkit-scrollbar-track{background:transparent;background-clip:content-box}.qms__popup .button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qms__danger button{border:none;color:#fff;padding:0;text-align:center;text-decoration:none;display:inline-block;cursor:pointer;height:20px;width:20px;font-family:Open Sans;font-size:12px;font-weight:600;font-style:normal;line-height:16px}.qms__danger .red{background-color:#9e360f;margin-left:10px}.qms__danger .yellow{background-color:#e4cf53;margin-left:10px;color:#323232}.qms__danger .green{background-color:#00804c;margin-left:10px}.confirm__button__groups{margin-top:11px}.confirm__button__groups button{min-height:36px;width:auto;font-family:Open Sans;font-weight:500;font-size:14px;letter-spacing:1px;line-height:16px;padding-left:15px;padding-right:15px;margin-right:5px;float:right}.confirm__button__groups .confirm{background:#f8f9f9}.confirm__button__groups .confirm:hover{background:#001983;color:#fff}.confirm__button__groups .confirm:disabled{cursor:not-allowed}.confirm__button__groups .cancel{background:#f8f9f9}.confirm__button__groups .cancel:hover{background:#001983;color:#fff}.qmslib__related__popup__container .input__field{display:flex;align-items:center}.qmslib__related__popup__container .input__field input{width:100%;padding:10px;outline:none;border:none;background:#eee}.qmslib__related__popup__container .input__field .mat-icon{margin-left:-30px;cursor:pointer;vertical-align:middle}.qmslib__related__popup__container .line__divider{border-bottom:1px solid #ccc;height:1px;margin-top:10px;min-width:300px;max-width:100%}.qmslib__related__popup__container .button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qmslib__related__popup__container .panel__content{height:450px;overflow:auto;margin-top:12px}.qmslib__related__popup__container .panel__content_item{height:350px;overflow:auto;margin-top:12px}.qmslib__related__popup__container .panel-tree .mat-expansion-panel-body{padding:0 12px 12px}.qmslib__related__popup__container .mat-expansion-panel-header{height:30px;font-size:12px;letter-spacing:1px;font-family:Raleway;font-weight:600;padding:0}.qmslib__related__popup__container .mat-expansion-panel-header .mat-expansion-panel-header-title{align-items:center;margin-left:12px}.qmslib__related__popup__container .mat-expansion-panel-header .related_popup_toggle-btn{width:1.5rem;height:1.5rem;line-height:1.5rem}.qmslib__related__popup__container .mat-expansion-panel:not([class*=mat-elevation-z]){box-shadow:none}.qmslib__related__popup__container .panel__item{height:100px;margin-top:12px;overflow-x:hidden;overflow-y:auto;padding-right:5px;width:100%;max-width:100%;display:flex;flex-wrap:wrap;align-content:flex-start}.qmslib__related__popup__container .panel__item .related__item__inline{max-width:100%}.qmslib__related__popup__container .panel__item .select__toggle-include{width:100%}.qmslib__related__popup__container .panel__item .related__item__content{height:32px;line-height:32px;background-color:#e5e5e5;max-width:100%;margin-bottom:5px;margin-left:2.5px;margin-right:2.5px}.qmslib__related__popup__container .panel__item .related__item__content .mat-icon{color:#8e8e8e;font-size:24px}.qmslib__related__popup__container .panel__item .related__item__content span.related__item__content_name{display:inline-block;min-width:calc(100% - 13px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:320px}.qmslib__related__popup__container .panel__item .related__item__content span.related__item__content_name .select__include-children__count{font-size:.75rem;color:rgba(0,0,0,.38)}.qmslib__related__popup__container .qmslib-related-popup-splitview{background-color:#fff;border-left:1px solid #ccc;height:450px;overflow-y:auto;margin-top:12px}.qmslib__related__popup__container .qmslib-related-popup-splitview.panel__content{height:450px;overflow:auto;margin-top:12px}.qmslib__related__popup__container .qmslib-related-popup-splitview.panel__content_item{height:350px;overflow:auto;margin-top:12px}.qmslib__related__popup__container .qmslib-related-popup-splitview .splitview-header{height:30px;font-size:12px;letter-spacing:1px;font-family:RALEWAY;font-weight:600;display:flex;align-items:center}.qmslib__related__popup__container .qmslib-related-popup-splitview .mat-checkbox.qms-group-options{padding:0}.qmslib__related__popup__container .qmslib-related-popup-splitview .mat-checkbox.qms-group-options .mat-checkbox-inner-container{margin-right:11px}.qmslib__related__popup__container .qmslib-related-popup-splitview .mat-checkbox.qms-group-options.mat-checkbox-checked{background:transparent!important}.qmslib__related__popup__container .qmslib-related-popup-splitview .expand-node{margin-left:8px;display:flex;align-items:center;min-height:40px}.qmslib__related__popup__container .qmslib-related-popup-splitview .expand-node .mat-icon{color:rgba(0,0,0,.6);margin-right:17px;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content}.qmslib__related__popup__container .qmslib-related-popup-splitview .expand-node .mat-icon svg{display:block;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content}cdk-virtual-scroll-viewport{overflow-x:hidden}cdk-virtual-scroll-viewport .search__module-result{margin:1.5rem;padding:0 0 .5rem}cdk-virtual-scroll-viewport .search__module-result .search__module-title{font-size:14px;font-weight:600}cdk-virtual-scroll-viewport .search__module-result .search__option{height:auto;line-height:normal;padding:8px 0;border-bottom:1px solid #e0e0e0}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item.mat-2-line.image-item{height:auto}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content{margin:0;border-bottom:none}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .wrap-image.image-square{width:2.5rem;height:100%;background:transparent;align-self:center;margin-right:0}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .wrap-image.image-square img{width:24px;height:24px}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .material-icons-outlined.leading-icon,cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content mat-icon.leading-icon{padding:4px 0 4px 4px}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .subtitle{font-weight:400}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .caption{overflow:hidden;line-height:normal;white-space:normal;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;padding:0;margin:0}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .caption span.search__result__parent-name{display:inline-block;width:auto;width:calc(100% - 13px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .default-subtitle{color:rgba(0,0,0,.38)}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .search__description-icon{margin-right:0;width:12px;height:12px;font-size:12px}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .qms-list-text{border-bottom:none}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .breadcrumb-containe .qms-breadcrumb-item .mat-icon{font-size:16px!important;padding-bottom:1px}cdk-virtual-scroll-viewport .search__module-result svg{display:block}#qmslib_related_popup_header_001{margin-bottom:20px;padding:0;font-weight:600;font-family:Raleway}.padding-5{padding:5px}.mat-autocomplete_related-viewport{height:100%;max-height:100%!important}.mat-autocomplete_related-viewport .cdk-virtual-scroll-content-wrapper{width:100%}.mat-autocomplete_related-viewport .related-viewport{min-height:10.25rem}"]
                 },] }
@@ -19725,7 +19753,7 @@
     SelectOneDialog.decorators = [
         { type: i0.Component, args: [{
                     selector: 'qms-select-one',
-                    template: "<div id=\"qmslib_related_popup\" class=\"qmslib__related__popup__container\">\r\n  <div id=\"qmslib_related_popup_header\">\r\n    <span mat-icon-button class=\"button__close\" (click)=\"onCloseClick()\">\r\n      <mat-icon mat-icon>close</mat-icon>\r\n    </span>\r\n    <div id=\"qmslib_related_popup_header_001\" mat-dialog-content>\r\n      <span>{{ moduleName }}</span>\r\n    </div>\r\n  </div>\r\n\r\n  <div\r\n    id=\"qmslib_related_popup_search\"\r\n    class=\"input__field\"\r\n    (click)=\"showSearchResult()\"\r\n  >\r\n    <input\r\n      #name\r\n      type=\"text\"\r\n      placeholder=\"{{ LANG.SEARCH }}\"\r\n      matInput\r\n      [formControl]=\"myControl\"\r\n      [matAutocomplete]=\"auto\"\r\n      #autoCompleteInputSearch\r\n    />\r\n    <mat-icon>search</mat-icon>\r\n  </div>\r\n\r\n  <div class=\"line__divider\"></div>\r\n\r\n  <mat-autocomplete\r\n    #auto=\"matAutocomplete\"\r\n    [displayWith]=\"displayRelated\"\r\n    class=\"mat-autocomplete_related-viewport\"\r\n  >\r\n    <cdk-virtual-scroll-viewport\r\n      qms-scrollbar\r\n      itemSize=\"10\"\r\n      class=\"related-viewport\"\r\n    >\r\n      <div class=\"search__module-result\" *ngIf=\"filteredOptions.length\">\r\n        <mat-option\r\n          class=\"search__option\"\r\n          *ngFor=\"let option of getModuleFilteredOptions()\"\r\n          [value]=\"option\"\r\n          (click)=\"selectItemSearched(option)\"\r\n        >\r\n          <qms-list-item type=\"image-square\">\r\n            <mat-icon\r\n              leading-icon\r\n              type=\"image-square\"\r\n              [svgIcon]=\"getNodeIcon(option)\"\r\n            ></mat-icon>\r\n            <div qms-list-header>\r\n              <div\r\n                qms-line\r\n                type=\"caption\"\r\n                qms-tool-tip=\"{{\r\n                  isEllipsisActive(searchItemResult) ? option.parentName : ''\r\n                }}\"\r\n                mode=\"dark\"\r\n                *ngIf=\"getParentName(option)\"\r\n              >\r\n                <span #searchItemResult class=\"search__result__parent-name\">\r\n                  {{ option.parentName }}\r\n                </span>\r\n              </div>\r\n              <div qms-line type=\"subtitle\" class=\"search__option-name\">\r\n                {{ option.itemName }}\r\n              </div>\r\n              <div\r\n                class=\"caption\"\r\n                *ngIf=\"option.breadcumbs && option.breadcumbs.length\"\r\n              >\r\n                <qms-breadcrumb\r\n                  class=\"breadcrumb-containe\"\r\n                  type=\"table\"\r\n                  numDisplayItem=\"1\"\r\n                  [nodes]=\"option.breadcumbs\"\r\n                >\r\n                </qms-breadcrumb>\r\n              </div>\r\n            </div>\r\n            <div qms-line color=\"default-subtitle\" *ngIf=\"getItemId(option)\">\r\n              <span class=\"material-icons-outlined search__description-icon\">\r\n                local_offer\r\n              </span>\r\n              {{ getItemId(option) }}\r\n            </div>\r\n          </qms-list-item>\r\n        </mat-option>\r\n      </div>\r\n    </cdk-virtual-scroll-viewport>\r\n  </mat-autocomplete>\r\n\r\n  <div class=\"row\">\r\n    <div\r\n      class=\"qms-scrollbar col-12 qmslib_related_popup_content\"\r\n      [ngClass]=\"{\r\n        panel__content_item: checkedNodeList.length,\r\n        panel__content: !checkedNodeList.length\r\n      }\"\r\n    >\r\n      <mat-expansion-panel\r\n        hideToggle\r\n        id=\"qmslib_related_popup_common_001\"\r\n        [expanded]=\"isCommonExpanded\"\r\n        (opened)=\"isCommonExpanded = true\"\r\n        (closed)=\"isCommonExpanded = false\"\r\n        class=\"panel-tree\"\r\n      >\r\n        <div id=\"qmslib_related_popup_common_002\">\r\n          <qms-tree\r\n            [treeData]=\"treeData\"\r\n            [treeConfig]=\"treeConfig\"\r\n            [selectedData]=\"selectedData\"\r\n            [selectedRiskData]=\"selectedRiskData\"\r\n            [disabledList]=\"disabledList\"\r\n            (selectNodeEvent)=\"selectNodeTreeEvent($event)\"\r\n            (getChildNodeSelectOne)=\"getChildNodeSelectOne($event)\"\r\n            [expandOnTitleClick]=\"false\"\r\n            [expandToChildNode]=\"expandToChildNode\"\r\n          ></qms-tree>\r\n        </div>\r\n      </mat-expansion-panel>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- <div *ngIf=\"checkedNodeList.length\" class=\"line__divider\"></div>\r\n\r\n  <div *ngIf=\"checkedNodeList.length\" class=\"panel__item qms-scrollbar\">\r\n    <div class=\"related__item__inline\" *ngFor=\"let item of checkedNodeList\">\r\n      <button\r\n        *ngIf=\"item.itemName\"\r\n        mat-button\r\n        class=\"related__item__content\"\r\n        qms-tool-tip=\"{{\r\n          isEllipsisActive(itemName) ? getItemChipName(item) : ''\r\n        }}\"\r\n        mode=\"dark\"\r\n      >\r\n        <span class=\"related__item__content_name\" #itemName>{{\r\n          getItemChipName(item)\r\n        }}</span>\r\n        <mat-icon (click)=\"removeCheckedNodeList()\">cancel</mat-icon>\r\n      </button>\r\n    </div>\r\n  </div> -->\r\n\r\n  <div class=\"line__divider\"></div>\r\n\r\n  <div class=\"confirm__button__groups\">\r\n    <button\r\n      *ngIf=\"!checkedNodeList.length\"\r\n      qms-btn\r\n      style=\"margin-top: 7px\"\r\n      (click)=\"onAddClick()\"\r\n    >\r\n      {{ LANG.ADD }}\r\n    </button>\r\n    <button\r\n      *ngIf=\"checkedNodeList.length\"\r\n      qms-btn\r\n      style=\"margin-top: 0px\"\r\n      (click)=\"onAddClick()\"\r\n    >\r\n      {{ LANG.ADD }} ({{ checkedNodeList.length }})\r\n    </button>\r\n    <button\r\n      qms-btn-text\r\n      [ngStyle]=\"{ 'margin-top': checkedNodeList.length ? '0px' : '7px' }\"\r\n      (click)=\"onCloseClick()\"\r\n    >\r\n      {{ LANG.CANCEL }}\r\n    </button>\r\n  </div>\r\n</div>\r\n",
+                    template: "<div id=\"qmslib_related_popup\" class=\"qmslib__related__popup__container\">\r\n  <div id=\"qmslib_related_popup_header\">\r\n    <span mat-icon-button class=\"button__close\" (click)=\"onCloseClick()\">\r\n      <mat-icon mat-icon>close</mat-icon>\r\n    </span>\r\n    <div id=\"qmslib_related_popup_header_001\" mat-dialog-content>\r\n      <span>{{ moduleName }}</span>\r\n    </div>\r\n  </div>\r\n\r\n  <div\r\n    id=\"qmslib_related_popup_search\"\r\n    class=\"input__field\"\r\n    (click)=\"showSearchResult()\"\r\n  >\r\n    <input\r\n      #name\r\n      type=\"text\"\r\n      placeholder=\"{{ LANG.SEARCH }}\"\r\n      matInput\r\n      [formControl]=\"myControl\"\r\n      [matAutocomplete]=\"auto\"\r\n      #autoCompleteInputSearch\r\n    />\r\n    <mat-icon>search</mat-icon>\r\n  </div>\r\n\r\n  <div class=\"line__divider\"></div>\r\n\r\n  <mat-autocomplete\r\n    #auto=\"matAutocomplete\"\r\n    [displayWith]=\"displayRelated\"\r\n    class=\"mat-autocomplete_related-viewport\"\r\n  >\r\n    <cdk-virtual-scroll-viewport\r\n      qms-scrollbar\r\n      itemSize=\"10\"\r\n      class=\"related-viewport\"\r\n      *ngIf=\"filteredOptions.length\"\r\n    >\r\n      <div class=\"search__module-result\" *ngIf=\"filteredOptions.length\">\r\n        <mat-option\r\n          class=\"search__option\"\r\n          *ngFor=\"let option of getModuleFilteredOptions()\"\r\n          [value]=\"option\"\r\n          (click)=\"selectItemSearched(option)\"\r\n        >\r\n          <qms-list-item type=\"image-square\">\r\n            <mat-icon\r\n              leading-icon\r\n              type=\"image-square\"\r\n              [svgIcon]=\"getNodeIcon(option)\"\r\n            ></mat-icon>\r\n            <div qms-list-header>\r\n              <div\r\n                qms-line\r\n                type=\"caption\"\r\n                qms-tool-tip=\"{{\r\n                  isEllipsisActive(searchItemResult) ? option.parentName : ''\r\n                }}\"\r\n                mode=\"dark\"\r\n                *ngIf=\"getParentName(option)\"\r\n              >\r\n                <span #searchItemResult class=\"search__result__parent-name\">\r\n                  {{ option.parentName }}\r\n                </span>\r\n              </div>\r\n              <div qms-line type=\"subtitle\" class=\"search__option-name\">\r\n                {{ option.itemName }}\r\n              </div>\r\n              <div\r\n                class=\"caption\"\r\n                *ngIf=\"option.breadcumbs && option.breadcumbs.length\"\r\n              >\r\n                <qms-breadcrumb\r\n                  class=\"breadcrumb-containe\"\r\n                  type=\"table\"\r\n                  numDisplayItem=\"1\"\r\n                  [nodes]=\"option.breadcumbs\"\r\n                >\r\n                </qms-breadcrumb>\r\n              </div>\r\n            </div>\r\n            <div qms-line color=\"default-subtitle\" *ngIf=\"getItemId(option)\">\r\n              <span class=\"material-icons-outlined search__description-icon\">\r\n                local_offer\r\n              </span>\r\n              {{ getItemId(option) }}\r\n            </div>\r\n          </qms-list-item>\r\n        </mat-option>\r\n      </div>\r\n    </cdk-virtual-scroll-viewport>\r\n  </mat-autocomplete>\r\n\r\n  <div class=\"row\">\r\n    <div\r\n      class=\"qms-scrollbar col-12 qmslib_related_popup_content\"\r\n      [ngClass]=\"{\r\n        panel__content_item: checkedNodeList.length,\r\n        panel__content: !checkedNodeList.length\r\n      }\"\r\n    >\r\n      <mat-expansion-panel\r\n        hideToggle\r\n        id=\"qmslib_related_popup_common_001\"\r\n        [expanded]=\"isCommonExpanded\"\r\n        (opened)=\"isCommonExpanded = true\"\r\n        (closed)=\"isCommonExpanded = false\"\r\n        class=\"panel-tree\"\r\n      >\r\n        <div id=\"qmslib_related_popup_common_002\">\r\n          <qms-tree\r\n            [treeData]=\"treeData\"\r\n            [treeConfig]=\"treeConfig\"\r\n            [selectedData]=\"selectedData\"\r\n            [selectedRiskData]=\"selectedRiskData\"\r\n            [disabledList]=\"disabledList\"\r\n            (selectNodeEvent)=\"selectNodeTreeEvent($event)\"\r\n            (getChildNodeSelectOne)=\"getChildNodeSelectOne($event)\"\r\n            [expandOnTitleClick]=\"false\"\r\n            [expandToChildNode]=\"expandToChildNode\"\r\n          ></qms-tree>\r\n        </div>\r\n      </mat-expansion-panel>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- <div *ngIf=\"checkedNodeList.length\" class=\"line__divider\"></div>\r\n\r\n  <div *ngIf=\"checkedNodeList.length\" class=\"panel__item qms-scrollbar\">\r\n    <div class=\"related__item__inline\" *ngFor=\"let item of checkedNodeList\">\r\n      <button\r\n        *ngIf=\"item.itemName\"\r\n        mat-button\r\n        class=\"related__item__content\"\r\n        qms-tool-tip=\"{{\r\n          isEllipsisActive(itemName) ? getItemChipName(item) : ''\r\n        }}\"\r\n        mode=\"dark\"\r\n      >\r\n        <span class=\"related__item__content_name\" #itemName>{{\r\n          getItemChipName(item)\r\n        }}</span>\r\n        <mat-icon (click)=\"removeCheckedNodeList()\">cancel</mat-icon>\r\n      </button>\r\n    </div>\r\n  </div> -->\r\n\r\n  <div class=\"line__divider\"></div>\r\n\r\n  <div class=\"confirm__button__groups\">\r\n    <button\r\n      *ngIf=\"!checkedNodeList.length\"\r\n      qms-btn\r\n      style=\"margin-top: 7px\"\r\n      (click)=\"onAddClick()\"\r\n    >\r\n      {{ LANG.ADD }}\r\n    </button>\r\n    <button\r\n      *ngIf=\"checkedNodeList.length\"\r\n      qms-btn\r\n      style=\"margin-top: 0px\"\r\n      (click)=\"onAddClick()\"\r\n    >\r\n      {{ LANG.ADD }} ({{ checkedNodeList.length }})\r\n    </button>\r\n    <button\r\n      qms-btn-text\r\n      [ngStyle]=\"{ 'margin-top': checkedNodeList.length ? '0px' : '7px' }\"\r\n      (click)=\"onCloseClick()\"\r\n    >\r\n      {{ LANG.CANCEL }}\r\n    </button>\r\n  </div>\r\n</div>\r\n",
                     encapsulation: i0.ViewEncapsulation.None,
                     styles: [".qms-scrollbar::-webkit-scrollbar{width:12px}.qms-scrollbar::-webkit-scrollbar-track{background:rgba(0,0,0,.12);background-clip:content-box}.qms-scrollbar::-webkit-scrollbar-thumb{background:rgba(0,0,0,.38);border-radius:20px;width:4px;border:4px solid transparent;background-clip:content-box}.qms-scrollbar::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.5);background-clip:content-box;border:4px solid transparent}.qms-scrollbar.none-scroll-bg::-webkit-scrollbar-track{background:transparent;background-clip:content-box}.qms__popup .button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qms__danger button{border:none;color:#fff;padding:0;text-align:center;text-decoration:none;display:inline-block;cursor:pointer;height:20px;width:20px;font-family:Open Sans;font-size:12px;font-weight:600;font-style:normal;line-height:16px}.qms__danger .red{background-color:#9e360f;margin-left:10px}.qms__danger .yellow{background-color:#e4cf53;margin-left:10px;color:#323232}.qms__danger .green{background-color:#00804c;margin-left:10px}.confirm__button__groups{margin-top:11px}.confirm__button__groups button{min-height:36px;width:auto;font-family:Open Sans;font-weight:500;font-size:14px;letter-spacing:1px;line-height:16px;padding-left:15px;padding-right:15px;margin-right:5px;float:right}.confirm__button__groups .confirm{background:#f8f9f9}.confirm__button__groups .confirm:hover{background:#001983;color:#fff}.confirm__button__groups .confirm:disabled{cursor:not-allowed}.confirm__button__groups .cancel{background:#f8f9f9}.confirm__button__groups .cancel:hover{background:#001983;color:#fff}.qmslib__related__popup__container .input__field{display:flex;align-items:center}.qmslib__related__popup__container .input__field input{width:100%;padding:10px;outline:none;border:none;background:#eee}.qmslib__related__popup__container .input__field .mat-icon{margin-left:-30px;cursor:pointer;vertical-align:middle}.qmslib__related__popup__container .line__divider{border-bottom:1px solid #ccc;height:1px;margin-top:10px;min-width:300px;max-width:100%}.qmslib__related__popup__container .button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qmslib__related__popup__container .panel__content{height:450px;overflow:auto;margin-top:12px}.qmslib__related__popup__container .panel__content_item{height:350px;overflow:auto;margin-top:12px}.qmslib__related__popup__container .panel-tree .mat-expansion-panel-body{padding:0 12px 12px}.qmslib__related__popup__container .mat-expansion-panel-header{height:30px;font-size:12px;letter-spacing:1px;font-family:Raleway;font-weight:600;padding:0}.qmslib__related__popup__container .mat-expansion-panel-header .mat-expansion-panel-header-title{align-items:center;margin-left:12px}.qmslib__related__popup__container .mat-expansion-panel-header .related_popup_toggle-btn{width:1.5rem;height:1.5rem;line-height:1.5rem}.qmslib__related__popup__container .mat-expansion-panel:not([class*=mat-elevation-z]){box-shadow:none}.qmslib__related__popup__container .panel__item{height:100px;margin-top:12px;overflow-x:hidden;overflow-y:auto;padding-right:5px;width:100%;max-width:100%;display:flex;flex-wrap:wrap;align-content:flex-start}.qmslib__related__popup__container .panel__item .related__item__inline{max-width:100%}.qmslib__related__popup__container .panel__item .related__item__content{height:32px;line-height:32px;background-color:#e5e5e5;max-width:100%;margin-bottom:5px;margin-left:2.5px;margin-right:2.5px}.qmslib__related__popup__container .panel__item .related__item__content .mat-icon{color:#8e8e8e;font-size:24px}.qmslib__related__popup__container .panel__item .related__item__content span.related__item__content_name{display:inline-block;min-width:calc(100% - 13px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:320px}cdk-virtual-scroll-viewport{overflow-x:hidden}cdk-virtual-scroll-viewport .search__module-result{margin:1.5rem;padding:0 0 .5rem}cdk-virtual-scroll-viewport .search__module-result .search__module-title{font-size:14px;font-weight:600}cdk-virtual-scroll-viewport .search__module-result .search__option{height:auto;line-height:normal;padding:8px 0;border-bottom:1px solid #e0e0e0}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item.mat-2-line.image-item{height:auto}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content{margin:0;border-bottom:none}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .wrap-image.image-square{width:2.5rem;height:100%;background:transparent;align-self:center;margin-right:0}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .wrap-image.image-square img{width:24px;height:24px}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .material-icons-outlined.leading-icon,cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content mat-icon.leading-icon{padding:4px 0 4px 4px}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .subtitle{font-weight:400}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .caption{overflow:hidden;line-height:normal;white-space:normal;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;padding:0;margin:0}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .caption span.search__result__parent-name{display:inline-block;width:auto;width:calc(100% - 13px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .default-subtitle{color:rgba(0,0,0,.38)}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .search__description-icon{margin-right:0;width:12px;height:12px;font-size:12px}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .qms-list-text{border-bottom:none}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .breadcrumb-containe .qms-breadcrumb-item .mat-icon{font-size:16px!important;padding-bottom:1px}cdk-virtual-scroll-viewport .search__module-result svg{display:block}#qmslib_related_popup_header_001{margin-bottom:20px;padding:0;font-weight:600;font-family:Raleway}.padding-5{padding:5px}.mat-autocomplete_related-viewport{height:100%;max-height:100%!important}.mat-autocomplete_related-viewport .cdk-virtual-scroll-content-wrapper{width:100%}.mat-autocomplete_related-viewport .related-viewport{min-height:10.25rem}"]
                 },] }
@@ -20890,7 +20918,7 @@
             });
             this.globalService.searchRelated.pipe(operators.takeUntil(this.ngUnsubscribe)).subscribe(function (res) {
                 if (res && res.length) {
-                    _this.filteredOptions = res;
+                    _this.filteredOptions = _this.toRelatedOptions(res);
                 }
             });
             this.globalService.splitViewValue.pipe(operators.takeUntil(this.ngUnsubscribe)).subscribe(function (res) {
@@ -20982,6 +21010,11 @@
             this.searchOrder = this.getSearchOrder();
         };
         SelectProcessDocumentPopupComponent.prototype.ngAfterViewChecked = function () {
+            this.cdRef.detectChanges();
+            if (this.filteredOptions && this.filteredOptions.length) {
+                // this.autoComplete.openPanel();
+                this.setResultHeight();
+            }
         };
         SelectProcessDocumentPopupComponent.prototype.removeCheckedNodeList = function (item) {
             var _this = this;
@@ -21080,141 +21113,40 @@
             return related ? related.itemName : undefined;
         };
         SelectProcessDocumentPopupComponent.prototype.selectRelated = function (item) {
-            var _this = this;
             var index = -1;
             this.selectedNode = [];
             if (this.treeConfig1.showCheckBox) {
                 index = this.checkedNodeList.findIndex(function (x) {
-                    return x.id === item.id && x.parentId === item.parentId;
+                    return x.id.toLowerCase() === item.id.toLowerCase() && x.parentId.toLowerCase() === item.parentId.toLowerCase() && x.itemType === item.itemType;
                 });
             }
             if (index < 0) {
-                var position = -1;
-                var node = void 0;
-                var typeId = void 0;
-                if (item.itemType === this.dataType.document) {
+                if (item.itemType === this.dataType.document || item.itemType === this.dataType.folder) {
                     // document  
                     var isExistInDisabled = this.disabledList2.findIndex(function (x) {
-                        return x.id && x.id.toLowerCase() === item.id.toLowerCase();
-                    });
-                    if (isExistInDisabled >= 0) {
+                        var _a;
+                        return ((_a = x.id) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === item.id.toLowerCase() && (!item.parentId || x.parentId.toLowerCase() === item.parentId.toLowerCase() && x.itemType === item.itemType);
+                    }) >= 0;
+                    if (isExistInDisabled) {
                         return;
                     }
-                    position = this.treeData2.findIndex(function (x) {
-                        return x.id === item.id && x.parentId === item.parentId && !x.expandable;
-                    });
-                    if (position >= 0) {
-                        this.addToChecklistNodeAndSelectedData(item);
-                        node = this.treeData2[position];
-                        typeId = this.dataType.document;
-                        var treeNode = {
-                            id: node.childId,
-                            name: node.childName,
-                            children: [],
-                            parentId: node.rootId,
-                            expandable: false
-                        };
-                        this.dataTrees.toArray()[1].todoItemSelectionProcessDocument([treeNode]);
-                    }
-                    else {
-                        this.addNodeToTree(item);
-                        this.addToChecklistNodeAndSelectedData(item);
-                        setTimeout(function () {
-                            var treeNode = {
-                                id: item.id,
-                                name: item.itemName,
-                                children: [],
-                                parentId: item.parentId,
-                                expandable: false
-                            };
-                            _this.dataTrees.toArray()[1].todoItemSelectionProcessDocument([treeNode]);
-                        }, 500);
-                    }
+                    this.addToChecklistNodeAndSelectedData(item);
                 }
-                else if (item.itemType === this.dataType.folder) {
-                    position = this.treeData2.findIndex(function (x) {
-                        return x.id.toLowerCase() === item.id.toLowerCase() && (!item.parentId || x.parentId.toLowerCase() === item.parentId.toLowerCase());
-                    });
-                    typeId = item.itemType;
-                    if (position >= 0) {
-                        node = this.treeData2[position];
-                        var treeNode = {
-                            id: node.id,
-                            name: node.name,
-                            children: [],
-                            parentId: node.parentId,
-                            expandable: true,
-                        };
-                        this.dataTrees.toArray()[1].todoFolderSelection([treeNode]);
-                    }
-                    else {
-                        this.addNodeToTree(item);
-                        this.addToChecklistNodeAndSelectedData(item);
-                    }
-                    return;
-                }
-                else if (item.itemType === this.dataType.area) {
-                    position = this.treeData1.findIndex(function (x) {
-                        return x.id.toLowerCase() === item.id.toLowerCase() && (!item.parentId || x.parentId.toLowerCase() === item.parentId.toLowerCase()) && x.expandable;
-                    });
-                    typeId = item.itemType;
-                    if (position >= 0) {
-                        node = this.treeData1[position];
-                        var treeNode = {
-                            id: node.id,
-                            name: node.name,
-                            children: [],
-                            parentId: node.parentId,
-                            expandable: true
-                        };
-                        this.dataTrees.toArray()[0].todoFolderSelection([treeNode]);
-                    }
-                    else {
-                        this.addNodeToTree(item);
-                        this.addToChecklistNodeAndSelectedData(item);
-                    }
-                    return;
-                }
-                else {
+                else if (item.itemType === this.dataType.area || item.itemType === this.dataType.process) {
                     var isExistInDisabled = this.disabledList.findIndex(function (x) {
-                        return x.id.toLowerCase() === item.id.toLowerCase() && (!item.parentId || x.parentId.toLowerCase() === item.parentId.toLowerCase());
-                    });
-                    if (isExistInDisabled >= 0) {
+                        var _a;
+                        return ((_a = x.id) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === item.id.toLowerCase() && (!item.parentId || x.parentId.toLowerCase() === item.parentId.toLowerCase() && x.itemType === item.itemType);
+                    }) >= 0;
+                    if (isExistInDisabled) {
                         return;
                     }
-                    position = this.treeData1.findIndex(function (x) {
-                        return x.id.toLowerCase() === item.id.toLowerCase() && x.parentId.toLowerCase() === item.parentId.toLowerCase() && !x.expandable;
-                    });
-                    if (position >= 0) {
-                        node = this.treeData1[position];
-                        typeId = this.itemType;
-                        var treeNode = {
-                            id: node.childId,
-                            name: node.childName,
-                            children: [],
-                            parentId: node.rootId,
-                            expandable: false
-                        };
-                        this.addToChecklistNodeAndSelectedData(item);
-                        this.dataTrees.toArray()[0].todoItemSelectionProcessDocument([treeNode]);
-                    }
-                    else {
-                        this.addNodeToTree(item);
-                        this.addToChecklistNodeAndSelectedData(item);
-                        setTimeout(function () {
-                            var treeNode = {
-                                id: item.id,
-                                name: item.itemName,
-                                children: [],
-                                parentId: item.parentId,
-                                expandable: false
-                            };
-                            _this.dataTrees.toArray()[0].todoItemSelectionProcessDocument([treeNode]);
-                        }, 500);
-                    }
+                    this.addToChecklistNodeAndSelectedData(item);
                 }
             }
         };
+        SelectProcessDocumentPopupComponent.prototype.displayWhenSelectRelatedOption = function ($event) {
+            return '';
+        };
         SelectProcessDocumentPopupComponent.prototype.addNodeToTree = function (item) {
             var newNodeDocs = new NewTreeModel();
             newNodeDocs.id = item.id;
@@ -21255,30 +21187,34 @@
                 (!newNodeDocs.parentId || x.parentId.toLowerCase() === newNodeDocs.parentId.toLowerCase()) && x.expandable === newNodeDocs.expandable; });
             if (index < 0) {
                 if (item.itemType == exports.DataType.folder || item.itemType == exports.DataType.document) {
-                    this.documentCheckedList.push({
-                        id: newNodeDocs.id,
-                        name: newNodeDocs.name,
-                        itemType: item.itemType,
-                        parentId: newNodeDocs.parentId,
-                        levelType: newNodeDocs.levelType,
-                        level: 0,
-                        disabled: false,
-                        expandable: newNodeDocs.expandable,
-                        hasChild: newNodeDocs.expandable
-                    });
+                    if (this.documentCheckedList.findIndex(function (x) { return x.id.toLowerCase() === newNodeDocs.id.toLowerCase() && x.parentId.toLowerCase() === newNodeDocs.parentId.toLowerCase(); }) < 0) {
+                        this.documentCheckedList.push({
+                            id: newNodeDocs.id,
+                            name: newNodeDocs.name,
+                            itemType: item.itemType,
+                            parentId: newNodeDocs.parentId,
+                            levelType: newNodeDocs.levelType,
+                            level: 0,
+                            disabled: false,
+                            expandable: newNodeDocs.expandable,
+                            hasChild: newNodeDocs.expandable
+                        });
+                    }
                 }
                 else {
-                    this.commonCheckedList.push({
-                        id: newNodeDocs.id,
-                        name: newNodeDocs.name,
-                        itemType: item.itemType,
-                        parentId: newNodeDocs.parentId,
-                        levelType: newNodeDocs.levelType,
-                        level: 0,
-                        disabled: false,
-                        expandable: newNodeDocs.expandable,
-                        hasChild: newNodeDocs.expandable
-                    });
+                    if (this.commonCheckedList.findIndex(function (x) { return x.id.toLowerCase() === newNodeDocs.id.toLowerCase() && x.parentId.toLowerCase() === newNodeDocs.parentId.toLowerCase(); }) < 0) {
+                        this.commonCheckedList.push({
+                            id: newNodeDocs.id,
+                            name: newNodeDocs.name,
+                            itemType: item.itemType,
+                            parentId: newNodeDocs.parentId,
+                            levelType: newNodeDocs.levelType,
+                            level: 0,
+                            disabled: false,
+                            expandable: newNodeDocs.expandable,
+                            hasChild: newNodeDocs.expandable
+                        });
+                    }
                 }
                 this.checkedNodeList.push({
                     moduleId: this.moduleId,
@@ -21358,6 +21294,7 @@
                 level: 0,
                 disabled: false,
                 hasChild: item.itemType == exports.DataType.area || item.itemType == exports.DataType.folder,
+                itemType: item.itemType
             });
         };
         SelectProcessDocumentPopupComponent.prototype.setTypeProcess = function (expand) {
@@ -21523,7 +21460,7 @@
                 return;
             }
             var index = this.checkedNodeList.findIndex(function (x) { return x.id.toLowerCase() === node.id.toLowerCase()
-                && (!node.parentId || x.parentId.toLowerCase() === node.parentId.toLowerCase()) && x.itemType == node.itemType; });
+                && (!node.parentId || x.parentId.toLowerCase() === node.parentId.toLowerCase()) && x.itemType === node.itemType; });
             if (index >= 0) {
                 this.removeCheckedNodeList({
                     id: node.id,
@@ -21596,14 +21533,36 @@
                 this.onSelectFolderItem.emit(item);
             }
         };
+        SelectProcessDocumentPopupComponent.prototype.hasSelected = function (related) {
+            var arrDisabledList = this.disabledList.concat(this.disabledList2);
+            return arrDisabledList.some(function (node) { return node.id.toUpperCase() === related.id.toUpperCase(); });
+        };
+        SelectProcessDocumentPopupComponent.prototype.toRelatedOptions = function (relateds) {
+            var e_1, _b;
+            var results = [];
+            try {
+                for (var relateds_1 = __values(relateds), relateds_1_1 = relateds_1.next(); !relateds_1_1.done; relateds_1_1 = relateds_1.next()) {
+                    var related = relateds_1_1.value;
+                    results.push(Object.assign(Object.assign({}, related), { disabled: this.hasSelected(related) }));
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (relateds_1_1 && !relateds_1_1.done && (_b = relateds_1.return)) _b.call(relateds_1);
+                }
+                finally { if (e_1) throw e_1.error; }
+            }
+            return results;
+        };
         return SelectProcessDocumentPopupComponent;
     }());
     SelectProcessDocumentPopupComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'qms-select-process-document',
-                    template: "<div id=\"qmslib_related_popup\" class=\"qmslib__related__popup__container\">\r\n    <div id=\"qmslib_related_popup_header\">\r\n      <span mat-icon-button class=\"button__close\" (click)=\"onCloseClick()\">\r\n        <mat-icon mat-icon>close</mat-icon>\r\n      </span>\r\n      <div id=\"qmslib_related_popup_header_001\" mat-dialog-content>\r\n        <span>{{ moduleName | uppercase }}</span>\r\n      </div>\r\n    </div>\r\n  \r\n    <div id=\"qmslib_related_popup_search\" class=\"input__field\">\r\n      <input\r\n        type=\"text\"\r\n        placeholder=\"{{ LANG.SEARCH }}\"\r\n        matInput\r\n        [formControl]=\"myControl\"\r\n        [matAutocomplete]=\"auto\"\r\n      />\r\n      <mat-icon>search</mat-icon>\r\n    </div>\r\n  \r\n    <div class=\"line__divider\"></div>\r\n  \r\n    <mat-autocomplete\r\n      #auto=\"matAutocomplete\"\r\n      class=\"mat-autocomplete_related-viewport\"\r\n    >\r\n      <cdk-virtual-scroll-viewport\r\n        qms-scrollbar\r\n        itemSize=\"10\"\r\n        [class.related-viewport]=\"isInputValue\"\r\n      >\r\n        <ng-container *ngFor=\"let type of searchOrder\">\r\n          <div\r\n            class=\"search__module-result\"\r\n            *ngIf=\"canShowSearchOption(type.value)\"\r\n          >\r\n            <span class=\"search__module-title\">{{ getTitle(type.value) }}</span>\r\n            <mat-option\r\n              class=\"search__option\"\r\n              *ngFor=\"let option of getModuleFilteredOptions(type.value)\"\r\n              [value]=\"option\"\r\n              (click)=\"selectRelated(option)\"\r\n            >\r\n              <qms-list-item type=\"image-square\">\r\n                <mat-icon\r\n                  leading-icon\r\n                  type=\"image-square\"\r\n                  [svgIcon]=\"getNodeIcon(option)\"\r\n                ></mat-icon>\r\n                <div qms-list-header>\r\n                  <div qms-line type=\"subtitle\" class=\"search__option-name\">\r\n                    {{ option.itemName }}\r\n                  </div>\r\n                  <div\r\n                    class=\"caption\"\r\n                    *ngIf=\"option.breadcumbs && option.breadcumbs.length\"\r\n                  >\r\n                    <qms-breadcrumb\r\n                      class=\"breadcrumb-containe\"\r\n                      type=\"table\"\r\n                      numDisplayItem=\"1\"\r\n                      [nodes]=\"option.breadcumbs\"\r\n                    >\r\n                    </qms-breadcrumb>\r\n                  </div>\r\n                </div>\r\n                <div qms-line color=\"default-subtitle\" *ngIf=\"getItemId(option)\">\r\n                  <span class=\"material-icons-outlined search__description-icon\">\r\n                    local_offer\r\n                  </span>\r\n                  {{ getItemId(option) }}\r\n                </div>\r\n              </qms-list-item>\r\n            </mat-option>\r\n          </div>\r\n        </ng-container>\r\n      </cdk-virtual-scroll-viewport>\r\n    </mat-autocomplete>\r\n  \r\n    <div class=\"row\">\r\n      <div\r\n        class=\"qms-scrollbar qmslib_related_popup_content\"\r\n        [ngClass]=\"{\r\n          panel__content_item: checkedNodeList.length,\r\n          panel__content: !checkedNodeList.length,\r\n          'col-6': splitView,\r\n          'col-12': !splitView\r\n        }\"\r\n      >\r\n        <mat-expansion-panel\r\n          hideToggle\r\n          id=\"qmslib_related_popup_common_001\"\r\n          [expanded]=\"isCommonExpanded\"\r\n          (opened)=\"isCommonExpanded = true\"\r\n          (closed)=\"isCommonExpanded = false\"\r\n          class=\"panel-tree\"\r\n        >\r\n          <mat-expansion-panel-header class=\"padding-5\">\r\n            <mat-panel-title *ngIf=\"moduleId === module.documentProcess\">\r\n              {{ LANG.PROCESSES | uppercase }}\r\n            </mat-panel-title>\r\n            <button qms-btn-icon class=\"related_popup_toggle-btn\">\r\n              <mat-icon>\r\n                {{\r\n                  isCommonExpanded ? \"keyboard_arrow_up\" : \"keyboard_arrow_down\"\r\n                }}\r\n              </mat-icon>\r\n            </button>\r\n          </mat-expansion-panel-header>\r\n          <div id=\"qmslib_related_popup_common_002\">\r\n            <qms-tree-new\r\n              [treeData]=\"treeData1\"\r\n              [treeConfig]=\"treeConfig1\"\r\n              [selectedData]=\"selectedData\"\r\n              [selectedRiskData]=\"selectedRiskData\"\r\n              [disabledList]=\"disabledList\"\r\n              (nodeExpandEvent)=\"getChildrenOfFolder($event, dataType.area)\"\r\n              (selectNodeEvent)=\"selectNodeTreeEvent($event)\"\r\n              (getChildNodeSelectOne)=\"getChildNodeSelectOne($event)\"\r\n              (selectFolderEvent)=\"getItemOfFolder($event, dataType.area)\"\r\n              [expandOnTitleClick]=\"!splitView\"\r\n              [parentNodeOnClick]=\"parentNodeSelected\"\r\n              (treeControlNodes)=\"selectTreeControlNodeProcess($event)\"\r\n            ></qms-tree-new>\r\n          </div>\r\n        </mat-expansion-panel>\r\n  \r\n        <div\r\n          *ngIf=\"moduleId === module.documentProcess\"\r\n          class=\"line__divider\"\r\n        ></div>\r\n  \r\n        <mat-expansion-panel\r\n          hideToggle\r\n          *ngIf=\"moduleId === module.documentProcess\"\r\n          id=\"qmslib_related_popup_document_001\"\r\n          [expanded]=\"isDocumentExpanded\"\r\n          (opened)=\"isDocumentExpanded = true\"\r\n          (closed)=\"isDocumentExpanded = false\"\r\n          class=\"panel-tree\"\r\n        >\r\n          <mat-expansion-panel-header class=\"padding-5\">\r\n            <mat-panel-title> {{ LANG.DOCUMENTS | uppercase }} </mat-panel-title>\r\n            <button qms-btn-icon class=\"related_popup_toggle-btn\">\r\n              <mat-icon>\r\n                {{\r\n                  isDocumentExpanded ? \"keyboard_arrow_up\" : \"keyboard_arrow_down\"\r\n                }}\r\n              </mat-icon>\r\n            </button>\r\n          </mat-expansion-panel-header>\r\n          <div id=\"qmslib_related_popup_document_002\">\r\n            <qms-tree-new\r\n              [treeData]=\"treeData2\"\r\n              [treeConfig]=\"treeConfig2\"\r\n              [selectedData]=\"selectedData2\"\r\n              [disabledList]=\"disabledList2\"\r\n              (nodeExpandEvent)=\"getChildrenOfFolder($event, dataType.folder)\"\r\n              (selectNodeEvent)=\"selectNodeTreeEvent($event)\"\r\n              (getChildNodeSelectOne)=\"getChildNodeSelectOne($event)\"\r\n              (selectFolderEvent)=\"getItemOfFolder($event, dataType.folder)\"\r\n              [expandOnTitleClick]=\"!splitView\"\r\n              [parentNodeOnClick]=\"parentNodeSelected\"\r\n              (treeControlNodes)=\"selectTreeControlNodeDocument($event)\"\r\n            ></qms-tree-new>\r\n          </div>\r\n        </mat-expansion-panel>\r\n      </div>\r\n      <div\r\n        *ngIf=\"splitView\"\r\n        class=\"\r\n          qms-scrollbar\r\n          qmslib-related-popup-splitview qmslib_related_popup_content\r\n          col-6\r\n        \"\r\n        [ngClass]=\"{\r\n          panel__content_item: checkedNodeList.length,\r\n          panel__content: !checkedNodeList.length\r\n        }\"\r\n      >\r\n        <div class=\"splitview-header\" *ngIf=\"selectedFolder\">\r\n          {{ splitViewTitle }}\r\n        </div>\r\n        <div class=\"expand-node\" *ngFor=\"let node of itemInSplitview\">\r\n          <mat-checkbox\r\n            qms-group-options\r\n            [disabled]=\"node.disabled\"\r\n            color=\"default\"\r\n            [checked]=\"isNodeSelected(node)\"\r\n            (change)=\"toggleSelectItem(node)\"\r\n          ></mat-checkbox>\r\n          <mat-icon\r\n            class=\"mat-icon-rtl-mirror material-icons-outlined\"\r\n            [svgIcon]=\"getNodeIcon(node)\"\r\n          ></mat-icon>\r\n          <span class=\"text-node\">{{ node.itemName }}</span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  \r\n    <div *ngIf=\"checkedNodeList.length\" class=\"line__divider\"></div>\r\n  \r\n    <div *ngIf=\"checkedNodeList.length\" class=\"panel__item qms-scrollbar\">\r\n      <div class=\"related__item__inline\" *ngFor=\"let item of checkedNodeList\">\r\n        <button\r\n          *ngIf=\"item.itemName\"\r\n          mat-button\r\n          class=\"related__item__content\"\r\n          qms-tool-tip=\"{{\r\n            isEllipsisActive(itemName) ? getItemChipName(item) : ''\r\n          }}\"\r\n          mode=\"dark\"\r\n        >\r\n          <span class=\"related__item__content_name\" #itemName>{{\r\n            getItemChipName(item)\r\n          }}</span>\r\n          <mat-icon\r\n            *ngIf=\"!(treeConfig1?.selectOne || treeConfig2?.selectOne)\"\r\n            (click)=\"removeCheckedNodeList(item)\"\r\n            >cancel</mat-icon\r\n          >\r\n        </button>\r\n      </div>\r\n    </div>\r\n  \r\n    <div class=\"line__divider\"></div>\r\n  \r\n    <div class=\"confirm__button__groups\">\r\n      <button\r\n        *ngIf=\"!checkedNodeList.length\"\r\n        qms-btn\r\n        style=\"margin-top: 7px\"\r\n        (click)=\"onAddClick()\"\r\n      >\r\n        {{ LANG.ADD }}\r\n      </button>\r\n      <button\r\n        *ngIf=\"checkedNodeList.length\"\r\n        qms-btn\r\n        style=\"margin-top: 0px\"\r\n        (click)=\"onAddClick()\"\r\n      >\r\n        {{ LANG.ADD }} ({{ checkedNodeList.length }})\r\n      </button>\r\n      <button\r\n        qms-btn-text\r\n        [ngStyle]=\"{ 'margin-top': checkedNodeList.length ? '0px' : '7px' }\"\r\n        (click)=\"onCloseClick()\"\r\n      >\r\n        {{ LANG.CANCEL }}\r\n      </button>\r\n    </div>\r\n  </div>\r\n  ",
+                    template: "<div id=\"qmslib_related_popup\" class=\"qmslib__related__popup__container\">\r\n    <div id=\"qmslib_related_popup_header\">\r\n      <span mat-icon-button class=\"button__close\" (click)=\"onCloseClick()\">\r\n        <mat-icon mat-icon>close</mat-icon>\r\n      </span>\r\n      <div id=\"qmslib_related_popup_header_001\" mat-dialog-content>\r\n        <span>{{ moduleName | uppercase }}</span>\r\n      </div>\r\n    </div>\r\n  \r\n    <div id=\"qmslib_related_popup_search\" class=\"input__field\">\r\n      <input\r\n        type=\"text\"\r\n        placeholder=\"{{ LANG.SEARCH }}\"\r\n        matInput\r\n        [formControl]=\"myControl\"\r\n        [matAutocomplete]=\"auto\"\r\n      />\r\n      <mat-icon>search</mat-icon>\r\n    </div>\r\n  \r\n    <div class=\"line__divider\"></div>\r\n  \r\n    <mat-autocomplete\r\n      #auto=\"matAutocomplete\"\r\n      class=\"mat-autocomplete_related-viewport\"\r\n      (optionSelected)=\"selectRelated($event.option.value)\"\r\n      [displayWith]=\"displayWhenSelectRelatedOption\"\r\n    >\r\n      <cdk-virtual-scroll-viewport\r\n        qms-scrollbar\r\n        itemSize=\"10\"\r\n        [class.related-viewport]=\"isInputValue\"\r\n        *ngIf=\"filteredOptions.length\"\r\n      >\r\n        <ng-container *ngFor=\"let type of searchOrder\">\r\n          <div\r\n            class=\"search__module-result\"\r\n            *ngIf=\"canShowSearchOption(type.value)\"\r\n          >\r\n            <span class=\"search__module-title\">{{ getTitle(type.value) }}</span>\r\n            <mat-option\r\n              class=\"search__option\"\r\n              *ngFor=\"let option of getModuleFilteredOptions(type.value)\"\r\n              [value]=\"option\"\r\n              [disabled]=\"option.disabled\"\r\n            >\r\n              <qms-list-item type=\"image-square\">\r\n                <mat-icon\r\n                  leading-icon\r\n                  type=\"image-square\"\r\n                  [svgIcon]=\"getNodeIcon(option)\"\r\n                ></mat-icon>\r\n                <div qms-list-header>\r\n                  <div qms-line type=\"subtitle\" class=\"search__option-name\">\r\n                    {{ option.itemName }}\r\n                  </div>\r\n                  <div\r\n                    class=\"caption\"\r\n                    *ngIf=\"option.breadcumbs && option.breadcumbs.length\"\r\n                  >\r\n                    <qms-breadcrumb\r\n                      class=\"breadcrumb-containe\"\r\n                      type=\"table\"\r\n                      numDisplayItem=\"1\"\r\n                      [nodes]=\"option.breadcumbs\"\r\n                    >\r\n                    </qms-breadcrumb>\r\n                  </div>\r\n                </div>\r\n                <div qms-line color=\"default-subtitle\" *ngIf=\"getItemId(option)\">\r\n                  <span class=\"material-icons-outlined search__description-icon\">\r\n                    local_offer\r\n                  </span>\r\n                  {{ getItemId(option) }}\r\n                </div>\r\n              </qms-list-item>\r\n            </mat-option>\r\n          </div>\r\n        </ng-container>\r\n      </cdk-virtual-scroll-viewport>\r\n    </mat-autocomplete>\r\n  \r\n    <div class=\"row\">\r\n      <div\r\n        class=\"qms-scrollbar qmslib_related_popup_content\"\r\n        [ngClass]=\"{\r\n          panel__content_item: checkedNodeList.length,\r\n          panel__content: !checkedNodeList.length,\r\n          'col-6': splitView,\r\n          'col-12': !splitView\r\n        }\"\r\n      >\r\n        <mat-expansion-panel\r\n          hideToggle\r\n          id=\"qmslib_related_popup_common_001\"\r\n          [expanded]=\"isCommonExpanded\"\r\n          (opened)=\"isCommonExpanded = true\"\r\n          (closed)=\"isCommonExpanded = false\"\r\n          class=\"panel-tree\"\r\n        >\r\n          <mat-expansion-panel-header class=\"padding-5\">\r\n            <mat-panel-title *ngIf=\"moduleId === module.documentProcess\">\r\n              {{ LANG.PROCESSES | uppercase }}\r\n            </mat-panel-title>\r\n            <button qms-btn-icon class=\"related_popup_toggle-btn\">\r\n              <mat-icon>\r\n                {{\r\n                  isCommonExpanded ? \"keyboard_arrow_up\" : \"keyboard_arrow_down\"\r\n                }}\r\n              </mat-icon>\r\n            </button>\r\n          </mat-expansion-panel-header>\r\n          <div id=\"qmslib_related_popup_common_002\">\r\n            <qms-tree-new\r\n              [treeData]=\"treeData1\"\r\n              [treeConfig]=\"treeConfig1\"\r\n              [selectedData]=\"selectedData\"\r\n              [selectedRiskData]=\"selectedRiskData\"\r\n              [disabledList]=\"disabledList\"\r\n              (nodeExpandEvent)=\"getChildrenOfFolder($event, dataType.area)\"\r\n              (selectNodeEvent)=\"selectNodeTreeEvent($event)\"\r\n              (getChildNodeSelectOne)=\"getChildNodeSelectOne($event)\"\r\n              (selectFolderEvent)=\"getItemOfFolder($event, dataType.area)\"\r\n              [expandOnTitleClick]=\"!splitView\"\r\n              [parentNodeOnClick]=\"parentNodeSelected\"\r\n              (treeControlNodes)=\"selectTreeControlNodeProcess($event)\"\r\n            ></qms-tree-new>\r\n          </div>\r\n        </mat-expansion-panel>\r\n  \r\n        <div\r\n          *ngIf=\"moduleId === module.documentProcess\"\r\n          class=\"line__divider\"\r\n        ></div>\r\n  \r\n        <mat-expansion-panel\r\n          hideToggle\r\n          *ngIf=\"moduleId === module.documentProcess\"\r\n          id=\"qmslib_related_popup_document_001\"\r\n          [expanded]=\"isDocumentExpanded\"\r\n          (opened)=\"isDocumentExpanded = true\"\r\n          (closed)=\"isDocumentExpanded = false\"\r\n          class=\"panel-tree\"\r\n        >\r\n          <mat-expansion-panel-header class=\"padding-5\">\r\n            <mat-panel-title> {{ LANG.DOCUMENTS | uppercase }} </mat-panel-title>\r\n            <button qms-btn-icon class=\"related_popup_toggle-btn\">\r\n              <mat-icon>\r\n                {{\r\n                  isDocumentExpanded ? \"keyboard_arrow_up\" : \"keyboard_arrow_down\"\r\n                }}\r\n              </mat-icon>\r\n            </button>\r\n          </mat-expansion-panel-header>\r\n          <div id=\"qmslib_related_popup_document_002\">\r\n            <qms-tree-new\r\n              [treeData]=\"treeData2\"\r\n              [treeConfig]=\"treeConfig2\"\r\n              [selectedData]=\"selectedData2\"\r\n              [disabledList]=\"disabledList2\"\r\n              (nodeExpandEvent)=\"getChildrenOfFolder($event, dataType.folder)\"\r\n              (selectNodeEvent)=\"selectNodeTreeEvent($event)\"\r\n              (getChildNodeSelectOne)=\"getChildNodeSelectOne($event)\"\r\n              (selectFolderEvent)=\"getItemOfFolder($event, dataType.folder)\"\r\n              [expandOnTitleClick]=\"!splitView\"\r\n              [parentNodeOnClick]=\"parentNodeSelected\"\r\n              (treeControlNodes)=\"selectTreeControlNodeDocument($event)\"\r\n            ></qms-tree-new>\r\n          </div>\r\n        </mat-expansion-panel>\r\n      </div>\r\n      <div\r\n        *ngIf=\"splitView\"\r\n        class=\"\r\n          qms-scrollbar\r\n          qmslib-related-popup-splitview qmslib_related_popup_content\r\n          col-6\r\n        \"\r\n        [ngClass]=\"{\r\n          panel__content_item: checkedNodeList.length,\r\n          panel__content: !checkedNodeList.length\r\n        }\"\r\n      >\r\n        <div class=\"splitview-header\" *ngIf=\"selectedFolder\">\r\n          {{ splitViewTitle }}\r\n        </div>\r\n        <div class=\"expand-node\" *ngFor=\"let node of itemInSplitview\">\r\n          <mat-checkbox\r\n            qms-group-options\r\n            [disabled]=\"node.disabled\"\r\n            color=\"default\"\r\n            [checked]=\"isNodeSelected(node)\"\r\n            (change)=\"toggleSelectItem(node)\"\r\n          ></mat-checkbox>\r\n          <mat-icon\r\n            class=\"mat-icon-rtl-mirror material-icons-outlined\"\r\n            [svgIcon]=\"getNodeIcon(node)\"\r\n          ></mat-icon>\r\n          <span class=\"text-node\">{{ node.itemName }}</span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  \r\n    <div *ngIf=\"checkedNodeList.length\" class=\"line__divider\"></div>\r\n  \r\n    <div *ngIf=\"checkedNodeList.length\" class=\"panel__item qms-scrollbar\">\r\n      <div class=\"related__item__inline\" *ngFor=\"let item of checkedNodeList\">\r\n        <button\r\n          *ngIf=\"item.itemName\"\r\n          mat-button\r\n          class=\"related__item__content\"\r\n          qms-tool-tip=\"{{\r\n            isEllipsisActive(itemName) ? getItemChipName(item) : ''\r\n          }}\"\r\n          mode=\"dark\"\r\n        >\r\n          <span class=\"related__item__content_name\" #itemName>{{\r\n            getItemChipName(item)\r\n          }}</span>\r\n          <mat-icon\r\n            *ngIf=\"!(treeConfig1?.selectOne || treeConfig2?.selectOne)\"\r\n            (click)=\"removeCheckedNodeList(item)\"\r\n            >cancel</mat-icon\r\n          >\r\n        </button>\r\n      </div>\r\n    </div>\r\n  \r\n    <div class=\"line__divider\"></div>\r\n  \r\n    <div class=\"confirm__button__groups\">\r\n      <button\r\n        *ngIf=\"!checkedNodeList.length\"\r\n        qms-btn\r\n        style=\"margin-top: 7px\"\r\n        (click)=\"onAddClick()\"\r\n      >\r\n        {{ LANG.ADD }}\r\n      </button>\r\n      <button\r\n        *ngIf=\"checkedNodeList.length\"\r\n        qms-btn\r\n        style=\"margin-top: 0px\"\r\n        (click)=\"onAddClick()\"\r\n      >\r\n        {{ LANG.ADD }} ({{ checkedNodeList.length }})\r\n      </button>\r\n      <button\r\n        qms-btn-text\r\n        [ngStyle]=\"{ 'margin-top': checkedNodeList.length ? '0px' : '7px' }\"\r\n        (click)=\"onCloseClick()\"\r\n      >\r\n        {{ LANG.CANCEL }}\r\n      </button>\r\n    </div>\r\n  </div>\r\n  ",
                     encapsulation: i0.ViewEncapsulation.None,
-                    styles: [".qms-scrollbar::-webkit-scrollbar{width:12px}.qms-scrollbar::-webkit-scrollbar-track{background:rgba(0,0,0,.12);background-clip:content-box}.qms-scrollbar::-webkit-scrollbar-thumb{background:rgba(0,0,0,.38);border-radius:20px;width:4px;border:4px solid transparent;background-clip:content-box}.qms-scrollbar::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.5);background-clip:content-box;border:4px solid transparent}.qms-scrollbar.none-scroll-bg::-webkit-scrollbar-track{background:transparent;background-clip:content-box}.qms__popup .button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qms__danger button{border:none;color:#fff;padding:0;text-align:center;text-decoration:none;display:inline-block;cursor:pointer;height:20px;width:20px;font-family:Open Sans;font-size:12px;font-weight:600;font-style:normal;line-height:16px}.qms__danger .red{background-color:#9e360f;margin-left:10px}.qms__danger .yellow{background-color:#e4cf53;margin-left:10px;color:#323232}.qms__danger .green{background-color:#00804c;margin-left:10px}.confirm__button__groups{margin-top:11px}.confirm__button__groups button{min-height:36px;width:auto;font-family:Open Sans;font-weight:500;font-size:14px;letter-spacing:1px;line-height:16px;padding-left:15px;padding-right:15px;margin-right:5px;float:right}.confirm__button__groups .confirm{background:#f8f9f9}.confirm__button__groups .confirm:hover{background:#001983;color:#fff}.confirm__button__groups .confirm:disabled{cursor:not-allowed}.confirm__button__groups .cancel{background:#f8f9f9}.confirm__button__groups .cancel:hover{background:#001983;color:#fff}.qmslib__related__popup__container .input__field{display:flex;align-items:center}.qmslib__related__popup__container .input__field input{width:100%;padding:10px;outline:none;border:none;background:#eee}.qmslib__related__popup__container .input__field .mat-icon{margin-left:-30px;cursor:pointer;vertical-align:middle}.qmslib__related__popup__container .line__divider{border-bottom:1px solid #ccc;height:1px;margin-top:10px;min-width:300px;max-width:100%}.qmslib__related__popup__container .button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qmslib__related__popup__container .panel__content{height:450px;overflow:auto;margin-top:12px}.qmslib__related__popup__container .panel__content_item{height:350px;overflow:auto;margin-top:12px}.qmslib__related__popup__container .panel-tree .mat-expansion-panel-body{padding:0 12px 12px}.qmslib__related__popup__container .mat-expansion-panel-header{height:30px;font-size:12px;letter-spacing:1px;font-family:Raleway;font-weight:600;padding:0}.qmslib__related__popup__container .mat-expansion-panel-header .mat-expansion-panel-header-title{align-items:center;margin-left:12px}.qmslib__related__popup__container .mat-expansion-panel-header .related_popup_toggle-btn{width:1.5rem;height:1.5rem;line-height:1.5rem}.qmslib__related__popup__container .mat-expansion-panel:not([class*=mat-elevation-z]){box-shadow:none}.qmslib__related__popup__container .panel__item{height:100px;margin-top:12px;overflow-x:hidden;overflow-y:auto;padding-right:5px;width:100%;max-width:100%;display:flex;flex-wrap:wrap;align-content:flex-start}.qmslib__related__popup__container .panel__item .related__item__inline{max-width:100%}.qmslib__related__popup__container .panel__item .related__item__content{height:32px;line-height:32px;background-color:#e5e5e5;max-width:100%;margin-bottom:5px;margin-left:2.5px;margin-right:2.5px}.qmslib__related__popup__container .panel__item .related__item__content .mat-icon{color:#8e8e8e;font-size:24px}.qmslib__related__popup__container .panel__item .related__item__content span.related__item__content_name{display:inline-block;min-width:calc(100% - 13px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:278px}.qmslib__related__popup__container .qmslib-related-popup-splitview{background-color:#fff;border-left:1px solid #ccc;height:450px;overflow-y:auto;margin-top:12px}.qmslib__related__popup__container .qmslib-related-popup-splitview.panel__content{height:450px;overflow:auto;margin-top:12px}.qmslib__related__popup__container .qmslib-related-popup-splitview.panel__content_item{height:350px;overflow:auto;margin-top:12px}.qmslib__related__popup__container .qmslib-related-popup-splitview .splitview-header{height:30px;font-size:12px;letter-spacing:1px;font-family:RALEWAY;font-weight:600;display:flex;align-items:center}.qmslib__related__popup__container .qmslib-related-popup-splitview .mat-checkbox.qms-group-options{padding:0}.qmslib__related__popup__container .qmslib-related-popup-splitview .mat-checkbox.qms-group-options .mat-checkbox-inner-container{margin-right:11px}.qmslib__related__popup__container .qmslib-related-popup-splitview .mat-checkbox.qms-group-options.mat-checkbox-checked{background:transparent!important}.qmslib__related__popup__container .qmslib-related-popup-splitview .expand-node{margin-left:8px;display:flex;align-items:center;min-height:40px}.qmslib__related__popup__container .qmslib-related-popup-splitview .expand-node .mat-icon{color:rgba(0,0,0,.6);margin-right:17px;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content}.qmslib__related__popup__container .qmslib-related-popup-splitview .expand-node .mat-icon svg{display:block;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content}cdk-virtual-scroll-viewport{overflow-x:hidden}cdk-virtual-scroll-viewport .search__module-result{margin:1.5rem;padding:0 0 .5rem}cdk-virtual-scroll-viewport .search__module-result .search__module-title{font-size:14px;font-weight:600}cdk-virtual-scroll-viewport .search__module-result .search__option{height:auto;line-height:normal;padding:8px 0;border-bottom:1px solid #e0e0e0}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item.mat-2-line.image-item{height:auto}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content{margin:0;border-bottom:none}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .wrap-image.image-square{width:2.5rem;height:100%;background:transparent;align-self:center;margin-right:0}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .wrap-image.image-square img{width:24px;height:24px}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .material-icons-outlined.leading-icon,cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content mat-icon.leading-icon{padding:4px 0 4px 4px}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .subtitle{font-weight:400}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .caption{overflow:hidden;line-height:normal;white-space:normal;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;padding:0;margin:0}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .caption span.search__result__parent-name{display:inline-block;width:auto;width:calc(100% - 13px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .default-subtitle{color:rgba(0,0,0,.38)}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .search__description-icon{margin-right:0;width:12px;height:12px;font-size:12px}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .qms-list-text{border-bottom:none}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .breadcrumb-containe .qms-breadcrumb-item .mat-icon{font-size:16px!important;padding-bottom:1px}cdk-virtual-scroll-viewport .search__module-result svg{display:block}#qmslib_related_popup_header_001{margin-bottom:20px;padding:0;font-weight:600;font-family:Raleway}.padding-5{padding:5px}.mat-autocomplete_related-viewport{height:100%;max-height:100%!important}.mat-autocomplete_related-viewport .cdk-virtual-scroll-content-wrapper{width:100%}.mat-autocomplete_related-viewport .related-viewport{min-height:10.25rem}"]
+                    styles: [".qms-scrollbar::-webkit-scrollbar{width:12px}.qms-scrollbar::-webkit-scrollbar-track{background:rgba(0,0,0,.12);background-clip:content-box}.qms-scrollbar::-webkit-scrollbar-thumb{background:rgba(0,0,0,.38);border-radius:20px;width:4px;border:4px solid transparent;background-clip:content-box}.qms-scrollbar::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.5);background-clip:content-box;border:4px solid transparent}.qms-scrollbar.none-scroll-bg::-webkit-scrollbar-track{background:transparent;background-clip:content-box}.qms__popup .button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qms__danger button{border:none;color:#fff;padding:0;text-align:center;text-decoration:none;display:inline-block;cursor:pointer;height:20px;width:20px;font-family:Open Sans;font-size:12px;font-weight:600;font-style:normal;line-height:16px}.qms__danger .red{background-color:#9e360f;margin-left:10px}.qms__danger .yellow{background-color:#e4cf53;margin-left:10px;color:#323232}.qms__danger .green{background-color:#00804c;margin-left:10px}.confirm__button__groups{margin-top:11px}.confirm__button__groups button{min-height:36px;width:auto;font-family:Open Sans;font-weight:500;font-size:14px;letter-spacing:1px;line-height:16px;padding-left:15px;padding-right:15px;margin-right:5px;float:right}.confirm__button__groups .confirm{background:#f8f9f9}.confirm__button__groups .confirm:hover{background:#001983;color:#fff}.confirm__button__groups .confirm:disabled{cursor:not-allowed}.confirm__button__groups .cancel{background:#f8f9f9}.confirm__button__groups .cancel:hover{background:#001983;color:#fff}.qmslib__related__popup__container .input__field{display:flex;align-items:center}.qmslib__related__popup__container .input__field input{width:100%;padding:10px;outline:none;border:none;background:#eee}.qmslib__related__popup__container .input__field .mat-icon{margin-left:-30px;cursor:pointer;vertical-align:middle}.qmslib__related__popup__container .line__divider{border-bottom:1px solid #ccc;height:1px;margin-top:10px;min-width:300px;max-width:100%}.qmslib__related__popup__container .button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qmslib__related__popup__container .panel__content{height:450px;overflow:auto;margin-top:12px}.qmslib__related__popup__container .panel__content_item{height:350px;overflow:auto;margin-top:12px}.qmslib__related__popup__container .panel-tree .mat-expansion-panel-body{padding:0 12px 12px}.qmslib__related__popup__container .mat-expansion-panel-header{height:30px;font-size:12px;letter-spacing:1px;font-family:Raleway;font-weight:600;padding:0}.qmslib__related__popup__container .mat-expansion-panel-header .mat-expansion-panel-header-title{align-items:center;margin-left:12px}.qmslib__related__popup__container .mat-expansion-panel-header .related_popup_toggle-btn{width:1.5rem;height:1.5rem;line-height:1.5rem}.qmslib__related__popup__container .mat-expansion-panel:not([class*=mat-elevation-z]){box-shadow:none}.qmslib__related__popup__container .panel__item{height:100px;margin-top:12px;overflow-x:hidden;overflow-y:auto;padding-right:5px;width:100%;max-width:100%;display:flex;flex-wrap:wrap;align-content:flex-start}.qmslib__related__popup__container .panel__item .related__item__inline{max-width:100%}.qmslib__related__popup__container .panel__item .related__item__content{height:32px;line-height:32px;background-color:#e5e5e5;max-width:100%;margin-bottom:5px;margin-left:2.5px;margin-right:2.5px}.qmslib__related__popup__container .panel__item .related__item__content .mat-icon{color:#8e8e8e;font-size:24px}.qmslib__related__popup__container .panel__item .related__item__content span.related__item__content_name{display:inline-block;min-width:calc(100% - 13px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:278px}.qmslib__related__popup__container .qmslib-related-popup-splitview{background-color:#fff;border-left:1px solid #ccc;height:450px;overflow-y:auto;margin-top:12px}.qmslib__related__popup__container .qmslib-related-popup-splitview.panel__content{height:450px;overflow:auto;margin-top:12px}.qmslib__related__popup__container .qmslib-related-popup-splitview.panel__content_item{height:350px;overflow:auto;margin-top:12px}.qmslib__related__popup__container .qmslib-related-popup-splitview .splitview-header{height:30px;font-size:12px;letter-spacing:1px;font-family:RALEWAY;font-weight:600;display:flex;align-items:center}.qmslib__related__popup__container .qmslib-related-popup-splitview .mat-checkbox.qms-group-options{padding:0}.qmslib__related__popup__container .qmslib-related-popup-splitview .mat-checkbox.qms-group-options .mat-checkbox-inner-container{margin-right:11px}.qmslib__related__popup__container .qmslib-related-popup-splitview .mat-checkbox.qms-group-options.mat-checkbox-checked{background:transparent!important}.qmslib__related__popup__container .qmslib-related-popup-splitview .expand-node{margin-left:8px;display:flex;align-items:center;min-height:40px}.qmslib__related__popup__container .qmslib-related-popup-splitview .expand-node .mat-icon{color:rgba(0,0,0,.6);margin-right:17px;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content}.qmslib__related__popup__container .qmslib-related-popup-splitview .expand-node .mat-icon svg{display:block;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content}cdk-virtual-scroll-viewport{overflow-x:hidden}cdk-virtual-scroll-viewport .search__module-result{margin:1.5rem;padding:0 0 .5rem}cdk-virtual-scroll-viewport .search__module-result .search__module-title{font-size:14px;font-weight:600}cdk-virtual-scroll-viewport .search__module-result .search__option{height:auto;line-height:normal;padding:8px 0;border-bottom:1px solid #e0e0e0}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item.mat-2-line.image-item{height:auto}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content{margin:0;border-bottom:none}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .wrap-image.image-square{width:2.5rem;height:100%;background:transparent;align-self:center;margin-right:0}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .wrap-image.image-square img{width:24px;height:24px}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .material-icons-outlined.leading-icon,cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content mat-icon.leading-icon{padding:4px 0 4px 4px}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .subtitle{font-weight:400}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .caption{overflow:hidden;line-height:normal;white-space:normal;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;padding:0;margin:0}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .caption span.search__result__parent-name{display:inline-block;width:auto;width:calc(100% - 13px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .default-subtitle{color:rgba(0,0,0,.38)}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .search__description-icon{margin-right:0;width:12px;height:12px;font-size:12px}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .qms-list-text{border-bottom:none}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .breadcrumb-containe .qms-breadcrumb-item .mat-icon{font-size:16px!important;padding-bottom:1px}cdk-virtual-scroll-viewport .search__module-result svg{display:block}#qmslib_related_popup_header_001{margin-bottom:20px;padding:0;font-weight:600;font-family:Raleway}.padding-5{padding:5px}.mat-autocomplete_related-viewport{height:100%;max-height:100%!important}.mat-autocomplete_related-viewport .cdk-virtual-scroll-content-wrapper{width:100%}.mat-autocomplete_related-viewport .related-viewport{min-height:300px}"]
                 },] }
     ];
     SelectProcessDocumentPopupComponent.ctorParameters = function () { return [
@@ -21682,6 +21641,7 @@
             this.addFavoriteTooltip = 'Legg til favoritt';
             this.deleteFavoriteTooltip = 'Slett favoritt';
             this.addNodeTooltip = 'Legg til lokasjon';
+            this.activeNode = '';
             this.expandedNodeSet = new Set();
             this.dragging = false;
             this.expandDelay = 1000;
@@ -21691,7 +21651,6 @@
             this.dataSource = new tree$1.MatTreeFlatDataSource(this.treeControl, this.treeFlattener);
             this.hoverNode = {};
             this.expandingNodes = [];
-            this.activeNode = '';
             this.hasChild = function (_, node) { return node.expandable; };
             this.dataSource.data = this.treeData;
         }
@@ -21735,9 +21694,12 @@
                 }
             });
         };
-        QMSNavigationDrawerComponent.prototype.onClickNode = function (nodeId) {
-            this.activeNode = nodeId;
-            this.onClickNodeEvent.emit(nodeId);
+        QMSNavigationDrawerComponent.prototype.onClickNode = function (node, setActiveNode) {
+            if (setActiveNode) {
+                this.activeNode = node.id;
+                this.onClickNodeEvent.emit(node.id);
+            }
+            this.onClickToggleNode(node);
         };
         QMSNavigationDrawerComponent.prototype.onOver = function (node) {
             this.hoverNode = node;
@@ -21998,8 +21960,8 @@
     QMSNavigationDrawerComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'app-qms-navigation-drawer',
-                    template: "<mat-tree class=\"qms-navigation-drawer-container\" [dataSource]=\"dataSource\" [treeControl]=\"treeControl\" cdkDropList\r\n  (cdkDropListDropped)=\"drop($event)\" [cdkDropListDisabled]=\"dragDropListDisabled\">\r\n  <!-- This is the tree node template for leaf nodes -->\r\n  <mat-tree-node *matTreeNodeDef=\"let node\" (mouseover)=\"onOver(node)\" matTreeNodePadding matTreeNodePaddingIndent=\"34\"\r\n    cdkDrag [cdkDragData]=\"node\" (mouseenter)=\"dragHover(node)\" (mouseleave)=\"dragHoverEnd()\"\r\n    (cdkDragStarted)=\"dragStart()\" (cdkDragReleased)=\"dragEnd()\"\r\n    [ngClass]=\"{'expand-node' : treeControl.isExpanded(node), 'collapse-node': !treeControl.isExpanded(node), 'active': activeNode == node.id}\">\r\n    <div *ngIf=\"!node.isReadOnly\" (click)=\"onClickNode(node.id)\" class=\"tree-content\">\r\n      <div class=\"span-text\" mode=\"dark\" position=\"below\">{{ node.name }}</div>\r\n      <button tabindex=\"-1\" class=\"button-icon collapse-expand-icon space-icon\" qms-btn-icon>\r\n        <img class=\"img-icon\" [src]=\"faIconPath\" alt=\"\" />\r\n      </button>\r\n      <button tabindex=\"-1\" class=\"button-icon add-icon\" \r\n        *ngIf=\"showFavoriteIcon && (node.id === hoverNode.id || node.favorite)\"\r\n        (click)=\"addFavoriteNode(node.id, $event)\" (mouseenter)=\"setHoverFavorite(node.id)\"\r\n        (mouseleave)=\"setHoverFavorite(null)\" [ngClass]=\"{'btn-favorite': (node.id === hoverNode.id && isHover)}\"\r\n        matTooltip=\"{{!node.favorite ? addFavoriteTooltip : deleteFavoriteTooltip}}\" mode=\"dark\" position=\"below\"\r\n        qms-btn-icon>\r\n        <mat-icon class=\"mat-icon-rtl-mirror blur-icon\" [class.favorite]=\"true\"\r\n          [class.not-favorite]=\"!node.favorite && node.id === hoverNode.id && isHover\">\r\n          {{node.favorite && node.id === hoverNode.id && isHover ? 'star_rate_outline' : ''}}\r\n          {{!node.favorite && node.id === hoverNode.id && isHover ? 'star_border' : ''}}\r\n        </mat-icon>\r\n      </button>\r\n      <button  tabindex=\"-1\" class=\"button-icon add-icon\" *ngIf=\"node.id === hoverNode.id && isHover\"\r\n        matTooltip=\"{{addNodeTooltip}}\" (click)=\"addNewNode(node.id, $event)\" mode=\"dark\" position=\"below\"\r\n        qms-btn-icon>\r\n        <mat-icon class=\"mat-icon-rtl-mirror\">\r\n          add\r\n        </mat-icon>\r\n      </button>\r\n    </div>\r\n  </mat-tree-node>\r\n  <!-- This is the tree node template for expandable nodes -->\r\n  <mat-tree-node *matTreeNodeDef=\"let node;when: hasChild\" (mouseover)=\"onOver(node)\" matTreeNodePadding\r\n    matTreeNodePaddingIndent=\"34\" cdkDrag [cdkDragData]=\"node\" (mouseenter)=\"dragHover(node)\"\r\n    (mouseleave)=\"dragHoverEnd()\" (cdkDragStarted)=\"dragStart()\" (cdkDragReleased)=\"dragEnd()\"\r\n    [ngClass]=\"\r\n    {'expand-node' : treeControl.isExpanded(node), 'collapse-node': !treeControl.isExpanded(node), 'active': activeNode == node.id}\">\r\n    <div *ngIf=\"!node.isReadOnly\" (click)=\"onClickNode(node.id)\" class=\"tree-content\"\r\n      (keydown)=\"onKeyDownNode($event, node)\">\r\n      <span class=\"span-text\" mode=\"dark\" position=\"below\">{{ node.name }}</span>\r\n      <button tabindex=\"-1\" class=\"button-icon space-icon collapse-expand-icon\" qms-btn-icon matTreeNodeToggle\r\n        [attr.aria-label]=\"'toggle ' + node.name\" (click)=\"onClickToggleNode(node)\">\r\n        <mat-icon class=\"mat-icon-rtl-mirror arrow-icon left-icon\">\r\n          {{treeControl.isExpanded(node) ? 'expand_less' : 'expand_more'}}\r\n        </mat-icon>\r\n      </button>\r\n      <button tabindex=\"-1\" class=\"button-icon add-icon\" \r\n        matTooltip=\"{{!node.favorite ? addFavoriteTooltip : deleteFavoriteTooltip}}\"\r\n        *ngIf=\"showFavoriteIcon && (node.id === hoverNode.id || node.favorite)\"\r\n        (click)=\"addFavoriteNode(node.id, $event)\"\r\n        [ngClass]=\"{'btn-favorite': (node.id === hoverNode.id && isHover)}\" (mouseenter)=\"setHoverFavorite(node.id)\"\r\n        (mouseleave)=\"setHoverFavorite(null)\" mode=\"dark\" position=\"below\" qms-btn-icon>\r\n        <mat-icon class=\"mat-icon-rtl-mirror blur-icon\" [class.favorite]=\"true\"\r\n          [class.not-favorite]=\"!node.favorite && node.id === hoverNode.id && isHover\">\r\n          {{node.favorite && node.id === hoverNode.id && isHover ? 'star_rate_outline' : ''}}\r\n          {{!node.favorite && node.id === hoverNode.id && isHover ? 'star_border' : ''}}\r\n        </mat-icon>\r\n      </button>\r\n      <button tabindex=\"-1\" class=\"button-icon add-icon\" *ngIf=\"node.id === hoverNode.id && isHover\" \r\n      matTooltip=\"{{addNodeTooltip}}\" (click)=\"addNewNode(node.id, $event)\" qms-btn-icon>\r\n        <mat-icon class=\"mat-icon-rtl-mirror\">\r\n          add\r\n        </mat-icon>\r\n      </button>\r\n    </div>\r\n  </mat-tree-node>\r\n</mat-tree>",
-                    styles: ["::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node{width:272px!important;height:48px!important}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node{min-height:34px;margin:16px 0;padding-right:34px}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node.active{background-color:#f2f7fd}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .tree-content{width:100%;position:relative;cursor:pointer}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .arrow-icon{color:#00324e}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .collapse-expand-icon{color:#3e57b7}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .collapse-expand-icon:hover{background:rgba(0,0,0,.08)}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .add-icon{color:#3e57b7}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .add-icon:hover{background:rgba(0,0,0,.08)}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .left-icon{color:#919191}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node.expand-node{padding-left:0;position:static;height:32px;left:calc(50% - 216px/2);top:0;font-family:Open Sans;font-style:normal;font-weight:400;font-size:14px;line-height:19px;display:flex;align-items:center;color:#1954a9;flex:none;order:0;align-self:stretch;flex-grow:1}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node.expand-node ::ng-deep mat-icon{color:#1954a9}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node.collapse-node{position:static;height:32px;left:calc(50% - 176px/2);top:0;font-family:Open Sans;font-style:normal;font-weight:400;font-size:14px;line-height:19px;display:flex;align-items:center;color:#323232;flex:none;order:0;align-self:stretch;flex-grow:1}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .tree-content .button-icon{width:30px;height:30px;line-height:30px!important;border-radius:50%}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .tree-content .button-icon:hover{border-radius:50%}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .tree-content .img-icon{max-height:25px;max-width:25px}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .tree-content .add-icon{position:absolute;top:-2px;right:-34px}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .tree-content .add-icon mat-icon{top:3px;right:3px;border-radius:50%}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .tree-content .favorite{color:#b13514}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .tree-content .not-favorite{color:rgba(0,0,0,.6)!important}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .tree-content .btn-favorite{right:-5px;color:unset}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .tree-content .space-icon{position:absolute;top:-5px;left:0}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .tree-content .span-text{position:relative;overflow:hidden;text-overflow:ellipsis;padding-left:42px;max-width:calc(100% - 56px);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .tree-content .span-text:after{content:\"\";display:block;clear:both}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node:first-child{margin:0}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node.collapse-node:hover{background:#00000014}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node.collapse-node:active{background:#0000001f}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node.expand-node:active{background:#f2f7fd}"]
+                    template: "\r\n<mat-tree class=\"qms-navigation-drawer-container\" [dataSource]=\"dataSource\" [treeControl]=\"treeControl\" cdkDropList\r\n  (cdkDropListDropped)=\"drop($event)\" [cdkDropListDisabled]=\"dragDropListDisabled\">\r\n  <!-- This is the tree node template for leaf nodes -->\r\n  <mat-tree-node [class.pr-34]=\"showAddIcon\" *matTreeNodeDef=\"let node\" (mouseover)=\"onOver(node)\" matTreeNodePadding matTreeNodePaddingIndent=\"34\"\r\n    cdkDrag [cdkDragData]=\"node\" (mouseenter)=\"dragHover(node)\" (mouseleave)=\"dragHoverEnd()\"\r\n    (cdkDragStarted)=\"dragStart()\" (cdkDragReleased)=\"dragEnd()\"\r\n    [ngClass]=\"{'expand-node' : treeControl.isExpanded(node), 'collapse-node': !treeControl.isExpanded(node), 'active': activeNode == node.id}\">\r\n    <div *cdkDragPreview  class=\"node-preview-item\">{{ node.name }}</div>\r\n    <div *ngIf=\"!node.isReadOnly\" (click)=\"onClickNode(node, true)\" class=\"tree-content\">\r\n      <button tabindex=\"-1\" qms-btn-outlined disabled class=\"border-0 bg-transparent\">\r\n        <img class=\"img-icon\" [src]=\"faIconPath\" alt=\"\" />\r\n      </button>\r\n      <div class=\"span-text\">{{ node.name }}</div>\r\n      <button tabindex=\"-1\" class=\"button-icon add-icon\"\r\n        *ngIf=\"showFavoriteIcon && (node.id === hoverNode.id || node.favorite)\"\r\n        (click)=\"addFavoriteNode(node.id, $event)\" (mouseenter)=\"setHoverFavorite(node.id)\"\r\n        (mouseleave)=\"setHoverFavorite(null)\" [ngClass]=\"{'btn-favorite': (node.id === hoverNode.id && isHover)}\"\r\n        qms-tool-tip=\"{{!node.favorite ? addFavoriteTooltip : deleteFavoriteTooltip}}\" mode=\"dark\" position=\"bottom\"\r\n        qms-btn-icon>\r\n        <mat-icon class=\"mat-icon-rtl-mirror blur-icon\" [class.favorite]=\"true\"\r\n          [class.not-favorite]=\"!node.favorite && node.id === hoverNode.id && isHover\">\r\n          {{node.favorite && node.id === hoverNode.id && isHover ? 'star_rate_outline' : ''}}\r\n          {{!node.favorite && node.id === hoverNode.id && isHover ? 'star_border' : ''}}\r\n        </mat-icon>\r\n      </button>\r\n      <button tabindex=\"-1\" class=\"button-icon add-icon\" *ngIf=\"node.id === hoverNode.id && showAddIcon && isHover\"\r\n        qms-tool-tip=\"{{addNodeTooltip}}\" (click)=\"addNewNode(node.id, $event)\" mode=\"dark\" position=\"bottom\" qms-btn-icon>\r\n        <mat-icon class=\"mat-icon-rtl-mirror\">\r\n          add\r\n        </mat-icon>\r\n      </button>\r\n    </div>\r\n  </mat-tree-node>\r\n  <!-- This is the tree node template for expandable nodes -->\r\n  <mat-tree-node [class.pr-34]=\"showAddIcon\" *matTreeNodeDef=\"let node;when: hasChild\" (mouseover)=\"onOver(node)\" matTreeNodePadding\r\n    matTreeNodePaddingIndent=\"34\" cdkDrag [cdkDragData]=\"node\" (mouseenter)=\"dragHover(node)\"\r\n    (mouseleave)=\"dragHoverEnd()\" (cdkDragStarted)=\"dragStart()\" (cdkDragReleased)=\"dragEnd()\"\r\n    [ngClass]=\"\r\n    {'expand-node' : treeControl.isExpanded(node), 'collapse-node': !treeControl.isExpanded(node), 'active': activeNode == node.id}\">\r\n    <div *cdkDragPreview  class=\"node-preview-item\">{{ node.name }}</div>\r\n    <div *ngIf=\"!node.isReadOnly\" class=\"tree-content\"\r\n      (keydown)=\"onKeyDownNode($event, node)\">\r\n      <button matTreeNodeToggle (click)=\"onClickNode(node, false)\" tabindex=\"-1\" class=\"button-icon collapse-expand-icon\" qms-btn-icon [attr.aria-label]=\"'toggle ' + node.name\">\r\n        <mat-icon class=\"mat-icon-rtl-mirror arrow-icon left-icon\">\r\n          {{treeControl.isExpanded(node) ? 'expand_less' : 'expand_more'}}\r\n        </mat-icon>\r\n      </button>\r\n      <div class=\"span-text\" matTreeNodeToggle (click)=\"onClickNode(node, true)\">{{ node.name }}</div>\r\n      <button tabindex=\"-1\" class=\"button-icon add-icon\"\r\n        qms-tool-tip=\"{{!node.favorite ? addFavoriteTooltip : deleteFavoriteTooltip}}\"\r\n        *ngIf=\"showFavoriteIcon && (node.id === hoverNode.id || node.favorite)\"\r\n        (click)=\"addFavoriteNode(node.id, $event)\" [ngClass]=\"{'btn-favorite': (node.id === hoverNode.id && isHover)}\"\r\n        (mouseenter)=\"setHoverFavorite(node.id)\" (mouseleave)=\"setHoverFavorite(null)\" mode=\"dark\" position=\"below\"\r\n        qms-btn-icon>\r\n        <mat-icon class=\"mat-icon-rtl-mirror blur-icon\" [class.favorite]=\"true\"\r\n          [class.not-favorite]=\"!node.favorite && node.id === hoverNode.id && isHover\">\r\n          {{node.favorite && node.id === hoverNode.id && isHover ? 'star_rate_outline' : ''}}\r\n          {{!node.favorite && node.id === hoverNode.id && isHover ? 'star_border' : ''}}\r\n        </mat-icon>\r\n      </button>\r\n      <button tabindex=\"-1\" class=\"button-icon add-icon\" *ngIf=\"node.id === hoverNode.id && showAddIcon && isHover\"\r\n        qms-tool-tip=\"{{addNodeTooltip}}\" mode=\"dark\" position=\"bottom\" (click)=\"addNewNode(node.id, $event)\" qms-btn-icon>\r\n        <mat-icon class=\"mat-icon-rtl-mirror\">\r\n          add\r\n        </mat-icon>\r\n      </button>\r\n    </div>\r\n  </mat-tree-node>\r\n</mat-tree>\r\n",
+                    styles: ["::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node{min-width:272px!important;height:48px!important}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node{min-height:34px;margin:16px 0}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node.active{background-color:#f2f7fd;color:#1954a9!important}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node.active img{filter:opacity(.5) drop-shadow(0 0 0 #1954A9)}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node.active:hover{background-color:#e5eefb!important}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .tree-content{width:100%;position:relative;cursor:pointer;align-items:center}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .arrow-icon{color:#00324e}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .collapse-expand-icon{color:#3e57b7}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .collapse-expand-icon:hover{background:rgba(0,0,0,.08)}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .add-icon:hover{background:rgba(0,0,0,.08)}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .left-icon{color:#919191}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node.expand-node{padding-left:0;position:static;height:32px;left:calc(50% - 216px/2);top:0;font-family:Open Sans;font-style:normal;font-weight:400;font-size:14px;line-height:19px;display:flex;align-items:center;color:#1954a9;flex:none;order:0;align-self:stretch;flex-grow:1}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node.expand-node ::ng-deep mat-icon{color:#1954a9}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node.expand-node:hover{background-color:#e5eefb!important}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node.collapse-node{position:static;height:32px;left:calc(50% - 176px/2);top:0;font-family:Open Sans;font-style:normal;font-weight:400;font-size:14px;line-height:19px;display:flex;align-items:center;color:#323232;flex:none;order:0;align-self:stretch;flex-grow:1}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .tree-content{display:flex}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .tree-content .button-icon{width:40px;height:40px;line-height:30px!important;border-radius:50%}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .tree-content .button-icon:hover{border-radius:50%}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .tree-content .img-icon{max-height:25px;max-width:25px}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .tree-content .add-icon{position:absolute;right:-34px}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .tree-content .add-icon mat-icon{top:3px;right:3px;border-radius:50%;color:rgba(0,0,0,.6)}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .tree-content .favorite{color:#b13514!important}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .tree-content .not-favorite{color:rgba(0,0,0,.6)!important}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .tree-content .btn-favorite{right:6px;color:unset}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .tree-content .space-icon{position:absolute;top:-5px;left:0}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .tree-content .span-text{position:relative;overflow:hidden;text-overflow:ellipsis;padding-left:7px;max-width:calc(100% - 56px);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .tree-content .span-text:after{content:\"\";display:block;clear:both}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node:first-child{margin:0}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node.collapse-node:hover{background:#00000014}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node.collapse-node:active{background:#0000001f}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node.expand-node:active{background:#f2f7fd}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node:hover .span-text{max-width:calc(100% - 96px)}::ng-deep mat-tree.qms-navigation-drawer-container .pr-34{padding-right:34px}.node-preview-item{display:flex;background-color:#0000001f;min-width:272px!important;height:48px!important;margin:0 auto;align-items:center;padding:0 16px}"]
                 },] }
     ];
     QMSNavigationDrawerComponent.ctorParameters = function () { return []; };
@@ -22019,7 +21981,8 @@
         onClickNodeEvent: [{ type: i0.Output }],
         addFavoriteTooltip: [{ type: i0.Input }],
         deleteFavoriteTooltip: [{ type: i0.Input }],
-        addNodeTooltip: [{ type: i0.Input }]
+        addNodeTooltip: [{ type: i0.Input }],
+        activeNode: [{ type: i0.Input }]
     };
 
     var QMSNavigationDrawerModule = /** @class */ (function () {
@@ -22039,7 +22002,8 @@
                         QMSButtonModule,
                         tooltip.MatTooltipModule,
                         dragDrop.DragDropModule,
-                        tree$1.MatTreeModule
+                        tree$1.MatTreeModule,
+                        QmsAngularModule
                     ],
                     exports: [
                         QMSNavigationDrawerComponent
@@ -22098,6 +22062,7 @@
             },
             set: function (value) {
                 this._length = coercion.coerceNumberProperty(value);
+                this.getNumberOfPages();
             },
             enumerable: false,
             configurable: true
@@ -22111,6 +22076,7 @@
                 this._pageIndex = Math.max(coercion.coerceNumberProperty(value - 1), 0);
                 this.displayNumberOfPages = this.pagination(this._pageIndex, this.numberOfPages.length);
                 this._emitPageEvent(this.previousPageIndex);
+                this.getNumberOfPages();
             },
             enumerable: false,
             configurable: true
@@ -22229,11 +22195,11 @@
     QMSPaginatorComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'qms-paginator',
-                    template: "<div class=\"qms-paginator-outer-container\"  [class.size-small]='size == sizeSmall'>\r\n  <div class=\"mat-paginator-container\" *ngIf='size != sizeMobile'>\r\n    <div class=\"qms-total-result\">\r\n      <span>Resultater: {{length}}</span>\r\n    </div>\r\n    <div class=\"qms-paginator-page-size\" *ngIf='size != sizeSmall'>\r\n      <div class=\"qms-pagesize-label\">Rader per side:</div>\r\n      <mat-form-field\r\n        qms-form\r\n        qms-select-input\r\n        class=\"qms-form-page-size\"\r\n        appearance=\"fill\">\r\n        <mat-select\r\n          panelClass=\"qms-select-panel\"\r\n          [value]=\"pageSize\"\r\n          (selectionChange)=\"_changePageSize($event.value)\"\r\n          qms-select>\r\n          <mat-option *ngFor=\"let item of pageSizeOptions\" [value]=\"item\">\r\n            {{ item }}\r\n          </mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </div>\r\n    <div class=\"qms-paginator-page-size\" *ngIf='size != sizeMedium && size != sizeSmall'>\r\n      <div class=\"qms-pagesize-label \">Hopp til side:</div>\r\n\r\n      <mat-form-field\r\n        qms-form\r\n        qms-select-input\r\n        class=\"qms-form-page-size\"\r\n        appearance=\"fill\">\r\n        <mat-select\r\n          panelClass=\"qms-select-panel\"\r\n          [value]=\"pageIndex\"\r\n          (selectionChange)=\"_changePageNumber($event.value)\"\r\n          qms-select>\r\n          <mat-option *ngFor=\"let item of numberOfPages\" [value]=\"item\">\r\n            {{ item }}\r\n          </mat-option>\r\n        </mat-select>\r\n      </mat-form-field> \r\n    </div>\r\n    <div class=\"qms-paginator-range-actions\">\r\n      <button qms-btn-icon color=\"light\"  (click)='previousPage()' [disabled]='minPage == pageIndex'>\r\n        <mat-icon>chevron_left</mat-icon>\r\n      </button>\r\n      <ng-container *ngFor='let item of displayNumberOfPages' >\r\n          <span *ngIf='item == \"...\"' class=\"qms-3d\">{{item}}</span>\r\n          <button  *ngIf='item != \"...\"' qms-btn-icon color=\"light\" active=\"true\" \r\n            [class.selected]='pageIndex == item' [disabled]='pageIndex == item'\r\n            (click)='changePage(item)'>\r\n            {{item}}\r\n        </button>\r\n      </ng-container>\r\n     \r\n      <button qms-btn-icon color=\"light\"  (click)='nextPage()' [disabled]='maxpage == pageIndex'>\r\n        <mat-icon>chevron_right</mat-icon>\r\n      </button>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"mat-paginator-container-mobile\"  *ngIf='size == sizeMobile'>\r\n    <div class=\"mat-paginator-container\"  *ngIf='size == sizeMobile'>\r\n      <div class=\"qms-paginator-range-actions\">\r\n        <button qms-btn-icon color=\"light\"  (click)='previousPage()' [disabled]='minPage == pageIndex'>\r\n          <mat-icon>chevron_left</mat-icon>\r\n        </button>\r\n        <ng-container *ngFor='let item of displayNumberOfPages' >\r\n            <span *ngIf='item == \"...\"' class=\"qms-3d\">{{item}}</span>\r\n            <button  *ngIf='item != \"...\"' qms-btn-icon color=\"light\" active=\"true\" \r\n              [class.selected]='pageIndex == item' [disabled]='pageIndex == item'\r\n              (click)='changePage(item)'>\r\n              {{item}}\r\n          </button>\r\n        </ng-container>\r\n       \r\n        <button qms-btn-icon color=\"light\"  (click)='nextPage()' [disabled]='maxpage == pageIndex'>\r\n          <mat-icon>chevron_right</mat-icon>\r\n        </button>\r\n      </div>\r\n    </div>\r\n    <div class=\"qms-total-result\">\r\n      <span>Resultater: {{length}}</span>\r\n    </div>\r\n    <div style=\"display: flex;\">\r\n      <div class=\"qms-paginator-page-size\" *ngIf='size != sizeSmall'>\r\n        <div class=\"qms-pagesize-label\">Rader per side:</div>\r\n        <mat-form-field\r\n          qms-form\r\n          qms-select-input\r\n          class=\"qms-form-page-size\"\r\n          appearance=\"fill\">\r\n          <mat-select\r\n            panelClass=\"qms-select-panel\"\r\n            [value]=\"pageSize\"\r\n            (selectionChange)=\"_changePageSize($event.value)\"\r\n            qms-select>\r\n            <mat-option *ngFor=\"let item of pageSizeOptions\" [value]=\"item\">\r\n              {{ item }}\r\n            </mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </div>\r\n      <div class=\"qms-paginator-page-size\" *ngIf='size != sizeMedium && size != sizeSmall'>\r\n        <div class=\"qms-pagesize-label \">Hopp til side:</div>\r\n        <mat-form-field\r\n          qms-form\r\n          qms-select-input\r\n          class=\"qms-form-page-size\"\r\n          appearance=\"fill\">\r\n          <mat-select\r\n            panelClass=\"qms-select-panel\"\r\n            [value]=\"pageIndex\"\r\n            (selectionChange)=\"_changePageNumber($event.value)\"\r\n            qms-select>\r\n            <mat-option *ngFor=\"let item of numberOfPages\" [value]=\"item\">\r\n              {{ item }}\r\n            </mat-option>\r\n          </mat-select>\r\n        </mat-form-field> \r\n      </div>\r\n    </div>\r\n   \r\n  </div>\r\n \r\n</div>",
+                    template: "<div class=\"qms-paginator-outer-container\"  [class.size-small]='size == sizeSmall'>\r\n  <div class=\"mat-paginator-container\" *ngIf='size != sizeMobile'>\r\n    <div class=\"qms-total-result\">\r\n      <span>Resultater: {{length}}</span>\r\n    </div>\r\n    <div class=\"qms-paginator-page-size\" *ngIf='size != sizeSmall'>\r\n      <div class=\"qms-pagesize-label\">Rader per side:</div>\r\n      <mat-form-field\r\n        qms-form\r\n        qms-select-input\r\n        class=\"qms-form-page-size\"\r\n        appearance=\"fill\">\r\n        <mat-select\r\n          panelClass=\"qms-select-panel\"\r\n          [value]=\"pageSize\"\r\n          (selectionChange)=\"_changePageSize($event.value)\"\r\n          qms-select>\r\n          <mat-option *ngFor=\"let item of pageSizeOptions\" [value]=\"item\">\r\n            {{ item }}\r\n          </mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </div>\r\n    <div class=\"qms-paginator-page-size\" *ngIf='size != sizeMedium && size != sizeSmall'>\r\n      <div class=\"qms-pagesize-label \">Hopp til side:</div>\r\n\r\n      <mat-form-field\r\n        qms-form\r\n        qms-select-input\r\n        class=\"qms-form-page-size qms-form-select-page-size\"\r\n        appearance=\"fill\">\r\n        <mat-select\r\n          panelClass=\"qms-select-panel\"\r\n          [value]=\"pageIndex\"\r\n          (selectionChange)=\"_changePageNumber($event.value)\"\r\n          qms-select>\r\n          <mat-option *ngFor=\"let item of numberOfPages\" [value]=\"item\">\r\n            {{ item }}\r\n          </mat-option>\r\n        </mat-select>\r\n      </mat-form-field> \r\n    </div>\r\n    <div class=\"qms-paginator-range-actions\">\r\n      <button qms-btn-icon color=\"light\"  (click)='previousPage()' [disabled]='minPage == pageIndex'>\r\n        <mat-icon>chevron_left</mat-icon>\r\n      </button>\r\n      <ng-container *ngFor='let item of displayNumberOfPages' >\r\n          <span *ngIf='item == \"...\"' class=\"qms-3d\">{{item}}</span>\r\n          <button  *ngIf='item != \"...\"' qms-btn-icon color=\"light\"  \r\n            [class.selected]='pageIndex == item' [disabled]='pageIndex == item'\r\n            (click)='changePage(item)'>\r\n            {{item}}\r\n        </button>\r\n      </ng-container>\r\n     \r\n      <button qms-btn-icon color=\"light\"  (click)='nextPage()' [disabled]='maxpage == pageIndex'>\r\n        <mat-icon>chevron_right</mat-icon>\r\n      </button>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"mat-paginator-container-mobile\"  *ngIf='size == sizeMobile'>\r\n    <div class=\"mat-paginator-container\"  *ngIf='size == sizeMobile'>\r\n      <div class=\"qms-paginator-range-actions\">\r\n        <button qms-btn-icon color=\"light\"  (click)='previousPage()' [disabled]='minPage == pageIndex'>\r\n          <mat-icon>chevron_left</mat-icon>\r\n        </button>\r\n        <ng-container *ngFor='let item of displayNumberOfPages' >\r\n            <span *ngIf='item == \"...\"' class=\"qms-3d\">{{item}}</span>\r\n            <button  *ngIf='item != \"...\"' qms-btn-icon color=\"light\" \r\n              [class.selected]='pageIndex == item' [disabled]='pageIndex == item'\r\n              (click)='changePage(item)'>\r\n              {{item}}\r\n          </button>\r\n        </ng-container>\r\n       \r\n        <button qms-btn-icon color=\"light\"  (click)='nextPage()' [disabled]='maxpage == pageIndex'>\r\n          <mat-icon>chevron_right</mat-icon>\r\n        </button>\r\n      </div>\r\n    </div>\r\n    <div class=\"qms-total-result\">\r\n      <span>Resultater: {{length}}</span>\r\n    </div>\r\n    <div style=\"display: flex;\">\r\n      <div class=\"qms-paginator-page-size\" *ngIf='size != sizeSmall'>\r\n        <div class=\"qms-pagesize-label\">Rader per side:</div>\r\n        <mat-form-field\r\n          qms-form\r\n          qms-select-input\r\n          class=\"qms-form-page-size\"\r\n          appearance=\"fill\">\r\n          <mat-select\r\n            panelClass=\"qms-select-panel\"\r\n            [value]=\"pageSize\"\r\n            (selectionChange)=\"_changePageSize($event.value)\"\r\n            qms-select>\r\n            <mat-option *ngFor=\"let item of pageSizeOptions\" [value]=\"item\">\r\n              {{ item }}\r\n            </mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </div>\r\n      <div class=\"qms-paginator-page-size\" *ngIf='size != sizeMedium && size != sizeSmall'>\r\n        <div class=\"qms-pagesize-label \">Hopp til side:</div>\r\n        <mat-form-field\r\n          qms-form\r\n          qms-select-input\r\n          class=\"qms-form-page-size qms-form-select-page-size\"\r\n          appearance=\"fill\">\r\n          <mat-select\r\n            panelClass=\"qms-select-panel\"\r\n            [value]=\"pageIndex\"\r\n            (selectionChange)=\"_changePageNumber($event.value)\"\r\n            qms-select>\r\n            <mat-option *ngFor=\"let item of numberOfPages\" [value]=\"item\">\r\n              {{ item }}\r\n            </mat-option>\r\n          </mat-select>\r\n        </mat-form-field> \r\n      </div>\r\n    </div>\r\n   \r\n  </div>\r\n \r\n</div>",
                     host: {
                         'class': 'qms-paginator'
                     },
-                    styles: ["::ng-deep .qms-paginator{display:block}::ng-deep .qms-paginator .qms-paginator-outer-container{display:flex}::ng-deep .qms-paginator .mat-paginator-container{display:flex;align-items:center;justify-content:flex-end;padding:0 8px;flex-wrap:wrap-reverse;width:100%}::ng-deep .qms-paginator .mat-paginator-container .qms-total-result{margin-right:24px;margin-bottom:15px}::ng-deep .qms-paginator .mat-paginator-container .qms-total-result span{font-weight:400;font-size:14px;line-height:22px;color:rgba(0,0,0,.6)}::ng-deep .qms-paginator .mat-paginator-container .qms-paginator-page-size{margin-right:24px;display:flex;align-items:baseline}::ng-deep .qms-paginator .mat-paginator-container .qms-paginator-page-size .qms-pagesize-label{font-weight:400;font-size:14px;line-height:22px;color:#323232;font-family:Open Sans;font-style:normal;margin-right:8px}::ng-deep .qms-paginator .mat-paginator-container .qms-paginator-page-size .qms-form-page-size .mat-form-field-flex{width:80px}::ng-deep .qms-paginator .mat-paginator-container .qms-paginator-page-size .jump-page .mat-form-field-wrapper .mat-form-field-flex{width:55px}::ng-deep .qms-paginator .mat-paginator-container .qms-paginator-page-size .mat-form-field-flex{height:40px}::ng-deep .qms-paginator .mat-paginator-container .qms-paginator-page-size .mat-form-field-flex .mat-form-field-infix{padding-top:7px;border-top:0;padding-bottom:0}::ng-deep .qms-paginator .mat-paginator-container .qms-paginator-range-actions{display:flex;align-items:center;margin-bottom:15px}::ng-deep .qms-paginator .mat-paginator-container .qms-paginator-range-actions .selected{background-color:#e5eefb;color:#1954a9}::ng-deep .qms-paginator .mat-paginator-container .qms-paginator-range-actions .qms-3d{font-weight:600;font-size:14px;line-height:22px;color:#323232}::ng-deep .qms-paginator .mat-paginator-container-mobile .qms-total-result{margin-bottom:16px}::ng-deep .qms-paginator .mat-paginator-container-mobile .qms-total-result span{font-family:Open Sans;font-style:normal;font-weight:400;font-size:12px;line-height:16px;color:rgba(0,0,0,.6)}::ng-deep .qms-paginator .mat-paginator-container-mobile .mat-paginator-container{justify-content:flex-start}::ng-deep .qms-paginator .mat-paginator-container-mobile .qms-paginator-page-size{margin-right:24px;display:flex;align-items:baseline}::ng-deep .qms-paginator .mat-paginator-container-mobile .qms-paginator-page-size .qms-pagesize-label{font-weight:400;font-size:12px;line-height:22px;color:#323232;font-family:Open Sans;font-style:normal;margin-right:8px}::ng-deep .qms-paginator .mat-paginator-container-mobile .qms-paginator-page-size .qms-form-page-size .mat-form-field-flex{width:80px}::ng-deep .qms-paginator .mat-paginator-container-mobile .qms-paginator-page-size .jump-page .mat-form-field-wrapper .mat-form-field-flex{width:55px}::ng-deep .qms-paginator .mat-paginator-container-mobile .qms-paginator-page-size .mat-form-field-flex{height:40px}::ng-deep .qms-paginator .mat-paginator-container-mobile .qms-paginator-page-size .mat-form-field-flex .mat-form-field-infix{padding-top:7px;border-top:0;padding-bottom:0}::ng-deep .qms-paginator .size-small .mat-paginator-container{justify-content:flex-start}"]
+                    styles: ["::ng-deep .qms-paginator{display:block}::ng-deep .qms-paginator .qms-paginator-outer-container{display:flex}::ng-deep .qms-paginator .mat-paginator-container{display:flex;align-items:center;justify-content:flex-end;padding:0 8px;flex-wrap:wrap-reverse;width:100%}::ng-deep .qms-paginator .mat-paginator-container .qms-btn-icon{width:40px;height:40px;line-height:40px}::ng-deep .qms-paginator .mat-paginator-container .mat-select .mat-select-arrow{margin-top:20px}::ng-deep .qms-paginator .mat-paginator-container .qms-total-result{margin-right:24px;margin-bottom:20px}::ng-deep .qms-paginator .mat-paginator-container .qms-total-result span{font-family:Open Sans;font-weight:400;font-size:14px;line-height:22px;color:rgba(0,0,0,.6)}::ng-deep .qms-paginator .mat-paginator-container .qms-paginator-page-size{margin-right:24px;display:flex;align-items:baseline}::ng-deep .qms-paginator .mat-paginator-container .qms-paginator-page-size .qms-pagesize-label{font-weight:400;font-size:14px;line-height:22px;color:#323232;font-family:Open Sans;font-style:normal;margin-right:8px}::ng-deep .qms-paginator .mat-paginator-container .qms-paginator-page-size .qms-form-page-size .mat-form-field-flex{width:80px}::ng-deep .qms-paginator .mat-paginator-container .qms-paginator-page-size .qms-form-select-page-size .mat-form-field-flex{width:51px;padding-left:9px;padding-right:5px}::ng-deep .qms-paginator .mat-paginator-container .qms-paginator-page-size .jump-page .mat-form-field-wrapper .mat-form-field-flex{width:55px}::ng-deep .qms-paginator .mat-paginator-container .qms-paginator-page-size .mat-form-field-flex{height:40px}::ng-deep .qms-paginator .mat-paginator-container .qms-paginator-page-size .mat-form-field-flex .mat-form-field-infix{padding-top:4px;border-top:0;padding-bottom:0;height:25px}::ng-deep .qms-paginator .mat-paginator-container .qms-paginator-range-actions{display:flex;align-items:center;margin-bottom:15px}::ng-deep .qms-paginator .mat-paginator-container .qms-paginator-range-actions .selected{background-color:#e5eefb;color:#1954a9}::ng-deep .qms-paginator .mat-paginator-container .qms-paginator-range-actions .qms-3d{font-weight:600;font-size:14px;line-height:22px;color:#323232}::ng-deep .qms-paginator .mat-paginator-container .qms-paginator-range-actions button:not(.qms-btn-disabled) .qms-btn-icon-wrapper{color:#323232}::ng-deep .qms-paginator .mat-paginator-container-mobile .mat-select .mat-select-arrow{margin-top:20px}::ng-deep .qms-paginator .mat-paginator-container-mobile .qms-total-result{margin-bottom:16px}::ng-deep .qms-paginator .mat-paginator-container-mobile .qms-total-result span{font-family:Open Sans;font-style:normal;font-weight:400;font-size:12px;line-height:16px;color:rgba(0,0,0,.6)}::ng-deep .qms-paginator .mat-paginator-container-mobile .mat-paginator-container{justify-content:flex-start}::ng-deep .qms-paginator .mat-paginator-container-mobile .qms-paginator-page-size{margin-right:24px;display:flex;align-items:baseline}::ng-deep .qms-paginator .mat-paginator-container-mobile .qms-paginator-page-size .qms-pagesize-label{font-weight:400;font-size:12px;line-height:22px;color:#323232;font-family:Open Sans;font-style:normal;margin-right:8px}::ng-deep .qms-paginator .mat-paginator-container-mobile .qms-paginator-page-size .qms-form-page-size .mat-form-field-flex{width:80px}::ng-deep .qms-paginator .mat-paginator-container-mobile .qms-paginator-page-size .qms-form-select-page-size .mat-form-field-flex{width:51px;padding-left:9px;padding-right:5px}::ng-deep .qms-paginator .mat-paginator-container-mobile .qms-paginator-page-size .jump-page .mat-form-field-wrapper .mat-form-field-flex{width:55px}::ng-deep .qms-paginator .mat-paginator-container-mobile .qms-paginator-page-size .mat-form-field-flex{height:40px}::ng-deep .qms-paginator .mat-paginator-container-mobile .qms-paginator-page-size .mat-form-field-flex .mat-form-field-infix{padding-top:4px;border-top:0;padding-bottom:0;height:25px}::ng-deep .qms-paginator .size-small .mat-paginator-container{justify-content:flex-start}"]
                 },] }
     ];
     QMSPaginatorComponent.ctorParameters = function () { return []; };
@@ -22415,7 +22381,6 @@
     exports.QMSRichText = QMSRichText;
     exports.QMSRichTextModule = QMSRichTextModule;
     exports.QMSRowDetailDirective = QMSRowDetailDirective;
-    exports.QMSRowExpandDirective = QMSRowExpandDirective;
     exports.QMSScrolableAttachmentListDirective = QMSScrolableAttachmentListDirective;
     exports.QMSScrollbarDirective = QMSScrollbarDirective;
     exports.QMSSearchFieldDirective = QMSSearchFieldDirective;
@@ -22425,6 +22390,7 @@
     exports.QMSSelectOneModule = QMSSelectOneModule;
     exports.QMSSelectProcessDocumentGlobalService = QMSSelectProcessDocumentGlobalService;
     exports.QMSSelectProcessDocumentModule = QMSSelectProcessDocumentModule;
+    exports.QMSSideSheetModule = QMSSideSheetModule;
     exports.QMSSnackbarConfig = QMSSnackbarConfig;
     exports.QMSSuffixDirective = QMSSuffixDirective;
     exports.QMSSuffixFieldDirective = QMSSuffixFieldDirective;
@@ -22436,8 +22402,8 @@
     exports.QMSTableActionBlock = QMSTableActionBlock;
     exports.QMSTableChildrenDirective = QMSTableChildrenDirective;
     exports.QMSTableDirective = QMSTableDirective;
-    exports.QMSTableExpandDirective = QMSTableExpandDirective;
     exports.QMSTableModule = QMSTableModule;
+    exports.QMSTableRowDirective = QMSTableRowDirective;
     exports.QMSTextBlockDirective = QMSTextBlockDirective;
     exports.QMSTextBlockLine = QMSTextBlockLine;
     exports.QMSToolTipComponent = QMSToolTipComponent;