raise-common-lib 0.0.128 → 0.0.130

package/fesm2015/raise-common-lib.js

@@ -2078,7 +2078,7 @@ RsPageListComponent.decorators = [
     { type: Component, args: [{
                 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    <h1 class=\"rs-page-title\" *ngIf=\"pageTitle\">{{ pageTitle }}</h1>\r\n  </ng-template>\r\n  <div class=\"rs-sub-section\">\r\n    <ng-content select=\"[subSectionSlot]\"></ng-content>\r\n  </div>\r\n  <div class=\"rs-content-wrap\">\r\n    <div class=\"rs-content-tab\">\r\n      <ng-content select=\"[contentTabSlot]\"></ng-content>\r\n    </div>\r\n    <div class=\"rs-toolbar-wrap\">\r\n      <div class=\"rs-whole-bar\" *ngIf=\"hasWholeToolbarSlot\">\r\n        <ng-content select=\"[wholeToolbarSlot]\"></ng-content>\r\n      </div>\r\n      <div class=\"rs-left-col\" *ngIf=\"!hasWholeToolbarSlot\">\r\n        <ng-content select=\"[leftToolbarBtnSlot]\"></ng-content>\r\n      </div>\r\n      <div class=\"rs-right-col\" *ngIf=\"!hasWholeToolbarSlot\">\r\n        <ng-content select=\"[rightToolbarBtnSlot]\"></ng-content>\r\n        <div class=\"rs-search-input\" *ngIf=\"!hideSearch\">\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-sub-section{width:100%}.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;padding-bottom:4px;border-bottom:1px solid #eaedf0}.rs-page-list-wrap .rs-content-wrap .rs-toolbar-wrap .rs-whole-bar{width:100%}.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;align-items:center}.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:24px;min-width:auto!important}.rs-page-list-wrap .rs-content-wrap .rs-toolbar-wrap .rs-right-col{gap:12px}.rs-page-list-wrap .rs-content-wrap .rs-left-col{flex:1;width:0}.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}"]
+                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-sub-section{width:100%}.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;padding-bottom:4px;border-bottom:1px solid #eaedf0}.rs-page-list-wrap .rs-content-wrap .rs-toolbar-wrap .rs-whole-bar{width:100%}.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;align-items:center}.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:24px!important;min-width:auto!important}.rs-page-list-wrap .rs-content-wrap .rs-toolbar-wrap .rs-right-col{gap:12px}.rs-page-list-wrap .rs-content-wrap .rs-left-col{flex:1;width:0;gap:4px}.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}"]
             }] }
 ];
 RsPageListComponent.propDecorators = {
@@ -2264,7 +2264,7 @@ 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-content-tab\">\r\n    <ng-content select=\"[contentTabSlot]\"></ng-content>\r\n  </div>\r\n  <div class=\"rs-toolbar-wrap\">\r\n    <div class=\"rs-whole-bar\" *ngIf=\"hasWholeToolbarSlot\">\r\n      <ng-content select=\"[wholeToolbarSlot]\"></ng-content>\r\n    </div>\r\n    <div class=\"rs-left-col\" *ngIf=\"!hasWholeToolbarSlot\">\r\n      <ng-content select=\"[leftToolbarBtnSlot]\"></ng-content>\r\n    </div>\r\n    <div class=\"rs-right-col\" *ngIf=\"!hasWholeToolbarSlot\">\r\n      <ng-content select=\"[rightToolbarBtnSlot]\"></ng-content>\r\n      <div class=\"rs-search-input\" *ngIf=\"!hideSearch\">\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;padding-bottom:4px;border-bottom:1px solid #eaedf0}.rs-grid-box .rs-toolbar-wrap .rs-whole-bar{width:100%}.rs-grid-box .rs-toolbar-wrap .rs-left-col,.rs-grid-box .rs-toolbar-wrap .rs-right-col{display:flex;align-items:center}.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:24px;min-width:auto!important}.rs-grid-box .rs-toolbar-wrap .rs-left-col{flex:1;width:0}.rs-grid-box .rs-toolbar-wrap .rs-right-col{gap:12px}.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}"]
+                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;padding-bottom:4px;border-bottom:1px solid #eaedf0}.rs-grid-box .rs-toolbar-wrap .rs-whole-bar{width:100%}.rs-grid-box .rs-toolbar-wrap .rs-left-col,.rs-grid-box .rs-toolbar-wrap .rs-right-col{display:flex;align-items:center}.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:24px!important;min-width:auto!important}.rs-grid-box .rs-toolbar-wrap .rs-left-col{flex:1;width:0;gap:4px}.rs-grid-box .rs-toolbar-wrap .rs-right-col{gap:12px}.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 = {
@@ -2577,16 +2577,6 @@ class MultiTabComponent {
      * @return {?}
      */
     ngOnInit() {
-        this.subscriptions.push(this.cf.closeTab$.subscribe((/**
-         * @param {?} idx
-         * @return {?}
-         */
-        (idx) => {
-            if (idx === undefined) {
-                idx = this.selectedTab;
-            }
-            this.closeTab(idx);
-        })));
         this.initTab();
         // 解决刷新页面后，选中的 tab 丢失问题
         /** @type {?} */
@@ -2594,7 +2584,8 @@ class MultiTabComponent {
          * @param {?} ele
          * @return {?}
          */
-        (ele) => this.urlWithoutQuery(ele.url) === this.urlWithoutQuery(this.router.url)));
+        (ele) => this.urlWithoutQuery(ele.url) ===
+            this.urlWithoutQuery(this.router.url)));
         if (isExistIdx !== -1) {
             this.selectedTab = isExistIdx;
         }
