@skyux/tabs 15.0.0-beta.0 → 15.0.0-beta.2
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 +62 -6
- package/fesm2022/skyux-tabs.mjs.map +1 -1
- package/package.json +8 -8
- package/types/skyux-tabs.d.ts +25 -4
package/fesm2022/skyux-tabs.mjs
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import * as i1 from '@angular/common';
|
|
2
2
|
import { CommonModule, Location } from '@angular/common';
|
|
3
3
|
import * as i0 from '@angular/core';
|
|
4
|
-
import { NgModule, Injectable, inject, DOCUMENT, ChangeDetectorRef, ViewChild, Input, ChangeDetectionStrategy, Component, ContentChildren, input, EventEmitter, signal, computed, Output, afterNextRender, ElementRef, ViewEncapsulation,
|
|
4
|
+
import { NgModule, Injectable, inject, DOCUMENT, ChangeDetectorRef, ViewChild, Input, ChangeDetectionStrategy, Component, ContentChildren, input, EventEmitter, signal, computed, HostBinding, Output, afterNextRender, ElementRef, ViewEncapsulation, Pipe } from '@angular/core';
|
|
5
5
|
import { SkyCheckboxModule } from '@skyux/forms';
|
|
6
6
|
import * as i4$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, _SkyAnimationSlideComponent, _SkyTransitionEndHandlerDirective, SkyLogService
|
|
9
|
+
import { SkyMediaQueryService, SkyIdService, SkyLayoutHostService, SkyIdModule, SkyResponsiveHostDirective, _SkyAnimationSlideComponent, _SkyTransitionEndHandlerDirective, SkyLogService } from '@skyux/core';
|
|
10
10
|
import * as i2 from '@skyux/icon';
|
|
11
11
|
import { SkyIconModule } from '@skyux/icon';
|
|
12
12
|
import * as i4 from '@skyux/indicators';
|
|
@@ -225,6 +225,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
|
|
|
225
225
|
*/
|
|
226
226
|
class SkyVerticalTabsetService {
|
|
227
227
|
#groups;
|
|
228
|
+
#activeTabLayout;
|
|
228
229
|
#contentAdded;
|
|
229
230
|
#tabsVisible;
|
|
230
231
|
#isMobile;
|
|
@@ -264,6 +265,11 @@ class SkyVerticalTabsetService {
|
|
|
264
265
|
}
|
|
265
266
|
this.#isMobile = nowMobile;
|
|
266
267
|
});
|
|
268
|
+
this.#activeTabLayout = new Subject();
|
|
269
|
+
this.activeTabLayout = this.#activeTabLayout.asObservable();
|
|
270
|
+
}
|
|
271
|
+
ngOnDestroy() {
|
|
272
|
+
this.#activeTabLayout.complete();
|
|
267
273
|
}
|
|
268
274
|
addTab(tab) {
|
|
269
275
|
const index = this.tabs.length;
|
|
@@ -313,6 +319,7 @@ class SkyVerticalTabsetService {
|
|
|
313
319
|
activateTab(tab) {
|
|
314
320
|
// deactivate active tab
|
|
315
321
|
const activeTab = this.tabs.find((t) => t.index === this.activeIndex);
|
|
322
|
+
this.updateActiveTabLayout(tab.layout);
|
|
316
323
|
if (activeTab && activeTab.index !== tab.index) {
|
|
317
324
|
activeTab.active = false;
|
|
318
325
|
activeTab.tabDeactivated();
|
|
@@ -327,6 +334,9 @@ class SkyVerticalTabsetService {
|
|
|
327
334
|
isMobile() {
|
|
328
335
|
return this.#isMobile;
|
|
329
336
|
}
|
|
337
|
+
updateActiveTabLayout(layout) {
|
|
338
|
+
this.#activeTabLayout.next(layout);
|
|
339
|
+
}
|
|
330
340
|
updateContent() {
|
|
331
341
|
if (!this.maintainTabContent) {
|
|
332
342
|
if (!this.#contentAdded && this.contentVisible()) {
|
|
@@ -408,6 +418,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
|
|
|
408
418
|
type: Injectable
|
|
409
419
|
}], ctorParameters: () => [] });
|
|
410
420
|
|
|
421
|
+
const LAYOUT_DEFAULT$2 = 'none';
|
|
411
422
|
let nextId$2 = 0;
|
|
412
423
|
class SkyVerticalTabComponent {
|
|
413
424
|
/**
|
|
@@ -442,6 +453,23 @@ class SkyVerticalTabComponent {
|
|
|
442
453
|
set ariaRole(value) {
|
|
443
454
|
this.#_ariaRole = value ?? 'tab';
|
|
444
455
|
}
|
|
456
|
+
/**
|
|
457
|
+
* The tab layout that applies spacing to the tab container element. Use the layout
|
|
458
|
+
* that corresponds with the top-level component type used within the tab, or use `fit` to
|
|
459
|
+
* constrain the tab contents to the available viewport.
|
|
460
|
+
* Use `none` for custom content that does not adhere to predefined spacing or constraints.
|
|
461
|
+
* @default "none"
|
|
462
|
+
*/
|
|
463
|
+
set layout(value) {
|
|
464
|
+
const layout = value || LAYOUT_DEFAULT$2;
|
|
465
|
+
this.#layout = layout;
|
|
466
|
+
if (this.active) {
|
|
467
|
+
this.#tabsetService.updateActiveTabLayout(layout);
|
|
468
|
+
}
|
|
469
|
+
}
|
|
470
|
+
get layout() {
|
|
471
|
+
return this.#layout;
|
|
472
|
+
}
|
|
445
473
|
/**
|
|
446
474
|
* The ID for the tab.
|
|
447
475
|
* @deprecated Now that the vertical tabs provide aria labels automatically, this input is no longer necessary.
|
|
@@ -473,6 +501,7 @@ class SkyVerticalTabComponent {
|
|
|
473
501
|
#_contentRendered;
|
|
474
502
|
#tabIdOrDefault;
|
|
475
503
|
#defaultTabId;
|
|
504
|
+
#layout;
|
|
476
505
|
#mobileSubscription;
|
|
477
506
|
#ngUnsubscribe;
|
|
478
507
|
#adapterService;
|
|
@@ -501,6 +530,7 @@ class SkyVerticalTabComponent {
|
|
|
501
530
|
});
|
|
502
531
|
this.#_ariaRole = 'tab';
|
|
503
532
|
this.#_contentRendered = false;
|
|
533
|
+
this.#layout = LAYOUT_DEFAULT$2;
|
|
504
534
|
this.#mobileSubscription = new Subject();
|
|
505
535
|
this.#ngUnsubscribe = new Subject();
|
|
506
536
|
this.#adapterService = inject(SkyVerticalTabsetAdapterService);
|
|
@@ -552,7 +582,7 @@ class SkyVerticalTabComponent {
|
|
|
552
582
|
this.#changeRef.markForCheck();
|
|
553
583
|
}
|
|
554
584
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyVerticalTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
555
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", 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-override-vertical-tab-active-text-decoration: none}.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:hover{color:var(--sky-color-text-selected);text-decoration-line:var(--sky-override-vertical-tab-active-text-decoration, var(--sky-comp-override-inline-link-text-decoration-line-hover, var(--sky-font-text_decoration-standalone_link-hover)))}.sky-vertical-tabset-button.sky-vertical-tab-active:active{color:var(--sky-color-text-selected);text-decoration-line:var(--sky-override-vertical-tab-active-text-decoration, var(--sky-comp-override-inline-link-text-decoration-line-active, var(--sky-font-text_decoration-standalone_link-active)))}.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% );--sky-override-vertical-tab-text-decoration: none}: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-line:var(--sky-override-vertical-tab-text-decoration, var(--sky-comp-override-inline-link-text-decoration-line, var(--sky-font-text_decoration-standalone_link-base)))}.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);text-decoration-line:var(--sky-override-vertical-tab-text-decoration, var(--sky-comp-override-inline-link-text-decoration-line-hover, var(--sky-font-text_decoration-standalone_link-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);text-decoration-line:var(--sky-override-vertical-tab-text-decoration, var(--sky-comp-override-inline-link-text-decoration-line-active, var(--sky-font-text_decoration-standalone_link-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);text-decoration-line:var(--sky-override-vertical-tab-text-decoration, var(--sky-comp-override-inline-link-text-decoration-line-focus, var(--sky-font-text_decoration-standalone_link-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: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.λ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: i4.λ10, selector: "sky-status-indicator", inputs: ["indicatorType", "descriptionType", "customDescription", "helpPopoverContent", "helpPopoverTitle", "helpKey"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
585
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: SkyVerticalTabComponent, isStandalone: false, selector: "sky-vertical-tab", inputs: { active: "active", ariaControls: "ariaControls", ariaRole: "ariaRole", disabled: "disabled", errorIndicator: "errorIndicator", layout: "layout", 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-override-vertical-tab-active-text-decoration: none}.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:hover{color:var(--sky-color-text-selected);text-decoration-line:var(--sky-override-vertical-tab-active-text-decoration, var(--sky-comp-override-inline-link-text-decoration-line-hover, var(--sky-font-text_decoration-standalone_link-hover)))}.sky-vertical-tabset-button.sky-vertical-tab-active:active{color:var(--sky-color-text-selected);text-decoration-line:var(--sky-override-vertical-tab-active-text-decoration, var(--sky-comp-override-inline-link-text-decoration-line-active, var(--sky-font-text_decoration-standalone_link-active)))}.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% );--sky-override-vertical-tab-text-decoration: none}: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-line:var(--sky-override-vertical-tab-text-decoration, var(--sky-comp-override-inline-link-text-decoration-line, var(--sky-font-text_decoration-standalone_link-base)))}.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);text-decoration-line:var(--sky-override-vertical-tab-text-decoration, var(--sky-comp-override-inline-link-text-decoration-line-hover, var(--sky-font-text_decoration-standalone_link-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);text-decoration-line:var(--sky-override-vertical-tab-text-decoration, var(--sky-comp-override-inline-link-text-decoration-line-active, var(--sky-font-text_decoration-standalone_link-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);text-decoration-line:var(--sky-override-vertical-tab-text-decoration, var(--sky-comp-override-inline-link-text-decoration-line-focus, var(--sky-font-text_decoration-standalone_link-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: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.λ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: i4.λ10, selector: "sky-status-indicator", inputs: ["indicatorType", "descriptionType", "customDescription", "helpPopoverContent", "helpPopoverTitle", "helpKey"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
556
586
|
}
|
|
557
587
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyVerticalTabComponent, decorators: [{
|
|
558
588
|
type: Component,
|
|
@@ -567,6 +597,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
|
|
|
567
597
|
type: Input
|
|
568
598
|
}], errorIndicator: [{
|
|
569
599
|
type: Input
|
|
600
|
+
}], layout: [{
|
|
601
|
+
type: Input
|
|
570
602
|
}], requiredIndicator: [{
|
|
571
603
|
type: Input
|
|
572
604
|
}], tabHeaderCount: [{
|
|
@@ -721,6 +753,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
|
|
|
721
753
|
* pane for any `tabWidth` value.
|
|
722
754
|
*/
|
|
723
755
|
const DEFAULT_TAB_WIDTH$1 = '25%';
|
|
756
|
+
const LAYOUT_CLASS_PREFIX$1 = 'sky-layout-host-';
|
|
757
|
+
const LAYOUT_DEFAULT$1 = 'none';
|
|
724
758
|
class SkyVerticalTabsetComponent {
|
|
725
759
|
constructor() {
|
|
726
760
|
/**
|
|
@@ -743,7 +777,10 @@ class SkyVerticalTabsetComponent {
|
|
|
743
777
|
this.activeChange = new EventEmitter();
|
|
744
778
|
this.isMobile = signal(false, /* @ts-ignore */
|
|
745
779
|
...(ngDevMode ? [{ debugName: "isMobile" }] : /* istanbul ignore next */ []));
|
|
780
|
+
this.verticalTabsetCssClass = `sky-vertical-tabset-layout-${LAYOUT_DEFAULT$1}`;
|
|
781
|
+
this.verticalTabsetContentCssClass = `${LAYOUT_CLASS_PREFIX$1}${LAYOUT_DEFAULT$1}`;
|
|
746
782
|
this.tablistHasFocus = false;
|
|
783
|
+
this.#layoutHostSvc = inject(SkyLayoutHostService, { optional: true });
|
|
747
784
|
this.#ngUnsubscribe = new Subject();
|
|
748
785
|
this.#_ariaRole = 'tablist';
|
|
749
786
|
this.#resources = inject(SkyLibResourcesService);
|
|
@@ -772,6 +809,7 @@ class SkyVerticalTabsetComponent {
|
|
|
772
809
|
set ariaRole(value) {
|
|
773
810
|
this.#_ariaRole = value ?? 'tablist';
|
|
774
811
|
}
|
|
812
|
+
#layoutHostSvc;
|
|
775
813
|
#ngUnsubscribe;
|
|
776
814
|
#_ariaRole;
|
|
777
815
|
#resources;
|
|
@@ -792,6 +830,11 @@ class SkyVerticalTabsetComponent {
|
|
|
792
830
|
.subscribe((mobile) => {
|
|
793
831
|
this.isMobile.set(mobile);
|
|
794
832
|
});
|
|
833
|
+
this.tabService.activeTabLayout
|
|
834
|
+
.pipe(takeUntil(this.#ngUnsubscribe))
|
|
835
|
+
.subscribe((layout) => {
|
|
836
|
+
this.#updateLayout(layout);
|
|
837
|
+
});
|
|
795
838
|
if (this.tabService.isMobile()) {
|
|
796
839
|
this.isMobile.set(true);
|
|
797
840
|
}
|
|
@@ -835,12 +878,22 @@ class SkyVerticalTabsetComponent {
|
|
|
835
878
|
tabGroupsArrowUp() {
|
|
836
879
|
this.adapterService.focusPreviousButton(this.tabGroups);
|
|
837
880
|
}
|
|
881
|
+
#updateLayout(layout) {
|
|
882
|
+
if (this.#layoutHostSvc) {
|
|
883
|
+
this.#layoutHostSvc.setHostLayoutForChild({
|
|
884
|
+
layout,
|
|
885
|
+
});
|
|
886
|
+
this.verticalTabsetCssClass = `sky-vertical-tabset-layout-${layout}`;
|
|
887
|
+
}
|
|
888
|
+
this.verticalTabsetContentCssClass = `${LAYOUT_CLASS_PREFIX$1}${layout}`;
|
|
889
|
+
this.#changeRef.markForCheck();
|
|
890
|
+
}
|
|
838
891
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyVerticalTabsetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
839
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: SkyVerticalTabsetComponent, isStandalone: false, selector: "sky-vertical-tabset", inputs: { showTabsText: { classPropertyName: "showTabsText", publicName: "showTabsText", isSignal: false, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: false, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: false, isRequired: false, transformFunction: null }, ariaRole: { classPropertyName: "ariaRole", publicName: "ariaRole", isSignal: false, isRequired: false, transformFunction: null }, maintainTabContent: { classPropertyName: "maintainTabContent", publicName: "maintainTabContent", isSignal: false, isRequired: false, transformFunction: null }, tabWidth: { classPropertyName: "tabWidth", publicName: "tabWidth", isSignal: true, isRequired: false, transformFunction: null } }, 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 <div\n #groupContainerWrapper\n class=\"sky-vertical-tabset-group-container\"\n skyTransitionEndHandler\n transitionPropertyToTrack=\"transform\"\n [style.flex-basis]=\"tabGroupContainerFlexBasis()\"\n [style.max-width]=\"tabGroupContainerMaxWidth()\"\n [class.sky-animation-slide-enter-left]=\"tabService.isMobile()\"\n [ngClass]=\"{ 'sky-vertical-tabset-hidden': !tabService.tabsVisible() }\"\n [tabIndex]=\"tablistHasFocus ? -1 : 0\"\n [transitionTrigger]=\"tabService.tabsVisible()\"\n (keydown.arrowDown)=\"tabGroupsArrowDown(); $event.preventDefault()\"\n (keydown.arrowUp)=\"tabGroupsArrowUp(); $event.preventDefault()\"\n (focusin)=\"trapFocusInTablist()\"\n (focusout)=\"resetTabIndex()\"\n (transitionEnd)=\"tabsetFocus()\"\n >\n <ng-content />\n </div>\n @if (maintainTabContent || tabService.contentVisible()) {\n <div\n #contentContainerWrapper\n class=\"sky-vertical-tabset-content\"\n [class.sky-animation-slide-enter-right]=\"tabService.isMobile()\"\n [ngClass]=\"{\n 'sky-vertical-tabset-content-hidden': !tabService.contentVisible()\n }\"\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));flex-grow:0;flex-shrink:0}}: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));flex-grow:0;flex-shrink:0}.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));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{background-color:var(--sky-color-background-container-dimmed);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{flex:1 1 auto;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{flex:1 1 auto;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: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "directive", type: i3._SkyTransitionEndHandlerDirective, selector: "[skyTransitionEndHandler]", inputs: ["transitionTrigger", "transitionPropertyToTrack"], outputs: ["transitionEnd"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
892
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: SkyVerticalTabsetComponent, isStandalone: false, selector: "sky-vertical-tabset", inputs: { showTabsText: { classPropertyName: "showTabsText", publicName: "showTabsText", isSignal: false, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: false, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: false, isRequired: false, transformFunction: null }, ariaRole: { classPropertyName: "ariaRole", publicName: "ariaRole", isSignal: false, isRequired: false, transformFunction: null }, maintainTabContent: { classPropertyName: "maintainTabContent", publicName: "maintainTabContent", isSignal: false, isRequired: false, transformFunction: null }, tabWidth: { classPropertyName: "tabWidth", publicName: "tabWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeChange: "activeChange" }, host: { properties: { "class": "this.verticalTabsetCssClass" } }, 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 <div\n #groupContainerWrapper\n class=\"sky-vertical-tabset-group-container\"\n skyTransitionEndHandler\n transitionPropertyToTrack=\"transform\"\n [style.flex-basis]=\"tabGroupContainerFlexBasis()\"\n [style.max-width]=\"tabGroupContainerMaxWidth()\"\n [class.sky-animation-slide-enter-left]=\"tabService.isMobile()\"\n [ngClass]=\"{ 'sky-vertical-tabset-hidden': !tabService.tabsVisible() }\"\n [tabIndex]=\"tablistHasFocus ? -1 : 0\"\n [transitionTrigger]=\"tabService.tabsVisible()\"\n (keydown.arrowDown)=\"tabGroupsArrowDown(); $event.preventDefault()\"\n (keydown.arrowUp)=\"tabGroupsArrowUp(); $event.preventDefault()\"\n (focusin)=\"trapFocusInTablist()\"\n (focusout)=\"resetTabIndex()\"\n (transitionEnd)=\"tabsetFocus()\"\n >\n <ng-content />\n </div>\n @if (maintainTabContent || tabService.contentVisible()) {\n <div\n #contentContainerWrapper\n [class]=\"'sky-vertical-tabset-content ' + verticalTabsetContentCssClass\"\n [class.sky-animation-slide-enter-right]=\"tabService.isMobile()\"\n [ngClass]=\"{\n 'sky-vertical-tabset-content-hidden': !tabService.contentVisible()\n }\"\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-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));flex-grow:0;flex-shrink:0}}: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));flex-grow:0;flex-shrink:0}:host(.sky-vertical-tabset-layout-fit){position:absolute;inset:0;display:flex;flex-direction:column}:host(.sky-vertical-tabset-layout-fit) .sky-vertical-tabset{flex-grow:0}.sky-vertical-tabset-hidden{display:none}.sky-vertical-tabset-content{margin:var(--sky-layout-host-content-spacing, 0);flex-grow:var(--sky-layout-host-content-flex-grow, 0);overflow:var(--sky-layout-host-content-overflow, visible);position:var(--sky-layout-host-content-position, static)}.sky-vertical-tabset-content.sky-layout-host-fit{inset:auto}.sky-vertical-tabset-content.sky-layout-host-fit,.sky-vertical-tabset-content.sky-layout-host-list{--sky-comp-override-list-header-background-color: var( --sky-color-background-container-dimmed )}.sky-vertical-tabset-content.sky-layout-host-none{margin:var(--sky-compat-vertical-tabset-content-spacing-xs, var(--sky-layout-host-content-spacing, 0));overflow-y:var(--sky-compat-vertical-tabset-content-overflow-y, visible)}.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{background-color:var(--sky-color-background-container-dimmed);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{flex:1 1 auto;margin:var(--sky-layout-host-content-spacing, 0)}:host .sky-vertical-tabset-content.sky-layout-host-none{margin:var(--sky-compat-vertical-tabset-content-spacing-sm, var(--sky-layout-host-content-spacing, 0))}}: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{flex:1 1 auto;margin:var(--sky-layout-host-content-spacing, 0)}:host-context(.sky-responsive-container-sm) .sky-vertical-tabset-content.sky-layout-host-none,:host-context(.sky-responsive-container-md) .sky-vertical-tabset-content.sky-layout-host-none,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset-content.sky-layout-host-none{margin:var(--sky-compat-vertical-tabset-content-spacing-sm, var(--sky-layout-host-content-spacing, 0))}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "directive", type: i3._SkyTransitionEndHandlerDirective, selector: "[skyTransitionEndHandler]", inputs: ["transitionTrigger", "transitionPropertyToTrack"], outputs: ["transitionEnd"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
840
893
|
}
|
|
841
894
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyVerticalTabsetComponent, decorators: [{
|
|
842
895
|
type: Component,
|
|
843
|
-
args: [{ selector: 'sky-vertical-tabset', providers: [SkyTabIdService, SkyVerticalTabsetService], changeDetection: ChangeDetectionStrategy.OnPush, 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 <div\n #groupContainerWrapper\n class=\"sky-vertical-tabset-group-container\"\n skyTransitionEndHandler\n transitionPropertyToTrack=\"transform\"\n [style.flex-basis]=\"tabGroupContainerFlexBasis()\"\n [style.max-width]=\"tabGroupContainerMaxWidth()\"\n [class.sky-animation-slide-enter-left]=\"tabService.isMobile()\"\n [ngClass]=\"{ 'sky-vertical-tabset-hidden': !tabService.tabsVisible() }\"\n [tabIndex]=\"tablistHasFocus ? -1 : 0\"\n [transitionTrigger]=\"tabService.tabsVisible()\"\n (keydown.arrowDown)=\"tabGroupsArrowDown(); $event.preventDefault()\"\n (keydown.arrowUp)=\"tabGroupsArrowUp(); $event.preventDefault()\"\n (focusin)=\"trapFocusInTablist()\"\n (focusout)=\"resetTabIndex()\"\n (transitionEnd)=\"tabsetFocus()\"\n >\n <ng-content />\n </div>\n @if (maintainTabContent || tabService.contentVisible()) {\n <div\n #contentContainerWrapper\n class=\"sky-vertical-tabset-content\"\n [class.sky-animation-slide-enter-right]=\"tabService.isMobile()\"\n [ngClass]=\"{\n 'sky-vertical-tabset-content-hidden': !tabService.contentVisible()\n }\"\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-
|
|
896
|
+
args: [{ selector: 'sky-vertical-tabset', providers: [SkyTabIdService, SkyVerticalTabsetService], changeDetection: ChangeDetectionStrategy.OnPush, 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 <div\n #groupContainerWrapper\n class=\"sky-vertical-tabset-group-container\"\n skyTransitionEndHandler\n transitionPropertyToTrack=\"transform\"\n [style.flex-basis]=\"tabGroupContainerFlexBasis()\"\n [style.max-width]=\"tabGroupContainerMaxWidth()\"\n [class.sky-animation-slide-enter-left]=\"tabService.isMobile()\"\n [ngClass]=\"{ 'sky-vertical-tabset-hidden': !tabService.tabsVisible() }\"\n [tabIndex]=\"tablistHasFocus ? -1 : 0\"\n [transitionTrigger]=\"tabService.tabsVisible()\"\n (keydown.arrowDown)=\"tabGroupsArrowDown(); $event.preventDefault()\"\n (keydown.arrowUp)=\"tabGroupsArrowUp(); $event.preventDefault()\"\n (focusin)=\"trapFocusInTablist()\"\n (focusout)=\"resetTabIndex()\"\n (transitionEnd)=\"tabsetFocus()\"\n >\n <ng-content />\n </div>\n @if (maintainTabContent || tabService.contentVisible()) {\n <div\n #contentContainerWrapper\n [class]=\"'sky-vertical-tabset-content ' + verticalTabsetContentCssClass\"\n [class.sky-animation-slide-enter-right]=\"tabService.isMobile()\"\n [ngClass]=\"{\n 'sky-vertical-tabset-content-hidden': !tabService.contentVisible()\n }\"\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-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));flex-grow:0;flex-shrink:0}}: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));flex-grow:0;flex-shrink:0}:host(.sky-vertical-tabset-layout-fit){position:absolute;inset:0;display:flex;flex-direction:column}:host(.sky-vertical-tabset-layout-fit) .sky-vertical-tabset{flex-grow:0}.sky-vertical-tabset-hidden{display:none}.sky-vertical-tabset-content{margin:var(--sky-layout-host-content-spacing, 0);flex-grow:var(--sky-layout-host-content-flex-grow, 0);overflow:var(--sky-layout-host-content-overflow, visible);position:var(--sky-layout-host-content-position, static)}.sky-vertical-tabset-content.sky-layout-host-fit{inset:auto}.sky-vertical-tabset-content.sky-layout-host-fit,.sky-vertical-tabset-content.sky-layout-host-list{--sky-comp-override-list-header-background-color: var( --sky-color-background-container-dimmed )}.sky-vertical-tabset-content.sky-layout-host-none{margin:var(--sky-compat-vertical-tabset-content-spacing-xs, var(--sky-layout-host-content-spacing, 0));overflow-y:var(--sky-compat-vertical-tabset-content-overflow-y, visible)}.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{background-color:var(--sky-color-background-container-dimmed);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{flex:1 1 auto;margin:var(--sky-layout-host-content-spacing, 0)}:host .sky-vertical-tabset-content.sky-layout-host-none{margin:var(--sky-compat-vertical-tabset-content-spacing-sm, var(--sky-layout-host-content-spacing, 0))}}: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{flex:1 1 auto;margin:var(--sky-layout-host-content-spacing, 0)}:host-context(.sky-responsive-container-sm) .sky-vertical-tabset-content.sky-layout-host-none,:host-context(.sky-responsive-container-md) .sky-vertical-tabset-content.sky-layout-host-none,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset-content.sky-layout-host-none{margin:var(--sky-compat-vertical-tabset-content-spacing-sm, var(--sky-layout-host-content-spacing, 0))}\n"] }]
|
|
844
897
|
}], propDecorators: { showTabsText: [{
|
|
845
898
|
type: Input
|
|
846
899
|
}], ariaLabel: [{
|
|
@@ -862,6 +915,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
|
|
|
862
915
|
}], contentWrapper: [{
|
|
863
916
|
type: ViewChild,
|
|
864
917
|
args: ['contentContainerWrapper']
|
|
918
|
+
}], verticalTabsetCssClass: [{
|
|
919
|
+
type: HostBinding,
|
|
920
|
+
args: ['class']
|
|
865
921
|
}] } });
|
|
866
922
|
|
|
867
923
|
class SkyVerticalTabsetModule {
|
|
@@ -989,7 +1045,7 @@ class SkySectionedFormSectionComponent {
|
|
|
989
1045
|
this.#ngUnsubscribe.complete();
|
|
990
1046
|
}
|
|
991
1047
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkySectionedFormSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
992
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: SkySectionedFormSectionComponent, isStandalone: false, selector: "sky-sectioned-form-section", inputs: { heading: "heading", itemCount: "itemCount", active: "active" }, providers: [SkySectionedFormService], viewQueries: [{ propertyName: "tab", first: true, predicate: SkyVerticalTabComponent, descendants: true }], ngImport: i0, template: "<sky-vertical-tab\n [active]=\"active\"\n [errorIndicator]=\"fieldInvalid\"\n [requiredIndicator]=\"fieldRequired\"\n [showTabRightArrow]=\"true\"\n [tabHeaderCount]=\"itemCount\"\n [tabHeading]=\"heading\"\n [tabId]=\"sectionTabId\"\n>\n <ng-content />\n</sky-vertical-tab>\n", dependencies: [{ kind: "component", type: SkyVerticalTabComponent, selector: "sky-vertical-tab", inputs: ["active", "ariaControls", "ariaRole", "disabled", "errorIndicator", "requiredIndicator", "tabHeaderCount", "tabHeading", "showTabRightArrow", "tabId"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
1048
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: SkySectionedFormSectionComponent, isStandalone: false, selector: "sky-sectioned-form-section", inputs: { heading: "heading", itemCount: "itemCount", active: "active" }, providers: [SkySectionedFormService], viewQueries: [{ propertyName: "tab", first: true, predicate: SkyVerticalTabComponent, descendants: true }], ngImport: i0, template: "<sky-vertical-tab\n [active]=\"active\"\n [errorIndicator]=\"fieldInvalid\"\n [requiredIndicator]=\"fieldRequired\"\n [showTabRightArrow]=\"true\"\n [tabHeaderCount]=\"itemCount\"\n [tabHeading]=\"heading\"\n [tabId]=\"sectionTabId\"\n>\n <ng-content />\n</sky-vertical-tab>\n", dependencies: [{ kind: "component", type: SkyVerticalTabComponent, selector: "sky-vertical-tab", inputs: ["active", "ariaControls", "ariaRole", "disabled", "errorIndicator", "layout", "requiredIndicator", "tabHeaderCount", "tabHeading", "showTabRightArrow", "tabId"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
993
1049
|
}
|
|
994
1050
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkySectionedFormSectionComponent, decorators: [{
|
|
995
1051
|
type: Component,
|