cps-ui-kit 0.163.0 → 0.165.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-expansion-panel/cps-expansion-panel.component.mjs +79 -48
- package/esm2020/lib/components/cps-tab-group/cps-tab-group.component.mjs +39 -19
- package/fesm2015/cps-ui-kit.mjs +117 -63
- package/fesm2015/cps-ui-kit.mjs.map +1 -1
- package/fesm2020/cps-ui-kit.mjs +114 -63
- package/fesm2020/cps-ui-kit.mjs.map +1 -1
- package/lib/components/cps-expansion-panel/cps-expansion-panel.component.d.ts +12 -2
- package/lib/components/cps-tab-group/cps-tab-group.component.d.ts +17 -7
- package/package.json +1 -1
package/fesm2020/cps-ui-kit.mjs
CHANGED
|
@@ -8,6 +8,7 @@ import { FormsModule } from '@angular/forms';
|
|
|
8
8
|
import { isEqual, cloneDeep } from 'lodash-es';
|
|
9
9
|
import * as i3 from 'primeng/virtualscroller';
|
|
10
10
|
import { VirtualScrollerModule } from 'primeng/virtualscroller';
|
|
11
|
+
import * as i1$5 from '@angular/animations';
|
|
11
12
|
import { trigger, state, style, transition, animate, animation, useAnimation, query, animateChild } from '@angular/animations';
|
|
12
13
|
import * as i1$2 from '@angular/router';
|
|
13
14
|
import { RouterModule } from '@angular/router';
|
|
@@ -9479,12 +9480,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
9479
9480
|
}]
|
|
9480
9481
|
}] });
|
|
9481
9482
|
|
|
9483
|
+
const transitionType = '0.2s cubic-bezier(0.4, 0, 0.2, 1)';
|
|
9482
9484
|
/**
|
|
9483
9485
|
* CpsExpansionPanelComponent is a component that provides content on expansion.
|
|
9484
9486
|
* @group Components
|
|
9485
9487
|
*/
|
|
9486
9488
|
class CpsExpansionPanelComponent {
|
|
9487
|
-
constructor() {
|
|
9489
|
+
constructor(_animationBuilder, _renderer) {
|
|
9490
|
+
this._animationBuilder = _animationBuilder;
|
|
9491
|
+
this._renderer = _renderer;
|
|
9488
9492
|
/**
|
|
9489
9493
|
* Title of the expansionPanel element.
|
|
9490
9494
|
* @group Props
|
|
@@ -9547,6 +9551,22 @@ class CpsExpansionPanelComponent {
|
|
|
9547
9551
|
* @group Emits
|
|
9548
9552
|
*/
|
|
9549
9553
|
this.afterExpand = new EventEmitter();
|
|
9554
|
+
this._contentCollapseAnimation = this._animationBuilder.build([
|
|
9555
|
+
style({
|
|
9556
|
+
height: '*'
|
|
9557
|
+
}),
|
|
9558
|
+
animate(transitionType, style({
|
|
9559
|
+
height: 0
|
|
9560
|
+
}))
|
|
9561
|
+
]);
|
|
9562
|
+
this._contentExpandAnimation = this._animationBuilder.build([
|
|
9563
|
+
style({
|
|
9564
|
+
height: 0
|
|
9565
|
+
}),
|
|
9566
|
+
animate(transitionType, style({
|
|
9567
|
+
height: '*'
|
|
9568
|
+
}))
|
|
9569
|
+
]);
|
|
9550
9570
|
}
|
|
9551
9571
|
ngOnInit() {
|
|
9552
9572
|
this.borderColor = getCSSColor(this.borderColor);
|
|
@@ -9554,33 +9574,58 @@ class CpsExpansionPanelComponent {
|
|
|
9554
9574
|
this.borderRadius = convertSize(this.borderRadius);
|
|
9555
9575
|
this.width = convertSize(this.width);
|
|
9556
9576
|
}
|
|
9577
|
+
ngAfterViewInit() {
|
|
9578
|
+
if (!this.isExpanded) {
|
|
9579
|
+
this._updateContentVisibilityStyles(false);
|
|
9580
|
+
}
|
|
9581
|
+
}
|
|
9557
9582
|
toggleExpansion() {
|
|
9558
|
-
if (
|
|
9559
|
-
|
|
9560
|
-
|
|
9561
|
-
|
|
9562
|
-
|
|
9563
|
-
|
|
9564
|
-
this.
|
|
9565
|
-
}
|
|
9583
|
+
if (this.disabled || this._contentAnimationPlayer)
|
|
9584
|
+
return;
|
|
9585
|
+
const el = this.panelContentElem?.nativeElement;
|
|
9586
|
+
if (this.isExpanded) {
|
|
9587
|
+
this._contentAnimationPlayer = this._contentCollapseAnimation.create(el);
|
|
9588
|
+
this._contentAnimationPlayer.onDone(() => {
|
|
9589
|
+
this._updateContentVisibilityStyles(false, el);
|
|
9590
|
+
});
|
|
9591
|
+
}
|
|
9592
|
+
else {
|
|
9593
|
+
this._updateContentVisibilityStyles(true, el);
|
|
9594
|
+
this._contentAnimationPlayer = this._contentExpandAnimation.create(el);
|
|
9595
|
+
}
|
|
9596
|
+
this._contentAnimationPlayer.onStart(() => {
|
|
9597
|
+
this._renderer.setStyle(el, 'overflow', 'hidden');
|
|
9598
|
+
});
|
|
9599
|
+
this._contentAnimationPlayer.onDone(() => {
|
|
9600
|
+
this._renderer.removeStyle(el, 'overflow');
|
|
9601
|
+
this._contentAnimationPlayer?.destroy();
|
|
9602
|
+
this._contentAnimationPlayer = undefined;
|
|
9603
|
+
});
|
|
9604
|
+
this._contentAnimationPlayer.play();
|
|
9605
|
+
this.isExpanded = !this.isExpanded;
|
|
9606
|
+
if (this.isExpanded) {
|
|
9607
|
+
this.afterExpand.emit();
|
|
9608
|
+
}
|
|
9609
|
+
if (!this.isExpanded) {
|
|
9610
|
+
this.afterCollapse.emit();
|
|
9611
|
+
}
|
|
9612
|
+
}
|
|
9613
|
+
_updateContentVisibilityStyles(isVisible, el) {
|
|
9614
|
+
el = el || this.panelContentElem?.nativeElement;
|
|
9615
|
+
if (!el)
|
|
9616
|
+
return;
|
|
9617
|
+
if (isVisible) {
|
|
9618
|
+
this._renderer.removeStyle(el, 'height');
|
|
9619
|
+
this._renderer.removeStyle(el, 'visibility');
|
|
9620
|
+
}
|
|
9621
|
+
else {
|
|
9622
|
+
this._renderer.setStyle(el, 'height', '0');
|
|
9623
|
+
this._renderer.setStyle(el, 'visibility', 'hidden');
|
|
9566
9624
|
}
|
|
9567
9625
|
}
|
|
9568
9626
|
}
|
|
9569
|
-
CpsExpansionPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsExpansionPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
9570
|
-
CpsExpansionPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsExpansionPanelComponent, isStandalone: true, selector: "cps-expansion-panel", inputs: { headerTitle: "headerTitle", backgroundColor: "backgroundColor", showChevron: "showChevron", isExpanded: "isExpanded", disabled: "disabled", bordered: "bordered", borderRadius: "borderRadius", borderColor: "borderColor", width: "width", prefixIcon: "prefixIcon" }, outputs: { afterCollapse: "afterCollapse", afterExpand: "afterExpand" }, ngImport: i0, template: "<div\n class=\"cps-expansion-panel\"\n [class.expanded]=\"isExpanded\"\n [ngStyle]=\"{\n 'background-color': backgroundColor,\n 'border-radius': borderRadius,\n width: width,\n border: bordered ? '1px solid ' + borderColor : ''\n }\">\n <div\n class=\"cps-expansion-panel-header\"\n [@panelHeader]=\"\n isExpanded\n ? {\n value: 'visible',\n params: {\n borderStyle: bordered ? '1px solid ' + borderColor : ''\n }\n }\n : 'hidden'\n \"\n [ngClass]=\"{ disabled: disabled }\"\n [style.cursor]=\"disabled ? 'default' : 'pointer'\"\n (click)=\"toggleExpansion()\">\n <span class=\"cps-expansion-panel-prefix-icon\" *ngIf=\"prefixIcon\">\n <cps-icon\n [icon]=\"prefixIcon\"\n size=\"small\"\n [color]=\"disabled ? 'text-mild' : 'text-dark'\">\n </cps-icon>\n </span>\n <div class=\"cps-expansion-panel-title\">{{ headerTitle }}</div>\n <span class=\"cps-expansion-panel-chevron\" *ngIf=\"showChevron && !disabled\">\n <cps-icon icon=\"chevron-down\" size=\"small\" color=\"text-dark\"> </cps-icon>\n </span>\n </div>\n <div
|
|
9571
|
-
trigger('panelContent', [
|
|
9572
|
-
state('hidden', style({
|
|
9573
|
-
height: '0',
|
|
9574
|
-
visibility: 'hidden'
|
|
9575
|
-
})),
|
|
9576
|
-
state('visible', style({
|
|
9577
|
-
height: '*'
|
|
9578
|
-
})),
|
|
9579
|
-
transition('visible <=> hidden', [
|
|
9580
|
-
animate('0.2s cubic-bezier(0.4, 0, 0.2, 1)')
|
|
9581
|
-
]),
|
|
9582
|
-
transition('void => *', animate(0))
|
|
9583
|
-
]),
|
|
9627
|
+
CpsExpansionPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsExpansionPanelComponent, deps: [{ token: i1$5.AnimationBuilder }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
|
|
9628
|
+
CpsExpansionPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsExpansionPanelComponent, isStandalone: true, selector: "cps-expansion-panel", inputs: { headerTitle: "headerTitle", backgroundColor: "backgroundColor", showChevron: "showChevron", isExpanded: "isExpanded", disabled: "disabled", bordered: "bordered", borderRadius: "borderRadius", borderColor: "borderColor", width: "width", prefixIcon: "prefixIcon" }, outputs: { afterCollapse: "afterCollapse", afterExpand: "afterExpand" }, viewQueries: [{ propertyName: "panelContentElem", first: true, predicate: ["panelContentElem"], descendants: true }], ngImport: i0, template: "<div\n class=\"cps-expansion-panel\"\n [class.expanded]=\"isExpanded\"\n [ngStyle]=\"{\n 'background-color': backgroundColor,\n 'border-radius': borderRadius,\n width: width,\n border: bordered ? '1px solid ' + borderColor : ''\n }\">\n <div\n class=\"cps-expansion-panel-header\"\n [@panelHeader]=\"\n isExpanded\n ? {\n value: 'visible',\n params: {\n borderStyle: bordered ? '1px solid ' + borderColor : ''\n }\n }\n : 'hidden'\n \"\n [ngClass]=\"{ disabled: disabled }\"\n [style.cursor]=\"disabled ? 'default' : 'pointer'\"\n (click)=\"toggleExpansion()\">\n <span class=\"cps-expansion-panel-prefix-icon\" *ngIf=\"prefixIcon\">\n <cps-icon\n [icon]=\"prefixIcon\"\n size=\"small\"\n [color]=\"disabled ? 'text-mild' : 'text-dark'\">\n </cps-icon>\n </span>\n <div class=\"cps-expansion-panel-title\">{{ headerTitle }}</div>\n <span class=\"cps-expansion-panel-chevron\" *ngIf=\"showChevron && !disabled\">\n <cps-icon icon=\"chevron-down\" size=\"small\" color=\"text-dark\"> </cps-icon>\n </span>\n </div>\n <div class=\"cps-expansion-panel-content\" #panelContentElem>\n <div class=\"cps-expansion-panel-content-inner\">\n <ng-content></ng-content>\n </div>\n </div>\n</div>\n", styles: [":host{display:flex}:host .cps-expansion-panel{overflow:hidden;font-family:Source Sans Pro,sans-serif;line-height:20px;color:var(--cps-color-text-dark)}:host .cps-expansion-panel-header{border-bottom-color:transparent;display:flex;align-items:center;padding:10px 16px 10px 24px;font-size:16px;justify-content:space-between;-webkit-user-select:none;user-select:none}:host .cps-expansion-panel-header:hover{background-color:var(--cps-color-highlight-hover)}:host .cps-expansion-panel-header:active{background-color:var(--cps-color-highlight-active)}:host .cps-expansion-panel-header.disabled{pointer-events:none;color:var(--cps-color-text-mild)}:host .cps-expansion-panel-prefix-icon{display:flex;align-items:center;margin-right:12px;margin-bottom:2px}:host .cps-expansion-panel-prefix-icon cps-icon ::ng-deep .cps-icon{width:18px;height:18px}:host .cps-expansion-panel-title{flex:1 0 auto;display:inline-flex;font-weight:600}:host .cps-expansion-panel-chevron{width:16px;display:flex;align-items:center;transition-duration:.2s;margin-left:6px}:host .cps-expansion-panel-content{overflow:auto;color:var(--cps-color-text-dark);font-size:16px}:host .cps-expansion-panel-content-inner{padding:16px 24px}:host .cps-expansion-panel.expanded .cps-expansion-panel-content{max-height:500px}:host .cps-expansion-panel.expanded .cps-expansion-panel-chevron{transform:rotate(180deg)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }], animations: [
|
|
9584
9629
|
trigger('panelHeader', [
|
|
9585
9630
|
state('hidden', style({
|
|
9586
9631
|
borderBottom: ''
|
|
@@ -9588,28 +9633,13 @@ CpsExpansionPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0
|
|
|
9588
9633
|
state('visible', style({
|
|
9589
9634
|
borderBottom: '{{borderStyle}}'
|
|
9590
9635
|
}), { params: { borderStyle: '' } }),
|
|
9591
|
-
transition('visible <=> hidden', [
|
|
9592
|
-
animate('0.2s cubic-bezier(0.4, 0, 0.2, 1)')
|
|
9593
|
-
]),
|
|
9636
|
+
transition('visible <=> hidden', [animate(transitionType)]),
|
|
9594
9637
|
transition('void => *', animate(0))
|
|
9595
9638
|
])
|
|
9596
9639
|
] });
|
|
9597
9640
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsExpansionPanelComponent, decorators: [{
|
|
9598
9641
|
type: Component,
|
|
9599
9642
|
args: [{ standalone: true, imports: [CommonModule, CpsIconComponent], selector: 'cps-expansion-panel', animations: [
|
|
9600
|
-
trigger('panelContent', [
|
|
9601
|
-
state('hidden', style({
|
|
9602
|
-
height: '0',
|
|
9603
|
-
visibility: 'hidden'
|
|
9604
|
-
})),
|
|
9605
|
-
state('visible', style({
|
|
9606
|
-
height: '*'
|
|
9607
|
-
})),
|
|
9608
|
-
transition('visible <=> hidden', [
|
|
9609
|
-
animate('0.2s cubic-bezier(0.4, 0, 0.2, 1)')
|
|
9610
|
-
]),
|
|
9611
|
-
transition('void => *', animate(0))
|
|
9612
|
-
]),
|
|
9613
9643
|
trigger('panelHeader', [
|
|
9614
9644
|
state('hidden', style({
|
|
9615
9645
|
borderBottom: ''
|
|
@@ -9617,13 +9647,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
9617
9647
|
state('visible', style({
|
|
9618
9648
|
borderBottom: '{{borderStyle}}'
|
|
9619
9649
|
}), { params: { borderStyle: '' } }),
|
|
9620
|
-
transition('visible <=> hidden', [
|
|
9621
|
-
animate('0.2s cubic-bezier(0.4, 0, 0.2, 1)')
|
|
9622
|
-
]),
|
|
9650
|
+
transition('visible <=> hidden', [animate(transitionType)]),
|
|
9623
9651
|
transition('void => *', animate(0))
|
|
9624
9652
|
])
|
|
9625
|
-
], template: "<div\n class=\"cps-expansion-panel\"\n [class.expanded]=\"isExpanded\"\n [ngStyle]=\"{\n 'background-color': backgroundColor,\n 'border-radius': borderRadius,\n width: width,\n border: bordered ? '1px solid ' + borderColor : ''\n }\">\n <div\n class=\"cps-expansion-panel-header\"\n [@panelHeader]=\"\n isExpanded\n ? {\n value: 'visible',\n params: {\n borderStyle: bordered ? '1px solid ' + borderColor : ''\n }\n }\n : 'hidden'\n \"\n [ngClass]=\"{ disabled: disabled }\"\n [style.cursor]=\"disabled ? 'default' : 'pointer'\"\n (click)=\"toggleExpansion()\">\n <span class=\"cps-expansion-panel-prefix-icon\" *ngIf=\"prefixIcon\">\n <cps-icon\n [icon]=\"prefixIcon\"\n size=\"small\"\n [color]=\"disabled ? 'text-mild' : 'text-dark'\">\n </cps-icon>\n </span>\n <div class=\"cps-expansion-panel-title\">{{ headerTitle }}</div>\n <span class=\"cps-expansion-panel-chevron\" *ngIf=\"showChevron && !disabled\">\n <cps-icon icon=\"chevron-down\" size=\"small\" color=\"text-dark\"> </cps-icon>\n </span>\n </div>\n <div
|
|
9626
|
-
}], propDecorators: { headerTitle: [{
|
|
9653
|
+
], template: "<div\n class=\"cps-expansion-panel\"\n [class.expanded]=\"isExpanded\"\n [ngStyle]=\"{\n 'background-color': backgroundColor,\n 'border-radius': borderRadius,\n width: width,\n border: bordered ? '1px solid ' + borderColor : ''\n }\">\n <div\n class=\"cps-expansion-panel-header\"\n [@panelHeader]=\"\n isExpanded\n ? {\n value: 'visible',\n params: {\n borderStyle: bordered ? '1px solid ' + borderColor : ''\n }\n }\n : 'hidden'\n \"\n [ngClass]=\"{ disabled: disabled }\"\n [style.cursor]=\"disabled ? 'default' : 'pointer'\"\n (click)=\"toggleExpansion()\">\n <span class=\"cps-expansion-panel-prefix-icon\" *ngIf=\"prefixIcon\">\n <cps-icon\n [icon]=\"prefixIcon\"\n size=\"small\"\n [color]=\"disabled ? 'text-mild' : 'text-dark'\">\n </cps-icon>\n </span>\n <div class=\"cps-expansion-panel-title\">{{ headerTitle }}</div>\n <span class=\"cps-expansion-panel-chevron\" *ngIf=\"showChevron && !disabled\">\n <cps-icon icon=\"chevron-down\" size=\"small\" color=\"text-dark\"> </cps-icon>\n </span>\n </div>\n <div class=\"cps-expansion-panel-content\" #panelContentElem>\n <div class=\"cps-expansion-panel-content-inner\">\n <ng-content></ng-content>\n </div>\n </div>\n</div>\n", styles: [":host{display:flex}:host .cps-expansion-panel{overflow:hidden;font-family:Source Sans Pro,sans-serif;line-height:20px;color:var(--cps-color-text-dark)}:host .cps-expansion-panel-header{border-bottom-color:transparent;display:flex;align-items:center;padding:10px 16px 10px 24px;font-size:16px;justify-content:space-between;-webkit-user-select:none;user-select:none}:host .cps-expansion-panel-header:hover{background-color:var(--cps-color-highlight-hover)}:host .cps-expansion-panel-header:active{background-color:var(--cps-color-highlight-active)}:host .cps-expansion-panel-header.disabled{pointer-events:none;color:var(--cps-color-text-mild)}:host .cps-expansion-panel-prefix-icon{display:flex;align-items:center;margin-right:12px;margin-bottom:2px}:host .cps-expansion-panel-prefix-icon cps-icon ::ng-deep .cps-icon{width:18px;height:18px}:host .cps-expansion-panel-title{flex:1 0 auto;display:inline-flex;font-weight:600}:host .cps-expansion-panel-chevron{width:16px;display:flex;align-items:center;transition-duration:.2s;margin-left:6px}:host .cps-expansion-panel-content{overflow:auto;color:var(--cps-color-text-dark);font-size:16px}:host .cps-expansion-panel-content-inner{padding:16px 24px}:host .cps-expansion-panel.expanded .cps-expansion-panel-content{max-height:500px}:host .cps-expansion-panel.expanded .cps-expansion-panel-chevron{transform:rotate(180deg)}\n"] }]
|
|
9654
|
+
}], ctorParameters: function () { return [{ type: i1$5.AnimationBuilder }, { type: i0.Renderer2 }]; }, propDecorators: { headerTitle: [{
|
|
9627
9655
|
type: Input
|
|
9628
9656
|
}], backgroundColor: [{
|
|
9629
9657
|
type: Input
|
|
@@ -9647,6 +9675,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
9647
9675
|
type: Output
|
|
9648
9676
|
}], afterExpand: [{
|
|
9649
9677
|
type: Output
|
|
9678
|
+
}], panelContentElem: [{
|
|
9679
|
+
type: ViewChild,
|
|
9680
|
+
args: ['panelContentElem']
|
|
9650
9681
|
}] } });
|
|
9651
9682
|
|
|
9652
9683
|
/**
|
|
@@ -10142,6 +10173,16 @@ class CpsTabGroupComponent {
|
|
|
10142
10173
|
* @group Props
|
|
10143
10174
|
*/
|
|
10144
10175
|
this.alignment = 'left';
|
|
10176
|
+
/**
|
|
10177
|
+
* Class to apply to the tab content wrapper.
|
|
10178
|
+
* @group Props
|
|
10179
|
+
*/
|
|
10180
|
+
this.contentWrapClass = '';
|
|
10181
|
+
/**
|
|
10182
|
+
* Class to apply to the tab header.
|
|
10183
|
+
* @group Props
|
|
10184
|
+
*/
|
|
10185
|
+
this.headerClass = '';
|
|
10145
10186
|
/**
|
|
10146
10187
|
* Determines whether to stretch tabs to fill the available horizontal space.
|
|
10147
10188
|
* @group Props
|
|
@@ -10164,13 +10205,13 @@ class CpsTabGroupComponent {
|
|
|
10164
10205
|
this.tabsBackground = 'inherit';
|
|
10165
10206
|
/**
|
|
10166
10207
|
* Callback to invoke before tab change.
|
|
10167
|
-
* @param {
|
|
10208
|
+
* @param {CpsTabChangeEvent} any - tab change event.
|
|
10168
10209
|
* @group Emits
|
|
10169
10210
|
*/
|
|
10170
10211
|
this.beforeTabChanged = new EventEmitter();
|
|
10171
10212
|
/**
|
|
10172
10213
|
* Callback to invoke after tab change.
|
|
10173
|
-
* @param {
|
|
10214
|
+
* @param {CpsTabChangeEvent} any - tab change event.
|
|
10174
10215
|
* @group Emits
|
|
10175
10216
|
*/
|
|
10176
10217
|
this.afterTabChanged = new EventEmitter();
|
|
@@ -10195,7 +10236,7 @@ class CpsTabGroupComponent {
|
|
|
10195
10236
|
}
|
|
10196
10237
|
}
|
|
10197
10238
|
ngAfterContentInit() {
|
|
10198
|
-
this.selectTab();
|
|
10239
|
+
this.selectTab(true);
|
|
10199
10240
|
}
|
|
10200
10241
|
ngAfterViewInit() {
|
|
10201
10242
|
this._updateNavBtnsState();
|
|
@@ -10215,7 +10256,7 @@ class CpsTabGroupComponent {
|
|
|
10215
10256
|
this.selectedIndex = index;
|
|
10216
10257
|
this.selectTab();
|
|
10217
10258
|
}
|
|
10218
|
-
selectTab() {
|
|
10259
|
+
selectTab(silent = false) {
|
|
10219
10260
|
const _tabs = this.tabs.toArray();
|
|
10220
10261
|
const currentSelectedTab = _tabs && _tabs[this._previousTabIndex];
|
|
10221
10262
|
currentSelectedTab && (currentSelectedTab.active = false);
|
|
@@ -10224,28 +10265,34 @@ class CpsTabGroupComponent {
|
|
|
10224
10265
|
if (this._currentTabIndex === this._previousTabIndex) {
|
|
10225
10266
|
return;
|
|
10226
10267
|
}
|
|
10227
|
-
|
|
10228
|
-
|
|
10229
|
-
|
|
10230
|
-
|
|
10268
|
+
if (!silent) {
|
|
10269
|
+
this.beforeTabChanged.emit({
|
|
10270
|
+
previousIndex: this._previousTabIndex,
|
|
10271
|
+
newIndex: this._currentTabIndex
|
|
10272
|
+
});
|
|
10273
|
+
}
|
|
10231
10274
|
if (this.animationType === 'slide') {
|
|
10232
10275
|
this.animationState =
|
|
10233
10276
|
this._currentTabIndex < this._previousTabIndex
|
|
10234
10277
|
? 'slideLeft'
|
|
10235
10278
|
: 'slideRight';
|
|
10236
|
-
|
|
10237
|
-
|
|
10238
|
-
|
|
10239
|
-
|
|
10279
|
+
if (!silent) {
|
|
10280
|
+
this.afterTabChanged.emit({
|
|
10281
|
+
previousIndex: this._previousTabIndex,
|
|
10282
|
+
newIndex: this._currentTabIndex
|
|
10283
|
+
});
|
|
10284
|
+
}
|
|
10240
10285
|
}
|
|
10241
10286
|
else if (this.animationType === 'fade') {
|
|
10242
10287
|
this.animationState = 'fadeOut';
|
|
10243
10288
|
setTimeout(() => {
|
|
10244
10289
|
this.animationState = 'fadeIn';
|
|
10245
|
-
|
|
10246
|
-
|
|
10247
|
-
|
|
10248
|
-
|
|
10290
|
+
if (!silent) {
|
|
10291
|
+
this.afterTabChanged.emit({
|
|
10292
|
+
previousIndex: this._previousTabIndex,
|
|
10293
|
+
newIndex: this._currentTabIndex
|
|
10294
|
+
});
|
|
10295
|
+
}
|
|
10249
10296
|
}, 100);
|
|
10250
10297
|
}
|
|
10251
10298
|
}
|
|
@@ -10293,7 +10340,7 @@ class CpsTabGroupComponent {
|
|
|
10293
10340
|
}
|
|
10294
10341
|
}
|
|
10295
10342
|
CpsTabGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTabGroupComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
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]=\"{
|
|
10343
|
+
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", contentWrapClass: "contentWrapClass", headerClass: "headerClass", 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 [class]=\"headerClass\"\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-wrap\"\n [class]=\"contentWrapClass\"\n [ngClass]=\"{\n 'cps-tab-content-wrap-subtabs': isSubTabs\n }\">\n <ng-container *ngFor=\"let tab of tabs\">\n <div class=\"cps-tab-content\" *ngIf=\"tab.active\">\n <div\n [@slideInOut]=\"animationState\"\n *ngIf=\"animationType === 'slide'\"\n class=\"cps-tab-content-inner\">\n <ng-container [ngTemplateOutlet]=\"tab.content\"></ng-container>\n </div>\n <div\n [@fadeInOut]=\"animationState\"\n *ngIf=\"animationType === 'fade'\"\n class=\"cps-tab-content-inner\">\n <ng-container [ngTemplateOutlet]=\"tab.content\"></ng-container>\n </div>\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;margin:0!important;display:flex;flex-direction:column;max-width:100%}: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-wrap{display:flex;position:relative;min-height:100px;font-family:Source Sans Pro,sans-serif;color:var(--cps-color-text-dark);flex:1;border-bottom:none;overflow:hidden}:host .cps-tab-content-wrap .cps-tab-content{display:block;position:relative;overflow-x:hidden;overflow-y:auto;flex-grow:1;flex-basis:100%;inset:0;outline:0}:host .cps-tab-content-wrap .cps-tab-content .cps-tab-content-inner{height:100%;overflow:auto}:host .cps-tab-content-wrap.cps-tab-content-wrap-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: [
|
|
10297
10344
|
trigger('slideInOut', [
|
|
10298
10345
|
state('slideLeft', style({ transform: 'translateX(0)' })),
|
|
10299
10346
|
state('slideRight', style({ transform: 'translateX(0)' })),
|
|
@@ -10349,13 +10396,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
10349
10396
|
animate('0ms ease-out', style({ opacity: 0 }))
|
|
10350
10397
|
])
|
|
10351
10398
|
])
|
|
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]=\"{
|
|
10399
|
+
], template: "<div\n class=\"cps-tabs\"\n [class]=\"headerClass\"\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-wrap\"\n [class]=\"contentWrapClass\"\n [ngClass]=\"{\n 'cps-tab-content-wrap-subtabs': isSubTabs\n }\">\n <ng-container *ngFor=\"let tab of tabs\">\n <div class=\"cps-tab-content\" *ngIf=\"tab.active\">\n <div\n [@slideInOut]=\"animationState\"\n *ngIf=\"animationType === 'slide'\"\n class=\"cps-tab-content-inner\">\n <ng-container [ngTemplateOutlet]=\"tab.content\"></ng-container>\n </div>\n <div\n [@fadeInOut]=\"animationState\"\n *ngIf=\"animationType === 'fade'\"\n class=\"cps-tab-content-inner\">\n <ng-container [ngTemplateOutlet]=\"tab.content\"></ng-container>\n </div>\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;margin:0!important;display:flex;flex-direction:column;max-width:100%}: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-wrap{display:flex;position:relative;min-height:100px;font-family:Source Sans Pro,sans-serif;color:var(--cps-color-text-dark);flex:1;border-bottom:none;overflow:hidden}:host .cps-tab-content-wrap .cps-tab-content{display:block;position:relative;overflow-x:hidden;overflow-y:auto;flex-grow:1;flex-basis:100%;inset:0;outline:0}:host .cps-tab-content-wrap .cps-tab-content .cps-tab-content-inner{height:100%;overflow:auto}:host .cps-tab-content-wrap.cps-tab-content-wrap-subtabs{background-color:#fff}\n"] }]
|
|
10353
10400
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { selectedIndex: [{
|
|
10354
10401
|
type: Input
|
|
10355
10402
|
}], isSubTabs: [{
|
|
10356
10403
|
type: Input
|
|
10357
10404
|
}], alignment: [{
|
|
10358
10405
|
type: Input
|
|
10406
|
+
}], contentWrapClass: [{
|
|
10407
|
+
type: Input
|
|
10408
|
+
}], headerClass: [{
|
|
10409
|
+
type: Input
|
|
10359
10410
|
}], stretched: [{
|
|
10360
10411
|
type: Input
|
|
10361
10412
|
}], animationType: [{
|