raise-common-lib 0.0.15 → 0.0.20

package/fesm2015/raise-common-lib.js

@@ -1,8 +1,10 @@
-import { EventEmitter, Component, ChangeDetectorRef, ViewChild, Input, Output, ContentChild, Injectable, ɵɵdefineInjectable, Inject, ɵɵinject, NgModule } from '@angular/core';
+import { EventEmitter, Component, ChangeDetectorRef, ViewChild, Input, Output, ContentChild, TemplateRef, Injectable, ɵɵdefineInjectable, HostListener, Inject, ɵɵinject, NgModule } from '@angular/core';
 import { GridModule, PagerModule, GridAllModule, PageService, SortService, FilterService, ExcelExportService, EditService, ResizeService, ToolbarService, ColumnChooserService, AggregateService, ColumnMenuService, DetailRowService, SelectionService, GroupService } from '@syncfusion/ej2-angular-grids';
 import { debounce } from 'lodash';
-import { Router } from '@angular/router';
-import { SvgIconRegistryService, AngularSvgIconModule } from 'angular-svg-icon';
+import { NavigationEnd, Router, ActivatedRoute } from '@angular/router';
+import { filter } from 'rxjs/operators';
+import { MatIconRegistry, MatIconModule } from '@angular/material/icon';
+import { DomSanitizer } from '@angular/platform-browser';
 import { MAT_SNACK_BAR_DATA, MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
 import { MAT_DIALOG_DATA, MatDialogRef, MatDialog, MatDialogModule } from '@angular/material/dialog';
 import { ReactiveFormsModule, FormsModule } from '@angular/forms';
@@ -17,9 +19,9 @@ import { DropDownListModule, DropDownTreeModule, MultiSelectAllModule, AutoCompl
 import { PivotViewAllModule, PivotFieldListAllModule } from '@syncfusion/ej2-angular-pivotview';
 import { ChartAllModule, AccumulationChartAllModule, RangeNavigatorAllModule, AccumulationChartModule, PieSeriesService, AccumulationLegendService, AccumulationTooltipService, AccumulationAnnotationService, AccumulationDataLabelService } from '@syncfusion/ej2-angular-charts';
 import { DashboardLayoutModule } from '@syncfusion/ej2-angular-layouts';
-import { CarouselAllModule, ToolbarModule } from '@syncfusion/ej2-angular-navigations';
+import { CarouselAllModule, ToolbarModule, TabModule } from '@syncfusion/ej2-angular-navigations';
 import { PdfViewerModule, LinkAnnotationService, BookmarkViewService, MagnificationService, ThumbnailViewService, ToolbarService as ToolbarService$1, NavigationService, TextSearchService, TextSelectionService, PrintService } from '@syncfusion/ej2-angular-pdfviewer';
-import { DropDownButtonModule } from '@syncfusion/ej2-angular-splitbuttons';
+import { DropDownButtonModule, SplitButtonModule } from '@syncfusion/ej2-angular-splitbuttons';
 import { RichTextEditorAllModule, HtmlEditorService, ToolbarService as ToolbarService$2 } from '@syncfusion/ej2-angular-richtexteditor';
 
 /**
@@ -1031,10 +1033,10 @@ if (false) {
 
 /**
  * @fileoverview added by tsickle
- * Generated from: lib/layout/common-list/index.component.ts
+ * Generated from: lib/layout/page-list/index.component.ts
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
-class CommonListComponent {
+class RsPageListComponent {
     constructor() {
         this.customPageTitle = false;
         this.isInner = false;
@@ -1063,14 +1065,14 @@ class CommonListComponent {
         this.debouncedInput();
     }
 }
-CommonListComponent.decorators = [
+RsPageListComponent.decorators = [
     { type: Component, args: [{
-                selector: 'rs-common-list',
-                template: "<div class=\"rs-page-list-wrap\" [ngClass]=\"{ 'is-not-inner': !isInner }\">\r\n  <ng-container *ngIf=\"customPageTitle; else defaultTitle\">\r\n    <ng-content select=\"[titleSlot]\"></ng-content>\r\n  </ng-container>\r\n  <ng-template #defaultTitle>\r\n    <div class=\"rs-page-title\" *ngIf=\"pageTitle\">{{ pageTitle }}</div>\r\n  </ng-template>\r\n  <div class=\"rs-content-wrap\">\r\n    <ng-content select=\"[tabSlot]\"></ng-content>\r\n    <div class=\"rs-toolbar-wrap\">\r\n      <div class=\"rs-left-col\">\r\n        <ng-content select=\"[leftToolbarBtnSlot]\"></ng-content>\r\n      </div>\r\n      <div class=\"rs-right-col\">\r\n        <ng-content select=\"[rightToolbarBtnSlot]\"></ng-content>\r\n        <div class=\"rs-search-input\">\r\n          <ejs-textbox\r\n            type=\"text\"\r\n            class=\"e-input\"\r\n            [(ngModel)]=\"searchValue\"\r\n            (input)=\"onInput()\"\r\n            placeholder=\"Search all fields\"\r\n            [showClearButton]=\"true\"\r\n            autocomplete=\"off\"\r\n          ></ejs-textbox>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"rs-grid-wrap\">\r\n      <ng-content select=\"[gridSlot]\"></ng-content>\r\n    </div>\r\n  </div>\r\n</div>\r\n",
-                styles: [".rs-page-list-wrap{height:100%;display:flex;flex-direction:column;position:relative;margin:0 auto;max-width:1885px}.rs-page-list-wrap .rs-page-title{font-family:var(--rs-font-family);font-size:var(--rs-page-title-font-size);font-weight:700;text-align:left;color:var(--rs-page-title-color);display:flex;align-items:center;padding:16px 8px 12px 20px}.rs-page-list-wrap .rs-content-wrap{display:flex;flex-direction:column;flex:1;height:0}.rs-page-list-wrap .rs-content-wrap .rs-toolbar-wrap{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.rs-page-list-wrap .rs-content-wrap .rs-toolbar-wrap .rs-left-col,.rs-page-list-wrap .rs-content-wrap .rs-toolbar-wrap .rs-right-col{display:flex;gap:12px}.rs-page-list-wrap .rs-content-wrap .rs-toolbar-wrap .rs-left-col ::ng-deep .e-btn,.rs-page-list-wrap .rs-content-wrap .rs-toolbar-wrap .rs-right-col ::ng-deep .e-btn{height:28px}.rs-page-list-wrap .rs-content-wrap .rs-grid-wrap{flex:1;height:0}.rs-page-list-wrap.is-not-inner .rs-content-wrap{border-radius:15px;padding:12px 20px;background:#fff;border:1px solid var(--rs-border-color);box-shadow:0 0 4px 0 rgba(0,0,0,.1)}.rs-page-list-wrap .rs-search-input{width:240px}.rs-page-list-wrap .rs-search-input ::ng-deep .e-input-group{border-radius:14px!important}.rs-page-list-wrap .rs-search-input ::ng-deep .e-input-group.e-input-focus,.rs-page-list-wrap .rs-search-input ::ng-deep .e-input-group:hover{box-shadow:0 0 3px 0 rgba(31,123,255,.4)!important;border-color:var(--rs-input-hover-border-color)!important}.rs-page-list-wrap .rs-search-input ::ng-deep .e-input-group.e-input-focus input.e-input,.rs-page-list-wrap .rs-search-input ::ng-deep .e-input-group:hover input.e-input{box-shadow:none!important}.rs-page-list-wrap .rs-search-input ::ng-deep .e-input-group input.e-input{width:calc(100% - 50px);height:26px}.rs-page-list-wrap .rs-search-input ::ng-deep .e-input-group::before{content:\"\"!important;margin:6px 0 0 8px;display:block;width:16px;height:16px;background-image:url(/assets/img/search.svg);background-size:cover;background-position:center}"]
+                selector: 'rs-page-list',
+                template: "<div class=\"rs-page-list-wrap\" [ngClass]=\"{ 'is-not-inner': !isInner }\">\r\n  <ng-container *ngIf=\"customPageTitle; else defaultTitle\">\r\n    <ng-content select=\"[titleSlot]\"></ng-content>\r\n  </ng-container>\r\n  <ng-template #defaultTitle>\r\n    <div class=\"rs-page-title\" *ngIf=\"pageTitle\">{{ pageTitle }}</div>\r\n  </ng-template>\r\n  <div class=\"rs-content-wrap\">\r\n    <div class=\"rs-toolbar-wrap\">\r\n      <div class=\"rs-left-col\">\r\n        <ng-content select=\"[leftToolbarBtnSlot]\"></ng-content>\r\n      </div>\r\n      <div class=\"rs-right-col\">\r\n        <ng-content select=\"[rightToolbarBtnSlot]\"></ng-content>\r\n        <div class=\"rs-search-input\">\r\n          <ejs-textbox\r\n            type=\"text\"\r\n            class=\"e-input\"\r\n            [(ngModel)]=\"searchValue\"\r\n            (input)=\"onInput()\"\r\n            placeholder=\"Search all fields\"\r\n            [showClearButton]=\"true\"\r\n            autocomplete=\"off\"\r\n          ></ejs-textbox>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"rs-grid-wrap\">\r\n      <ng-content select=\"[gridSlot]\"></ng-content>\r\n    </div>\r\n  </div>\r\n</div>\r\n",
+                styles: [".rs-page-list-wrap{height:100%;display:flex;flex-direction:column;position:relative;margin:0 auto;max-width:1885px}.rs-page-list-wrap .rs-page-title{font-family:var(--rs-font-family);font-size:var(--rs-page-title-font-size);font-weight:700;text-align:left;color:var(--rs-page-title-color);display:flex;align-items:center;padding:16px 8px 12px 20px}.rs-page-list-wrap .rs-content-wrap{display:flex;flex-direction:column;flex:1;height:0}.rs-page-list-wrap .rs-content-wrap .rs-toolbar-wrap{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.rs-page-list-wrap .rs-content-wrap .rs-toolbar-wrap .rs-left-col,.rs-page-list-wrap .rs-content-wrap .rs-toolbar-wrap .rs-right-col{display:flex;gap:12px}.rs-page-list-wrap .rs-content-wrap .rs-toolbar-wrap .rs-left-col ::ng-deep .e-btn,.rs-page-list-wrap .rs-content-wrap .rs-toolbar-wrap .rs-right-col ::ng-deep .e-btn{height:28px}.rs-page-list-wrap .rs-content-wrap .rs-grid-wrap{flex:1;height:0}.rs-page-list-wrap.is-not-inner .rs-content-wrap{border-radius:15px;padding:12px 20px;background:#fff;border:1px solid var(--rs-border-color);box-shadow:0 0 4px 0 rgba(0,0,0,.1)}.rs-page-list-wrap .rs-search-input{width:240px}.rs-page-list-wrap .rs-search-input ::ng-deep .e-input-group{border-radius:14px!important}.rs-page-list-wrap .rs-search-input ::ng-deep .e-input-group.e-input-focus,.rs-page-list-wrap .rs-search-input ::ng-deep .e-input-group:hover{box-shadow:0 0 3px 0 rgba(31,123,255,.4)!important;border-color:var(--rs-input-hover-border-color)!important}.rs-page-list-wrap .rs-search-input ::ng-deep .e-input-group.e-input-focus input.e-input,.rs-page-list-wrap .rs-search-input ::ng-deep .e-input-group:hover input.e-input{box-shadow:none!important}.rs-page-list-wrap .rs-search-input ::ng-deep .e-input-group input.e-input{width:calc(100% - 50px);height:26px}.rs-page-list-wrap .rs-search-input ::ng-deep .e-input-group input.e-input:hover{box-shadow:none!important}.rs-page-list-wrap .rs-search-input ::ng-deep .e-input-group::before{content:\"\"!important;margin:6px 0 0 8px;display:block;width:16px;height:16px;background-image:url(/assets/img/search.svg);background-size:cover;background-position:center}"]
             }] }
 ];
-CommonListComponent.propDecorators = {
+RsPageListComponent.propDecorators = {
     gridContent: [{ type: ContentChild, args: [CommonGridComponent, { static: true },] }],
     pageTitle: [{ type: Input }],
     customPageTitle: [{ type: Input }],
@@ -1078,20 +1080,598 @@ CommonListComponent.propDecorators = {
 };
 if (false) {
     /** @type {?} */
-    CommonListComponent.prototype.gridContent;
+    RsPageListComponent.prototype.gridContent;
     /** @type {?} */
-    CommonListComponent.prototype.pageTitle;
+    RsPageListComponent.prototype.pageTitle;
     /** @type {?} */
-    CommonListComponent.prototype.customPageTitle;
+    RsPageListComponent.prototype.customPageTitle;
     /** @type {?} */
-    CommonListComponent.prototype.isInner;
+    RsPageListComponent.prototype.isInner;
     /**
      * @type {?}
      * @private
      */
-    CommonListComponent.prototype.debouncedInput;
+    RsPageListComponent.prototype.debouncedInput;
     /** @type {?} */
-    CommonListComponent.prototype.searchValue;
+    RsPageListComponent.prototype.searchValue;
+}
+
+/**
+ * @fileoverview added by tsickle
+ * Generated from: lib/layout/page-tab/index.component.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+class RsPageTabComponent {
+    constructor() {
+        this.customPageTitle = false;
+        this.tabList = [];
+        this.tabChange = new EventEmitter();
+        this.animation = {
+            previous: { effect: "", duration: 0, easing: "" },
+            next: { effect: "", duration: 0, easing: "" },
+        };
+    }
+    /**
+     * @return {?}
+     */
+    ngOnInit() { }
+    /**
+     * @param {?} e
+     * @return {?}
+     */
+    onTabClick(e) {
+        this.tabChange.emit(this.tabList[e.selectedIndex]);
+    }
+}
+RsPageTabComponent.decorators = [
+    { type: Component, args: [{
+                selector: "rs-page-tab",
+                template: "<div class=\"rs-page-list-wrap\">\r\n  <ng-container *ngIf=\"customPageTitle; else defaultTitle\">\r\n    <ng-content select=\"[titleSlot]\"></ng-content>\r\n  </ng-container>\r\n  <ng-template #defaultTitle>\r\n    <div class=\"rs-page-title\" *ngIf=\"pageTitle\">{{ pageTitle }}</div>\r\n  </ng-template>\r\n  <ejs-tab\r\n    class=\"rs-tab\"\r\n    (selected)=\"onTabClick($event)\"\r\n    [animation]=\"animation\"\r\n\toverflowMode=\"Popup\"\r\n    heightAdjustMode=\"None\"\r\n  >\r\n    <e-tabitems>\r\n      <e-tabitem *ngFor=\"let item of tabList\">\r\n        <ng-template #headerText>\r\n          <div>{{ item.title }}</div>\r\n        </ng-template>\r\n      </e-tabitem>\r\n    </e-tabitems>\r\n  </ejs-tab>\r\n  <div class=\"rs-grid-wrap\">\r\n    <ng-content select=\"[tabContentSlot]\"></ng-content>\r\n  </div>\r\n</div>\r\n",
+                styles: [".rs-page-list-wrap{height:100%;display:flex;flex-direction:column;position:relative;margin:0 auto;max-width:1885px}.rs-page-list-wrap .rs-page-title{font-family:var(--rs-font-family);font-size:var(--rs-page-title-font-size);font-weight:700;text-align:left;color:var(--rs-page-title-color);display:flex;align-items:center;padding:16px 8px 12px 20px}.rs-page-list-wrap .rs-tab{padding:0 20px}.rs-page-list-wrap .rs-tab .e-tab-header::before{display:none}.rs-page-list-wrap .rs-tab .e-toolbar-items{gap:32px;min-height:36px}.rs-page-list-wrap .rs-tab .e-toolbar-items .e-toolbar-item{border:0}.rs-page-list-wrap .rs-tab .e-toolbar-items .e-toolbar-item .e-tab-wrap{padding:0;border:0;position:relative;height:36px}.rs-page-list-wrap .rs-tab .e-toolbar-items .e-toolbar-item .e-tab-wrap::before{content:\" \";position:absolute;left:0;bottom:0;width:100%;height:2px;background-color:transparent}.rs-page-list-wrap .rs-tab .e-toolbar-items .e-toolbar-item .e-tab-text{color:#5f6f81;font-family:Arial;font-size:13px;font-style:normal;font-weight:400;line-height:16px}.rs-page-list-wrap .rs-tab .e-toolbar-items .e-toolbar-item.e-active .e-tab-wrap::before{background-color:#1f7bff}.rs-page-list-wrap .rs-tab .e-toolbar-items .e-toolbar-item.e-active .e-tab-text{color:#44566c}.rs-page-list-wrap .rs-tab .e-hor-nav{width:24px;height:24px;min-height:24px;top:3px;border-radius:4px;background-color:transparent!important;border:1px solid #eaedf0!important}.rs-page-list-wrap .rs-tab .e-hor-nav .e-icons{box-shadow:none;background-color:transparent!important;border-color:transparent!important;background-image:url(../../assets/img/icon-more.svg);background-size:14px 3px;background-repeat:no-repeat;background-position:4px 14px}.rs-page-list-wrap .rs-tab .e-hor-nav .e-icons::before{display:none}.rs-page-list-wrap .rs-tab .e-hor-nav .e-icons:hover{background-color:#eff5fb!important;border-color:#b1d0fc!important;background-image:url(../../assets/img/icon-more-active.svg)}.rs-page-list-wrap .rs-tab .e-toolbar-pop{min-width:160px;border-radius:10px;background:#fff;box-shadow:0 0 8px 0 rgba(0,0,0,.25);padding:8px}.rs-page-list-wrap .rs-tab .e-toolbar-pop .e-toolbar-item .e-tab-wrap{padding:0 8px}.rs-page-list-wrap .rs-tab .e-toolbar-pop .e-toolbar-item .e-tab-wrap .e-tab-text{color:#44566c;font-family:Arial;font-size:13px;font-weight:400;line-height:16px}.rs-page-list-wrap .rs-tab .e-toolbar-pop .e-toolbar-item .e-tab-wrap:hover{border-radius:6px;background:rgba(31,123,255,.05)}.rs-page-list-wrap .rs-grid-wrap{flex:1;height:0}"]
+            }] }
+];
+RsPageTabComponent.propDecorators = {
+    pageTitle: [{ type: Input }],
+    customPageTitle: [{ type: Input }],
+    tabList: [{ type: Input }],
+    currentTab: [{ type: Input }],
+    tabChange: [{ type: Output }]
+};
+if (false) {
+    /** @type {?} */
+    RsPageTabComponent.prototype.pageTitle;
+    /** @type {?} */
+    RsPageTabComponent.prototype.customPageTitle;
+    /** @type {?} */
+    RsPageTabComponent.prototype.tabList;
+    /** @type {?} */
+    RsPageTabComponent.prototype.currentTab;
+    /** @type {?} */
+    RsPageTabComponent.prototype.tabChange;
+    /** @type {?} */
+    RsPageTabComponent.prototype.animation;
+}
+
+/**
+ * @fileoverview added by tsickle
+ * Generated from: lib/layout/grid-box/index.component.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+class GridBoxComponent {
+    constructor() {
+        this.customPageTitle = false;
+        this.isInner = false;
+    }
+    /**
+     * @return {?}
+     */
+    ngOnInit() {
+        this.debouncedInput = debounce((/**
+         * @return {?}
+         */
+        () => {
+            this.onSeach();
+        }), 300);
+    }
+    /**
+     * @return {?}
+     */
+    onSeach() {
+        this.gridContent.grid.search(this.searchValue);
+    }
+    /**
+     * @return {?}
+     */
+    onInput() {
+        this.debouncedInput();
+    }
+}
+GridBoxComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'rs-grid-box',
+                template: "<div class=\"rs-grid-box\" [ngClass]=\"{ 'is-not-inner': !isInner }\">\r\n  <div class=\"rs-toolbar-wrap\">\r\n    <div class=\"rs-left-col\">\r\n      <ng-content select=\"[leftToolbarBtnSlot]\"></ng-content>\r\n    </div>\r\n    <div class=\"rs-right-col\">\r\n      <ng-content select=\"[rightToolbarBtnSlot]\"></ng-content>\r\n      <div class=\"rs-search-input\">\r\n        <ejs-textbox\r\n          type=\"text\"\r\n          class=\"e-input\"\r\n          [(ngModel)]=\"searchValue\"\r\n          (input)=\"onInput()\"\r\n          placeholder=\"Search all fields\"\r\n          [showClearButton]=\"true\"\r\n          autocomplete=\"off\"\r\n        ></ejs-textbox>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"rs-grid-wrap\">\r\n    <ng-content select=\"[gridSlot]\"></ng-content>\r\n  </div>\r\n</div>\r\n",
+                styles: [":host{height:100%}.rs-grid-box{display:flex;flex-direction:column;height:100%}.rs-grid-box.is-not-inner{border-radius:15px;padding:12px 20px;background:#fff;border:1px solid var(--rs-border-color);box-shadow:0 0 4px 0 rgba(0,0,0,.1)}.rs-grid-box .rs-toolbar-wrap{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.rs-grid-box .rs-toolbar-wrap .rs-left-col,.rs-grid-box .rs-toolbar-wrap .rs-right-col{display:flex;gap:12px}.rs-grid-box .rs-toolbar-wrap .rs-left-col ::ng-deep .e-btn,.rs-grid-box .rs-toolbar-wrap .rs-right-col ::ng-deep .e-btn{height:28px}.rs-grid-box .rs-grid-wrap{flex:1;height:0}.rs-grid-box .rs-search-input{width:240px}.rs-grid-box .rs-search-input ::ng-deep .e-input-group{border-radius:14px!important}.rs-grid-box .rs-search-input ::ng-deep .e-input-group.e-input-focus,.rs-grid-box .rs-search-input ::ng-deep .e-input-group:hover{box-shadow:0 0 3px 0 rgba(31,123,255,.4)!important;border-color:var(--rs-input-hover-border-color)!important}.rs-grid-box .rs-search-input ::ng-deep .e-input-group.e-input-focus input.e-input,.rs-grid-box .rs-search-input ::ng-deep .e-input-group:hover input.e-input{box-shadow:none!important}.rs-grid-box .rs-search-input ::ng-deep .e-input-group input.e-input{width:calc(100% - 50px);height:26px}.rs-grid-box .rs-search-input ::ng-deep .e-input-group input.e-input:hover{box-shadow:none!important}.rs-grid-box .rs-search-input ::ng-deep .e-input-group::before{content:\"\"!important;margin:6px 0 0 8px;display:block;width:16px;height:16px;background-image:url(/assets/img/search.svg);background-size:cover;background-position:center}"]
+            }] }
+];
+GridBoxComponent.propDecorators = {
+    gridContent: [{ type: ContentChild, args: [TemplateRef, { static: true },] }],
+    pageTitle: [{ type: Input }],
+    customPageTitle: [{ type: Input }],
+    isInner: [{ type: Input }]
+};
+if (false) {
+    /** @type {?} */
+    GridBoxComponent.prototype.gridContent;
+    /** @type {?} */
+    GridBoxComponent.prototype.pageTitle;
+    /** @type {?} */
+    GridBoxComponent.prototype.customPageTitle;
+    /** @type {?} */
+    GridBoxComponent.prototype.isInner;
+    /**
+     * @type {?}
+     * @private
+     */
+    GridBoxComponent.prototype.debouncedInput;
+    /** @type {?} */
+    GridBoxComponent.prototype.searchValue;
+}
+
+/**
+ * @fileoverview added by tsickle
+ * Generated from: lib/service/common-function.service.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+class CommonFunctionService {
+    constructor() { }
+    /**
+     * @return {?}
+     */
+    testMethod() {
+        return "test1111";
+    }
+    /**
+     * @param {?} text
+     * @param {?=} maxWidth
+     * @param {?=} fontSize
+     * @return {?}
+     */
+    setMiddleEllipsis(text, maxWidth = 150, fontSize = 13) {
+        /** @type {?} */
+        const canvas = document.createElement("canvas");
+        /** @type {?} */
+        const context = canvas.getContext("2d");
+        context.font = `${fontSize}px Arial`;
+        /** @type {?} */
+        let width = context.measureText(text).width;
+        if (width <= maxWidth) {
+            return text;
+        }
+        maxWidth = Math.floor(maxWidth - context.measureText("...").width);
+        /** @type {?} */
+        let firstPart = "";
+        /** @type {?} */
+        let secondPart = "";
+        /** @type {?} */
+        let half = Math.floor(maxWidth / 2);
+        for (let i = 0; i < text.length; i++) {
+            firstPart += text[i];
+            width = context.measureText(firstPart).width;
+            if (width > half) {
+                break;
+            }
+        }
+        for (let i = text.length - 1; i >= 0; i--) {
+            secondPart = text[i] + secondPart;
+            width = context.measureText(secondPart).width;
+            if (width > half) {
+                break;
+            }
+        }
+        return firstPart + "..." + secondPart;
+    }
+    /**
+     * @param {?} url
+     * @return {?}
+     */
+    getPureUrl(url) {
+        if (url) {
+            // 如果params的value 携带查询参数， 则截取前面部分
+            url = decodeURIComponent(url);
+            if (url.includes("?")) {
+                url = url.split("?")[0];
+            }
+        }
+        return url;
+    }
+}
+CommonFunctionService.decorators = [
+    { type: Injectable, args: [{
+                providedIn: "root",
+            },] }
+];
+/** @nocollapse */
+CommonFunctionService.ctorParameters = () => [];
+/** @nocollapse */ CommonFunctionService.ngInjectableDef = ɵɵdefineInjectable({ factory: function CommonFunctionService_Factory() { return new CommonFunctionService(); }, token: CommonFunctionService, providedIn: "root" });
+
+/**
+ * @fileoverview added by tsickle
+ * Generated from: lib/service/keep-alive.service.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+/** @type {?} */
+const storedRoutes = {};
+/** @type {?} */
+let toBeDeleteUrl;
+/** @type {?} */
+let excludeRoutes = [];
+// 不需要缓存的url
+class KeepAliveService {
+    /**
+     * @param {?} routes
+     * @return {?}
+     */
+    setExcludeRoutes(routes) {
+        excludeRoutes = routes; // 设置不缓存的路由
+    }
+    /**
+     * @param {?} route
+     * @return {?}
+     */
+    shouldDetach(route) {
+        if (toBeDeleteUrl === this.getRoutePath(route)) {
+            // 对于新开的又即将关闭的tab，不缓存
+            toBeDeleteUrl = "";
+            return false;
+        }
+        return !excludeRoutes.includes(route.routeConfig.path);
+    }
+    /**
+     * @param {?} route
+     * @param {?} handle
+     * @return {?}
+     */
+    store(route, handle) {
+        // console.log("store", this.getRoutePath(route));
+        // console.log("store", storedRoutes);
+        storedRoutes[this.getRoutePath(route)] = handle;
+    }
+    /**
+     * @param {?} route
+     * @return {?}
+     */
+    shouldAttach(route) {
+        return !!storedRoutes[this.getRoutePath(route)];
+    }
+    /**
+     * @param {?} route
+     * @return {?}
+     */
+    retrieve(route) {
+        return storedRoutes[this.getRoutePath(route)];
+    }
+    /**
+     * @param {?} future
+     * @param {?} curr
+     * @return {?}
+     */
+    shouldReuseRoute(future, curr) {
+        // console.log("shouldReuseRoute");
+        return this.getRoutePath(future) === this.getRoutePath(curr); // 复用相同的路由
+    }
+    /**
+     * @param {?} route
+     * @return {?}
+     */
+    getRoutePath(route) {
+        if (route.routeConfig) {
+            // const pathParams = JSON.stringify(route.params);
+            /** @type {?} */
+            const queryParams = new URLSearchParams(route.queryParams).toString();
+            return route._routerState.url + (queryParams ? "?" + queryParams : "");
+        }
+        return "";
+    }
+    /**
+     * @param {?} path
+     * @return {?}
+     */
+    clearCache(path) {
+        toBeDeleteUrl = path;
+        delete storedRoutes[path]; // 清除指定路径的缓存
+    }
+}
+
+/**
+ * @fileoverview added by tsickle
+ * Generated from: lib/layout/multi-tab/index.component.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+class MultiTabComponent {
+    /**
+     * @param {?} router
+     * @param {?} cf
+     * @param {?} activatedRoute
+     * @param {?} keepAlive
+     */
+    constructor(router, cf, activatedRoute, keepAlive) {
+        this.router = router;
+        this.cf = cf;
+        this.activatedRoute = activatedRoute;
+        this.keepAlive = keepAlive;
+        this.singleReuseUrls = []; //只能单个缓存的url
+        //只能单个缓存的url
+        this.TAB_WIDTH = 164;
+        this.GAP_NORMAL = 54;
+        this.GAP_SMALL = 30;
+        this.tabList = [];
+        this.selectedTab = 0;
+        this.maxTabs = 10;
+        this.screenWidth = window.innerWidth; // 初始化屏幕宽度
+    }
+    // 初始化屏幕宽度
+    /**
+     * @param {?} event
+     * @return {?}
+     */
+    onResize(event) {
+        this.screenWidth = window.innerWidth; // 更新屏幕宽度
+        this.setEllipsisTitle();
+    }
+    /**
+     * @return {?}
+     */
+    ngOnInit() {
+        this.initTab();
+        this.router.events
+            .pipe(filter((/**
+         * @param {?} event
+         * @return {?}
+         */
+        (event) => event instanceof NavigationEnd)))
+            .subscribe((/**
+         * @return {?}
+         */
+        () => {
+            /** @type {?} */
+            const navigation = this.router.getCurrentNavigation();
+            if (navigation) {
+                /** @type {?} */
+                const state = navigation.extras.state;
+                // 获取传递的 state
+                /** @type {?} */
+                const currentRoute = this.router.routerState.root.firstChild;
+                if (currentRoute) {
+                    this.setTab(this.router.url, currentRoute.snapshot.routeConfig.path, state && state.title);
+                }
+            }
+        }));
+        this.setEllipsisTitle();
+    }
+    /**
+     * @param {?=} title
+     * @return {?}
+     */
+    setEllipsisTitle(title) {
+        this.textGap = this.GAP_NORMAL;
+        if (this.screenWidth <= 1100) {
+            this.textGap = this.GAP_SMALL;
+        }
+        let { allWidth, leftWidth, rightWidth } = this.calcTabWidth();
+        /** @type {?} */
+        let width = Math.floor((allWidth - rightWidth) / (this.tabList && this.tabList.length));
+        if (title) {
+            return this.cf.setMiddleEllipsis(title, width > this.TAB_WIDTH
+                ? this.TAB_WIDTH - this.textGap
+                : width - this.textGap, 12);
+        }
+        else {
+            this.tabList.forEach((/**
+             * @param {?} ele
+             * @param {?} idx
+             * @return {?}
+             */
+            (ele, idx) => {
+                ele.displayTitle = this.cf.setMiddleEllipsis(ele.title, width > this.TAB_WIDTH
+                    ? this.TAB_WIDTH - this.textGap
+                    : width - this.textGap, 12);
+            }));
+        }
+    }
+    /**
+     * @return {?}
+     */
+    calcTabWidth() {
+        /** @type {?} */
+        const wrap = document.querySelector(".rs-multi-tab");
+        /** @type {?} */
+        const ulElement = document.querySelector(".rs-multi-tab > ul");
+        /** @type {?} */
+        const refreshTabDiv = document.querySelector(".rs-multi-tab .refresh-tab");
+        /** @type {?} */
+        let allWidth;
+        /** @type {?} */
+        let leftWidth;
+        /** @type {?} */
+        let rightWidth;
+        if (wrap && ulElement && refreshTabDiv) {
+            // 获取元素的位置信息
+            /** @type {?} */
+            const wrapRect = wrap.getBoundingClientRect();
+            /** @type {?} */
+            const ulRect = ulElement.getBoundingClientRect();
+            /** @type {?} */
+            const refreshTabRect = refreshTabDiv.getBoundingClientRect();
+            allWidth = wrapRect.width;
+            leftWidth = ulRect.width;
+            rightWidth = refreshTabRect.width;
+        }
+        return {
+            allWidth,
+            leftWidth,
+            rightWidth,
+        };
+    }
+    /**
+     * @return {?}
+     */
+    initTab() {
+        /** @type {?} */
+        let TabCache = JSON.parse(sessionStorage.getItem("TabCache"));
+        this.tabList = TabCache || [];
+    }
+    /**
+     * @param {?} tab
+     * @param {?} idx
+     * @return {?}
+     */
+    closeTab(tab, idx) {
+        this.tabList = this.tabList.filter((/**
+         * @param {?} ele
+         * @return {?}
+         */
+        (ele) => ele.url !== tab.url));
+        this.clearCache(tab.url);
+        if (this.selectedTab === idx) {
+            /** @type {?} */
+            const targetIdx = Math.max(0, idx - 1);
+            this.changeTab(this.tabList[targetIdx], targetIdx);
+        }
+        this.setEllipsisTitle();
+        sessionStorage.setItem("TabCache", JSON.stringify(this.tabList));
+    }
+    /**
+     * @param {?} tab
+     * @param {?} idx
+     * @return {?}
+     */
+    changeTab(tab, idx) {
+        this.router.navigateByUrl(tab.url);
+        this.selectedTab = idx;
+    }
+    /**
+     * @param {?} url
+     * @param {?} title
+     * @return {?}
+     */
+    addTab(url, title) {
+        if (this.tabList.length >= this.maxTabs) {
+            this.closeTab(this.tabList[0], 0); // 删除第一个
+        }
+        this.tabList.push({
+            url: url,
+            title: title || "default",
+            displayTitle: this.setEllipsisTitle(title || "default"),
+        });
+        this.selectedTab = this.tabList.length - 1;
+        this.setEllipsisTitle();
+        sessionStorage.setItem("TabCache", JSON.stringify(this.tabList));
+    }
+    /**
+     * @param {?} url
+     * @param {?} pureUrl
+     * @param {?} title
+     * @return {?}
+     */
+    setTab(url, pureUrl, title) {
+        /** @type {?} */
+        const isExistIdx = this.tabList.findIndex((/**
+         * @param {?} ele
+         * @return {?}
+         */
+        (ele) => ele.url === url));
+        if (isExistIdx === -1) {
+            /** @type {?} */
+            const singleIdx = this.singleReuseUrls.findIndex((/**
+             * @param {?} ele
+             * @return {?}
+             */
+            (ele) => ele === pureUrl));
+            if (singleIdx !== -1) {
+                this.tabList = this.tabList.filter((/**
+                 * @param {?} ele
+                 * @return {?}
+                 */
+                (ele) => !ele.url.includes(this.singleReuseUrls[singleIdx])));
+                this.keepAlive.clearCache(url);
+            }
+            this.addTab(url, title);
+        }
+        else {
+            this.selectedTab = isExistIdx;
+        }
+    }
+    /**
+     * @return {?}
+     */
+    refreshTab() {
+        this.keepAlive.clearCache(this.tabList[this.selectedTab].url);
+        /** @type {?} */
+        const currentUrl = this.router.url;
+        this.router.navigateByUrl("/", { skipLocationChange: true }).then((/**
+         * @return {?}
+         */
+        () => {
+            this.router.navigateByUrl(currentUrl); // 重新导航到当前 URL
+        }));
+    }
+    /**
+     * @param {?} url
+     * @return {?}
+     */
+    clearCache(url) {
+        this.keepAlive.clearCache(url); // 调用自定义策略的清除缓存方法
+    }
+}
+MultiTabComponent.decorators = [
+    { type: Component, args: [{
+                selector: "rs-multi-tab",
+                template: "<div class=\"rs-multi-tab\">\r\n  <ul>\r\n    <ng-container *ngFor=\"let tab of tabList; let i = index\">\r\n      <li\r\n        [ngClass]=\"selectedTab === i ? 'isSelect' : 'notSelect'\"\r\n        (click)=\"changeTab(tab, i)\"\r\n      >\r\n        <ejs-tooltip\r\n          id=\"notSelectTooltip\"\r\n          [showTipPointer]=\"false\"\r\n          [openDelay]=\"500\"\r\n          *ngIf=\"tab.displayTitle !== tab.title; else originText\"\r\n          style=\"height: 27px\"\r\n        >\r\n          <ng-template #content>\r\n            <div class=\"tooltip-content\">\r\n              {{ tab.title }}\r\n            </div>\r\n          </ng-template>\r\n          <span class=\"tabTitle\">{{ tab.displayTitle }}</span>\r\n        </ejs-tooltip>\r\n        <ng-template #originText>\r\n          <span class=\"tabTitle\">\r\n            {{ tab.displayTitle }}\r\n          </span>\r\n        </ng-template>\r\n        <span class=\"img-block\" *ngIf=\"selectedTab !== i\"></span>\r\n        <img\r\n          *ngIf=\"tabList.length !== 1\"\r\n          src=\"../../../assets/img/close-url.svg\"\r\n          (click)=\"closeTab(tab, i)\"\r\n        />\r\n      </li>\r\n    </ng-container>\r\n  </ul>\r\n  <div class=\"refresh-tab\" (click)=\"refreshTab()\">\r\n    <img\r\n      id=\"loadingIcon\"\r\n      alt\r\n      class=\"refresh-btn\"\r\n      src=\"../../../assets/img/desktop-refresh-btn.svg\"\r\n    />\r\n    <span>Refresh Current Tab</span>\r\n  </div>\r\n</div>\r\n",
+                styles: [".rs-multi-tab{border-bottom:1px solid #e5eaef;height:28px;width:100%;display:flex;justify-content:space-between}.rs-multi-tab ul{display:flex;margin:0 8px;padding:0;overflow:hidden;height:100%}.rs-multi-tab ul li{max-width:164px;padding:0 12px;display:flex;align-items:center;flex:auto;border:1px solid #e5eaef;border-bottom:none;color:#5f6f81;font-family:Arial;font-size:11px;font-style:normal;font-weight:400;line-height:28px;height:100%;background:#f8fafb;vertical-align:top;position:relative;cursor:default}.rs-multi-tab ul li .tabTitle{display:inline-block;white-space:nowrap;font-size:11px;font-family:Arial;font-style:normal;font-weight:400;line-height:16px;transition:width .3s}.rs-multi-tab ul li img{border-radius:4px;padding:4px;margin-left:6px;margin-top:1px;vertical-align:top;cursor:pointer}.rs-multi-tab ul li img:hover{background:#dce8f6}.rs-multi-tab ul li:not(:last-child){border-right:none}.rs-multi-tab ul li:first-of-type{border-top-left-radius:8px}.rs-multi-tab ul li:last-child{border-top-right-radius:8px}.rs-multi-tab ul .isSelect{color:#1f3f5c;background:#fff}.rs-multi-tab ul .notSelect img{display:none}.rs-multi-tab ul .notSelect .img-block{display:inline-block;width:22px}.rs-multi-tab ul .notSelect:hover{color:#1f3f5c;background-color:rgba(31,123,255,.04)}.rs-multi-tab ul .notSelect:hover .img-block{display:none}.rs-multi-tab ul .notSelect:hover img{display:inline-block}.rs-multi-tab .refresh-tab{cursor:pointer;text-align:right;color:#6c7c90;font-family:Arial;font-size:11px;font-style:normal;font-weight:400;line-height:28px;padding-right:12px}.rs-multi-tab .refresh-tab img{vertical-align:middle;margin-right:4px}.refresh-tab-loading{-webkit-animation:1s linear infinite spin;animation:1s linear infinite spin}@-webkit-keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.tooltip-content{padding:4px;color:#f8fafb;font-family:Arial;font-size:11px;font-style:normal;font-weight:400;line-height:14px}@media (max-width:1400px){.refresh-tab{padding-right:0!important}.refresh-tab span{display:none!important}}@media (max-width:1100px){.rs-multi-tab ul li img{position:absolute;right:3px;background-color:#fff}.notSelect:hover img{position:absolute;right:3px;background-color:#eff5fb}.img-block{display:none!important}}@media (max-width:600px){.rs-multi-tab ul li{padding:0 8px}.rs-multi-tab ul .notSelect .img-block{width:0!important}}"]
+            }] }
+];
+/** @nocollapse */
+MultiTabComponent.ctorParameters = () => [
+    { type: Router },
+    { type: CommonFunctionService },
+    { type: ActivatedRoute },
+    { type: KeepAliveService }
+];
+MultiTabComponent.propDecorators = {
+    singleReuseUrls: [{ type: Input }],
+    onResize: [{ type: HostListener, args: ["window:resize", ["$event"],] }]
+};
+if (false) {
+    /** @type {?} */
+    MultiTabComponent.prototype.singleReuseUrls;
+    /** @type {?} */
+    MultiTabComponent.prototype.TAB_WIDTH;
+    /** @type {?} */
+    MultiTabComponent.prototype.GAP_NORMAL;
+    /** @type {?} */
+    MultiTabComponent.prototype.GAP_SMALL;
+    /** @type {?} */
+    MultiTabComponent.prototype.textGap;
+    /** @type {?} */
+    MultiTabComponent.prototype.foo;
+    /** @type {?} */
+    MultiTabComponent.prototype.comRef;
+    /** @type {?} */
+    MultiTabComponent.prototype.tabList;
+    /** @type {?} */
+    MultiTabComponent.prototype.selectedTab;
+    /** @type {?} */
+    MultiTabComponent.prototype.maxTabs;
+    /** @type {?} */
+    MultiTabComponent.prototype.screenWidth;
+    /** @type {?} */
+    MultiTabComponent.prototype.router;
+    /** @type {?} */
+    MultiTabComponent.prototype.cf;
+    /** @type {?} */
+    MultiTabComponent.prototype.activatedRoute;
+    /** @type {?} */
+    MultiTabComponent.prototype.keepAlive;
 }
 
 /**
@@ -1102,8 +1682,10 @@ if (false) {
 class MainContainerComponent {
     constructor() {
         this.isCollapsed = false; // 接收输入属性
+        // 接收输入属性
+        this.singleReuseUrls = []; //只能单个缓存的url
     }
-    // 接收输入属性
+    //只能单个缓存的url
     /**
      * @return {?}
      */
