@skyux/tabs 4.6.9

package/modules/tabs/tabset.service.d.ts

@@ -0,0 +1,51 @@
+import { Observable } from 'rxjs';
+import { SkyTabIndex } from './tab-index';
+import { SkyTabsetActiveTabUnregisteredArgs } from './tabset-active-tab-unregistered-args';
+/**
+ * @internal
+ */
+export declare class SkyTabsetService {
+    get activeTabUnregistered(): Observable<SkyTabsetActiveTabUnregisteredArgs>;
+    get activeTabIndex(): Observable<SkyTabIndex>;
+    currentActiveTabIndex: SkyTabIndex;
+    private _activeTabIndex;
+    private _activeTabUnregistered;
+    private tabs;
+    private tabCounter;
+    /**
+     * Sets the active tab by its unique `tabIndex` property.
+     */
+    setActiveTabIndex(value: SkyTabIndex, config?: {
+        emitChange: boolean;
+    }): void;
+    /**
+     * Registers a tab component.
+     */
+    registerTab(tabIndex?: SkyTabIndex): SkyTabIndex;
+    updateTabIndex(currentTabIndex: SkyTabIndex, newTabIndex: SkyTabIndex): void;
+    /**
+     * Unregisters a tab component.
+     */
+    unregisterTab(tabIndex: SkyTabIndex): void;
+    /**
+     * Unregisters all tab components at once.
+     */
+    unregisterAll(): void;
+    /**
+     * Compares two tab indexes and returns `true` if they are equal.
+     */
+    tabIndexesEqual(tabIndex1: SkyTabIndex, tabIndex2: SkyTabIndex): boolean;
+    /**
+     * Verifies if a provided tab index is registered.
+     */
+    isValidTabIndex(tabIndex: SkyTabIndex): boolean;
+    /**
+     * Activates the first registered tab.
+     */
+    activateFirstTab(): SkyTabIndex | undefined;
+    /**
+     * Activates the next registered tab, or the previous one based on a provided array index.
+     */
+    activateNearestTab(arrayIndex: number): void;
+    private isTabIndexActive;
+}

package/modules/vertical-tabset/vertical-tab-media-query.service.d.ts

@@ -0,0 +1,15 @@
+import { SkyMediaBreakpoints, SkyMediaQueryListener } from '@skyux/core';
+import { Subscription } from 'rxjs';
+/**
+ * @internal
+ */
+export declare class SkyVerticalTabMediaQueryService {
+    get current(): SkyMediaBreakpoints;
+    private currentSubject;
+    private _current;
+    constructor();
+    subscribe(listener: SkyMediaQueryListener): Subscription;
+    setBreakpointForWidth(width: number): void;
+    isWidthWithinBreakpiont(width: number, breakpoint: SkyMediaBreakpoints): boolean;
+    destroy(): void;
+}

package/modules/vertical-tabset/vertical-tab.component.d.ts

@@ -0,0 +1,86 @@
+import { ChangeDetectorRef, ElementRef, OnDestroy, OnInit } from '@angular/core';
+import { SkyVerticalTabMediaQueryService } from './vertical-tab-media-query.service';
+import { SkyVerticalTabsetService } from './vertical-tabset.service';
+import { SkyVerticalTabsetAdapterService } from './vertical-tabset-adapter.service';
+export declare class SkyVerticalTabComponent implements OnInit, OnDestroy {
+    private adapterService;
+    private changeRef;
+    private tabsetService;
+    private verticalTabMediaQueryService;
+    /**
+     * Indicates whether the tab is active when the tabset loads.
+     */
+    active: boolean;
+    /**
+     * Specifies the HTML element ID (without the leading `#`) of the element that contains
+     * the content that the vertical tab displays, which corresponds to the `tabId`. This property
+     * [supports accessibility rules for disclosures](https://www.w3.org/TR/wai-aria-practices-1.1/#disclosure).
+     */
+    get ariaControls(): string;
+    set ariaControls(value: string);
+    /**
+     * @internal
+     */
+    ariaInvalid: boolean;
+    /**
+     * @internal
+     */
+    ariaRequired: boolean;
+    /**
+     * Specifies an ARIA role for the vertical tab
+     * [to support accessibility](https://developer.blackbaud.com/skyux/learn/accessibility)
+     * by indicating how the tab functions and what it controls. For information about how
+     * an ARIA role indicates what an item represents on a web page, see the
+     * [WAI-ARIA roles model](https://www.w3.org/WAI/PF/aria/roles).
+     * @default "tab"
+     */
+    get ariaRole(): string;
+    set ariaRole(value: string);
+    /**
+     * Indicates whether to disable the tab.
+     */
+    disabled: boolean;
+    /**
+     * Indicates whether to indicate that the tab has an error.
+     * @internal This is used for sectioned forms and is not currently a supported design for pure vertical tabs.
+     */
+    errorIndicator: boolean;
+    /**
+     * Displays an item count alongside the tab header to indicate how many list items the tab contains.
+     */
+    tabHeaderCount: number;
+    /**
+     * Specifies the tab header.
+     * @required
+     */
+    tabHeading: string;
+    /**
+     * Indicates whether to display a chevron-right icon in the righthand side of the tab.
+     * @internal
+     */
+    get showTabRightArrow(): boolean;
+    set showTabRightArrow(value: boolean);
+    /**
+     * Specifies an ID for the tab.
+     */
+    tabId: string;
+    set contentRendered(value: boolean);
+    get contentRendered(): boolean;
+    index: number;
+    tabContent: ElementRef;
+    private isMobile;
+    private _ariaControls;
+    private _ariaRole;
+    private _contentRendered;
+    private _mobileSubscription;
+    private _ngUnsubscribe;
+    private _showTabRightArrow;
+    constructor(adapterService: SkyVerticalTabsetAdapterService, changeRef: ChangeDetectorRef, tabsetService: SkyVerticalTabsetService, verticalTabMediaQueryService: SkyVerticalTabMediaQueryService);
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    tabIndex(): number;
+    activateTab(): void;
+    onWindowResize(): void;
+    tabDeactivated(): void;
+    private updateBreakpointAndResponsiveClass;
+}

package/modules/vertical-tabset/vertical-tabset-adapter.service.d.ts

@@ -0,0 +1,10 @@
+import { ElementRef, RendererFactory2 } from '@angular/core';
+import { SkyMediaBreakpoints } from '@skyux/core';
+export declare class SkyVerticalTabsetAdapterService {
+    private rendererFactory;
+    private renderer;
+    constructor(rendererFactory: RendererFactory2);
+    getWidth(elementRef: ElementRef): number;
+    scrollToContentTop(element: ElementRef): void;
+    setResponsiveClass(element: ElementRef, breakpoint: SkyMediaBreakpoints): void;
+}

package/modules/vertical-tabset/vertical-tabset-group.component.d.ts

@@ -0,0 +1,33 @@
+import { ChangeDetectorRef, OnDestroy, OnInit } from '@angular/core';
+import { SkyVerticalTabsetService } from './vertical-tabset.service';
+export declare class SkyVerticalTabsetGroupComponent implements OnInit, OnDestroy {
+    private tabService;
+    private changeRef;
+    /**
+     * Indicates whether to disable the ability to expand and collapse the group.
+     * @default "false"
+     */
+    disabled: boolean;
+    /**
+     * Specifies the header for the collapsible group of tabs.
+     */
+    groupHeading: string;
+    /**
+     * Indicates whether the collapsible group is expanded.
+     * @default "false"
+     */
+    set open(value: boolean);
+    get open(): boolean;
+    private tabs;
+    private ngUnsubscribe;
+    private openBeforeTabsHidden;
+    private _open;
+    constructor(tabService: SkyVerticalTabsetService, changeRef: ChangeDetectorRef);
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    toggleMenuOpen(): void;
+    subMenuOpen(): boolean;
+    tabClicked: () => void;
+    tabsHidden: () => void;
+    tabsShown: () => void;
+}

