cps-ui-kit 0.52.0 → 0.53.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/cps-tab.component.mjs +5 -2
- package/esm2020/lib/components/cps-tab-group/cps-tab-group.component.mjs +83 -11
- package/fesm2015/cps-ui-kit.mjs +86 -11
- package/fesm2015/cps-ui-kit.mjs.map +1 -1
- package/fesm2020/cps-ui-kit.mjs +84 -11
- package/fesm2020/cps-ui-kit.mjs.map +1 -1
- package/lib/components/cps-tab-group/cps-tab/cps-tab.component.d.ts +2 -1
- package/lib/components/cps-tab-group/cps-tab-group.component.d.ts +24 -6
- package/package.json +1 -1
package/fesm2020/cps-ui-kit.mjs
CHANGED
|
@@ -2,7 +2,7 @@ import * as i2 from '@angular/common';
|
|
|
2
2
|
import { CommonModule, isPlatformBrowser, DOCUMENT } from '@angular/common';
|
|
3
3
|
import * as i0 from '@angular/core';
|
|
4
4
|
import { Component, Input, Directive, HostListener, EventEmitter, Self, Optional, Output, ViewChild, Pipe, PLATFORM_ID, ChangeDetectionStrategy, ViewEncapsulation, Inject, HostBinding, Host, ContentChild, TemplateRef, ContentChildren } from '@angular/core';
|
|
5
|
-
import { Subscription } from 'rxjs';
|
|
5
|
+
import { Subscription, fromEvent, debounceTime, distinctUntilChanged } from 'rxjs';
|
|
6
6
|
import * as i1 from '@angular/forms';
|
|
7
7
|
import { FormsModule } from '@angular/forms';
|
|
8
8
|
import { isEqual, find } from 'lodash-es';
|
|
@@ -5075,6 +5075,7 @@ class CpsTabComponent {
|
|
|
5075
5075
|
constructor() {
|
|
5076
5076
|
this.label = '';
|
|
5077
5077
|
this.icon = '';
|
|
5078
|
+
this.disabled = false;
|
|
5078
5079
|
this.tooltipText = '';
|
|
5079
5080
|
this.tooltipContentClass = 'cps-tooltip-content';
|
|
5080
5081
|
this.tooltipMaxWidth = '100%';
|
|
@@ -5083,7 +5084,7 @@ class CpsTabComponent {
|
|
|
5083
5084
|
}
|
|
5084
5085
|
}
|
|
5085
5086
|
CpsTabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5086
|
-
CpsTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsTabComponent, isStandalone: true, selector: "cps-tab", inputs: { label: "label", icon: "icon", 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"] }] });
|
|
5087
|
+
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"] }] });
|
|
5087
5088
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTabComponent, decorators: [{
|
|
5088
5089
|
type: Component,
|
|
5089
5090
|
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" }]
|
|
@@ -5091,6 +5092,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
5091
5092
|
type: Input
|
|
5092
5093
|
}], icon: [{
|
|
5093
5094
|
type: Input
|
|
5095
|
+
}], disabled: [{
|
|
5096
|
+
type: Input
|
|
5094
5097
|
}], tooltipText: [{
|
|
5095
5098
|
type: Input
|
|
5096
5099
|
}], tooltipContentClass: [{
|
|
@@ -5112,16 +5115,38 @@ class CpsTabGroupComponent {
|
|
|
5112
5115
|
this.isSubTabs = false; // applies an alternative styling to tabs
|
|
5113
5116
|
this.animationType = 'slide';
|
|
5114
5117
|
this.initAllTabsContent = false;
|
|
5115
|
-
this.
|
|
5118
|
+
this.tabsBackground = 'inherit';
|
|
5116
5119
|
this.beforeTabChanged = new EventEmitter();
|
|
5117
5120
|
this.afterTabChanged = new EventEmitter();
|
|
5121
|
+
this.backBtnVisible = false;
|
|
5122
|
+
this.forwardBtnVisible = false;
|
|
5123
|
+
this.animationState = 'slideLeft';
|
|
5124
|
+
this.windowResize$ = Subscription.EMPTY;
|
|
5125
|
+
this.listScroll$ = Subscription.EMPTY;
|
|
5126
|
+
}
|
|
5127
|
+
ngOnInit() {
|
|
5128
|
+
this.tabsBackground = getCSSColor(this.tabsBackground);
|
|
5129
|
+
this.windowResize$ = fromEvent(window, 'resize')
|
|
5130
|
+
.pipe(debounceTime(50), distinctUntilChanged())
|
|
5131
|
+
.subscribe(() => this.onResize());
|
|
5118
5132
|
}
|
|
5119
5133
|
ngAfterContentInit() {
|
|
5120
5134
|
this.selectTab(this.selectedIndex);
|
|
5121
5135
|
}
|
|
5122
5136
|
ngAfterViewInit() {
|
|
5137
|
+
this._updateNavBtnsState();
|
|
5138
|
+
this.listScroll$ = fromEvent(this.tabsList.nativeElement, 'scroll')
|
|
5139
|
+
.pipe(debounceTime(50), distinctUntilChanged())
|
|
5140
|
+
.subscribe((event) => this.onScroll(event));
|
|
5123
5141
|
this.cdRef.detectChanges();
|
|
5124
5142
|
}
|
|
5143
|
+
ngOnDestroy() {
|
|
5144
|
+
this.windowResize$?.unsubscribe();
|
|
5145
|
+
this.listScroll$?.unsubscribe();
|
|
5146
|
+
}
|
|
5147
|
+
get selectedTab() {
|
|
5148
|
+
return this.tabs.find((t) => t.active);
|
|
5149
|
+
}
|
|
5125
5150
|
selectTab(newSelectedIndex) {
|
|
5126
5151
|
const _tabs = this.tabs.toArray();
|
|
5127
5152
|
const currentSelectedTab = _tabs && _tabs[this.selectedIndex];
|
|
@@ -5154,12 +5179,49 @@ class CpsTabGroupComponent {
|
|
|
5154
5179
|
}, 100);
|
|
5155
5180
|
}
|
|
5156
5181
|
}
|
|
5157
|
-
|
|
5158
|
-
|
|
5182
|
+
onScroll(event) {
|
|
5183
|
+
this._updateNavBtnsState();
|
|
5184
|
+
event.preventDefault();
|
|
5185
|
+
}
|
|
5186
|
+
onResize() {
|
|
5187
|
+
this._updateNavBtnsState();
|
|
5188
|
+
}
|
|
5189
|
+
navBackward() {
|
|
5190
|
+
const content = this.tabsList.nativeElement;
|
|
5191
|
+
const width = this._getWidth(content) - this._getVisibleButtonWidths();
|
|
5192
|
+
const pos = content.scrollLeft - width;
|
|
5193
|
+
content.scrollLeft = pos <= 0 ? 0 : pos;
|
|
5194
|
+
}
|
|
5195
|
+
navForward() {
|
|
5196
|
+
const content = this.tabsList.nativeElement;
|
|
5197
|
+
const width = this._getWidth(content) - this._getVisibleButtonWidths();
|
|
5198
|
+
const pos = content.scrollLeft + width;
|
|
5199
|
+
const lastPos = content.scrollWidth - width;
|
|
5200
|
+
content.scrollLeft = pos >= lastPos ? lastPos : pos;
|
|
5201
|
+
}
|
|
5202
|
+
_updateNavBtnsState() {
|
|
5203
|
+
const content = this.tabsList.nativeElement;
|
|
5204
|
+
const { scrollLeft, scrollWidth } = content;
|
|
5205
|
+
const width = this._getWidth(content);
|
|
5206
|
+
this.backBtnVisible = scrollLeft === 0;
|
|
5207
|
+
this.forwardBtnVisible = Math.abs(scrollLeft - scrollWidth + width) < 2;
|
|
5208
|
+
}
|
|
5209
|
+
_getVisibleButtonWidths() {
|
|
5210
|
+
return [this.backBtn?.nativeElement, this.forwardBtn?.nativeElement].reduce((acc, el) => (el ? acc + this._getWidth(el) : acc), 0);
|
|
5211
|
+
}
|
|
5212
|
+
_getWidth(el) {
|
|
5213
|
+
let width = el.offsetWidth;
|
|
5214
|
+
const style = getComputedStyle(el);
|
|
5215
|
+
width -=
|
|
5216
|
+
parseFloat(style.paddingLeft) +
|
|
5217
|
+
parseFloat(style.paddingRight) +
|
|
5218
|
+
parseFloat(style.borderLeftWidth) +
|
|
5219
|
+
parseFloat(style.borderRightWidth);
|
|
5220
|
+
return width;
|
|
5159
5221
|
}
|
|
5160
5222
|
}
|
|
5161
5223
|
CpsTabGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTabGroupComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
5162
|
-
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", initAllTabsContent: "initAllTabsContent" }, outputs: { beforeTabChanged: "beforeTabChanged", afterTabChanged: "afterTabChanged" }, queries: [{ propertyName: "tabs", predicate: CpsTabComponent }], ngImport: i0, template: "<
|
|
5224
|
+
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", initAllTabsContent: "initAllTabsContent", 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 <cps-icon *ngIf=\"tab.icon\" class=\"cps-tab-icon\" [icon]=\"tab.icon\">\n </cps-icon>\n <a class=\"cps-tab-link\">{{ tab.label }}</a>\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 <cps-icon *ngIf=\"tab.icon\" class=\"cps-tab-icon\" [icon]=\"tab.icon\">\n </cps-icon>\n <a class=\"cps-tab-link\">{{ tab.label }}</a>\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 && !initAllTabsContent && animationType === 'slide'\">\n <ng-container [ngTemplateOutlet]=\"tab.content\"></ng-container>\n </div>\n <div\n [@fadeInOut]=\"animationState\"\n *ngIf=\"tab.active && !initAllTabsContent && animationType === 'fade'\">\n <ng-container [ngTemplateOutlet]=\"tab.content\"></ng-container>\n </div>\n <div\n *ngIf=\"initAllTabsContent && animationType === 'slide'\"\n [@slideInOut]=\"animationState\"\n [ngStyle]=\"{ display: tab.active ? null : 'none' }\">\n <ng-container [ngTemplateOutlet]=\"tab.content\"></ng-container>\n </div>\n <div\n *ngIf=\"initAllTabsContent && animationType === 'fade'\"\n [@fadeInOut]=\"animationState\"\n [ngStyle]=\"{ display: tab.active ? null : 'none' }\">\n <ng-container [ngTemplateOutlet]=\"tab.content\"></ng-container>\n </div>\n </ng-container>\n</div>\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::-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}: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: [
|
|
5163
5225
|
trigger('slideInOut', [
|
|
5164
5226
|
state('slideLeft', style({ transform: 'translateX(0)' })),
|
|
5165
5227
|
state('slideRight', style({ transform: 'translateX(0)' })),
|
|
@@ -5215,11 +5277,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
5215
5277
|
animate('0ms ease-out', style({ opacity: 0 }))
|
|
5216
5278
|
])
|
|
5217
5279
|
])
|
|
5218
|
-
], template: "<
|
|
5219
|
-
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: {
|
|
5220
|
-
type: ContentChildren,
|
|
5221
|
-
args: [CpsTabComponent]
|
|
5222
|
-
}], selectedIndex: [{
|
|
5280
|
+
], 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 <cps-icon *ngIf=\"tab.icon\" class=\"cps-tab-icon\" [icon]=\"tab.icon\">\n </cps-icon>\n <a class=\"cps-tab-link\">{{ tab.label }}</a>\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 <cps-icon *ngIf=\"tab.icon\" class=\"cps-tab-icon\" [icon]=\"tab.icon\">\n </cps-icon>\n <a class=\"cps-tab-link\">{{ tab.label }}</a>\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 && !initAllTabsContent && animationType === 'slide'\">\n <ng-container [ngTemplateOutlet]=\"tab.content\"></ng-container>\n </div>\n <div\n [@fadeInOut]=\"animationState\"\n *ngIf=\"tab.active && !initAllTabsContent && animationType === 'fade'\">\n <ng-container [ngTemplateOutlet]=\"tab.content\"></ng-container>\n </div>\n <div\n *ngIf=\"initAllTabsContent && animationType === 'slide'\"\n [@slideInOut]=\"animationState\"\n [ngStyle]=\"{ display: tab.active ? null : 'none' }\">\n <ng-container [ngTemplateOutlet]=\"tab.content\"></ng-container>\n </div>\n <div\n *ngIf=\"initAllTabsContent && animationType === 'fade'\"\n [@fadeInOut]=\"animationState\"\n [ngStyle]=\"{ display: tab.active ? null : 'none' }\">\n <ng-container [ngTemplateOutlet]=\"tab.content\"></ng-container>\n </div>\n </ng-container>\n</div>\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::-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}:host .cps-tab-content.cps-tab-content-subtabs{background-color:#fff}\n"] }]
|
|
5281
|
+
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { selectedIndex: [{
|
|
5223
5282
|
type: Input
|
|
5224
5283
|
}], isSubTabs: [{
|
|
5225
5284
|
type: Input
|
|
@@ -5227,10 +5286,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
5227
5286
|
type: Input
|
|
5228
5287
|
}], initAllTabsContent: [{
|
|
5229
5288
|
type: Input
|
|
5289
|
+
}], tabsBackground: [{
|
|
5290
|
+
type: Input
|
|
5230
5291
|
}], beforeTabChanged: [{
|
|
5231
5292
|
type: Output
|
|
5232
5293
|
}], afterTabChanged: [{
|
|
5233
5294
|
type: Output
|
|
5295
|
+
}], tabsList: [{
|
|
5296
|
+
type: ViewChild,
|
|
5297
|
+
args: ['tabsList']
|
|
5298
|
+
}], backBtn: [{
|
|
5299
|
+
type: ViewChild,
|
|
5300
|
+
args: ['backBtn']
|
|
5301
|
+
}], forwardBtn: [{
|
|
5302
|
+
type: ViewChild,
|
|
5303
|
+
args: ['forwardBtn']
|
|
5304
|
+
}], tabs: [{
|
|
5305
|
+
type: ContentChildren,
|
|
5306
|
+
args: [CpsTabComponent]
|
|
5234
5307
|
}] } });
|
|
5235
5308
|
|
|
5236
5309
|
/*
|