qms-angular 1.0.80 → 1.0.84

package/bundles/qms-angular.umd.js

@@ -44,6 +44,9 @@
     QmsAngularService.ctorParameters = function () { return []; };
 
     var en = {
+        "RESULTS": "Results",
+        "ROW_PER_PAGE": "Items per page",
+        "JUM_TO_PAGE": "Go to page",
         "MY_COMPONENT": "My component",
         "SAVE_BUTTON": "Save",
         "CANCEL_BUTTON": "Cancel",
@@ -341,6 +344,9 @@
     };
 
     var no = {
+        "RESULTS": "Resultater",
+        "ROW_PER_PAGE": "Rader per side",
+        "JUM_TO_PAGE": "Hopp til side",
         "MY_COMPONENT": "Min komponent",
         "SAVE_BUTTON": "Lagre",
         "CANCEL_BUTTON": "Avbryt",
@@ -3230,7 +3236,7 @@
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(CdkDetailRowDirective.prototype, "cdkDetailRow", {
+        Object.defineProperty(CdkDetailRowDirective.prototype, "qmsCdkDetailRow", {
             set: function (value) {
                 if (value !== this.row) {
                     this.row = value;
@@ -3310,7 +3316,7 @@
     }());
     CdkDetailRowDirective.decorators = [
         { type: i0.Directive, args: [{
-                    selector: '[cdkDetailRow]'
+                    selector: '[qmsCdkDetailRow]'
                 },] }
     ];
     CdkDetailRowDirective.ctorParameters = function () { return [
@@ -3320,9 +3326,9 @@
     CdkDetailRowDirective.propDecorators = {
         onRowExpandEvent: [{ type: i0.Output }],
         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',] }],
+        qmsCdkDetailRow: [{ type: i0.Input }],
+        template: [{ type: i0.Input, args: ['qmsCdkDetailRowTpl',] }],
+        otherTemplate: [{ type: i0.Input, args: ['qmsCdkotherTemplate',] }],
         onClick: [{ type: i0.HostListener, args: ['click',] }],
         onKeydownHandler: [{ type: i0.HostListener, args: ['keydown.enter', ['$event'],] }],
         onClickItem: [{ type: i0.HostListener, args: ['document:click', ['$event.target'],] }],
@@ -3355,7 +3361,7 @@
                 }
             }
         };
-        Object.defineProperty(QMSTableRowDirective.prototype, "cdkDetailRow", {
+        Object.defineProperty(QMSTableRowDirective.prototype, "qmsCdkDetailRow", {
             set: function (value) {
                 this._rowData = value;
             },
@@ -3403,13 +3409,114 @@
         { type: i0.Renderer2 }
     ]; };
     QMSTableRowDirective.propDecorators = {
-        cdkDetailRow: [{ type: i0.Input }],
+        qmsCdkDetailRow: [{ 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 QMSDialogContainer = /** @class */ (function () {
+        function QMSDialogContainer(el) {
+            this.el = el;
+        }
+        QMSDialogContainer.prototype.ngOnInit = function () {
+            if (this.min) {
+                this.el.nativeElement.style["min-height"] = "" + this.min;
+            }
+            if (this.max) {
+                this.el.nativeElement.style["max-height"] = "" + this.max;
+            }
+        };
+        return QMSDialogContainer;
+    }());
+    QMSDialogContainer.decorators = [
+        { type: i0.Directive, args: [{
+                    selector: "[qms-dialog-container], qms-dialog-container, [qmsDialogContainer]",
+                    host: { 'class': 'qms-dialog-container' },
+                },] }
+    ];
+    QMSDialogContainer.ctorParameters = function () { return [
+        { type: i0.ElementRef }
+    ]; };
+    QMSDialogContainer.propDecorators = {
+        min: [{ type: i0.Input }],
+        max: [{ type: i0.Input }]
+    };
+    var QMSDialogHeader = /** @class */ (function () {
+        function QMSDialogHeader(el) {
+            this.el = el;
+        }
+        QMSDialogHeader.prototype.ngOnInit = function () {
+            if (this.height) {
+                this.el.nativeElement.style["height"] = "" + this.height;
+            }
+        };
+        return QMSDialogHeader;
+    }());
+    QMSDialogHeader.decorators = [
+        { type: i0.Directive, args: [{
+                    selector: '[qms-dialog-header], qms-dialog-header, [qmsDialogHeader]',
+                    exportAs: 'qmsDialogHeader',
+                    host: {
+                        'class': 'qms-dialog-header'
+                    },
+                },] }
+    ];
+    QMSDialogHeader.ctorParameters = function () { return [
+        { type: i0.ElementRef }
+    ]; };
+    QMSDialogHeader.propDecorators = {
+        height: [{ type: i0.Input }]
+    };
+    /**
+     * Scrollable content container of a dialog.
+     */
+    var QMSDialogContent = /** @class */ (function () {
+        function QMSDialogContent() {
+        }
+        return QMSDialogContent;
+    }());
+    QMSDialogContent.decorators = [
+        { type: i0.Directive, args: [{
+                    selector: "[qms-dialog-content], qms-dialog-content, [qmsDialogContent]",
+                    host: { 'class': 'qms-dialog-content' },
+                },] }
+    ];
+    /**
+     * Container for the bottom action buttons in a dialog.
+     * Stays fixed to the bottom when scrolling.
+     */
+    var QMSDialogFooter = /** @class */ (function () {
+        function QMSDialogFooter(el) {
+            this.el = el;
+            this.align = 'start';
+        }
+        QMSDialogFooter.prototype.ngOnInit = function () {
+            if (this.height) {
+                this.el.nativeElement.style["height"] = "" + this.height;
+            }
+        };
+        return QMSDialogFooter;
+    }());
+    QMSDialogFooter.decorators = [
+        { type: i0.Directive, args: [{
+                    selector: "[qms-dialog-footer], qms-dialog-footer, [qmsDialogFooter]",
+                    host: {
+                        'class': 'qms-dialog-footer',
+                        '[class.qms-dialog-footer-align-center]': 'align === "center"',
+                        '[class.qms-dialog-footer-align-end]': 'align === "end"',
+                    },
+                },] }
+    ];
+    QMSDialogFooter.ctorParameters = function () { return [
+        { type: i0.ElementRef }
+    ]; };
+    QMSDialogFooter.propDecorators = {
+        align: [{ type: i0.Input }],
+        height: [{ type: i0.Input }]
+    };
+
     var ɵ0$2 = { appearance: 'fill' }, ɵ1 = { color: 'none' };
     var QmsAngularModule = /** @class */ (function () {
         function QmsAngularModule() {
@@ -3464,7 +3571,11 @@
                         ScrollToSelectedDirective,
                         QMSTooltipImageDirective,
                         SelectDialog,
-                        QMSAppBar
+                        QMSAppBar,
+                        QMSDialogContainer,
+                        QMSDialogHeader,
+                        QMSDialogContent,
+                        QMSDialogFooter
                     ],
                     imports: [
                         common.CommonModule,
@@ -3518,7 +3629,11 @@
                         QMSTableChildrenDirective,
                         QMSRowDetailDirective,
                         CdkDetailRowDirective,
-                        QMSCollapseGroupDirective
+                        QMSCollapseGroupDirective,
+                        QMSDialogContainer,
+                        QMSDialogHeader,
+                        QMSDialogContent,
+                        QMSDialogFooter
                     ],
                     providers: [
                         { provide: formField.MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: ɵ0$2 },
@@ -5129,7 +5244,7 @@
                 for (var i = 0; i < _this.treeControl.dataNodes.length; i++) {
                     if (_this.treeControl.dataNodes[i].id === node.id &&
                         _this.treeControl.dataNodes[i].parentId === node.parentId &&
-                        !_this.treeControl.dataNodes[i].disabled && !_this.treeControl.dataNodes[i].expandable) {
+                        !_this.treeControl.dataNodes[i].disabled) {
                         if (!_this.checklistSelection.isSelected(_this.treeControl.dataNodes[i]))
                             _this.checklistSelection.toggle(_this.treeControl.dataNodes[i]);
                     }
@@ -5972,43 +6087,31 @@
             var _this = this;
             this.selectedData = [];
             this.selectedData2 = [];
-            this.checkedNodeList = this.checkedNodeList.filter(function (x) { return (x.id.toLowerCase() !== item.id.toLowerCase() || x.parentId.toLowerCase() !== item.parentId.toLowerCase()); });
-            var tempArr = [];
-            var tempArrDocument = [];
+            this.checkedNodeList = this.checkedNodeList.filter(function (x) { var _a, _b; return (x.id.toLowerCase() !== item.id.toLowerCase() || ((_a = x.parentId) === null || _a === void 0 ? void 0 : _a.toLowerCase()) !== ((_b = item.parentId) === null || _b === void 0 ? void 0 : _b.toLowerCase())); });
             var newSelectProcessList = [];
             var newSelectDocumentList = [];
-            this.commonCheckedList.forEach(function (element) {
-                _this.checkedNodeList.forEach(function (x) {
-                    if (element.id.toLowerCase() === x.id.toLowerCase() && element.parentId.toLowerCase() === x.parentId.toLowerCase()) {
-                        tempArr.push(element);
-                    }
-                });
-            });
+            this.commonCheckedList = this.commonCheckedList.filter(function (x) { var _a, _b; return (x.id.toLowerCase() !== item.id.toLowerCase() || ((_a = x.parentId) === null || _a === void 0 ? void 0 : _a.toLowerCase()) !== ((_b = item.parentId) === null || _b === void 0 ? void 0 : _b.toLowerCase())); });
             this.singleProcessList.forEach(function (element) {
                 _this.checkedNodeList.forEach(function (x) {
-                    if (element.id.toLowerCase() === x.id.toLowerCase() && element.parentId.toLowerCase() === x.parentId.toLowerCase()) {
+                    var _a, _b;
+                    if (element.id.toLowerCase() === x.id.toLowerCase() && ((_a = element.parentId) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === ((_b = x.parentId) === null || _b === void 0 ? void 0 : _b.toLowerCase())) {
                         newSelectProcessList.push(element);
                     }
                 });
             });
             this.singleProcessList = newSelectProcessList;
-            this.selectedData = __spreadArray([], __read(tempArr));
-            this.documentCheckedList.forEach(function (element) {
-                _this.checkedNodeList.forEach(function (x) {
-                    if (element.id.toLowerCase() === x.id.toLowerCase() && element.parentId.toLowerCase() === x.parentId.toLowerCase()) {
-                        tempArrDocument.push(element);
-                    }
-                });
-            });
+            this.selectedData = this.commonCheckedList;
+            this.documentCheckedList = this.documentCheckedList.filter(function (x) { var _a, _b; return (x.id.toLowerCase() !== item.id.toLowerCase() || ((_a = x.parentId) === null || _a === void 0 ? void 0 : _a.toLowerCase()) !== ((_b = item.parentId) === null || _b === void 0 ? void 0 : _b.toLowerCase())); });
             this.singleDocumentList.forEach(function (element) {
                 _this.checkedNodeList.forEach(function (x) {
-                    if (element.id.toLowerCase() === x.id.toLowerCase() && element.parentId.toLowerCase() === x.parentId.toLowerCase()) {
+                    var _a, _b;
+                    if (element.id.toLowerCase() === x.id.toLowerCase() && ((_a = element.parentId) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === ((_b = x.parentId) === null || _b === void 0 ? void 0 : _b.toLowerCase())) {
                         newSelectDocumentList.push(element);
                     }
                 });
             });
             this.singleDocumentList = newSelectDocumentList;
-            this.selectedData2 = __spreadArray([], __read(tempArrDocument));
+            this.selectedData2 = this.commonCheckedList;
             // when remove check node list, related options need refresh disabled options
             this.refreshRelatedOptions();
         };
@@ -6078,7 +6181,8 @@
             this.selectedNode = [];
             if (this.treeConfig1.showCheckBox) {
                 index = this.checkedNodeList.findIndex(function (x) {
-                    return x.id.toLowerCase() === item.id.toLowerCase() && x.parentId.toLowerCase() === item.parentId.toLowerCase();
+                    var _a, _b;
+                    return x.id.toLowerCase() === item.id.toLowerCase() && ((_a = x.parentId) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === ((_b = item.parentId) === null || _b === void 0 ? void 0 : _b.toLowerCase());
                 });
             }
             if (index < 0) {
@@ -6089,13 +6193,15 @@
                     case this.dataType.document:
                         // document  
                         var isExistInDisabled = this.disabledList2.findIndex(function (x) {
-                            return x.id && x.id.toLowerCase() === item.id.toLowerCase() && x.parentId.toLowerCase() === item.parentId.toLowerCase();
+                            var _a, _b;
+                            return x.id && x.id.toLowerCase() === item.id.toLowerCase() && ((_a = x.parentId) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === ((_b = item.parentId) === null || _b === void 0 ? void 0 : _b.toLowerCase());
                         });
                         if (isExistInDisabled >= 0) {
                             return;
                         }
                         position = this.treeData2.findIndex(function (x) {
-                            return x.childId === item.id && x.rootId.toLowerCase() === item.parentId.toLowerCase();
+                            var _a;
+                            return x.childId === item.id && x.rootId.toLowerCase() === ((_a = item.parentId) === null || _a === void 0 ? void 0 : _a.toLowerCase());
                         });
                         if (position >= 0) {
                             node = this.treeData2[position];
@@ -6208,7 +6314,8 @@
                         break;
                     case this.dataType.area:
                         position = this.treeData1.findIndex(function (x) {
-                            return x.rootId.toLowerCase() === item.id.toLowerCase() && x.parentId.toLowerCase() === item.parentId.toLowerCase();
+                            var _a, _b;
+                            return x.rootId.toLowerCase() === item.id.toLowerCase() && ((_a = x.parentId) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === ((_b = item.parentId) === null || _b === void 0 ? void 0 : _b.toLowerCase());
                         });
                         typeId = item.itemType;
                         if (position >= 0) {
@@ -6246,13 +6353,15 @@
                         break;
                     case this.dataType.process:
                         var isExistInProcessDisabled = this.disabledList.findIndex(function (x) {
-                            return x.id && x.id.toLowerCase() === item.id.toLowerCase() && x.parentId.toLowerCase() === item.parentId.toLowerCase();
+                            var _a, _b;
+                            return x.id && x.id.toLowerCase() === item.id.toLowerCase() && ((_a = x.parentId) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === ((_b = item.parentId) === null || _b === void 0 ? void 0 : _b.toLowerCase());
                         });
                         if (isExistInProcessDisabled >= 0) {
                             return;
                         }
                         position = this.treeData1.findIndex(function (x) {
-                            return x.childId && x.childId.toLowerCase() === item.id.toLowerCase() && x.rootId.toLowerCase() === item.parentId.toLowerCase();
+                            var _a;
+                            return x.childId && x.childId.toLowerCase() === item.id.toLowerCase() && x.rootId.toLowerCase() === ((_a = item.parentId) === null || _a === void 0 ? void 0 : _a.toLowerCase());
                         });
                         if (position >= 0) {
                             node = this.treeData1[position];
@@ -6345,7 +6454,8 @@
                     case this.dataType.checklistCategory:
                     case this.dataType.riskFolder:
                         position = this.treeData1.findIndex(function (x) {
-                            return x.rootId.toLowerCase() === item.id.toLowerCase() && x.parentId.toLowerCase() === (item.parentId ? item.parentId.toLowerCase() : '');
+                            var _a, _b;
+                            return x.rootId.toLowerCase() === item.id.toLowerCase() && ((_a = x.parentId) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === (item.parentId ? (_b = item.parentId) === null || _b === void 0 ? void 0 : _b.toLowerCase() : '');
                         });
                         this.selectNodeRecursive(this.treeData1[position], item.itemType);
                         break;
@@ -6353,7 +6463,8 @@
                     case this.dataType.checklist:
                     case this.dataType.risk:
                         position = this.treeData1.findIndex(function (x) {
-                            return x.childId && x.childId.toLowerCase() === item.id.toLowerCase() && x.rootId.toLowerCase() === item.parentId.toLowerCase();
+                            var _a;
+                            return x.childId && x.childId.toLowerCase() === item.id.toLowerCase() && x.rootId.toLowerCase() === ((_a = item.parentId) === null || _a === void 0 ? void 0 : _a.toLowerCase());
                         });
                         if (position >= 0) {
                             node = this.treeData1[position];
@@ -6385,7 +6496,7 @@
                     parentId: item.parentId
                 };
                 var nodeChildren = this.treeData1.
-                    filter(function (x) { return x.rootId === item.rootId; }).
+                    filter(function (x) { return x.rootId === item.rootId && x.childId; }).
                     map(function (x) {
                     return {
                         id: x.childId,
@@ -6436,8 +6547,8 @@
         RelatedPopupComponent.prototype.getCommonCheckedNode = function (list) {
             var _this = this;
             this.checkedNodeList = [];
-            this.commonCheckedList = [];
             this.singleProcessList = [];
+            this.commonCheckedList = [];
             this.checkedNodeList = __spreadArray([], __read(this.singleDocumentList));
             if (list.length) {
                 list.forEach(function (item) {
@@ -6502,24 +6613,13 @@
                     this.checkedNodeList = this.checkedNodeList.slice(this.maxSelectItemCount * -1);
                 }
             }
-            this.selectedData = this.checkedNodeList.map(function (item) {
-                return {
-                    id: item.id,
-                    name: item.itemName,
-                    parentId: item.parentId,
-                    levelType: item.levelType,
-                    level: 0,
-                    expandable: true,
-                    hasChild: true,
-                    disabled: false
-                };
-            });
+            this.selectedData = this.commonCheckedList;
         };
         RelatedPopupComponent.prototype.getDocumentCheckedNode = function (list) {
             var _this = this;
             this.checkedNodeList = [];
-            this.documentCheckedList = [];
             this.singleDocumentList = [];
+            this.documentCheckedList = [];
             this.checkedNodeList = __spreadArray([], __read(this.singleProcessList));
             if (list.length) {
                 list.forEach(function (item) {
@@ -6584,6 +6684,7 @@
                     this.checkedNodeList = this.checkedNodeList.slice(this.maxSelectItemCount * -1);
                 }
             }
+            this.selectedData2 = this.documentCheckedList;
         };
         RelatedPopupComponent.prototype.onCloseClick = function () {
             this.selectedFolder = null;
@@ -6789,7 +6890,7 @@
             return null;
         };
         RelatedPopupComponent.prototype.toggleSelectItem = function (node) {
-            var selectedNode = this.checkedNodeList.find(function (x) { return (x.id.toLowerCase() === node.id.toLowerCase() && x.parentId.toLowerCase() === node.parentId.toLowerCase()); });
+            var selectedNode = this.checkedNodeList.find(function (x) { var _a, _b; return (x.id.toLowerCase() === node.id.toLowerCase() && ((_a = x.parentId) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === ((_b = node.parentId) === null || _b === void 0 ? void 0 : _b.toLowerCase())); });
             if (selectedNode) {
                 this.removeCheckedNodeList({
                     id: selectedNode.id,
@@ -6806,7 +6907,7 @@
             }
         };
         RelatedPopupComponent.prototype.isNodeSelected = function (node) {
-            return this.checkedNodeList.filter(function (x) { return (x.id.toLowerCase() === node.id.toLowerCase() && x.parentId.toLowerCase() === node.parentId.toLowerCase()); }).length > 0;
+            return this.checkedNodeList.filter(function (x) { var _a, _b; return (x.id.toLowerCase() === node.id.toLowerCase() && ((_a = x.parentId) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === ((_b = node.parentId) === null || _b === void 0 ? void 0 : _b.toLowerCase())); }).length > 0;
         };
         RelatedPopupComponent.prototype.getChildrenOfFolder = function (node, type) {
             if (this.splitView) {
@@ -6847,26 +6948,32 @@
             return this.getModuleFilteredOptions(moduleId).length > 0;
         };
         RelatedPopupComponent.prototype.selectNodeTreeEvent = function (node) {
-            var index = this.selectedData.findIndex(function (x) { return x.id.toLowerCase() === node.id.toLowerCase()
-                && (!node.parentId || x.parentId.toLowerCase() === node.parentId.toLowerCase()) && x.expandable === node.expandable; });
+            var index = this.commonCheckedList.findIndex(function (x) {
+                var _a, _b;
+                return x.id.toLowerCase() === node.id.toLowerCase()
+                    && (!node.parentId || ((_a = x.parentId) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === ((_b = node.parentId) === null || _b === void 0 ? void 0 : _b.toLowerCase())) && x.expandable === node.expandable;
+            });
             if (index >= 0) {
-                this.selectedData = this.selectedData.filter(function (x, ind) { return ind !== index; });
+                this.commonCheckedList = this.commonCheckedList.filter(function (_, ind) { return ind !== index; });
             }
             else {
-                this.selectedData = __spreadArray(__spreadArray([], __read(this.selectedData)), [node]);
                 this.commonCheckedList = __spreadArray(__spreadArray([], __read(this.commonCheckedList)), [node]);
             }
+            this.selectedData = this.commonCheckedList;
         };
         RelatedPopupComponent.prototype.selectNodeTree2Event = function (node) {
-            var index = this.selectedData2.findIndex(function (x) { return x.id.toLowerCase() === node.id.toLowerCase()
-                && (!node.parentId || x.parentId.toLowerCase() === node.parentId.toLowerCase()) && x.expandable === node.expandable; });
+            var index = this.documentCheckedList.findIndex(function (x) {
+                var _a, _b;
+                return x.id.toLowerCase() === node.id.toLowerCase()
+                    && (!node.parentId || ((_a = x.parentId) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === ((_b = node.parentId) === null || _b === void 0 ? void 0 : _b.toLowerCase())) && x.expandable === node.expandable;
+            });
             if (index >= 0) {
-                this.selectedData2 = this.selectedData2.filter(function (x, ind) { return ind !== index; });
+                this.documentCheckedList = this.documentCheckedList.filter(function (_, ind) { return ind !== index; });
             }
             else {
-                this.selectedData2 = __spreadArray(__spreadArray([], __read(this.selectedData2)), [node]);
                 this.documentCheckedList = __spreadArray(__spreadArray([], __read(this.documentCheckedList)), [node]);
             }
+            this.selectedData2 = this.documentCheckedList;
         };
         RelatedPopupComponent.prototype.getChildNodeSelectOne = function (listChildren) {
             this.listChildrenSelectOne = [];
@@ -6874,7 +6981,7 @@
         };
         RelatedPopupComponent.prototype.hasSelected = function (related) {
             var arrDisabledList = this.disabledList.concat(this.disabledList2);
-            return arrDisabledList.some(function (node) { return node.id.toUpperCase() === related.id.toUpperCase() && (!related.parentId || related.parentId.toLowerCase() === node.parentId.toLowerCase()); });
+            return arrDisabledList.some(function (node) { var _a, _b; return node.id.toUpperCase() === related.id.toUpperCase() && (!related.parentId || ((_a = related.parentId) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === ((_b = node.parentId) === null || _b === void 0 ? void 0 : _b.toLowerCase())); });
         };
         RelatedPopupComponent.prototype.toRelatedOptions = function (relateds) {
             var e_1, _j;
@@ -19571,7 +19678,8 @@
                     itemType: typeId,
                     itemNumberId: item.itemNumberId,
                     levelType: item.levelType,
-                    parentId: node.rootId
+                    parentId: node.rootId,
+                    parentName: node.rootName
                 });
             }
             if (this.treeConfig.canHaveDupId) {
@@ -21059,21 +21167,23 @@
             var _this = this;
             this.selectedData = [];
             this.selectedData2 = [];
-            this.checkedNodeList = this.checkedNodeList.filter(function (x) { return (x.id.toLowerCase() !== item.id.toLowerCase() || x.parentId.toLowerCase() !== item.parentId.toLowerCase()); });
+            this.checkedNodeList = this.checkedNodeList.filter(function (x) { var _a, _b; return (x.id.toLowerCase() !== item.id.toLowerCase() || ((_a = x.parentId) === null || _a === void 0 ? void 0 : _a.toLowerCase()) !== ((_b = item.parentId) === null || _b === void 0 ? void 0 : _b.toLowerCase())); });
             var tempArr = [];
             var tempArrDocument = [];
             var newSelectProcessList = [];
             var newSelectDocumentList = [];
             this.commonCheckedList.forEach(function (element) {
                 _this.checkedNodeList.forEach(function (x) {
-                    if (element.id.toLowerCase() === x.id.toLowerCase() && element.parentId.toLowerCase() === x.parentId.toLowerCase()) {
+                    var _a, _b;
+                    if (element.id.toLowerCase() === x.id.toLowerCase() && ((_a = element.parentId) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === ((_b = x.parentId) === null || _b === void 0 ? void 0 : _b.toLowerCase())) {
                         tempArr.push(element);
                     }
                 });
             });
             this.singleProcessList.forEach(function (element) {
                 _this.checkedNodeList.forEach(function (x) {
-                    if (element.id.toLowerCase() === x.id.toLowerCase() && element.parentId.toLowerCase() === x.parentId.toLowerCase()) {
+                    var _a, _b;
+                    if (element.id.toLowerCase() === x.id.toLowerCase() && ((_a = element.parentId) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === ((_b = x.parentId) === null || _b === void 0 ? void 0 : _b.toLowerCase())) {
                         newSelectProcessList.push(element);
                     }
                 });
@@ -21084,14 +21194,16 @@
             }
             this.documentCheckedList.forEach(function (element) {
                 _this.checkedNodeList.forEach(function (x) {
-                    if (element.id.toLowerCase() === x.id.toLowerCase() && element.parentId.toLowerCase() === x.parentId.toLowerCase()) {
+                    var _a, _b;
+                    if (element.id.toLowerCase() === x.id.toLowerCase() && ((_a = element.parentId) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === ((_b = x.parentId) === null || _b === void 0 ? void 0 : _b.toLowerCase())) {
                         tempArrDocument.push(element);
                     }
                 });
             });
             this.singleDocumentList.forEach(function (element) {
                 _this.checkedNodeList.forEach(function (x) {
-                    if (element.id.toLowerCase() === x.id.toLowerCase() && element.parentId.toLowerCase() === x.parentId.toLowerCase()) {
+                    var _a, _b;
+                    if (element.id.toLowerCase() === x.id.toLowerCase() && ((_a = element.parentId) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === ((_b = x.parentId) === null || _b === void 0 ? void 0 : _b.toLowerCase())) {
                         newSelectDocumentList.push(element);
                     }
                 });
@@ -21161,15 +21273,16 @@
             this.selectedNode = [];
             if (this.treeConfig1.showCheckBox) {
                 index = this.checkedNodeList.findIndex(function (x) {
-                    return x.id.toLowerCase() === item.id.toLowerCase() && x.parentId.toLowerCase() === item.parentId.toLowerCase() && x.itemType === item.itemType;
+                    var _a, _b;
+                    return x.id.toLowerCase() === item.id.toLowerCase() && ((_a = x.parentId) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === ((_b = item.parentId) === null || _b === void 0 ? void 0 : _b.toLowerCase()) && x.itemType === item.itemType;
                 });
             }
             if (index < 0) {
                 if (item.itemType === this.dataType.document || item.itemType === this.dataType.folder) {
                     // document  
                     var isExistInDisabled = this.disabledList2.findIndex(function (x) {
-                        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);
+                        var _a, _b, _c;
+                        return ((_a = x.id) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === item.id.toLowerCase() && (!item.parentId || ((_b = x.parentId) === null || _b === void 0 ? void 0 : _b.toLowerCase()) === ((_c = item.parentId) === null || _c === void 0 ? void 0 : _c.toLowerCase()) && x.itemType === item.itemType);
                     }) >= 0;
                     if (isExistInDisabled) {
                         return;
@@ -21178,8 +21291,8 @@
                 }
                 else if (item.itemType === this.dataType.area || item.itemType === this.dataType.process) {
                     var isExistInDisabled = this.disabledList.findIndex(function (x) {
-                        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);
+                        var _a, _b, _c;
+                        return ((_a = x.id) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === item.id.toLowerCase() && (!item.parentId || ((_b = x.parentId) === null || _b === void 0 ? void 0 : _b.toLowerCase()) === ((_c = item.parentId) === null || _c === void 0 ? void 0 : _c.toLowerCase()) && x.itemType === item.itemType);
                     }) >= 0;
                     if (isExistInDisabled) {
                         return;
@@ -21201,14 +21314,20 @@
             newNodeDocs.displayId = +item.itemNumberId;
             newNodeDocs.expandable = item.itemType == exports.DataType.folder || item.itemType == exports.DataType.area ? true : false;
             if (item.itemType == exports.DataType.folder || item.itemType == exports.DataType.document) {
-                if (this.treeData2.findIndex(function (x) { return x.id.toLowerCase() === newNodeDocs.id.toLowerCase() &&
-                    (!newNodeDocs.parentId || x.parentId.toLowerCase() === newNodeDocs.parentId.toLowerCase()) && x.expandable === newNodeDocs.expandable; }) >= 0) {
+                if (this.treeData2.findIndex(function (x) {
+                    var _a, _b;
+                    return x.id.toLowerCase() === newNodeDocs.id.toLowerCase() &&
+                        (!newNodeDocs.parentId || ((_a = x.parentId) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === ((_b = newNodeDocs.parentId) === null || _b === void 0 ? void 0 : _b.toLowerCase())) && x.expandable === newNodeDocs.expandable;
+                }) >= 0) {
                     this.treeData2 = __spreadArray(__spreadArray([], __read(this.treeData2)), [newNodeDocs]);
                 }
             }
             else {
-                if (this.treeData1.findIndex(function (x) { return x.id.toLowerCase() === newNodeDocs.id.toLowerCase() &&
-                    (!newNodeDocs.parentId || x.parentId.toLowerCase() === newNodeDocs.parentId.toLowerCase()) && x.expandable === newNodeDocs.expandable; }) >= 0) {
+                if (this.treeData1.findIndex(function (x) {
+                    var _a, _b;
+                    return x.id.toLowerCase() === newNodeDocs.id.toLowerCase() &&
+                        (!newNodeDocs.parentId || ((_a = x.parentId) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === ((_b = newNodeDocs.parentId) === null || _b === void 0 ? void 0 : _b.toLowerCase())) && x.expandable === newNodeDocs.expandable;
+                }) >= 0) {
                     this.treeData1 = __spreadArray(__spreadArray([], __read(this.treeData1)), [newNodeDocs]);
                 }
             }
@@ -21227,11 +21346,14 @@
                 this.documentCheckedList = [];
                 this.commonCheckedList = [];
             }
-            var index = this.checkedNodeList.findIndex(function (x) { return x.id.toLowerCase() === newNodeDocs.id.toLowerCase() &&
-                (!newNodeDocs.parentId || x.parentId.toLowerCase() === newNodeDocs.parentId.toLowerCase()) && x.expandable === newNodeDocs.expandable; });
+            var index = this.checkedNodeList.findIndex(function (x) {
+                var _a, _b;
+                return x.id.toLowerCase() === newNodeDocs.id.toLowerCase() &&
+                    (!newNodeDocs.parentId || ((_a = x.parentId) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === ((_b = newNodeDocs.parentId) === null || _b === void 0 ? void 0 : _b.toLowerCase())) && x.expandable === newNodeDocs.expandable;
+            });
             if (index < 0) {
                 if (item.itemType == exports.DataType.folder || item.itemType == exports.DataType.document) {
-                    if (this.documentCheckedList.findIndex(function (x) { return x.id.toLowerCase() === newNodeDocs.id.toLowerCase() && x.parentId.toLowerCase() === newNodeDocs.parentId.toLowerCase(); }) < 0) {
+                    if (this.documentCheckedList.findIndex(function (x) { var _a, _b; return x.id.toLowerCase() === newNodeDocs.id.toLowerCase() && ((_a = x.parentId) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === ((_b = newNodeDocs.parentId) === null || _b === void 0 ? void 0 : _b.toLowerCase()); }) < 0) {
                         this.documentCheckedList.push({
                             id: newNodeDocs.id,
                             name: newNodeDocs.name,
@@ -21246,7 +21368,7 @@
                     }
                 }
                 else {
-                    if (this.commonCheckedList.findIndex(function (x) { return x.id.toLowerCase() === newNodeDocs.id.toLowerCase() && x.parentId.toLowerCase() === newNodeDocs.parentId.toLowerCase(); }) < 0) {
+                    if (this.commonCheckedList.findIndex(function (x) { var _a, _b; return x.id.toLowerCase() === newNodeDocs.id.toLowerCase() && ((_a = x.parentId) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === ((_b = newNodeDocs.parentId) === null || _b === void 0 ? void 0 : _b.toLowerCase()); }) < 0) {
                         this.commonCheckedList.push({
                             id: newNodeDocs.id,
                             name: newNodeDocs.name,
@@ -21299,16 +21421,18 @@
                     };
                     if (x.itemType === exports.DataType.area || x.itemType === exports.DataType.process) {
                         _this.treeData1.forEach(function (item) {
+                            var _a, _b;
                             if (item.id && x.id.toLowerCase() === item.id.toLowerCase() &&
-                                (!x.parentId || x.parentId.toLowerCase() === item.parentId.toLowerCase())) {
+                                (!x.parentId || ((_a = x.parentId) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === ((_b = item.parentId) === null || _b === void 0 ? void 0 : _b.toLowerCase()))) {
                                 selectProcess.push(node);
                             }
                         });
                     }
                     else {
                         _this.treeData2.forEach(function (item) {
+                            var _a, _b;
                             if (item.id && x.id.toLowerCase() === item.id.toLowerCase() &&
-                                (!x.parentId || x.parentId.toLowerCase() === item.parentId.toLowerCase())) {
+                                (!x.parentId || ((_a = x.parentId) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === ((_b = item.parentId) === null || _b === void 0 ? void 0 : _b.toLowerCase()))) {
                                 selectDocument.push(node);
                             }
                         });
@@ -21320,14 +21444,20 @@
                 this.selectedData2 = __spreadArray(__spreadArray([], __read(this.selectedData2)), __read(selectDocument));
             }
             if (item.itemType === exports.DataType.folder || item.itemType === exports.DataType.document) {
-                if (this.selectedData2.findIndex(function (x) { return x.id.toLowerCase() === item.id.toLowerCase() &&
-                    (!item.parentId || x.parentId.toLowerCase() === item.parentId.toLowerCase()) && x.expandable === item.expandable; }) < 0) {
+                if (this.selectedData2.findIndex(function (x) {
+                    var _a, _b;
+                    return x.id.toLowerCase() === item.id.toLowerCase() &&
+                        (!item.parentId || ((_a = x.parentId) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === ((_b = item.parentId) === null || _b === void 0 ? void 0 : _b.toLowerCase())) && x.expandable === item.expandable;
+                }) < 0) {
                     this.selectedData2 = __spreadArray(__spreadArray([], __read(this.selectedData2)), [item]);
                 }
             }
             else {
-                if (this.selectedData.findIndex(function (x) { return x.id.toLowerCase() === item.id.toLowerCase() &&
-                    (!item.parentId || x.parentId.toLowerCase() === item.parentId.toLowerCase()) && x.expandable === item.expandable; }) < 0) {
+                if (this.selectedData.findIndex(function (x) {
+                    var _a, _b;
+                    return x.id.toLowerCase() === item.id.toLowerCase() &&
+                        (!item.parentId || ((_a = x.parentId) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === ((_b = item.parentId) === null || _b === void 0 ? void 0 : _b.toLowerCase())) && x.expandable === item.expandable;
+                }) < 0) {
                     this.selectedData = __spreadArray(__spreadArray([], __read(this.selectedData)), [item]);
                 }
             }
@@ -21466,7 +21596,7 @@
             return null;
         };
         SelectProcessDocumentPopupComponent.prototype.toggleSelectItem = function (node) {
-            var selectedNode = this.checkedNodeList.find(function (x) { return (x.id.toLowerCase() === node.id.toLowerCase() && x.parentId.toLowerCase() === node.parentId.toLowerCase()); });
+            var selectedNode = this.checkedNodeList.find(function (x) { var _a, _b; return (x.id.toLowerCase() === node.id.toLowerCase() && ((_a = x.parentId) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === ((_b = node.parentId) === null || _b === void 0 ? void 0 : _b.toLowerCase())); });
             if (selectedNode) {
                 this.removeCheckedNodeList({
                     id: selectedNode.id,
@@ -21486,7 +21616,7 @@
             }
         };
         SelectProcessDocumentPopupComponent.prototype.isNodeSelected = function (node) {
-            return this.checkedNodeList.filter(function (x) { return (x.id.toLowerCase() === node.id.toLowerCase() && x.parentId.toLowerCase() === node.parentId.toLowerCase()); }).length > 0;
+            return this.checkedNodeList.filter(function (x) { var _a, _b; return (x.id.toLowerCase() === node.id.toLowerCase() && ((_a = x.parentId) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === ((_b = node.parentId) === null || _b === void 0 ? void 0 : _b.toLowerCase())); }).length > 0;
         };
         SelectProcessDocumentPopupComponent.prototype.getChildrenOfFolder = function (node, type) {
             var item = new QMSProcessDocumentItem();
@@ -21509,8 +21639,11 @@
             if (!node.itemType) {
                 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; });
+            var index = this.checkedNodeList.findIndex(function (x) {
+                var _a, _b;
+                return x.id.toLowerCase() === node.id.toLowerCase()
+                    && (!node.parentId || ((_a = x.parentId) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === ((_b = node.parentId) === null || _b === void 0 ? void 0 : _b.toLowerCase())) && x.itemType === node.itemType;
+            });
             if (index >= 0) {
                 this.removeCheckedNodeList({
                     id: node.id,
@@ -21528,12 +21661,18 @@
                 var status = 0;
                 var statusName = '';
                 if (node.itemType == exports.DataType.folder || node.itemType == exports.DataType.document) {
-                    item = this.treeData2.find(function (x) { return x.id.toLowerCase() === node.id.toLowerCase()
-                        && (!node.parentId || x.parentId.toLowerCase() === node.parentId.toLowerCase()) && x.expandable == node.expandable; });
+                    item = this.treeData2.find(function (x) {
+                        var _a, _b;
+                        return x.id.toLowerCase() === node.id.toLowerCase()
+                            && (!node.parentId || ((_a = x.parentId) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === ((_b = node.parentId) === null || _b === void 0 ? void 0 : _b.toLowerCase())) && x.expandable == node.expandable;
+                    });
                 }
                 else {
-                    item = this.treeData1.find(function (x) { return x.id.toLowerCase() === node.id.toLowerCase()
-                        && (!node.parentId || x.parentId.toLowerCase() === node.parentId.toLowerCase()) && x.expandable == node.expandable; });
+                    item = this.treeData1.find(function (x) {
+                        var _a, _b;
+                        return x.id.toLowerCase() === node.id.toLowerCase()
+                            && (!node.parentId || ((_a = x.parentId) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === ((_b = node.parentId) === null || _b === void 0 ? void 0 : _b.toLowerCase())) && x.expandable == node.expandable;
+                    });
                 }
                 if (item) {
                     statusName = item.statusName;
@@ -21588,7 +21727,7 @@
             return arrDisabledList.some(function (node) { return node.id.toUpperCase() === related.id.toUpperCase(); });
         };
         SelectProcessDocumentPopupComponent.prototype.toRelatedOptions = function (relateds) {
-            var e_1, _b;
+            var e_1, _d;
             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()) {
@@ -21599,7 +21738,7 @@
             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);
+                    if (relateds_1_1 && !relateds_1_1.done && (_d = relateds_1.return)) _d.call(relateds_1);
                 }
                 finally { if (e_1) throw e_1.error; }
             }
@@ -21613,7 +21752,7 @@
     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    (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        <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            *ngIf=\"!hideSplitviewCheckbox\"\r\n          >\r\n          </mat-checkbox>\r\n          <button\r\n            class=\"button-boder\"\r\n            mat-icon-button\r\n            [disableRipple]=\"true\"\r\n            (click)=\"toggleSelectItem(node)\"\r\n            *ngIf=\"node.itemName\"\r\n          >\r\n            <mat-icon\r\n              class=\"mat-icon-rtl-mirror material-icons-outlined\"\r\n              [svgIcon]=\"getNodeIcon(node)\"\r\n            >\r\n            </mat-icon>\r\n          </button>\r\n          <span\r\n            class=\"text-node-item\"\r\n            style=\"cursor: pointer\"\r\n            (click)=\"toggleSelectItem(node)\"\r\n            [class.bgSelected]=\"\r\n              isSelectOne &&\r\n              idCheckIconSplitView == idToCheckSelectOne(node.id, node.parentId)\r\n            \"\r\n          >\r\n            <span\r\n              class=\"text-node\"\r\n              [class.select-one-checked]=\"\r\n                isSelectOne &&\r\n                idCheckIconSplitView ==\r\n                  idToCheckSelectOne(node.id, node.parentId)\r\n              \"\r\n              >{{ node.itemName }}</span\r\n            >\r\n            <mat-icon\r\n              class=\"select-one-checked\"\r\n              *ngIf=\"\r\n                isSelectOne &&\r\n                idCheckIconSplitView ==\r\n                  idToCheckSelectOne(node.id, node.parentId)\r\n              \"\r\n            >\r\n              done\r\n            </mat-icon>\r\n          </span>\r\n        </div>\r\n      </mat-expansion-panel>\r\n    </div>\r\n    <div\r\n      *ngIf=\"splitView\"\r\n      class=\"qms-scrollbar qmslib-related-popup-splitview qmslib_related_popup_content col-6\"\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 class=\"row\">\r\n    <div class=\"col-12 pr-0 pe-0\">\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    </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=\"qms-scrollbar qmslib-related-popup-splitview qmslib_related_popup_content col-6\"\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          *ngIf=\"!hideSplitviewCheckbox\"\r\n        >\r\n        </mat-checkbox>\r\n        <button\r\n          class=\"button-boder\"\r\n          mat-icon-button\r\n          [disableRipple]=\"true\"\r\n          (click)=\"toggleSelectItem(node)\"\r\n          *ngIf=\"node.itemName\"\r\n        >\r\n          <mat-icon\r\n            class=\"mat-icon-rtl-mirror material-icons-outlined\"\r\n            [svgIcon]=\"getNodeIcon(node)\"\r\n          >\r\n          </mat-icon>\r\n        </button>\r\n        <span\r\n          class=\"text-node-item\"\r\n          style=\"cursor: pointer\"\r\n          (click)=\"toggleSelectItem(node)\"\r\n          [class.bgSelected]=\"\r\n            isSelectOne &&\r\n            idCheckIconSplitView == idToCheckSelectOne(node.id, node.parentId)\r\n          \"\r\n        >\r\n          <span\r\n            class=\"text-node\"\r\n            [class.select-one-checked]=\"\r\n              isSelectOne &&\r\n              idCheckIconSplitView == idToCheckSelectOne(node.id, node.parentId)\r\n            \"\r\n            >{{ node.itemName }}</span\r\n          >\r\n          <mat-icon\r\n            class=\"select-one-checked\"\r\n            *ngIf=\"\r\n              isSelectOne &&\r\n              idCheckIconSplitView == idToCheckSelectOne(node.id, node.parentId)\r\n            \"\r\n          >\r\n            done\r\n          </mat-icon>\r\n        </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 class=\"row\">\r\n    <div class=\"col-12\">\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    </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}.qmslib__related__popup__container .qmslib-related-popup-splitview .expand-node .text-node-item{margin-left:8px;display:flex;align-items:center;min-height:32px;justify-content:space-between;width:100%}.qmslib__related__popup__container .qmslib-related-popup-splitview .expand-node .text-node-item .select-one-checked{color:#1954a9}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}"]
                 },] }
@@ -22013,8 +22152,8 @@
     QMSNavigationDrawerComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'app-qms-navigation-drawer',
-                    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}"]
+                    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{padding:.25rem!important}::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}::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;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;cursor:pointer}::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 []; };
@@ -22073,11 +22212,13 @@
         PaginationSize["mobile"] = "mobile";
     })(exports.PaginationSize || (exports.PaginationSize = {}));
     var QMSPaginatorComponent = /** @class */ (function () {
-        function QMSPaginatorComponent() {
+        function QMSPaginatorComponent(trans) {
+            this.trans = trans;
             this.sizeMedium = 'medium';
             this.sizeSmall = 'small';
             this.sizeLarge = 'large';
             this.sizeMobile = 'mobile';
+            this.numHidden = 10;
             this.size = exports.PaginationSize.large;
             this._pageSizeOptions = [5, 10, 25, 100];
             this._pageSize = 10;
@@ -22135,6 +22276,11 @@
             configurable: true
         });
         QMSPaginatorComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            var langDefault = 'en';
+            this.trans.getLanguageSubject$.pipe().subscribe(function (res) {
+                _this.LANG = _this.trans.getObjectLang(res || langDefault);
+            });
             this.getNumberOfPages();
         };
         QMSPaginatorComponent.prototype._updateDisplayedPageSizeOptions = function () {
@@ -22248,15 +22394,18 @@
     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 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>",
+                    template: "<div class=\"qms-paginator-outer-container\"  [class.size-small]='size == sizeSmall'  [class.d-none]='numHidden > length'>\r\n  <div class=\"mat-paginator-container\" *ngIf='size != sizeMobile'>\r\n    <div class=\"qms-total-result\">\r\n      <span>{{LANG.RESULTS}}: {{length}}</span>\r\n    </div>\r\n    <div class=\"qms-paginator-page-size\" *ngIf='size != sizeSmall'>\r\n      <div class=\"qms-pagesize-label\">{{LANG.ROW_PER_PAGE}}:</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 \">{{LANG.JUM_TO_PAGE}}:</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>{{LANG.RESULTS}}: {{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\">{{LANG.ROW_PER_PAGE}}:</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 \">{{LANG.JUM_TO_PAGE}}:</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-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 []; };
+    QMSPaginatorComponent.ctorParameters = function () { return [
+        { type: TranslateLibraryService }
+    ]; };
     QMSPaginatorComponent.propDecorators = {
+        numHidden: [{ type: i0.Input }],
         size: [{ type: i0.Input }],
         pageSizeOptions: [{ type: i0.Input }],
         pageSize: [{ type: i0.Input }],
@@ -22391,6 +22540,10 @@
     exports.QMSComment = QMSComment;
     exports.QMSConfirmDialog = QMSConfirmDialog;
     exports.QMSDialogConfig = QMSDialogConfig;
+    exports.QMSDialogContainer = QMSDialogContainer;
+    exports.QMSDialogContent = QMSDialogContent;
+    exports.QMSDialogFooter = QMSDialogFooter;
+    exports.QMSDialogHeader = QMSDialogHeader;
     exports.QMSDrawerContentDirective = QMSDrawerContentDirective;
     exports.QMSDrawerDirective = QMSDrawerDirective;
     exports.QMSDrawerHeaderActionDirective = QMSDrawerHeaderActionDirective;