@@ -1112,16 +1694,19 @@ class MainContainerComponent {
 MainContainerComponent.decorators = [
     { type: Component, args: [{
                 selector: "rs-main-container",
-                template: "<div class=\"app-main-container\">\r\n  <ng-content select=\"[headerSlot]\"></ng-content>\r\n  <div class=\"main-page\">\r\n    <div class=\"left-aside\" [ngClass]=\"{ isCollapsed: isCollapsed }\">\r\n      <ng-content select=\"[leftAsideSlot]\"></ng-content>\r\n    </div>\r\n    <div class=\"right-aside\">\r\n      <!-- <div class=\"multi-tab\"></div> -->\r\n      <div class=\"router-content\">\r\n        <ng-content select=\"[routerSlot]\"></ng-content>\r\n      </div>\r\n      <rs-footer></rs-footer>\r\n    </div>\r\n  </div>\r\n</div>\r\n",
-                styles: [".app-main-container{display:flex;flex-direction:column;height:100vh}.app-main-container .main-page{flex:1;height:0;display:flex;background-color:var(--rs-container-bg)}.app-main-container .left-aside{width:240px;height:100%;padding-right:16px;will-change:width;transition:width .3s}.app-main-container .left-aside.isCollapsed{width:64px;padding-right:0}.app-main-container .right-aside{width:0;flex:1;display:flex;flex-direction:column;padding-right:12px}.app-main-container .right-aside .multi-tab{height:40px;background-color:#efefef}.app-main-container .right-aside .router-content{flex:1;overflow:auto}"]
+                template: "<div class=\"app-main-container\">\r\n  <ng-content select=\"[headerSlot]\"></ng-content>\r\n  <div class=\"main-page\">\r\n    <div class=\"left-aside\" [ngClass]=\"{ isCollapsed: isCollapsed }\">\r\n      <ng-content select=\"[leftAsideSlot]\"></ng-content>\r\n    </div>\r\n    <div class=\"right-aside\">\r\n      <rs-multi-tab [singleReuseUrls]=\"singleReuseUrls\"></rs-multi-tab>\r\n      <div class=\"router-content\">\r\n        <ng-content select=\"[routerSlot]\"></ng-content>\r\n      </div>\r\n      <rs-footer></rs-footer>\r\n    </div>\r\n  </div>\r\n</div>\r\n",
+                styles: [".app-main-container{display:flex;flex-direction:column;height:100vh}.app-main-container .main-page{flex:1;height:0;display:flex;background-color:var(--rs-container-bg)}.app-main-container .left-aside{width:240px;height:100%;padding-right:16px;will-change:width;transition:width .3s}.app-main-container .left-aside.isCollapsed{width:64px;padding-right:0}.app-main-container .right-aside{width:0;flex:1;display:flex;flex-direction:column;padding-right:12px}.app-main-container .right-aside .router-content{flex:1;overflow:auto}"]
             }] }
 ];
 MainContainerComponent.propDecorators = {
-    isCollapsed: [{ type: Input }]
+    isCollapsed: [{ type: Input }],
+    singleReuseUrls: [{ type: Input }]
 };
 if (false) {
     /** @type {?} */
     MainContainerComponent.prototype.isCollapsed;
+    /** @type {?} */
+    MainContainerComponent.prototype.singleReuseUrls;
 }
 
 /**
@@ -1178,8 +1763,8 @@ class RSHeaderComponent {
 RSHeaderComponent.decorators = [
     { type: Component, args: [{
                 selector: "rs-header",
-                template: "<div class=\"rs-header\">\r\n  <div class=\"logo-wrap\">\r\n    <div class=\"toggle-menu-wrap\">\r\n      <img\r\n        class=\"toggle-menu\"\r\n        src=\"../../../assets/img/toggle-menu-icon.svg\"\r\n        (click)=\"onToggleMenu()\"\r\n      />\r\n    </div>\r\n    <img\r\n      class=\"logo\"\r\n      src=\"../../../assets/img/raise_logo_main.svg\"\r\n      alt=\"logo\"\r\n    />\r\n  </div>\r\n  <div class=\"bread-crumbs-wrap\">\r\n    <ng-content select=\"[breadCrumbs]\"></ng-content>\r\n  </div>\r\n  <div class=\"rs-toolbar-wrap\">\r\n    <div class=\"group\">\r\n      <ng-content select=\"[toolbar]\"></ng-content>\r\n    </div>\r\n    <div class=\"line\"></div>\r\n    <div class=\"langulage-wrap\">\r\n      <button\r\n        class=\"e-btn text\"\r\n        ejs-dropdownbutton\r\n        [items]=\"langOptions\"\r\n        (select)=\"selectLanguage($event)\"\r\n      >\r\n        {{currentLang.text}}\r\n      </button>\r\n    </div>\r\n    <div class=\"line\"></div>\r\n    <div class=\"last-login-wrap\">\r\n      {{ translation?.LAST_LOGIN || \"Last Login\" }}:\r\n      {{ lastLoginTime | date : \"dd MMM yy h:mm a\" }}\r\n    </div>\r\n    <div class=\"line\"></div>\r\n    <div class=\"user-info-wrap\">\r\n      <ng-content select=\"[userInfo]\"></ng-content>\r\n    </div>\r\n  </div>\r\n</div>\r\n",
-                styles: [".rs-header{height:50px;background-color:var(--rs-container-bg);display:flex;justify-content:space-between}.rs-header .logo-wrap{width:240px;display:flex;padding:12px 0 0 20px}.rs-header .logo-wrap .toggle-menu-wrap{cursor:pointer;margin-right:8px}.rs-header .logo-wrap .logo{width:77px;height:32px}.rs-header .rs-toolbar-wrap{display:flex;align-items:center}.rs-header .rs-toolbar-wrap .line{width:1px;height:24px;background-color:var(--rs-border-color)}.rs-header .rs-toolbar-wrap .langulage-wrap{padding:0 16px}.rs-header .rs-toolbar-wrap .last-login-wrap{padding:0 16px;color:var(--rs-labels-color);font-size:11px;font-weight:400;line-height:1}.rs-header .rs-toolbar-wrap .user-info-wrap{padding:0 20px 0 16px}"]
+                template: "<div class=\"rs-header\">\r\n  <div class=\"logo-wrap\">\r\n    <div class=\"toggle-menu-wrap\">\r\n      <img\r\n        class=\"toggle-menu\"\r\n        src=\"../../../assets/img/toggle-menu-icon.svg\"\r\n        (click)=\"onToggleMenu()\"\r\n      />\r\n    </div>\r\n    <img\r\n      class=\"logo\"\r\n      src=\"../../../assets/img/raise_logo_main.svg\"\r\n      alt=\"logo\"\r\n    />\r\n  </div>\r\n  <div class=\"bread-crumbs-wrap\">\r\n    <ng-content select=\"[breadCrumbs]\"></ng-content>\r\n  </div>\r\n  <div class=\"rs-toolbar-wrap\">\r\n    <div class=\"quick-icon-group\">\r\n      <ng-content select=\"[toolbar]\"></ng-content>\r\n    </div>\r\n    <div class=\"line\"></div>\r\n    <div class=\"langulage-wrap\">\r\n      <button\r\n        class=\"e-btn text\"\r\n        ejs-dropdownbutton\r\n        [items]=\"langOptions\"\r\n        (select)=\"selectLanguage($event)\"\r\n      >\r\n        {{currentLang.text}}\r\n      </button>\r\n    </div>\r\n    <div class=\"line\"></div>\r\n    <div class=\"last-login-wrap\">\r\n      {{ translation?.LAST_LOGIN || \"Last Login\" }}:\r\n      {{ lastLoginTime | date : \"dd MMM yy h:mm a\" }}\r\n    </div>\r\n    <div class=\"line\"></div>\r\n    <div class=\"user-info-wrap\">\r\n      <ng-content select=\"[userInfo]\"></ng-content>\r\n    </div>\r\n  </div>\r\n</div>\r\n",
+                styles: [".rs-header{height:50px;background-color:var(--rs-container-bg);display:flex;justify-content:space-between}.rs-header .logo-wrap{width:240px;display:flex;padding:12px 0 0 20px}.rs-header .logo-wrap .toggle-menu-wrap{cursor:pointer;margin-right:8px}.rs-header .logo-wrap .logo{width:77px;height:32px}.rs-header .rs-toolbar-wrap,.rs-header .rs-toolbar-wrap .quick-icon-group{display:flex;align-items:center}.rs-header .rs-toolbar-wrap .quick-icon-group ::ng-deep .header-icon{width:24px;height:24px;display:flex;justify-content:center;align-items:center;margin-right:24px;cursor:pointer}.rs-header .rs-toolbar-wrap .quick-icon-group ::ng-deep .header-icon svg{width:16px;height:16px;color:#6c7c90;stroke:#6c7c90}.rs-header .rs-toolbar-wrap .quick-icon-group ::ng-deep .header-icon:hover{border-radius:4px;background:rgba(31,123,255,.04)}.rs-header .rs-toolbar-wrap .quick-icon-group ::ng-deep .header-icon:hover svg{color:#1f7bff;stroke:#1f7bff}.rs-header .rs-toolbar-wrap .line{width:1px;height:24px;background-color:var(--rs-border-color)}.rs-header .rs-toolbar-wrap .langulage-wrap{padding:0 16px}.rs-header .rs-toolbar-wrap .last-login-wrap{padding:0 16px;color:var(--rs-labels-color);font-size:11px;font-weight:400;line-height:1}.rs-header .rs-toolbar-wrap .user-info-wrap{padding:0 20px 0 16px}"]
             }] }
 ];
 RSHeaderComponent.propDecorators = {
@@ -1254,14 +1839,14 @@ class RSAsideComponent {
      */
     onNavClick(item) {
         this.currentNav = item.title;
-        this.router.navigate([item.url]);
+        this.router.navigate([item.url], { state: { title: item.title } });
     }
 }
 RSAsideComponent.decorators = [
     { type: Component, args: [{
                 selector: "rs-aside",
-                template: "<div class=\"rs-aside\">\r\n  <div class=\"nav-list\">\r\n    <div\r\n      class=\"nav-item\"\r\n      [ngClass]=\"{ isCurrent: currentNav === nav.title }\"\r\n      *ngFor=\"let nav of navList\"\r\n      (click)=\"onNavClick(nav)\"\r\n    >\r\n      <div class=\"nav-item-inner\">\r\n        <div\r\n          class=\"icon-wrap\"\r\n          [ngStyle]=\"{\r\n            stroke: currentNav === nav.title ? '#44566c' : '#6c7c90',\r\n            fill: currentNav === nav.title ? '#44566c' : '#6c7c90'\r\n          }\"\r\n        >\r\n          <svg-icon\r\n            [name]=\"nav.icon\"\r\n            [svgStyle]=\"{\r\n              'width.px': 16,\r\n              'height.px': 16\r\n            }\"\r\n          ></svg-icon>\r\n        </div>\r\n        <span class=\"nav-text\" [ngClass]=\"{ isCollapsed: isCollapsed }\">{{\r\n          nav.title\r\n        }}</span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"bottom-iconbox\" [ngClass]=\"{ isCollapsed: isCollapsed }\">\r\n    <ng-content select=\"[bottomIconBox]\"></ng-content>\r\n  </div>\r\n</div>\r\n",
-                styles: [".rs-aside{display:flex;flex-direction:column;height:100%}.rs-aside .nav-list{padding-top:12px;flex:1;overflow:auto;height:0}.rs-aside .nav-list .nav-item{height:32px;cursor:pointer;padding-left:11px}.rs-aside .nav-list .nav-item .nav-item-inner{display:flex;align-items:center;padding:8px 8px 8px 12px}.rs-aside .nav-list .nav-item:hover .nav-item-inner{border-radius:6px;background:rgba(31,123,255,.04)}.rs-aside .nav-list .nav-item .icon-wrap{width:33px;height:16px}.rs-aside .nav-list .nav-item .nav-text{color:#5f6f81;font-family:Arial;font-size:12px;font-weight:400;line-height:16px;transition:.3s;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;position:relative;top:1px}.rs-aside .nav-list .nav-item .nav-text.isCollapsed{opacity:0;width:0}.rs-aside .nav-list .nav-item.isCurrent{position:relative}.rs-aside .nav-list .nav-item.isCurrent .nav-text{color:#44566c;font-weight:700}.rs-aside .nav-list .nav-item.isCurrent::before{content:\"\";position:absolute;left:4px;top:8px;width:3px;height:16px;background-color:#1364b3;border-radius:2px}.rs-aside .bottom-iconbox{padding:12px 20px;height:48px;display:flex;gap:12px}.rs-aside .bottom-iconbox ::ng-deep .icon-wrap{width:24px;height:24px;border-radius:12px;border:1px solid #eaedf0;display:flex;justify-content:center;align-items:center;background-color:#fff;stroke:#6c7c90;fill:#6c7c90}.rs-aside .bottom-iconbox ::ng-deep .icon-wrap:not(.disabled){cursor:pointer}.rs-aside .bottom-iconbox ::ng-deep .icon-wrap:not(.disabled):hover{stroke:var(--rs-active-color);fill:var(--rs-active-color)}.rs-aside .bottom-iconbox.isCollapsed{flex-direction:column;height:auto}"]
+                template: "<div class=\"rs-aside\">\r\n  <div class=\"nav-list\">\r\n    <div\r\n      class=\"nav-item\"\r\n      [ngClass]=\"{ isCurrent: currentNav === nav.title }\"\r\n      *ngFor=\"let nav of navList\"\r\n      (click)=\"onNavClick(nav)\"\r\n    >\r\n      <div class=\"nav-item-inner\">\r\n        <mat-icon class=\"menu-icon\" [svgIcon]=\"nav.icon\"></mat-icon>\r\n        <span class=\"nav-text\" [ngClass]=\"{ isCollapsed: isCollapsed }\">{{\r\n          nav.title\r\n        }}</span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"bottom-iconbox\" [ngClass]=\"{ isCollapsed: isCollapsed }\">\r\n    <ng-content select=\"[bottomIconBox]\"></ng-content>\r\n  </div>\r\n</div>\r\n",
+                styles: [".rs-aside{display:flex;flex-direction:column;height:100%}.rs-aside .nav-list{padding-top:12px;flex:1;overflow:auto;height:0}.rs-aside .nav-list .nav-item{height:32px;cursor:pointer;padding-left:11px}.rs-aside .nav-list .nav-item .nav-item-inner{display:flex;align-items:center;padding:8px 8px 8px 12px}.rs-aside .nav-list .nav-item .nav-item-inner ::ng-deep .menu-icon{width:33px;height:16px}.rs-aside .nav-list .nav-item .nav-item-inner ::ng-deep .menu-icon svg{width:16px;height:16px;color:#6c7c90;stroke:#6c7c90}.rs-aside .nav-list .nav-item:hover .nav-item-inner{border-radius:6px;background:rgba(31,123,255,.04)}.rs-aside .nav-list .nav-item:hover .nav-item-inner ::ng-deep .menu-icon svg{color:#44566c;stroke:#44566c}.rs-aside .nav-list .nav-item .nav-text{color:#5f6f81;font-family:Arial;font-size:12px;font-weight:400;line-height:16px;transition:.3s;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;position:relative;top:1px}.rs-aside .nav-list .nav-item .nav-text.isCollapsed{opacity:0;width:0}.rs-aside .nav-list .nav-item.isCurrent{position:relative}.rs-aside .nav-list .nav-item.isCurrent .nav-text{color:#44566c;font-weight:700}.rs-aside .nav-list .nav-item.isCurrent::before{content:\"\";position:absolute;left:4px;top:8px;width:3px;height:16px;background-color:#1364b3;border-radius:2px}.rs-aside .bottom-iconbox{padding:12px 20px;height:48px;display:flex;gap:12px}.rs-aside .bottom-iconbox ::ng-deep .menu-bottom-icon{width:24px;height:24px;display:flex;justify-content:center;align-items:center;border:1px solid #eaedf0;border-radius:24px;cursor:pointer}.rs-aside .bottom-iconbox ::ng-deep .menu-bottom-icon svg{width:16px;height:16px;color:#6c7c90;stroke:#6c7c90}.rs-aside .bottom-iconbox ::ng-deep .menu-bottom-icon.disabled{cursor:default;opacity:.5}.rs-aside .bottom-iconbox ::ng-deep .menu-bottom-icon:not(.disabled):hover{background-color:#fff}.rs-aside .bottom-iconbox ::ng-deep .menu-bottom-icon:not(.disabled):hover svg{color:#1f7bff;stroke:#1f7bff}.rs-aside .bottom-iconbox.isCollapsed{flex-direction:column;height:auto}"]
             }] }
 ];
 /** @nocollapse */
