qms-angular 1.0.96 → 1.0.99

package/fesm2015/qms-angular.js

@@ -24,6 +24,7 @@ import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coerci
 import { SelectionModel } from '@angular/cdk/collections';
 import { ANIMATION_MODULE_TYPE } from '@angular/platform-browser/animations';
 import * as moment from 'moment';
+import { __awaiter } from 'tslib';
 import { MatListModule } from '@angular/material/list';
 import { MatExpansionModule, MAT_EXPANSION_PANEL_DEFAULT_OPTIONS } from '@angular/material/expansion';
 import { ScrollingModule } from '@angular/cdk/scrolling';
@@ -38,7 +39,6 @@ import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import { MatSelectModule } from '@angular/material/select';
 import { MatSnackBarConfig, MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
 import { CKEditorModule as CKEditorModule$1 } from '@ckeditor/ckeditor5-angular';
-import { __awaiter } from 'tslib';
 import * as $$1 from 'jquery';
 import * as _ from 'lodash';
 import { memoize } from 'lodash';
@@ -114,6 +114,8 @@ const en = {
     "REPORT_FOR": "Report for",
     "SELECTED": "SELECTED",
     "CHOOSE_ALL": "Choose all",
+    "BREADCRUMB": "Breadcrumb",
+    "NAVIGATE_TO": "Navigate to",
     "ERROR": {
         "SELECT_DANGER": "You must select one or more events"
     },
@@ -475,6 +477,8 @@ const no = {
     "REPORT_FOR": "Rapport for",
     "SELECTED": "Valgte",
     "CHOOSE_ALL": "Velg alle",
+    "BREADCRUMB": "Brødsmuler",
+    "NAVIGATE_TO": "Navigere til",
     "ERROR": {
         "SELECT_DANGER": "Du må velge en eller flere hendelser"
     },
@@ -1136,7 +1140,7 @@ QMSChipInputDirective.ctorParameters = () => [
     { type: ElementRef }
 ];
 
-class QMSChipInputSelectDropWDownDirective {
+class QMSChipInputSelectDropDownDirective {
     constructor(ele) {
         this.ele = ele;
     }
@@ -1146,12 +1150,12 @@ class QMSChipInputSelectDropWDownDirective {
         }
     }
 }
-QMSChipInputSelectDropWDownDirective.decorators = [
+QMSChipInputSelectDropDownDirective.decorators = [
     { type: Directive, args: [{
                 selector: '[qms-chip-input-dropdown]',
             },] }
 ];
-QMSChipInputSelectDropWDownDirective.ctorParameters = () => [
+QMSChipInputSelectDropDownDirective.ctorParameters = () => [
     { type: ElementRef }
 ];
 
@@ -3230,7 +3234,7 @@ QmsAngularModule.decorators = [
                     DateFormatPipe,
                     QMSChipInputDirective,
                     QMSChipInputSelectFieldDirective,
-                    QMSChipInputSelectDropWDownDirective,
+                    QMSChipInputSelectDropDownDirective,
                     QMSChipInputSelectTriggerDirective,
                     QMSChipInputChipListDirective,
                     ScrollToSelectedDirective,
@@ -3282,7 +3286,7 @@ QmsAngularModule.decorators = [
                     DateFormatPipe,
                     QMSChipInputDirective,
                     QMSChipInputSelectFieldDirective,
-                    QMSChipInputSelectDropWDownDirective,
+                    QMSChipInputSelectDropDownDirective,
                     QMSChipInputSelectTriggerDirective,
                     QMSChipInputChipListDirective,
                     ScrollToSelectedDirective,
@@ -3310,6 +3314,61 @@ QmsAngularModule.decorators = [
             },] }
 ];
 
+var FileType;
+(function (FileType) {
+    FileType["Component"] = "Component";
+    FileType["Module"] = "Module";
+    FileType["Css"] = "CSS";
+    FileType["Html"] = "Html";
+})(FileType || (FileType = {}));
+class MfeUtil {
+    constructor() {
+        // holds list of loaded script
+        this.fileMap = {};
+        this.findExposedModule = (uniqueName, exposedFile) => __awaiter(this, void 0, void 0, function* () {
+            let Module;
+            // Initializes the shared scope. Fills it with known provided modules from this build and all remotes
+            yield __webpack_init_sharing__('default');
+            const container = window[uniqueName]; // or get the container somewhere else
+            // Initialize the container, it may provide shared modules
+            yield container.init(__webpack_share_scopes__.default);
+            const factory = yield container.get(exposedFile);
+            Module = factory();
+            return Module;
+        });
+    }
+    loadRemoteFile(loadRemoteModuleOptions) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.loadRemoteEntry(loadRemoteModuleOptions.remoteEntry);
+            return yield this.findExposedModule(loadRemoteModuleOptions.remoteName, loadRemoteModuleOptions.exposedFile);
+        });
+    }
+    loadRemoteEntry(remoteEntry) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return new Promise((resolve, reject) => {
+                const scriptId = `${remoteEntry.substring(remoteEntry.lastIndexOf('/') + 1)}`;
+                const getScript = document.getElementById(scriptId);
+                if (getScript || this.fileMap[remoteEntry]) {
+                    resolve();
+                    return;
+                }
+                const script = document.createElement("script");
+                script.src = remoteEntry;
+                script.id = scriptId;
+                script.onerror = (error) => {
+                    console.error(error, 'unable to load remote entry, show error or something');
+                    reject();
+                };
+                script.onload = () => {
+                    this.fileMap[remoteEntry] = true;
+                    resolve(); // window is the global namespace
+                };
+                document.body.append(script);
+            });
+        });
+    }
+}
+
 class QMSRangeSliderLockUpDirective {
     constructor(ele) {
         this.ele = ele;
@@ -3495,7 +3554,7 @@ QMSList.decorators = [
                 host: { 'class': 'qms-list' },
                 encapsulation: ViewEncapsulation.None,
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [".mat-expansion-panel.qms-expansion{background-color:transparent;box-shadow:none;border-bottom:1px solid #e0e0e0;margin:0 1rem;border-radius:0;font-family:Open Sans}.mat-expansion-panel.qms-expansion .mat-expansion-panel-header{height:40px;padding:0 10px;font-family:inherit}.mat-expansion-panel.qms-expansion .mat-expansion-panel-header.mat-2-line{height:63px}.mat-expansion-panel.qms-expansion .mat-expansion-panel-header.mat-3-line{height:81px}.mat-expansion-panel.qms-expansion .mat-expansion-panel-header .title-content{display:flex;flex-direction:row;align-items:center;box-sizing:border-box;position:relative;height:inherit}.mat-expansion-panel.qms-expansion .mat-expansion-panel-header[aria-disabled=true]{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mat-expansion-panel.qms-expansion .mat-expansion-panel-header[aria-disabled=true] .qms-list-header *{color:var(--primary);opacity:.38}.mat-expansion-panel.qms-expansion .mat-expansion-panel-header:hover:not([aria-disabled=true]){background:var(--primary-light-6-opacity)}.mat-expansion-panel.qms-expansion .mat-expansion-panel-header:hover .caption,.mat-expansion-panel.qms-expansion .mat-expansion-panel-header:hover .default-subtitle,.mat-expansion-panel.qms-expansion .mat-expansion-panel-header:hover .mat-expansion-indicator:after,.mat-expansion-panel.qms-expansion .mat-expansion-panel-header:hover .material-icons,.mat-expansion-panel.qms-expansion .mat-expansion-panel-header:hover .material-icons-outlined,.mat-expansion-panel.qms-expansion .mat-expansion-panel-header:hover .subtitle{color:var(--primary)}.mat-expansion-panel.qms-expansion .mat-expansion-panel-header:active:not([aria-disabled=true]){background:var(--primary-light-24-opacity)}.mat-expansion-panel.qms-expansion .mat-expansion-panel-header:active .caption,.mat-expansion-panel.qms-expansion .mat-expansion-panel-header:active .default-subtitle,.mat-expansion-panel.qms-expansion .mat-expansion-panel-header:active .mat-expansion-indicator:after,.mat-expansion-panel.qms-expansion .mat-expansion-panel-header:active .material-icons,.mat-expansion-panel.qms-expansion .mat-expansion-panel-header:active .material-icons-outlined,.mat-expansion-panel.qms-expansion .mat-expansion-panel-header:active .subtitle{color:var(--primary)}.mat-expansion-panel.qms-expansion .mat-expansion-panel-header.cdk-keyboard-focused{background-color:var(--primary-light-12-opacity);border-radius:2px}.mat-expansion-panel.qms-expansion .mat-expansion-panel-header.active-item,.mat-expansion-panel.qms-expansion .mat-expansion-panel-header.cdk-keyboard-focused .caption,.mat-expansion-panel.qms-expansion .mat-expansion-panel-header.cdk-keyboard-focused .default-subtitle,.mat-expansion-panel.qms-expansion .mat-expansion-panel-header.cdk-keyboard-focused .mat-expansion-indicator:after,.mat-expansion-panel.qms-expansion .mat-expansion-panel-header.cdk-keyboard-focused .material-icons,.mat-expansion-panel.qms-expansion .mat-expansion-panel-header.cdk-keyboard-focused .material-icons-outlined,.mat-expansion-panel.qms-expansion .mat-expansion-panel-header.cdk-keyboard-focused .subtitle{color:var(--primary)}.mat-expansion-panel.qms-expansion .mat-expansion-panel-header.active-item .caption,.mat-expansion-panel.qms-expansion .mat-expansion-panel-header.active-item .leading-icon,.mat-expansion-panel.qms-expansion .mat-expansion-panel-header.active-item .mat-expansion-indicator:after,.mat-expansion-panel.qms-expansion .mat-expansion-panel-header.active-item .qms-line,.mat-expansion-panel.qms-expansion .mat-expansion-panel-header.active-item .subtitle{color:inherit}.mat-expansion-panel.qms-expansion .mat-expansion-panel-body{padding:1rem 10px}.qms-list{padding-top:6px;font-family:Open Sans}.qms-list,.qms-list-item{display:block;-webkit-tap-highlight-color:transparent}.qms-list-item{width:100%;padding:0;min-height:40px;height:40px}.qms-list-item.mat-2-line{height:63px}.qms-list-item.mat-2-line.image-item{height:56px}.qms-list-item.mat-3-line{height:81px}.qms-list-item.mat-multi-line{height:102px}.qms-list-item.image-item .qms-list-item-content{border-bottom:none}.qms-list-item.image-item .qms-list-text,.qms-list-item.image-item .trailing-box{height:100%;border-bottom:1px solid #e0e0e0}.qms-list-item.image-item .trailing-box{padding-top:10px}.qms-list-item.qms-list-item-disabled .caption,.qms-list-item.qms-list-item-disabled .material-icons,.qms-list-item.qms-list-item-disabled .material-icons-outlined p,.qms-list-item.qms-list-item-disabled .qms-line,.qms-list-item.qms-list-item-disabled .subtitle,.qms-list-item.qms-list-item-disabled button,.qms-list-item.qms-list-item-disabled span{color:rgba(0,0,0,.38);pointer-events:none;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-color:none}.qms-list-item:not([disabled]):focus,.qms-list-item:not([disabled]):hover{cursor:pointer;background-color:rgba(0,0,0,.08);outline:none}.qms-list-item:not([disabled]):active{cursor:pointer;background-color:rgba(0,0,0,.12)}.qms-list-item-content{display:flex;flex-direction:row;align-items:center;box-sizing:border-box;position:relative;height:inherit;border-bottom:1px solid #e0e0e0;margin:0 1rem}.material-icons-outlined.leading-icon,.material-icons.leading-icon{flex-shrink:0;width:24px;height:24px;font-size:24px;box-sizing:content-box;border-radius:50%;color:rgba(0,0,0,.6);padding:4px 1rem 4px 4px}img.leading-icon{width:100%}.qms-list-text{padding-right:0;display:flex;flex-direction:column;flex:auto}.qms-line,.qms-list-text{box-sizing:border-box;overflow:hidden}.qms-line{line-height:22px;white-space:normal;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;padding:0;margin:0;font-weight:400;font-size:.875rem;color:rgba(0,0,0,.6)}.qms-line.size-lg{font-size:1rem}.qms-list-header .subtitle{line-height:22px;white-space:normal;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;padding:0;margin:0;box-sizing:border-box;color:var(--default-color);font-weight:600;font-size:1rem;font-family:Raleway}.qms-list-header .subtitle.size-sm{font-size:.875rem}.qms-list-header .caption{line-height:16px;font-size:.75rem;color:rgba(0,0,0,.6);display:flex;justify-content:space-between}.qms-list-header .caption .material-icons,.qms-list-header .caption .material-icons-outlined{font-size:20px}.qms-list-header .caption .overline{font-family:Raleway;font-weight:600}.trailing-box{display:flex}.trailing-box>*{padding-left:1.5rem}.trailing-box .caption{color:rgba(0,0,0,.6);font-size:.75rem}.trailing-box .caption .material-icons,.trailing-box .caption .material-icons-outlined{font-size:20px}.trailing-box button{color:rgba(0,0,0,.6);padding:0;margin-left:1rem}.default-subtitle{color:var(--default-color)}.wrap-image{box-sizing:content-box;color:rgba(0,0,0,.6);display:flex;flex-direction:row;justify-content:center;background:rgba(0,0,0,.12);margin-right:1rem;align-self:flex-start;margin-top:0}.wrap-image.image-circle,.wrap-image.image-circle img{width:40px;height:40px;border-radius:50%}.wrap-image.image-rect,.wrap-image.image-rect img{width:unset;height:56px;border-radius:2px}.wrap-image.image-square,.wrap-image.image-square img{width:56px;height:56px;border-radius:2px}.wrap-image .mat-icon{display:flex;-ms-grid-row-align:center;align-self:center;padding:0;height:auto}"]
+                styles: [".mat-expansion-panel.qms-expansion{background-color:transparent;box-shadow:none;border-bottom:1px solid #e0e0e0;margin:0 1rem;border-radius:0;font-family:Open Sans}.mat-expansion-panel.qms-expansion .mat-expansion-panel-header{height:40px;padding:0 10px;font-family:inherit}.mat-expansion-panel.qms-expansion .mat-expansion-panel-header.mat-2-line{height:63px}.mat-expansion-panel.qms-expansion .mat-expansion-panel-header.mat-3-line{height:81px}.mat-expansion-panel.qms-expansion .mat-expansion-panel-header .title-content{display:flex;flex-direction:row;align-items:center;box-sizing:border-box;position:relative;height:inherit}.mat-expansion-panel.qms-expansion .mat-expansion-panel-header[aria-disabled=true]{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mat-expansion-panel.qms-expansion .mat-expansion-panel-header[aria-disabled=true] .qms-list-header *{color:var(--primary);opacity:.38}.mat-expansion-panel.qms-expansion .mat-expansion-panel-header:hover:not([aria-disabled=true]){background:var(--primary-light-6-opacity)}.mat-expansion-panel.qms-expansion .mat-expansion-panel-header:hover .caption,.mat-expansion-panel.qms-expansion .mat-expansion-panel-header:hover .default-subtitle,.mat-expansion-panel.qms-expansion .mat-expansion-panel-header:hover .mat-expansion-indicator:after,.mat-expansion-panel.qms-expansion .mat-expansion-panel-header:hover .material-icons,.mat-expansion-panel.qms-expansion .mat-expansion-panel-header:hover .material-icons-outlined,.mat-expansion-panel.qms-expansion .mat-expansion-panel-header:hover .subtitle{color:var(--primary)}.mat-expansion-panel.qms-expansion .mat-expansion-panel-header:active:not([aria-disabled=true]){background:var(--primary-light-24-opacity)}.mat-expansion-panel.qms-expansion .mat-expansion-panel-header:active .caption,.mat-expansion-panel.qms-expansion .mat-expansion-panel-header:active .default-subtitle,.mat-expansion-panel.qms-expansion .mat-expansion-panel-header:active .mat-expansion-indicator:after,.mat-expansion-panel.qms-expansion .mat-expansion-panel-header:active .material-icons,.mat-expansion-panel.qms-expansion .mat-expansion-panel-header:active .material-icons-outlined,.mat-expansion-panel.qms-expansion .mat-expansion-panel-header:active .subtitle{color:var(--primary)}.mat-expansion-panel.qms-expansion .mat-expansion-panel-header.cdk-keyboard-focused{background-color:var(--primary-light-12-opacity);border-radius:2px}.mat-expansion-panel.qms-expansion .mat-expansion-panel-header.active-item,.mat-expansion-panel.qms-expansion .mat-expansion-panel-header.cdk-keyboard-focused .caption,.mat-expansion-panel.qms-expansion .mat-expansion-panel-header.cdk-keyboard-focused .default-subtitle,.mat-expansion-panel.qms-expansion .mat-expansion-panel-header.cdk-keyboard-focused .mat-expansion-indicator:after,.mat-expansion-panel.qms-expansion .mat-expansion-panel-header.cdk-keyboard-focused .material-icons,.mat-expansion-panel.qms-expansion .mat-expansion-panel-header.cdk-keyboard-focused .material-icons-outlined,.mat-expansion-panel.qms-expansion .mat-expansion-panel-header.cdk-keyboard-focused .subtitle{color:var(--primary)}.mat-expansion-panel.qms-expansion .mat-expansion-panel-header.active-item .caption,.mat-expansion-panel.qms-expansion .mat-expansion-panel-header.active-item .leading-icon,.mat-expansion-panel.qms-expansion .mat-expansion-panel-header.active-item .mat-expansion-indicator:after,.mat-expansion-panel.qms-expansion .mat-expansion-panel-header.active-item .qms-line,.mat-expansion-panel.qms-expansion .mat-expansion-panel-header.active-item .subtitle{color:inherit}.mat-expansion-panel.qms-expansion .mat-expansion-panel-body{padding:1rem 10px}.qms-list{padding-top:6px;font-family:Open Sans}.qms-list,.qms-list-item{display:block;-webkit-tap-highlight-color:transparent}.qms-list-item{width:100%;padding:0;min-height:40px;height:40px}.qms-list-item.mat-2-line{height:63px}.qms-list-item.mat-2-line.image-item{height:56px}.qms-list-item.mat-3-line{height:81px}.qms-list-item.mat-multi-line{height:102px}.qms-list-item.image-item .qms-list-item-content{border-bottom:none}.qms-list-item.image-item .qms-list-text,.qms-list-item.image-item .trailing-box{height:100%;border-bottom:1px solid #e0e0e0}.qms-list-item.image-item .trailing-box{padding-top:10px}.qms-list-item.qms-list-item-disabled .caption,.qms-list-item.qms-list-item-disabled .material-icons,.qms-list-item.qms-list-item-disabled .material-icons-outlined p,.qms-list-item.qms-list-item-disabled .qms-line,.qms-list-item.qms-list-item-disabled .subtitle,.qms-list-item.qms-list-item-disabled button,.qms-list-item.qms-list-item-disabled span{color:rgba(0,0,0,.38);pointer-events:none;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-color:none}.qms-list-item:not([disabled]):focus,.qms-list-item:not([disabled]):hover{cursor:pointer;background-color:rgba(0,0,0,.08);outline:none}.qms-list-item:not([disabled]):active{cursor:pointer;background-color:rgba(0,0,0,.12)}.qms-list-item-content{display:flex;flex-direction:row;align-items:center;box-sizing:border-box;position:relative;height:inherit;border-bottom:1px solid #e0e0e0;margin:0 1rem}.material-icons-outlined.leading-icon,.material-icons.leading-icon{flex-shrink:0;width:24px;height:24px;font-size:24px;box-sizing:content-box;border-radius:50%;color:rgba(0,0,0,.6);padding:4px 1rem 4px 4px}img.leading-icon{width:100%}.qms-list-text{padding-right:0;display:flex;flex-direction:column;flex:auto}.qms-line,.qms-list-text{box-sizing:border-box;overflow:hidden}.qms-line{line-height:22px;white-space:normal;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;padding:0;margin:0;font-weight:400;font-size:.875rem;color:rgba(0,0,0,.6)}.qms-line.size-lg{font-size:1rem}.qms-list-header .subtitle{line-height:22px;white-space:normal;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;padding:0;margin:0;box-sizing:border-box;color:var(--default-color);font-weight:600;font-size:1rem;font-family:Open Sans}.qms-list-header .subtitle.size-sm{font-size:.875rem}.qms-list-header .caption{line-height:16px;font-size:.75rem;color:rgba(0,0,0,.6);display:flex;justify-content:space-between}.qms-list-header .caption .material-icons,.qms-list-header .caption .material-icons-outlined{font-size:20px}.qms-list-header .caption .overline{font-family:Raleway;font-weight:600}.trailing-box{display:flex}.trailing-box>*{padding-left:1.5rem}.trailing-box .caption{color:rgba(0,0,0,.6);font-size:.75rem}.trailing-box .caption .material-icons,.trailing-box .caption .material-icons-outlined{font-size:20px}.trailing-box button{color:rgba(0,0,0,.6);padding:0;margin-left:1rem}.default-subtitle{color:var(--default-color)}.wrap-image{box-sizing:content-box;color:rgba(0,0,0,.6);display:flex;flex-direction:row;justify-content:center;background:rgba(0,0,0,.12);margin-right:1rem;align-self:flex-start;margin-top:0}.wrap-image.image-circle,.wrap-image.image-circle img{width:40px;height:40px;border-radius:50%}.wrap-image.image-rect,.wrap-image.image-rect img{width:unset;height:56px;border-radius:2px}.wrap-image.image-square,.wrap-image.image-square img{width:56px;height:56px;border-radius:2px}.wrap-image .mat-icon{display:flex;-ms-grid-row-align:center;align-self:center;padding:0;height:auto}"]
             },] }
 ];
 QMSList.ctorParameters = () => [
@@ -3531,7 +3590,7 @@ QMSListItem.decorators = [
                 },
                 encapsulation: ViewEncapsulation.None,
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [".mat-expansion-panel.qms-expansion{background-color:transparent;box-shadow:none;border-bottom:1px solid #e0e0e0;margin:0 1rem;border-radius:0;font-family:Open Sans}.mat-expansion-panel.qms-expansion .mat-expansion-panel-header{height:40px;padding:0 10px;font-family:inherit}.mat-expansion-panel.qms-expansion .mat-expansion-panel-header.mat-2-line{height:63px}.mat-expansion-panel.qms-expansion .mat-expansion-panel-header.mat-3-line{height:81px}.mat-expansion-panel.qms-expansion .mat-expansion-panel-header .title-content{display:flex;flex-direction:row;align-items:center;box-sizing:border-box;position:relative;height:inherit}.mat-expansion-panel.qms-expansion .mat-expansion-panel-header[aria-disabled=true]{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mat-expansion-panel.qms-expansion .mat-expansion-panel-header[aria-disabled=true] .qms-list-header *{color:var(--primary);opacity:.38}.mat-expansion-panel.qms-expansion .mat-expansion-panel-header:hover:not([aria-disabled=true]){background:var(--primary-light-6-opacity)}.mat-expansion-panel.qms-expansion .mat-expansion-panel-header:hover .caption,.mat-expansion-panel.qms-expansion .mat-expansion-panel-header:hover .default-subtitle,.mat-expansion-panel.qms-expansion .mat-expansion-panel-header:hover .mat-expansion-indicator:after,.mat-expansion-panel.qms-expansion .mat-expansion-panel-header:hover .material-icons,.mat-expansion-panel.qms-expansion .mat-expansion-panel-header:hover .material-icons-outlined,.mat-expansion-panel.qms-expansion .mat-expansion-panel-header:hover .subtitle{color:var(--primary)}.mat-expansion-panel.qms-expansion .mat-expansion-panel-header:active:not([aria-disabled=true]){background:var(--primary-light-24-opacity)}.mat-expansion-panel.qms-expansion .mat-expansion-panel-header:active .caption,.mat-expansion-panel.qms-expansion .mat-expansion-panel-header:active .default-subtitle,.mat-expansion-panel.qms-expansion .mat-expansion-panel-header:active .mat-expansion-indicator:after,.mat-expansion-panel.qms-expansion .mat-expansion-panel-header:active .material-icons,.mat-expansion-panel.qms-expansion .mat-expansion-panel-header:active .material-icons-outlined,.mat-expansion-panel.qms-expansion .mat-expansion-panel-header:active .subtitle{color:var(--primary)}.mat-expansion-panel.qms-expansion .mat-expansion-panel-header.cdk-keyboard-focused{background-color:var(--primary-light-12-opacity);border-radius:2px}.mat-expansion-panel.qms-expansion .mat-expansion-panel-header.active-item,.mat-expansion-panel.qms-expansion .mat-expansion-panel-header.cdk-keyboard-focused .caption,.mat-expansion-panel.qms-expansion .mat-expansion-panel-header.cdk-keyboard-focused .default-subtitle,.mat-expansion-panel.qms-expansion .mat-expansion-panel-header.cdk-keyboard-focused .mat-expansion-indicator:after,.mat-expansion-panel.qms-expansion .mat-expansion-panel-header.cdk-keyboard-focused .material-icons,.mat-expansion-panel.qms-expansion .mat-expansion-panel-header.cdk-keyboard-focused .material-icons-outlined,.mat-expansion-panel.qms-expansion .mat-expansion-panel-header.cdk-keyboard-focused .subtitle{color:var(--primary)}.mat-expansion-panel.qms-expansion .mat-expansion-panel-header.active-item .caption,.mat-expansion-panel.qms-expansion .mat-expansion-panel-header.active-item .leading-icon,.mat-expansion-panel.qms-expansion .mat-expansion-panel-header.active-item .mat-expansion-indicator:after,.mat-expansion-panel.qms-expansion .mat-expansion-panel-header.active-item .qms-line,.mat-expansion-panel.qms-expansion .mat-expansion-panel-header.active-item .subtitle{color:inherit}.mat-expansion-panel.qms-expansion .mat-expansion-panel-body{padding:1rem 10px}.qms-list{padding-top:6px;font-family:Open Sans}.qms-list,.qms-list-item{display:block;-webkit-tap-highlight-color:transparent}.qms-list-item{width:100%;padding:0;min-height:40px;height:40px}.qms-list-item.mat-2-line{height:63px}.qms-list-item.mat-2-line.image-item{height:56px}.qms-list-item.mat-3-line{height:81px}.qms-list-item.mat-multi-line{height:102px}.qms-list-item.image-item .qms-list-item-content{border-bottom:none}.qms-list-item.image-item .qms-list-text,.qms-list-item.image-item .trailing-box{height:100%;border-bottom:1px solid #e0e0e0}.qms-list-item.image-item .trailing-box{padding-top:10px}.qms-list-item.qms-list-item-disabled .caption,.qms-list-item.qms-list-item-disabled .material-icons,.qms-list-item.qms-list-item-disabled .material-icons-outlined p,.qms-list-item.qms-list-item-disabled .qms-line,.qms-list-item.qms-list-item-disabled .subtitle,.qms-list-item.qms-list-item-disabled button,.qms-list-item.qms-list-item-disabled span{color:rgba(0,0,0,.38);pointer-events:none;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-color:none}.qms-list-item:not([disabled]):focus,.qms-list-item:not([disabled]):hover{cursor:pointer;background-color:rgba(0,0,0,.08);outline:none}.qms-list-item:not([disabled]):active{cursor:pointer;background-color:rgba(0,0,0,.12)}.qms-list-item-content{display:flex;flex-direction:row;align-items:center;box-sizing:border-box;position:relative;height:inherit;border-bottom:1px solid #e0e0e0;margin:0 1rem}.material-icons-outlined.leading-icon,.material-icons.leading-icon{flex-shrink:0;width:24px;height:24px;font-size:24px;box-sizing:content-box;border-radius:50%;color:rgba(0,0,0,.6);padding:4px 1rem 4px 4px}img.leading-icon{width:100%}.qms-list-text{padding-right:0;display:flex;flex-direction:column;flex:auto}.qms-line,.qms-list-text{box-sizing:border-box;overflow:hidden}.qms-line{line-height:22px;white-space:normal;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;padding:0;margin:0;font-weight:400;font-size:.875rem;color:rgba(0,0,0,.6)}.qms-line.size-lg{font-size:1rem}.qms-list-header .subtitle{line-height:22px;white-space:normal;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;padding:0;margin:0;box-sizing:border-box;color:var(--default-color);font-weight:600;font-size:1rem;font-family:Raleway}.qms-list-header .subtitle.size-sm{font-size:.875rem}.qms-list-header .caption{line-height:16px;font-size:.75rem;color:rgba(0,0,0,.6);display:flex;justify-content:space-between}.qms-list-header .caption .material-icons,.qms-list-header .caption .material-icons-outlined{font-size:20px}.qms-list-header .caption .overline{font-family:Raleway;font-weight:600}.trailing-box{display:flex}.trailing-box>*{padding-left:1.5rem}.trailing-box .caption{color:rgba(0,0,0,.6);font-size:.75rem}.trailing-box .caption .material-icons,.trailing-box .caption .material-icons-outlined{font-size:20px}.trailing-box button{color:rgba(0,0,0,.6);padding:0;margin-left:1rem}.default-subtitle{color:var(--default-color)}.wrap-image{box-sizing:content-box;color:rgba(0,0,0,.6);display:flex;flex-direction:row;justify-content:center;background:rgba(0,0,0,.12);margin-right:1rem;align-self:flex-start;margin-top:0}.wrap-image.image-circle,.wrap-image.image-circle img{width:40px;height:40px;border-radius:50%}.wrap-image.image-rect,.wrap-image.image-rect img{width:unset;height:56px;border-radius:2px}.wrap-image.image-square,.wrap-image.image-square img{width:56px;height:56px;border-radius:2px}.wrap-image .mat-icon{display:flex;-ms-grid-row-align:center;align-self:center;padding:0;height:auto}"]
+                styles: [".mat-expansion-panel.qms-expansion{background-color:transparent;box-shadow:none;border-bottom:1px solid #e0e0e0;margin:0 1rem;border-radius:0;font-family:Open Sans}.mat-expansion-panel.qms-expansion .mat-expansion-panel-header{height:40px;padding:0 10px;font-family:inherit}.mat-expansion-panel.qms-expansion .mat-expansion-panel-header.mat-2-line{height:63px}.mat-expansion-panel.qms-expansion .mat-expansion-panel-header.mat-3-line{height:81px}.mat-expansion-panel.qms-expansion .mat-expansion-panel-header .title-content{display:flex;flex-direction:row;align-items:center;box-sizing:border-box;position:relative;height:inherit}.mat-expansion-panel.qms-expansion .mat-expansion-panel-header[aria-disabled=true]{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mat-expansion-panel.qms-expansion .mat-expansion-panel-header[aria-disabled=true] .qms-list-header *{color:var(--primary);opacity:.38}.mat-expansion-panel.qms-expansion .mat-expansion-panel-header:hover:not([aria-disabled=true]){background:var(--primary-light-6-opacity)}.mat-expansion-panel.qms-expansion .mat-expansion-panel-header:hover .caption,.mat-expansion-panel.qms-expansion .mat-expansion-panel-header:hover .default-subtitle,.mat-expansion-panel.qms-expansion .mat-expansion-panel-header:hover .mat-expansion-indicator:after,.mat-expansion-panel.qms-expansion .mat-expansion-panel-header:hover .material-icons,.mat-expansion-panel.qms-expansion .mat-expansion-panel-header:hover .material-icons-outlined,.mat-expansion-panel.qms-expansion .mat-expansion-panel-header:hover .subtitle{color:var(--primary)}.mat-expansion-panel.qms-expansion .mat-expansion-panel-header:active:not([aria-disabled=true]){background:var(--primary-light-24-opacity)}.mat-expansion-panel.qms-expansion .mat-expansion-panel-header:active .caption,.mat-expansion-panel.qms-expansion .mat-expansion-panel-header:active .default-subtitle,.mat-expansion-panel.qms-expansion .mat-expansion-panel-header:active .mat-expansion-indicator:after,.mat-expansion-panel.qms-expansion .mat-expansion-panel-header:active .material-icons,.mat-expansion-panel.qms-expansion .mat-expansion-panel-header:active .material-icons-outlined,.mat-expansion-panel.qms-expansion .mat-expansion-panel-header:active .subtitle{color:var(--primary)}.mat-expansion-panel.qms-expansion .mat-expansion-panel-header.cdk-keyboard-focused{background-color:var(--primary-light-12-opacity);border-radius:2px}.mat-expansion-panel.qms-expansion .mat-expansion-panel-header.active-item,.mat-expansion-panel.qms-expansion .mat-expansion-panel-header.cdk-keyboard-focused .caption,.mat-expansion-panel.qms-expansion .mat-expansion-panel-header.cdk-keyboard-focused .default-subtitle,.mat-expansion-panel.qms-expansion .mat-expansion-panel-header.cdk-keyboard-focused .mat-expansion-indicator:after,.mat-expansion-panel.qms-expansion .mat-expansion-panel-header.cdk-keyboard-focused .material-icons,.mat-expansion-panel.qms-expansion .mat-expansion-panel-header.cdk-keyboard-focused .material-icons-outlined,.mat-expansion-panel.qms-expansion .mat-expansion-panel-header.cdk-keyboard-focused .subtitle{color:var(--primary)}.mat-expansion-panel.qms-expansion .mat-expansion-panel-header.active-item .caption,.mat-expansion-panel.qms-expansion .mat-expansion-panel-header.active-item .leading-icon,.mat-expansion-panel.qms-expansion .mat-expansion-panel-header.active-item .mat-expansion-indicator:after,.mat-expansion-panel.qms-expansion .mat-expansion-panel-header.active-item .qms-line,.mat-expansion-panel.qms-expansion .mat-expansion-panel-header.active-item .subtitle{color:inherit}.mat-expansion-panel.qms-expansion .mat-expansion-panel-body{padding:1rem 10px}.qms-list{padding-top:6px;font-family:Open Sans}.qms-list,.qms-list-item{display:block;-webkit-tap-highlight-color:transparent}.qms-list-item{width:100%;padding:0;min-height:40px;height:40px}.qms-list-item.mat-2-line{height:63px}.qms-list-item.mat-2-line.image-item{height:56px}.qms-list-item.mat-3-line{height:81px}.qms-list-item.mat-multi-line{height:102px}.qms-list-item.image-item .qms-list-item-content{border-bottom:none}.qms-list-item.image-item .qms-list-text,.qms-list-item.image-item .trailing-box{height:100%;border-bottom:1px solid #e0e0e0}.qms-list-item.image-item .trailing-box{padding-top:10px}.qms-list-item.qms-list-item-disabled .caption,.qms-list-item.qms-list-item-disabled .material-icons,.qms-list-item.qms-list-item-disabled .material-icons-outlined p,.qms-list-item.qms-list-item-disabled .qms-line,.qms-list-item.qms-list-item-disabled .subtitle,.qms-list-item.qms-list-item-disabled button,.qms-list-item.qms-list-item-disabled span{color:rgba(0,0,0,.38);pointer-events:none;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-color:none}.qms-list-item:not([disabled]):focus,.qms-list-item:not([disabled]):hover{cursor:pointer;background-color:rgba(0,0,0,.08);outline:none}.qms-list-item:not([disabled]):active{cursor:pointer;background-color:rgba(0,0,0,.12)}.qms-list-item-content{display:flex;flex-direction:row;align-items:center;box-sizing:border-box;position:relative;height:inherit;border-bottom:1px solid #e0e0e0;margin:0 1rem}.material-icons-outlined.leading-icon,.material-icons.leading-icon{flex-shrink:0;width:24px;height:24px;font-size:24px;box-sizing:content-box;border-radius:50%;color:rgba(0,0,0,.6);padding:4px 1rem 4px 4px}img.leading-icon{width:100%}.qms-list-text{padding-right:0;display:flex;flex-direction:column;flex:auto}.qms-line,.qms-list-text{box-sizing:border-box;overflow:hidden}.qms-line{line-height:22px;white-space:normal;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;padding:0;margin:0;font-weight:400;font-size:.875rem;color:rgba(0,0,0,.6)}.qms-line.size-lg{font-size:1rem}.qms-list-header .subtitle{line-height:22px;white-space:normal;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;padding:0;margin:0;box-sizing:border-box;color:var(--default-color);font-weight:600;font-size:1rem;font-family:Open Sans}.qms-list-header .subtitle.size-sm{font-size:.875rem}.qms-list-header .caption{line-height:16px;font-size:.75rem;color:rgba(0,0,0,.6);display:flex;justify-content:space-between}.qms-list-header .caption .material-icons,.qms-list-header .caption .material-icons-outlined{font-size:20px}.qms-list-header .caption .overline{font-family:Raleway;font-weight:600}.trailing-box{display:flex}.trailing-box>*{padding-left:1.5rem}.trailing-box .caption{color:rgba(0,0,0,.6);font-size:.75rem}.trailing-box .caption .material-icons,.trailing-box .caption .material-icons-outlined{font-size:20px}.trailing-box button{color:rgba(0,0,0,.6);padding:0;margin-left:1rem}.default-subtitle{color:var(--default-color)}.wrap-image{box-sizing:content-box;color:rgba(0,0,0,.6);display:flex;flex-direction:row;justify-content:center;background:rgba(0,0,0,.12);margin-right:1rem;align-self:flex-start;margin-top:0}.wrap-image.image-circle,.wrap-image.image-circle img{width:40px;height:40px;border-radius:50%}.wrap-image.image-rect,.wrap-image.image-rect img{width:unset;height:56px;border-radius:2px}.wrap-image.image-square,.wrap-image.image-square img{width:56px;height:56px;border-radius:2px}.wrap-image .mat-icon{display:flex;-ms-grid-row-align:center;align-self:center;padding:0;height:auto}"]
             },] }
 ];
 QMSListItem.ctorParameters = () => [
@@ -4088,6 +4147,7 @@ class QMSBreadcrumbItemDirective {
     constructor(ele, renderer) {
         this.ele = ele;
         this.renderer = renderer;
+        this.showTooltip = true;
         this.showTooltipChange = new EventEmitter();
     }
     ngAfterViewInit() {
@@ -4129,30 +4189,63 @@ QMSBreadcrumbItemDirective.propDecorators = {
     breadcrumbItemText: [{ type: ContentChild, args: ["breadcrumbItemText", { static: false },] }]
 };
 
+var BreadcrumbType;
+(function (BreadcrumbType) {
+    BreadcrumbType["normal"] = "normal";
+    BreadcrumbType["table"] = "table";
+    BreadcrumbType["mobile"] = "mobile";
+})(BreadcrumbType || (BreadcrumbType = {}));
+
 var DropdownBreadCrumbNodeWidth;
 (function (DropdownBreadCrumbNodeWidth) {
     DropdownBreadCrumbNodeWidth[DropdownBreadCrumbNodeWidth["NORMAL"] = 66] = "NORMAL";
     DropdownBreadCrumbNodeWidth[DropdownBreadCrumbNodeWidth["TABLE"] = 44] = "TABLE";
 })(DropdownBreadCrumbNodeWidth || (DropdownBreadCrumbNodeWidth = {}));
 
+class BreadcrumbNode {
+}
+
 class QMSBreadcrumb {
-    constructor(ele, iconRegistry, cdRef, sanitizer) {
+    constructor(ele, iconRegistry, cdRef, sanitizer, trans) {
         this.ele = ele;
         this.iconRegistry = iconRegistry;
         this.cdRef = cdRef;
         this.sanitizer = sanitizer;
+        this.trans = trans;
+        this.type = BreadcrumbType.normal;
         this.numDisplayItem = 0;
         this.onlyItem = false;
         this.disabledLastItem = true;
         this.onItemClick = new EventEmitter();
-        this.dropdownNodes = [];
         this.isOverflow = false;
+        this.dropdownNodes = [];
+        this.homeNode = new BreadcrumbNode();
+        this.previousNode = new BreadcrumbNode();
+        this.sideNavNodes = [];
         this.itemSpace = DropdownBreadCrumbNodeWidth.NORMAL; // width of dropdown node in normal view
         this.isMobileType = false;
         iconRegistry.addSvgIconLiteral('breadcrumb_dropdown', sanitizer.bypassSecurityTrustHtml(BREADCRUMB_DROPDOWN_ICON));
     }
+    ngOnChanges(changes) {
+        if (changes.nodes && this.breadCrumbNodes && JSON.stringify(changes.nodes.currentValue) !== JSON.stringify(changes.nodes.previousValue)) {
+            this.nodes = [...changes.nodes.currentValue];
+            this.initBreadCrumb();
+            this.buildBreadcrumb();
+        }
+    }
+    ngOnInit() {
+        this.trans.getLanguageSubject$.pipe().subscribe((res) => {
+            if (res) {
+                this.LANG = this.trans.getObjectLang(res);
+            }
+        });
+        this.isMobileType = (this.type == BreadcrumbType.mobile);
+        this.itemIconType = ItemIconType;
+        this.initBreadCrumb();
+    }
     ngAfterViewInit() {
         this.buildBreadcrumb();
+        this.cdRef.detectChanges();
     }
     checkOverflow(width) {
         const nodeWidths = this.breadCrumbNodes.map(x => x.ele.nativeElement.offsetWidth);
@@ -4187,17 +4280,6 @@ class QMSBreadcrumb {
             this.dropdownNodes = this.dropdownNodes.reverse();
         }
     }
-    ngOnChanges(changes) {
-        if (changes.nodes && this.breadCrumbNodes && JSON.stringify(changes.nodes.currentValue) !== JSON.stringify(changes.nodes.previousValue)) {
-            this.nodes = [...changes.nodes.currentValue];
-            this.initBreadCrumb();
-            this.buildBreadcrumb();
-        }
-    }
-    ngOnInit() {
-        this.itemIconType = ItemIconType;
-        this.initBreadCrumb();
-    }
     initBreadCrumb() {
         if (this.nodes && this.nodes.length > 0) {
             this.nodes.forEach(ele => {
@@ -4210,8 +4292,9 @@ class QMSBreadcrumb {
                 this.itemNodes = this.nodes.slice(1);
             }
             else {
-                this.isMobileType = true;
                 this.previousNode = this.nodes[this.nodes.length >= 2 ? this.nodes.length - 2 : 0];
+                this.sideNavNodes = [];
+                this.sideNavNodes = this.nodes.length >= 2 ? [...this.nodes] : [];
             }
         }
         if (this.type === 'table') {
@@ -4281,16 +4364,17 @@ class QMSBreadcrumb {
 QMSBreadcrumb.decorators = [
     { type: Component, args: [{
                 selector: 'qms-breadcrumb',
-                template: "<div>\r\n  <div class=\"breadcrumb-container\" *ngIf=\"!isMobileType\">\r\n    <!-- Home -->\r\n    <span\r\n      qms-breadcrumb-item\r\n      *ngIf=\"!isOverflow || type=='table'\"\r\n      [(showTooltip)]=\"homeNode.isOverflow\"\r\n    >\r\n      <mat-icon\r\n        *ngIf=\"homeNode.displayType === itemIconType.name\"\r\n        class=\"mat-icon-rtl-mirror material-icons-outlined item-icon\"\r\n      >\r\n        {{ homeNode.itemIcon }}\r\n      </mat-icon>\r\n      <mat-icon\r\n        *ngIf=\"homeNode.displayType === itemIconType.svg\"\r\n        class=\"mat-icon-rtl-mirror material-icons-outlined item-icon\"\r\n        [svgIcon]=\"homeNode.itemIconSvg\"\r\n      >\r\n      </mat-icon>\r\n      <img\r\n        *ngIf=\"homeNode.displayType === itemIconType.path\"\r\n        class=\"mat-icon item-icon\"\r\n        [src]=\"homeNode.itemIconPath\"\r\n      />\r\n      <img\r\n        *ngIf=\"homeNode.displayType === itemIconType.base64\"\r\n        class=\"mat-icon image-base64 item-icon\"\r\n        [src]=\"getImagePath(homeNode)\"\r\n      />\r\n      <div\r\n        class=\"qms-breadcrumb-item-text\"\r\n        [qms-tool-tip]=\"homeNode.name\"\r\n        [showToolTip]=\"homeNode.isOverflow\"\r\n        #breadcrumbItemText\r\n        mode=\"dark\"\r\n        (click)=\"onItemSelect(homeNode)\"\r\n      >\r\n        {{homeNode.name}}\r\n      </div>\r\n      <mat-icon *ngIf=\"!isOverflow && type !=='table'\">keyboard_arrow_right</mat-icon>\r\n      <span\r\n        *ngIf=\"itemNodes.length && type=='table'\"\r\n        qms-breadcrumb-direction-icon\r\n      >\r\n        <mat-icon>keyboard_arrow_right</mat-icon>\r\n      </span>\r\n    </span>\r\n\r\n    <!-- Dropdown not table -->\r\n    <span qms-breadcrumb-item *ngIf=\"isOverflow && type!='table'\">\r\n      <button\r\n        qms-btn-icon\r\n        color=\"light\"\r\n        class=\"breadcrumb__dropdown-btn\"\r\n        [matMenuTriggerFor]=\"bodyMediumMenu\"\r\n      >\r\n        <mat-icon svgIcon=\"breadcrumb_dropdown\"></mat-icon>\r\n      </button>\r\n      <mat-menu\r\n        #bodyMediumMenu=\"matMenu\"\r\n        yPosition=\"below\"\r\n        class=\"qms-breadcrumb-menu\"\r\n      >\r\n        <div (click)=\"$event.stopPropagation()\">\r\n          <div\r\n            qms-menu-item\r\n            mat-menu-item\r\n            disableRipple\r\n            *ngFor=\"let item of dropdownNodes\"\r\n            (keydown.enter)=\"onKeyPressed($event)\"\r\n            (click)=\"onItemSelect(item)\"\r\n          >\r\n            <div #menuItemContent qms-expansion-header>\r\n              <div qms-list-header>\r\n                <div qms-line color=\"default-subtitle\">{{item.name}}</div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </mat-menu>\r\n\r\n      <span qms-breadcrumb-direction-icon>\r\n        <mat-icon>keyboard_arrow_right</mat-icon>\r\n      </span>\r\n    </span>\r\n\r\n    <!-- Dropdown table -->\r\n    <span qms-breadcrumb-item *ngIf=\"isOverflow && type=='table'\">\r\n      <button qms-btn-icon color=\"light\" [matMenuTriggerFor]=\"bodyMediumMenu\">\r\n        <mat-icon>more_horiz</mat-icon>\r\n      </button>\r\n      <mat-menu\r\n        #bodyMediumMenu=\"matMenu\"\r\n        yPosition=\"below\"\r\n        class=\"qms-breadcrumb-menu\"\r\n      >\r\n        <div (click)=\"$event.stopPropagation()\">\r\n          <div\r\n            qms-menu-item\r\n            mat-menu-item\r\n            disableRipple\r\n            *ngFor=\"let item of dropdownNodes\"\r\n            (keydown.enter)=\"onKeyPressed($event)\"\r\n            (click)=\"onItemSelect(item)\"\r\n          >\r\n            <div #menuItemContent qms-expansion-header>\r\n              <div qms-list-header>\r\n                <div qms-line color=\"default-subtitle\">{{item.name}}</div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </mat-menu>\r\n\r\n      <span qms-breadcrumb-direction-icon>\r\n        <mat-icon>keyboard_arrow_right</mat-icon>\r\n      </span>\r\n    </span>\r\n    <!-- Item list -->\r\n    <span\r\n      qms-breadcrumb-item\r\n      *ngFor=\"let item of itemNodes;let i=index\"\r\n      [isLastItem]=\"i === itemNodes.length - 1\"\r\n      [(showTooltip)]=\"item.isOverflow\"\r\n    >\r\n      <mat-icon\r\n        *ngIf=\"item.displayType === itemIconType.name && item.isShow\"\r\n        class=\"mat-icon-rtl-mirror material-icons-outlined item-icon\"\r\n      >\r\n        {{ item.itemIcon }}\r\n      </mat-icon>\r\n      <mat-icon\r\n        *ngIf=\"item.displayType === itemIconType.svg && item.isShow\"\r\n        class=\"mat-icon-rtl-mirror material-icons-outlined item-icon\"\r\n        [svgIcon]=\"item.itemIconSvg\"\r\n      >\r\n      </mat-icon>\r\n      <img\r\n        *ngIf=\"item.displayType === itemIconType.path && item.isShow\"\r\n        class=\"mat-icon item-icon\"\r\n        [src]=\"item.itemIconPath\"\r\n      />\r\n      <img\r\n        *ngIf=\"item.displayType === itemIconType.base64 && item.isShow\"\r\n        class=\"mat-icon image-base64 item-icon\"\r\n        [src]=\"getImagePath(item)\"\r\n      />\r\n      <div\r\n        class=\"qms-breadcrumb-item-text\"\r\n        [qms-tool-tip]=\"item.name\"\r\n        [showToolTip]=\"item.isOverflow\"\r\n        #breadcrumbItemText\r\n        mode=\"dark\"\r\n        *ngIf=\"item.isShow\"\r\n        (click)=\"onItemSelect(item, i == itemNodes.length - 1);\"\r\n      >\r\n        {{item.name}}\r\n      </div>\r\n      <span\r\n        qms-breadcrumb-direction-icon\r\n        *ngIf=\"item.isShow && i !== itemNodes.length - 1\"\r\n      >\r\n        <mat-icon>keyboard_arrow_right</mat-icon>\r\n      </span>\r\n    </span>\r\n  </div>\r\n\r\n  <div class=\"breadcrumb-container\" *ngIf=\"isMobileType\">\r\n    <!-- Home -->\r\n    <span qms-breadcrumb-item [(showTooltip)]=\"previousNode.isOverflow\">\r\n      <span qms-breadcrumb-direction-icon>\r\n        <mat-icon>keyboard_backspace</mat-icon>\r\n      </span>\r\n      <mat-icon\r\n        *ngIf=\"previousNode.displayType === itemIconType.name\"\r\n        class=\"mat-icon-rtl-mirror material-icons-outlined item-icon\"\r\n      >\r\n        {{ previousNode.itemIcon }}\r\n      </mat-icon>\r\n      <mat-icon\r\n        *ngIf=\"previousNode.displayType === itemIconType.svg\"\r\n        class=\"mat-icon-rtl-mirror material-icons-outlined item-icon\"\r\n        [svgIcon]=\"previousNode.itemIconSvg\"\r\n      >\r\n      </mat-icon>\r\n      <img\r\n        *ngIf=\"previousNode.displayType === itemIconType.path\"\r\n        class=\"mat-icon item-icon\"\r\n        [src]=\"previousNode.itemIconPath\"\r\n      />\r\n      <img\r\n        *ngIf=\"previousNode.displayType === itemIconType.base64\"\r\n        class=\"mat-icon image-base64 item-icon\"\r\n        [src]=\"getImagePath(previousNode)\"\r\n      />\r\n      <div\r\n        class=\"qms-breadcrumb-item-text\"\r\n        [qms-tool-tip]=\"previousNode.name\"\r\n        [showToolTip]=\"previousNode.isOverflow\"\r\n        #breadcrumbItemText\r\n        mode=\"dark\"\r\n        (click)=\"onItemSelect(previousNode)\"\r\n      >\r\n        {{previousNode.name}}\r\n      </div>\r\n    </span>\r\n  </div>\r\n</div>\r\n",
+                template: "<div>\r\n  <div class=\"breadcrumb-container\" *ngIf=\"!isMobileType\">\r\n    <!-- Home -->\r\n    <div\r\n      qms-breadcrumb-item\r\n      *ngIf=\"!isOverflow || type=='table'\"\r\n      [(showTooltip)]=\"homeNode['isOverflow']\"\r\n    >\r\n      <mat-icon\r\n        *ngIf=\"homeNode?.displayType === itemIconType.name\"\r\n        class=\"mat-icon-rtl-mirror material-icons-outlined item-icon\"\r\n      >\r\n        {{ homeNode?.itemIcon }}\r\n      </mat-icon>\r\n      <mat-icon\r\n        *ngIf=\"homeNode?.displayType === itemIconType.svg\"\r\n        class=\"mat-icon-rtl-mirror material-icons-outlined item-icon\"\r\n        [svgIcon]=\"homeNode.itemIconSvg\"\r\n      >\r\n      </mat-icon>\r\n      <img\r\n        *ngIf=\"homeNode?.displayType === itemIconType.path\"\r\n        class=\"mat-icon item-icon\"\r\n        [src]=\"homeNode.itemIconPath\"\r\n      />\r\n      <img\r\n        *ngIf=\"homeNode?.displayType === itemIconType.base64\"\r\n        class=\"mat-icon image-base64 item-icon\"\r\n        [src]=\"getImagePath(homeNode)\"\r\n      />\r\n      <div\r\n        class=\"qms-breadcrumb-item-text\"\r\n        [qms-tool-tip]=\"homeNode['name']\"\r\n        [showToolTip]=\"homeNode['isOverflow']\"\r\n        #breadcrumbItemText\r\n        mode=\"dark\"\r\n        (click)=\"onItemSelect(homeNode)\"\r\n      >\r\n        {{homeNode?.name}}\r\n      </div>\r\n      <mat-icon *ngIf=\"!isOverflow && type !=='table'\"\r\n        >keyboard_arrow_right</mat-icon\r\n      >\r\n      <span\r\n        *ngIf=\"itemNodes.length && type=='table'\"\r\n        qms-breadcrumb-direction-icon\r\n      >\r\n        <mat-icon>keyboard_arrow_right</mat-icon>\r\n      </span>\r\n    </div>\r\n\r\n    <!-- Dropdown not table -->\r\n    <div qms-breadcrumb-item *ngIf=\"isOverflow && type!='table'\">\r\n      <button\r\n        qms-btn-icon\r\n        color=\"light\"\r\n        class=\"breadcrumb__dropdown-btn\"\r\n        [matMenuTriggerFor]=\"bodyMediumMenu\"\r\n      >\r\n        <mat-icon svgIcon=\"breadcrumb_dropdown\"></mat-icon>\r\n      </button>\r\n      <mat-menu\r\n        #bodyMediumMenu=\"matMenu\"\r\n        yPosition=\"below\"\r\n        class=\"qms-breadcrumb-menu\"\r\n      >\r\n        <div (click)=\"$event.stopPropagation()\">\r\n          <div\r\n            qms-menu-item\r\n            mat-menu-item\r\n            disableRipple\r\n            *ngFor=\"let item of dropdownNodes\"\r\n            (keydown.enter)=\"onKeyPressed($event)\"\r\n            (click)=\"onItemSelect(item)\"\r\n          >\r\n            <div #menuItemContent qms-expansion-header>\r\n              <div qms-list-header>\r\n                <div qms-line color=\"default-subtitle\">{{item.name}}</div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </mat-menu>\r\n\r\n      <span qms-breadcrumb-direction-icon>\r\n        <mat-icon>keyboard_arrow_right</mat-icon>\r\n      </span>\r\n    </div>\r\n\r\n    <!-- Dropdown table -->\r\n    <div qms-breadcrumb-item *ngIf=\"isOverflow && type=='table'\">\r\n      <button qms-btn-icon color=\"light\" [matMenuTriggerFor]=\"bodyMediumMenu\">\r\n        <mat-icon>more_horiz</mat-icon>\r\n      </button>\r\n      <mat-menu\r\n        #bodyMediumMenu=\"matMenu\"\r\n        yPosition=\"below\"\r\n        class=\"qms-breadcrumb-menu\"\r\n      >\r\n        <div (click)=\"$event.stopPropagation()\">\r\n          <div\r\n            qms-menu-item\r\n            mat-menu-item\r\n            disableRipple\r\n            *ngFor=\"let item of dropdownNodes\"\r\n            (keydown.enter)=\"onKeyPressed($event)\"\r\n            (click)=\"onItemSelect(item)\"\r\n          >\r\n            <div #menuItemContent qms-expansion-header>\r\n              <div qms-list-header>\r\n                <div qms-line color=\"default-subtitle\">{{item.name}}</div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </mat-menu>\r\n\r\n      <span qms-breadcrumb-direction-icon>\r\n        <mat-icon>keyboard_arrow_right</mat-icon>\r\n      </span>\r\n    </div>\r\n    <!-- Item list -->\r\n    <div\r\n      qms-breadcrumb-item\r\n      *ngFor=\"let item of itemNodes;let i=index\"\r\n      [isLastItem]=\"i === itemNodes.length - 1\"\r\n      [(showTooltip)]=\"item.isOverflow\"\r\n    >\r\n      <mat-icon\r\n        *ngIf=\"item.displayType === itemIconType.name && item.isShow\"\r\n        class=\"mat-icon-rtl-mirror material-icons-outlined item-icon\"\r\n      >\r\n        {{ item.itemIcon }}\r\n      </mat-icon>\r\n      <mat-icon\r\n        *ngIf=\"item.displayType === itemIconType.svg && item.isShow\"\r\n        class=\"mat-icon-rtl-mirror material-icons-outlined item-icon\"\r\n        [svgIcon]=\"item.itemIconSvg\"\r\n      >\r\n      </mat-icon>\r\n      <img\r\n        *ngIf=\"item.displayType === itemIconType.path && item.isShow\"\r\n        class=\"mat-icon item-icon\"\r\n        [src]=\"item.itemIconPath\"\r\n      />\r\n      <img\r\n        *ngIf=\"item.displayType === itemIconType.base64 && item.isShow\"\r\n        class=\"mat-icon image-base64 item-icon\"\r\n        [src]=\"getImagePath(item)\"\r\n      />\r\n      <div\r\n        class=\"qms-breadcrumb-item-text\"\r\n        [qms-tool-tip]=\"item.name\"\r\n        [showToolTip]=\"item.isOverflow\"\r\n        #breadcrumbItemText\r\n        mode=\"dark\"\r\n        *ngIf=\"item.isShow\"\r\n        (click)=\"onItemSelect(item, i == itemNodes.length - 1);\"\r\n      >\r\n        {{item.name}}\r\n      </div>\r\n      <span\r\n        qms-breadcrumb-direction-icon\r\n        *ngIf=\"item.isShow && i !== itemNodes.length - 1\"\r\n      >\r\n        <mat-icon>keyboard_arrow_right</mat-icon>\r\n      </span>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"breadcrumb-container\" *ngIf=\"isMobileType\">\r\n    <mat-sidenav-container>\r\n      <mat-sidenav\r\n        #sidenav\r\n        mode=\"'over'\"\r\n        class=\"breadcrumb-sidenav\"\r\n        [fixedInViewport]=\"true\"\r\n      >\r\n        <div class=\"header\">\r\n          <div class=\"header-left\">\r\n            <p>{{LANG.BREADCRUMB}}</p>\r\n            <div class=\"sub\">{{LANG.NAVIGATE_TO}}</div>\r\n          </div>\r\n          <div class=\"header-right\">\r\n            <button qms-btn-text (click)=\"sidenav.close()\">\r\n              {{LANG.QMSCKEDITOR.CLOSE}}\r\n            </button>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"content\">\r\n          <mat-selection-list #shoes [multiple]=\"false\">\r\n            <mat-list-option\r\n              class=\"qms-list-option\"\r\n              *ngFor=\"let item of sideNavNodes; let first = first; let last = last;\"\r\n              (click)=\"onItemSelect(item)\"\r\n            >\r\n              <mat-icon\r\n                *ngIf=\"!first\"\r\n                mat-list-icon\r\n                class=\"subdirectory_arrow_right\"\r\n                >subdirectory_arrow_right</mat-icon\r\n              >\r\n              <div class=\"content-text-name\">\r\n                <div class=\"content-text-name-heading\">\r\n                  <mat-icon\r\n                    *ngIf=\"item.displayType === itemIconType.name\"\r\n                    class=\"mat-icon-rtl-mirror material-icons-outlined item-icon\"\r\n                  >\r\n                    {{ item.itemIcon }}\r\n                  </mat-icon>\r\n                  <img\r\n                    *ngIf=\"item.displayType === itemIconType.path\"\r\n                    class=\"mat-icon item-icon\"\r\n                    [src]=\"item.itemIconPath\"\r\n                  />\r\n                  <img\r\n                    *ngIf=\"item.displayType === itemIconType.base64\"\r\n                    class=\"mat-icon image-base64 item-icon\"\r\n                    [src]=\"getImagePath(item)\"\r\n                  />\r\n                  <span class=\"\">{{item.name}}</span>\r\n                </div>\r\n                <mat-icon class=\"color-gray\" *ngIf=\"last\">done</mat-icon>\r\n              </div>\r\n            </mat-list-option>\r\n          </mat-selection-list>\r\n        </div>\r\n      </mat-sidenav>\r\n\r\n      <mat-sidenav-content>\r\n        <button\r\n          qms-btn-icon\r\n          class=\"more_horiz-btn\"\r\n          color=\"light\"\r\n          *ngIf=\"sideNavNodes.length\"\r\n          (click)=\"sidenav.toggle()\"\r\n        >\r\n          <mat-icon>more_horiz</mat-icon>\r\n        </button>\r\n      </mat-sidenav-content>\r\n    </mat-sidenav-container>\r\n    <div qms-breadcrumb-item [(showTooltip)]=\"previousNode['isOverflow']\">\r\n      <!-- Home -->\r\n      <span qms-breadcrumb-direction-icon>\r\n        <mat-icon>keyboard_arrow_left</mat-icon>\r\n      </span>\r\n      <mat-icon\r\n        *ngIf=\"previousNode?.displayType === itemIconType.name\"\r\n        class=\"mat-icon-rtl-mirror material-icons-outlined item-icon\"\r\n      >\r\n        {{ previousNode.itemIcon }}\r\n      </mat-icon>\r\n      <mat-icon\r\n        *ngIf=\"previousNode?.displayType === itemIconType.svg\"\r\n        class=\"mat-icon-rtl-mirror material-icons-outlined item-icon\"\r\n        [svgIcon]=\"previousNode.itemIconSvg\"\r\n      >\r\n      </mat-icon>\r\n      <img\r\n        *ngIf=\"previousNode?.displayType === itemIconType.path\"\r\n        class=\"mat-icon item-icon\"\r\n        [src]=\"previousNode.itemIconPath\"\r\n      />\r\n      <img\r\n        *ngIf=\"previousNode?.displayType === itemIconType.base64\"\r\n        class=\"mat-icon image-base64 item-icon\"\r\n        [src]=\"getImagePath(previousNode)\"\r\n      />\r\n      <div\r\n        class=\"qms-breadcrumb-item-text\"\r\n        [qms-tool-tip]=\"previousNode['name']\"\r\n        [showToolTip]=\"previousNode['isOverflow']\"\r\n        #breadcrumbItemText\r\n        mode=\"dark\"\r\n        (click)=\"onItemSelect(previousNode)\"\r\n      >\r\n        {{previousNode.name}}\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n",
                 encapsulation: ViewEncapsulation.None,
-                styles: [".breadcrumb-container{display:flex;font-family:Open Sans;font-size:14px;font-weight:600;color:#323232}.breadcrumb-container .qms-breadcrumb-direction-icon,.breadcrumb-container .qms-breadcrumb-item{display:flex;align-items:center;padding:3px 0 2px}.breadcrumb-container .qms-breadcrumb-direction-icon .mat-icon{width:18px;height:18px;font-size:18px;margin-left:.5rem;margin-right:.5rem}.breadcrumb-container .item-icon{margin-right:2px}.breadcrumb-container .qms-breadcrumb-item{cursor:inherit}.breadcrumb-container .qms-breadcrumb-item .qms-btn-icon{width:1.5rem;height:1.5rem;line-height:2rem}.breadcrumb-container .qms-breadcrumb-item .qms-breadcrumb-item-overflow{max-width:240px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.breadcrumb-container .qms-breadcrumb-item .breadcrumb__dropdown-btn{width:2rem;height:2rem}.breadcrumb-container .qms-breadcrumb-item .breadcrumb__dropdown-btn svg{display:block}.breadcrumb-container .qms-breadcrumb-last-item{color:rgba(0,0,0,.6);font-weight:400;cursor:not-allowed}.qms-breadcrumb-table .breadcrumb-container .qms-breadcrumb-direction-icon .mat-icon{width:12px;height:12px;font-size:12px;margin-left:.25rem;margin-right:.25rem;color:rgba(0,0,0,.6)}.qms-breadcrumb-table .breadcrumb-container .item-icon{margin-right:1px}.qms-breadcrumb-table .breadcrumb-container .qms-breadcrumb-item .qms-breadcrumb-item-text{font-size:12px;font-weight:400;color:rgba(0,0,0,.6)}.qms-breadcrumb-table .breadcrumb-container .qms-breadcrumb-item .qms-breadcrumb-item-overflow{max-width:200px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.qms-breadcrumb__multi-line .breadcrumb-container{flex-wrap:wrap}.qms-breadcrumb-menu .qms-dropdown-menu-item{border:none}"]
+                styles: [".breadcrumb-container{display:flex;font-family:Open Sans;font-size:14px;font-weight:600;color:#323232}.breadcrumb-container .qms-breadcrumb-direction-icon,.breadcrumb-container .qms-breadcrumb-item{display:flex;align-items:center;padding:3px 0 2px}.breadcrumb-container .qms-breadcrumb-direction-icon .mat-icon{width:18px;height:18px;font-size:18px;margin-left:.5rem;margin-right:.5rem}.breadcrumb-container .item-icon{margin-right:2px}.breadcrumb-container .qms-breadcrumb-item{cursor:inherit;margin:8px 8px 8px 0}.breadcrumb-container .qms-breadcrumb-item .qms-btn-icon{width:1.5rem;height:1.5rem;line-height:2rem}.breadcrumb-container .qms-breadcrumb-item .qms-breadcrumb-item-overflow{max-width:240px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.breadcrumb-container .qms-breadcrumb-item .breadcrumb__dropdown-btn{width:2rem;height:2rem}.breadcrumb-container .qms-breadcrumb-item .breadcrumb__dropdown-btn svg{display:block}.breadcrumb-container .qms-breadcrumb-last-item{color:rgba(0,0,0,.6);font-weight:400;cursor:not-allowed}.breadcrumb-container .mat-drawer-container{z-index:3;background-color:transparent}.qms-breadcrumb-table .breadcrumb-container .qms-breadcrumb-direction-icon .mat-icon{width:12px;height:12px;font-size:12px;margin-left:.25rem;margin-right:.25rem;color:rgba(0,0,0,.6)}.qms-breadcrumb-table .breadcrumb-container .item-icon{margin-right:1px}.qms-breadcrumb-table .breadcrumb-container .qms-breadcrumb-item .qms-breadcrumb-item-text{font-size:12px;font-weight:400;color:rgba(0,0,0,.6)}.qms-breadcrumb-table .breadcrumb-container .qms-breadcrumb-item .qms-breadcrumb-item-overflow{max-width:200px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.qms-breadcrumb__multi-line .breadcrumb-container{flex-wrap:wrap}.qms-breadcrumb-menu .qms-dropdown-menu-item{border:none}.breadcrumb-sidenav{display:flex;align-items:center;justify-content:center;width:100%;background:#fff;z-index:3}.breadcrumb-sidenav .header{font-family:Open Sans;font-style:normal;background-color:var(--background-area);height:71px;display:flex;justify-content:space-between;padding:16px}.breadcrumb-sidenav .header p{font-weight:600;font-size:18px;line-height:25px;color:var(--default-color);margin-bottom:0}.breadcrumb-sidenav .header .sub{font-weight:400;font-size:14px;line-height:22px;color:#5a5a5a}.breadcrumb-sidenav .content{padding:0 16px 16px;height:calc(100vh - 71px);overflow:auto}.breadcrumb-sidenav .content .qms-list-option{height:unset!important}.breadcrumb-sidenav .content .qms-list-option .mat-list-text{padding-right:0!important;padding-left:0!important}.breadcrumb-sidenav .content .qms-list-option .mat-list-item-content{border-bottom:1px solid #e0e0e0;padding:8px}.breadcrumb-sidenav .content-text-name{display:flex;align-items:center;justify-content:space-between}.breadcrumb-sidenav .content-text-name .content-text-name-heading{display:flex;align-items:center;color:var(--default-color)}.breadcrumb-sidenav .content-text-name .content-text-name-heading .item-icon{margin-right:10px;color:var(--tab-border)}.breadcrumb-sidenav .content-text-name .color-gray{color:var(--tab-border)}.more_horiz-btn.qms-btn-icon{width:1.5rem;height:1.5rem;line-height:2rem;margin:8px 0 8px 8px}.subdirectory_arrow_right{color:#0163b2}"]
             },] }
 ];
 QMSBreadcrumb.ctorParameters = () => [
     { type: ElementRef },
     { type: MatIconRegistry },
     { type: ChangeDetectorRef },
-    { type: DomSanitizer }
+    { type: DomSanitizer },
+    { type: TranslateLibraryService }
 ];
 QMSBreadcrumb.propDecorators = {
     nodes: [{ type: Input }],
@@ -4331,8 +4415,10 @@ QMSBreadcrumbModule.decorators = [
                     MatCommonModule,
                     MatIconModule,
                     QmsAngularModule,
+                    QMSListModule,
                     QMSButtonModule,
-                    MatMenuModule
+                    MatMenuModule,
+                    MatSidenavModule
                 ],
                 exports: [
                     MatCommonModule,
@@ -24077,9 +24163,6 @@ QMSTableModule.decorators = [
             },] }
 ];
 
-class BreadcrumbNode {
-}
-
 class RelatedConst {
 }
 RelatedConst.IS_DISPLAY_SEARCH_RESULT = 'IS_DISPLAY_SEARCH_RESULT';
@@ -27358,7 +27441,7 @@ class SelectProcessDocumentPopupComponent {
 SelectProcessDocumentPopupComponent.decorators = [
     { type: 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        <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",
+                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 type=\"text\" placeholder=\"{{ LANG.SEARCH }}\" matInput [formControl]=\"myControl\" [matAutocomplete]=\"auto\" />\r\n    <mat-icon>search</mat-icon>\r\n  </div>\r\n\r\n\r\n  <mat-autocomplete #auto=\"matAutocomplete\" class=\"mat-autocomplete_related-viewport\"\r\n    (optionSelected)=\"selectRelated($event.option.value)\" [displayWith]=\"displayWhenSelectRelatedOption\">\r\n    <cdk-virtual-scroll-viewport qms-scrollbar itemSize=\"10\" [class.related-viewport]=\"isInputValue\"\r\n      *ngIf=\"filteredOptions.length\">\r\n      <ng-container *ngFor=\"let type of searchOrder\">\r\n        <div class=\"search__module-result\" *ngIf=\"canShowSearchOption(type.value)\">\r\n          <span class=\"search__module-title\">{{ getTitle(type.value) }}</span>\r\n          <mat-option class=\"search__option\" *ngFor=\"let option of getModuleFilteredOptions(type.value)\"\r\n            [value]=\"option\" [disabled]=\"option.disabled\">\r\n            <qms-list-item type=\"image-square\">\r\n              <mat-icon leading-icon type=\"image-square\" [svgIcon]=\"getNodeIcon(option)\"></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 class=\"caption\" *ngIf=\"option.breadcumbs && option.breadcumbs.length\">\r\n                  <qms-breadcrumb class=\"breadcrumb-containe\" type=\"table\" numDisplayItem=\"1\"\r\n                    [nodes]=\"option.breadcumbs\">\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 class=\"qms-scrollbar qmslib_related_popup_content\" [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      <ng-container *ngIf=\"treeData1.length > 0\">\r\n        <div *ngIf=\"moduleId === module.documentProcess\" class=\"line__divider\"></div>\r\n        <mat-expansion-panel hideToggle id=\"qmslib_related_popup_common_001\" [expanded]=\"isCommonExpanded\"\r\n          (opened)=\"isCommonExpanded = true\" (closed)=\"isCommonExpanded = false\" class=\"panel-tree\">\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 [treeData]=\"treeData1\" [treeConfig]=\"treeConfig1\" [selectedData]=\"selectedData\"\r\n              [selectedRiskData]=\"selectedRiskData\" [disabledList]=\"disabledList\"\r\n              (nodeExpandEvent)=\"getChildrenOfFolder($event, dataType.area)\"\r\n              (selectNodeEvent)=\"selectNodeTreeEvent($event)\" (getChildNodeSelectOne)=\"getChildNodeSelectOne($event)\"\r\n              (selectFolderEvent)=\"getItemOfFolder($event, dataType.area)\" [expandOnTitleClick]=\"!splitView\"\r\n              [parentNodeOnClick]=\"parentNodeSelected\" (treeControlNodes)=\"selectTreeControlNodeProcess($event)\">\r\n            </qms-tree-new>\r\n          </div>\r\n        </mat-expansion-panel>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"treeData2.length > 0\">\r\n        <div *ngIf=\"moduleId === module.documentProcess\" class=\"line__divider\"></div>\r\n\r\n        <mat-expansion-panel hideToggle *ngIf=\"moduleId === module.documentProcess\"\r\n          id=\"qmslib_related_popup_document_001\" [expanded]=\"isDocumentExpanded\" (opened)=\"isDocumentExpanded = true\"\r\n          (closed)=\"isDocumentExpanded = false\" class=\"panel-tree\">\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 [treeData]=\"treeData2\" [treeConfig]=\"treeConfig2\" [selectedData]=\"selectedData2\"\r\n              [disabledList]=\"disabledList2\" (nodeExpandEvent)=\"getChildrenOfFolder($event, dataType.folder)\"\r\n              (selectNodeEvent)=\"selectNodeTreeEvent($event)\" (getChildNodeSelectOne)=\"getChildNodeSelectOne($event)\"\r\n              (selectFolderEvent)=\"getItemOfFolder($event, dataType.folder)\" [expandOnTitleClick]=\"!splitView\"\r\n              [parentNodeOnClick]=\"parentNodeSelected\" (treeControlNodes)=\"selectTreeControlNodeDocument($event)\">\r\n            </qms-tree-new>\r\n          </div>\r\n        </mat-expansion-panel>\r\n      </ng-container>\r\n    </div>\r\n    <div *ngIf=\"splitView\" 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      <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 qms-group-options [disabled]=\"node.disabled\" color=\"default\" [checked]=\"isNodeSelected(node)\"\r\n          (change)=\"toggleSelectItem(node)\" *ngIf=\"!hideSplitviewCheckbox\">\r\n        </mat-checkbox>\r\n        <button class=\"button-boder\" mat-icon-button [disableRipple]=\"true\" (click)=\"toggleSelectItem(node)\"\r\n          *ngIf=\"node.itemName\">\r\n          <mat-icon class=\"mat-icon-rtl-mirror material-icons-outlined\" [svgIcon]=\"getNodeIcon(node)\">\r\n          </mat-icon>\r\n        </button>\r\n        <span class=\"text-node-item\" style=\"cursor: pointer\" (click)=\"toggleSelectItem(node)\" [class.bgSelected]=\"\r\n            isSelectOne &&\r\n            idCheckIconSplitView == idToCheckSelectOne(node.id, node.parentId)\r\n          \">\r\n          <span class=\"text-node\" [class.select-one-checked]=\"\r\n              isSelectOne &&\r\n              idCheckIconSplitView == idToCheckSelectOne(node.id, node.parentId)\r\n            \">{{ node.itemName }}</span>\r\n          <mat-icon class=\"select-one-checked\" *ngIf=\"\r\n              isSelectOne &&\r\n              idCheckIconSplitView == idToCheckSelectOne(node.id, node.parentId)\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 *ngIf=\"item.itemName\" mat-button class=\"related__item__content\" qms-tool-tip=\"{{\r\n              isEllipsisActive(itemName) ? getItemChipName(item) : ''\r\n            }}\" mode=\"dark\">\r\n            <span class=\"related__item__content_name\" #itemName>{{\r\n              getItemChipName(item)\r\n              }}</span>\r\n            <mat-icon *ngIf=\"!(treeConfig1?.selectOne || treeConfig2?.selectOne)\" (click)=\"removeCheckedNodeList(item)\">\r\n              cancel</mat-icon>\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 *ngIf=\"!checkedNodeList.length\" qms-btn style=\"margin-top: 7px\" (click)=\"onAddClick()\">\r\n      {{ LANG.ADD }}\r\n    </button>\r\n    <button *ngIf=\"checkedNodeList.length\" qms-btn style=\"margin-top: 0px\" (click)=\"onAddClick()\">\r\n      {{ LANG.ADD }} ({{ checkedNodeList.length }})\r\n    </button>\r\n    <button qms-btn-text [ngStyle]=\"{ 'margin-top': checkedNodeList.length ? '0px' : '7px' }\" (click)=\"onCloseClick()\">\r\n      {{ LANG.CANCEL }}\r\n    </button>\r\n  </div>\r\n</div>\r\n",
                 encapsulation: ViewEncapsulation.None,
                 styles: ["::-webkit-scrollbar{width:12px}::-webkit-scrollbar-track{background:rgba(0,0,0,.12);background-clip:content-box}::-webkit-scrollbar-thumb{background:rgba(0,0,0,.38);border-radius:20px;width:4px;border:4px solid transparent;background-clip:content-box}::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.5);background-clip:content-box;border:4px solid transparent}.qms__popup .button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qms__danger button{border:none;color:var(--text-white);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:var(--button-red-background);margin-left:10px}.qms__danger .yellow{background-color:var(--button-yellow-background);margin-left:10px;color:var(--popup-title-color)}.qms__danger .green{background-color:var(--button-green-background);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:var(--button-background)}.confirm__button__groups .confirm:hover{background:var(--primary-button-background-color);color:var(--primary-button-text-color)}.confirm__button__groups .confirm:disabled{cursor:not-allowed}.confirm__button__groups .cancel{background:var(--button-background)}.confirm__button__groups .cancel:hover{background:var(--primary-button-background-color);color:var(--primary-button-text-color)}.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:var(--background-input-text)}.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:var(--related-item-background);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:var(--related-mat-icon-color);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{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:var(--primary)}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}"]
             },] }
@@ -27488,6 +27571,7 @@ class QMSNavigationDrawerComponent {
             this.activeNode = node.id;
             this.onClickNodeEvent.emit(node.id);
         }
+        this.onClickToggleNode(node);
     }
     onOver(node) {
         this.hoverNode = node;
@@ -27743,7 +27827,7 @@ class QMSNavigationDrawerComponent {
 QMSNavigationDrawerComponent.decorators = [
     { type: Component, args: [{
                 selector: 'app-qms-navigation-drawer',
-                template: "<mat-tree class=\"qms-navigation-drawer-container\" [dataSource]=\"dataSource\" [treeControl]=\"treeControl\" cdkDropList\r\n  (cdkDropListDropped)=\"drop($event)\" [cdkDropListDisabled]=\"dragDropListDisabled\">\r\n  <!-- This is the tree node template for leaf nodes -->\r\n  <mat-tree-node [class.pr-34]=\"showAddIcon\" *matTreeNodeDef=\"let node\" (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]=\"{'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\" (click)=\"onClickNode(node, true)\">\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\"\r\n        qms-btn-icon>\r\n        <mat-icon class=\"mat-icon-rtl-mirror\">\r\n          add\r\n        </mat-icon>\r\n      </button>\r\n    </div>\r\n  </mat-tree-node>\r\n  <!-- This is the tree node template for expandable nodes -->\r\n  <mat-tree-node [class.pr-34]=\"showAddIcon\" *matTreeNodeDef=\"let node;when: hasChild\" (mouseover)=\"onOver(node)\"\r\n    matTreeNodePadding 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\" (keydown)=\"onKeyDownNode($event, node)\" matTreeNodeToggle\r\n      (click)=\"onClickNode(node, true)\">\r\n      <button matTreeNodeToggle (click)=\"onClickNode(node, false);onClickToggleNode(node)\" tabindex=\"-1\"\r\n        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\">{{ 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)\"\r\n        qms-btn-icon>\r\n        <mat-icon class=\"mat-icon-rtl-mirror\">\r\n          add\r\n        </mat-icon>\r\n      </button>\r\n    </div>\r\n  </mat-tree-node>\r\n</mat-tree>",
+                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\" class=\"tree-content\" (click)=\"onClickNode(node, true)\">\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)\" matTreeNodeToggle (click)=\"onClickNode(node, true)\" >\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\">{{ 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;cursor:pointer!important}::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}"]
             },] }
 ];
@@ -27934,11 +28018,11 @@ class QMSPaginatorComponent {
         this.displayNumberOfPages = this.pagination(this.pageIndex, this.numberOfPages.length);
     }
     _changePageSize(pageSize) {
-        const startIndex = this.pageIndex * this.pageSize;
-        const previousPageIndex = this.pageIndex;
+        const startIndex = this._pageIndex * this.pageSize;
+        const previousPageIndex = this._pageIndex;
         this.previousPageIndex = previousPageIndex;
+        this.pageIndex = (Math.floor(startIndex / pageSize) || 0) + 1;
         this.pageSize = pageSize;
-        this.pageIndex = Math.floor(startIndex / pageSize) || 0;
         this._emitPageEvent(this.previousPageIndex);
         this.getNumberOfPages();
     }
@@ -28014,5 +28098,5 @@ QmsPaginatorModule.decorators = [
  * Generated bundle index. Do not edit.
  */
 
-export { AutocompleteOffDirective, BREADCRUMB_DROPDOWN_ICON, BUTTON_TOGGLE_DEFAULT_OPTIONS, BUTTON_TOGGLE_GROUP, BUTTON_TOGGLE_GROUP_VALUE_ACCESSOR, BannerType, BpmnService, BreadcrumbNode, ButtonToggleChange, CHECKLIST_ICON, CKEditorEventConst, CKEditorModule, CdkDetailRowDirective, ConfirmDialog, DEPARTMENT_FOLDER_ICON, DEPARTMENT_FOLDER_OUTLINED_ICON, DEVIATION_ICON, DOCUMENT_DEPARTMENT_ICON, DOCUMENT_ENTERPRISE_ICON, DOCUMENT_ICON, DOCUMENT_LOCAL_ICON, DOCUMENT_REGIONAL_ICON, DataType$1 as DataType, DateFormatPipe, DocumentNodeType$1 as DocumentNodeType, ENTERPRISE_FOLDER_ICON, ENTERPRISE_FOLDER_OUTLINED_ICON, FileErrorType, FlowChartConst, FlowchartViewMode, ISelectOneItem, InformationCoverItem, KEYBOARD_DOWN_ICON, KEYBOARD_UP_ICON, LOCAL_FOLDER_ICON, LOCAL_FOLDER_OUTLINED_ICON, LinkAnchor, LinkType, MarginDirective, ModuleType$1 as ModuleType, NORMAL_FOLDER_ICON, NORMAL_FOLDER_OUTLINED_ICON, NavigatorElementView, NavigatorLinkView, NewTreeComponent, NewTreeModel, PROCESS_AREA_ICON, PROCESS_AREA_OUTLINED_ICON, PROCESS_ICON, PaginationSize, PopupData, ProtocolType, ProtocolTypeName, QMSAnchor, QMSAppBar, QMSAppIconModule, QMSAttachmentListDirective, QMSBreadcrumb, QMSBreadcrumbDirectionIconDirective, QMSBreadcrumbItemDirective, QMSBreadcrumbModule, QMSButton, QMSButtonIcon, QMSButtonModule, QMSButtonToggle, QMSButtonToggleGroup, QMSCKEditorBaseComponent, QMSCKEditorBaseService, QMSCKEditorBpmn, QMSCKEditorBpmnApiService, QMSCKEditorBpmnComponent, QMSCKEditorBpmnTemplate, QMSCKEditorComponent, QMSCKEditorConfirmComponent, QMSCKEditorData, QMSCKEditorDialogData, QMSCKEditorDocumentType, QMSCKEditorFlowchart, QMSCKEditorFlowchartService, QMSCKEditorFullscreenComponent, QMSCKEditorGlobalService, QMSCKEditorInjector, QMSCKEditorLinkAnchorDocument, QMSCKEditorLinkComponent, QMSCKEditorLinkService, QMSCKEditorLoadTemplateComponent, QMSCKEditorModule, QMSCKEditorPlugin, QMSCKEditorRelatedComponent, QMSCKEditorRelation, QMSCKEditorSaveAsTemplate, QMSCKEditorTemplate, QMSCKEditorTemplateService, QMSCKEditorToastService, QMSCKEditorTreeComponent, QMSCKEdtiorInputData, QMSChipBodyDirective, QMSChipInputChipListDirective, QMSChipInputDirective, QMSChipInputSelectDropWDownDirective, QMSChipInputSelectFieldDirective, QMSChipInputSelectTriggerDirective, QMSCollapseGroupDirective, QMSComment, QMSConfirmDialog, QMSDialogConfig, QMSDialogContainer, QMSDialogContent, QMSDialogFooter, QMSDialogHeader, QMSDrawerContentDirective, QMSDrawerDirective, QMSDrawerHeaderActionDirective, QMSDrawerHeaderDirective, QMSDropdownMenuItem, QMSEditFileNameDialog, QMSEditFileNameDialogModule, QMSFileAttachment, QMSFileUploadDirective, QMSFileUploadDisplayDirective, QMSFileUploadMultipleDirective, QMSFileUploadMultipleDisplayDirective, QMSFileUploadMultipleSelectorDirective, QMSFileUploadSelectorDirective, QMSFormDialog, QMSFormFieldDatePickerDirective, QMSFormFieldDirective, QMSFormFieldTextareaDirective, QMSGroupOptionDirective, QMSIconRegistryService, QMSInputChipDirective, QMSInputClearDirective, QMSList, QMSListExpansion, QMSListExpansionHeader, QMSListHeader, QMSListItem, QMSListLeadingIcon, QMSListLine, QMSListModule, QMSNavigationDrawerComponent, QMSNavigationDrawerModule, QMSNewTreeModule, QMSPaginatorComponent, QMSProcessDocumentItem, QMSRangeSliderDirective, QMSRangeSliderLockUpDirective, QMSRangeSliderModule, QMSRelatedGlobalService, QMSRelatedModule, QMSRichText, QMSRichTextModule, QMSRowDetailDirective, QMSScrolableAttachmentListDirective, QMSScrollbarDirective, QMSSearchFieldDirective, QMSSelectGlobalService, QMSSelectIncludeChildrenModule, QMSSelectOneGlobalService, QMSSelectOneModule, QMSSelectProcessDocumentGlobalService, QMSSelectProcessDocumentModule, QMSSideSheetModule, QMSSnackbarConfig, QMSSuffixDirective, QMSSuffixFieldDirective, QMSTabGroupAdvancedDirective, QMSTabGroupDirective, QMSTabLabelDirective, QMSTabModule, QMSTableAction, QMSTableActionBlock, QMSTableChildrenDirective, QMSTableDirective, QMSTableModule, QMSTableRowDirective, QMSTextBlockDirective, QMSTextBlockLine, QMSTextTruncateDirective, QMSThemingLibraryService, QMSToolTipComponent, QMSToolTipRendererDirective, QMSTooltipImageDirective, QMSTooltipModule, QMSTreeModule, QMSUploadFileErrorDialog, QMSUploadFileErrorDialogModule, QMSUploadingFileGuard, QMS_THEMES, QMS_THEME_DEFAULT, QmsAngularComponent, QmsAngularModule, QmsAngularService, QmsAppBarComponent, QmsAppBarModule, QmsBadgesComponent, QmsBadgesModule, QmsBannerButtonType, QmsBannerComponent, QmsBannerConfirmButton, QmsBannerConfirmButtonClick, QmsBannerConfirmComponent, QmsBannerConfirmModule, QmsBannerContent, QmsBannerLoadingComponent, QmsBannerLoadingModule, QmsBannerModule, QmsPaginatorModule, QmsReportContentPortraitComponent, QmsReportCoverPortraitComponent, QmsReportModule, QmsStatusDropdownComponent, QmsStatusDropdownModule, QmsStatusDropdownOption, QmsStatusDropdownType, QmsStepperComponent, QmsStepperModule, REGIONAL_FOLDER_ICON, REGIONAL_FOLDER_OUTLINED_ICON, RISK_ICON, RelatedConst, RelatedContentComponent, RelatedItemType, RelatedListComponent, RelatedPopupComponent, Result, RiskAnalysis, RiskAnalysisComponent, RiskDanger, RiskListComponent, RiskResult, RiskResultComponent, SaveTemplateComponent, ScrollToSelectedDirective, SelectConst, SelectDialog, SelectIncludeChildrenPopUpComponent, SelectOneDialog, SelectOnePopupData, SelectOption, SelectOptionTypes, SelectPopupData, SelectProcessDocumentPopupComponent, SelectProcessDocumentPopupData, SelectedOption, SelectedProcessDocumentItem, SharedModule, ShowHideSearchResultConst, SideNav, SideNavItem, SidenavComponent, TargetType, TargetTypeName, TranslateLibraryService, TreeComponent, TreeConfig, TreeFlatNode, TreeModel, TreeNode$1 as TreeNode, UploadErrorData, app, basic, en, erd, fsa, mixinColor, no, notExceedSize, org, pn, requiredFileType, standard, uml, ɵ2, SharedMaterialModule as ɵa, QMSCKEditorTreeService as ɵb, QMSCKEditorTemplateComponent as ɵc, LinkAttachmentComponent as ɵd, QMSCKEditorTooltipComponent as ɵe, QMSCKEditorTooltip as ɵf, QMSCKEditorImageMapComponent as ɵg, QMSCKEditorImageMap as ɵh, QMSCKEditorUploadService as ɵi, QMSCKEditorBpmnData as ɵj, QMSCKEditorAboutComponent as ɵk, QMSCKEditorFlowchartComponent as ɵl };
+export { AutocompleteOffDirective, BREADCRUMB_DROPDOWN_ICON, BUTTON_TOGGLE_DEFAULT_OPTIONS, BUTTON_TOGGLE_GROUP, BUTTON_TOGGLE_GROUP_VALUE_ACCESSOR, BannerType, BpmnService, BreadcrumbNode, BreadcrumbType, ButtonToggleChange, CHECKLIST_ICON, CKEditorEventConst, CKEditorModule, CdkDetailRowDirective, ConfirmDialog, DEPARTMENT_FOLDER_ICON, DEPARTMENT_FOLDER_OUTLINED_ICON, DEVIATION_ICON, DOCUMENT_DEPARTMENT_ICON, DOCUMENT_ENTERPRISE_ICON, DOCUMENT_ICON, DOCUMENT_LOCAL_ICON, DOCUMENT_REGIONAL_ICON, DataType$1 as DataType, DateFormatPipe, DocumentNodeType$1 as DocumentNodeType, ENTERPRISE_FOLDER_ICON, ENTERPRISE_FOLDER_OUTLINED_ICON, FileErrorType, FileType, FlowChartConst, FlowchartViewMode, ISelectOneItem, InformationCoverItem, KEYBOARD_DOWN_ICON, KEYBOARD_UP_ICON, LOCAL_FOLDER_ICON, LOCAL_FOLDER_OUTLINED_ICON, LinkAnchor, LinkType, MarginDirective, MfeUtil, ModuleType$1 as ModuleType, NORMAL_FOLDER_ICON, NORMAL_FOLDER_OUTLINED_ICON, NavigatorElementView, NavigatorLinkView, NewTreeComponent, NewTreeModel, PROCESS_AREA_ICON, PROCESS_AREA_OUTLINED_ICON, PROCESS_ICON, PaginationSize, PopupData, ProtocolType, ProtocolTypeName, QMSAnchor, QMSAppBar, QMSAppIconModule, QMSAttachmentListDirective, QMSBreadcrumb, QMSBreadcrumbDirectionIconDirective, QMSBreadcrumbItemDirective, QMSBreadcrumbModule, QMSButton, QMSButtonIcon, QMSButtonModule, QMSButtonToggle, QMSButtonToggleGroup, QMSCKEditorBaseComponent, QMSCKEditorBaseService, QMSCKEditorBpmn, QMSCKEditorBpmnApiService, QMSCKEditorBpmnComponent, QMSCKEditorBpmnTemplate, QMSCKEditorComponent, QMSCKEditorConfirmComponent, QMSCKEditorData, QMSCKEditorDialogData, QMSCKEditorDocumentType, QMSCKEditorFlowchart, QMSCKEditorFlowchartService, QMSCKEditorFullscreenComponent, QMSCKEditorGlobalService, QMSCKEditorInjector, QMSCKEditorLinkAnchorDocument, QMSCKEditorLinkComponent, QMSCKEditorLinkService, QMSCKEditorLoadTemplateComponent, QMSCKEditorModule, QMSCKEditorPlugin, QMSCKEditorRelatedComponent, QMSCKEditorRelation, QMSCKEditorSaveAsTemplate, QMSCKEditorTemplate, QMSCKEditorTemplateService, QMSCKEditorToastService, QMSCKEditorTreeComponent, QMSCKEdtiorInputData, QMSChipBodyDirective, QMSChipInputChipListDirective, QMSChipInputDirective, QMSChipInputSelectDropDownDirective, QMSChipInputSelectFieldDirective, QMSChipInputSelectTriggerDirective, QMSCollapseGroupDirective, QMSComment, QMSConfirmDialog, QMSDialogConfig, QMSDialogContainer, QMSDialogContent, QMSDialogFooter, QMSDialogHeader, QMSDrawerContentDirective, QMSDrawerDirective, QMSDrawerHeaderActionDirective, QMSDrawerHeaderDirective, QMSDropdownMenuItem, QMSEditFileNameDialog, QMSEditFileNameDialogModule, QMSFileAttachment, QMSFileUploadDirective, QMSFileUploadDisplayDirective, QMSFileUploadMultipleDirective, QMSFileUploadMultipleDisplayDirective, QMSFileUploadMultipleSelectorDirective, QMSFileUploadSelectorDirective, QMSFormDialog, QMSFormFieldDatePickerDirective, QMSFormFieldDirective, QMSFormFieldTextareaDirective, QMSGroupOptionDirective, QMSIconRegistryService, QMSInputChipDirective, QMSInputClearDirective, QMSList, QMSListExpansion, QMSListExpansionHeader, QMSListHeader, QMSListItem, QMSListLeadingIcon, QMSListLine, QMSListModule, QMSNavigationDrawerComponent, QMSNavigationDrawerModule, QMSNewTreeModule, QMSPaginatorComponent, QMSProcessDocumentItem, QMSRangeSliderDirective, QMSRangeSliderLockUpDirective, QMSRangeSliderModule, QMSRelatedGlobalService, QMSRelatedModule, QMSRichText, QMSRichTextModule, QMSRowDetailDirective, QMSScrolableAttachmentListDirective, QMSScrollbarDirective, QMSSearchFieldDirective, QMSSelectGlobalService, QMSSelectIncludeChildrenModule, QMSSelectOneGlobalService, QMSSelectOneModule, QMSSelectProcessDocumentGlobalService, QMSSelectProcessDocumentModule, QMSSideSheetModule, QMSSnackbarConfig, QMSSuffixDirective, QMSSuffixFieldDirective, QMSTabGroupAdvancedDirective, QMSTabGroupDirective, QMSTabLabelDirective, QMSTabModule, QMSTableAction, QMSTableActionBlock, QMSTableChildrenDirective, QMSTableDirective, QMSTableModule, QMSTableRowDirective, QMSTextBlockDirective, QMSTextBlockLine, QMSTextTruncateDirective, QMSThemingLibraryService, QMSToolTipComponent, QMSToolTipRendererDirective, QMSTooltipImageDirective, QMSTooltipModule, QMSTreeModule, QMSUploadFileErrorDialog, QMSUploadFileErrorDialogModule, QMSUploadingFileGuard, QMS_THEMES, QMS_THEME_DEFAULT, QmsAngularComponent, QmsAngularModule, QmsAngularService, QmsAppBarComponent, QmsAppBarModule, QmsBadgesComponent, QmsBadgesModule, QmsBannerButtonType, QmsBannerComponent, QmsBannerConfirmButton, QmsBannerConfirmButtonClick, QmsBannerConfirmComponent, QmsBannerConfirmModule, QmsBannerContent, QmsBannerLoadingComponent, QmsBannerLoadingModule, QmsBannerModule, QmsPaginatorModule, QmsReportContentPortraitComponent, QmsReportCoverPortraitComponent, QmsReportModule, QmsStatusDropdownComponent, QmsStatusDropdownModule, QmsStatusDropdownOption, QmsStatusDropdownType, QmsStepperComponent, QmsStepperModule, REGIONAL_FOLDER_ICON, REGIONAL_FOLDER_OUTLINED_ICON, RISK_ICON, RelatedConst, RelatedContentComponent, RelatedItemType, RelatedListComponent, RelatedPopupComponent, Result, RiskAnalysis, RiskAnalysisComponent, RiskDanger, RiskListComponent, RiskResult, RiskResultComponent, SaveTemplateComponent, ScrollToSelectedDirective, SelectConst, SelectDialog, SelectIncludeChildrenPopUpComponent, SelectOneDialog, SelectOnePopupData, SelectOption, SelectOptionTypes, SelectPopupData, SelectProcessDocumentPopupComponent, SelectProcessDocumentPopupData, SelectedOption, SelectedProcessDocumentItem, SharedModule, ShowHideSearchResultConst, SideNav, SideNavItem, SidenavComponent, TargetType, TargetTypeName, TranslateLibraryService, TreeComponent, TreeConfig, TreeFlatNode, TreeModel, TreeNode$1 as TreeNode, UploadErrorData, app, basic, en, erd, fsa, mixinColor, no, notExceedSize, org, pn, requiredFileType, standard, uml, ɵ2, SharedMaterialModule as ɵa, QMSCKEditorTreeService as ɵb, QMSCKEditorTemplateComponent as ɵc, LinkAttachmentComponent as ɵd, QMSCKEditorTooltipComponent as ɵe, QMSCKEditorTooltip as ɵf, QMSCKEditorImageMapComponent as ɵg, QMSCKEditorImageMap as ɵh, QMSCKEditorUploadService as ɵi, QMSCKEditorBpmnData as ɵj, QMSCKEditorAboutComponent as ɵk, QMSCKEditorFlowchartComponent as ɵl };
 //# sourceMappingURL=qms-angular.js.map