package/modules/vertical-tabset/vertical-tabset.component.d.ts

@@ -0,0 +1,45 @@
+import { ElementRef, OnInit, EventEmitter, AfterViewChecked, ChangeDetectorRef, OnDestroy } from '@angular/core';
+import { SkyLibResourcesService } from '@skyux/i18n';
+import { SkyVerticalTabsetAdapterService } from './vertical-tabset-adapter.service';
+import { SkyVerticalTabsetService } from './vertical-tabset.service';
+export declare class SkyVerticalTabsetComponent implements OnInit, AfterViewChecked, OnDestroy {
+    adapterService: SkyVerticalTabsetAdapterService;
+    tabService: SkyVerticalTabsetService;
+    private resources;
+    private changeRef;
+    /**
+     * Specifies the text to display on the show tabs button on mobile devices.
+     */
+    showTabsText: string;
+    /**
+     * Specifies an ARIA role for the vertical tabset
+     * [to support accessibility](https://developer.blackbaud.com/skyux/learn/accessibility)
+     * by indicating how the tabset functions and what it controls. For information about how
+     * an ARIA role indicates what an item represents on a web page, see the
+     * [WAI-ARIA roles model](https://www.w3.org/WAI/PF/aria/roles).
+     * @default "tablist"
+     */
+    get ariaRole(): string;
+    set ariaRole(value: string);
+    /**
+     * Indicates whether the vertical tabset loads tab content during initialization so that it
+     * displays content without moving around elements in the content container.
+     * @default 'false'
+     */
+    maintainTabContent: boolean;
+    /**
+     * Fires when the active tab changes. Emits the index of the active tab. The
+     * index is based on the tab's position when it loads.
+     */
+    activeChange: EventEmitter<number>;
+    tabGroups: ElementRef;
+    content: ElementRef;
+    private contentWrapper;
+    private isMobile;
+    private _ngUnsubscribe;
+    private _ariaRole;
+    constructor(adapterService: SkyVerticalTabsetAdapterService, tabService: SkyVerticalTabsetService, resources: SkyLibResourcesService, changeRef: ChangeDetectorRef);
+    ngOnInit(): void;
+    ngAfterViewChecked(): void;
+    ngOnDestroy(): void;
+}

package/modules/vertical-tabset/vertical-tabset.module.d.ts

@@ -0,0 +1,2 @@
+export declare class SkyVerticalTabsetModule {
+}

package/modules/vertical-tabset/vertical-tabset.service.d.ts

@@ -0,0 +1,41 @@
+import { ElementRef } from '@angular/core';
+import { SkyMediaQueryService } from '@skyux/core';
+import { BehaviorSubject, Subject } from 'rxjs';
+import { SkyVerticalTabComponent } from './vertical-tab.component';
+export declare const VISIBLE_STATE = "shown";
+export declare const HIDDEN_STATE = "void";
+/**
+ * @internal
+ */
+export declare class SkyVerticalTabsetService {
+    private mediaQueryService;
+    activeIndex: number;
+    animationContentVisibleState: string;
+    animationTabsVisibleState: string;
+    set content(value: ElementRef);
+    hidingTabs: BehaviorSubject<boolean>;
+    indexChanged: BehaviorSubject<number>;
+    maintainTabContent: boolean;
+    showingTabs: BehaviorSubject<boolean>;
+    switchingMobile: Subject<boolean>;
+    tabs: Array<SkyVerticalTabComponent>;
+    tabAdded: Subject<SkyVerticalTabComponent>;
+    tabClicked: BehaviorSubject<boolean>;
+    private _content;
+    private _contentAdded;
+    private _tabsVisible;
+    private _isMobile;
+    constructor(mediaQueryService: SkyMediaQueryService);
+    addTab(tab: SkyVerticalTabComponent): void;
+    destroyTab(tab: SkyVerticalTabComponent): void;
+    activateTab(tab: SkyVerticalTabComponent): void;
+    activeTab(): SkyVerticalTabComponent;
+    isMobile(): boolean;
+    updateContent(): void;
+    tabsVisible(): boolean;
+    contentVisible(): boolean;
+    showTabs(): void;
+    private destroyContent;
+    private moveContent;
+    private updateTabClicked;
+}

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@skyux/tabs",
+  "version": "4.6.9",
+  "description": "SKY UX Tabs",
+  "keywords": [],
+  "author": "Blackbaud",
+  "license": "ISC",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/blackbaud/skyux-tabs.git"
+  },
+  "bugs": {
+    "url": "https://github.com/blackbaud/skyux-tabs/issues"
+  },
+  "homepage": "https://github.com/blackbaud/skyux-tabs#readme",
+  "peerDependencies": {
+    "@angular/common": "^9.1.8",
+    "@angular/core": "^9.1.8",
+    "@angular/router": "^9.1.8",
+    "@skyux/core": "^4.0.0",
+    "@skyux/i18n": "^4.0.0",
+    "@skyux/forms": "^4.0.0",
+    "@skyux/indicators": "^4.2.0",
+    "@skyux/modals": "^4.0.0",
+    "@skyux/popovers": "^4.2.0",
+    "@skyux/theme": "^4.15.4"
+  },
+  "dependencies": {
+    "tslib": "^1.10.0"
+  },
+  "main": "bundles/skyux-tabs.umd.js",
+  "module": "fesm5/skyux-tabs.js",
+  "es2015": "fesm2015/skyux-tabs.js",
+  "esm5": "esm5/skyux-tabs.js",
+  "esm2015": "esm2015/skyux-tabs.js",
+  "fesm5": "fesm5/skyux-tabs.js",
+  "fesm2015": "fesm2015/skyux-tabs.js",
+  "typings": "skyux-tabs.d.ts",
+  "metadata": "skyux-tabs.metadata.json",
+  "sideEffects": false
+}

package/plugin-resources/tabs-resources-provider.d.ts

@@ -0,0 +1,5 @@
+import { SkyAppLocaleInfo, SkyLibResourcesProvider } from '@skyux/i18n';
+export declare class SkyTabsResourcesProvider implements SkyLibResourcesProvider {
+    private resources;
+    getString(localeInfo: SkyAppLocaleInfo, name: string): string;
+}

package/public_api.d.ts

@@ -0,0 +1,9 @@
+export * from './modules/sectioned-form/sectioned-form.module';
+export * from './modules/sectioned-form/sectioned-form.service';
+export * from './modules/tabs/tab-index';
+export * from './modules/tabs/tabset-buttons-display-mode';
+export * from './modules/tabs/tabset-style';
+export * from './modules/tabs/tabset-tab-indexes-change';
+export * from './modules/tabs/tabs.module';
+export * from './modules/vertical-tabset/vertical-tabset.module';
+export * from './modules/sectioned-form/sectioned-form.component';

