cps-ui-kit 0.162.0 → 0.164.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 +62 -29
- package/fesm2015/cps-ui-kit.mjs +61 -28
- package/fesm2015/cps-ui-kit.mjs.map +1 -1
- package/fesm2020/cps-ui-kit.mjs +61 -28
- 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(true);
|
|
10180
10199
|
}
|
|
10181
10200
|
ngAfterViewInit() {
|
|
10182
10201
|
this._updateNavBtnsState();
|
|
@@ -10192,35 +10211,47 @@ 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(silent = false) {
|
|
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
|
+
if (!silent) {
|
|
10228
|
+
this.beforeTabChanged.emit({
|
|
10229
|
+
previousIndex: this._previousTabIndex,
|
|
10230
|
+
newIndex: this._currentTabIndex
|
|
10231
|
+
});
|
|
10232
|
+
}
|
|
10208
10233
|
if (this.animationType === 'slide') {
|
|
10209
10234
|
this.animationState =
|
|
10210
|
-
|
|
10211
|
-
|
|
10212
|
-
|
|
10213
|
-
|
|
10214
|
-
|
|
10235
|
+
this._currentTabIndex < this._previousTabIndex
|
|
10236
|
+
? 'slideLeft'
|
|
10237
|
+
: 'slideRight';
|
|
10238
|
+
if (!silent) {
|
|
10239
|
+
this.afterTabChanged.emit({
|
|
10240
|
+
previousIndex: this._previousTabIndex,
|
|
10241
|
+
newIndex: this._currentTabIndex
|
|
10242
|
+
});
|
|
10243
|
+
}
|
|
10215
10244
|
}
|
|
10216
10245
|
else if (this.animationType === 'fade') {
|
|
10217
10246
|
this.animationState = 'fadeOut';
|
|
10218
10247
|
setTimeout(() => {
|
|
10219
10248
|
this.animationState = 'fadeIn';
|
|
10220
|
-
|
|
10221
|
-
|
|
10222
|
-
|
|
10223
|
-
|
|
10249
|
+
if (!silent) {
|
|
10250
|
+
this.afterTabChanged.emit({
|
|
10251
|
+
previousIndex: this._previousTabIndex,
|
|
10252
|
+
newIndex: this._currentTabIndex
|
|
10253
|
+
});
|
|
10254
|
+
}
|
|
10224
10255
|
}, 100);
|
|
10225
10256
|
}
|
|
10226
10257
|
}
|
|
@@ -10268,7 +10299,7 @@ class CpsTabGroupComponent {
|
|
|
10268
10299
|
}
|
|
10269
10300
|
}
|
|
10270
10301
|
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 ?
|
|
10302
|
+
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
10303
|
trigger('slideInOut', [
|
|
10273
10304
|
state('slideLeft', style({ transform: 'translateX(0)' })),
|
|
10274
10305
|
state('slideRight', style({ transform: 'translateX(0)' })),
|
|
@@ -10324,7 +10355,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
10324
10355
|
animate('0ms ease-out', style({ opacity: 0 }))
|
|
10325
10356
|
])
|
|
10326
10357
|
])
|
|
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 ?
|
|
10358
|
+
], 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
10359
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { selectedIndex: [{
|
|
10329
10360
|
type: Input
|
|
10330
10361
|
}], isSubTabs: [{
|
|
@@ -10335,6 +10366,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
10335
10366
|
type: Input
|
|
10336
10367
|
}], animationType: [{
|
|
10337
10368
|
type: Input
|
|
10369
|
+
}], navButtonsBackground: [{
|
|
10370
|
+
type: Input
|
|
10338
10371
|
}], tabsBackground: [{
|
|
10339
10372
|
type: Input
|
|
10340
10373
|
}], beforeTabChanged: [{
|