@@ -2611,6 +2602,18 @@ class MultiTabComponent {
             /** @type {?} */
             const navigation = this.router.getCurrentNavigation();
             if (navigation) {
+                /** @type {?} */
+                const tooltipElements = document.querySelectorAll(".e-popup-open");
+                // 删除tooltips
+                tooltipElements.forEach((/**
+                 * @param {?} element
+                 * @return {?}
+                 */
+                (element) => {
+                    /** @type {?} */
+                    const htmlElement = (/** @type {?} */ (element));
+                    htmlElement.style.display = "none";
+                }));
                 /** @type {?} */
                 const state = navigation.extras.state;
                 // 获取传递的 state
@@ -2624,12 +2627,15 @@ class MultiTabComponent {
                 /** @type {?} */
                 let title = (state && state.title) ||
                     navigationInfo.title ||
-                    navigationInfo.subTitle;
+                    navigationInfo.subTitle ||
+                    navigationInfo.name;
+                /** @type {?} */
+                let noReused = (state && state.noReused) || false;
                 if (currentRoute && !skipLocationChange) {
                     if (this.noGenerateTabUrls.includes(this.urlWithoutQuery(this.router.url))) {
                         return; // 排除不生成tab的url
                     }
-                    this.setTab(this.router.url, currentRoute.snapshot.routeConfig.path, title);
+                    this.setTab(this.router.url, currentRoute.snapshot.routeConfig.path, title, noReused);
                 }
             }
         })));
@@ -2739,9 +2745,10 @@ class MultiTabComponent {
     }
     /**
      * @param {?} idx
+     * @param {?=} isExternal
      * @return {?}
      */
