raise-common-lib 0.0.15 → 0.0.21

package/fesm5/raise-common-lib.js

@@ -1,9 +1,11 @@
 import { __assign, __spread } from 'tslib';
-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';
@@ -18,9 +20,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';
 
 /**
@@ -1220,18 +1222,18 @@ 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
  */
-var CommonListComponent = /** @class */ (function () {
-    function CommonListComponent() {
+var RsPageListComponent = /** @class */ (function () {
+    function RsPageListComponent() {
         this.customPageTitle = false;
         this.isInner = false;
     }
     /**
      * @return {?}
      */
-    CommonListComponent.prototype.ngOnInit = /**
+    RsPageListComponent.prototype.ngOnInit = /**
      * @return {?}
      */
     function () {
@@ -1246,7 +1248,7 @@ var CommonListComponent = /** @class */ (function () {
     /**
      * @return {?}
      */
-    CommonListComponent.prototype.onSeach = /**
+    RsPageListComponent.prototype.onSeach = /**
      * @return {?}
      */
     function () {
@@ -1255,43 +1257,757 @@ var CommonListComponent = /** @class */ (function () {
     /**
      * @return {?}
      */
-    CommonListComponent.prototype.onInput = /**
+    RsPageListComponent.prototype.onInput = /**
      * @return {?}
      */
     function () {
         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 }],
         isInner: [{ type: Input }]
     };
-    return CommonListComponent;
+    return RsPageListComponent;
 }());
 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
+ */
+var RsPageTabComponent = /** @class */ (function () {
+    function RsPageTabComponent() {
+        this.customPageTitle = false;
+        this.tabList = [];
+        this.tabChange = new EventEmitter();
+        this.animation = {
+            previous: { effect: "", duration: 0, easing: "" },
+            next: { effect: "", duration: 0, easing: "" },
+        };
+    }
+    /**
+     * @return {?}
+     */
+    RsPageTabComponent.prototype.ngOnInit = /**
+     * @return {?}
+     */
+    function () { };
+    /**
+     * @param {?} e
+     * @return {?}
+     */
+    RsPageTabComponent.prototype.onTabClick = /**
+     * @param {?} e
+     * @return {?}
+     */
+    function (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 }]
+    };
+    return RsPageTabComponent;
+}());
+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
+ */
+var GridBoxComponent = /** @class */ (function () {
+    function GridBoxComponent() {
+        this.customPageTitle = false;
+        this.isInner = false;
+    }
+    /**
+     * @return {?}
+     */
+    GridBoxComponent.prototype.ngOnInit = /**
+     * @return {?}
+     */
+    function () {
+        var _this = this;
+        this.debouncedInput = debounce((/**
+         * @return {?}
+         */
+        function () {
+            _this.onSeach();
+        }), 300);
+    };
+    /**
+     * @return {?}
+     */
+    GridBoxComponent.prototype.onSeach = /**
+     * @return {?}
+     */
+    function () {
+        this.gridContent.grid.search(this.searchValue);
+    };
+    /**
+     * @return {?}
+     */
+    GridBoxComponent.prototype.onInput = /**
+     * @return {?}
+     */
+    function () {
+        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 }]
+    };
+    return GridBoxComponent;
+}());
+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
+ */
+var CommonFunctionService = /** @class */ (function () {
+    function CommonFunctionService() {
+    }
+    /**
+     * @return {?}
+     */
+    CommonFunctionService.prototype.testMethod = /**
+     * @return {?}
+     */
+    function () {
+        return "test1111";
+    };
+    /**
+     * @param {?} text
+     * @param {?=} maxWidth
+     * @param {?=} fontSize
+     * @return {?}
+     */
+    CommonFunctionService.prototype.setMiddleEllipsis = /**
+     * @param {?} text
+     * @param {?=} maxWidth
+     * @param {?=} fontSize
+     * @return {?}
+     */
+    function (text, maxWidth, fontSize) {
+        if (maxWidth === void 0) { maxWidth = 150; }
+        if (fontSize === void 0) { fontSize = 13; }
+        /** @type {?} */
+        var canvas = document.createElement("canvas");
+        /** @type {?} */
+        var context = canvas.getContext("2d");
+        context.font = fontSize + "px Arial";
+        /** @type {?} */
+        var width = context.measureText(text).width;
+        if (width <= maxWidth) {
+            return text;
+        }
+        maxWidth = Math.floor(maxWidth - context.measureText("...").width);
+        /** @type {?} */
+        var firstPart = "";
+        /** @type {?} */
+        var secondPart = "";
+        /** @type {?} */
+        var half = Math.floor(maxWidth / 2);
+        for (var i = 0; i < text.length; i++) {
+            firstPart += text[i];
+            width = context.measureText(firstPart).width;
+            if (width > half) {
+                break;
+            }
+        }
+        for (var 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 {?}
+     */
+    CommonFunctionService.prototype.getPureUrl = /**
+     * @param {?} url
+     * @return {?}
+     */
+    function (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 = function () { return []; };
+    /** @nocollapse */ CommonFunctionService.ngInjectableDef = ɵɵdefineInjectable({ factory: function CommonFunctionService_Factory() { return new CommonFunctionService(); }, token: CommonFunctionService, providedIn: "root" });
+    return CommonFunctionService;
+}());
+
+/**
+ * @fileoverview added by tsickle
+ * Generated from: lib/service/keep-alive.service.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+/** @type {?} */
+var storedRoutes = {};
+/** @type {?} */
+var toBeDeleteUrl;
+/** @type {?} */
+var excludeRoutes = [];
+// 不需要缓存的url
+var  
+// 不需要缓存的url
+KeepAliveService = /** @class */ (function () {
+    function KeepAliveService() {
+    }
+    /**
+     * @param {?} routes
+     * @return {?}
+     */
+    KeepAliveService.prototype.setExcludeRoutes = /**
+     * @param {?} routes
+     * @return {?}
+     */
+    function (routes) {
+        excludeRoutes = routes; // 设置不缓存的路由
+    };
+    /**
+     * @param {?} route
+     * @return {?}
+     */
+    KeepAliveService.prototype.shouldDetach = /**
+     * @param {?} route
+     * @return {?}
+     */
+    function (route) {
+        if (toBeDeleteUrl === this.getRoutePath(route)) {
+            // 对于新开的又即将关闭的tab，不缓存
+            toBeDeleteUrl = "";
+            return false;
+        }
+        return !excludeRoutes.includes(route.routeConfig.path);
+    };
+    /**
+     * @param {?} route
+     * @param {?} handle
+     * @return {?}
+     */
+    KeepAliveService.prototype.store = /**
+     * @param {?} route
+     * @param {?} handle
+     * @return {?}
+     */
+    function (route, handle) {
+        // console.log("store", this.getRoutePath(route));
+        // console.log("store", storedRoutes);
+        storedRoutes[this.getRoutePath(route)] = handle;
+    };
+    /**
+     * @param {?} route
+     * @return {?}
+     */
+    KeepAliveService.prototype.shouldAttach = /**
+     * @param {?} route
+     * @return {?}
+     */
+    function (route) {
+        return !!storedRoutes[this.getRoutePath(route)];
+    };
+    /**
+     * @param {?} route
+     * @return {?}
+     */
+    KeepAliveService.prototype.retrieve = /**
+     * @param {?} route
+     * @return {?}
+     */
+    function (route) {
+        if (!route.routeConfig)
+            return null;
+        if (route.routeConfig.loadChildren)
+            return null;
+        return storedRoutes[this.getRoutePath(route)];
+    };
+    /**
+     * @param {?} future
+     * @param {?} curr
+     * @return {?}
+     */
+    KeepAliveService.prototype.shouldReuseRoute = /**
+     * @param {?} future
+     * @param {?} curr
+     * @return {?}
+     */
+    function (future, curr) {
+        // console.log("shouldReuseRoute");
+        return this.getRoutePath(future) === this.getRoutePath(curr); // 复用相同的路由
+    };
+    /**
+     * @param {?} route
+     * @return {?}
+     */
+    KeepAliveService.prototype.getRoutePath = /**
+     * @param {?} route
+     * @return {?}
+     */
+    function (route) {
+        if (route.routeConfig) {
+            // const pathParams = JSON.stringify(route.params);
+            /** @type {?} */
+            var queryParams = new URLSearchParams(route.queryParams).toString();
+            return route._routerState.url + (queryParams ? "?" + queryParams : "");
+        }
+        return "";
+    };
+    /**
+     * @param {?} path
+     * @return {?}
+     */
+    KeepAliveService.prototype.clearCache = /**
+     * @param {?} path
+     * @return {?}
+     */
+    function (path) {
+        toBeDeleteUrl = path;
+        delete storedRoutes[path]; // 清除指定路径的缓存
+    };
+    return KeepAliveService;
+}());
+
+/**
+ * @fileoverview added by tsickle
+ * Generated from: lib/layout/multi-tab/index.component.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+var MultiTabComponent = /** @class */ (function () {
+    function MultiTabComponent(router, cf, activatedRoute, keepAlive, ref) {
+        this.router = router;
+        this.cf = cf;
+        this.activatedRoute = activatedRoute;
+        this.keepAlive = keepAlive;
+        this.ref = ref;
+        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 {?}
+     */
+    MultiTabComponent.prototype.onResize = 
+    // 初始化屏幕宽度
+    /**
+     * @param {?} event
+     * @return {?}
+     */
+    function (event) {
+        this.screenWidth = window.innerWidth; // 更新屏幕宽度
+        this.setEllipsisTitle();
+    };
+    /**
+     * @return {?}
+     */
+    MultiTabComponent.prototype.ngOnInit = /**
+     * @return {?}
+     */
+    function () {
+        var _this = this;
+        this.initTab();
+        this.router.events
+            .pipe(filter((/**
+         * @param {?} event
+         * @return {?}
+         */
+        function (event) { return event instanceof NavigationEnd; })))
+            .subscribe((/**
+         * @return {?}
+         */
+        function () {
+            /** @type {?} */
+            var navigation = _this.router.getCurrentNavigation();
+            if (navigation) {
+                /** @type {?} */
+                var state = navigation.extras.state;
+                // 获取传递的 state
+                /** @type {?} */
+                var 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 {?}
+     */
+    MultiTabComponent.prototype.setEllipsisTitle = /**
+     * @param {?=} title
+     * @return {?}
+     */
+    function (title) {
+        var _this = this;
+        this.textGap = this.GAP_NORMAL;
+        if (this.screenWidth <= 1100) {
+            this.textGap = this.GAP_SMALL;
+        }
+        var _a = this.calcTabWidth(), allWidth = _a.allWidth, leftWidth = _a.leftWidth, rightWidth = _a.rightWidth;
+        /** @type {?} */
+        var 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 {?}
+             */
+            function (ele, idx) {
+                ele.displayTitle = _this.cf.setMiddleEllipsis(ele.title, width > _this.TAB_WIDTH
+                    ? _this.TAB_WIDTH - _this.textGap
+                    : width - _this.textGap, 12);
+            }));
+        }
+    };
+    /**
+     * @return {?}
+     */
+    MultiTabComponent.prototype.calcTabWidth = /**
+     * @return {?}
+     */
+    function () {
+        /** @type {?} */
+        var wrap = document.querySelector(".rs-multi-tab");
+        /** @type {?} */
+        var ulElement = document.querySelector(".rs-multi-tab > ul");
+        /** @type {?} */
+        var refreshTabDiv = document.querySelector(".rs-multi-tab .refresh-tab");
+        /** @type {?} */
+        var allWidth;
+        /** @type {?} */
+        var leftWidth;
+        /** @type {?} */
+        var rightWidth;
+        if (wrap && ulElement && refreshTabDiv) {
+            // 获取元素的位置信息
+            /** @type {?} */
+            var wrapRect = wrap.getBoundingClientRect();
+            /** @type {?} */
+            var ulRect = ulElement.getBoundingClientRect();
+            /** @type {?} */
+            var refreshTabRect = refreshTabDiv.getBoundingClientRect();
+            allWidth = wrapRect.width;
+            leftWidth = ulRect.width;
+            rightWidth = refreshTabRect.width;
+        }
+        return {
+            allWidth: allWidth,
+            leftWidth: leftWidth,
+            rightWidth: rightWidth,
+        };
+    };
+    /**
+     * @return {?}
+     */
+    MultiTabComponent.prototype.initTab = /**
+     * @return {?}
+     */
+    function () {
+        /** @type {?} */
+        var TabCache = JSON.parse(sessionStorage.getItem("TabCache"));
+        this.tabList = TabCache || [];
+    };
+    /**
+     * @param {?} tab
+     * @param {?} idx
+     * @return {?}
+     */
+    MultiTabComponent.prototype.closeTab = /**
+     * @param {?} tab
+     * @param {?} idx
+     * @return {?}
+     */
+    function (tab, idx) {
+        this.tabList = this.tabList.filter((/**
+         * @param {?} ele
+         * @return {?}
+         */
+        function (ele) { return ele.url !== tab.url; }));
+        this.clearCache(tab.url);
+        if (this.selectedTab === idx) {
+            /** @type {?} */
+            var targetIdx = Math.max(0, idx - 1);
+            this.changeTab(this.tabList[targetIdx], targetIdx);
+        }
+        this.setEllipsisTitle();
+        sessionStorage.setItem("TabCache", JSON.stringify(this.tabList));
+        this.ref.markForCheck();
+    };
+    /**
+     * @param {?} tab
+     * @param {?} idx
+     * @return {?}
+     */
+    MultiTabComponent.prototype.changeTab = /**
+     * @param {?} tab
+     * @param {?} idx
+     * @return {?}
+     */
+    function (tab, idx) {
+        this.router.navigateByUrl(tab.url);
+        this.selectedTab = idx;
+        this.ref.markForCheck();
+    };
+    /**
+     * @param {?} url
+     * @param {?} title
+     * @return {?}
+     */
+    MultiTabComponent.prototype.addTab = /**
+     * @param {?} url
+     * @param {?} title
+     * @return {?}
+     */
+    function (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));
+        this.ref.markForCheck();
+    };
+    /**
+     * @param {?} url
+     * @param {?} pureUrl
+     * @param {?} title
+     * @return {?}
+     */
+    MultiTabComponent.prototype.setTab = /**
+     * @param {?} url
+     * @param {?} pureUrl
+     * @param {?} title
+     * @return {?}
+     */
+    function (url, pureUrl, title) {
+        var _this = this;
+        /** @type {?} */
+        var isExistIdx = this.tabList.findIndex((/**
+         * @param {?} ele
+         * @return {?}
+         */
+        function (ele) { return ele.url === url; }));
+        if (isExistIdx === -1) {
+            /** @type {?} */
+            var singleIdx_1 = this.singleReuseUrls.findIndex((/**
+             * @param {?} ele
+             * @return {?}
+             */
+            function (ele) { return ele === pureUrl; }));
+            if (singleIdx_1 !== -1) {
+                this.tabList = this.tabList.filter((/**
+                 * @param {?} ele
+                 * @return {?}
+                 */
+                function (ele) { return !ele.url.includes(_this.singleReuseUrls[singleIdx_1]); }));
+                this.keepAlive.clearCache(url);
+            }
+            this.addTab(url, title);
+        }
+        else {
+            this.selectedTab = isExistIdx;
+            this.ref.markForCheck();
+        }
+    };
+    /**
+     * @return {?}
+     */
+    MultiTabComponent.prototype.refreshTab = /**
+     * @return {?}
+     */
+    function () {
+        var _this = this;
+        this.keepAlive.clearCache(this.tabList[this.selectedTab].url);
+        /** @type {?} */
+        var currentUrl = this.router.url;
+        this.router.navigateByUrl("/", { skipLocationChange: true }).then((/**
+         * @return {?}
+         */
+        function () {
+            _this.router.navigateByUrl(currentUrl); // 重新导航到当前 URL
+        }));
+    };
+    /**
+     * @param {?} url
+     * @return {?}
+     */
+    MultiTabComponent.prototype.clearCache = /**
+     * @param {?} url
+     * @return {?}
+     */
+    function (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 = function () { return [
+        { type: Router },
+        { type: CommonFunctionService },
+        { type: ActivatedRoute },
+        { type: KeepAliveService },
+        { type: ChangeDetectorRef }
+    ]; };
+    MultiTabComponent.propDecorators = {
+        singleReuseUrls: [{ type: Input }],
+        onResize: [{ type: HostListener, args: ["window:resize", ["$event"],] }]
+    };
+    return MultiTabComponent;
+}());
+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;
+    /**
+     * @type {?}
+     * @private
+     */
+    MultiTabComponent.prototype.ref;
 }
 
 /**
@@ -1302,13 +2018,15 @@ if (false) {
 var MainContainerComponent = /** @class */ (function () {
     function MainContainerComponent() {
         this.isCollapsed = false; // 接收输入属性
+        // 接收输入属性
+        this.singleReuseUrls = []; //只能单个缓存的url
     }
-    // 接收输入属性
+    //只能单个缓存的url
     /**
      * @return {?}
      */
     MainContainerComponent.prototype.ngOnInit = 
-    // 接收输入属性
+    //只能单个缓存的url
     /**
      * @return {?}
      */
@@ -1316,18 +2034,21 @@ var MainContainerComponent = /** @class */ (function () {
     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      <ng-content select=\"[multiTabSlot]\"></ng-content>\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 }]
     };
     return MainContainerComponent;
 }());
 if (false) {
     /** @type {?} */
     MainContainerComponent.prototype.isCollapsed;
+    /** @type {?} */
+    MainContainerComponent.prototype.singleReuseUrls;
 }
 
 /**
@@ -1393,8 +2114,8 @@ var RSHeaderComponent = /** @class */ (function () {
     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 = {
@@ -1479,13 +2200,13 @@ var RSAsideComponent = /** @class */ (function () {
      */
     function (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 */
@@ -1878,42 +2599,15 @@ 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
- */
-var CommonFunctionService = /** @class */ (function () {
-    function CommonFunctionService() {
-    }
-    /**
-     * @return {?}
-     */
-    CommonFunctionService.prototype.testMethod = /**
-     * @return {?}
-     */
-    function () {
-        return "test1111";
-    };
-    CommonFunctionService.decorators = [
-        { type: Injectable, args: [{
-                    providedIn: "root",
-                },] }
-    ];
-    /** @nocollapse */
-    CommonFunctionService.ctorParameters = function () { return []; };
-    /** @nocollapse */ CommonFunctionService.ngInjectableDef = ɵɵdefineInjectable({ factory: function CommonFunctionService_Factory() { return new CommonFunctionService(); }, token: CommonFunctionService, providedIn: "root" });
-    return CommonFunctionService;
-}());
-
 /**
  * @fileoverview added by tsickle
  * Generated from: lib/service/icon-loader.service.ts
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 var IconLoaderService = /** @class */ (function () {
-    function IconLoaderService(iconReg) {
-        this.iconReg = iconReg;
+    function IconLoaderService(registry, domSanitizer) {
+        this.registry = registry;
+        this.domSanitizer = domSanitizer;
     }
     /**
      * @param {?} list
@@ -1926,11 +2620,12 @@ var IconLoaderService = /** @class */ (function () {
     function (list) {
         var _this = this;
         list.forEach((/**
-         * @param {?} item
+         * @param {?} __0
          * @return {?}
          */
-        function (item) {
-            _this.iconReg.loadSvg(item.url, item.name).subscribe();
+        function (_a) {
+            var name = _a.name, path = _a.path;
+            _this.registry.addSvgIcon(name, _this.domSanitizer.bypassSecurityTrustResourceUrl(path));
         }));
     };
     IconLoaderService.decorators = [
@@ -1938,7 +2633,8 @@ var IconLoaderService = /** @class */ (function () {
     ];
     /** @nocollapse */
     IconLoaderService.ctorParameters = function () { return [
-        { type: SvgIconRegistryService }
+        { type: MatIconRegistry },
+        { type: DomSanitizer }
     ]; };
     return IconLoaderService;
 }());
@@ -1947,7 +2643,12 @@ if (false) {
      * @type {?}
      * @private
      */
-    IconLoaderService.prototype.iconReg;
+    IconLoaderService.prototype.registry;
+    /**
+     * @type {?}
+     * @private
+     */
+    IconLoaderService.prototype.domSanitizer;
 }
 
 /**
@@ -2566,10 +3267,13 @@ var RaiseCommonLibModule = /** @class */ (function () {
                     declarations: [
                         CommonGridComponent,
                         FloatBoxComponent,
-                        CommonListComponent,
+                        RsPageListComponent,
+                        RsPageTabComponent,
+                        GridBoxComponent,
                         RSHeaderComponent,
                         RSFooterComponent,
                         RSAsideComponent,
+                        MultiTabComponent,
                         MainContainerComponent,
                         TagInputComponent,
                         RadioGroupComponent,
@@ -2586,6 +3290,7 @@ var RaiseCommonLibModule = /** @class */ (function () {
                         FormsModule,
                         MatSnackBarModule,
                         MatDialogModule,
+                        MatIconModule,
                         GridModule,
                         PagerModule,
                         GridAllModule,
@@ -2617,10 +3322,11 @@ var RaiseCommonLibModule = /** @class */ (function () {
                         DashboardLayoutModule,
                         CarouselAllModule,
                         ToolbarModule,
+                        TabModule,
                         PdfViewerModule,
                         DropDownButtonModule,
+                        SplitButtonModule,
                         RichTextEditorAllModule,
-                        AngularSvgIconModule.forRoot(),
                     ],
                     providers: [
                         PageService,
@@ -2655,6 +3361,7 @@ var RaiseCommonLibModule = /** @class */ (function () {
                         CommonFunctionService,
                         IconLoaderService,
                         DialogService,
+                        KeepAliveService,
                     ],
                     exports: [
                         CommonModule,
@@ -2694,15 +3401,20 @@ var RaiseCommonLibModule = /** @class */ (function () {
                         DashboardLayoutModule,
                         CarouselAllModule,
                         ToolbarModule,
+                        TabModule,
                         PdfViewerModule,
                         DropDownButtonModule,
+                        SplitButtonModule,
                         RichTextEditorAllModule,
                         CommonGridComponent,
                         FloatBoxComponent,
-                        CommonListComponent,
+                        RsPageListComponent,
+                        RsPageTabComponent,
+                        GridBoxComponent,
                         RSHeaderComponent,
                         RSFooterComponent,
                         RSAsideComponent,
+                        MultiTabComponent,
                         MainContainerComponent,
                         TagInputComponent,
                         RadioGroupComponent,
@@ -2731,5 +3443,5 @@ var RaiseCommonLibModule = /** @class */ (function () {
  * @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