raise-common-lib 0.0.155 → 0.0.156
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bundles/raise-common-lib.umd.js +33 -52
- package/bundles/raise-common-lib.umd.js.map +1 -1
- package/bundles/raise-common-lib.umd.min.js +1 -1
- package/bundles/raise-common-lib.umd.min.js.map +1 -1
- package/esm2015/lib/layout/multi-tab/index.component.js +32 -50
- package/esm5/lib/layout/multi-tab/index.component.js +34 -53
- package/fesm2015/raise-common-lib.js +31 -49
- package/fesm2015/raise-common-lib.js.map +1 -1
- package/fesm5/raise-common-lib.js +33 -52
- package/fesm5/raise-common-lib.js.map +1 -1
- package/lib/layout/multi-tab/index.component.d.ts +1 -1
- package/package.json +1 -1
- package/raise-common-lib.metadata.json +1 -1
|
@@ -2827,10 +2827,9 @@ class MultiTabComponent {
|
|
|
2827
2827
|
(sub) => sub.unsubscribe()));
|
|
2828
2828
|
}
|
|
2829
2829
|
/**
|
|
2830
|
-
* @param {?=} title
|
|
2831
2830
|
* @return {?}
|
|
2832
2831
|
*/
|
|
2833
|
-
setEllipsisTitle(
|
|
2832
|
+
setEllipsisTitle() {
|
|
2834
2833
|
this.textGap = this.GAP_NORMAL;
|
|
2835
2834
|
if (this.screenWidth <= 1100) {
|
|
2836
2835
|
this.textGap = this.GAP_SMALL;
|
|
@@ -2838,23 +2837,16 @@ class MultiTabComponent {
|
|
|
2838
2837
|
let { allWidth, leftWidth, rightWidth } = this.calcTabWidth();
|
|
2839
2838
|
/** @type {?} */
|
|
2840
2839
|
let width = Math.floor((allWidth - rightWidth) / (this.tabList && this.tabList.length));
|
|
2841
|
-
|
|
2842
|
-
|
|
2840
|
+
this.tabList.forEach((/**
|
|
2841
|
+
* @param {?} ele
|
|
2842
|
+
* @param {?} idx
|
|
2843
|
+
* @return {?}
|
|
2844
|
+
*/
|
|
2845
|
+
(ele, idx) => {
|
|
2846
|
+
ele.displayTitle = this.cf.setMiddleEllipsis(this.translation[ele.title] || ele.title, width > this.TAB_WIDTH
|
|
2843
2847
|
? this.TAB_WIDTH - this.textGap
|
|
2844
2848
|
: width - this.textGap, 12);
|
|
2845
|
-
}
|
|
2846
|
-
else {
|
|
2847
|
-
this.tabList.forEach((/**
|
|
2848
|
-
* @param {?} ele
|
|
2849
|
-
* @param {?} idx
|
|
2850
|
-
* @return {?}
|
|
2851
|
-
*/
|
|
2852
|
-
(ele, idx) => {
|
|
2853
|
-
ele.displayTitle = this.cf.setMiddleEllipsis(ele.title, width > this.TAB_WIDTH
|
|
2854
|
-
? this.TAB_WIDTH - this.textGap
|
|
2855
|
-
: width - this.textGap, 12);
|
|
2856
|
-
}));
|
|
2857
|
-
}
|
|
2849
|
+
}));
|
|
2858
2850
|
this.ref.markForCheck();
|
|
2859
2851
|
this.ref.detectChanges();
|
|
2860
2852
|
}
|
|
@@ -2902,38 +2894,28 @@ class MultiTabComponent {
|
|
|
2902
2894
|
this.tabList = TabCache || [];
|
|
2903
2895
|
if (this.tabList.length === 0) {
|
|
2904
2896
|
/** @type {?} */
|
|
2905
|
-
const
|
|
2906
|
-
|
|
2907
|
-
|
|
2908
|
-
|
|
2909
|
-
|
|
2910
|
-
|
|
2911
|
-
|
|
2912
|
-
|
|
2913
|
-
|
|
2914
|
-
|
|
2915
|
-
|
|
2916
|
-
|
|
2917
|
-
|
|
2918
|
-
|
|
2919
|
-
|
|
2920
|
-
|
|
2921
|
-
|
|
2922
|
-
|
|
2923
|
-
|
|
2924
|
-
|
|
2925
|
-
* @param {?} ele
|
|
2926
|
-
* @return {?}
|
|
2927
|
-
*/
|
|
2928
|
-
(ele) => ele.url === this.defaultTabUrl));
|
|
2929
|
-
this.tabList.push({
|
|
2930
|
-
url: defaultTab.url,
|
|
2931
|
-
title: defaultTab.label,
|
|
2932
|
-
displayTitle: defaultTab.label,
|
|
2933
|
-
});
|
|
2934
|
-
}
|
|
2935
|
-
this.addTab(target.url, target.label);
|
|
2897
|
+
const pureUrl = this.urlWithoutQuery(this.router.url);
|
|
2898
|
+
/** @type {?} */
|
|
2899
|
+
const target = this.flattenMenu.find((/**
|
|
2900
|
+
* @param {?} ele
|
|
2901
|
+
* @return {?}
|
|
2902
|
+
*/
|
|
2903
|
+
(ele) => ele.url === pureUrl));
|
|
2904
|
+
if (target) {
|
|
2905
|
+
if (target.url !== this.defaultTabUrl) {
|
|
2906
|
+
/** @type {?} */
|
|
2907
|
+
const defaultTab = this.flattenMenu.find((/**
|
|
2908
|
+
* @param {?} ele
|
|
2909
|
+
* @return {?}
|
|
2910
|
+
*/
|
|
2911
|
+
(ele) => ele.url === this.defaultTabUrl));
|
|
2912
|
+
this.tabList.push({
|
|
2913
|
+
url: defaultTab.url,
|
|
2914
|
+
title: this.translation[defaultTab.menuCode] || defaultTab.label,
|
|
2915
|
+
displayTitle: this.translation[defaultTab.menuCode] || defaultTab.label,
|
|
2916
|
+
});
|
|
2936
2917
|
}
|
|
2918
|
+
this.addTab(target.url, this.translation[target.menuCode] || target.label);
|
|
2937
2919
|
}
|
|
2938
2920
|
}
|
|
2939
2921
|
}
|
|
@@ -3140,7 +3122,7 @@ class MultiTabComponent {
|
|
|
3140
3122
|
MultiTabComponent.decorators = [
|
|
3141
3123
|
{ type: Component, args: [{
|
|
3142
3124
|
selector: "rs-multi-tab",
|
|
3143
|
-
template: "<div class=\"rs-multi-tab\" [ngClass]=\"{ 'b-line': tabList.length > 0 }\">\r\n <ul\r\n cdkDropList\r\n cdkDropListOrientation=\"horizontal\"\r\n (cdkDropListDropped)=\"onTabDrop($event)\"\r\n >\r\n <li\r\n class=\"tab-item\"\r\n *ngFor=\"let tab of tabList; let i = index\"\r\n [ngClass]=\"selectedTab === i ? 'isSelect' : 'notSelect'\"\r\n [cdkDragDisabled]=\"i === 0\"\r\n cdkDrag\r\n (click)=\"changeTab(tab, i)\"\r\n >\r\n <ng-template cdkDragPlaceholder let-item>\r\n <div class=\"placeholder\"></div>\r\n </ng-template>\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 && i !== 0\"></span>\r\n <img\r\n *ngIf=\"i !== 0\"\r\n src=\"../../../assets/img/close-url.svg\"\r\n (click)=\"closeTab(i)\"\r\n />\r\n </li>\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 cssClass=\"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\">\r\n {{ translation.REFRESH_CURRENT_TAB || \".REFRESH_CURRENT_TAB\" }}\r\n </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 </div>\r\n</div>\r\n",
|
|
3125
|
+
template: "<div class=\"rs-multi-tab\" [ngClass]=\"{ 'b-line': tabList.length > 0 }\">\r\n <ul\r\n cdkDropList\r\n cdkDropListOrientation=\"horizontal\"\r\n (cdkDropListDropped)=\"onTabDrop($event)\"\r\n >\r\n <li\r\n class=\"tab-item\"\r\n *ngFor=\"let tab of tabList; let i = index\"\r\n [ngClass]=\"selectedTab === i ? 'isSelect' : 'notSelect'\"\r\n [cdkDragDisabled]=\"i === 0\"\r\n cdkDrag\r\n (click)=\"changeTab(tab, i)\"\r\n >\r\n <ng-template cdkDragPlaceholder let-item>\r\n <div class=\"placeholder\"></div>\r\n </ng-template>\r\n <ejs-tooltip\r\n id=\"notSelectTooltip\"\r\n [showTipPointer]=\"false\"\r\n [openDelay]=\"500\"\r\n *ngIf=\"tab.displayTitle !== (translation[tab.title] || tab.title) ; else originText\"\r\n style=\"height: 27px\"\r\n >\r\n <ng-template #content>\r\n <div class=\"tooltip-content\">\r\n {{ translation[tab.title] || 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 && i !== 0\"></span>\r\n <img\r\n *ngIf=\"i !== 0\"\r\n src=\"../../../assets/img/close-url.svg\"\r\n (click)=\"closeTab(i)\"\r\n />\r\n </li>\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 cssClass=\"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\">\r\n {{ translation.REFRESH_CURRENT_TAB || \".REFRESH_CURRENT_TAB\" }}\r\n </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 </div>\r\n</div>\r\n",
|
|
3144
3126
|
styles: ["@charset \"UTF-8\";.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 .tab-item{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 .tab-item .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 .tab-item img{border-radius:4px;padding:4px;margin-left:6px;margin-top:1px;vertical-align:top;cursor:pointer}.rs-multi-tab ul .tab-item img:hover{background:#dce8f6}.rs-multi-tab ul .tab-item:not(:last-child){border-right:none}.rs-multi-tab ul .tab-item:first-of-type{border-top-left-radius:8px}.rs-multi-tab ul .tab-item:last-child{border-top-right-radius:8px}.rs-multi-tab ul.cdk-drop-list-dragging .tab-item.cdk-drag-disabled:hover{background:#f8fafb!important;cursor:no-drop}.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)}.tab-item.cdk-drag{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}.tab-item.cdk-drag .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}.tab-item.cdk-drag img{border-radius:4px;padding:4px;margin-left:6px;margin-top:1px;vertical-align:top;cursor:pointer}.tab-item.cdk-drag img:hover{background:#dce8f6}@-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 .tab-item 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 .tab-item{padding:0 8px}.rs-multi-tab ul .notSelect .img-block{width:0!important}}"]
|
|
3145
3127
|
}] }
|
|
3146
3128
|
];
|