-    closeTab(idx) {
+    closeTab(idx, isExternal) {
         /** @type {?} */
         const tab = this.tabList[idx];
         this.tabList = this.tabList.filter((/**
@@ -2750,11 +2757,14 @@ class MultiTabComponent {
          */
         (ele) => ele.url !== tab.url));
         this.clearCache(this.urlWithoutQuery(tab.url));
-        if (this.selectedTab === idx) {
+        if (!isExternal && this.selectedTab === idx) {
             /** @type {?} */
             const targetIdx = Math.max(0, idx - 1);
             this.changeTab(this.tabList[targetIdx], targetIdx);
         }
+        if (idx < this.selectedTab) {
+            this.selectedTab = this.selectedTab - 1; // 如果关闭的tab在当前选中的tab之前，选中tab索引减1
+        }
         this.setEllipsisTitle();
         sessionStorage.setItem("TabCache", JSON.stringify(this.tabList));
         this.ref.markForCheck();
@@ -2766,6 +2776,15 @@ class MultiTabComponent {
      */
     changeTab(tab, idx) {
         this.router.navigateByUrl(tab.url);
+        if (tab.navigationInfo) {
+            sessionStorage.setItem("navigationInfo", JSON.stringify(tab.navigationInfo));
+        }
+        if (tab.fromUrl) {
+            sessionStorage.setItem("fromUrl", tab.fromUrl);
+        }
+        if (tab.permissions) {
+            sessionStorage.setItem("permissions", JSON.stringify(tab.permissions));
+        }
         this.selectedTab = idx;
         this.ref.markForCheck();
     }
@@ -2776,12 +2795,24 @@ class MultiTabComponent {
      */
     addTab(url, title) {
         if (this.tabList.length >= this.maxTabs) {
-            this.closeTab(0); // 删除第一个
+            this.closeTab(1); // 删除第二个，第一个固定
         }
+        /** @type {?} */
+        const localPermissions = sessionStorage.getItem("permissions") ||
+            localStorage.getItem("permissions");
+        /** @type {?} */
+        const navigationInfo = JSON.parse(sessionStorage.getItem("navigationInfo"));
+        /** @type {?} */
+        const fromUrl = sessionStorage.getItem("fromUrl");
+        /** @type {?} */
+        const permissions = JSON.parse(localPermissions);
         this.tabList.push({
             url: url,
             title: title || "default",
             displayTitle: title,
+            navigationInfo: navigationInfo,
+            permissions: permissions,
+            fromUrl: fromUrl,
         });
         this.selectedTab = this.tabList.length - 1;
         this.setEllipsisTitle();
@@ -2790,11 +2821,12 @@ class MultiTabComponent {
     }
     /**
      * @param {?} url
-     * @param {?=} pureUrl
-     * @param {?=} title
+     * @param {?} pureUrl
+     * @param {?} title
+     * @param {?} noReused
      * @return {?}
      */
-    setTab(url, pureUrl, title) {
+    setTab(url, pureUrl, title, noReused) {
         /** @type {?} */
         const isExistIdx = this.tabList.findIndex((/**
          * @param {?} ele
@@ -2820,7 +2852,16 @@ class MultiTabComponent {
             this.addTab(url, title);
         }
         else {
-            this.selectedTab = isExistIdx;
+            /** @type {?} */
+            const targetTabUrl = this.tabList[isExistIdx].url;
+            if (targetTabUrl !== url || noReused) {
+                // 当缓存一致时候，但是url不一致，重新按照新的url生成tab
+                this.closeTab(isExistIdx, true);
+                this.addTab(url, title);
+            }
+            else {
+                this.changeTab(this.tabList[isExistIdx], isExistIdx);
+            }
             this.ref.markForCheck();
         }
     }
@@ -2871,8 +2912,8 @@ class MultiTabComponent {
 MultiTabComponent.decorators = [
     { type: Component, args: [{
                 selector: "rs-multi-tab",
-                template: "<div class=\"rs-multi-tab\" [ngClass]=\"{ 'b-line': tabList.length > 0 }\">\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(i)\"\r\n        />\r\n      </li>\r\n    </ng-container>\r\n  </ul>\r\n  <div class=\"refresh-tab\" (click)=\"refreshTab()\" *ngIf=\"tabList.length > 0\">\r\n    <ejs-tooltip\r\n      id=\"notSelectTooltip\"\r\n      [showTipPointer]=\"false\"\r\n      [openDelay]=\"500\"\r\n      style=\"height: 27px\"\r\n    >\r\n      <ng-template #content>\r\n        <div class=\"tooltip-content\">Refresh Current Tab</div>\r\n      </ng-template>\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    </ejs-tooltip>\r\n    <span>Refresh Current Tab</span>\r\n  </div>\r\n</div>\r\n",
-                styles: [".rs-multi-tab{width:100%;display:flex;justify-content:space-between;margin:0 auto;max-width:1886px}.rs-multi-tab.b-line{border-bottom:1px solid #e5eaef}.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:28px;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}}"]
+                template: "<div class=\"rs-multi-tab\" [ngClass]=\"{ 'b-line': tabList.length > 0 }\">\r\n\t<ul>\r\n\t\t<ng-container *ngFor=\"let tab of tabList; let i = index\">\r\n\t\t\t<li\r\n\t\t\t\t[ngClass]=\"selectedTab === i ? 'isSelect' : 'notSelect'\"\r\n\t\t\t\t(click)=\"changeTab(tab, i)\"\r\n\t\t\t>\r\n\t\t\t\t<ejs-tooltip\r\n\t\t\t\t\tid=\"notSelectTooltip\"\r\n\t\t\t\t\t[showTipPointer]=\"false\"\r\n\t\t\t\t\t[openDelay]=\"500\"\r\n\t\t\t\t\t*ngIf=\"tab.displayTitle !== tab.title; else originText\"\r\n\t\t\t\t\tstyle=\"height: 27px\"\r\n\t\t\t\t>\r\n\t\t\t\t\t<ng-template #content>\r\n\t\t\t\t\t\t<div class=\"tooltip-content\">\r\n\t\t\t\t\t\t\t{{ tab.title }}\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t<span class=\"tabTitle\">{{ tab.displayTitle }}</span>\r\n\t\t\t\t</ejs-tooltip>\r\n\t\t\t\t<ng-template #originText>\r\n\t\t\t\t\t<span class=\"tabTitle\">\r\n\t\t\t\t\t\t{{ tab.displayTitle }}\r\n\t\t\t\t\t</span>\r\n\t\t\t\t</ng-template>\r\n\t\t\t\t<span\r\n\t\t\t\t\tclass=\"img-block\"\r\n\t\t\t\t\t*ngIf=\"selectedTab !== i && i !== 0\"\r\n\t\t\t\t></span>\r\n\t\t\t\t<img\r\n\t\t\t\t\t*ngIf=\"i !== 0\"\r\n\t\t\t\t\tsrc=\"../../../assets/img/close-url.svg\"\r\n\t\t\t\t\t(click)=\"closeTab(i)\"\r\n\t\t\t\t/>\r\n\t\t\t</li>\r\n\t\t</ng-container>\r\n\t</ul>\r\n\t<div class=\"refresh-tab\" (click)=\"refreshTab()\" *ngIf=\"tabList.length > 0\">\r\n\t\t<ejs-tooltip\r\n\t\t\tid=\"notSelectTooltip\"\r\n\t\t\tcssClass=\"notSelectTooltip\"\r\n\t\t\t[showTipPointer]=\"false\"\r\n\t\t\t[openDelay]=\"500\"\r\n\t\t\tstyle=\"height: 27px\"\r\n\t\t>\r\n\t\t\t<ng-template #content>\r\n\t\t\t\t<div class=\"tooltip-content\">Refresh Current Tab</div>\r\n\t\t\t</ng-template>\r\n\t\t\t<img\r\n\t\t\t\tid=\"loadingIcon\"\r\n\t\t\t\talt\r\n\t\t\t\tclass=\"refresh-btn\"\r\n\t\t\t\tsrc=\"../../../assets/img/desktop-refresh-btn.svg\"\r\n\t\t\t/>\r\n\t\t</ejs-tooltip>\r\n\t</div>\r\n</div>\r\n",
+                styles: [".rs-multi-tab{width:100%;display:flex;justify-content:space-between;margin:0 auto;max-width:1886px}.rs-multi-tab.b-line{border-bottom:1px solid #e5eaef}.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:28px;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}.notSelectTooltip{transform:translateX(-12px)}@-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}.isSelect:not(:first-child){padding-right:20px!important}}@media (max-width:600px){.rs-multi-tab ul li{padding:0 8px}.rs-multi-tab ul .notSelect .img-block{width:0!important}}"]
             }] }
 ];
 /** @nocollapse */
@@ -3299,6 +3340,7 @@ class RSToolbarComponent {
         this.router = router;
         this.ref = ref;
         this.buttons = [];
+        this.disabledOptions = {};
         this.visibleButtons = [];
         this.hiddenButtons = [];
     }
@@ -3330,6 +3372,7 @@ class RSToolbarComponent {
             const buttonWidth = buttonRefs[i].nativeElement.getBoundingClientRect().width;
             // console.log("buttonWidth", buttonWidth);
             if (totalWidth +
+                4 + // 4px margin between buttons
                 buttonWidth +
                 (i < buttonRefs.length - 1 ? menuButtonWidth : 0) <=
                 containerWidth) {
@@ -3356,7 +3399,7 @@ class RSToolbarComponent {
 RSToolbarComponent.decorators = [
     { type: Component, args: [{
                 selector: "rs-toolbar",
-                template: "<div #toolbarContainer class=\"rs-toolbar-container\">\r\n  <!-- \u53EF\u89C1\u6309\u94AE -->\r\n  <ng-container *ngFor=\"let button of buttons\">\r\n    <div class=\"temp-hidden\" #toolbarItem>\r\n      <rs-toolbar-item\r\n        [image]=\"button.image\"\r\n        [text]=\"button.text\"\r\n        [disabled]=\"button.disabled\"\r\n        (click)=\"button.action && button.action()\"\r\n        [children]=\"button.children || []\"\r\n      >\r\n      </rs-toolbar-item>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <!-- \u4E0B\u62C9\u83DC\u5355\uFF08\u5982\u679C\u6709\u9690\u85CF\u6309\u94AE\uFF09 -->\r\n  <button\r\n    *ngIf=\"hiddenButtons.length > 0\"\r\n    mat-button\r\n    [matMenuTriggerFor]=\"menu\"\r\n    #menuTrigger=\"matMenuTrigger\"\r\n    class=\"action-toggle\"\r\n  >\r\n    <mat-icon svgIcon=\"more\"></mat-icon>\r\n  </button>\r\n\r\n  <mat-menu #menu=\"matMenu\">\r\n    <ng-container *ngFor=\"let button of hiddenButtons\">\r\n      <rs-toolbar-item\r\n        [image]=\"button.image\"\r\n        [text]=\"button.text\"\r\n        [disabled]=\"button.disabled\"\r\n        (click)=\"button.action && button.action()\"\r\n        [children]=\"button.children || []\"\r\n      >\r\n      </rs-toolbar-item>\r\n    </ng-container>\r\n  </mat-menu>\r\n</div>\r\n",
+                template: "<div #toolbarContainer class=\"rs-toolbar-container\">\r\n  <!-- \u53EF\u89C1\u6309\u94AE -->\r\n  <ng-container *ngFor=\"let button of buttons\">\r\n    <div class=\"temp-hidden\" #toolbarItem>\r\n      <rs-toolbar-item\r\n        [image]=\"button.image\"\r\n        [text]=\"button.text\"\r\n        [disabled]=\"(button.key && disabledOptions[button.key]) || false\"\r\n        (click)=\"button.action && button.action()\"\r\n        [children]=\"button.children || []\"\r\n        [disabledOptions]=\"disabledOptions\"\r\n      >\r\n      </rs-toolbar-item>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <!-- \u4E0B\u62C9\u83DC\u5355\uFF08\u5982\u679C\u6709\u9690\u85CF\u6309\u94AE\uFF09 -->\r\n  <button\r\n    *ngIf=\"hiddenButtons.length > 0\"\r\n    mat-button\r\n    [matMenuTriggerFor]=\"menu\"\r\n    #menuTrigger=\"matMenuTrigger\"\r\n    class=\"action-toggle\"\r\n  >\r\n    <mat-icon svgIcon=\"more\"></mat-icon>\r\n  </button>\r\n\r\n  <mat-menu #menu=\"matMenu\">\r\n    <ng-container *ngFor=\"let button of hiddenButtons\">\r\n      <rs-toolbar-item\r\n        [image]=\"button.image\"\r\n        [text]=\"button.text\"\r\n        (click)=\"button.action && button.action()\"\r\n        [disabled]=\"disabledOptions[button.key] || false\"\r\n        [children]=\"button.children || []\"\r\n        [disabledOptions]=\"disabledOptions\"\r\n      >\r\n      </rs-toolbar-item>\r\n    </ng-container>\r\n  </mat-menu>\r\n</div>\r\n",
                 styles: [":host{display:block;width:100%}.rs-toolbar-container{width:100%;display:flex;align-items:center}.rs-toolbar-container .temp-hidden{visibility:hidden;position:absolute}.rs-toolbar-container .action-toggle{width:24px;height:24px;min-width:24px;max-width:24px;padding:0;border-radius:4px;display:flex;flex-flow:row nowrap;justify-content:center;align-items:center;background:0 0}.rs-toolbar-container .action-toggle:hover{background:rgba(214,227,245,.2)}.rs-toolbar-container .action-toggle .mat-button-wrapper{max-height:24px;height:24px}.rs-toolbar-container .action-toggle ::ng-deep .mat-icon{width:16px;height:16px;display:flex;flex-flow:row nowrap;justify-content:center;align-items:center}"]
             }] }
 ];
@@ -3367,6 +3410,7 @@ RSToolbarComponent.ctorParameters = () => [
 ];
 RSToolbarComponent.propDecorators = {
     buttons: [{ type: Input }],
+    disabledOptions: [{ type: Input }],
     toolbarContainer: [{ type: ViewChild, args: ["toolbarContainer", { static: false },] }],
     buttonElements: [{ type: ViewChildren, args: ["toolbarItem",] }],
     onWindowResize: [{ type: HostListener, args: ["window:resize",] }]
@@ -3375,6 +3419,8 @@ if (false) {
     /** @type {?} */
     RSToolbarComponent.prototype.buttons;
     /** @type {?} */
+    RSToolbarComponent.prototype.disabledOptions;
+    /** @type {?} */
     RSToolbarComponent.prototype.toolbarContainer;
     /** @type {?} */
     RSToolbarComponent.prototype.buttonElements;
@@ -21395,6 +21441,7 @@ if (false) {
 class ToolbarItemComponent {
     constructor() {
         this.children = [];
+        this.disabledOptions = {};
         this.ImageType = [
             "Add",
             "Delete",
@@ -21423,8 +21470,8 @@ class ToolbarItemComponent {
 ToolbarItemComponent.decorators = [
     { type: Component, args: [{
                 selector: "rs-toolbar-item",
-                template: "<button\r\n  *ngIf=\"!children.length\"\r\n  class=\"toolbar-action-item e-btn text\"\r\n  #buttonElement\r\n  [disabled]=\"!!disabled\"\r\n>\r\n  <span class=\"toolbar-action-image\" [attr.data-type]=\"image\">\r\n    <img *ngIf=\"!ImageType.includes(image)\" [src]=\"image\" />\r\n  </span>\r\n  <span>{{ text }}</span>\r\n</button>\r\n\r\n<button\r\n  *ngIf=\"children.length\"\r\n  class=\"toolbar-action-item e-btn text\"\r\n  #buttonElement\r\n  mat-menu-item\r\n  [matMenuTriggerFor]=\"menu\"\r\n  [disabled]=\"!!disabled\"\r\n>\r\n  <span class=\"toolbar-action-image\" [attr.data-type]=\"image\">\r\n    <img *ngIf=\"!ImageType.includes(image)\" [src]=\"image\" />\r\n  </span>\r\n  <span>{{ text }}</span>\r\n</button>\r\n<mat-menu #menu=\"matMenu\">\r\n  <ng-container *ngFor=\"let button of children\">\r\n    <button\r\n      class=\"toolbar-action-item e-btn text\"\r\n      [disabled]=\"!!button.disabled\"\r\n      (click)=\"button.action()\"\r\n    >\r\n      <span class=\"toolbar-action-image\" [attr.data-type]=\"button.image\">\r\n        <img *ngIf=\"!ImageType.includes(button.image)\" [src]=\"button.image\" />\r\n      </span>\r\n      <span>{{ button.text }}</span>\r\n    </button>\r\n  </ng-container>\r\n</mat-menu>\r\n",
-                styles: ["rs-toolbar-item.disabled{pointer-events:none}.toolbar-action-item{min-width:auto;padding:4px 8px}.toolbar-action-item .toolbar-action-image{height:16px;display:flex;flex-flow:row nowrap;justify-content:center;align-items:center}.toolbar-action-item .toolbar-action-image::before{display:block;width:16px;height:16px;line-height:16px}.toolbar-action-item .toolbar-action-image[data-type=Add]::before{content:url(/assets/img/toolbar-action-add.svg)}.toolbar-action-item .toolbar-action-image[data-type=Delete]::before{content:url(/assets/img/toolbar-action-delete.svg)}.toolbar-action-item .toolbar-action-image[data-type=Import]::before{content:url(/assets/img/toolbar-action-import.svg)}.toolbar-action-item .toolbar-action-image[data-type=Upload]::before{content:url(/assets/img/toolbar-action-upload.svg)}.toolbar-action-item .toolbar-action-image[data-type=Download]::before{content:url(/assets/img/toolbar-action-download.svg)}.toolbar-action-item .toolbar-action-image[data-type=Export]::before{content:url(/assets/img/toolbar-action-export.svg)}.toolbar-action-item .toolbar-action-image[data-type=Duplicate]::before{content:url(/assets/img/toolbar-action-duplicate.svg)}.toolbar-action-item .toolbar-action-image[data-type=Refresh]::before{content:url(/assets/img/toolbar-action-refresh.svg)}.toolbar-action-item .toolbar-action-image img{height:16px;display:block}.toolbar-action-item.e-btn{width:100%;justify-content:flex-start}.toolbar-action-item.mat-menu-item{height:24px!important}.toolbar-action-item.mat-menu-item::after{display:none}"]
+                template: "<button\r\n  *ngIf=\"!children.length\"\r\n  class=\"toolbar-action-item e-btn text\"\r\n  #buttonElement\r\n  [disabled]=\"!!disabled\"\r\n>\r\n  <span class=\"toolbar-action-image\" [attr.data-type]=\"image\">\r\n    <img *ngIf=\"!ImageType.includes(image)\" [src]=\"image\" />\r\n  </span>\r\n  <span>{{ text }}</span>\r\n</button>\r\n\r\n<button\r\n  *ngIf=\"children.length\"\r\n  class=\"toolbar-action-item e-btn text\"\r\n  #buttonElement\r\n  mat-menu-item\r\n  [matMenuTriggerFor]=\"menu\"\r\n  [disabled]=\"!!disabled\"\r\n>\r\n  <span class=\"toolbar-action-image\" [attr.data-type]=\"image\">\r\n    <img *ngIf=\"!ImageType.includes(image)\" [src]=\"image\" />\r\n  </span>\r\n  <span>{{ text }}</span>\r\n</button>\r\n<mat-menu #menu=\"matMenu\">\r\n  <ng-container *ngFor=\"let button of children\">\r\n    <button\r\n      class=\"toolbar-action-item e-btn text\"\r\n      [disabled]=\"(button.key && disabledOptions[button.key]) || false\"\r\n      (click)=\"button.action()\"\r\n    >\r\n      <span class=\"toolbar-action-image\" [attr.data-type]=\"button.image\">\r\n        <img *ngIf=\"!ImageType.includes(button.image)\" [src]=\"button.image\" />\r\n      </span>\r\n      <span>{{ button.text }}</span>\r\n    </button>\r\n  </ng-container>\r\n</mat-menu>\r\n",
+                styles: ["rs-toolbar-item.disabled{pointer-events:none}.toolbar-action-item{min-width:auto;padding:4px 8px}.toolbar-action-item .toolbar-action-image{height:16px;display:flex;flex-flow:row nowrap;justify-content:center;align-items:center}.toolbar-action-item .toolbar-action-image::before{display:block;width:16px;height:16px;line-height:16px}.toolbar-action-item .toolbar-action-image[data-type=Add]::before{content:url(/assets/img/toolbar-action-add.svg)}.toolbar-action-item .toolbar-action-image[data-type=Delete]::before{content:url(/assets/img/toolbar-action-delete.svg)}.toolbar-action-item .toolbar-action-image[data-type=Import]::before{content:url(/assets/img/toolbar-action-import.svg)}.toolbar-action-item .toolbar-action-image[data-type=Upload]::before{content:url(/assets/img/toolbar-action-upload.svg)}.toolbar-action-item .toolbar-action-image[data-type=Download]::before{content:url(/assets/img/toolbar-action-download.svg)}.toolbar-action-item .toolbar-action-image[data-type=Export]::before{content:url(/assets/img/toolbar-action-export.svg)}.toolbar-action-item .toolbar-action-image[data-type=Duplicate]::before{content:url(/assets/img/toolbar-action-duplicate.svg)}.toolbar-action-item .toolbar-action-image[data-type=Refresh]::before{content:url(/assets/img/toolbar-action-refresh.svg)}.toolbar-action-item .toolbar-action-image img{height:16px;display:block}.toolbar-action-item.e-btn{width:100%;justify-content:flex-start}.toolbar-action-item.mat-menu-item::after{display:none}"]
             }] }
 ];
 ToolbarItemComponent.propDecorators = {
@@ -21432,6 +21479,7 @@ ToolbarItemComponent.propDecorators = {
     text: [{ type: Input, args: ["text",] }],
     disabled: [{ type: Input, args: ["disabled",] }],
     children: [{ type: Input, args: ["children",] }],
+    disabledOptions: [{ type: Input }],
     buttonElement: [{ type: ViewChild, args: ["buttonElement", { static: false },] }],
     hostDisabled: [{ type: HostBinding, args: ["class.disabled",] }]
 };
@@ -21445,6 +21493,8 @@ if (false) {
     /** @type {?} */
     ToolbarItemComponent.prototype.children;
     /** @type {?} */
+    ToolbarItemComponent.prototype.disabledOptions;
+    /** @type {?} */
     ToolbarItemComponent.prototype.buttonElement;
     /** @type {?} */
     ToolbarItemComponent.prototype.ImageType;