package/skyux-tabs.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+export * from './public_api';
+export { SkySectionedFormSectionComponent as ɵd } from './modules/sectioned-form/sectioned-form-section.component';
+export { SkyTabsResourcesModule as ɵj } from './modules/shared/tabs-resources.module';
+export { SkyTabButtonComponent as ɵl } from './modules/tabs/tab-button.component';
+export { SkyTabComponent as ɵm } from './modules/tabs/tab.component';
+export { SkyTabsetAdapterService as ɵq } from './modules/tabs/tabset-adapter.service';
+export { SkyTabsetNavButtonComponent as ɵr } from './modules/tabs/tabset-nav-button.component';
+export { SkyTabsetPermalinkService as ɵn } from './modules/tabs/tabset-permalink.service';
+export { SkyTabsetComponent as ɵp } from './modules/tabs/tabset.component';
+export { SkyTabsetService as ɵo } from './modules/tabs/tabset.service';
+export { SkyVerticalTabMediaQueryService as ɵf } from './modules/vertical-tabset/vertical-tab-media-query.service';
+export { SkyVerticalTabComponent as ɵe } from './modules/vertical-tabset/vertical-tab.component';
+export { SkyVerticalTabsetAdapterService as ɵg } from './modules/vertical-tabset/vertical-tabset-adapter.service';
+export { SkyVerticalTabsetGroupComponent as ɵi } from './modules/vertical-tabset/vertical-tabset-group.component';
+export { SkyVerticalTabsetComponent as ɵh } from './modules/vertical-tabset/vertical-tabset.component';
+export { HIDDEN_STATE as ɵb, SkyVerticalTabsetService as ɵc, VISIBLE_STATE as ɵa } from './modules/vertical-tabset/vertical-tabset.service';
+export { SkyTabsResourcesProvider as ɵk } from './plugin-resources/tabs-resources-provider';

package/skyux-tabs.metadata.json

