cps-ui-kit 0.162.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 +52 -25
- package/fesm2015/cps-ui-kit.mjs +51 -24
- package/fesm2015/cps-ui-kit.mjs.map +1 -1
- package/fesm2020/cps-ui-kit.mjs +51 -24
- package/fesm2020/cps-ui-kit.mjs.map +1 -1
- package/lib/components/cps-tab-group/cps-tab-group.component.d.ts +20 -10
- package/package.json +1 -1
package/fesm2020/cps-ui-kit.mjs
CHANGED
|
@@ -10118,14 +10118,20 @@ 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
|
-
/**
|
|
10125
|
-
* Index of the selected tab.
|
|
10126
|
-
* @group Props
|
|
10127
|
-
*/
|
|
10128
|
-
this.selectedIndex = 0;
|
|
10129
10135
|
/**
|
|
10130
10136
|
* Determines whether to apply an alternative 'subtabs' styling.
|
|
10131
10137
|
* @group Props
|
|
@@ -10147,19 +10153,24 @@ class CpsTabGroupComponent {
|
|
|
10147
10153
|
*/
|
|
10148
10154
|
this.animationType = 'slide';
|
|
10149
10155
|
/**
|
|
10150
|
-
* Background
|
|
10156
|
+
* Background color of navigation buttons.
|
|
10157
|
+
* @group Props
|
|
10158
|
+
*/
|
|
10159
|
+
this.navButtonsBackground = 'inherit';
|
|
10160
|
+
/**
|
|
10161
|
+
* Background color of tabs.
|
|
10151
10162
|
* @group Props
|
|
10152
10163
|
*/
|
|
10153
10164
|
this.tabsBackground = 'inherit';
|
|
10154
10165
|
/**
|
|
10155
10166
|
* Callback to invoke before tab change.
|
|
10156
|
-
* @param {TabChangeEvent} any - tab
|
|
10167
|
+
* @param {TabChangeEvent} any - tab change event.
|
|
10157
10168
|
* @group Emits
|
|
10158
10169
|
*/
|
|
10159
10170
|
this.beforeTabChanged = new EventEmitter();
|
|
10160
10171
|
/**
|
|
10161
10172
|
* Callback to invoke after tab change.
|
|
10162
|
-
* @param {TabChangeEvent} any - tab
|
|
10173
|
+
* @param {TabChangeEvent} any - tab change event.
|
|
10163
10174
|
* @group Emits
|
|
10164
10175
|
*/
|
|
10165
10176
|
this.afterTabChanged = new EventEmitter();
|
|
@@ -10168,15 +10179,23 @@ class CpsTabGroupComponent {
|
|
|
10168
10179
|
this.animationState = 'fadeIn';
|
|
10169
10180
|
this.windowResize$ = Subscription.EMPTY;
|
|
10170
10181
|
this.listScroll$ = Subscription.EMPTY;
|
|
10182
|
+
this._currentTabIndex = 0;
|
|
10183
|
+
this._previousTabIndex = 0;
|
|
10171
10184
|
}
|
|
10172
10185
|
ngOnInit() {
|
|
10173
10186
|
this.tabsBackground = getCSSColor(this.tabsBackground);
|
|
10187
|
+
this.navButtonsBackground = getCSSColor(this.navButtonsBackground);
|
|
10174
10188
|
this.windowResize$ = fromEvent(window, 'resize')
|
|
10175
10189
|
.pipe(debounceTime(50), distinctUntilChanged())
|
|
10176
10190
|
.subscribe(() => this.onResize());
|
|
10177
10191
|
}
|
|
10192
|
+
ngOnChanges(changes) {
|
|
10193
|
+
if (changes.selectedIndex && !changes.selectedIndex.firstChange) {
|
|
10194
|
+
this.selectTab();
|
|
10195
|
+
}
|
|
10196
|
+
}
|
|
10178
10197
|
ngAfterContentInit() {
|
|
10179
|
-
this.selectTab(
|
|
10198
|
+
this.selectTab();
|
|
10180
10199
|
}
|
|
10181
10200
|
ngAfterViewInit() {
|
|
10182
10201
|
this._updateNavBtnsState();
|
|
@@ -10192,34 +10211,40 @@ class CpsTabGroupComponent {
|
|
|
10192
10211
|
get selectedTab() {
|
|
10193
10212
|
return this.tabs.find((t) => t.active);
|
|
10194
10213
|
}
|
|
10195
|
-
|
|
10214
|
+
onTabClick(index) {
|
|
10215
|
+
this.selectedIndex = index;
|
|
10216
|
+
this.selectTab();
|
|
10217
|
+
}
|
|
10218
|
+
selectTab() {
|
|
10196
10219
|
const _tabs = this.tabs.toArray();
|
|
10197
|
-
const currentSelectedTab = _tabs && _tabs[this.
|
|
10198
|
-
this.beforeTabChanged.emit({
|
|
10199
|
-
currentTabIndex: this.selectedIndex,
|
|
10200
|
-
newTabIndex: newSelectedIndex
|
|
10201
|
-
});
|
|
10220
|
+
const currentSelectedTab = _tabs && _tabs[this._previousTabIndex];
|
|
10202
10221
|
currentSelectedTab && (currentSelectedTab.active = false);
|
|
10203
|
-
const newSelectedTab = _tabs && _tabs[
|
|
10222
|
+
const newSelectedTab = _tabs && _tabs[this._currentTabIndex];
|
|
10204
10223
|
newSelectedTab && (newSelectedTab.active = true);
|
|
10205
|
-
if (
|
|
10224
|
+
if (this._currentTabIndex === this._previousTabIndex) {
|
|
10206
10225
|
return;
|
|
10207
10226
|
}
|
|
10227
|
+
this.beforeTabChanged.emit({
|
|
10228
|
+
previousIndex: this._previousTabIndex,
|
|
10229
|
+
newIndex: this._currentTabIndex
|
|
10230
|
+
});
|
|
10208
10231
|
if (this.animationType === 'slide') {
|
|
10209
10232
|
this.animationState =
|
|
10210
|
-
|
|
10211
|
-
|
|
10233
|
+
this._currentTabIndex < this._previousTabIndex
|
|
10234
|
+
? 'slideLeft'
|
|
10235
|
+
: 'slideRight';
|
|
10212
10236
|
this.afterTabChanged.emit({
|
|
10213
|
-
|
|
10237
|
+
previousIndex: this._previousTabIndex,
|
|
10238
|
+
newIndex: this._currentTabIndex
|
|
10214
10239
|
});
|
|
10215
10240
|
}
|
|
10216
10241
|
else if (this.animationType === 'fade') {
|
|
10217
10242
|
this.animationState = 'fadeOut';
|
|
10218
10243
|
setTimeout(() => {
|
|
10219
10244
|
this.animationState = 'fadeIn';
|
|
10220
|
-
this.selectedIndex = newSelectedIndex;
|
|
10221
10245
|
this.afterTabChanged.emit({
|
|
10222
|
-
|
|
10246
|
+
previousIndex: this._previousTabIndex,
|
|
10247
|
+
newIndex: this._currentTabIndex
|
|
10223
10248
|
});
|
|
10224
10249
|
}, 100);
|
|
10225
10250
|
}
|
|
@@ -10268,7 +10293,7 @@ class CpsTabGroupComponent {
|
|
|
10268
10293
|
}
|
|
10269
10294
|
}
|
|
10270
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 });
|
|
10271
|
-
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", 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]=\"{\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 *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 ?
|
|
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: [
|
|
10272
10297
|
trigger('slideInOut', [
|
|
10273
10298
|
state('slideLeft', style({ transform: 'translateX(0)' })),
|
|
10274
10299
|
state('slideRight', style({ transform: 'translateX(0)' })),
|
|
@@ -10324,7 +10349,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
10324
10349
|
animate('0ms ease-out', style({ opacity: 0 }))
|
|
10325
10350
|
])
|
|
10326
10351
|
])
|
|
10327
|
-
], 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 *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 ?
|
|
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"] }]
|
|
10328
10353
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { selectedIndex: [{
|
|
10329
10354
|
type: Input
|
|
10330
10355
|
}], isSubTabs: [{
|
|
@@ -10335,6 +10360,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
10335
10360
|
type: Input
|
|
10336
10361
|
}], animationType: [{
|
|
10337
10362
|
type: Input
|
|
10363
|
+
}], navButtonsBackground: [{
|
|
10364
|
+
type: Input
|
|
10338
10365
|
}], tabsBackground: [{
|
|
10339
10366
|
type: Input
|
|
10340
10367
|
}], beforeTabChanged: [{
|