cps-ui-kit 0.126.0 → 0.128.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-chip/cps-chip.component.mjs +2 -2
- package/esm2020/lib/components/cps-tab-group/cps-tab/cps-tab.component.mjs +8 -2
- package/esm2020/lib/components/cps-tab-group/cps-tab-group.component.mjs +3 -3
- package/fesm2015/cps-ui-kit.mjs +10 -4
- package/fesm2015/cps-ui-kit.mjs.map +1 -1
- package/fesm2020/cps-ui-kit.mjs +10 -4
- package/fesm2020/cps-ui-kit.mjs.map +1 -1
- package/lib/components/cps-chip/cps-chip.component.d.ts +1 -1
- package/lib/components/cps-tab-group/cps-tab/cps-tab.component.d.ts +3 -1
- package/package.json +1 -1
package/fesm2020/cps-ui-kit.mjs
CHANGED
|
@@ -841,7 +841,7 @@ class CpsChipComponent {
|
|
|
841
841
|
}
|
|
842
842
|
onCloseClick(event) {
|
|
843
843
|
event.stopPropagation();
|
|
844
|
-
this.closed.emit();
|
|
844
|
+
this.closed.emit(this.label);
|
|
845
845
|
}
|
|
846
846
|
}
|
|
847
847
|
CpsChipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
@@ -7014,11 +7014,13 @@ class CpsTabComponent {
|
|
|
7014
7014
|
this.tooltipContentClass = 'cps-tooltip-content';
|
|
7015
7015
|
this.tooltipMaxWidth = '100%';
|
|
7016
7016
|
this.tooltipPersistent = false;
|
|
7017
|
+
this.badgeValue = '';
|
|
7018
|
+
this.badgeTooltip = '';
|
|
7017
7019
|
this.active = false;
|
|
7018
7020
|
}
|
|
7019
7021
|
}
|
|
7020
7022
|
CpsTabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7021
|
-
CpsTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsTabComponent, isStandalone: true, selector: "cps-tab", inputs: { label: "label", icon: "icon", disabled: "disabled", tooltipText: "tooltipText", tooltipContentClass: "tooltipContentClass", tooltipMaxWidth: "tooltipMaxWidth", tooltipPersistent: "tooltipPersistent" }, viewQueries: [{ propertyName: "content", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: "<ng-template #content>\n <ng-content></ng-content>\n</ng-template>\n\n<ng-container *ngTemplateOutlet=\"content\"></ng-container>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
|
|
7023
|
+
CpsTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsTabComponent, isStandalone: true, selector: "cps-tab", inputs: { label: "label", icon: "icon", disabled: "disabled", tooltipText: "tooltipText", tooltipContentClass: "tooltipContentClass", tooltipMaxWidth: "tooltipMaxWidth", tooltipPersistent: "tooltipPersistent", badgeValue: "badgeValue", badgeTooltip: "badgeTooltip" }, viewQueries: [{ propertyName: "content", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: "<ng-template #content>\n <ng-content></ng-content>\n</ng-template>\n\n<ng-container *ngTemplateOutlet=\"content\"></ng-container>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
|
|
7022
7024
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTabComponent, decorators: [{
|
|
7023
7025
|
type: Component,
|
|
7024
7026
|
args: [{ standalone: true, imports: [CommonModule], selector: 'cps-tab', template: "<ng-template #content>\n <ng-content></ng-content>\n</ng-template>\n\n<ng-container *ngTemplateOutlet=\"content\"></ng-container>\n" }]
|
|
@@ -7036,6 +7038,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
7036
7038
|
type: Input
|
|
7037
7039
|
}], tooltipPersistent: [{
|
|
7038
7040
|
type: Input
|
|
7041
|
+
}], badgeValue: [{
|
|
7042
|
+
type: Input
|
|
7043
|
+
}], badgeTooltip: [{
|
|
7044
|
+
type: Input
|
|
7039
7045
|
}], content: [{
|
|
7040
7046
|
type: ViewChild,
|
|
7041
7047
|
args: [TemplateRef]
|
|
@@ -7154,7 +7160,7 @@ class CpsTabGroupComponent {
|
|
|
7154
7160
|
}
|
|
7155
7161
|
}
|
|
7156
7162
|
CpsTabGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTabGroupComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
7157
|
-
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]=\"{ 'cps-tabs-subtabs': isSubTabs }\"\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 ? selectTab(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 <
|
|
7163
|
+
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]=\"{ 'cps-tabs-subtabs': isSubTabs }\"\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 ? selectTab(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 ? selectTab(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 *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%;background-color:inherit}: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: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)}: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: [
|
|
7158
7164
|
trigger('slideInOut', [
|
|
7159
7165
|
state('slideLeft', style({ transform: 'translateX(0)' })),
|
|
7160
7166
|
state('slideRight', style({ transform: 'translateX(0)' })),
|
|
@@ -7210,7 +7216,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
7210
7216
|
animate('0ms ease-out', style({ opacity: 0 }))
|
|
7211
7217
|
])
|
|
7212
7218
|
])
|
|
7213
|
-
], template: "<div\n class=\"cps-tabs\"\n [ngClass]=\"{ 'cps-tabs-subtabs': isSubTabs }\"\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 ? selectTab(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 <
|
|
7219
|
+
], template: "<div\n class=\"cps-tabs\"\n [ngClass]=\"{ 'cps-tabs-subtabs': isSubTabs }\"\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 ? selectTab(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 ? selectTab(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 *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%;background-color:inherit}: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: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)}:host .cps-tab-content.cps-tab-content-subtabs{background-color:#fff}\n"] }]
|
|
7214
7220
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { selectedIndex: [{
|
|
7215
7221
|
type: Input
|
|
7216
7222
|
}], isSubTabs: [{
|