@skyux/tabs 14.0.0-alpha.5 → 14.0.0-alpha.6
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/fesm2022/skyux-tabs.mjs +15 -36
- package/fesm2022/skyux-tabs.mjs.map +1 -1
- package/package.json +9 -10
- package/types/skyux-tabs.d.ts +2 -3
package/fesm2022/skyux-tabs.mjs
CHANGED
|
@@ -6,7 +6,7 @@ import { SkyCheckboxModule } from '@skyux/forms';
|
|
|
6
6
|
import * as i6$1 from '@skyux/theme';
|
|
7
7
|
import { SkyThemeModule } from '@skyux/theme';
|
|
8
8
|
import * as i3 from '@skyux/core';
|
|
9
|
-
import { SkyMediaQueryService, SkyIdService, SkyIdModule, SkyResponsiveHostDirective, SkyLayoutHostService } from '@skyux/core';
|
|
9
|
+
import { SkyMediaQueryService, SkyIdService, SkyIdModule, SkyResponsiveHostDirective, _SkyAnimationSlideComponent, SkyLayoutHostService } from '@skyux/core';
|
|
10
10
|
import * as i6 from '@skyux/icon';
|
|
11
11
|
import { SkyIconModule } from '@skyux/icon';
|
|
12
12
|
import * as i7 from '@skyux/indicators';
|
|
@@ -15,9 +15,8 @@ import * as i3$1 from '@skyux/i18n';
|
|
|
15
15
|
import { SkyLibResourcesService, SkyI18nModule } from '@skyux/i18n';
|
|
16
16
|
import { Subject, BehaviorSubject, ReplaySubject, combineLatest, race } from 'rxjs';
|
|
17
17
|
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
18
|
-
import { trigger, state, style, transition, animate } from '@angular/animations';
|
|
19
|
-
import { skyAnimationSlide } from '@skyux/animations';
|
|
20
18
|
import { takeUntil, take, distinctUntilChanged } from 'rxjs/operators';
|
|
19
|
+
import { trigger, transition, style, animate } from '@angular/animations';
|
|
21
20
|
import * as i5 from '@skyux/popovers';
|
|
22
21
|
import { SkyDropdownModule } from '@skyux/popovers';
|
|
23
22
|
import { ActivatedRoute, Router } from '@angular/router';
|
|
@@ -579,24 +578,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
|
|
|
579
578
|
args: ['tabContentWrapper']
|
|
580
579
|
}] } });
|
|
581
580
|
|
|
582
|
-
// Due to how we leave the content element in the DOM - we need to ensure that the padding for the content area is animated away along with the height.
|
|
583
|
-
// The timing here matches what the slide animation uses to ensure they happen together.
|
|
584
|
-
const skyVerticalTabsetPaddingAnimation = trigger('skyVerticalTabsetPaddingAnimation', [
|
|
585
|
-
state('down', style({
|
|
586
|
-
'padding-top': 'var(--sky-comp-tab-vertical-subgroup-space-inset-top)',
|
|
587
|
-
'padding-bottom': 'var(--sky-comp-tab-vertical-subgroup-space-inset-bottom)',
|
|
588
|
-
})),
|
|
589
|
-
state('up', style({
|
|
590
|
-
'padding-top': '0',
|
|
591
|
-
'padding-bottom': '0',
|
|
592
|
-
})),
|
|
593
|
-
state('void', style({
|
|
594
|
-
'padding-top': '0',
|
|
595
|
-
'padding-bottom': '0',
|
|
596
|
-
})),
|
|
597
|
-
// Same timing as skyAnimationSlide to stay synchronized
|
|
598
|
-
transition('up <=> down', animate('150ms ease-in')),
|
|
599
|
-
]);
|
|
600
581
|
class SkyVerticalTabsetGroupComponent {
|
|
601
582
|
/**
|
|
602
583
|
* Whether to disable the ability to expand and collapse the group.
|
|
@@ -604,7 +585,7 @@ class SkyVerticalTabsetGroupComponent {
|
|
|
604
585
|
*/
|
|
605
586
|
set disabled(value) {
|
|
606
587
|
this.#_disabled = value;
|
|
607
|
-
this.#updateSlideDirection(
|
|
588
|
+
this.#updateSlideDirection();
|
|
608
589
|
}
|
|
609
590
|
get disabled() {
|
|
610
591
|
return this.#_disabled;
|
|
@@ -615,7 +596,7 @@ class SkyVerticalTabsetGroupComponent {
|
|
|
615
596
|
*/
|
|
616
597
|
set open(value) {
|
|
617
598
|
this.#_open = value;
|
|
618
|
-
this.#updateSlideDirection(
|
|
599
|
+
this.#updateSlideDirection();
|
|
619
600
|
}
|
|
620
601
|
get open() {
|
|
621
602
|
return this.#_open;
|
|
@@ -630,7 +611,6 @@ class SkyVerticalTabsetGroupComponent {
|
|
|
630
611
|
#_disabled;
|
|
631
612
|
#_open;
|
|
632
613
|
constructor(tabService, changeRef) {
|
|
633
|
-
this.animationDisabled = false;
|
|
634
614
|
this.slideDirection = 'up';
|
|
635
615
|
this.#ngUnsubscribe = new Subject();
|
|
636
616
|
this.#adapterService = inject(SkyVerticalTabsetAdapterService);
|
|
@@ -671,7 +651,7 @@ class SkyVerticalTabsetGroupComponent {
|
|
|
671
651
|
if (!this.disabled) {
|
|
672
652
|
this.open = !this.open;
|
|
673
653
|
}
|
|
674
|
-
this.#updateSlideDirection(
|
|
654
|
+
this.#updateSlideDirection();
|
|
675
655
|
this.#changeRef.markForCheck();
|
|
676
656
|
}
|
|
677
657
|
groupButtonArrowLeft(event) {
|
|
@@ -696,29 +676,25 @@ class SkyVerticalTabsetGroupComponent {
|
|
|
696
676
|
this.#changeRef.markForCheck();
|
|
697
677
|
}
|
|
698
678
|
#tabsHidden() {
|
|
699
|
-
|
|
700
|
-
this.slideDirection = 'void';
|
|
679
|
+
this.#updateSlideDirection();
|
|
701
680
|
this.#changeRef.markForCheck();
|
|
702
681
|
}
|
|
703
682
|
#tabsShown() {
|
|
704
|
-
|
|
705
|
-
// This will be instantaneous due to there not being a "void -> *" state on the slide animation.
|
|
706
|
-
this.#updateSlideDirection(true);
|
|
683
|
+
this.#updateSlideDirection();
|
|
707
684
|
this.#changeRef.markForCheck();
|
|
708
685
|
}
|
|
709
|
-
#updateSlideDirection(
|
|
710
|
-
this.animationDisabled = !animate;
|
|
686
|
+
#updateSlideDirection() {
|
|
711
687
|
this.slideDirection = this.open && !this.disabled ? 'down' : 'up';
|
|
712
688
|
}
|
|
713
689
|
#focusButton() {
|
|
714
690
|
this.#adapterService.focusButton(this.groupHeadingButton);
|
|
715
691
|
}
|
|
716
692
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyVerticalTabsetGroupComponent, deps: [{ token: SkyVerticalTabsetService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
717
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: SkyVerticalTabsetGroupComponent, isStandalone: false, selector: "sky-vertical-tabset-group", inputs: { disabled: "disabled", groupHeading: "groupHeading", open: "open" }, providers: [SkyVerticalTabsetGroupService], queries: [{ propertyName: "tabs", predicate: SkyVerticalTabComponent }], viewQueries: [{ propertyName: "groupHeadingButton", first: true, predicate: ["groupHeadingButton"], descendants: true }], ngImport: i0, template: "<div class=\"sky-vertical-tabset-group\">\n <!-- [ngClass] includes font classes for both modern and default styles -->\n <div\n class=\"sky-vertical-tabset-group-header\"\n [ngClass]=\"{\n 'sky-vertical-tabset-group-header-active': isActive(),\n 'sky-vertical-tabset-group-header-sub-open': open,\n 'sky-font-deemphasized': disabled\n }\"\n >\n <button\n #groupHeadingButton\n class=\"sky-vertical-tabset-button\"\n role=\"tab\"\n type=\"button\"\n [attr.aria-controls]=\"groupContent.id\"\n [attr.aria-disabled]=\"disabled || undefined\"\n [attr.aria-expanded]=\"!disabled && open\"\n [id]=\"groupId\"\n [ngClass]=\"{\n 'sky-vertical-tabset-button-disabled': disabled\n }\"\n [tabIndex]=\"-1\"\n (click)=\"toggleMenuOpen()\"\n (keyup.arrowleft)=\"groupButtonArrowLeft($event)\"\n (keyup.arrowright)=\"groupButtonArrowRight($event)\"\n >\n {{ groupHeading }}\n <sky-expansion-indicator\n class=\"sky-vertical-tabset-group-expansion-indicator\"\n [direction]=\"!disabled && open ? 'up' : 'down'\"\n />\n </button>\n </div>\n <div\n
|
|
693
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: SkyVerticalTabsetGroupComponent, isStandalone: false, selector: "sky-vertical-tabset-group", inputs: { disabled: "disabled", groupHeading: "groupHeading", open: "open" }, providers: [SkyVerticalTabsetGroupService], queries: [{ propertyName: "tabs", predicate: SkyVerticalTabComponent }], viewQueries: [{ propertyName: "groupHeadingButton", first: true, predicate: ["groupHeadingButton"], descendants: true }], ngImport: i0, template: "<div class=\"sky-vertical-tabset-group\">\n <!-- [ngClass] includes font classes for both modern and default styles -->\n <div\n class=\"sky-vertical-tabset-group-header\"\n [ngClass]=\"{\n 'sky-vertical-tabset-group-header-active': isActive(),\n 'sky-vertical-tabset-group-header-sub-open': open,\n 'sky-font-deemphasized': disabled\n }\"\n >\n <button\n #groupHeadingButton\n class=\"sky-vertical-tabset-button\"\n role=\"tab\"\n type=\"button\"\n [attr.aria-controls]=\"groupContent.id\"\n [attr.aria-disabled]=\"disabled || undefined\"\n [attr.aria-expanded]=\"!disabled && open\"\n [id]=\"groupId\"\n [ngClass]=\"{\n 'sky-vertical-tabset-button-disabled': disabled\n }\"\n [tabIndex]=\"-1\"\n (click)=\"toggleMenuOpen()\"\n (keyup.arrowleft)=\"groupButtonArrowLeft($event)\"\n (keyup.arrowright)=\"groupButtonArrowRight($event)\"\n >\n {{ groupHeading }}\n <sky-expansion-indicator\n class=\"sky-vertical-tabset-group-expansion-indicator\"\n [direction]=\"!disabled && open ? 'up' : 'down'\"\n />\n </button>\n </div>\n <sky-animation-slide [opened]=\"slideDirection === 'down'\">\n <div\n #groupContent\n class=\"sky-vertical-tabset-group-content\"\n skyId\n [attr.labelledby]=\"groupId\"\n >\n <ng-content />\n </div>\n </sky-animation-slide>\n</div>\n", styles: [".sky-vertical-tabset-group:not(.sky-theme-modern *){--sky-override-vertical-tabset-group-border: 1px solid #e2e3e4;--sky-override-vertical-tabset-group-button-font-color: buttontext;--sky-override-vertical-tabset-group-button-background-color-hover: transparent;--sky-override-vertical-tabset-group-header-selected-font-color: buttontext;--sky-override-vertical-tabset-group-header-selected-font-weight: 600;--sky-override-vertical-tabset-group-button-padding: 10px;--sky-override-vertical-tabset-group-content-padding-left: 10px;--sky-override-vertical-tabset-group-content-padding-right: 0;--sky-override-vertical-tabset-group-gap: 5px;--sky-override-vertical-tabset-group-header-align-items: flex-start;--sky-override-vertical-tabset-group-margin: 5px 0 5px 5px}.sky-vertical-tabset-group{border-bottom:var(--sky-override-vertical-tabset-group-border, none);margin:var(--sky-override-vertical-tabset-group-margin)}:host:has(~sky-vertical-tabset-group) .sky-vertical-tabset-group{margin-bottom:var(--sky-override-vertical-tabset-group-gap, 0)}.sky-vertical-tabset-group-header button{--sky-comp-override-expansion-indicator-color: var( --sky-color-text-deemphasized );padding:var(--sky-override-vertical-tabset-group-button-padding, var(--sky-comp-tab-vertical-space-inset-top) var(--sky-comp-tab-vertical-space-inset-right) var(--sky-comp-tab-vertical-space-inset-bottom) var(--sky-comp-tab-vertical-space-inset-left));justify-content:space-between;border:none;width:100%;text-align:left;align-items:var(--sky-override-vertical-tabset-group-header-align-items, center);margin-bottom:var(--sky-space-gap-action_group-m);color:var(--sky-override-vertical-tabset-group-button-font-color, var(--sky-color-text-deemphasized))}.sky-vertical-tabset-group-header button:hover{background-color:var(--sky-override-vertical-tabset-group-button-background-color-hover, var(--sky-color-background-nav-hover))}.sky-vertical-tabset-group-header.sky-vertical-tabset-group-header-active button{--sky-comp-override-expansion-indicator-color: var( --sky-color-text-selected );color:var(--sky-override-vertical-tabset-group-header-selected-text-color, var(--sky-color-text-selected));font-weight:var(--sky-override-vertical-tabset-group-header-selected-font-weight, var(--sky-font-style-emphasized))}.sky-vertical-tabset-group-header .sky-vertical-tabset-group-expansion-indicator{margin-left:var(--sky-space-gap-text_action-s)}.sky-vertical-tabset-group-content{overflow:hidden;border-top:var(--sky-override-vertical-tabset-group-border, none);padding-top:var(--sky-comp-tab-vertical-subgroup-space-inset-top);padding-bottom:var(--sky-comp-tab-vertical-subgroup-space-inset-bottom);padding-left:var(--sky-override-vertical-tabset-group-content-padding-left, var(--sky-comp-tab-vertical-subgroup-space-inset-left));padding-right:var(--sky-override-vertical-tabset-group-content-padding-right, var(--sky-comp-tab-vertical-subgroup-space-inset-right))}.sky-vertical-tabset-button:not(.sky-theme-modern *){--sky-override-vertical-tab-background-color: transparent;--sky-override-vertical-tab-background-color-active: #eeeeef;--sky-override-vertical-tab-background-color-focus: transparent;--sky-override-vertical-tab-background-color-hover: #eeeeef;--sky-override-vertical-tab-font-color: #212327;--sky-override-vertical-tab-font-color-disabled: var( --sky-text-color-deemphasized );--sky-override-vertical-tab-hover-font-color: #212327;--sky-override-vertical-tab-outline-focus: auto;--sky-override-vertical-tab-right-arrow-color-active: #686c73;--sky-override-vertical-tab-right-arrow-color-hover: color.adjust( #686c73, $lightness: -20% )}:host:has(.sky-vertical-tabset-button-disabled){cursor:not-allowed}.sky-vertical-tabset-button{background-color:var(--sky-override-vertical-tab-background-color, var(--sky-color-background-nav-base));border-bottom-left-radius:var(--sky-border-radius-s);border-top-left-radius:var(--sky-border-radius-s);border-bottom-right-radius:var(--sky-border-radius-0);border-top-right-radius:var(--sky-border-radius-0);color:var(--sky-override-vertical-tab-font-color, var(--sky-color-text-deemphasized));cursor:pointer;display:flex;text-decoration:none}.sky-vertical-tabset-button:hover:not(.sky-vertical-tab-active){color:var(--sky-override-vertical-tab-hover-font-color, var(--sky-color-text-default));background-color:var(--sky-override-vertical-tab-background-color-hover, var(--sky-color-background-nav-hover));box-shadow:inset 0 0 0 var(--sky-border-width-action-hover) var(--sky-color-border-nav-hover)}.sky-vertical-tabset-button:hover:not(.sky-vertical-tab-active) .sky-vertical-tab-right-arrow{color:var(--sky-override-vertical-tab-right-arrow-color-hover, var(--sky-color-icon-default))}.sky-vertical-tabset-button:active:not(.sky-vertical-tab-active){background-color:var(--sky-override-vertical-tab-background-color-active, var(--sky-color-background-nav-active));color:var(--sky-color-text-default);box-shadow:inset 0 0 0 var(--sky-border-width-action-active) var(--sky-color-border-nav-active)}.sky-vertical-tabset-button:active:not(.sky-vertical-tab-active) .sky-vertical-tab-right-arrow{color:var(--sky-override-vertical-tab-right-arrow-color-active, var(--sky-color-icon-default))}.sky-vertical-tabset-button:not(:active):focus-visible{background-color:var(--sky-override-vertical-tab-background-color-focus, var(--sky-color-background-nav-focus));outline:var(--sky-override-vertical-tab-outline-focus, none);box-shadow:inset 0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-nav-focus)}.sky-vertical-tabset-button.sky-vertical-tabset-button-disabled{background-color:var(--sky-color-background-nav-disabled);color:var(--sky-override-vertical-tab-font-color-disabled, var(--sky-color-text-deemphasized));pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "component", type: i7.λ15, selector: "sky-expansion-indicator", inputs: ["direction"] }, { kind: "component", type: i3._SkyAnimationSlideComponent, selector: "sky-animation-slide", inputs: ["opened"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
718
694
|
}
|
|
719
695
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyVerticalTabsetGroupComponent, decorators: [{
|
|
720
696
|
type: Component,
|
|
721
|
-
args: [{ selector: 'sky-vertical-tabset-group', changeDetection: ChangeDetectionStrategy.OnPush,
|
|
697
|
+
args: [{ selector: 'sky-vertical-tabset-group', changeDetection: ChangeDetectionStrategy.OnPush, providers: [SkyVerticalTabsetGroupService], standalone: false, template: "<div class=\"sky-vertical-tabset-group\">\n <!-- [ngClass] includes font classes for both modern and default styles -->\n <div\n class=\"sky-vertical-tabset-group-header\"\n [ngClass]=\"{\n 'sky-vertical-tabset-group-header-active': isActive(),\n 'sky-vertical-tabset-group-header-sub-open': open,\n 'sky-font-deemphasized': disabled\n }\"\n >\n <button\n #groupHeadingButton\n class=\"sky-vertical-tabset-button\"\n role=\"tab\"\n type=\"button\"\n [attr.aria-controls]=\"groupContent.id\"\n [attr.aria-disabled]=\"disabled || undefined\"\n [attr.aria-expanded]=\"!disabled && open\"\n [id]=\"groupId\"\n [ngClass]=\"{\n 'sky-vertical-tabset-button-disabled': disabled\n }\"\n [tabIndex]=\"-1\"\n (click)=\"toggleMenuOpen()\"\n (keyup.arrowleft)=\"groupButtonArrowLeft($event)\"\n (keyup.arrowright)=\"groupButtonArrowRight($event)\"\n >\n {{ groupHeading }}\n <sky-expansion-indicator\n class=\"sky-vertical-tabset-group-expansion-indicator\"\n [direction]=\"!disabled && open ? 'up' : 'down'\"\n />\n </button>\n </div>\n <sky-animation-slide [opened]=\"slideDirection === 'down'\">\n <div\n #groupContent\n class=\"sky-vertical-tabset-group-content\"\n skyId\n [attr.labelledby]=\"groupId\"\n >\n <ng-content />\n </div>\n </sky-animation-slide>\n</div>\n", styles: [".sky-vertical-tabset-group:not(.sky-theme-modern *){--sky-override-vertical-tabset-group-border: 1px solid #e2e3e4;--sky-override-vertical-tabset-group-button-font-color: buttontext;--sky-override-vertical-tabset-group-button-background-color-hover: transparent;--sky-override-vertical-tabset-group-header-selected-font-color: buttontext;--sky-override-vertical-tabset-group-header-selected-font-weight: 600;--sky-override-vertical-tabset-group-button-padding: 10px;--sky-override-vertical-tabset-group-content-padding-left: 10px;--sky-override-vertical-tabset-group-content-padding-right: 0;--sky-override-vertical-tabset-group-gap: 5px;--sky-override-vertical-tabset-group-header-align-items: flex-start;--sky-override-vertical-tabset-group-margin: 5px 0 5px 5px}.sky-vertical-tabset-group{border-bottom:var(--sky-override-vertical-tabset-group-border, none);margin:var(--sky-override-vertical-tabset-group-margin)}:host:has(~sky-vertical-tabset-group) .sky-vertical-tabset-group{margin-bottom:var(--sky-override-vertical-tabset-group-gap, 0)}.sky-vertical-tabset-group-header button{--sky-comp-override-expansion-indicator-color: var( --sky-color-text-deemphasized );padding:var(--sky-override-vertical-tabset-group-button-padding, var(--sky-comp-tab-vertical-space-inset-top) var(--sky-comp-tab-vertical-space-inset-right) var(--sky-comp-tab-vertical-space-inset-bottom) var(--sky-comp-tab-vertical-space-inset-left));justify-content:space-between;border:none;width:100%;text-align:left;align-items:var(--sky-override-vertical-tabset-group-header-align-items, center);margin-bottom:var(--sky-space-gap-action_group-m);color:var(--sky-override-vertical-tabset-group-button-font-color, var(--sky-color-text-deemphasized))}.sky-vertical-tabset-group-header button:hover{background-color:var(--sky-override-vertical-tabset-group-button-background-color-hover, var(--sky-color-background-nav-hover))}.sky-vertical-tabset-group-header.sky-vertical-tabset-group-header-active button{--sky-comp-override-expansion-indicator-color: var( --sky-color-text-selected );color:var(--sky-override-vertical-tabset-group-header-selected-text-color, var(--sky-color-text-selected));font-weight:var(--sky-override-vertical-tabset-group-header-selected-font-weight, var(--sky-font-style-emphasized))}.sky-vertical-tabset-group-header .sky-vertical-tabset-group-expansion-indicator{margin-left:var(--sky-space-gap-text_action-s)}.sky-vertical-tabset-group-content{overflow:hidden;border-top:var(--sky-override-vertical-tabset-group-border, none);padding-top:var(--sky-comp-tab-vertical-subgroup-space-inset-top);padding-bottom:var(--sky-comp-tab-vertical-subgroup-space-inset-bottom);padding-left:var(--sky-override-vertical-tabset-group-content-padding-left, var(--sky-comp-tab-vertical-subgroup-space-inset-left));padding-right:var(--sky-override-vertical-tabset-group-content-padding-right, var(--sky-comp-tab-vertical-subgroup-space-inset-right))}.sky-vertical-tabset-button:not(.sky-theme-modern *){--sky-override-vertical-tab-background-color: transparent;--sky-override-vertical-tab-background-color-active: #eeeeef;--sky-override-vertical-tab-background-color-focus: transparent;--sky-override-vertical-tab-background-color-hover: #eeeeef;--sky-override-vertical-tab-font-color: #212327;--sky-override-vertical-tab-font-color-disabled: var( --sky-text-color-deemphasized );--sky-override-vertical-tab-hover-font-color: #212327;--sky-override-vertical-tab-outline-focus: auto;--sky-override-vertical-tab-right-arrow-color-active: #686c73;--sky-override-vertical-tab-right-arrow-color-hover: color.adjust( #686c73, $lightness: -20% )}:host:has(.sky-vertical-tabset-button-disabled){cursor:not-allowed}.sky-vertical-tabset-button{background-color:var(--sky-override-vertical-tab-background-color, var(--sky-color-background-nav-base));border-bottom-left-radius:var(--sky-border-radius-s);border-top-left-radius:var(--sky-border-radius-s);border-bottom-right-radius:var(--sky-border-radius-0);border-top-right-radius:var(--sky-border-radius-0);color:var(--sky-override-vertical-tab-font-color, var(--sky-color-text-deemphasized));cursor:pointer;display:flex;text-decoration:none}.sky-vertical-tabset-button:hover:not(.sky-vertical-tab-active){color:var(--sky-override-vertical-tab-hover-font-color, var(--sky-color-text-default));background-color:var(--sky-override-vertical-tab-background-color-hover, var(--sky-color-background-nav-hover));box-shadow:inset 0 0 0 var(--sky-border-width-action-hover) var(--sky-color-border-nav-hover)}.sky-vertical-tabset-button:hover:not(.sky-vertical-tab-active) .sky-vertical-tab-right-arrow{color:var(--sky-override-vertical-tab-right-arrow-color-hover, var(--sky-color-icon-default))}.sky-vertical-tabset-button:active:not(.sky-vertical-tab-active){background-color:var(--sky-override-vertical-tab-background-color-active, var(--sky-color-background-nav-active));color:var(--sky-color-text-default);box-shadow:inset 0 0 0 var(--sky-border-width-action-active) var(--sky-color-border-nav-active)}.sky-vertical-tabset-button:active:not(.sky-vertical-tab-active) .sky-vertical-tab-right-arrow{color:var(--sky-override-vertical-tab-right-arrow-color-active, var(--sky-color-icon-default))}.sky-vertical-tabset-button:not(:active):focus-visible{background-color:var(--sky-override-vertical-tab-background-color-focus, var(--sky-color-background-nav-focus));outline:var(--sky-override-vertical-tab-outline-focus, none);box-shadow:inset 0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-nav-focus)}.sky-vertical-tabset-button.sky-vertical-tabset-button-disabled{background-color:var(--sky-color-background-nav-disabled);color:var(--sky-override-vertical-tab-font-color-disabled, var(--sky-color-text-deemphasized));pointer-events:none}\n"] }]
|
|
722
698
|
}], ctorParameters: () => [{ type: SkyVerticalTabsetService }, { type: i0.ChangeDetectorRef }], propDecorators: { disabled: [{
|
|
723
699
|
type: Input
|
|
724
700
|
}], groupHeading: [{
|
|
@@ -904,7 +880,8 @@ class SkyVerticalTabsetModule {
|
|
|
904
880
|
SkyResponsiveHostDirective,
|
|
905
881
|
SkyStatusIndicatorModule,
|
|
906
882
|
SkyTabsResourcesModule,
|
|
907
|
-
SkyThemeModule
|
|
883
|
+
SkyThemeModule,
|
|
884
|
+
_SkyAnimationSlideComponent], exports: [SkyVerticalTabsetComponent,
|
|
908
885
|
SkyVerticalTabsetGroupComponent,
|
|
909
886
|
SkyVerticalTabComponent] }); }
|
|
910
887
|
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyVerticalTabsetModule, providers: [SkyVerticalTabsetAdapterService], imports: [CommonModule,
|
|
@@ -913,7 +890,8 @@ class SkyVerticalTabsetModule {
|
|
|
913
890
|
SkyExpansionIndicatorModule,
|
|
914
891
|
SkyStatusIndicatorModule,
|
|
915
892
|
SkyTabsResourcesModule,
|
|
916
|
-
SkyThemeModule
|
|
893
|
+
SkyThemeModule,
|
|
894
|
+
_SkyAnimationSlideComponent] }); }
|
|
917
895
|
}
|
|
918
896
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyVerticalTabsetModule, decorators: [{
|
|
919
897
|
type: NgModule,
|
|
@@ -932,6 +910,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
|
|
|
932
910
|
SkyStatusIndicatorModule,
|
|
933
911
|
SkyTabsResourcesModule,
|
|
934
912
|
SkyThemeModule,
|
|
913
|
+
_SkyAnimationSlideComponent,
|
|
935
914
|
],
|
|
936
915
|
providers: [SkyVerticalTabsetAdapterService],
|
|
937
916
|
exports: [
|