cps-ui-kit 0.161.0 → 0.163.0
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/esm2020/lib/components/cps-tab-group/cps-tab-group.component.mjs +67 -24
- package/fesm2015/cps-ui-kit.mjs +66 -23
- package/fesm2015/cps-ui-kit.mjs.map +1 -1
- package/fesm2020/cps-ui-kit.mjs +66 -23
- package/fesm2020/cps-ui-kit.mjs.map +1 -1
- package/lib/components/cps-tab-group/cps-tab-group.component.d.ts +31 -10
- package/package.json +1 -1
package/fesm2020/cps-ui-kit.mjs
CHANGED
|
@@ -10118,38 +10118,59 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
10118
10118
|
* @group Components
|
|
10119
10119
|
*/
|
|
10120
10120
|
class CpsTabGroupComponent {
|
|
10121
|
+
/**
|
|
10122
|
+
* Index of the selected tab.
|
|
10123
|
+
* @group Props
|
|
10124
|
+
*/
|
|
10125
|
+
set selectedIndex(value) {
|
|
10126
|
+
this._previousTabIndex = this._currentTabIndex;
|
|
10127
|
+
this._currentTabIndex = value;
|
|
10128
|
+
}
|
|
10129
|
+
get selectedIndex() {
|
|
10130
|
+
return this._currentTabIndex;
|
|
10131
|
+
}
|
|
10121
10132
|
// eslint-disable-next-line no-useless-constructor
|
|
10122
10133
|
constructor(cdRef) {
|
|
10123
10134
|
this.cdRef = cdRef;
|
|
10124
10135
|
/**
|
|
10125
|
-
*
|
|
10136
|
+
* Determines whether to apply an alternative 'subtabs' styling.
|
|
10126
10137
|
* @group Props
|
|
10127
10138
|
*/
|
|
10128
|
-
this.
|
|
10139
|
+
this.isSubTabs = false;
|
|
10129
10140
|
/**
|
|
10130
|
-
*
|
|
10141
|
+
* Horizontal alignment of tabs.
|
|
10131
10142
|
* @group Props
|
|
10132
10143
|
*/
|
|
10133
|
-
this.
|
|
10144
|
+
this.alignment = 'left';
|
|
10145
|
+
/**
|
|
10146
|
+
* Determines whether to stretch tabs to fill the available horizontal space.
|
|
10147
|
+
* @group Props
|
|
10148
|
+
*/
|
|
10149
|
+
this.stretched = false;
|
|
10134
10150
|
/**
|
|
10135
10151
|
* Transition options of how content appears, it can be "slide" or "fade".
|
|
10136
10152
|
* @group Props
|
|
10137
10153
|
*/
|
|
10138
10154
|
this.animationType = 'slide';
|
|
10139
10155
|
/**
|
|
10140
|
-
* Background
|
|
10156
|
+
* Background color of navigation buttons.
|
|
10157
|
+
* @group Props
|
|
10158
|
+
*/
|
|
10159
|
+
this.navButtonsBackground = 'inherit';
|
|
10160
|
+
/**
|
|
10161
|
+
* Background color of tabs.
|
|
10141
10162
|
* @group Props
|
|
10142
10163
|
*/
|
|
10143
10164
|
this.tabsBackground = 'inherit';
|
|
10144
10165
|
/**
|
|
10145
10166
|
* Callback to invoke before tab change.
|
|
10146
|
-
* @param {TabChangeEvent} any - tab
|
|
10167
|
+
* @param {TabChangeEvent} any - tab change event.
|
|
10147
10168
|
* @group Emits
|
|
10148
10169
|
*/
|
|
10149
10170
|
this.beforeTabChanged = new EventEmitter();
|
|
10150
10171
|
/**
|
|
10151
10172
|
* Callback to invoke after tab change.
|
|
10152
|
-
* @param {TabChangeEvent} any - tab
|
|
10173
|
+
* @param {TabChangeEvent} any - tab change event.
|
|
10153
10174
|
* @group Emits
|
|
10154
10175
|
*/
|
|
10155
10176
|
this.afterTabChanged = new EventEmitter();
|
|
@@ -10158,15 +10179,23 @@ class CpsTabGroupComponent {
|
|
|
10158
10179
|
this.animationState = 'fadeIn';
|
|
10159
10180
|
this.windowResize$ = Subscription.EMPTY;
|
|
10160
10181
|
this.listScroll$ = Subscription.EMPTY;
|
|
10182
|
+
this._currentTabIndex = 0;
|
|
10183
|
+
this._previousTabIndex = 0;
|
|
10161
10184
|
}
|
|
10162
10185
|
ngOnInit() {
|
|
10163
10186
|
this.tabsBackground = getCSSColor(this.tabsBackground);
|
|
10187
|
+
this.navButtonsBackground = getCSSColor(this.navButtonsBackground);
|
|
10164
10188
|
this.windowResize$ = fromEvent(window, 'resize')
|
|
10165
10189
|
.pipe(debounceTime(50), distinctUntilChanged())
|
|
10166
10190
|
.subscribe(() => this.onResize());
|
|
10167
10191
|
}
|
|
10192
|
+
ngOnChanges(changes) {
|
|
10193
|
+
if (changes.selectedIndex && !changes.selectedIndex.firstChange) {
|
|
10194
|
+
this.selectTab();
|
|
10195
|
+
}
|
|
10196
|
+
}
|
|
10168
10197
|
ngAfterContentInit() {
|
|
10169
|
-
this.selectTab(
|
|
10198
|
+
this.selectTab();
|
|
10170
10199
|
}
|
|
10171
10200
|
ngAfterViewInit() {
|
|
10172
10201
|
this._updateNavBtnsState();
|
|
@@ -10182,34 +10211,40 @@ class CpsTabGroupComponent {
|
|
|
10182
10211
|
get selectedTab() {
|
|
10183
10212
|
return this.tabs.find((t) => t.active);
|
|
10184
10213
|
}
|
|
10185
|
-
|
|
10214
|
+
onTabClick(index) {
|
|
10215
|
+
this.selectedIndex = index;
|
|
10216
|
+
this.selectTab();
|
|
10217
|
+
}
|
|
10218
|
+
selectTab() {
|
|
10186
10219
|
const _tabs = this.tabs.toArray();
|
|
10187
|
-
const currentSelectedTab = _tabs && _tabs[this.
|
|
10188
|
-
this.beforeTabChanged.emit({
|
|
10189
|
-
currentTabIndex: this.selectedIndex,
|
|
10190
|
-
newTabIndex: newSelectedIndex
|
|
10191
|
-
});
|
|
10220
|
+
const currentSelectedTab = _tabs && _tabs[this._previousTabIndex];
|
|
10192
10221
|
currentSelectedTab && (currentSelectedTab.active = false);
|
|
10193
|
-
const newSelectedTab = _tabs && _tabs[
|
|
10222
|
+
const newSelectedTab = _tabs && _tabs[this._currentTabIndex];
|
|
10194
10223
|
newSelectedTab && (newSelectedTab.active = true);
|
|
10195
|
-
if (
|
|
10224
|
+
if (this._currentTabIndex === this._previousTabIndex) {
|
|
10196
10225
|
return;
|
|
10197
10226
|
}
|
|
10227
|
+
this.beforeTabChanged.emit({
|
|
10228
|
+
previousIndex: this._previousTabIndex,
|
|
10229
|
+
newIndex: this._currentTabIndex
|
|
10230
|
+
});
|
|
10198
10231
|
if (this.animationType === 'slide') {
|
|
10199
10232
|
this.animationState =
|
|
10200
|
-
|
|
10201
|
-
|
|
10233
|
+
this._currentTabIndex < this._previousTabIndex
|
|
10234
|
+
? 'slideLeft'
|
|
10235
|
+
: 'slideRight';
|
|
10202
10236
|
this.afterTabChanged.emit({
|
|
10203
|
-
|
|
10237
|
+
previousIndex: this._previousTabIndex,
|
|
10238
|
+
newIndex: this._currentTabIndex
|
|
10204
10239
|
});
|
|
10205
10240
|
}
|
|
10206
10241
|
else if (this.animationType === 'fade') {
|
|
10207
10242
|
this.animationState = 'fadeOut';
|
|
10208
10243
|
setTimeout(() => {
|
|
10209
10244
|
this.animationState = 'fadeIn';
|
|
10210
|
-
this.selectedIndex = newSelectedIndex;
|
|
10211
10245
|
this.afterTabChanged.emit({
|
|
10212
|
-
|
|
10246
|
+
previousIndex: this._previousTabIndex,
|
|
10247
|
+
newIndex: this._currentTabIndex
|
|
10213
10248
|
});
|
|
10214
10249
|
}, 100);
|
|
10215
10250
|
}
|
|
@@ -10246,6 +10281,8 @@ class CpsTabGroupComponent {
|
|
|
10246
10281
|
}
|
|
10247
10282
|
_getWidth(el) {
|
|
10248
10283
|
let width = el.offsetWidth;
|
|
10284
|
+
if (!width)
|
|
10285
|
+
return width;
|
|
10249
10286
|
const style = getComputedStyle(el);
|
|
10250
10287
|
width -=
|
|
10251
10288
|
parseFloat(style.paddingLeft) +
|
|
@@ -10256,7 +10293,7 @@ class CpsTabGroupComponent {
|
|
|
10256
10293
|
}
|
|
10257
10294
|
}
|
|
10258
10295
|
CpsTabGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTabGroupComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
10259
|
-
CpsTabGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsTabGroupComponent, isStandalone: true, selector: "cps-tab-group", inputs: { selectedIndex: "selectedIndex", isSubTabs: "isSubTabs", animationType: "animationType", tabsBackground: "tabsBackground" }, outputs: { beforeTabChanged: "beforeTabChanged", afterTabChanged: "afterTabChanged" }, queries: [{ propertyName: "tabs", predicate: CpsTabComponent }], viewQueries: [{ propertyName: "tabsList", first: true, predicate: ["tabsList"], descendants: true }, { propertyName: "backBtn", first: true, predicate: ["backBtn"], descendants: true }, { propertyName: "forwardBtn", first: true, predicate: ["forwardBtn"], descendants: true }], ngImport: i0, template: "<div\n class=\"cps-tabs\"\n [ngClass]=\"{
|
|
10296
|
+
CpsTabGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsTabGroupComponent, isStandalone: true, selector: "cps-tab-group", inputs: { selectedIndex: "selectedIndex", isSubTabs: "isSubTabs", alignment: "alignment", stretched: "stretched", animationType: "animationType", navButtonsBackground: "navButtonsBackground", tabsBackground: "tabsBackground" }, outputs: { beforeTabChanged: "beforeTabChanged", afterTabChanged: "afterTabChanged" }, queries: [{ propertyName: "tabs", predicate: CpsTabComponent }], viewQueries: [{ propertyName: "tabsList", first: true, predicate: ["tabsList"], descendants: true }, { propertyName: "backBtn", first: true, predicate: ["backBtn"], descendants: true }, { propertyName: "forwardBtn", first: true, predicate: ["forwardBtn"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n class=\"cps-tabs\"\n [ngClass]=\"{\n 'cps-tabs-subtabs': isSubTabs,\n 'cps-tabs-center-aligned': alignment === 'center',\n 'cps-tabs-right-aligned': alignment === 'right',\n 'cps-tabs-stretched': stretched\n }\"\n [ngStyle]=\"{ 'background-color': tabsBackground }\">\n <div\n class=\"nav-btn nav-btn-back\"\n [ngStyle]=\"{ 'background-color': navButtonsBackground }\"\n *ngIf=\"!backBtnVisible\"\n #backBtn\n (click)=\"navBackward()\">\n <cps-icon icon=\"chevron-down\" color=\"text-dark\"></cps-icon>\n </div>\n <ul #tabsList class=\"cps-tabs-list\">\n <ng-container *ngFor=\"let tab of tabs; let tabIndex = index\">\n <li\n *ngIf=\"tab.tooltipText\"\n class=\"cps-tab\"\n (click)=\"!tab.disabled ? onTabClick(tabIndex) : ''\"\n [ngClass]=\"{ active: tab.active, disabled: tab.disabled }\"\n [cpsTooltip]=\"tab.tooltipText\"\n tooltipOpenDelay=\"1000\"\n tooltipCloseDelay=\"0\"\n tooltipPosition=\"bottom\"\n [tooltipMaxWidth]=\"tab.tooltipMaxWidth\"\n [tooltipPersistent]=\"tab.tooltipPersistent\"\n [tooltipContentClass]=\"tab.tooltipContentClass\">\n <ng-container\n *ngTemplateOutlet=\"\n tabHeaderTemplate;\n context: {\n tab: tab\n }\n \"></ng-container>\n </li>\n <li\n *ngIf=\"!tab.tooltipText\"\n class=\"cps-tab\"\n (click)=\"!tab.disabled ? onTabClick(tabIndex) : ''\"\n [ngClass]=\"{ active: tab.active, disabled: tab.disabled }\">\n <ng-container\n *ngTemplateOutlet=\"\n tabHeaderTemplate;\n context: {\n tab: tab\n }\n \"></ng-container>\n </li>\n </ng-container>\n </ul>\n <div\n class=\"nav-btn nav-btn-forward\"\n [ngStyle]=\"{ 'background-color': navButtonsBackground }\"\n *ngIf=\"!forwardBtnVisible\"\n #forwardBtn\n (click)=\"navForward()\">\n <cps-icon icon=\"chevron-down\" color=\"text-dark\"></cps-icon>\n </div>\n</div>\n<div\n class=\"cps-tab-content\"\n [ngClass]=\"{ 'cps-tab-content-subtabs': isSubTabs }\">\n <ng-container *ngFor=\"let tab of tabs\">\n <div\n [@slideInOut]=\"animationState\"\n *ngIf=\"tab.active && animationType === 'slide'\">\n <ng-container [ngTemplateOutlet]=\"tab.content\"></ng-container>\n </div>\n <div\n [@fadeInOut]=\"animationState\"\n *ngIf=\"tab.active && animationType === 'fade'\">\n <ng-container [ngTemplateOutlet]=\"tab.content\"></ng-container>\n </div>\n </ng-container>\n</div>\n\n<ng-template #tabHeaderTemplate let-tab=\"tab\">\n <cps-icon *ngIf=\"tab.icon\" class=\"cps-tab-icon\" [icon]=\"tab.icon\"> </cps-icon>\n <a class=\"cps-tab-link\">{{ tab.label }}</a>\n <ng-container *ngIf=\"tab.badgeValue\">\n <div\n *ngIf=\"tab.badgeTooltip\"\n class=\"cps-tab-badge\"\n [cpsTooltip]=\"tab.badgeTooltip\">\n <span>{{ tab.badgeValue }}</span>\n </div>\n <div *ngIf=\"!tab.badgeTooltip\" class=\"cps-tab-badge\">\n <span>{{ tab.badgeValue }}</span>\n </div>\n </ng-container>\n</ng-template>\n", styles: [":host{background-color:inherit}:host .cps-tabs{display:flex;position:relative}:host .cps-tabs .nav-btn{display:flex;justify-content:center;align-items:center;width:32px;cursor:pointer;position:absolute;height:100%}:host .cps-tabs .nav-btn:hover ::ng-deep cps-icon .cps-icon{color:var(--cps-color-calm)!important}:host .cps-tabs .nav-btn-back{left:0;box-shadow:2px 0 2px -1px #0003}:host .cps-tabs .nav-btn-back cps-icon{transform:rotate(90deg)}:host .cps-tabs .nav-btn-forward{right:0;box-shadow:-2px 0 2px -1px #0003}:host .cps-tabs .nav-btn-forward cps-icon{transform:rotate(270deg)}:host .cps-tabs .cps-tabs-list{display:flex;list-style:none;padding:0;margin:0;overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;overscroll-behavior:contain auto;-ms-overflow-style:none;scrollbar-width:none}:host .cps-tabs .cps-tabs-list .cps-tab{display:inline-flex;align-items:center;justify-content:center;min-width:150px;padding:0 24px;font-family:Source Sans Pro,sans-serif;font-style:normal;font-weight:500;font-size:15px;line-height:20px;color:var(--cps-color-text-dark);opacity:1;cursor:pointer;border-bottom:3px solid transparent;transition:border-bottom .2s}:host .cps-tabs .cps-tabs-list .cps-tab.active:not(.disabled){color:var(--cps-color-calm)}:host .cps-tabs .cps-tabs-list .cps-tab.disabled{cursor:default;color:var(--cps-color-text-light)}:host .cps-tabs .cps-tabs-list .cps-tab .cps-tab-link{text-decoration:none;padding:10px;color:inherit}:host .cps-tabs .cps-tabs-list .cps-tab .cps-tab-badge{min-width:20px;padding:0 3px;height:20px;border-radius:50%;background-color:var(--cps-color-surprise);color:#fff;font-size:12px;display:flex;align-items:center;justify-content:center}:host .cps-tabs .cps-tabs-list::-webkit-scrollbar{display:none}:host .cps-tabs.cps-tabs-center-aligned{justify-content:center}:host .cps-tabs.cps-tabs-right-aligned{justify-content:flex-end}:host .cps-tabs.cps-tabs-stretched ul{flex-grow:1}:host .cps-tabs.cps-tabs-stretched ul li{flex-grow:1}:host .cps-tabs:not(.cps-tabs-subtabs){border-bottom:1px solid rgba(0,0,0,.12)}:host .cps-tabs:not(.cps-tabs-subtabs) .cps-tabs-list .cps-tab.active:not(.disabled){border-bottom:3px solid var(--cps-color-surprise)}:host .cps-tabs:not(.cps-tabs-subtabs) .cps-tabs-list .cps-tab.active.disabled{border-bottom:3px solid var(--cps-color-line-dark)}:host .cps-tabs:not(.cps-tabs-subtabs) .cps-tabs-list .cps-tab:hover:not(:active,.active,.disabled){border-bottom:3px solid var(--cps-color-line-light)}:host .cps-tabs:not(.cps-tabs-subtabs) .cps-tabs-list .cps-tab:active:not(.disabled){border-bottom:3px solid var(--cps-color-line-mid)}:host .cps-tabs.cps-tabs-subtabs .cps-tabs-list .cps-tab{height:33px;background-color:#d7d7d759}:host .cps-tabs.cps-tabs-subtabs .cps-tabs-list .cps-tab.active{background-color:#fff}:host .cps-tabs.cps-tabs-subtabs .cps-tabs-list .cps-tab:hover:not(.disabled){color:var(--cps-color-calm)}:host .cps-tab-content{position:relative;min-height:100px;padding:10px;font-family:Source Sans Pro,sans-serif;color:var(--cps-color-text-dark);overflow-x:hidden}:host .cps-tab-content.cps-tab-content-subtabs{background-color:#fff}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "directive", type: CpsTooltipDirective, selector: "[cpsTooltip]", inputs: ["cpsTooltip", "tooltipOpenDelay", "tooltipCloseDelay", "tooltipOpenOn", "tooltipPosition", "tooltipPersistent", "tooltipDisabled", "tooltipMaxWidth", "tooltipContentClass"] }], animations: [
|
|
10260
10297
|
trigger('slideInOut', [
|
|
10261
10298
|
state('slideLeft', style({ transform: 'translateX(0)' })),
|
|
10262
10299
|
state('slideRight', style({ transform: 'translateX(0)' })),
|
|
@@ -10312,13 +10349,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
10312
10349
|
animate('0ms ease-out', style({ opacity: 0 }))
|
|
10313
10350
|
])
|
|
10314
10351
|
])
|
|
10315
|
-
], template: "<div\n class=\"cps-tabs\"\n [ngClass]=\"{
|
|
10352
|
+
], template: "<div\n class=\"cps-tabs\"\n [ngClass]=\"{\n 'cps-tabs-subtabs': isSubTabs,\n 'cps-tabs-center-aligned': alignment === 'center',\n 'cps-tabs-right-aligned': alignment === 'right',\n 'cps-tabs-stretched': stretched\n }\"\n [ngStyle]=\"{ 'background-color': tabsBackground }\">\n <div\n class=\"nav-btn nav-btn-back\"\n [ngStyle]=\"{ 'background-color': navButtonsBackground }\"\n *ngIf=\"!backBtnVisible\"\n #backBtn\n (click)=\"navBackward()\">\n <cps-icon icon=\"chevron-down\" color=\"text-dark\"></cps-icon>\n </div>\n <ul #tabsList class=\"cps-tabs-list\">\n <ng-container *ngFor=\"let tab of tabs; let tabIndex = index\">\n <li\n *ngIf=\"tab.tooltipText\"\n class=\"cps-tab\"\n (click)=\"!tab.disabled ? onTabClick(tabIndex) : ''\"\n [ngClass]=\"{ active: tab.active, disabled: tab.disabled }\"\n [cpsTooltip]=\"tab.tooltipText\"\n tooltipOpenDelay=\"1000\"\n tooltipCloseDelay=\"0\"\n tooltipPosition=\"bottom\"\n [tooltipMaxWidth]=\"tab.tooltipMaxWidth\"\n [tooltipPersistent]=\"tab.tooltipPersistent\"\n [tooltipContentClass]=\"tab.tooltipContentClass\">\n <ng-container\n *ngTemplateOutlet=\"\n tabHeaderTemplate;\n context: {\n tab: tab\n }\n \"></ng-container>\n </li>\n <li\n *ngIf=\"!tab.tooltipText\"\n class=\"cps-tab\"\n (click)=\"!tab.disabled ? onTabClick(tabIndex) : ''\"\n [ngClass]=\"{ active: tab.active, disabled: tab.disabled }\">\n <ng-container\n *ngTemplateOutlet=\"\n tabHeaderTemplate;\n context: {\n tab: tab\n }\n \"></ng-container>\n </li>\n </ng-container>\n </ul>\n <div\n class=\"nav-btn nav-btn-forward\"\n [ngStyle]=\"{ 'background-color': navButtonsBackground }\"\n *ngIf=\"!forwardBtnVisible\"\n #forwardBtn\n (click)=\"navForward()\">\n <cps-icon icon=\"chevron-down\" color=\"text-dark\"></cps-icon>\n </div>\n</div>\n<div\n class=\"cps-tab-content\"\n [ngClass]=\"{ 'cps-tab-content-subtabs': isSubTabs }\">\n <ng-container *ngFor=\"let tab of tabs\">\n <div\n [@slideInOut]=\"animationState\"\n *ngIf=\"tab.active && animationType === 'slide'\">\n <ng-container [ngTemplateOutlet]=\"tab.content\"></ng-container>\n </div>\n <div\n [@fadeInOut]=\"animationState\"\n *ngIf=\"tab.active && animationType === 'fade'\">\n <ng-container [ngTemplateOutlet]=\"tab.content\"></ng-container>\n </div>\n </ng-container>\n</div>\n\n<ng-template #tabHeaderTemplate let-tab=\"tab\">\n <cps-icon *ngIf=\"tab.icon\" class=\"cps-tab-icon\" [icon]=\"tab.icon\"> </cps-icon>\n <a class=\"cps-tab-link\">{{ tab.label }}</a>\n <ng-container *ngIf=\"tab.badgeValue\">\n <div\n *ngIf=\"tab.badgeTooltip\"\n class=\"cps-tab-badge\"\n [cpsTooltip]=\"tab.badgeTooltip\">\n <span>{{ tab.badgeValue }}</span>\n </div>\n <div *ngIf=\"!tab.badgeTooltip\" class=\"cps-tab-badge\">\n <span>{{ tab.badgeValue }}</span>\n </div>\n </ng-container>\n</ng-template>\n", styles: [":host{background-color:inherit}:host .cps-tabs{display:flex;position:relative}:host .cps-tabs .nav-btn{display:flex;justify-content:center;align-items:center;width:32px;cursor:pointer;position:absolute;height:100%}:host .cps-tabs .nav-btn:hover ::ng-deep cps-icon .cps-icon{color:var(--cps-color-calm)!important}:host .cps-tabs .nav-btn-back{left:0;box-shadow:2px 0 2px -1px #0003}:host .cps-tabs .nav-btn-back cps-icon{transform:rotate(90deg)}:host .cps-tabs .nav-btn-forward{right:0;box-shadow:-2px 0 2px -1px #0003}:host .cps-tabs .nav-btn-forward cps-icon{transform:rotate(270deg)}:host .cps-tabs .cps-tabs-list{display:flex;list-style:none;padding:0;margin:0;overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;overscroll-behavior:contain auto;-ms-overflow-style:none;scrollbar-width:none}:host .cps-tabs .cps-tabs-list .cps-tab{display:inline-flex;align-items:center;justify-content:center;min-width:150px;padding:0 24px;font-family:Source Sans Pro,sans-serif;font-style:normal;font-weight:500;font-size:15px;line-height:20px;color:var(--cps-color-text-dark);opacity:1;cursor:pointer;border-bottom:3px solid transparent;transition:border-bottom .2s}:host .cps-tabs .cps-tabs-list .cps-tab.active:not(.disabled){color:var(--cps-color-calm)}:host .cps-tabs .cps-tabs-list .cps-tab.disabled{cursor:default;color:var(--cps-color-text-light)}:host .cps-tabs .cps-tabs-list .cps-tab .cps-tab-link{text-decoration:none;padding:10px;color:inherit}:host .cps-tabs .cps-tabs-list .cps-tab .cps-tab-badge{min-width:20px;padding:0 3px;height:20px;border-radius:50%;background-color:var(--cps-color-surprise);color:#fff;font-size:12px;display:flex;align-items:center;justify-content:center}:host .cps-tabs .cps-tabs-list::-webkit-scrollbar{display:none}:host .cps-tabs.cps-tabs-center-aligned{justify-content:center}:host .cps-tabs.cps-tabs-right-aligned{justify-content:flex-end}:host .cps-tabs.cps-tabs-stretched ul{flex-grow:1}:host .cps-tabs.cps-tabs-stretched ul li{flex-grow:1}:host .cps-tabs:not(.cps-tabs-subtabs){border-bottom:1px solid rgba(0,0,0,.12)}:host .cps-tabs:not(.cps-tabs-subtabs) .cps-tabs-list .cps-tab.active:not(.disabled){border-bottom:3px solid var(--cps-color-surprise)}:host .cps-tabs:not(.cps-tabs-subtabs) .cps-tabs-list .cps-tab.active.disabled{border-bottom:3px solid var(--cps-color-line-dark)}:host .cps-tabs:not(.cps-tabs-subtabs) .cps-tabs-list .cps-tab:hover:not(:active,.active,.disabled){border-bottom:3px solid var(--cps-color-line-light)}:host .cps-tabs:not(.cps-tabs-subtabs) .cps-tabs-list .cps-tab:active:not(.disabled){border-bottom:3px solid var(--cps-color-line-mid)}:host .cps-tabs.cps-tabs-subtabs .cps-tabs-list .cps-tab{height:33px;background-color:#d7d7d759}:host .cps-tabs.cps-tabs-subtabs .cps-tabs-list .cps-tab.active{background-color:#fff}:host .cps-tabs.cps-tabs-subtabs .cps-tabs-list .cps-tab:hover:not(.disabled){color:var(--cps-color-calm)}:host .cps-tab-content{position:relative;min-height:100px;padding:10px;font-family:Source Sans Pro,sans-serif;color:var(--cps-color-text-dark);overflow-x:hidden}:host .cps-tab-content.cps-tab-content-subtabs{background-color:#fff}\n"] }]
|
|
10316
10353
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { selectedIndex: [{
|
|
10317
10354
|
type: Input
|
|
10318
10355
|
}], isSubTabs: [{
|
|
10319
10356
|
type: Input
|
|
10357
|
+
}], alignment: [{
|
|
10358
|
+
type: Input
|
|
10359
|
+
}], stretched: [{
|
|
10360
|
+
type: Input
|
|
10320
10361
|
}], animationType: [{
|
|
10321
10362
|
type: Input
|
|
10363
|
+
}], navButtonsBackground: [{
|
|
10364
|
+
type: Input
|
|
10322
10365
|
}], tabsBackground: [{
|
|
10323
10366
|
type: Input
|
|
10324
10367
|
}], beforeTabChanged: [{
|