@@ -0,0 +1 @@
+{"__symbolic":"module","version":4,"metadata":{"SkySectionedFormModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":7,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"SkySectionedFormComponent"},{"__symbolic":"reference","name":"ɵd"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":13,"character":4},{"__symbolic":"reference","module":"@skyux/forms","name":"SkyCheckboxModule","line":14,"character":4},{"__symbolic":"reference","name":"SkyVerticalTabsetModule"}],"exports":[{"__symbolic":"reference","name":"SkySectionedFormComponent"},{"__symbolic":"reference","name":"ɵd"}]}]}],"members":{}},"SkySectionedFormService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":8,"character":1}}],"members":{"invalidFieldChanged":[{"__symbolic":"method"}],"requiredFieldChanged":[{"__symbolic":"method"}]}},"SkyTabIndex":{"__symbolic":"interface"},"SkyTabsetButtonsDisplayMode":{"__symbolic":"interface"},"SkyTabsetStyle":{"__symbolic":"interface"},"SkyTabsetTabIndexesChange":{"__symbolic":"interface"},"SkyTabsModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":48,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵl"},{"__symbolic":"reference","name":"ɵm"},{"__symbolic":"reference","name":"ɵp"},{"__symbolic":"reference","name":"ɵr"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":56,"character":4},{"__symbolic":"reference","module":"@angular/router","name":"RouterModule","line":57,"character":4},{"__symbolic":"reference","module":"@skyux/popovers","name":"SkyDropdownModule","line":58,"character":4},{"__symbolic":"reference","module":"@skyux/i18n","name":"SkyI18nModule","line":59,"character":4},{"__symbolic":"reference","module":"@skyux/indicators","name":"SkyIconModule","line":60,"character":4},{"__symbolic":"reference","name":"ɵj"},{"__symbolic":"reference","module":"@skyux/theme","name":"SkyThemeModule","line":62,"character":4}],"exports":[{"__symbolic":"reference","name":"ɵm"},{"__symbolic":"reference","name":"ɵp"},{"__symbolic":"reference","name":"ɵr"}]}]}],"members":{}},"SkyVerticalTabsetModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":46,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵh"},{"__symbolic":"reference","name":"ɵi"},{"__symbolic":"reference","name":"ɵe"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":53,"character":4},{"__symbolic":"reference","module":"@angular/platform-browser/animations","name":"BrowserAnimationsModule","line":54,"character":4},{"__symbolic":"reference","module":"@skyux/indicators","name":"SkyChevronModule","line":55,"character":4},{"__symbolic":"reference","module":"@skyux/indicators","name":"SkyIconModule","line":56,"character":4},{"__symbolic":"reference","module":"@skyux/core","name":"SkyMediaQueryModule","line":57,"character":4},{"__symbolic":"reference","module":"@skyux/indicators","name":"SkyStatusIndicatorModule","line":58,"character":4},{"__symbolic":"reference","name":"ɵj"},{"__symbolic":"reference","module":"@skyux/theme","name":"SkyThemeModule","line":60,"character":4}],"providers":[{"__symbolic":"reference","name":"ɵg"}],"exports":[{"__symbolic":"reference","name":"ɵh"},{"__symbolic":"reference","name":"ɵi"},{"__symbolic":"reference","name":"ɵe"}]}]}],"members":{}},"SkySectionedFormComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":38,"character":1},"arguments":[{"selector":"sky-sectioned-form","providers":[{"__symbolic":"reference","name":"ɵc"}],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":43,"character":19},"member":"OnPush"},"animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"trigger","line":45,"character":4},"arguments":["tabEnter",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":47,"character":8},"arguments":[{"__symbolic":"binop","operator":"+","left":{"__symbolic":"binop","operator":"+","left":{"__symbolic":"reference","name":"ɵb"},"right":" => "},"right":{"__symbolic":"reference","name":"ɵa"}},[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":48,"character":10},"arguments":[{"transform":"translate(-100%)"}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":49,"character":10},"arguments":["150ms ease-in"]}]]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"trigger","line":53,"character":4},"arguments":["contentEnter",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":55,"character":8},"arguments":[{"__symbolic":"binop","operator":"+","left":{"__symbolic":"binop","operator":"+","left":{"__symbolic":"reference","name":"ɵb"},"right":" => "},"right":{"__symbolic":"reference","name":"ɵa"}},[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":56,"character":10},"arguments":[{"transform":"translate(100%)"}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":57,"character":10},"arguments":["150ms ease-in"]}]]}]]}],"template":"<div\n  aria-orientation=\"vertical\"\n  class=\"sky-sectioned-form\"\n  [attr.role]=\"ariaRole\"\n  (window:resize)=\"tabService.updateContent()\"\n>\n  <div\n    *ngIf=\"maintainSectionContent || tabsVisible()\"\n    class=\"sky-sectioned-form-tabs\"\n    [ngClass]=\"{'sky-sectioned-form-tabs-hidden': !tabsVisible()}\"\n    [@tabEnter]=\"tabService.animationTabsVisibleState\"\n  >\n    <ng-content></ng-content>\n  </div>\n  <div\n    *ngIf=\"maintainSectionContent || tabService.contentVisible()\"\n    class=\"sky-sectioned-form-content sky-padding-even-large\"\n    [ngClass]=\"{'sky-sectioned-form-content-hidden': !tabService.contentVisible()}\"\n    [@contentEnter]=\"tabService.animationContentVisibleState\"\n    #skySectionSideContent\n  >\n  </div>\n</div>\n\n","styles":[":host .sky-sectioned-form{display:block;max-height:none}:host .sky-sectioned-form-content{flex-basis:auto;overflow-y:visible}:host .sky-sectioned-form-tabs{flex-basis:auto;overflow-y:visible;border-right:1px solid #e2e3e4}:host-context(.sky-responsive-container-lg) .sky-sectioned-form,:host-context(.sky-responsive-container-md) .sky-sectioned-form,:host-context(.sky-responsive-container-sm) .sky-sectioned-form,:host-context(.sky-responsive-container-xs) .sky-sectioned-form{display:block;max-height:none}:host-context(.sky-responsive-container-lg) .sky-sectioned-form-content,:host-context(.sky-responsive-container-md) .sky-sectioned-form-content,:host-context(.sky-responsive-container-sm) .sky-sectioned-form-content,:host-context(.sky-responsive-container-xs) .sky-sectioned-form-content{flex-basis:auto;overflow-y:visible}:host-context(.sky-responsive-container-lg) .sky-sectioned-form-tabs,:host-context(.sky-responsive-container-md) .sky-sectioned-form-tabs,:host-context(.sky-responsive-container-sm) .sky-sectioned-form-tabs,:host-context(.sky-responsive-container-xs) .sky-sectioned-form-tabs{flex-basis:auto;overflow-y:visible;border-right:1px solid #e2e3e4}@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-lg) .sky-sectioned-form,:host-context(.sky-responsive-container-md) .sky-sectioned-form,:host-context(.sky-responsive-container-sm) .sky-sectioned-form{display:flex;max-height:100%}:host-context(.sky-responsive-container-lg) .sky-sectioned-form-content,:host-context(.sky-responsive-container-md) .sky-sectioned-form-content,:host-context(.sky-responsive-container-sm) .sky-sectioned-form-content{flex-basis:70%;overflow-y:auto}:host-context(.sky-responsive-container-lg) .sky-sectioned-form-tabs,:host-context(.sky-responsive-container-md) .sky-sectioned-form-tabs,:host-context(.sky-responsive-container-sm) .sky-sectioned-form-tabs{flex-basis:30%;overflow-y:auto}.sky-sectioned-form-content-hidden,.sky-sectioned-form-tabs-hidden{display:none}"]}]}],"members":{"maintainSectionContent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":70,"character":3}}]}],"indexChanged":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":77,"character":3}}]}],"content":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":84,"character":3},"arguments":["skySectionSideContent"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵc"},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":92,"character":23}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewChecked":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"tabsVisible":[{"__symbolic":"method"}],"showTabs":[{"__symbolic":"method"}]}},"ɵa":"shown","ɵb":"void","ɵc":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":25,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@skyux/core","name":"SkyMediaQueryService","line":62,"character":48}]}],"addTab":[{"__symbolic":"method"}],"destroyTab":[{"__symbolic":"method"}],"activateTab":[{"__symbolic":"method"}],"activeTab":[{"__symbolic":"method"}],"isMobile":[{"__symbolic":"method"}],"updateContent":[{"__symbolic":"method"}],"tabsVisible":[{"__symbolic":"method"}],"contentVisible":[{"__symbolic":"method"}],"showTabs":[{"__symbolic":"method"}],"destroyContent":[{"__symbolic":"method"}],"moveContent":[{"__symbolic":"method"}],"updateTabClicked":[{"__symbolic":"method"}]}},"ɵd":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":32,"character":1},"arguments":[{"selector":"sky-sectioned-form-section","providers":[{"__symbolic":"reference","name":"SkySectionedFormService"}],"template":"<sky-vertical-tab\n  [active]=\"active\"\n  [ariaControls]=\"sectionContentId\"\n  [ariaInvalid]=\"fieldInvalid\"\n  [ariaRequired]=\"fieldRequired\"\n  [errorIndicator]=\"fieldInvalid\"\n  [ngClass]=\"{\n    'sky-tab-field-required': fieldRequired\n  }\"\n  [showTabRightArrow]=\"true\"\n  [tabHeaderCount]=\"itemCount\"\n  [tabHeading]=\"heading\"\n  [tabId]=\"sectionTabId\">\n  <div\n    [attr.aria-labelledby]=\"ariaLabelledby\"\n    [attr.role]=\"ariaRole\"\n    [id]=\"sectionContentId\"\n    #tabContent>\n    <ng-content></ng-content>\n  </div>\n</sky-vertical-tab>\n","styles":[":host .sky-tab-field-required ::ng-deep .sky-vertical-tab-heading:after{content:\"*\";color:#ef4044;padding-left:5px}"]}]}],"members":{"heading":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":46,"character":3}}]}],"itemCount":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":53,"character":3}}]}],"active":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":60,"character":3}}]}],"tab":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":74,"character":3},"arguments":[{"__symbolic":"reference","name":"ɵe"}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"SkySectionedFormService"},{"__symbolic":"reference","name":"ɵc"},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":83,"character":23}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"ɵe":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":36,"character":1},"arguments":[{"selector":"sky-vertical-tab","providers":[{"__symbolic":"reference","name":"ɵf"},{"provide":{"__symbolic":"reference","module":"@skyux/core","name":"SkyMediaQueryService","line":42,"character":15},"useExisting":{"__symbolic":"reference","name":"ɵf"}}],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":44,"character":19},"member":"OnPush"},"template":"<a\n  class=\"sky-vertical-tab\"\n  [attr.aria-controls]=\"ariaControls\"\n  [attr.aria-invalid]=\"ariaInvalid\"\n  [attr.aria-required]=\"ariaRequired ? ariaRequired : null\"\n  [attr.aria-selected]=\"active\"\n  [attr.id]=\"tabId\"\n  [attr.role]=\"ariaRole\"\n  [ngClass]=\"{\n    'sky-vertical-tab-active': active,\n    'sky-vertical-tab-disabled': disabled,\n    'sky-deemphasized': disabled\n  }\"\n  [tabIndex]=\"tabIndex()\"\n  (click)=\"activateTab()\"\n  (keyup.enter)=\"activateTab()\">\n  <div class=\"sky-vertical-tab-display\">\n    <div class=\"sky-vertical-tab-heading\">\n      <span class=\"sky-vertical-tab-heading-value\">{{ tabHeading }}</span>\n      <span\n        class=\"sky-vertical-tab-count\"\n        *ngIf=\"tabHeaderCount || tabHeaderCount === 0\">\n        ({{ tabHeaderCount }})\n      </span>\n    </div>\n    <sky-status-indicator *ngIf=\"errorIndicator\"\n      class=\"sky-vertical-tab-heading-error\"\n      descriptionType=\"error\"\n      indicatorType=\"danger\"\n    ></sky-status-indicator>\n\n    <sky-icon\n      *ngIf=\"showTabRightArrow\"\n      class=\"sky-vertical-tab-right-arrow\"\n      icon=\"chevron-right\"\n    >\n    </sky-icon>\n  </div>\n</a>\n\n<div\n  #tabContentWrapper\n>\n  <div\n    class=\"sky-vertical-tab-content-pane\"\n    [ngClass]=\"{'sky-vertical-tab-hidden': !active}\"\n  >\n\n    <ng-content></ng-content>\n\n  <div>\n\n</div>\n\n","styles":[".sky-vertical-tab{cursor:pointer;padding:7px 0 7px 10px;margin:5px 0 5px 10px;display:flex;text-decoration:none}.sky-vertical-tab:not(.sky-deemphasized){color:#212327}.sky-vertical-tab:hover{background-color:#eeeeef}.sky-vertical-tab:focus{outline:dotted thin;outline:-webkit-focus-ring-color auto 5px}.sky-vertical-tab:hover .sky-vertical-tab-right-arrow{color:#979ba2}.sky-vertical-tab-active{background-color:#eeeeef;color:#212327;padding-left:6px;border-left:4px solid #00b4f1}.sky-vertical-tab-hidden{display:none}.sky-vertical-tab-display{display:flex;flex-grow:1}.sky-vertical-tab-heading-error{padding-left:5px}.sky-vertical-tab-count{margin-left:5px}.sky-vertical-tab-disabled{cursor:not-allowed;pointer-events:none;font-style:normal}.sky-vertical-tab-right-arrow{padding:3px 10px 0 0;color:#cdcfd2}.sky-theme-modern .sky-vertical-tab,:host-context(.sky-theme-modern) .sky-vertical-tab{cursor:pointer;padding:10px 0 10px 10px;margin:10px 0 20px 10px}.sky-theme-modern .sky-vertical-tab:not(.sky-vertical-tab-active):not(:active):hover,:host-context(.sky-theme-modern) .sky-vertical-tab:not(.sky-vertical-tab-active):not(:active):hover{color:#212327;background-color:transparent;padding-left:9px;border-left:1px solid #00b4f1}.sky-theme-modern .sky-vertical-tab:not(:active):focus,:host-context(.sky-theme-modern) .sky-vertical-tab:not(:active):focus{outline:#1870b8 solid 2px;outline-offset:-2px;box-shadow:0 1px 8px 0 rgba(0,0,0,.3)}.sky-theme-modern .sky-vertical-tab:focus:active:hover,:host-context(.sky-theme-modern) .sky-vertical-tab:focus:active:hover{outline:0;background:0 0}.sky-theme-modern .sky-vertical-tab:active,:host-context(.sky-theme-modern) .sky-vertical-tab:active{border-left:3px solid #00b4f1;padding-left:7px}.sky-theme-modern .sky-vertical-tab .sky-vertical-tab-heading-error,:host-context(.sky-theme-modern) .sky-vertical-tab .sky-vertical-tab-heading-error{padding-left:10px}.sky-theme-modern .sky-vertical-tab-active,:host-context(.sky-theme-modern) .sky-vertical-tab-active{background:0 0;padding-left:7px;border-left:3px solid #1870b8}"]}]}],"members":{"active":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":50,"character":3}}]}],"ariaControls":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":58,"character":3}}]}],"ariaInvalid":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":69,"character":3}}]}],"ariaRequired":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":75,"character":3}}]}],"ariaRole":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":86,"character":3}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":100,"character":3}}]}],"errorIndicator":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":107,"character":3}}]}],"tabHeaderCount":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":113,"character":3}}]}],"tabHeading":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":120,"character":3}}]}],"showTabRightArrow":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":127,"character":3}}]}],"tabId":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":139,"character":3}}]}],"tabContent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":159,"character":3},"arguments":["tabContentWrapper"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵg"},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":178,"character":23},{"__symbolic":"reference","name":"ɵc"},{"__symbolic":"reference","name":"ɵf"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"tabIndex":[{"__symbolic":"method"}],"activateTab":[{"__symbolic":"method"}],"onWindowResize":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":230,"character":3},"arguments":["window:resize"]}]}],"tabDeactivated":[{"__symbolic":"method"}],"updateBreakpointAndResponsiveClass":[{"__symbolic":"method"}]}},"ɵf":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":17,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"subscribe":[{"__symbolic":"method"}],"setBreakpointForWidth":[{"__symbolic":"method"}],"isWidthWithinBreakpiont":[{"__symbolic":"method"}],"destroy":[{"__symbolic":"method"}]}},"ɵg":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":11,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"RendererFactory2","line":16,"character":29}]}],"getWidth":[{"__symbolic":"method"}],"scrollToContentTop":[{"__symbolic":"method"}],"setResponsiveClass":[{"__symbolic":"method"}]}},"ɵh":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":44,"character":1},"arguments":[{"selector":"sky-vertical-tabset","providers":[{"__symbolic":"reference","name":"ɵc"}],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":49,"character":19},"member":"OnPush"},"animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"trigger","line":51,"character":4},"arguments":["tabGroupEnter",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":53,"character":8},"arguments":[{"__symbolic":"binop","operator":"+","left":{"__symbolic":"binop","operator":"+","left":{"__symbolic":"reference","name":"ɵb"},"right":" => "},"right":{"__symbolic":"reference","name":"ɵa"}},[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":54,"character":10},"arguments":[{"transform":"translate(-100%)"}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":55,"character":10},"arguments":["150ms ease-in"]}]]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"trigger","line":59,"character":4},"arguments":["contentEnter",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":61,"character":8},"arguments":[{"__symbolic":"binop","operator":"+","left":{"__symbolic":"binop","operator":"+","left":{"__symbolic":"reference","name":"ɵb"},"right":" => "},"right":{"__symbolic":"reference","name":"ɵa"}},[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":62,"character":10},"arguments":[{"transform":"translate(100%)"}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":63,"character":10},"arguments":["150ms ease-in"]}]]}]]}],"template":" <div class=\"sky-vertical-tabset\" (window:resize)=\"tabService.updateContent()\">\n  <div\n    *ngIf=\"maintainTabContent || tabService.tabsVisible()\"\n    #groupContainerWrapper\n    class=\"sky-vertical-tabset-group-container\"\n    [ngClass]=\"{'sky-vertical-tabset-hidden': !tabService.tabsVisible()}\"\n    [attr.role]=\"ariaRole\"\n    [@tabGroupEnter]=\"tabService.animationTabsVisibleState\"\n  >\n    <ng-content></ng-content>\n  </div>\n  <div\n    *ngIf=\"maintainTabContent || tabService.contentVisible()\"\n    class=\"sky-vertical-tabset-content\"\n    [ngClass]=\"{'sky-vertical-tabset-content-hidden': !tabService.contentVisible()}\"\n    [@contentEnter]=\"tabService.animationContentVisibleState\"\n    #contentContainerWrapper\n  >\n    <div #skySideContent></div>\n    <button\n      *ngIf=\"!tabService.tabsVisible()\"\n      (click)=\"tabService.showTabs()\"\n      class=\"sky-btn sky-btn-primary sky-vertical-tabset-show-tabs-btn\"\n    >\n      <sky-icon icon=\"chevron-left\"></sky-icon>\n      {{ showTabsText }}\n    </button>\n  </div>\n</div>\n","styles":[":host .sky-vertical-tabset{display:block;height:auto}:host .sky-vertical-tabset-group-container{border-right:none}:host-context(.sky-responsive-container-lg) .sky-vertical-tabset,:host-context(.sky-responsive-container-md) .sky-vertical-tabset,:host-context(.sky-responsive-container-sm) .sky-vertical-tabset,:host-context(.sky-responsive-container-xs) .sky-vertical-tabset{display:block;height:auto}:host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-sm) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-xs) .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:1px solid #cdcfd2}}:host-context(.sky-responsive-container-lg) .sky-vertical-tabset,:host-context(.sky-responsive-container-md) .sky-vertical-tabset,:host-context(.sky-responsive-container-sm) .sky-vertical-tabset{display:flex;height:100%}:host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-sm) .sky-vertical-tabset-group-container{border-right:1px solid #cdcfd2}.sky-vertical-tabset-hidden{display:none}.sky-vertical-tabset-content{margin:10px 0 0 10px;flex-basis:75%;overflow-y:auto}.sky-vertical-tabset-content-hidden{display:none}.sky-vertical-tabset-show-tabs-btn{margin-top:10px}.sky-vertical-tabset-group-container{flex-basis:25%;overflow-y:auto}:host-context(sky-modal-content>) .sky-vertical-tabset{margin:-15px}"]}]}],"members":{"showTabsText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":74,"character":3}}]}],"ariaRole":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":85,"character":3}}]}],"maintainTabContent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":101,"character":3}}]}],"activeChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":108,"character":3}}]}],"tabGroups":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":111,"character":3},"arguments":["groupContainerWrapper"]}]}],"content":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":114,"character":3},"arguments":["skySideContent"]}]}],"contentWrapper":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":117,"character":3},"arguments":["contentContainerWrapper"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵg"},{"__symbolic":"reference","name":"ɵc"},{"__symbolic":"reference","module":"@skyux/i18n","name":"SkyLibResourcesService","line":127,"character":23},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":128,"character":23}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewChecked":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"ɵi":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":34,"character":1},"arguments":[{"selector":"sky-vertical-tabset-group","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":38,"character":19},"member":"OnPush"},"animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"trigger","line":40,"character":4},"arguments":["tabSlide",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":42,"character":8},"arguments":[":enter",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":43,"character":10},"arguments":[{"height":"0","visibility":"hidden"}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":47,"character":10},"arguments":["150ms ease-in",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":47,"character":35},"arguments":[{"height":"*","visibility":"visible"}]}]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":52,"character":8},"arguments":[":leave",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":53,"character":10},"arguments":[{"height":"*","visibility":"visible"}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":57,"character":10},"arguments":["150ms ease-in",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":57,"character":35},"arguments":[{"height":"0","visibility":"hidden"}]}]}]]}]]}],"template":"<div class=\"sky-vertical-tabset-group\">\n  <div\n    class=\"sky-vertical-tabset-group-header sky-padding-even-default\"\n    [ngClass]=\"{\n      'sky-vertical-tabset-group-header-sub-open sky-emphasized': subMenuOpen(),\n      'sky-deemphasized': disabled,\n      'sky-vertical-tabset-disabled': disabled\n    }\"\n    (click)=\"toggleMenuOpen()\"\n    (keyup.enter)=\"toggleMenuOpen()\"\n    [tabIndex]=\"-1\"\n  >\n    {{ groupHeading }}\n    <sky-chevron *skyThemeIf=\"'default'\"\n      class=\"sky-vertical-tabset-group-header-chevron\"\n      [direction]=\"open ? 'up' : 'down'\"\n      [disabled]=\"disabled\"\n      (directionChange)=\"toggleMenuOpen()\"\n      (keyup.enter)=\"$event.stopPropagation()\"\n    >\n    </sky-chevron>\n    <ng-container *skyThemeIf=\"'modern'\">\n    <button *ngIf=\"!open\"\n      class=\"sky-btn sky-btn-icon-borderless sky-vertical-tabset-group-header-chevron\"\n      type=\"button\"\n    >\n      <sky-icon\n        icon=\"chevron-right\"\n        iconType=\"skyux\"\n      >\n      </sky-icon>\n    </button>\n    <button *ngIf=\"open\"\n      class=\"sky-btn sky-btn-icon-borderless sky-vertical-tabset-group-header-chevron\"\n      type=\"button\"\n    >\n      <sky-icon\n        icon=\"chevron-down\"\n        iconType=\"skyux\"\n      >\n      </sky-icon>\n    </button>\n    </ng-container>\n  </div>\n  <div\n    class=\"sky-vertical-tabset-group-content\"\n    *ngIf=\"open\"\n    [@tabSlide]\n  >\n    <ng-content></ng-content>\n  </div>\n</div>\n","styles":[".sky-vertical-tabset-group{border-bottom:1px solid #e2e3e4;margin:5px 0 5px 5px}.sky-vertical-tabset-group-header{cursor:pointer;display:flex;justify-content:space-between}.sky-vertical-tabset-group-header:focus{outline:dotted thin;outline:-webkit-focus-ring-color auto 5px}.sky-vertical-tabset-group-content{overflow:hidden;border-top:1px solid #e2e3e4}:host ::ng-deep .sky-vertical-tabset-group-header-chevron>button{font-size:14px!important}.sky-vertical-tabset-disabled{cursor:not-allowed;pointer-events:none;font-style:normal}.sky-theme-modern .sky-vertical-tabset-group,:host-context(.sky-theme-modern) .sky-vertical-tabset-group{border:none}.sky-theme-modern .sky-vertical-tabset-group-content,:host-context(.sky-theme-modern) .sky-vertical-tabset-group-content{border:none;padding-left:25px}.sky-theme-modern .sky-vertical-tabset-group-header,:host-context(.sky-theme-modern) .sky-vertical-tabset-group-header{position:relative}.sky-theme-modern .sky-vertical-tabset-group-header-chevron,:host-context(.sky-theme-modern) .sky-vertical-tabset-group-header-chevron{position:absolute;top:6px;right:5px}"]}]}],"members":{"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":71,"character":3}}]}],"groupHeading":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":77,"character":3}}]}],"open":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":84,"character":3}}]}],"tabs":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":93,"character":3},"arguments":[{"__symbolic":"reference","name":"ɵe"}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵc"},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":104,"character":23}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"toggleMenuOpen":[{"__symbolic":"method"}],"subMenuOpen":[{"__symbolic":"method"}]}},"ɵj":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":12,"character":1},"arguments":[{"providers":[{"provide":{"__symbolic":"reference","module":"@skyux/i18n","name":"SKY_LIB_RESOURCES_PROVIDERS","line":14,"character":13},"useClass":{"__symbolic":"reference","name":"ɵk"},"multi":true}]}]}],"members":{}},"ɵk":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":11,"character":1}}],"members":{"getString":[{"__symbolic":"method"}]}},"ɵl":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":16,"character":1},"arguments":[{"selector":"sky-tab-button","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":20,"character":19},"member":"OnPush"},"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":21,"character":17},"member":"None"},"template":"<div\n  class=\"sky-btn-tab-wrapper\"\n  [ngClass]=\"{\n    'sky-btn-tab-wrapper-selected': active,\n    'sky-btn-tab-wrapper-disabled': disabled\n  }\"\n>\n  <a\n    class=\"sky-btn-tab\"\n    role=\"tab\"\n    [attr.aria-controls]=\"ariaControls\"\n    [attr.aria-disabled]=\"disabled\"\n    [attr.aria-selected]=\"active\"\n    [attr.href]=\"buttonHref\"\n    [id]=\"buttonId\"\n    [ngClass]=\"{\n      'sky-btn-tab-wizard': tabStyle === 'wizard',\n      'sky-btn-tab-selected': active,\n      'sky-btn-tab-disabled': disabled,\n      'sky-tab-btn-closeable': closeable\n    }\"\n    [tabindex]=\"disabled ? '-1' : '0'\"\n    (click)=\"onButtonClick($event)\"\n    (keydown.enter)=\"onButtonEnterKeyDown($event)\"\n  >\n    <span\n      class=\"sky-tab-heading\"\n    >\n      {{ buttonText }}\n      <span *ngIf=\"buttonTextCount !== undefined\"\n        class=\"sky-tab-header-count\"\n      >\n        {{ buttonTextCount }}\n      </span>\n    </span>\n  </a>\n\n  <button *ngIf=\"closeable\"\n    class=\"sky-btn-tab-close\"\n    type=\"button\"\n    [attr.aria-label]=\"'skyux_tab_close' | skyLibResources:buttonText\"\n    [disabled]=\"disabled\"\n    [ngClass]=\"{\n      'sky-btn-tab-close-disabled': disabled\n    }\"\n    (click)=\"onCloseClick($event)\"\n    >\n    <sky-icon\n      icon=\"remove\"\n    ></sky-icon>\n  </button>\n</div>\n","styles":[".sky-btn-tab-wrapper{display:inline-block;position:relative;margin-right:5px}.sky-btn-tab-wrapper .sky-btn-tab-close{position:absolute;top:10px;right:10px;color:#686c73}.sky-btn-tab-wrapper .sky-btn-tab-close:hover{color:#212327;transition:color 150ms}.sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:#fff}.sky-tab-btn-closeable{padding-right:43px}.sky-theme-modern .sky-btn-tab-wrapper,:host-context(.sky-theme-modern) .sky-btn-tab-wrapper{margin-right:10px}.sky-theme-modern .sky-btn-tab-wrapper .sky-btn-tab-close,:host-context(.sky-theme-modern) .sky-btn-tab-wrapper .sky-btn-tab-close{top:12px;right:10px}.sky-theme-modern .sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close,:host-context(.sky-theme-modern) .sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:#686c73}.sky-theme-modern .sky-tab-btn-closeable,:host-context(.sky-theme-modern) .sky-tab-btn-closeable{padding-right:44px}.sky-theme-modern.sky-theme-mode-dark .sky-btn-tab-wrapper .sky-btn-tab-close,:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-btn-tab-wrapper .sky-btn-tab-close{color:#eeeeef}.sky-theme-modern.sky-theme-mode-dark .sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close,:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:#eeeeef}"]}]}],"members":{"active":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":25,"character":3}}]}],"ariaControls":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":28,"character":3}}]}],"buttonHref":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":31,"character":3}}]}],"buttonId":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":34,"character":3}}]}],"buttonText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":37,"character":3}}]}],"buttonTextCount":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":40,"character":3}}]}],"closeable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":43,"character":3}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":46,"character":3}}]}],"tabStyle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":49,"character":3}}]}],"buttonClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":52,"character":3}}]}],"closeClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":55,"character":3}}]}],"onButtonClick":[{"__symbolic":"method"}],"onButtonEnterKeyDown":[{"__symbolic":"method"}],"onCloseClick":[{"__symbolic":"method"}]}},"ɵm":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":31,"character":1},"arguments":[{"selector":"sky-tab","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":34,"character":19},"member":"OnPush"},"template":"<div\n  class=\"sky-tab\"\n  role=\"tabpanel\"\n  [attr.aria-labelledby]=\"tabButtonId\"\n  [hidden]=\"!showContent\"\n  [id]=\"tabPanelId\"\n>\n  <ng-content></ng-content>\n</div>\n"}]}],"members":{"active":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":43,"character":3}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":66,"character":3}}]}],"permalinkValue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":76,"character":3}}]}],"tabHeaderCount":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":88,"character":3}}]}],"tabHeading":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":99,"character":3}}]}],"tabIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":106,"character":3}}]}],"close":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":128,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":165,"character":28},{"__symbolic":"reference","name":"ɵn"},{"__symbolic":"reference","name":"ɵo"}]}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"init":[{"__symbolic":"method"}],"activate":[{"__symbolic":"method"}],"deactivate":[{"__symbolic":"method"}]}},"ɵn":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":30,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/router","name":"ActivatedRoute","line":42,"character":28},{"__symbolic":"reference","module":"@angular/common","name":"Location","line":43,"character":22},{"__symbolic":"reference","module":"@angular/router","name":"Router","line":44,"character":20}]}],"ngOnDestroy":[{"__symbolic":"method"}],"init":[{"__symbolic":"method"}],"getParam":[{"__symbolic":"method"}],"setParam":[{"__symbolic":"method"}],"clearParam":[{"__symbolic":"method"}],"getParamHref":[{"__symbolic":"method"}],"urlify":[{"__symbolic":"method"}],"getParams":[{"__symbolic":"method"}]}},"ɵo":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":21,"character":1}}],"members":{"setActiveTabIndex":[{"__symbolic":"method"}],"registerTab":[{"__symbolic":"method"}],"updateTabIndex":[{"__symbolic":"method"}],"unregisterTab":[{"__symbolic":"method"}],"unregisterAll":[{"__symbolic":"method"}],"tabIndexesEqual":[{"__symbolic":"method"}],"isValidTabIndex":[{"__symbolic":"method"}],"activateFirstTab":[{"__symbolic":"method"}],"activateNearestTab":[{"__symbolic":"method"}],"isTabIndexActive":[{"__symbolic":"method"}]}},"ɵp":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":73,"character":1},"arguments":[{"selector":"sky-tabset","providers":[{"__symbolic":"reference","name":"ɵq"},{"__symbolic":"reference","name":"ɵn"},{"__symbolic":"reference","name":"ɵo"}],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":82,"character":19},"member":"OnPush"},"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":83,"character":17},"member":"None"},"template":"<div\n  class=\"sky-tabset\"\n  role=\"tablist\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.aria-labelledby]=\"ariaLabelledBy\"\n  [ngClass]=\"'sky-tabset-mode-' + tabDisplayMode + ' sky-tabset-style-' + tabStyle\"\n  (window:resize)=\"onWindowResize()\"\n>\n  <span class=\"sky-tabset-dropdown\">\n    <sky-dropdown *ngIf=\"tabDisplayMode === 'dropdown'\"\n      buttonType=\"tab\"\n    >\n      <sky-dropdown-button>\n        {{ dropdownTriggerButtonText }}\n      </sky-dropdown-button>\n      <sky-dropdown-menu>\n        <sky-dropdown-item *ngFor=\"let tabButton of tabButtons\"\n          class=\"sky-tab-dropdown-menu-item\"\n        >\n          <div\n            class=\"sky-tab-dropdown-item\"\n            [ngClass]=\"{\n              'sky-tab-dropdown-item-selected': tabButton.active\n            }\"\n          >\n            <ng-container *ngTemplateOutlet=\"tabButtonTemplate; context: {\n              $implicit: tabButton\n            }\"></ng-container>\n          </div>\n        </sky-dropdown-item>\n      </sky-dropdown-menu>\n    </sky-dropdown>\n  </span>\n  <span\n    class=\"sky-tabset-tabs\"\n  >\n    <ng-container *ngFor=\"let tabButton of tabButtons\">\n      <ng-container *ngTemplateOutlet=\"tabButtonTemplate; context: {\n        $implicit: tabButton\n      }\"></ng-container>\n    </ng-container>\n  </span>\n  <span\n    class=\"sky-tabset-btns\"\n  >\n    <button *ngIf=\"newTab.observers.length > 0\"\n      class=\"sky-btn sky-btn-icon sky-tabset-btn-new sky-margin-inline-compact\"\n      type=\"button\"\n      [attr.aria-label]=\"'skyux_tab_add' | skyLibResources\"\n      [skyThemeClass]=\"{\n        'sky-margin-inline-sm': 'modern'\n      }\"\n      (click)=\"onNewTabClick()\"\n    >\n      <sky-icon\n        icon=\"plus-circle\"\n        size=\"lg\"\n      >\n      </sky-icon>\n    </button>\n    <button *ngIf=\"openTab.observers.length > 0\"\n      class=\"sky-btn sky-btn-icon sky-tabset-btn-open sky-margin-inline-compact\"\n      type=\"button\"\n      [attr.aria-label]=\"'skyux_tab_open' | skyLibResources\"\n      [skyThemeClass]=\"{\n        'sky-margin-inline-sm': 'modern'\n      }\"\n      (click)=\"onOpenTabClick()\"\n    >\n      <sky-icon\n        icon=\"folder-open-o\"\n        size=\"lg\"\n      >\n      </sky-icon>\n    </button>\n  </span>\n</div>\n<ng-content></ng-content>\n\n<ng-template\n  let-tabButton\n  #tabButtonTemplate\n>\n  <sky-tab-button\n    [active]=\"tabButton.active\"\n    [ariaControls]=\"tabButton.ariaControls\"\n    [buttonHref]=\"tabButton.buttonHref\"\n    [buttonId]=\"tabButton.buttonId\"\n    [buttonText]=\"tabButton.buttonText\"\n    [buttonTextCount]=\"tabButton.buttonTextCount\"\n    [closeable]=\"tabButton.closeable\"\n    [disabled]=\"tabButton.disabled\"\n    [tabStyle]=\"tabStyle\"\n    (buttonClick)=\"onTabButtonClick(tabButton)\"\n    (closeClick)=\"onTabCloseClick(tabButton)\"\n  ></sky-tab-button>\n</ng-template>\n","styles":[".sky-tabset{align-items:center;border-bottom:2px solid #0974a1;display:flex;list-style-type:none;margin:0;overflow:hidden;padding:0 0 0 15px;white-space:nowrap}.sky-tabset.sky-tabset-style-wizard{border-bottom:none;padding-bottom:10px;padding-left:0}.sky-tabset-btns{order:1;padding-left:10px}.sky-tabset-dropdown{order:0;max-width:100%}.sky-tabset-mode-dropdown{line-height:0}.sky-tabset-mode-dropdown .sky-tabset-tabs{visibility:hidden;order:2}.sky-tab-dropdown-menu-item sky-tab-button{display:flex;min-width:300px}.sky-tab-dropdown-menu-item .sky-dropdown-item{margin:0}.sky-tab-dropdown-menu-item .sky-btn-tab-wrapper{width:100%;margin-right:0}.sky-tab-dropdown-menu-item .sky-btn-tab{margin:0;border-radius:0;width:100%;display:flex}.sky-tab-dropdown-menu-item .sky-btn-tab>.sky-tab-heading{flex:1 1 auto}.sky-tab-dropdown-menu-item .sky-btn-tab>.sky-btn-tab-close{flex:0 1 auto}.sky-tabset-tabs{order:0;white-space:nowrap}.sky-tabset-btn-new,.sky-tabset-btn-open{color:#0974a1}.sky-theme-modern .sky-tabset{border-bottom:1px solid #d2d2d2;overflow:visible}.sky-theme-modern .sky-tab-dropdown-menu-item .sky-btn-tab-wrapper{margin-right:0}"]}]}],"members":{"active":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":90,"character":3}}]}],"ariaLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":128,"character":3}}]}],"ariaLabelledBy":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":137,"character":3}}]}],"permalinkId":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":146,"character":3}}]}],"tabStyle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":167,"character":3}}]}],"activeChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":187,"character":3}}]}],"newTab":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":194,"character":3}}]}],"openTab":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":201,"character":3}}]}],"tabIndexesChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":207,"character":3}}]}],"tabs":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":219,"character":3},"arguments":[{"__symbolic":"reference","name":"ɵm"}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":245,"character":28},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":246,"character":24},{"__symbolic":"reference","name":"ɵq"},{"__symbolic":"reference","name":"ɵn"},{"__symbolic":"reference","name":"ɵo"}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"onWindowResize":[{"__symbolic":"method"}],"onTabCloseClick":[{"__symbolic":"method"}],"onTabButtonClick":[{"__symbolic":"method"}],"onNewTabClick":[{"__symbolic":"method"}],"onOpenTabClick":[{"__symbolic":"method"}],"getInitialTabIndex":[{"__symbolic":"method"}],"listenActiveIndexChange":[{"__symbolic":"method"}],"listenTabComponentsStructuralChange":[{"__symbolic":"method"}],"listenTabComponentsStateChange":[{"__symbolic":"method"}],"initTabComponents":[{"__symbolic":"method"}],"resetTabComponents":[{"__symbolic":"method"}],"emitTabIndexChange":[{"__symbolic":"method"}],"unsubscribeTabComponentsStateChange":[{"__symbolic":"method"}],"listenTabButtonsOverflowChange":[{"__symbolic":"method"}],"listenLocationPopStateChange":[{"__symbolic":"method"}],"setActiveTabIndexByPermalinkId":[{"__symbolic":"method"}],"getActiveTabIndexByPermalinkId":[{"__symbolic":"method"}],"getActiveTabComponent":[{"__symbolic":"method"}],"createTabButtons":[{"__symbolic":"method"}],"updateTabButtons":[{"__symbolic":"method"}],"updateTabsetComponent":[{"__symbolic":"method"}]}},"ɵq":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":13,"character":1}}],"members":{"registerTabset":[{"__symbolic":"method"}],"detectOverflow":[{"__symbolic":"method"}],"getTabsOffsetLeft":[{"__symbolic":"method"}]}},"ɵr":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":34,"character":1},"arguments":[{"selector":"sky-tabset-nav-button","template":"<button\n  class=\"sky-btn sky-btn-default\"\n  type=\"button\"\n  [disabled]=\"disabled\"\n  (click)=\"buttonClick()\"\n>\n  {{ buttonText }}\n</button>\n"}]}],"members":{"tabset":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":40,"character":3}}]}],"buttonType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":43,"character":3}}]}],"buttonText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":46,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@skyux/i18n","name":"SkyLibResourcesService","line":121,"character":39},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":121,"character":87}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"buttonClick":[{"__symbolic":"method"}]}}},"origins":{"SkySectionedFormModule":"./modules/sectioned-form/sectioned-form.module","SkySectionedFormService":"./modules/sectioned-form/sectioned-form.service","SkyTabIndex":"./modules/tabs/tab-index","SkyTabsetButtonsDisplayMode":"./modules/tabs/tabset-buttons-display-mode","SkyTabsetStyle":"./modules/tabs/tabset-style","SkyTabsetTabIndexesChange":"./modules/tabs/tabset-tab-indexes-change","SkyTabsModule":"./modules/tabs/tabs.module","SkyVerticalTabsetModule":"./modules/vertical-tabset/vertical-tabset.module","SkySectionedFormComponent":"./modules/sectioned-form/sectioned-form.component","ɵa":"./modules/vertical-tabset/vertical-tabset.service","ɵb":"./modules/vertical-tabset/vertical-tabset.service","ɵc":"./modules/vertical-tabset/vertical-tabset.service","ɵd":"./modules/sectioned-form/sectioned-form-section.component","ɵe":"./modules/vertical-tabset/vertical-tab.component","ɵf":"./modules/vertical-tabset/vertical-tab-media-query.service","ɵg":"./modules/vertical-tabset/vertical-tabset-adapter.service","ɵh":"./modules/vertical-tabset/vertical-tabset.component","ɵi":"./modules/vertical-tabset/vertical-tabset-group.component","ɵj":"./modules/shared/tabs-resources.module","ɵk":"./plugin-resources/tabs-resources-provider","ɵl":"./modules/tabs/tab-button.component","ɵm":"./modules/tabs/tab.component","ɵn":"./modules/tabs/tabset-permalink.service","ɵo":"./modules/tabs/tabset.service","ɵp":"./modules/tabs/tabset.component","ɵq":"./modules/tabs/tabset-adapter.service","ɵr":"./modules/tabs/tabset-nav-button.component"},"importAs":"@skyux/tabs"}