@@ -1607,29 +2192,6 @@ if (false) {
     SwitchInputComponent.prototype.valueChange;
 }
 
-/**
- * @fileoverview added by tsickle
- * Generated from: lib/service/common-function.service.ts
- * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-class CommonFunctionService {
-    constructor() { }
-    /**
-     * @return {?}
-     */
-    testMethod() {
-        return "test1111";
-    }
-}
-CommonFunctionService.decorators = [
-    { type: Injectable, args: [{
-                providedIn: "root",
-            },] }
-];
-/** @nocollapse */
-CommonFunctionService.ctorParameters = () => [];
-/** @nocollapse */ CommonFunctionService.ngInjectableDef = ɵɵdefineInjectable({ factory: function CommonFunctionService_Factory() { return new CommonFunctionService(); }, token: CommonFunctionService, providedIn: "root" });
-
 /**
  * @fileoverview added by tsickle
  * Generated from: lib/service/icon-loader.service.ts
@@ -1637,10 +2199,12 @@ CommonFunctionService.ctorParameters = () => [];
  */
 class IconLoaderService {
     /**
-     * @param {?} iconReg
+     * @param {?} registry
+     * @param {?} domSanitizer
      */
-    constructor(iconReg) {
-        this.iconReg = iconReg;
+    constructor(registry, domSanitizer) {
+        this.registry = registry;
+        this.domSanitizer = domSanitizer;
     }
     /**
      * @param {?} list
@@ -1648,11 +2212,11 @@ class IconLoaderService {
      */
     registerIcons(list) {
         list.forEach((/**
-         * @param {?} item
+         * @param {?} __0
          * @return {?}
          */
-        (item) => {
-            this.iconReg.loadSvg(item.url, item.name).subscribe();
+        ({ name, path }) => {
+            this.registry.addSvgIcon(name, this.domSanitizer.bypassSecurityTrustResourceUrl(path));
         }));
     }
 }
@@ -1661,14 +2225,20 @@ IconLoaderService.decorators = [
 ];
 /** @nocollapse */
 IconLoaderService.ctorParameters = () => [
-    { type: SvgIconRegistryService }
+    { type: MatIconRegistry },
+    { type: DomSanitizer }
 ];
 if (false) {
     /**
      * @type {?}
      * @private
      */
-    IconLoaderService.prototype.iconReg;
+    IconLoaderService.prototype.registry;
+    /**
+     * @type {?}
+     * @private
+     */
+    IconLoaderService.prototype.domSanitizer;
 }
 
 /**
@@ -2197,10 +2767,13 @@ RaiseCommonLibModule.decorators = [
                 declarations: [
                     CommonGridComponent,
                     FloatBoxComponent,
-                    CommonListComponent,
+                    RsPageListComponent,
+                    RsPageTabComponent,
+                    GridBoxComponent,
                     RSHeaderComponent,
                     RSFooterComponent,
                     RSAsideComponent,
+                    MultiTabComponent,
                     MainContainerComponent,
                     TagInputComponent,
                     RadioGroupComponent,
@@ -2217,6 +2790,7 @@ RaiseCommonLibModule.decorators = [
                     FormsModule,
                     MatSnackBarModule,
                     MatDialogModule,
+                    MatIconModule,
                     GridModule,
                     PagerModule,
                     GridAllModule,
@@ -2248,10 +2822,11 @@ RaiseCommonLibModule.decorators = [
                     DashboardLayoutModule,
                     CarouselAllModule,
                     ToolbarModule,
+                    TabModule,
                     PdfViewerModule,
                     DropDownButtonModule,
+                    SplitButtonModule,
                     RichTextEditorAllModule,
-                    AngularSvgIconModule.forRoot(),
                 ],
                 providers: [
                     PageService,
@@ -2286,6 +2861,7 @@ RaiseCommonLibModule.decorators = [
                     CommonFunctionService,
                     IconLoaderService,
                     DialogService,
+                    KeepAliveService,
                 ],
                 exports: [
                     CommonModule,
@@ -2325,15 +2901,20 @@ RaiseCommonLibModule.decorators = [
                     DashboardLayoutModule,
                     CarouselAllModule,
                     ToolbarModule,
+                    TabModule,
                     PdfViewerModule,
                     DropDownButtonModule,
+                    SplitButtonModule,
                     RichTextEditorAllModule,
                     CommonGridComponent,
                     FloatBoxComponent,
-                    CommonListComponent,
+                    RsPageListComponent,
+                    RsPageTabComponent,
+                    GridBoxComponent,
                     RSHeaderComponent,
                     RSFooterComponent,
                     RSAsideComponent,
+                    MultiTabComponent,
                     MainContainerComponent,
                     TagInputComponent,
                     RadioGroupComponent,
@@ -2360,5 +2941,5 @@ RaiseCommonLibModule.decorators = [
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 
-export { CheckboxGroupComponent, CommonFunctionService, CommonGridComponent, CommonListComponent, DialogService, FloatBoxComponent, IconLoaderService, MainContainerComponent, MessageType, RSAsideComponent, RSFooterComponent, RSHeaderComponent, RadioGroupComponent, RaiseCommonLibModule, SwitchInputComponent, TagInputComponent, NewActionNotificationComponent as ɵa, CommonDialogComponent as ɵb, CommonDeleteComponent as ɵc };
+export { CheckboxGroupComponent, CommonFunctionService, CommonGridComponent, DialogService, FloatBoxComponent, GridBoxComponent, IconLoaderService, KeepAliveService, MainContainerComponent, MessageType, MultiTabComponent, RSAsideComponent, RSFooterComponent, RSHeaderComponent, RadioGroupComponent, RaiseCommonLibModule, RsPageListComponent, RsPageTabComponent, SwitchInputComponent, TagInputComponent, NewActionNotificationComponent as ɵa, CommonDialogComponent as ɵb, CommonDeleteComponent as ɵc };
 //# sourceMappingURL=raise-common-lib.js.map