qms-angular 1.0.94 → 1.0.97

package/bundles/qms-angular.umd.js

@@ -94,6 +94,8 @@
         "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"
         },
@@ -455,6 +457,8 @@
         "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"
         },
@@ -1133,23 +1137,23 @@
         { type: i0.ElementRef }
     ]; };
 
-    var QMSChipInputSelectDropWDownDirective = /** @class */ (function () {
-        function QMSChipInputSelectDropWDownDirective(ele) {
+    var QMSChipInputSelectDropDownDirective = /** @class */ (function () {
+        function QMSChipInputSelectDropDownDirective(ele) {
             this.ele = ele;
         }
-        QMSChipInputSelectDropWDownDirective.prototype.ngOnInit = function () {
+        QMSChipInputSelectDropDownDirective.prototype.ngOnInit = function () {
             if (this.ele) {
                 this.ele.nativeElement.classList.add('qms-chip-input-dropdown');
             }
         };
-        return QMSChipInputSelectDropWDownDirective;
+        return QMSChipInputSelectDropDownDirective;
     }());
-    QMSChipInputSelectDropWDownDirective.decorators = [
+    QMSChipInputSelectDropDownDirective.decorators = [
         { type: i0.Directive, args: [{
                     selector: '[qms-chip-input-dropdown]',
                 },] }
     ];
-    QMSChipInputSelectDropWDownDirective.ctorParameters = function () { return [
+    QMSChipInputSelectDropDownDirective.ctorParameters = function () { return [
         { type: i0.ElementRef }
     ]; };
 
@@ -3762,7 +3766,7 @@
                         DateFormatPipe,
                         QMSChipInputDirective,
                         QMSChipInputSelectFieldDirective,
-                        QMSChipInputSelectDropWDownDirective,
+                        QMSChipInputSelectDropDownDirective,
                         QMSChipInputSelectTriggerDirective,
                         QMSChipInputChipListDirective,
                         ScrollToSelectedDirective,
@@ -3814,7 +3818,7 @@
                         DateFormatPipe,
                         QMSChipInputDirective,
                         QMSChipInputSelectFieldDirective,
-                        QMSChipInputSelectDropWDownDirective,
+                        QMSChipInputSelectDropDownDirective,
                         QMSChipInputSelectTriggerDirective,
                         QMSChipInputChipListDirective,
                         ScrollToSelectedDirective,
@@ -3842,6 +3846,86 @@
                 },] }
     ];
 
+    exports.FileType = void 0;
+    (function (FileType) {
+        FileType["Component"] = "Component";
+        FileType["Module"] = "Module";
+        FileType["Css"] = "CSS";
+        FileType["Html"] = "Html";
+    })(exports.FileType || (exports.FileType = {}));
+    var MfeUtil = /** @class */ (function () {
+        function MfeUtil() {
+            var _this = this;
+            // holds list of loaded script
+            this.fileMap = {};
+            this.findExposedModule = function (uniqueName, exposedFile) { return __awaiter(_this, void 0, void 0, function () {
+                var Module, container, factory;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: 
+                        // Initializes the shared scope. Fills it with known provided modules from this build and all remotes
+                        return [4 /*yield*/, __webpack_init_sharing__('default')];
+                        case 1:
+                            // Initializes the shared scope. Fills it with known provided modules from this build and all remotes
+                            _a.sent();
+                            container = window[uniqueName];
+                            // Initialize the container, it may provide shared modules
+                            return [4 /*yield*/, container.init(__webpack_share_scopes__.default)];
+                        case 2:
+                            // Initialize the container, it may provide shared modules
+                            _a.sent();
+                            return [4 /*yield*/, container.get(exposedFile)];
+                        case 3:
+                            factory = _a.sent();
+                            Module = factory();
+                            return [2 /*return*/, Module];
+                    }
+                });
+            }); };
+        }
+        MfeUtil.prototype.loadRemoteFile = function (loadRemoteModuleOptions) {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, this.loadRemoteEntry(loadRemoteModuleOptions.remoteEntry)];
+                        case 1:
+                            _a.sent();
+                            return [4 /*yield*/, this.findExposedModule(loadRemoteModuleOptions.remoteName, loadRemoteModuleOptions.exposedFile)];
+                        case 2: return [2 /*return*/, _a.sent()];
+                    }
+                });
+            });
+        };
+        MfeUtil.prototype.loadRemoteEntry = function (remoteEntry) {
+            return __awaiter(this, void 0, void 0, function () {
+                var _this = this;
+                return __generator(this, function (_a) {
+                    return [2 /*return*/, new Promise(function (resolve, reject) {
+                            var scriptId = "" + remoteEntry.substring(remoteEntry.lastIndexOf('/') + 1);
+                            var getScript = document.getElementById(scriptId);
+                            if (getScript || _this.fileMap[remoteEntry]) {
+                                resolve();
+                                return;
+                            }
+                            var script = document.createElement("script");
+                            script.src = remoteEntry;
+                            script.id = scriptId;
+                            script.onerror = function (error) {
+                                console.error(error, 'unable to load remote entry, show error or something');
+                                reject();
+                            };
+                            script.onload = function () {
+                                _this.fileMap[remoteEntry] = true;
+                                resolve(); // window is the global namespace
+                            };
+                            document.body.append(script);
+                        })];
+                });
+            });
+        };
+        return MfeUtil;
+    }());
+
     var QMSRangeSliderLockUpDirective = /** @class */ (function () {
         function QMSRangeSliderLockUpDirective(ele) {
             this.ele = ele;
@@ -4591,11 +4675,9 @@
             this.showTooltipChange = new i0.EventEmitter();
         }
         QMSBreadcrumbItemDirective.prototype.ngAfterViewInit = function () {
-            if (this.breadcrumbItemText && this.showTooltip) {
-                this.breadcrumbItemText.nativeElement.classList.add('qms-breadcrumb-item-text');
-                if (this.breadcrumbItemText.nativeElement.innerText.length > 30) {
-                    this.showTooltipChange.emit(true);
-                }
+            if (this.breadcrumbItemText && this.showTooltip && this.breadcrumbItemText.nativeElement.innerText.length > 30) {
+                this.breadcrumbItemText.nativeElement.classList.add('qms-breadcrumb-item-overflow');
+                this.showTooltipChange.emit(true);
             }
         };
         QMSBreadcrumbItemDirective.prototype.ngOnChanges = function () {
@@ -4632,6 +4714,13 @@
         breadcrumbItemText: [{ type: i0.ContentChild, args: ["breadcrumbItemText", { static: false },] }]
     };
 
+    exports.BreadcrumbType = void 0;
+    (function (BreadcrumbType) {
+        BreadcrumbType["normal"] = "normal";
+        BreadcrumbType["table"] = "table";
+        BreadcrumbType["mobile"] = "mobile";
+    })(exports.BreadcrumbType || (exports.BreadcrumbType = {}));
+
     var DropdownBreadCrumbNodeWidth;
     (function (DropdownBreadCrumbNodeWidth) {
         DropdownBreadCrumbNodeWidth[DropdownBreadCrumbNodeWidth["NORMAL"] = 66] = "NORMAL";
@@ -4639,23 +4728,45 @@
     })(DropdownBreadCrumbNodeWidth || (DropdownBreadCrumbNodeWidth = {}));
 
     var QMSBreadcrumb = /** @class */ (function () {
-        function QMSBreadcrumb(ele, iconRegistry, cdRef, sanitizer) {
+        function QMSBreadcrumb(ele, iconRegistry, cdRef, sanitizer, trans) {
             this.ele = ele;
             this.iconRegistry = iconRegistry;
             this.cdRef = cdRef;
             this.sanitizer = sanitizer;
+            this.trans = trans;
+            this.type = exports.BreadcrumbType.normal;
             this.numDisplayItem = 0;
             this.onlyItem = false;
             this.disabledLastItem = true;
             this.onItemClick = new i0.EventEmitter();
-            this.dropdownNodes = [];
             this.isOverflow = false;
+            this.dropdownNodes = [];
+            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));
         }
+        QMSBreadcrumb.prototype.ngOnChanges = function (changes) {
+            if (changes.nodes && this.breadCrumbNodes && JSON.stringify(changes.nodes.currentValue) !== JSON.stringify(changes.nodes.previousValue)) {
+                this.nodes = __spreadArray([], __read(changes.nodes.currentValue));
+                this.initBreadCrumb();
+                this.buildBreadcrumb();
+            }
+        };
+        QMSBreadcrumb.prototype.ngOnInit = function () {
+            var _this = this;
+            this.trans.getLanguageSubject$.pipe().subscribe(function (res) {
+                if (res) {
+                    _this.LANG = _this.trans.getObjectLang(res);
+                }
+            });
+            this.isMobileType = (this.type == exports.BreadcrumbType.mobile);
+            this.itemIconType = ItemIconType;
+            this.initBreadCrumb();
+        };
         QMSBreadcrumb.prototype.ngAfterViewInit = function () {
             this.buildBreadcrumb();
+            this.cdRef.detectChanges();
         };
         QMSBreadcrumb.prototype.checkOverflow = function (width) {
             var _this = this;
@@ -4682,7 +4793,8 @@
                 nodeWidths.shift();
                 nodeWidths.forEach(function (eleWidth, index) {
                     if (currentWidth > screenWidth_1) {
-                        _this.itemNodes[index].isShow = index == 0 ? true : false;
+                        _this.itemNodes[index].isShow = index == nodeWidths.length - 1 ? true : false;
+                        _this.itemNodes[index].isOverflow = index == nodeWidths.length - 1 ? false : _this.itemNodes[index].isOverflow;
                         _this.dropdownNodes.push(_this.itemNodes[index]);
                         currentWidth -= (eleWidth);
                     }
@@ -4690,17 +4802,6 @@
                 this.dropdownNodes = this.dropdownNodes.reverse();
             }
         };
-        QMSBreadcrumb.prototype.ngOnChanges = function (changes) {
-            if (changes.nodes && this.breadCrumbNodes && JSON.stringify(changes.nodes.currentValue) !== JSON.stringify(changes.nodes.previousValue)) {
-                this.nodes = __spreadArray([], __read(changes.nodes.currentValue));
-                this.initBreadCrumb();
-                this.buildBreadcrumb();
-            }
-        };
-        QMSBreadcrumb.prototype.ngOnInit = function () {
-            this.itemIconType = ItemIconType;
-            this.initBreadCrumb();
-        };
         QMSBreadcrumb.prototype.initBreadCrumb = function () {
             var _this = this;
             if (this.nodes && this.nodes.length > 0) {
@@ -4714,8 +4815,9 @@
                     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 ? __spreadArray([], __read(this.nodes)) : [];
                 }
             }
             if (this.type === 'table') {
@@ -4786,16 +4888,17 @@
     QMSBreadcrumb.decorators = [
         { type: i0.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        [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        [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        [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: i0.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-text{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{max-width:200px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-size:12px;font-weight:400;color:rgba(0,0,0,.6)}.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 = function () { return [
         { type: i0.ElementRef },
         { type: icon.MatIconRegistry },
         { type: i0.ChangeDetectorRef },
-        { type: platformBrowser.DomSanitizer }
+        { type: platformBrowser.DomSanitizer },
+        { type: TranslateLibraryService }
     ]; };
     QMSBreadcrumb.propDecorators = {
         nodes: [{ type: i0.Input }],
@@ -4840,8 +4943,10 @@
                         core.MatCommonModule,
                         icon.MatIconModule,
                         QmsAngularModule,
+                        QMSListModule,
                         QMSButtonModule,
-                        menu.MatMenuModule
+                        menu.MatMenuModule,
+                        sidenav.MatSidenavModule
                     ],
                     exports: [
                         core.MatCommonModule,
@@ -6006,9 +6111,9 @@
     RelatedListComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'qms-related-list',
-                    template: "<div class=\"container list-related\">\r\n  <div class=\"list-related__title\">\r\n    <strong>{{ title }}</strong>\r\n  </div>\r\n  <div\r\n    class=\"list-related__body\"\r\n    *ngFor=\"let item of relatedData; let i = index\"\r\n  >\r\n    <div class=\"list-related__body-parent\">\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(item)\"\r\n        ></mat-icon>\r\n        <div qms-list-header>\r\n          <div\r\n            qms-line\r\n            type=\"subtitle\"\r\n            class=\"search__option-name\"\r\n            (click)=\"onItemClick(item)\"\r\n          >\r\n            <div class=\"caption\" *ngIf=\"canShowParent(item)\">\r\n              {{ item?.parentName }}\r\n            </div>\r\n            <span class=\"cursor\">{{ item.itemName }}</span>\r\n          </div>\r\n          <div\r\n            class=\"caption\"\r\n            *ngIf=\"item.breadcumbs && item.breadcumbs.length\"\r\n          >\r\n            <qms-breadcrumb\r\n              class=\"breadcrumb-containe\"\r\n              type=\"table\"\r\n              numDisplayItem=\"1\"\r\n              [nodes]=\"item.breadcumbs\"\r\n            >\r\n            </qms-breadcrumb>\r\n          </div>\r\n        </div>\r\n        <div qms-line color=\"default-subtitle\" *ngIf=\"item?.displayId\">\r\n          <ng-container *ngIf=\"item?.displayId\">\r\n            <span class=\"material-icons-outlined\"> local_offer </span> ID:\r\n            {{ item?.displayId }}\r\n          </ng-container>\r\n          <ng-container *ngIf=\"item.statusName\">\r\n            {{ getItemStatus(item) }}</ng-container\r\n          >\r\n        </div>\r\n      </qms-list-item>\r\n      <div class=\"block\" *ngIf=\"!isNotEditedItem\">\r\n        <button qms-btn-icon color=\"light\" mode=\"dark\" (click)=\"removeItem(i)\">\r\n          <mat-icon>close</mat-icon>\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n",
+                    template: "<div class=\"container list-related\">\r\n  <div class=\"list-related__title\">\r\n    <strong>{{ title }}</strong>\r\n  </div>\r\n  <div\r\n    class=\"list-related__body\"\r\n    *ngFor=\"let item of relatedData; let i = index\"\r\n  >\r\n    <div class=\"list-related__body-parent\">\r\n      <qms-list-item type=\"image-square\">\r\n        <mat-icon\r\n          type=\"image-square\"\r\n          leading-icon\r\n          [svgIcon]=\"getNodeIcon(item)\"\r\n        ></mat-icon>\r\n        <div qms-list-header>\r\n          <div\r\n            qms-line\r\n            (click)=\"onItemClick(item)\"\r\n            type=\"caption\"\r\n            *ngIf=\"canShowParent(item)\"\r\n          >\r\n            {{ item?.parentName }}\r\n          </div>\r\n          <div qms-line (click)=\"onItemClick(item)\" type=\"subtitle\">\r\n            {{ item.itemName }}\r\n          </div>\r\n        </div>\r\n        <div qms-line *ngIf=\"item.breadcumbs && item.breadcumbs.length\">\r\n          <qms-breadcrumb\r\n            class=\"breadcrumb-container\"\r\n            type=\"table\"\r\n            numDisplayItem=\"1\"\r\n            [nodes]=\"item.breadcumbs\"\r\n          >\r\n          </qms-breadcrumb>\r\n        </div>\r\n        <div qms-line color=\"default-subtitle\" *ngIf=\"item?.displayId\">\r\n          <ng-container *ngIf=\"item?.displayId\">\r\n            <span class=\"material-icons-outlined\"> local_offer </span> ID:\r\n            {{ item?.displayId }}\r\n          </ng-container>\r\n          <ng-container *ngIf=\"item.statusName\">\r\n            {{ getItemStatus(item) }}\r\n          </ng-container>\r\n        </div>\r\n        <button\r\n          qms-btn-icon\r\n          color=\"light\"\r\n          mode=\"dark\"\r\n          *ngIf=\"!isNotEditedItem\"\r\n          (click)=\"removeItem(i)\"\r\n        >\r\n          <mat-icon>close</mat-icon>\r\n        </button>\r\n      </qms-list-item>\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(item)\"\r\n        ></mat-icon>\r\n        <div qms-list-header>\r\n          <div\r\n            qms-line\r\n            type=\"subtitle\"\r\n            class=\"search__option-name\"\r\n            (click)=\"onItemClick(item)\"\r\n          >\r\n            <div class=\"caption\" *ngIf=\"canShowParent(item)\">\r\n              {{ item?.parentName }}\r\n            </div>\r\n            <span class=\"cursor\">{{ item.itemName }}</span>\r\n          </div>\r\n          <div\r\n            class=\"caption\"\r\n            *ngIf=\"item.breadcumbs && item.breadcumbs.length\"\r\n          >\r\n            <qms-breadcrumb\r\n              class=\"breadcrumb-containe\"\r\n              type=\"table\"\r\n              numDisplayItem=\"1\"\r\n              [nodes]=\"item.breadcumbs\"\r\n            >\r\n            </qms-breadcrumb>\r\n          </div>\r\n        </div>\r\n        <div qms-line color=\"default-subtitle\" *ngIf=\"item?.displayId\">\r\n          <ng-container *ngIf=\"item?.displayId\">\r\n            <span class=\"material-icons-outlined\"> local_offer </span> ID:\r\n            {{ item?.displayId }}\r\n          </ng-container>\r\n          <ng-container *ngIf=\"item.statusName\">\r\n            {{ getItemStatus(item) }}\r\n            </ng-container>\r\n        </div>\r\n      </qms-list-item>\r\n      <div class=\"block\" *ngIf=\"!isNotEditedItem\">\r\n        <button qms-btn-icon color=\"light\" mode=\"dark\" (click)=\"removeItem(i)\">\r\n          <mat-icon>close</mat-icon>\r\n        </button>\r\n      </div> -->\r\n    </div>\r\n  </div>\r\n</div>\r\n",
                     encapsulation: i0.ViewEncapsulation.None,
-                    styles: [".list-related{font-family:Open Sans;font-style:normal;font-weight:400;color:var(--default-color)}.list-related .list-related__title{font-weight:600;font-size:.875rem;line-height:22px;margin-bottom:1rem}.list-related .list-related__body .list-related__body-parent{min-height:48px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ddd}.list-related .list-related__body .list-related__body-parent .qms-list-item.mat-2-line.image-item{height:auto}.list-related .list-related__body .list-related__body-parent .qms-list-item.image-item .qms-list-item-content{margin:0}.list-related .list-related__body .list-related__body-parent .wrap-image.image-square,.list-related .list-related__body .list-related__body-parent .wrap-image.image-square img{background:transparent;margin:auto;height:24px;width:24px}.list-related .list-related__body .list-related__body-parent .qms-list-item.image-item .qms-list-text,.list-related .list-related__body .list-related__body-parent .qms-list-item.image-item .trailing-box{margin-left:1.5rem;border-bottom:none;padding-bottom:7px;padding-top:7px}.list-related .list-related__body .list-related__body-parent .qms-list-item.image-item .qms-list-text .material-icons-outlined,.list-related .list-related__body .list-related__body-parent .qms-list-item.image-item .trailing-box .material-icons-outlined{font-size:13px}.list-related .list-related__body .list-related__body-parent .breadcrumb-containe .qms-breadcrumb-item .mat-icon{font-size:16px!important;padding-bottom:1px}.list-related .list-related__body .list-related__body-parent .block{font-weight:400;font-size:1rem;line-height:28px;display:flex;align-items:center}.list-related .list-related__body .list-related__body-parent .block .title{margin-left:1.5rem;padding-top:5px;padding-bottom:5px}.list-related .list-related__body .list-related__body-parent .block .title .caption{color:rgba(0,0,0,.6);font-size:.75rem;line-height:22px}.list-related .list-related__body .list-related__body-parent .block mat-icon{color:rgba(0,0,0,.6);padding:0}.list-related .list-related__body .list-related__body-parent .block button.qms-btn-icon{width:40px;height:40px;line-height:40px}.list-related .list-related__body .list-related__body-child{font-weight:400;font-size:.875rem;line-height:22px}.list-related .list-related__body .list-related__body-child .default{min-height:48px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ddd}.list-related .list-related__body .list-related__body-child .default .title{margin-left:3rem}.list-related .list-related__body .list-related__body-child .default .group-button{margin-right:2rem;display:flex}.list-related .list-related__body .remain{font-weight:600;font-size:.875rem;line-height:22px;display:flex;align-items:center;justify-content:space-between;background-color:#fafafa;color:var(--primary);min-height:48px;border-bottom:1px solid #ddd}.list-related .list-related__body .remain .title{margin-left:3rem}.label-green,.label-red,.label-yellow{font-family:Open Sans;font-style:normal;font-weight:600;display:inline-block;text-align:center;margin-left:1rem;width:24px;height:24px;font-size:.75rem;border-radius:1px}.label-red{background-color:var(--secondary);color:#fff}.label-yellow{background-color:var(--risk-yellow);color:rgba(0,0,0,.87)}.label-green{background-color:var(--risk-green);color:#fff}.cursor{cursor:pointer}"]
+                    styles: [".list-related{font-family:Open Sans;font-style:normal;font-weight:400;color:var(--default-color)}.list-related .list-related__title{font-weight:600;font-size:.875rem;line-height:22px;margin-bottom:1rem}.list-related .list-related__body .list-related__body-parent{min-height:48px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ddd}.list-related .list-related__body .list-related__body-parent .qms-list-item{height:unset!important}.list-related .list-related__body .list-related__body-parent .qms-list-item.mat-2-line.image-item{height:auto}.list-related .list-related__body .list-related__body-parent .qms-list-item.image-item .qms-list-item-content{margin:0}.list-related .list-related__body .list-related__body-parent .wrap-image.image-square,.list-related .list-related__body .list-related__body-parent .wrap-image.image-square img{background:transparent;margin:auto;height:24px;width:24px}.list-related .list-related__body .list-related__body-parent .qms-list-item.image-item .qms-list-text,.list-related .list-related__body .list-related__body-parent .qms-list-item.image-item .trailing-box{margin-left:1.5rem;border-bottom:none;padding-bottom:7px;padding-top:7px}.list-related .list-related__body .list-related__body-parent .qms-list-item.image-item .qms-list-text .material-icons-outlined,.list-related .list-related__body .list-related__body-parent .qms-list-item.image-item .trailing-box .material-icons-outlined{font-size:13px}.list-related .list-related__body .list-related__body-parent .block{font-weight:400;font-size:1rem;line-height:28px;display:flex;align-items:center}.list-related .list-related__body .list-related__body-parent .block .title{margin-left:1.5rem;padding-top:5px;padding-bottom:5px}.list-related .list-related__body .list-related__body-parent .block .title .caption{color:rgba(0,0,0,.6);font-size:.75rem;line-height:22px}.list-related .list-related__body .list-related__body-parent .block mat-icon{color:rgba(0,0,0,.6);padding:0}.list-related .list-related__body .list-related__body-parent .block button.qms-btn-icon{width:40px;height:40px;line-height:40px}.list-related .list-related__body .list-related__body-child{font-weight:400;font-size:.875rem;line-height:22px}.list-related .list-related__body .list-related__body-child .default{min-height:48px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ddd}.list-related .list-related__body .list-related__body-child .default .title{margin-left:3rem}.list-related .list-related__body .list-related__body-child .default .group-button{margin-right:2rem;display:flex}.list-related .list-related__body .remain{font-weight:600;font-size:.875rem;line-height:22px;display:flex;align-items:center;justify-content:space-between;background-color:#fafafa;color:var(--primary);min-height:48px;border-bottom:1px solid #ddd}.list-related .list-related__body .remain .title{margin-left:3rem}.list-related .list-related__body .qms-line{display:flex;align-items:center}.list-related .list-related__body .breadcrumb-container .qms-breadcrumb-item{cursor:inherit;line-height:16px;font-size:.75rem;color:rgba(0,0,0,.6);font-weight:400;line-height:22px}.list-related .list-related__body .trailing-box{display:flex;align-items:center}.list-related .list-related__body .trailing-box button{height:24px;width:24px;line-height:24px}.label-green,.label-red,.label-yellow{font-family:Open Sans;font-style:normal;font-weight:600;display:inline-block;text-align:center;margin-left:1rem;width:24px;height:24px;font-size:.75rem;border-radius:1px}.label-red{background-color:var(--secondary);color:#fff}.label-yellow{background-color:var(--risk-yellow);color:rgba(0,0,0,.87)}.label-green{background-color:var(--risk-green);color:#fff}.cursor{cursor:pointer}"]
                 },] }
     ];
     RelatedListComponent.ctorParameters = function () { return [
@@ -25235,31 +25340,14 @@
             });
         };
         QmsReportCoverPortraitComponent.prototype.ngAfterViewInit = function () {
-            this.resizeTitle();
-        };
-        QmsReportCoverPortraitComponent.prototype.resizeTitle = function () {
-            var _this = this;
-            var initialFontSize = 15;
-            this.renderer.setStyle(this.contentTitle.nativeElement, 'font-size', initialFontSize + 'px');
-            this.renderer.setStyle(this.contentTitle.nativeElement, 'line-height', initialFontSize + 20 + 'px');
-            var interval = setInterval(function () {
-                if (_this.contentTitle.nativeElement.offsetHeight < 110) {
-                    initialFontSize += 1;
-                    _this.renderer.setStyle(_this.contentTitle.nativeElement, 'font-size', initialFontSize + 'px');
-                    _this.renderer.setStyle(_this.contentTitle.nativeElement, 'line-height', initialFontSize + 20 + 'px');
-                }
-                else {
-                    clearInterval(interval);
-                }
-            }, 25);
         };
         return QmsReportCoverPortraitComponent;
     }());
     QmsReportCoverPortraitComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'qms-report-cover-portrait',
-                    template: "<div class=\"qms-report-cover-portrait-container\">\r\n  <div class=\"cover-header\">\r\n    <div class=\"robin-container\">\r\n      <img [src]=\"logo\" />\r\n    </div>\r\n  </div>\r\n  <div class=\"cover-content\">\r\n    <div class=\"cover-title\">\r\n      <div class=\"report-module-name\">\r\n        <span class=\"module-name\">{{LANG.REPORT_FOR}} {{moduleName}}</span>\r\n      </div>\r\n      <div class=\"report-title\">\r\n        <span class=\"title\" #contentTitle>{{title}}</span>\r\n      </div>\r\n    </div>\r\n    <div class=\"cover-information\" *ngIf=\"infoReport && infoReport.length\">\r\n      <div class=\"content-item\" *ngFor=\"let item of infoReport\" [class.underline]=\"item.underline\">\r\n        <span class=\"title\">{{item.title}} </span> <span class=\"content\">{{item.content}}</span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n",
-                    styles: [".qms-report-cover-portrait-container{background-color:#fff}.qms-report-cover-portrait-container .cover-header{height:75px;display:flex;justify-content:flex-end;padding:25px 30px}.qms-report-cover-portrait-container .cover-header .robin-container{display:flex}.qms-report-cover-portrait-container .cover-content{margin-top:125px;margin-bottom:50px;padding:0 50px}.qms-report-cover-portrait-container .cover-content .report-module-name .module-name{max-width:100%;font-family:Open Sans;font-weight:400;font-size:14px;line-height:20px;word-break:break-word}.qms-report-cover-portrait-container .cover-content .report-title{height:137px;margin-bottom:15px}.qms-report-cover-portrait-container .cover-content .report-title .title{max-width:100%;font-weight:600;font-size:44px;line-height:52px;font-family:Raleway;word-break:break-word}.qms-report-cover-portrait-container .cover-content .cover-information{padding:24px;border:1px solid rgba(0,0,0,.24);border-radius:4px}.qms-report-cover-portrait-container .cover-content .cover-information .content-item{font-family:Open Sans;font-size:10px;line-height:16px;margin-bottom:16px}.qms-report-cover-portrait-container .cover-content .cover-information .content-item .title{font-weight:600}.qms-report-cover-portrait-container .cover-content .cover-information .content-item .content{font-weight:400}.qms-report-cover-portrait-container .cover-content .cover-information .underline{padding-bottom:16px;border-bottom:1px solid rgba(0,0,0,.6)}"]
+                    template: "<div class=\"qms-report-cover-portrait-container\">\r\n  <div class=\"cover-content\">\r\n    <div class=\"cover-title\">\r\n      <div class=\"report-module-name\">\r\n        <span class=\"module-name\">{{LANG.REPORT_FOR}} {{moduleName}}</span>\r\n      </div>\r\n      <div class=\"report-title\">\r\n        <span class=\"title\" #contentTitle>{{title}}</span>\r\n      </div>\r\n    </div>\r\n    <div class=\"cover-information\" *ngIf=\"infoReport && infoReport.length\">\r\n      <div class=\"content-item\" *ngFor=\"let item of infoReport\" [class.underline]=\"item.underline\">\r\n        <span class=\"title\">{{item.title}} </span> <span class=\"content\">{{item.content}}</span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>",
+                    styles: [".qms-report-cover-portrait-container{background-color:#fff}.qms-report-cover-portrait-container .cover-content{margin-bottom:50px}.qms-report-cover-portrait-container .cover-content .cover-title{display:flex;height:450px;flex-direction:column;justify-content:flex-end}.qms-report-cover-portrait-container .cover-content .cover-title .report-module-name .module-name{max-width:100%;font-family:Open Sans;font-weight:400;font-size:14pt;line-height:20pt;word-break:break-word}.qms-report-cover-portrait-container .cover-content .cover-title .report-title{margin-bottom:32px}.qms-report-cover-portrait-container .cover-content .cover-title .report-title .title{max-width:100%;font-weight:600;font-size:33pt;line-height:39pt;font-family:Open Sans;word-break:break-word}.qms-report-cover-portrait-container .cover-content .cover-information{padding:24px;border:1px solid rgba(0,0,0,.24);border-radius:4px}.qms-report-cover-portrait-container .cover-content .cover-information .content-item{font-family:Open Sans;font-size:10pt;line-height:16pt;margin-bottom:16px}.qms-report-cover-portrait-container .cover-content .cover-information .content-item .title{font-weight:600}.qms-report-cover-portrait-container .cover-content .cover-information .content-item .content{font-weight:400}.qms-report-cover-portrait-container .cover-content .cover-information .content-item:last-child{margin-bottom:0}.qms-report-cover-portrait-container .cover-content .cover-information .underline{padding-bottom:16px;border-bottom:1px solid rgba(0,0,0,.6)}"]
                 },] }
     ];
     QmsReportCoverPortraitComponent.ctorParameters = function () { return [
@@ -25268,7 +25356,6 @@
     ]; };
     QmsReportCoverPortraitComponent.propDecorators = {
         infoReport: [{ type: i0.Input }],
-        logo: [{ type: i0.Input }],
         moduleName: [{ type: i0.Input }],
         title: [{ type: i0.Input }],
         contentTitle: [{ type: i0.ViewChild, args: ['contentTitle',] }]
@@ -29278,6 +29365,7 @@
     exports.LOCAL_FOLDER_ICON = LOCAL_FOLDER_ICON;
     exports.LOCAL_FOLDER_OUTLINED_ICON = LOCAL_FOLDER_OUTLINED_ICON;
     exports.MarginDirective = MarginDirective;
+    exports.MfeUtil = MfeUtil;
     exports.NORMAL_FOLDER_ICON = NORMAL_FOLDER_ICON;
     exports.NORMAL_FOLDER_OUTLINED_ICON = NORMAL_FOLDER_OUTLINED_ICON;
     exports.NavigatorElementView = NavigatorElementView;
@@ -29333,7 +29421,7 @@
     exports.QMSChipBodyDirective = QMSChipBodyDirective;
     exports.QMSChipInputChipListDirective = QMSChipInputChipListDirective;
     exports.QMSChipInputDirective = QMSChipInputDirective;
-    exports.QMSChipInputSelectDropWDownDirective = QMSChipInputSelectDropWDownDirective;
+    exports.QMSChipInputSelectDropDownDirective = QMSChipInputSelectDropDownDirective;
     exports.QMSChipInputSelectFieldDirective = QMSChipInputSelectFieldDirective;
     exports.QMSChipInputSelectTriggerDirective = QMSChipInputSelectTriggerDirective;
     exports.QMSCollapseGroupDirective = QMSCollapseGroupDirective;