@skyux/tabs 13.0.0-alpha.7 → 13.0.0-alpha.8
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 +8 -8
- package/fesm2022/skyux-tabs.mjs.map +1 -1
- package/package.json +10 -10
package/fesm2022/skyux-tabs.mjs
CHANGED
|
@@ -544,11 +544,11 @@ class SkyVerticalTabComponent {
|
|
|
544
544
|
this.#changeRef.markForCheck();
|
|
545
545
|
}
|
|
546
546
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: SkyVerticalTabComponent, deps: [{ token: SkyVerticalTabsetAdapterService }, { token: i0.ChangeDetectorRef }, { token: SkyVerticalTabsetService }, { token: SkyTabIdService, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
547
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: SkyVerticalTabComponent, isStandalone: false, selector: "sky-vertical-tab", inputs: { active: "active", ariaControls: "ariaControls", ariaRole: "ariaRole", disabled: "disabled", errorIndicator: "errorIndicator", requiredIndicator: "requiredIndicator", tabHeaderCount: "tabHeaderCount", tabHeading: "tabHeading", showTabRightArrow: "showTabRightArrow", tabId: "tabId" }, viewQueries: [{ propertyName: "tabButton", first: true, predicate: ["tabButton"], descendants: true }, { propertyName: "tabContent", first: true, predicate: ["tabContentWrapper"], descendants: true }], ngImport: i0, template: "<a\n #tabButton\n class=\"sky-vertical-tab sky-vertical-tabset-button\"\n [attr.aria-controls]=\"\n isMobile ? undefined : ariaControls || tabContentPane.id\n \"\n [attr.aria-disabled]=\"isMobile ? undefined : disabled || undefined\"\n [attr.aria-selected]=\"isMobile ? undefined : active\"\n [attr.id]=\"tabId\"\n [attr.role]=\"isMobile ? undefined : ariaRole\"\n [ngClass]=\"{\n 'sky-vertical-tab-active': active,\n 'sky-vertical-tabset-button-disabled': disabled,\n 'sky-font-deemphasized': disabled\n }\"\n [tabIndex]=\"-1\"\n (click)=\"activateTab()\"\n (keyup.arrowleft)=\"tabButtonArrowLeft($event)\"\n (keyup.enter)=\"tabButtonActivate($event)\"\n (keyup.space)=\"tabButtonActivate($event)\"\n>\n <div class=\"sky-vertical-tab-display\">\n <div\n class=\"sky-vertical-tab-heading\"\n [ngClass]=\"{ 'sky-control-label-required': requiredIndicator }\"\n >\n <span class=\"sky-vertical-tab-heading-value\">{{ tabHeading }}</span>\n @if (tabHeaderCount || tabHeaderCount === 0) {\n <span class=\"sky-vertical-tab-count\"> ({{ tabHeaderCount }}) </span>\n }\n </div>\n @if (errorIndicator) {\n <sky-status-indicator\n class=\"sky-vertical-tab-heading-error\"\n descriptionType=\"error\"\n indicatorType=\"danger\"\n />\n }\n @if (isMobile && showTabRightArrow) {\n <sky-icon class=\"sky-vertical-tab-right-arrow\" iconName=\"chevron-right\" />\n }\n </div>\n</a>\n\n<div #tabContentWrapper skyResponsiveHost>\n <div\n #tabContentPane\n class=\"sky-vertical-tab-content-pane\"\n role=\"tabpanel\"\n tabindex=\"0\"\n skyId\n [attr.aria-labelledby]=\"tabId\"\n [ngClass]=\"{ 'sky-vertical-tab-hidden': !active }\"\n >\n <ng-content />\n </div>\n</div>\n", styles: [".sky-vertical-tab:not(.sky-theme-modern *){--sky-override-vertical-tab-background-color
|
|
547
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: SkyVerticalTabComponent, isStandalone: false, selector: "sky-vertical-tab", inputs: { active: "active", ariaControls: "ariaControls", ariaRole: "ariaRole", disabled: "disabled", errorIndicator: "errorIndicator", requiredIndicator: "requiredIndicator", tabHeaderCount: "tabHeaderCount", tabHeading: "tabHeading", showTabRightArrow: "showTabRightArrow", tabId: "tabId" }, viewQueries: [{ propertyName: "tabButton", first: true, predicate: ["tabButton"], descendants: true }, { propertyName: "tabContent", first: true, predicate: ["tabContentWrapper"], descendants: true }], ngImport: i0, template: "<a\n #tabButton\n class=\"sky-vertical-tab sky-vertical-tabset-button\"\n [attr.aria-controls]=\"\n isMobile ? undefined : ariaControls || tabContentPane.id\n \"\n [attr.aria-disabled]=\"isMobile ? undefined : disabled || undefined\"\n [attr.aria-selected]=\"isMobile ? undefined : active\"\n [attr.id]=\"tabId\"\n [attr.role]=\"isMobile ? undefined : ariaRole\"\n [ngClass]=\"{\n 'sky-vertical-tab-active': active,\n 'sky-vertical-tabset-button-disabled': disabled,\n 'sky-font-deemphasized': disabled\n }\"\n [tabIndex]=\"-1\"\n (click)=\"activateTab()\"\n (keyup.arrowleft)=\"tabButtonArrowLeft($event)\"\n (keyup.enter)=\"tabButtonActivate($event)\"\n (keyup.space)=\"tabButtonActivate($event)\"\n>\n <div class=\"sky-vertical-tab-display\">\n <div\n class=\"sky-vertical-tab-heading\"\n [ngClass]=\"{ 'sky-control-label-required': requiredIndicator }\"\n >\n <span class=\"sky-vertical-tab-heading-value\">{{ tabHeading }}</span>\n @if (tabHeaderCount || tabHeaderCount === 0) {\n <span class=\"sky-vertical-tab-count\"> ({{ tabHeaderCount }}) </span>\n }\n </div>\n @if (errorIndicator) {\n <sky-status-indicator\n class=\"sky-vertical-tab-heading-error\"\n descriptionType=\"error\"\n indicatorType=\"danger\"\n />\n }\n @if (isMobile && showTabRightArrow) {\n <sky-icon class=\"sky-vertical-tab-right-arrow\" iconName=\"chevron-right\" />\n }\n </div>\n</a>\n\n<div #tabContentWrapper skyResponsiveHost>\n <div\n #tabContentPane\n class=\"sky-vertical-tab-content-pane\"\n role=\"tabpanel\"\n tabindex=\"0\"\n skyId\n [attr.aria-labelledby]=\"tabId\"\n [ngClass]=\"{ 'sky-vertical-tab-hidden': !active }\"\n >\n <ng-content />\n </div>\n</div>\n", styles: [".sky-vertical-tab:not(.sky-theme-modern *){--sky-override-vertical-tab-background-color-selected: #eeeeef;--sky-override-vertical-tab-border-left-selected: 4px solid #00b4f1;--sky-override-vertical-tab-count-margin-left: 5px;--sky-override-vertical-tab-display-align-items: normal;--sky-override-vertical-tab-heading-error-line-height: normal;--sky-override-vertical-tab-heading-error-padding-left: 5px;--sky-override-vertical-tab-margin: 5px 0 5px 5px;--sky-override-vertical-tab-padding: 7px 0 7px 10px;--sky-override-vertical-tab-padding-left-selected: 6px;--sky-override-vertical-tab-right-arrow-color: #686c73;--sky-override-vertical-tab-right-arrow-color-selected: #686c73;--sky-override-vertical-tab-right-arrow-padding: 3px 10px 0 0}.sky-vertical-tab{padding:var(--sky-override-vertical-tab-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));margin:var(--sky-override-vertical-tab-margin, 0 0 var(--sky-space-gap-action_group-m))}.sky-vertical-tabset-button.sky-vertical-tab-active{color:var(--sky-color-text-selected);font-weight:var(--sky-font-style-emphasized)}.sky-vertical-tabset-button.sky-vertical-tab-active:not(:focus-visible){background-color:var(--sky-override-vertical-tab-background-color-selected, var(--sky-color-background-selected-soft));border-bottom-left-radius:var(--sky-border-radius-xs);border-top-left-radius:var(--sky-border-radius-xs);padding-left:var(--sky-override-vertical-tab-padding-left-selected, calc(var(--sky-comp-tab-vertical-space-inset-left) - var(--sky-border-width-selected-m)));border-left:var(--sky-override-vertical-tab-border-left-selected, var(--sky-border-width-selected-m) solid var(--sky-color-border-selected))}.sky-vertical-tabset-button.sky-vertical-tab-active:not(:active):focus-visible{background-color:var(--sky-override-vertical-tab-background-color-selected, var(--sky-color-background-nav-focus));padding-left:var(--sky-override-vertical-tab-padding-left-selected, var(--sky-comp-tab-vertical-space-inset-left));border-left:var(--sky-override-vertical-tab-border-left-selected, none)}.sky-vertical-tabset-button.sky-vertical-tab-active .sky-vertical-tab-right-arrow{color:var(--sky-override-vertical-tab-right-arrow-color-selected, var(--sky-color-icon-default))}.sky-vertical-tab-hidden{display:none}.sky-vertical-tab-display{display:flex;justify-content:space-between;flex-grow:1;align-items:var(--sky-override-vertical-tab-display-align-items, center)}.sky-vertical-tab-heading-error{padding-left:var(--sky-override-vertical-tab-heading-error-padding-left, var(--sky-space-gap-text_action-s));line-height:var(--sky-override-vertical-tab-heading-error-line-height, 1)}.sky-vertical-tab-count{margin-left:var(--sky-override-vertical-tab-count-margin-left, var(--sky-space-gap-label-s))}.sky-vertical-tab-right-arrow{padding:var(--sky-override-vertical-tab-right-arrow-padding, 0);color:var(--sky-override-vertical-tab-right-arrow-color, var(--sky-color-icon-deemphasized))}.sky-vertical-tab-content-pane{margin-bottom:0}.sky-vertical-tab-content-pane:focus-visible{outline:none;border:none}.sky-responsive-container-xs .sky-vertical-tab-content-pane{margin-bottom:var(--sky-override-vertical-tab-content-pane-margin-bottom, var(--sky-space-stacked-s))}:host-context(.sky-sectioned-form-tabs-only) .sky-vertical-tab{margin-left:0}.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: "component", type: i6.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "directive", type: i3.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "directive", type: i3.SkyResponsiveHostDirective, selector: "[skyResponsiveHost]", exportAs: ["skyResponsiveHost"] }, { kind: "component", type: i7.λ10, selector: "sky-status-indicator", inputs: ["indicatorType", "descriptionType", "customDescription", "helpPopoverContent", "helpPopoverTitle", "helpKey"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
548
548
|
}
|
|
549
549
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: SkyVerticalTabComponent, decorators: [{
|
|
550
550
|
type: Component,
|
|
551
|
-
args: [{ selector: 'sky-vertical-tab', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<a\n #tabButton\n class=\"sky-vertical-tab sky-vertical-tabset-button\"\n [attr.aria-controls]=\"\n isMobile ? undefined : ariaControls || tabContentPane.id\n \"\n [attr.aria-disabled]=\"isMobile ? undefined : disabled || undefined\"\n [attr.aria-selected]=\"isMobile ? undefined : active\"\n [attr.id]=\"tabId\"\n [attr.role]=\"isMobile ? undefined : ariaRole\"\n [ngClass]=\"{\n 'sky-vertical-tab-active': active,\n 'sky-vertical-tabset-button-disabled': disabled,\n 'sky-font-deemphasized': disabled\n }\"\n [tabIndex]=\"-1\"\n (click)=\"activateTab()\"\n (keyup.arrowleft)=\"tabButtonArrowLeft($event)\"\n (keyup.enter)=\"tabButtonActivate($event)\"\n (keyup.space)=\"tabButtonActivate($event)\"\n>\n <div class=\"sky-vertical-tab-display\">\n <div\n class=\"sky-vertical-tab-heading\"\n [ngClass]=\"{ 'sky-control-label-required': requiredIndicator }\"\n >\n <span class=\"sky-vertical-tab-heading-value\">{{ tabHeading }}</span>\n @if (tabHeaderCount || tabHeaderCount === 0) {\n <span class=\"sky-vertical-tab-count\"> ({{ tabHeaderCount }}) </span>\n }\n </div>\n @if (errorIndicator) {\n <sky-status-indicator\n class=\"sky-vertical-tab-heading-error\"\n descriptionType=\"error\"\n indicatorType=\"danger\"\n />\n }\n @if (isMobile && showTabRightArrow) {\n <sky-icon class=\"sky-vertical-tab-right-arrow\" iconName=\"chevron-right\" />\n }\n </div>\n</a>\n\n<div #tabContentWrapper skyResponsiveHost>\n <div\n #tabContentPane\n class=\"sky-vertical-tab-content-pane\"\n role=\"tabpanel\"\n tabindex=\"0\"\n skyId\n [attr.aria-labelledby]=\"tabId\"\n [ngClass]=\"{ 'sky-vertical-tab-hidden': !active }\"\n >\n <ng-content />\n </div>\n</div>\n", styles: [".sky-vertical-tab:not(.sky-theme-modern *){--sky-override-vertical-tab-background-color
|
|
551
|
+
args: [{ selector: 'sky-vertical-tab', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<a\n #tabButton\n class=\"sky-vertical-tab sky-vertical-tabset-button\"\n [attr.aria-controls]=\"\n isMobile ? undefined : ariaControls || tabContentPane.id\n \"\n [attr.aria-disabled]=\"isMobile ? undefined : disabled || undefined\"\n [attr.aria-selected]=\"isMobile ? undefined : active\"\n [attr.id]=\"tabId\"\n [attr.role]=\"isMobile ? undefined : ariaRole\"\n [ngClass]=\"{\n 'sky-vertical-tab-active': active,\n 'sky-vertical-tabset-button-disabled': disabled,\n 'sky-font-deemphasized': disabled\n }\"\n [tabIndex]=\"-1\"\n (click)=\"activateTab()\"\n (keyup.arrowleft)=\"tabButtonArrowLeft($event)\"\n (keyup.enter)=\"tabButtonActivate($event)\"\n (keyup.space)=\"tabButtonActivate($event)\"\n>\n <div class=\"sky-vertical-tab-display\">\n <div\n class=\"sky-vertical-tab-heading\"\n [ngClass]=\"{ 'sky-control-label-required': requiredIndicator }\"\n >\n <span class=\"sky-vertical-tab-heading-value\">{{ tabHeading }}</span>\n @if (tabHeaderCount || tabHeaderCount === 0) {\n <span class=\"sky-vertical-tab-count\"> ({{ tabHeaderCount }}) </span>\n }\n </div>\n @if (errorIndicator) {\n <sky-status-indicator\n class=\"sky-vertical-tab-heading-error\"\n descriptionType=\"error\"\n indicatorType=\"danger\"\n />\n }\n @if (isMobile && showTabRightArrow) {\n <sky-icon class=\"sky-vertical-tab-right-arrow\" iconName=\"chevron-right\" />\n }\n </div>\n</a>\n\n<div #tabContentWrapper skyResponsiveHost>\n <div\n #tabContentPane\n class=\"sky-vertical-tab-content-pane\"\n role=\"tabpanel\"\n tabindex=\"0\"\n skyId\n [attr.aria-labelledby]=\"tabId\"\n [ngClass]=\"{ 'sky-vertical-tab-hidden': !active }\"\n >\n <ng-content />\n </div>\n</div>\n", styles: [".sky-vertical-tab:not(.sky-theme-modern *){--sky-override-vertical-tab-background-color-selected: #eeeeef;--sky-override-vertical-tab-border-left-selected: 4px solid #00b4f1;--sky-override-vertical-tab-count-margin-left: 5px;--sky-override-vertical-tab-display-align-items: normal;--sky-override-vertical-tab-heading-error-line-height: normal;--sky-override-vertical-tab-heading-error-padding-left: 5px;--sky-override-vertical-tab-margin: 5px 0 5px 5px;--sky-override-vertical-tab-padding: 7px 0 7px 10px;--sky-override-vertical-tab-padding-left-selected: 6px;--sky-override-vertical-tab-right-arrow-color: #686c73;--sky-override-vertical-tab-right-arrow-color-selected: #686c73;--sky-override-vertical-tab-right-arrow-padding: 3px 10px 0 0}.sky-vertical-tab{padding:var(--sky-override-vertical-tab-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));margin:var(--sky-override-vertical-tab-margin, 0 0 var(--sky-space-gap-action_group-m))}.sky-vertical-tabset-button.sky-vertical-tab-active{color:var(--sky-color-text-selected);font-weight:var(--sky-font-style-emphasized)}.sky-vertical-tabset-button.sky-vertical-tab-active:not(:focus-visible){background-color:var(--sky-override-vertical-tab-background-color-selected, var(--sky-color-background-selected-soft));border-bottom-left-radius:var(--sky-border-radius-xs);border-top-left-radius:var(--sky-border-radius-xs);padding-left:var(--sky-override-vertical-tab-padding-left-selected, calc(var(--sky-comp-tab-vertical-space-inset-left) - var(--sky-border-width-selected-m)));border-left:var(--sky-override-vertical-tab-border-left-selected, var(--sky-border-width-selected-m) solid var(--sky-color-border-selected))}.sky-vertical-tabset-button.sky-vertical-tab-active:not(:active):focus-visible{background-color:var(--sky-override-vertical-tab-background-color-selected, var(--sky-color-background-nav-focus));padding-left:var(--sky-override-vertical-tab-padding-left-selected, var(--sky-comp-tab-vertical-space-inset-left));border-left:var(--sky-override-vertical-tab-border-left-selected, none)}.sky-vertical-tabset-button.sky-vertical-tab-active .sky-vertical-tab-right-arrow{color:var(--sky-override-vertical-tab-right-arrow-color-selected, var(--sky-color-icon-default))}.sky-vertical-tab-hidden{display:none}.sky-vertical-tab-display{display:flex;justify-content:space-between;flex-grow:1;align-items:var(--sky-override-vertical-tab-display-align-items, center)}.sky-vertical-tab-heading-error{padding-left:var(--sky-override-vertical-tab-heading-error-padding-left, var(--sky-space-gap-text_action-s));line-height:var(--sky-override-vertical-tab-heading-error-line-height, 1)}.sky-vertical-tab-count{margin-left:var(--sky-override-vertical-tab-count-margin-left, var(--sky-space-gap-label-s))}.sky-vertical-tab-right-arrow{padding:var(--sky-override-vertical-tab-right-arrow-padding, 0);color:var(--sky-override-vertical-tab-right-arrow-color, var(--sky-color-icon-deemphasized))}.sky-vertical-tab-content-pane{margin-bottom:0}.sky-vertical-tab-content-pane:focus-visible{outline:none;border:none}.sky-responsive-container-xs .sky-vertical-tab-content-pane{margin-bottom:var(--sky-override-vertical-tab-content-pane-margin-bottom, var(--sky-space-stacked-s))}:host-context(.sky-sectioned-form-tabs-only) .sky-vertical-tab{margin-left:0}.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"] }]
|
|
552
552
|
}], ctorParameters: () => [{ type: SkyVerticalTabsetAdapterService }, { type: i0.ChangeDetectorRef }, { type: SkyVerticalTabsetService }, { type: SkyTabIdService, decorators: [{
|
|
553
553
|
type: Optional
|
|
554
554
|
}] }], propDecorators: { active: [{
|
|
@@ -699,11 +699,11 @@ class SkyVerticalTabsetGroupComponent {
|
|
|
699
699
|
this.#adapterService.focusButton(this.groupHeadingButton);
|
|
700
700
|
}
|
|
701
701
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: SkyVerticalTabsetGroupComponent, deps: [{ token: SkyVerticalTabsetService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
702
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.5", 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
|
|
702
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.5", 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 #groupContent\n class=\"sky-vertical-tabset-group-content\"\n skyId\n [attr.labelledby]=\"groupId\"\n [@.disabled]=\"animationDisabled\"\n [@skyAnimationSlide]=\"slideDirection\"\n (@skyAnimationSlide.done)=\"updateSlideDirection($event)\"\n >\n <ng-content />\n </div>\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: 0 0 0 10px;--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)}.sky-vertical-tabset-group-header-sub-open~.sky-vertical-tabset-group-content{padding:var(--sky-override-vertical-tabset-group-content-padding, var(--sky-comp-tab-vertical-subgroup-space-inset-top) var(--sky-comp-tab-vertical-subgroup-space-inset-right) var(--sky-comp-tab-vertical-subgroup-space-inset-bottom) var(--sky-comp-tab-vertical-subgroup-space-inset-left))}.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"] }], animations: [skyAnimationSlide], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
703
703
|
}
|
|
704
704
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: SkyVerticalTabsetGroupComponent, decorators: [{
|
|
705
705
|
type: Component,
|
|
706
|
-
args: [{ selector: 'sky-vertical-tabset-group', changeDetection: ChangeDetectionStrategy.OnPush, animations: [skyAnimationSlide], 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
|
|
706
|
+
args: [{ selector: 'sky-vertical-tabset-group', changeDetection: ChangeDetectionStrategy.OnPush, animations: [skyAnimationSlide], 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 <div\n #groupContent\n class=\"sky-vertical-tabset-group-content\"\n skyId\n [attr.labelledby]=\"groupId\"\n [@.disabled]=\"animationDisabled\"\n [@skyAnimationSlide]=\"slideDirection\"\n (@skyAnimationSlide.done)=\"updateSlideDirection($event)\"\n >\n <ng-content />\n </div>\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: 0 0 0 10px;--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)}.sky-vertical-tabset-group-header-sub-open~.sky-vertical-tabset-group-content{padding:var(--sky-override-vertical-tabset-group-content-padding, var(--sky-comp-tab-vertical-subgroup-space-inset-top) var(--sky-comp-tab-vertical-subgroup-space-inset-right) var(--sky-comp-tab-vertical-subgroup-space-inset-bottom) var(--sky-comp-tab-vertical-subgroup-space-inset-left))}.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"] }]
|
|
707
707
|
}], ctorParameters: () => [{ type: SkyVerticalTabsetService }, { type: i0.ChangeDetectorRef }], propDecorators: { disabled: [{
|
|
708
708
|
type: Input
|
|
709
709
|
}], groupHeading: [{
|
|
@@ -824,7 +824,7 @@ class SkyVerticalTabsetComponent {
|
|
|
824
824
|
this.adapterService.focusPreviousButton(this.tabGroups);
|
|
825
825
|
}
|
|
826
826
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: SkyVerticalTabsetComponent, deps: [{ token: SkyVerticalTabsetAdapterService }, { token: SkyVerticalTabsetService }, { token: i3$1.SkyLibResourcesService }, { token: i0.ChangeDetectorRef }, { token: SkyTabIdService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
827
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: SkyVerticalTabsetComponent, isStandalone: false, selector: "sky-vertical-tabset", inputs: { showTabsText: "showTabsText", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", ariaRole: "ariaRole", maintainTabContent: "maintainTabContent" }, outputs: { activeChange: "activeChange" }, providers: [SkyTabIdService, SkyVerticalTabsetService], viewQueries: [{ propertyName: "tabGroups", first: true, predicate: ["groupContainerWrapper"], descendants: true }, { propertyName: "content", first: true, predicate: ["skySideContent"], descendants: true }, { propertyName: "contentWrapper", first: true, predicate: ["contentContainerWrapper"], descendants: true }], ngImport: i0, template: "<div\n class=\"sky-vertical-tabset\"\n [tabIndex]=\"tablistHasFocus ? -1 : 0\"\n (focus)=\"tabsetFocus()\"\n>\n <!--\n ARIA rules do not allow tabpanel elements to be children of a tablist element.\n However, the markup for each sky-vertical-tab component includes both the tab button\n and its panel, making the panel element a child of its tablist. Moreover, our\n sky-vertical-tab components can be grouped within collapsible containers, which also\n violates accessibility rules because only tab buttons can be children of a tablist.\n To address this, we create an empty tablist element with an aria-owns attribute,\n pointing to each tab element individually. That way, we don't have to worry about the\n structure for each sky-vertical-tab component in order to satisfy accessibility\n guidelines.\n -->\n <span\n class=\"sky-vertical-tabset-tablist\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.aria-orientation]=\"isMobile ? undefined : 'vertical'\"\n [attr.aria-owns]=\"\n isMobile ? undefined : (tabIdSvc.ids | async)?.join(' ') || undefined\n \"\n [attr.role]=\"isMobile ? undefined : ariaRole\"\n ></span>\n @if (maintainTabContent || tabService.tabsVisible()) {\n <div\n #groupContainerWrapper\n class=\"sky-vertical-tabset-group-container\"\n [@tabGroupEnter]=\"tabService.animationTabsVisibleState\"\n [ngClass]=\"{ 'sky-vertical-tabset-hidden': !tabService.tabsVisible() }\"\n [tabIndex]=\"tablistHasFocus ? -1 : 0\"\n (@tabGroupEnter.done)=\"tabsetFocus()\"\n (keydown.arrowDown)=\"tabGroupsArrowDown(); $event.preventDefault()\"\n (keydown.arrowUp)=\"tabGroupsArrowUp(); $event.preventDefault()\"\n (focusin)=\"trapFocusInTablist()\"\n (focusout)=\"resetTabIndex()\"\n >\n <ng-content />\n </div>\n }\n @if (maintainTabContent || tabService.contentVisible()) {\n <div\n #contentContainerWrapper\n class=\"sky-vertical-tabset-content\"\n [ngClass]=\"{\n 'sky-vertical-tabset-content-hidden': !tabService.contentVisible()\n }\"\n [@contentEnter]=\"tabService.animationContentVisibleState\"\n (focusin)=\"resetTabIndex()\"\n >\n <div #skySideContent></div>\n @if (!tabService.tabsVisible()) {\n <button\n class=\"sky-btn sky-btn-primary sky-vertical-tabset-show-tabs-btn\"\n type=\"button\"\n (click)=\"tabService.showTabs()\"\n >\n <sky-icon iconName=\"chevron-left\" />\n {{ showTabsText }}\n </button>\n }\n </div>\n }\n</div>\n", styles: [".sky-vertical-tabset:not(.sky-theme-modern *){--sky-override-vertical-tab-content-pane-margin-bottom: 0;--sky-override-vertical-tabset-content-margin-sm-lg: 10px 0 0 10px;--sky-override-vertical-tabset-content-margin-xs: 10px 0 0 10px;--sky-override-vertical-tabset-group-container-border-right: 1px solid #cdcfd2;--sky-override-vertical-tabset-group-container-padding: 0;--sky-override-vertical-tabset-modal-margin-adjustment: -15px;--sky-override-vertical-tabset-modal-margin-adjustment-with-group: -15px;--sky-override-vertical-tabset-show-tabs-margin-top: 10px}:host .sky-vertical-tabset{display:block;height:auto}:host .sky-vertical-tabset-group-container{border-right:none}:host-context(.sky-responsive-container-xs) .sky-vertical-tabset,:host-context(.sky-responsive-container-sm) .sky-vertical-tabset,:host-context(.sky-responsive-container-md) .sky-vertical-tabset,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset{display:block;height:auto}:host-context(.sky-responsive-container-xs) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-sm) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container{border-right:none}@media (min-width: 768px){:host .sky-vertical-tabset{display:flex;height:100%}:host .sky-vertical-tabset-group-container{border-right:var(--sky-override-vertical-tabset-group-container-border-right, var(--sky-border-width-divider) var(--sky-border-style-divider) var(--sky-color-border-divider))}}:host-context(.sky-responsive-container-sm) .sky-vertical-tabset,:host-context(.sky-responsive-container-md) .sky-vertical-tabset,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset{display:flex;height:100%}:host-context(.sky-responsive-container-sm) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container{border-right:var(--sky-override-vertical-tabset-group-container-border-right, var(--sky-border-width-divider) var(--sky-border-style-divider) var(--sky-color-border-divider))}.sky-vertical-tabset-hidden{display:none}.sky-vertical-tabset-content{margin:var(--sky-override-vertical-tabset-content-margin-xs, var(--sky-comp-tab-vertical-content-space-inset-xs-top) var(--sky-comp-tab-vertical-content-space-inset-xs-right) var(--sky-comp-tab-vertical-content-space-inset-xs-bottom) var(--sky-comp-tab-vertical-content-space-inset-xs-left));flex-basis:75%;overflow-y:auto}.sky-vertical-tabset-content-hidden{display:none}.sky-vertical-tabset-show-tabs-btn{margin-top:var(--sky-override-vertical-tabset-show-tabs-margin-top, 0)}.sky-vertical-tabset-group-container{flex-basis:25%;overflow-y:auto;padding:var(--sky-override-vertical-tabset-group-container-padding, var(--sky-comp-tab-vertical-group-space-inset-top)
|
|
827
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: SkyVerticalTabsetComponent, isStandalone: false, selector: "sky-vertical-tabset", inputs: { showTabsText: "showTabsText", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", ariaRole: "ariaRole", maintainTabContent: "maintainTabContent" }, outputs: { activeChange: "activeChange" }, providers: [SkyTabIdService, SkyVerticalTabsetService], viewQueries: [{ propertyName: "tabGroups", first: true, predicate: ["groupContainerWrapper"], descendants: true }, { propertyName: "content", first: true, predicate: ["skySideContent"], descendants: true }, { propertyName: "contentWrapper", first: true, predicate: ["contentContainerWrapper"], descendants: true }], ngImport: i0, template: "<div\n class=\"sky-vertical-tabset\"\n [tabIndex]=\"tablistHasFocus ? -1 : 0\"\n (focus)=\"tabsetFocus()\"\n>\n <!--\n ARIA rules do not allow tabpanel elements to be children of a tablist element.\n However, the markup for each sky-vertical-tab component includes both the tab button\n and its panel, making the panel element a child of its tablist. Moreover, our\n sky-vertical-tab components can be grouped within collapsible containers, which also\n violates accessibility rules because only tab buttons can be children of a tablist.\n To address this, we create an empty tablist element with an aria-owns attribute,\n pointing to each tab element individually. That way, we don't have to worry about the\n structure for each sky-vertical-tab component in order to satisfy accessibility\n guidelines.\n -->\n <span\n class=\"sky-vertical-tabset-tablist\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.aria-orientation]=\"isMobile ? undefined : 'vertical'\"\n [attr.aria-owns]=\"\n isMobile ? undefined : (tabIdSvc.ids | async)?.join(' ') || undefined\n \"\n [attr.role]=\"isMobile ? undefined : ariaRole\"\n ></span>\n @if (maintainTabContent || tabService.tabsVisible()) {\n <div\n #groupContainerWrapper\n class=\"sky-vertical-tabset-group-container\"\n [@tabGroupEnter]=\"tabService.animationTabsVisibleState\"\n [ngClass]=\"{ 'sky-vertical-tabset-hidden': !tabService.tabsVisible() }\"\n [tabIndex]=\"tablistHasFocus ? -1 : 0\"\n (@tabGroupEnter.done)=\"tabsetFocus()\"\n (keydown.arrowDown)=\"tabGroupsArrowDown(); $event.preventDefault()\"\n (keydown.arrowUp)=\"tabGroupsArrowUp(); $event.preventDefault()\"\n (focusin)=\"trapFocusInTablist()\"\n (focusout)=\"resetTabIndex()\"\n >\n <ng-content />\n </div>\n }\n @if (maintainTabContent || tabService.contentVisible()) {\n <div\n #contentContainerWrapper\n class=\"sky-vertical-tabset-content\"\n [ngClass]=\"{\n 'sky-vertical-tabset-content-hidden': !tabService.contentVisible()\n }\"\n [@contentEnter]=\"tabService.animationContentVisibleState\"\n (focusin)=\"resetTabIndex()\"\n >\n <div #skySideContent></div>\n @if (!tabService.tabsVisible()) {\n <button\n class=\"sky-btn sky-btn-primary sky-vertical-tabset-show-tabs-btn\"\n type=\"button\"\n (click)=\"tabService.showTabs()\"\n >\n <sky-icon iconName=\"chevron-left\" />\n {{ showTabsText }}\n </button>\n }\n </div>\n }\n</div>\n", styles: [".sky-vertical-tabset:not(.sky-theme-modern *){--sky-override-vertical-tab-content-pane-margin-bottom: 0;--sky-override-vertical-tabset-content-margin-sm-lg: 10px 0 0 10px;--sky-override-vertical-tabset-content-margin-xs: 10px 0 0 10px;--sky-override-vertical-tabset-group-container-border-right: 1px solid #cdcfd2;--sky-override-vertical-tabset-group-container-padding: 0;--sky-override-vertical-tabset-modal-margin-adjustment: -15px;--sky-override-vertical-tabset-modal-margin-adjustment-with-group: -15px;--sky-override-vertical-tabset-show-tabs-margin-top: 10px}:host .sky-vertical-tabset{display:block;height:auto}:host .sky-vertical-tabset-group-container{border-right:none}:host-context(.sky-responsive-container-xs) .sky-vertical-tabset,:host-context(.sky-responsive-container-sm) .sky-vertical-tabset,:host-context(.sky-responsive-container-md) .sky-vertical-tabset,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset{display:block;height:auto}:host-context(.sky-responsive-container-xs) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-sm) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container{border-right:none}@media (min-width: 768px){:host .sky-vertical-tabset{display:flex;height:100%}:host .sky-vertical-tabset-group-container{border-right:var(--sky-override-vertical-tabset-group-container-border-right, var(--sky-border-width-divider) var(--sky-border-style-divider) var(--sky-color-border-divider))}}:host-context(.sky-responsive-container-sm) .sky-vertical-tabset,:host-context(.sky-responsive-container-md) .sky-vertical-tabset,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset{display:flex;height:100%}:host-context(.sky-responsive-container-sm) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container{border-right:var(--sky-override-vertical-tabset-group-container-border-right, var(--sky-border-width-divider) var(--sky-border-style-divider) var(--sky-color-border-divider))}.sky-vertical-tabset-hidden{display:none}.sky-vertical-tabset-content{margin:var(--sky-override-vertical-tabset-content-margin-xs, var(--sky-comp-tab-vertical-content-space-inset-xs-top) var(--sky-comp-tab-vertical-content-space-inset-xs-right) var(--sky-comp-tab-vertical-content-space-inset-xs-bottom) var(--sky-comp-tab-vertical-content-space-inset-xs-left));flex-basis:75%;overflow-y:auto}.sky-vertical-tabset-content-hidden{display:none}.sky-vertical-tabset-show-tabs-btn{margin-top:var(--sky-override-vertical-tabset-show-tabs-margin-top, 0)}.sky-vertical-tabset-group-container{flex-basis:25%;overflow-y:auto;padding:var(--sky-override-vertical-tabset-group-container-padding, var(--sky-comp-tab-vertical-group-space-inset-top) var(--sky-comp-tab-vertical-group-space-inset-right) var(--sky-comp-tab-vertical-group-space-inset-bottom) var(--sky-comp-tab-vertical-group-space-inset-left))}:host-context(sky-modal-content)>:host .sky-vertical-tabset{margin:var(--sky-override-vertical-tabset-modal-margin-adjustment, calc(var(--sky-comp-modal-content-space-inset-top) * -1) calc(var(--sky-comp-modal-content-space-inset-right) * -1) calc(var(--sky-comp-modal-content-space-inset-bottom) * -1) calc((var(--sky-comp-tab-vertical-space-inset-left) + var(--sky-space-inline-s)) * -1))}:host-context(sky-modal-content)>:host .sky-vertical-tabset:has(sky-vertical-tabset-group){margin-left:var(--sky-override-vertical-tabset-modal-margin-adjustment-with-group, calc(var(--sky-comp-tab-vertical-group-button-space-inset-left) * -1))}@media (min-width: 768px){:host .sky-vertical-tabset-content{margin:var(--sky-override-vertical-tabset-content-margin-sm-lg, var(--sky-comp-tab-vertical-content-space-inset-sm-top) var(--sky-comp-tab-vertical-content-space-inset-sm-right) var(--sky-comp-tab-vertical-content-space-inset-sm-bottom) var(--sky-comp-tab-vertical-content-space-inset-sm-left))}}:host-context(.sky-responsive-container-sm) .sky-vertical-tabset-content,:host-context(.sky-responsive-container-md) .sky-vertical-tabset-content,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset-content{margin:var(--sky-override-vertical-tabset-content-margin-sm-lg, var(--sky-comp-tab-vertical-content-space-inset-sm-top) var(--sky-comp-tab-vertical-content-space-inset-sm-right) var(--sky-comp-tab-vertical-content-space-inset-sm-bottom) var(--sky-comp-tab-vertical-content-space-inset-sm-left))}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i6.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], animations: [
|
|
828
828
|
trigger('tabGroupEnter', [
|
|
829
829
|
transition(`${HIDDEN_STATE} => ${VISIBLE_STATE}`, [
|
|
830
830
|
style({ transform: 'translate(-100%)' }),
|
|
@@ -854,7 +854,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
|
|
|
854
854
|
animate('150ms ease-in'),
|
|
855
855
|
]),
|
|
856
856
|
]),
|
|
857
|
-
], standalone: false, template: "<div\n class=\"sky-vertical-tabset\"\n [tabIndex]=\"tablistHasFocus ? -1 : 0\"\n (focus)=\"tabsetFocus()\"\n>\n <!--\n ARIA rules do not allow tabpanel elements to be children of a tablist element.\n However, the markup for each sky-vertical-tab component includes both the tab button\n and its panel, making the panel element a child of its tablist. Moreover, our\n sky-vertical-tab components can be grouped within collapsible containers, which also\n violates accessibility rules because only tab buttons can be children of a tablist.\n To address this, we create an empty tablist element with an aria-owns attribute,\n pointing to each tab element individually. That way, we don't have to worry about the\n structure for each sky-vertical-tab component in order to satisfy accessibility\n guidelines.\n -->\n <span\n class=\"sky-vertical-tabset-tablist\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.aria-orientation]=\"isMobile ? undefined : 'vertical'\"\n [attr.aria-owns]=\"\n isMobile ? undefined : (tabIdSvc.ids | async)?.join(' ') || undefined\n \"\n [attr.role]=\"isMobile ? undefined : ariaRole\"\n ></span>\n @if (maintainTabContent || tabService.tabsVisible()) {\n <div\n #groupContainerWrapper\n class=\"sky-vertical-tabset-group-container\"\n [@tabGroupEnter]=\"tabService.animationTabsVisibleState\"\n [ngClass]=\"{ 'sky-vertical-tabset-hidden': !tabService.tabsVisible() }\"\n [tabIndex]=\"tablistHasFocus ? -1 : 0\"\n (@tabGroupEnter.done)=\"tabsetFocus()\"\n (keydown.arrowDown)=\"tabGroupsArrowDown(); $event.preventDefault()\"\n (keydown.arrowUp)=\"tabGroupsArrowUp(); $event.preventDefault()\"\n (focusin)=\"trapFocusInTablist()\"\n (focusout)=\"resetTabIndex()\"\n >\n <ng-content />\n </div>\n }\n @if (maintainTabContent || tabService.contentVisible()) {\n <div\n #contentContainerWrapper\n class=\"sky-vertical-tabset-content\"\n [ngClass]=\"{\n 'sky-vertical-tabset-content-hidden': !tabService.contentVisible()\n }\"\n [@contentEnter]=\"tabService.animationContentVisibleState\"\n (focusin)=\"resetTabIndex()\"\n >\n <div #skySideContent></div>\n @if (!tabService.tabsVisible()) {\n <button\n class=\"sky-btn sky-btn-primary sky-vertical-tabset-show-tabs-btn\"\n type=\"button\"\n (click)=\"tabService.showTabs()\"\n >\n <sky-icon iconName=\"chevron-left\" />\n {{ showTabsText }}\n </button>\n }\n </div>\n }\n</div>\n", styles: [".sky-vertical-tabset:not(.sky-theme-modern *){--sky-override-vertical-tab-content-pane-margin-bottom: 0;--sky-override-vertical-tabset-content-margin-sm-lg: 10px 0 0 10px;--sky-override-vertical-tabset-content-margin-xs: 10px 0 0 10px;--sky-override-vertical-tabset-group-container-border-right: 1px solid #cdcfd2;--sky-override-vertical-tabset-group-container-padding: 0;--sky-override-vertical-tabset-modal-margin-adjustment: -15px;--sky-override-vertical-tabset-modal-margin-adjustment-with-group: -15px;--sky-override-vertical-tabset-show-tabs-margin-top: 10px}:host .sky-vertical-tabset{display:block;height:auto}:host .sky-vertical-tabset-group-container{border-right:none}:host-context(.sky-responsive-container-xs) .sky-vertical-tabset,:host-context(.sky-responsive-container-sm) .sky-vertical-tabset,:host-context(.sky-responsive-container-md) .sky-vertical-tabset,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset{display:block;height:auto}:host-context(.sky-responsive-container-xs) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-sm) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container{border-right:none}@media (min-width: 768px){:host .sky-vertical-tabset{display:flex;height:100%}:host .sky-vertical-tabset-group-container{border-right:var(--sky-override-vertical-tabset-group-container-border-right, var(--sky-border-width-divider) var(--sky-border-style-divider) var(--sky-color-border-divider))}}:host-context(.sky-responsive-container-sm) .sky-vertical-tabset,:host-context(.sky-responsive-container-md) .sky-vertical-tabset,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset{display:flex;height:100%}:host-context(.sky-responsive-container-sm) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container{border-right:var(--sky-override-vertical-tabset-group-container-border-right, var(--sky-border-width-divider) var(--sky-border-style-divider) var(--sky-color-border-divider))}.sky-vertical-tabset-hidden{display:none}.sky-vertical-tabset-content{margin:var(--sky-override-vertical-tabset-content-margin-xs, var(--sky-comp-tab-vertical-content-space-inset-xs-top) var(--sky-comp-tab-vertical-content-space-inset-xs-right) var(--sky-comp-tab-vertical-content-space-inset-xs-bottom) var(--sky-comp-tab-vertical-content-space-inset-xs-left));flex-basis:75%;overflow-y:auto}.sky-vertical-tabset-content-hidden{display:none}.sky-vertical-tabset-show-tabs-btn{margin-top:var(--sky-override-vertical-tabset-show-tabs-margin-top, 0)}.sky-vertical-tabset-group-container{flex-basis:25%;overflow-y:auto;padding:var(--sky-override-vertical-tabset-group-container-padding, var(--sky-comp-tab-vertical-group-space-inset-top)
|
|
857
|
+
], standalone: false, template: "<div\n class=\"sky-vertical-tabset\"\n [tabIndex]=\"tablistHasFocus ? -1 : 0\"\n (focus)=\"tabsetFocus()\"\n>\n <!--\n ARIA rules do not allow tabpanel elements to be children of a tablist element.\n However, the markup for each sky-vertical-tab component includes both the tab button\n and its panel, making the panel element a child of its tablist. Moreover, our\n sky-vertical-tab components can be grouped within collapsible containers, which also\n violates accessibility rules because only tab buttons can be children of a tablist.\n To address this, we create an empty tablist element with an aria-owns attribute,\n pointing to each tab element individually. That way, we don't have to worry about the\n structure for each sky-vertical-tab component in order to satisfy accessibility\n guidelines.\n -->\n <span\n class=\"sky-vertical-tabset-tablist\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.aria-orientation]=\"isMobile ? undefined : 'vertical'\"\n [attr.aria-owns]=\"\n isMobile ? undefined : (tabIdSvc.ids | async)?.join(' ') || undefined\n \"\n [attr.role]=\"isMobile ? undefined : ariaRole\"\n ></span>\n @if (maintainTabContent || tabService.tabsVisible()) {\n <div\n #groupContainerWrapper\n class=\"sky-vertical-tabset-group-container\"\n [@tabGroupEnter]=\"tabService.animationTabsVisibleState\"\n [ngClass]=\"{ 'sky-vertical-tabset-hidden': !tabService.tabsVisible() }\"\n [tabIndex]=\"tablistHasFocus ? -1 : 0\"\n (@tabGroupEnter.done)=\"tabsetFocus()\"\n (keydown.arrowDown)=\"tabGroupsArrowDown(); $event.preventDefault()\"\n (keydown.arrowUp)=\"tabGroupsArrowUp(); $event.preventDefault()\"\n (focusin)=\"trapFocusInTablist()\"\n (focusout)=\"resetTabIndex()\"\n >\n <ng-content />\n </div>\n }\n @if (maintainTabContent || tabService.contentVisible()) {\n <div\n #contentContainerWrapper\n class=\"sky-vertical-tabset-content\"\n [ngClass]=\"{\n 'sky-vertical-tabset-content-hidden': !tabService.contentVisible()\n }\"\n [@contentEnter]=\"tabService.animationContentVisibleState\"\n (focusin)=\"resetTabIndex()\"\n >\n <div #skySideContent></div>\n @if (!tabService.tabsVisible()) {\n <button\n class=\"sky-btn sky-btn-primary sky-vertical-tabset-show-tabs-btn\"\n type=\"button\"\n (click)=\"tabService.showTabs()\"\n >\n <sky-icon iconName=\"chevron-left\" />\n {{ showTabsText }}\n </button>\n }\n </div>\n }\n</div>\n", styles: [".sky-vertical-tabset:not(.sky-theme-modern *){--sky-override-vertical-tab-content-pane-margin-bottom: 0;--sky-override-vertical-tabset-content-margin-sm-lg: 10px 0 0 10px;--sky-override-vertical-tabset-content-margin-xs: 10px 0 0 10px;--sky-override-vertical-tabset-group-container-border-right: 1px solid #cdcfd2;--sky-override-vertical-tabset-group-container-padding: 0;--sky-override-vertical-tabset-modal-margin-adjustment: -15px;--sky-override-vertical-tabset-modal-margin-adjustment-with-group: -15px;--sky-override-vertical-tabset-show-tabs-margin-top: 10px}:host .sky-vertical-tabset{display:block;height:auto}:host .sky-vertical-tabset-group-container{border-right:none}:host-context(.sky-responsive-container-xs) .sky-vertical-tabset,:host-context(.sky-responsive-container-sm) .sky-vertical-tabset,:host-context(.sky-responsive-container-md) .sky-vertical-tabset,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset{display:block;height:auto}:host-context(.sky-responsive-container-xs) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-sm) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container{border-right:none}@media (min-width: 768px){:host .sky-vertical-tabset{display:flex;height:100%}:host .sky-vertical-tabset-group-container{border-right:var(--sky-override-vertical-tabset-group-container-border-right, var(--sky-border-width-divider) var(--sky-border-style-divider) var(--sky-color-border-divider))}}:host-context(.sky-responsive-container-sm) .sky-vertical-tabset,:host-context(.sky-responsive-container-md) .sky-vertical-tabset,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset{display:flex;height:100%}:host-context(.sky-responsive-container-sm) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container{border-right:var(--sky-override-vertical-tabset-group-container-border-right, var(--sky-border-width-divider) var(--sky-border-style-divider) var(--sky-color-border-divider))}.sky-vertical-tabset-hidden{display:none}.sky-vertical-tabset-content{margin:var(--sky-override-vertical-tabset-content-margin-xs, var(--sky-comp-tab-vertical-content-space-inset-xs-top) var(--sky-comp-tab-vertical-content-space-inset-xs-right) var(--sky-comp-tab-vertical-content-space-inset-xs-bottom) var(--sky-comp-tab-vertical-content-space-inset-xs-left));flex-basis:75%;overflow-y:auto}.sky-vertical-tabset-content-hidden{display:none}.sky-vertical-tabset-show-tabs-btn{margin-top:var(--sky-override-vertical-tabset-show-tabs-margin-top, 0)}.sky-vertical-tabset-group-container{flex-basis:25%;overflow-y:auto;padding:var(--sky-override-vertical-tabset-group-container-padding, var(--sky-comp-tab-vertical-group-space-inset-top) var(--sky-comp-tab-vertical-group-space-inset-right) var(--sky-comp-tab-vertical-group-space-inset-bottom) var(--sky-comp-tab-vertical-group-space-inset-left))}:host-context(sky-modal-content)>:host .sky-vertical-tabset{margin:var(--sky-override-vertical-tabset-modal-margin-adjustment, calc(var(--sky-comp-modal-content-space-inset-top) * -1) calc(var(--sky-comp-modal-content-space-inset-right) * -1) calc(var(--sky-comp-modal-content-space-inset-bottom) * -1) calc((var(--sky-comp-tab-vertical-space-inset-left) + var(--sky-space-inline-s)) * -1))}:host-context(sky-modal-content)>:host .sky-vertical-tabset:has(sky-vertical-tabset-group){margin-left:var(--sky-override-vertical-tabset-modal-margin-adjustment-with-group, calc(var(--sky-comp-tab-vertical-group-button-space-inset-left) * -1))}@media (min-width: 768px){:host .sky-vertical-tabset-content{margin:var(--sky-override-vertical-tabset-content-margin-sm-lg, var(--sky-comp-tab-vertical-content-space-inset-sm-top) var(--sky-comp-tab-vertical-content-space-inset-sm-right) var(--sky-comp-tab-vertical-content-space-inset-sm-bottom) var(--sky-comp-tab-vertical-content-space-inset-sm-left))}}:host-context(.sky-responsive-container-sm) .sky-vertical-tabset-content,:host-context(.sky-responsive-container-md) .sky-vertical-tabset-content,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset-content{margin:var(--sky-override-vertical-tabset-content-margin-sm-lg, var(--sky-comp-tab-vertical-content-space-inset-sm-top) var(--sky-comp-tab-vertical-content-space-inset-sm-right) var(--sky-comp-tab-vertical-content-space-inset-sm-bottom) var(--sky-comp-tab-vertical-content-space-inset-sm-left))}\n"] }]
|
|
858
858
|
}], ctorParameters: () => [{ type: SkyVerticalTabsetAdapterService }, { type: SkyVerticalTabsetService }, { type: i3$1.SkyLibResourcesService }, { type: i0.ChangeDetectorRef }, { type: SkyTabIdService }], propDecorators: { showTabsText: [{
|
|
859
859
|
type: Input
|
|
860
860
|
}], ariaLabel: [{
|
|
@@ -1151,7 +1151,7 @@ class SkySectionedFormComponent {
|
|
|
1151
1151
|
});
|
|
1152
1152
|
}
|
|
1153
1153
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: SkySectionedFormComponent, deps: [{ token: SkyVerticalTabsetService }, { token: i0.ChangeDetectorRef }, { token: SkyTabIdService }, { token: i3.SkyLogService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1154
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: SkySectionedFormComponent, isStandalone: false, selector: "sky-sectioned-form", inputs: { maintainSectionContent: "maintainSectionContent", messageStream: "messageStream" }, outputs: { indexChanged: "indexChanged", tabsVisibleChanged: "tabsVisibleChanged" }, providers: [SkyTabIdService, SkyVerticalTabsetService], viewQueries: [{ propertyName: "content", first: true, predicate: ["skySectionSideContent"], descendants: true }], ngImport: i0, template: "<div class=\"sky-sectioned-form\" (window:resize)=\"tabService.updateContent()\">\n <!--\n ARIA rules do not allow tabpanel elements to be children of a tablist element.\n However, the markup for each sky-vertical-tab component includes both the tab button\n and its panel, making the panel element a child of its tablist. Moreover, our\n sky-vertical-tab components can be grouped within collapsible containers, which also\n violates accessibility rules because only tab buttons can be children of a tablist.\n To address this, we create an empty tablist element with an aria-owns attribute,\n pointing to each tab element individually. That way, we don't have to worry about the\n structure for each sky-vertical-tab component in order to satisfy accessibility\n guidelines.\n -->\n <span\n [attr.aria-orientation]=\"ariaRole ? 'vertical' : undefined\"\n [attr.aria-owns]=\"ariaRole ? ariaOwns : undefined\"\n [attr.role]=\"ariaRole\"\n ></span>\n @if (maintainSectionContent || tabService.tabsVisible()) {\n <div\n class=\"sky-sectioned-form-tabs\"\n [ngClass]=\"{\n 'sky-sectioned-form-tabs-hidden': !tabService.tabsVisible(),\n 'sky-sectioned-form-tabs-only': !tabService.contentVisible()\n }\"\n [@tabEnter]=\"tabService.animationTabsVisibleState\"\n >\n <ng-content />\n </div>\n }\n @if (maintainSectionContent || tabService.contentVisible()) {\n <div\n #skySectionSideContent\n class=\"sky-sectioned-form-content\"\n [ngClass]=\"{\n 'sky-sectioned-form-content-hidden': !tabService.contentVisible()\n }\"\n [@contentEnter]=\"tabService.animationContentVisibleState\"\n ></div>\n }\n</div>\n", styles: [".sky-sectioned-form:not(.sky-theme-modern *){--sky-override-sectioned-form-content-border-left: 1px solid var(--sky-border-color-neutral-medium);--sky-override-sectioned-form-content-padding: var(--sky-padding-even-md) var(--sky-padding-even-xl);--sky-override-sectioned-form-modal-margin-adjustment: -15px;--sky-override-sectioned-form-tabs-only-padding: var(--sky-padding-even-md);--sky-override-sectioned-form-tabs-padding: 0}:host .sky-sectioned-form{display:block;max-height:none}:host .sky-sectioned-form-content{flex-basis:auto;overflow-y:visible;padding:var(--sky-override-sectioned-form-content-padding, var(--sky-comp-modal-content-space-inset-top) var(--sky-comp-modal-content-space-inset-right) var(--sky-comp-modal-content-space-inset-bottom) var(--sky-comp-modal-content-space-inset-left))}:host .sky-sectioned-form-tabs{flex-basis:auto;overflow-y:visible;padding:var(--sky-override-sectioned-form-tabs-padding, var(--sky-comp-tab-vertical-group-space-inset-top)
|
|
1154
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: SkySectionedFormComponent, isStandalone: false, selector: "sky-sectioned-form", inputs: { maintainSectionContent: "maintainSectionContent", messageStream: "messageStream" }, outputs: { indexChanged: "indexChanged", tabsVisibleChanged: "tabsVisibleChanged" }, providers: [SkyTabIdService, SkyVerticalTabsetService], viewQueries: [{ propertyName: "content", first: true, predicate: ["skySectionSideContent"], descendants: true }], ngImport: i0, template: "<div class=\"sky-sectioned-form\" (window:resize)=\"tabService.updateContent()\">\n <!--\n ARIA rules do not allow tabpanel elements to be children of a tablist element.\n However, the markup for each sky-vertical-tab component includes both the tab button\n and its panel, making the panel element a child of its tablist. Moreover, our\n sky-vertical-tab components can be grouped within collapsible containers, which also\n violates accessibility rules because only tab buttons can be children of a tablist.\n To address this, we create an empty tablist element with an aria-owns attribute,\n pointing to each tab element individually. That way, we don't have to worry about the\n structure for each sky-vertical-tab component in order to satisfy accessibility\n guidelines.\n -->\n <span\n [attr.aria-orientation]=\"ariaRole ? 'vertical' : undefined\"\n [attr.aria-owns]=\"ariaRole ? ariaOwns : undefined\"\n [attr.role]=\"ariaRole\"\n ></span>\n @if (maintainSectionContent || tabService.tabsVisible()) {\n <div\n class=\"sky-sectioned-form-tabs\"\n [ngClass]=\"{\n 'sky-sectioned-form-tabs-hidden': !tabService.tabsVisible(),\n 'sky-sectioned-form-tabs-only': !tabService.contentVisible()\n }\"\n [@tabEnter]=\"tabService.animationTabsVisibleState\"\n >\n <ng-content />\n </div>\n }\n @if (maintainSectionContent || tabService.contentVisible()) {\n <div\n #skySectionSideContent\n class=\"sky-sectioned-form-content\"\n [ngClass]=\"{\n 'sky-sectioned-form-content-hidden': !tabService.contentVisible()\n }\"\n [@contentEnter]=\"tabService.animationContentVisibleState\"\n ></div>\n }\n</div>\n", styles: [".sky-sectioned-form:not(.sky-theme-modern *){--sky-override-sectioned-form-content-border-left: 1px solid var(--sky-border-color-neutral-medium);--sky-override-sectioned-form-content-padding: var(--sky-padding-even-md) var(--sky-padding-even-xl);--sky-override-sectioned-form-modal-margin-adjustment: -15px;--sky-override-sectioned-form-tabs-only-padding: var(--sky-padding-even-md);--sky-override-sectioned-form-tabs-padding: 0}:host .sky-sectioned-form{display:block;max-height:none}:host .sky-sectioned-form-content{flex-basis:auto;overflow-y:visible;padding:var(--sky-override-sectioned-form-content-padding, var(--sky-comp-modal-content-space-inset-top) var(--sky-comp-modal-content-space-inset-right) var(--sky-comp-modal-content-space-inset-bottom) var(--sky-comp-modal-content-space-inset-left))}:host .sky-sectioned-form-tabs{flex-basis:auto;overflow-y:visible;padding:var(--sky-override-sectioned-form-tabs-padding, var(--sky-comp-tab-vertical-group-space-inset-top) var(--sky-comp-tab-vertical-group-space-inset-right) var(--sky-comp-tab-vertical-group-space-inset-bottom) var(--sky-comp-tab-vertical-group-space-inset-left))}:host .sky-sectioned-form-tabs+.sky-sectioned-form-content{border-left:var(--sky-override-sectioned-form-content-border-left, var(--sky-border-width-divider) solid var(--sky-color-border-divider))}:host .sky-sectioned-form-tabs-only{padding:var(--sky-override-sectioned-form-tabs-only-padding, var(--sky-comp-modal-content-space-inset-top) var(--sky-comp-modal-content-space-inset-right) var(--sky-comp-modal-content-space-inset-bottom) var(--sky-comp-modal-content-space-inset-left))}:host-context(.sky-responsive-container-xs) .sky-sectioned-form,:host-context(.sky-responsive-container-sm) .sky-sectioned-form,:host-context(.sky-responsive-container-md) .sky-sectioned-form,:host-context(.sky-responsive-container-lg) .sky-sectioned-form{display:block;max-height:none}:host-context(.sky-responsive-container-xs) .sky-sectioned-form-content,:host-context(.sky-responsive-container-sm) .sky-sectioned-form-content,:host-context(.sky-responsive-container-md) .sky-sectioned-form-content,:host-context(.sky-responsive-container-lg) .sky-sectioned-form-content{flex-basis:auto;overflow-y:visible;padding:var(--sky-override-sectioned-form-content-padding, var(--sky-comp-modal-content-space-inset-top) var(--sky-comp-modal-content-space-inset-right) var(--sky-comp-modal-content-space-inset-bottom) var(--sky-comp-modal-content-space-inset-left))}:host-context(.sky-responsive-container-xs) .sky-sectioned-form-tabs,:host-context(.sky-responsive-container-sm) .sky-sectioned-form-tabs,:host-context(.sky-responsive-container-md) .sky-sectioned-form-tabs,:host-context(.sky-responsive-container-lg) .sky-sectioned-form-tabs{flex-basis:auto;overflow-y:visible;padding:var(--sky-override-sectioned-form-tabs-padding, var(--sky-comp-tab-vertical-group-space-inset-top) var(--sky-comp-tab-vertical-group-space-inset-right) var(--sky-comp-tab-vertical-group-space-inset-bottom) var(--sky-comp-tab-vertical-group-space-inset-left))}:host-context(.sky-responsive-container-xs) .sky-sectioned-form-tabs+.sky-sectioned-form-content,:host-context(.sky-responsive-container-sm) .sky-sectioned-form-tabs+.sky-sectioned-form-content,:host-context(.sky-responsive-container-md) .sky-sectioned-form-tabs+.sky-sectioned-form-content,:host-context(.sky-responsive-container-lg) .sky-sectioned-form-tabs+.sky-sectioned-form-content{border-left:var(--sky-override-sectioned-form-content-border-left, var(--sky-border-width-divider) solid var(--sky-color-border-divider))}:host-context(.sky-responsive-container-xs) .sky-sectioned-form-tabs-only,:host-context(.sky-responsive-container-sm) .sky-sectioned-form-tabs-only,:host-context(.sky-responsive-container-md) .sky-sectioned-form-tabs-only,:host-context(.sky-responsive-container-lg) .sky-sectioned-form-tabs-only{padding:var(--sky-override-sectioned-form-tabs-only-padding, var(--sky-comp-modal-content-space-inset-top) var(--sky-comp-modal-content-space-inset-right) var(--sky-comp-modal-content-space-inset-bottom) var(--sky-comp-modal-content-space-inset-left))}@media (min-width: 768px){:host .sky-sectioned-form{display:flex;max-height:100%}:host .sky-sectioned-form-content{flex-basis:70%;overflow-y:auto}:host .sky-sectioned-form-tabs{flex-basis:30%;overflow-y:auto}}:host-context(.sky-responsive-container-sm) .sky-sectioned-form,:host-context(.sky-responsive-container-md) .sky-sectioned-form,:host-context(.sky-responsive-container-lg) .sky-sectioned-form{display:flex;max-height:100%}:host-context(.sky-responsive-container-sm) .sky-sectioned-form-content,:host-context(.sky-responsive-container-md) .sky-sectioned-form-content,:host-context(.sky-responsive-container-lg) .sky-sectioned-form-content{flex-basis:70%;overflow-y:auto}:host-context(.sky-responsive-container-sm) .sky-sectioned-form-tabs,:host-context(.sky-responsive-container-md) .sky-sectioned-form-tabs,:host-context(.sky-responsive-container-lg) .sky-sectioned-form-tabs{flex-basis:30%;overflow-y:auto}:host-context(sky-modal) .sky-sectioned-form{min-height:460px}:host-context(sky-modal-content)>:host .sky-sectioned-form,:host-context(sky-modal-content)>form :host .sky-sectioned-form{margin:var(--sky-override-sectioned-form-modal-margin-adjustment, calc(var(--sky-comp-modal-content-space-inset-top) * -1) calc(var(--sky-comp-modal-content-space-inset-right) * -1) calc(var(--sky-comp-modal-content-space-inset-bottom) * -1) calc(var(--sky-comp-modal-content-space-inset-left) * -1))}.sky-sectioned-form-tabs-hidden,.sky-sectioned-form-content-hidden{display:none}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [
|
|
1155
1155
|
trigger('tabEnter', [
|
|
1156
1156
|
transition(`${HIDDEN_STATE} => ${VISIBLE_STATE}`, [
|
|
1157
1157
|
style({ transform: 'translate(-100%)' }),
|
|
@@ -1181,7 +1181,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
|
|
|
1181
1181
|
animate('150ms ease-in'),
|
|
1182
1182
|
]),
|
|
1183
1183
|
]),
|
|
1184
|
-
], standalone: false, template: "<div class=\"sky-sectioned-form\" (window:resize)=\"tabService.updateContent()\">\n <!--\n ARIA rules do not allow tabpanel elements to be children of a tablist element.\n However, the markup for each sky-vertical-tab component includes both the tab button\n and its panel, making the panel element a child of its tablist. Moreover, our\n sky-vertical-tab components can be grouped within collapsible containers, which also\n violates accessibility rules because only tab buttons can be children of a tablist.\n To address this, we create an empty tablist element with an aria-owns attribute,\n pointing to each tab element individually. That way, we don't have to worry about the\n structure for each sky-vertical-tab component in order to satisfy accessibility\n guidelines.\n -->\n <span\n [attr.aria-orientation]=\"ariaRole ? 'vertical' : undefined\"\n [attr.aria-owns]=\"ariaRole ? ariaOwns : undefined\"\n [attr.role]=\"ariaRole\"\n ></span>\n @if (maintainSectionContent || tabService.tabsVisible()) {\n <div\n class=\"sky-sectioned-form-tabs\"\n [ngClass]=\"{\n 'sky-sectioned-form-tabs-hidden': !tabService.tabsVisible(),\n 'sky-sectioned-form-tabs-only': !tabService.contentVisible()\n }\"\n [@tabEnter]=\"tabService.animationTabsVisibleState\"\n >\n <ng-content />\n </div>\n }\n @if (maintainSectionContent || tabService.contentVisible()) {\n <div\n #skySectionSideContent\n class=\"sky-sectioned-form-content\"\n [ngClass]=\"{\n 'sky-sectioned-form-content-hidden': !tabService.contentVisible()\n }\"\n [@contentEnter]=\"tabService.animationContentVisibleState\"\n ></div>\n }\n</div>\n", styles: [".sky-sectioned-form:not(.sky-theme-modern *){--sky-override-sectioned-form-content-border-left: 1px solid var(--sky-border-color-neutral-medium);--sky-override-sectioned-form-content-padding: var(--sky-padding-even-md) var(--sky-padding-even-xl);--sky-override-sectioned-form-modal-margin-adjustment: -15px;--sky-override-sectioned-form-tabs-only-padding: var(--sky-padding-even-md);--sky-override-sectioned-form-tabs-padding: 0}:host .sky-sectioned-form{display:block;max-height:none}:host .sky-sectioned-form-content{flex-basis:auto;overflow-y:visible;padding:var(--sky-override-sectioned-form-content-padding, var(--sky-comp-modal-content-space-inset-top) var(--sky-comp-modal-content-space-inset-right) var(--sky-comp-modal-content-space-inset-bottom) var(--sky-comp-modal-content-space-inset-left))}:host .sky-sectioned-form-tabs{flex-basis:auto;overflow-y:visible;padding:var(--sky-override-sectioned-form-tabs-padding, var(--sky-comp-tab-vertical-group-space-inset-top)
|
|
1184
|
+
], standalone: false, template: "<div class=\"sky-sectioned-form\" (window:resize)=\"tabService.updateContent()\">\n <!--\n ARIA rules do not allow tabpanel elements to be children of a tablist element.\n However, the markup for each sky-vertical-tab component includes both the tab button\n and its panel, making the panel element a child of its tablist. Moreover, our\n sky-vertical-tab components can be grouped within collapsible containers, which also\n violates accessibility rules because only tab buttons can be children of a tablist.\n To address this, we create an empty tablist element with an aria-owns attribute,\n pointing to each tab element individually. That way, we don't have to worry about the\n structure for each sky-vertical-tab component in order to satisfy accessibility\n guidelines.\n -->\n <span\n [attr.aria-orientation]=\"ariaRole ? 'vertical' : undefined\"\n [attr.aria-owns]=\"ariaRole ? ariaOwns : undefined\"\n [attr.role]=\"ariaRole\"\n ></span>\n @if (maintainSectionContent || tabService.tabsVisible()) {\n <div\n class=\"sky-sectioned-form-tabs\"\n [ngClass]=\"{\n 'sky-sectioned-form-tabs-hidden': !tabService.tabsVisible(),\n 'sky-sectioned-form-tabs-only': !tabService.contentVisible()\n }\"\n [@tabEnter]=\"tabService.animationTabsVisibleState\"\n >\n <ng-content />\n </div>\n }\n @if (maintainSectionContent || tabService.contentVisible()) {\n <div\n #skySectionSideContent\n class=\"sky-sectioned-form-content\"\n [ngClass]=\"{\n 'sky-sectioned-form-content-hidden': !tabService.contentVisible()\n }\"\n [@contentEnter]=\"tabService.animationContentVisibleState\"\n ></div>\n }\n</div>\n", styles: [".sky-sectioned-form:not(.sky-theme-modern *){--sky-override-sectioned-form-content-border-left: 1px solid var(--sky-border-color-neutral-medium);--sky-override-sectioned-form-content-padding: var(--sky-padding-even-md) var(--sky-padding-even-xl);--sky-override-sectioned-form-modal-margin-adjustment: -15px;--sky-override-sectioned-form-tabs-only-padding: var(--sky-padding-even-md);--sky-override-sectioned-form-tabs-padding: 0}:host .sky-sectioned-form{display:block;max-height:none}:host .sky-sectioned-form-content{flex-basis:auto;overflow-y:visible;padding:var(--sky-override-sectioned-form-content-padding, var(--sky-comp-modal-content-space-inset-top) var(--sky-comp-modal-content-space-inset-right) var(--sky-comp-modal-content-space-inset-bottom) var(--sky-comp-modal-content-space-inset-left))}:host .sky-sectioned-form-tabs{flex-basis:auto;overflow-y:visible;padding:var(--sky-override-sectioned-form-tabs-padding, var(--sky-comp-tab-vertical-group-space-inset-top) var(--sky-comp-tab-vertical-group-space-inset-right) var(--sky-comp-tab-vertical-group-space-inset-bottom) var(--sky-comp-tab-vertical-group-space-inset-left))}:host .sky-sectioned-form-tabs+.sky-sectioned-form-content{border-left:var(--sky-override-sectioned-form-content-border-left, var(--sky-border-width-divider) solid var(--sky-color-border-divider))}:host .sky-sectioned-form-tabs-only{padding:var(--sky-override-sectioned-form-tabs-only-padding, var(--sky-comp-modal-content-space-inset-top) var(--sky-comp-modal-content-space-inset-right) var(--sky-comp-modal-content-space-inset-bottom) var(--sky-comp-modal-content-space-inset-left))}:host-context(.sky-responsive-container-xs) .sky-sectioned-form,:host-context(.sky-responsive-container-sm) .sky-sectioned-form,:host-context(.sky-responsive-container-md) .sky-sectioned-form,:host-context(.sky-responsive-container-lg) .sky-sectioned-form{display:block;max-height:none}:host-context(.sky-responsive-container-xs) .sky-sectioned-form-content,:host-context(.sky-responsive-container-sm) .sky-sectioned-form-content,:host-context(.sky-responsive-container-md) .sky-sectioned-form-content,:host-context(.sky-responsive-container-lg) .sky-sectioned-form-content{flex-basis:auto;overflow-y:visible;padding:var(--sky-override-sectioned-form-content-padding, var(--sky-comp-modal-content-space-inset-top) var(--sky-comp-modal-content-space-inset-right) var(--sky-comp-modal-content-space-inset-bottom) var(--sky-comp-modal-content-space-inset-left))}:host-context(.sky-responsive-container-xs) .sky-sectioned-form-tabs,:host-context(.sky-responsive-container-sm) .sky-sectioned-form-tabs,:host-context(.sky-responsive-container-md) .sky-sectioned-form-tabs,:host-context(.sky-responsive-container-lg) .sky-sectioned-form-tabs{flex-basis:auto;overflow-y:visible;padding:var(--sky-override-sectioned-form-tabs-padding, var(--sky-comp-tab-vertical-group-space-inset-top) var(--sky-comp-tab-vertical-group-space-inset-right) var(--sky-comp-tab-vertical-group-space-inset-bottom) var(--sky-comp-tab-vertical-group-space-inset-left))}:host-context(.sky-responsive-container-xs) .sky-sectioned-form-tabs+.sky-sectioned-form-content,:host-context(.sky-responsive-container-sm) .sky-sectioned-form-tabs+.sky-sectioned-form-content,:host-context(.sky-responsive-container-md) .sky-sectioned-form-tabs+.sky-sectioned-form-content,:host-context(.sky-responsive-container-lg) .sky-sectioned-form-tabs+.sky-sectioned-form-content{border-left:var(--sky-override-sectioned-form-content-border-left, var(--sky-border-width-divider) solid var(--sky-color-border-divider))}:host-context(.sky-responsive-container-xs) .sky-sectioned-form-tabs-only,:host-context(.sky-responsive-container-sm) .sky-sectioned-form-tabs-only,:host-context(.sky-responsive-container-md) .sky-sectioned-form-tabs-only,:host-context(.sky-responsive-container-lg) .sky-sectioned-form-tabs-only{padding:var(--sky-override-sectioned-form-tabs-only-padding, var(--sky-comp-modal-content-space-inset-top) var(--sky-comp-modal-content-space-inset-right) var(--sky-comp-modal-content-space-inset-bottom) var(--sky-comp-modal-content-space-inset-left))}@media (min-width: 768px){:host .sky-sectioned-form{display:flex;max-height:100%}:host .sky-sectioned-form-content{flex-basis:70%;overflow-y:auto}:host .sky-sectioned-form-tabs{flex-basis:30%;overflow-y:auto}}:host-context(.sky-responsive-container-sm) .sky-sectioned-form,:host-context(.sky-responsive-container-md) .sky-sectioned-form,:host-context(.sky-responsive-container-lg) .sky-sectioned-form{display:flex;max-height:100%}:host-context(.sky-responsive-container-sm) .sky-sectioned-form-content,:host-context(.sky-responsive-container-md) .sky-sectioned-form-content,:host-context(.sky-responsive-container-lg) .sky-sectioned-form-content{flex-basis:70%;overflow-y:auto}:host-context(.sky-responsive-container-sm) .sky-sectioned-form-tabs,:host-context(.sky-responsive-container-md) .sky-sectioned-form-tabs,:host-context(.sky-responsive-container-lg) .sky-sectioned-form-tabs{flex-basis:30%;overflow-y:auto}:host-context(sky-modal) .sky-sectioned-form{min-height:460px}:host-context(sky-modal-content)>:host .sky-sectioned-form,:host-context(sky-modal-content)>form :host .sky-sectioned-form{margin:var(--sky-override-sectioned-form-modal-margin-adjustment, calc(var(--sky-comp-modal-content-space-inset-top) * -1) calc(var(--sky-comp-modal-content-space-inset-right) * -1) calc(var(--sky-comp-modal-content-space-inset-bottom) * -1) calc(var(--sky-comp-modal-content-space-inset-left) * -1))}.sky-sectioned-form-tabs-hidden,.sky-sectioned-form-content-hidden{display:none}\n"] }]
|
|
1185
1185
|
}], ctorParameters: () => [{ type: SkyVerticalTabsetService }, { type: i0.ChangeDetectorRef }, { type: SkyTabIdService }, { type: i3.SkyLogService }], propDecorators: { maintainSectionContent: [{
|
|
1186
1186
|
type: Input
|
|
1187
1187
|
}], messageStream: [{
|