@skyux/tabs 8.6.0 → 9.0.0-alpha.0

package/fesm2015/skyux-tabs.mjs

@@ -1,2560 +0,0 @@
-import * as i4 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import * as i0 from '@angular/core';
-import { NgModule, Injectable, Component, ChangeDetectionStrategy, Optional, Input, ViewChild, HostListener, ContentChildren, EventEmitter, Output, ViewEncapsulation, HostBinding, Pipe, inject } from '@angular/core';
-import { SkyCheckboxModule } from '@skyux/forms';
-import * as i7 from '@skyux/theme';
-import { SkyThemeModule } from '@skyux/theme';
-import * as i1 from '@skyux/core';
-import { SkyMediaBreakpoints, SkyMediaQueryService, SkyIdModule, SkyLayoutHostService } from '@skyux/core';
-import * as i6 from '@skyux/indicators';
-import { SkyIconModule, SkyExpansionIndicatorModule, SkyStatusIndicatorModule } from '@skyux/indicators';
-import * as i3 from '@skyux/i18n';
-import { getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS } from '@skyux/i18n';
-import { __classPrivateFieldSet, __classPrivateFieldGet } from 'tslib';
-import { ReplaySubject, BehaviorSubject, Subject, combineLatest, race } from 'rxjs';
-import { takeUntil, take, distinctUntilChanged } from 'rxjs/operators';
-import { skyAnimationSlide } from '@skyux/animations';
-import { trigger, transition, style, animate } from '@angular/animations';
-import * as i1$1 from '@angular/router';
-import { RouterModule } from '@angular/router';
-import * as i5 from '@skyux/popovers';
-import { SkyDropdownModule } from '@skyux/popovers';
-
-/**
- * NOTICE: DO NOT MODIFY THIS FILE!
- * The contents of this file were automatically generated by
- * the 'ng generate @skyux/i18n:lib-resources-module lib/modules/shared/sky-tabs' schematic.
- * To update this file, simply rerun the command.
- */
-const RESOURCES = {
-    'EN-US': {
-        skyux_tab_add: { message: 'Add tab' },
-        skyux_tab_close: { message: 'Close {0} tab' },
-        skyux_tabs_navigator_finish: { message: 'Finish' },
-        skyux_tabs_navigator_next: { message: 'Next' },
-        skyux_tabs_navigator_previous: { message: 'Previous' },
-        skyux_tab_open: { message: 'Open tab' },
-        skyux_tabs_sr_tab_order: { message: 'Tab {0} of {1}: {2}' },
-        skyux_vertical_tabs_show_tabs_text: { message: 'Tab list' },
-        skyux_wizard_sr_step_current: { message: 'Step {0} of {1}, current: {2}' },
-        skyux_wizard_sr_step_completed: {
-            message: 'Step {0} of {1}, completed: {2}',
-        },
-        skyux_wizard_sr_step_unavailable: {
-            message: 'Step {0} of {1}, unavailable: {2}',
-        },
-    },
-};
-class SkyTabsResourcesProvider {
-    getString(localeInfo, name) {
-        return getLibStringForLocale(RESOURCES, localeInfo.locale, name);
-    }
-}
-/**
- * Import into any component library module that needs to use resource strings.
- */
-class SkyTabsResourcesModule {
-}
-SkyTabsResourcesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyTabsResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SkyTabsResourcesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: SkyTabsResourcesModule, exports: [SkyI18nModule] });
-SkyTabsResourcesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyTabsResourcesModule, providers: [
-        {
-            provide: SKY_LIB_RESOURCES_PROVIDERS,
-            useClass: SkyTabsResourcesProvider,
-            multi: true,
-        },
-    ], imports: [SkyI18nModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyTabsResourcesModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    exports: [SkyI18nModule],
-                    providers: [
-                        {
-                            provide: SKY_LIB_RESOURCES_PROVIDERS,
-                            useClass: SkyTabsResourcesProvider,
-                            multi: true,
-                        },
-                    ],
-                }]
-        }] });
-
-var _SkyVerticalTabMediaQueryService_currentSubject;
-/**
- * @internal
- */
-class SkyVerticalTabMediaQueryService {
-    constructor() {
-        _SkyVerticalTabMediaQueryService_currentSubject.set(this, void 0);
-        __classPrivateFieldSet(this, _SkyVerticalTabMediaQueryService_currentSubject, new ReplaySubject(1), "f");
-    }
-    subscribe(listener) {
-        return __classPrivateFieldGet(this, _SkyVerticalTabMediaQueryService_currentSubject, "f").subscribe({
-            next: (breakpoints) => {
-                listener(breakpoints);
-            },
-        });
-    }
-    setBreakpointForWidth(width) {
-        let breakpoint;
-        if (this.isWidthWithinBreakpoint(width, SkyMediaBreakpoints.xs)) {
-            breakpoint = SkyMediaBreakpoints.xs;
-        }
-        else if (this.isWidthWithinBreakpoint(width, SkyMediaBreakpoints.sm)) {
-            breakpoint = SkyMediaBreakpoints.sm;
-        }
-        else if (this.isWidthWithinBreakpoint(width, SkyMediaBreakpoints.md)) {
-            breakpoint = SkyMediaBreakpoints.md;
-        }
-        else {
-            breakpoint = SkyMediaBreakpoints.lg;
-        }
-        this.current = breakpoint;
-        __classPrivateFieldGet(this, _SkyVerticalTabMediaQueryService_currentSubject, "f").next(this.current);
-    }
-    isWidthWithinBreakpoint(width, breakpoint) {
-        const xsBreakpointMaxPixels = 767;
-        const smBreakpointMinPixels = 768;
-        const smBreakpointMaxPixels = 991;
-        const mdBreakpointMinPixels = 992;
-        const mdBreakpointMaxPixels = 1199;
-        const lgBreakpointMinPixels = 1200;
-        switch (breakpoint) {
-            case SkyMediaBreakpoints.xs: {
-                return width <= xsBreakpointMaxPixels;
-            }
-            case SkyMediaBreakpoints.sm: {
-                return width >= smBreakpointMinPixels && width <= smBreakpointMaxPixels;
-            }
-            case SkyMediaBreakpoints.md: {
-                return width >= mdBreakpointMinPixels && width <= mdBreakpointMaxPixels;
-            }
-            default: {
-                return width >= lgBreakpointMinPixels;
-            }
-        }
-    }
-    destroy() {
-        __classPrivateFieldGet(this, _SkyVerticalTabMediaQueryService_currentSubject, "f").complete();
-    }
-}
-_SkyVerticalTabMediaQueryService_currentSubject = new WeakMap();
-SkyVerticalTabMediaQueryService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyVerticalTabMediaQueryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-SkyVerticalTabMediaQueryService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyVerticalTabMediaQueryService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyVerticalTabMediaQueryService, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return []; } });
-
-var _SkyVerticalTabsetAdapterService_renderer;
-class SkyVerticalTabsetAdapterService {
-    constructor(rendererFactory) {
-        _SkyVerticalTabsetAdapterService_renderer.set(this, void 0);
-        __classPrivateFieldSet(this, _SkyVerticalTabsetAdapterService_renderer, rendererFactory.createRenderer(undefined, null), "f");
-    }
-    getWidth(elementRef) {
-        return elementRef.nativeElement.clientWidth;
-    }
-    scrollToContentTop(element) {
-        element.nativeElement.scrollTop = 0;
-    }
-    setResponsiveClass(element, breakpoint) {
-        const nativeEl = element.nativeElement;
-        __classPrivateFieldGet(this, _SkyVerticalTabsetAdapterService_renderer, "f").removeClass(nativeEl, 'sky-responsive-container-xs');
-        __classPrivateFieldGet(this, _SkyVerticalTabsetAdapterService_renderer, "f").removeClass(nativeEl, 'sky-responsive-container-sm');
-        __classPrivateFieldGet(this, _SkyVerticalTabsetAdapterService_renderer, "f").removeClass(nativeEl, 'sky-responsive-container-md');
-        __classPrivateFieldGet(this, _SkyVerticalTabsetAdapterService_renderer, "f").removeClass(nativeEl, 'sky-responsive-container-lg');
-        let newClass;
-        switch (breakpoint) {
-            case SkyMediaBreakpoints.xs: {
-                newClass = 'sky-responsive-container-xs';
-                break;
-            }
-            case SkyMediaBreakpoints.sm: {
-                newClass = 'sky-responsive-container-sm';
-                break;
-            }
-            case SkyMediaBreakpoints.md: {
-                newClass = 'sky-responsive-container-md';
-                break;
-            }
-            default: {
-                newClass = 'sky-responsive-container-lg';
-                break;
-            }
-        }
-        __classPrivateFieldGet(this, _SkyVerticalTabsetAdapterService_renderer, "f").addClass(nativeEl, newClass);
-    }
-}
-_SkyVerticalTabsetAdapterService_renderer = new WeakMap();
-SkyVerticalTabsetAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyVerticalTabsetAdapterService, deps: [{ token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable });
-SkyVerticalTabsetAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyVerticalTabsetAdapterService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyVerticalTabsetAdapterService, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: i0.RendererFactory2 }]; } });
-
-var _SkyVerticalTabsetService_instances, _SkyVerticalTabsetService_contentAdded, _SkyVerticalTabsetService_tabsVisible, _SkyVerticalTabsetService_isMobile, _SkyVerticalTabsetService_mediaQueryService, _SkyVerticalTabsetService_destroyContent, _SkyVerticalTabsetService_moveContent, _SkyVerticalTabsetService_updateTabClicked;
-const VISIBLE_STATE = 'shown';
-const HIDDEN_STATE = 'void';
-/**
- * @internal
- */
-class SkyVerticalTabsetService {
-    constructor(mediaQueryService) {
-        _SkyVerticalTabsetService_instances.add(this);
-        this.activeIndex = undefined;
-        this.hidingTabs = new BehaviorSubject(false);
-        this.indexChanged = new ReplaySubject(1);
-        this.maintainTabContent = false;
-        this.showingTabs = new BehaviorSubject(false);
-        this.switchingMobile = new Subject();
-        this.tabs = [];
-        this.tabAdded = new Subject();
-        this.tabClicked = new ReplaySubject(1);
-        _SkyVerticalTabsetService_contentAdded.set(this, false);
-        _SkyVerticalTabsetService_tabsVisible.set(this, false);
-        _SkyVerticalTabsetService_isMobile.set(this, false);
-        _SkyVerticalTabsetService_mediaQueryService.set(this, void 0);
-        __classPrivateFieldSet(this, _SkyVerticalTabsetService_mediaQueryService, mediaQueryService, "f");
-        __classPrivateFieldGet(this, _SkyVerticalTabsetService_mediaQueryService, "f").subscribe((breakpoint) => {
-            const nowMobile = breakpoint === SkyMediaBreakpoints.xs;
-            if (nowMobile && !__classPrivateFieldGet(this, _SkyVerticalTabsetService_isMobile, "f")) {
-                // switching to mobile
-                this.switchingMobile.next(true);
-                if (!__classPrivateFieldGet(this, _SkyVerticalTabsetService_tabsVisible, "f")) {
-                    this.hidingTabs.next(true);
-                }
-            }
-            else if (!nowMobile && __classPrivateFieldGet(this, _SkyVerticalTabsetService_isMobile, "f")) {
-                // switching to widescreen
-                this.switchingMobile.next(false);
-                if (!__classPrivateFieldGet(this, _SkyVerticalTabsetService_tabsVisible, "f")) {
-                    this.showingTabs.next(true);
-                }
-            }
-            __classPrivateFieldSet(this, _SkyVerticalTabsetService_isMobile, nowMobile, "f");
-        });
-    }
-    addTab(tab) {
-        const index = this.tabs.length;
-        tab.index = index;
-        this.tabs.push(tab);
-        if (tab.active) {
-            this.activateTab(tab);
-        }
-        this.tabAdded.next(tab);
-    }
-    destroyTab(tab) {
-        var _a, _b, _c, _d;
-        const tabIndex = this.tabs.indexOf(tab);
-        if (tabIndex === -1) {
-            return;
-        }
-        if (this.maintainTabContent &&
-            tab.contentRendered &&
-            (
-            /* istanbul ignore next */
-            (_a = this.content) === null || _a === void 0 ? void 0 : _a.nativeElement.contains((_b = tab.tabContent) === null || _b === void 0 ? void 0 : _b.nativeElement))) {
-            (_c = this.content) === null || _c === void 0 ? void 0 : _c.nativeElement.removeChild((_d = tab.tabContent) === null || _d === void 0 ? void 0 : _d.nativeElement);
-        }
-        this.tabs.splice(tabIndex, 1);
-        // update tab indices
-        this.tabs.forEach((tabItem, index) => (tabItem.index = index));
-        if (tab.active) {
-            if (!this.maintainTabContent) {
-                __classPrivateFieldGet(this, _SkyVerticalTabsetService_instances, "m", _SkyVerticalTabsetService_destroyContent).call(this);
-            }
-            // Try selecting the next tab first, and if there's no next tab then
-            // try selecting the previous one.
-            const newActiveTab = this.tabs[tabIndex] || this.tabs[tabIndex - 1];
-            /*istanbul ignore else */
-            if (newActiveTab) {
-                newActiveTab.activateTab();
-            }
-        }
-    }
-    activateTab(tab) {
-        // deactivate active tab
-        const activeTab = this.tabs.find((t) => t.index === this.activeIndex);
-        if (activeTab && activeTab.index !== tab.index) {
-            activeTab.active = false;
-            activeTab.tabDeactivated();
-        }
-        this.activeIndex = tab.index;
-        this.tabClicked.next(true);
-        __classPrivateFieldGet(this, _SkyVerticalTabsetService_instances, "m", _SkyVerticalTabsetService_updateTabClicked).call(this);
-    }
-    activeTab() {
-        return this.tabs.find((t) => t.index === this.activeIndex);
-    }
-    isMobile() {
-        return __classPrivateFieldGet(this, _SkyVerticalTabsetService_isMobile, "f");
-    }
-    updateContent() {
-        if (!this.maintainTabContent) {
-            if (!__classPrivateFieldGet(this, _SkyVerticalTabsetService_contentAdded, "f") && this.contentVisible()) {
-                // content needs to be moved
-                __classPrivateFieldGet(this, _SkyVerticalTabsetService_instances, "m", _SkyVerticalTabsetService_moveContent).call(this);
-            }
-            else if (__classPrivateFieldGet(this, _SkyVerticalTabsetService_contentAdded, "f") && !this.contentVisible()) {
-                // content hidden
-                __classPrivateFieldSet(this, _SkyVerticalTabsetService_contentAdded, false, "f");
-            }
-        }
-        else {
-            this.tabs.forEach((tab) => {
-                var _a, _b;
-                if (!tab.contentRendered) {
-                    (_a = this.content) === null || _a === void 0 ? void 0 : _a.nativeElement.appendChild((_b = tab.tabContent) === null || _b === void 0 ? void 0 : _b.nativeElement);
-                    tab.contentRendered = true;
-                }
-            });
-        }
-    }
-    tabsVisible() {
-        return !this.isMobile() || __classPrivateFieldGet(this, _SkyVerticalTabsetService_tabsVisible, "f");
-    }
-    contentVisible() {
-        return !this.isMobile() || !__classPrivateFieldGet(this, _SkyVerticalTabsetService_tabsVisible, "f");
-    }
-    showTabs() {
-        __classPrivateFieldSet(this, _SkyVerticalTabsetService_tabsVisible, true, "f");
-        __classPrivateFieldSet(this, _SkyVerticalTabsetService_contentAdded, false, "f");
-        this.animationTabsVisibleState = VISIBLE_STATE;
-        this.animationContentVisibleState = HIDDEN_STATE;
-        this.showingTabs.next(true);
-    }
-}
-_SkyVerticalTabsetService_contentAdded = new WeakMap(), _SkyVerticalTabsetService_tabsVisible = new WeakMap(), _SkyVerticalTabsetService_isMobile = new WeakMap(), _SkyVerticalTabsetService_mediaQueryService = new WeakMap(), _SkyVerticalTabsetService_instances = new WeakSet(), _SkyVerticalTabsetService_destroyContent = function _SkyVerticalTabsetService_destroyContent() {
-    if (this.content) {
-        this.content.nativeElement.innerHTML = '';
-    }
-    this.content = undefined;
-}, _SkyVerticalTabsetService_moveContent = function _SkyVerticalTabsetService_moveContent() {
-    /* istanbul ignore else */
-    if (this.content && !__classPrivateFieldGet(this, _SkyVerticalTabsetService_contentAdded, "f")) {
-        const activeTab = this.activeTab();
-        const activeContent = activeTab ? activeTab.tabContent : undefined;
-        if (activeContent && activeTab && activeContent.nativeElement) {
-            this.content.nativeElement.appendChild(activeContent.nativeElement);
-            activeTab.contentRendered = true;
-            __classPrivateFieldSet(this, _SkyVerticalTabsetService_contentAdded, true, "f");
-        }
-    }
-}, _SkyVerticalTabsetService_updateTabClicked = function _SkyVerticalTabsetService_updateTabClicked() {
-    __classPrivateFieldSet(this, _SkyVerticalTabsetService_contentAdded, false, "f");
-    if (this.isMobile()) {
-        __classPrivateFieldSet(this, _SkyVerticalTabsetService_tabsVisible, false, "f");
-        this.animationContentVisibleState = VISIBLE_STATE;
-        this.animationTabsVisibleState = HIDDEN_STATE;
-        this.hidingTabs.next(true);
-    }
-    this.indexChanged.next(this.activeIndex);
-};
-SkyVerticalTabsetService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyVerticalTabsetService, deps: [{ token: i1.SkyMediaQueryService }], target: i0.ɵɵFactoryTarget.Injectable });
-SkyVerticalTabsetService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyVerticalTabsetService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyVerticalTabsetService, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: i1.SkyMediaQueryService }]; } });
-
-var _SkyTabIdService_instances, _SkyTabIdService_ids, _SkyTabIdService_ids$, _SkyTabIdService_idsObs, _SkyTabIdService_emitIds;
-/**
- * Tracks the element IDs for all tabs within a tablist.
- * @internal
- */
-class SkyTabIdService {
-    get ids() {
-        return __classPrivateFieldGet(this, _SkyTabIdService_idsObs, "f");
-    }
-    constructor() {
-        _SkyTabIdService_instances.add(this);
-        _SkyTabIdService_ids.set(this, void 0);
-        _SkyTabIdService_ids$.set(this, void 0);
-        _SkyTabIdService_idsObs.set(this, void 0);
-        __classPrivateFieldSet(this, _SkyTabIdService_ids, new Map(), "f");
-        __classPrivateFieldSet(this, _SkyTabIdService_ids$, new BehaviorSubject([]), "f");
-        __classPrivateFieldSet(this, _SkyTabIdService_idsObs, __classPrivateFieldGet(this, _SkyTabIdService_ids$, "f").asObservable(), "f");
-    }
-    /**
-     * Associates a tab's ID with its parent tablist.
-     * @param {string} id A unique ID for the tab's registration.
-     * @param {string} elementId The ID applied to the tab's element.
-     */
-    register(id, elementId) {
-        if (!__classPrivateFieldGet(this, _SkyTabIdService_ids, "f").has(id) || __classPrivateFieldGet(this, _SkyTabIdService_ids, "f").get(id) !== elementId) {
-            __classPrivateFieldGet(this, _SkyTabIdService_ids, "f").set(id, elementId);
-            __classPrivateFieldGet(this, _SkyTabIdService_instances, "m", _SkyTabIdService_emitIds).call(this);
-        }
-    }
-    /**
-     * Disassociates a tab's ID with its parent tablist.
-     * @param {string} id The ID used to register the tab.
-     */
-    unregister(id) {
-        if (__classPrivateFieldGet(this, _SkyTabIdService_ids, "f").has(id)) {
-            __classPrivateFieldGet(this, _SkyTabIdService_ids, "f").delete(id);
-            __classPrivateFieldGet(this, _SkyTabIdService_instances, "m", _SkyTabIdService_emitIds).call(this);
-        }
-    }
-}
-_SkyTabIdService_ids = new WeakMap(), _SkyTabIdService_ids$ = new WeakMap(), _SkyTabIdService_idsObs = new WeakMap(), _SkyTabIdService_instances = new WeakSet(), _SkyTabIdService_emitIds = function _SkyTabIdService_emitIds() {
-    __classPrivateFieldGet(this, _SkyTabIdService_ids$, "f").next(Array.from(__classPrivateFieldGet(this, _SkyTabIdService_ids, "f").values()));
-};
-SkyTabIdService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyTabIdService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-SkyTabIdService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyTabIdService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyTabIdService, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return []; } });
-
-var _SkyVerticalTabComponent_instances, _SkyVerticalTabComponent__ariaRole, _SkyVerticalTabComponent__contentRendered, _SkyVerticalTabComponent_tabIdOrDefault, _SkyVerticalTabComponent_defaultTabId, _SkyVerticalTabComponent_mobileSubscription, _SkyVerticalTabComponent_ngUnsubscribe, _SkyVerticalTabComponent_adapterService, _SkyVerticalTabComponent_changeRef, _SkyVerticalTabComponent_tabsetService, _SkyVerticalTabComponent_verticalTabMediaQueryService, _SkyVerticalTabComponent_tabIdSvc, _SkyVerticalTabComponent_updateBreakpointAndResponsiveClass;
-let nextId$2 = 0;
-class SkyVerticalTabComponent {
-    /**
-     * The 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"
-     * @deprecated Any other value than `tab` could lead to a poor user experience for users with assistive technology.
-     * In the next major version, this property will be automatically set to `tab`.
-     */
-    get ariaRole() {
-        return __classPrivateFieldGet(this, _SkyVerticalTabComponent__ariaRole, "f");
-    }
-    set ariaRole(value) {
-        __classPrivateFieldSet(this, _SkyVerticalTabComponent__ariaRole, value !== null && value !== void 0 ? value : 'tab', "f");
-    }
-    /**
-     * The ID for the tab.
-     * @deprecated Now that the vertical tabs provide aria labels automatically, this input is no longer necessary.
-     */
-    set tabId(value) {
-        var _a;
-        __classPrivateFieldSet(this, _SkyVerticalTabComponent_tabIdOrDefault, value || __classPrivateFieldGet(this, _SkyVerticalTabComponent_defaultTabId, "f"), "f");
-        (_a = __classPrivateFieldGet(this, _SkyVerticalTabComponent_tabIdSvc, "f")) === null || _a === void 0 ? void 0 : _a.register(__classPrivateFieldGet(this, _SkyVerticalTabComponent_defaultTabId, "f"), __classPrivateFieldGet(this, _SkyVerticalTabComponent_tabIdOrDefault, "f"));
-    }
-    get tabId() {
-        return __classPrivateFieldGet(this, _SkyVerticalTabComponent_tabIdOrDefault, "f");
-    }
-    set contentRendered(value) {
-        __classPrivateFieldSet(this, _SkyVerticalTabComponent__contentRendered, value, "f");
-        /* istanbul ignore else */
-        if (__classPrivateFieldGet(this, _SkyVerticalTabComponent__contentRendered, "f")) {
-            // NOTE: Wrapped in a setTimeout here to ensure that everything has completed rendering.
-            setTimeout(() => {
-                if (this.tabContent) {
-                    __classPrivateFieldGet(this, _SkyVerticalTabComponent_instances, "m", _SkyVerticalTabComponent_updateBreakpointAndResponsiveClass).call(this);
-                }
-            });
-        }
-    }
-    get contentRendered() {
-        return __classPrivateFieldGet(this, _SkyVerticalTabComponent__contentRendered, "f");
-    }
-    constructor(adapterService, changeRef, tabsetService, verticalTabMediaQueryService, tabIdSvc) {
-        _SkyVerticalTabComponent_instances.add(this);
-        /**
-         * Whether the tab is active when the tabset loads.
-         */
-        this.active = false;
-        /**
-         * Whether to disable the tab.
-         */
-        this.disabled = false;
-        /**
-         * 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.
-         */
-        this.errorIndicator = false;
-        this.isMobile = false;
-        _SkyVerticalTabComponent__ariaRole.set(this, 'tab');
-        _SkyVerticalTabComponent__contentRendered.set(this, false);
-        _SkyVerticalTabComponent_tabIdOrDefault.set(this, void 0);
-        _SkyVerticalTabComponent_defaultTabId.set(this, void 0);
-        _SkyVerticalTabComponent_mobileSubscription.set(this, new Subject());
-        _SkyVerticalTabComponent_ngUnsubscribe.set(this, new Subject());
-        _SkyVerticalTabComponent_adapterService.set(this, void 0);
-        _SkyVerticalTabComponent_changeRef.set(this, void 0);
-        _SkyVerticalTabComponent_tabsetService.set(this, void 0);
-        _SkyVerticalTabComponent_verticalTabMediaQueryService.set(this, void 0);
-        _SkyVerticalTabComponent_tabIdSvc.set(this, void 0);
-        __classPrivateFieldSet(this, _SkyVerticalTabComponent_adapterService, adapterService, "f");
-        __classPrivateFieldSet(this, _SkyVerticalTabComponent_changeRef, changeRef, "f");
-        __classPrivateFieldSet(this, _SkyVerticalTabComponent_tabsetService, tabsetService, "f");
-        __classPrivateFieldSet(this, _SkyVerticalTabComponent_verticalTabMediaQueryService, verticalTabMediaQueryService, "f");
-        __classPrivateFieldSet(this, _SkyVerticalTabComponent_tabIdSvc, tabIdSvc, "f");
-        __classPrivateFieldSet(this, _SkyVerticalTabComponent_tabIdOrDefault, __classPrivateFieldSet(this, _SkyVerticalTabComponent_defaultTabId, `sky-vertical-tab-${++nextId$2}`, "f"), "f");
-        this.tabId = __classPrivateFieldGet(this, _SkyVerticalTabComponent_defaultTabId, "f");
-    }
-    ngOnInit() {
-        this.isMobile = __classPrivateFieldGet(this, _SkyVerticalTabComponent_tabsetService, "f").isMobile();
-        __classPrivateFieldGet(this, _SkyVerticalTabComponent_changeRef, "f").markForCheck();
-        __classPrivateFieldGet(this, _SkyVerticalTabComponent_tabsetService, "f").switchingMobile.subscribe((mobile) => {
-            this.isMobile = mobile;
-            __classPrivateFieldGet(this, _SkyVerticalTabComponent_changeRef, "f").markForCheck();
-        });
-        // Update the breakpoint and responsive class here just as a sanity check since we can not
-        // watch for element resizing.
-        __classPrivateFieldGet(this, _SkyVerticalTabComponent_tabsetService, "f").indexChanged
-            .pipe(takeUntil(__classPrivateFieldGet(this, _SkyVerticalTabComponent_ngUnsubscribe, "f")))
-            .subscribe((index) => {
-            if (this.index === index && this.contentRendered) {
-                if (this.tabContent) {
-                    __classPrivateFieldGet(this, _SkyVerticalTabComponent_instances, "m", _SkyVerticalTabComponent_updateBreakpointAndResponsiveClass).call(this);
-                }
-            }
-        });
-        __classPrivateFieldGet(this, _SkyVerticalTabComponent_tabsetService, "f").addTab(this);
-    }
-    ngOnDestroy() {
-        var _a;
-        (_a = __classPrivateFieldGet(this, _SkyVerticalTabComponent_tabIdSvc, "f")) === null || _a === void 0 ? void 0 : _a.unregister(__classPrivateFieldGet(this, _SkyVerticalTabComponent_defaultTabId, "f"));
-        __classPrivateFieldGet(this, _SkyVerticalTabComponent_mobileSubscription, "f").unsubscribe();
-        __classPrivateFieldGet(this, _SkyVerticalTabComponent_ngUnsubscribe, "f").next();
-        __classPrivateFieldGet(this, _SkyVerticalTabComponent_ngUnsubscribe, "f").complete();
-        __classPrivateFieldGet(this, _SkyVerticalTabComponent_tabsetService, "f").destroyTab(this);
-    }
-    tabIndex() {
-        if (!this.disabled) {
-            return 0;
-        }
-        else {
-            return -1;
-        }
-    }
-    activateTab() {
-        if (!this.disabled) {
-            this.active = true;
-            __classPrivateFieldGet(this, _SkyVerticalTabComponent_tabsetService, "f").activateTab(this);
-            __classPrivateFieldGet(this, _SkyVerticalTabComponent_changeRef, "f").markForCheck();
-        }
-    }
-    onTabButtonKeyUp(event) {
-        /*istanbul ignore else */
-        if (event.key) {
-            switch (event.key.toUpperCase()) {
-                case ' ':
-                case 'ENTER':
-                    this.activateTab();
-                    event.stopPropagation();
-                    break;
-                /* istanbul ignore next */
-                default:
-                    break;
-            }
-        }
-    }
-    onWindowResize() {
-        if (this.tabContent) {
-            __classPrivateFieldGet(this, _SkyVerticalTabComponent_instances, "m", _SkyVerticalTabComponent_updateBreakpointAndResponsiveClass).call(this);
-        }
-    }
-    tabDeactivated() {
-        __classPrivateFieldGet(this, _SkyVerticalTabComponent_changeRef, "f").markForCheck();
-    }
-}
-_SkyVerticalTabComponent__ariaRole = new WeakMap(), _SkyVerticalTabComponent__contentRendered = new WeakMap(), _SkyVerticalTabComponent_tabIdOrDefault = new WeakMap(), _SkyVerticalTabComponent_defaultTabId = new WeakMap(), _SkyVerticalTabComponent_mobileSubscription = new WeakMap(), _SkyVerticalTabComponent_ngUnsubscribe = new WeakMap(), _SkyVerticalTabComponent_adapterService = new WeakMap(), _SkyVerticalTabComponent_changeRef = new WeakMap(), _SkyVerticalTabComponent_tabsetService = new WeakMap(), _SkyVerticalTabComponent_verticalTabMediaQueryService = new WeakMap(), _SkyVerticalTabComponent_tabIdSvc = new WeakMap(), _SkyVerticalTabComponent_instances = new WeakSet(), _SkyVerticalTabComponent_updateBreakpointAndResponsiveClass = function _SkyVerticalTabComponent_updateBreakpointAndResponsiveClass() {
-    if (this.tabContent) {
-        const width = __classPrivateFieldGet(this, _SkyVerticalTabComponent_adapterService, "f").getWidth(this.tabContent);
-        __classPrivateFieldGet(this, _SkyVerticalTabComponent_verticalTabMediaQueryService, "f").setBreakpointForWidth(width);
-        const newBreakpoint = __classPrivateFieldGet(this, _SkyVerticalTabComponent_verticalTabMediaQueryService, "f").current;
-        if (newBreakpoint) {
-            __classPrivateFieldGet(this, _SkyVerticalTabComponent_adapterService, "f").setResponsiveClass(this.tabContent, newBreakpoint);
-        }
-        __classPrivateFieldGet(this, _SkyVerticalTabComponent_changeRef, "f").markForCheck();
-    }
-};
-SkyVerticalTabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyVerticalTabComponent, deps: [{ token: SkyVerticalTabsetAdapterService }, { token: i0.ChangeDetectorRef }, { token: SkyVerticalTabsetService }, { token: SkyVerticalTabMediaQueryService }, { token: SkyTabIdService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-SkyVerticalTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SkyVerticalTabComponent, selector: "sky-vertical-tab", inputs: { active: "active", ariaControls: "ariaControls", ariaRole: "ariaRole", disabled: "disabled", errorIndicator: "errorIndicator", tabHeaderCount: "tabHeaderCount", tabHeading: "tabHeading", showTabRightArrow: "showTabRightArrow", tabId: "tabId" }, host: { listeners: { "window:resize": "onWindowResize()" } }, providers: [
-        SkyVerticalTabMediaQueryService,
-        {
-            provide: SkyMediaQueryService,
-            useExisting: SkyVerticalTabMediaQueryService,
-        },
-    ], viewQueries: [{ propertyName: "tabContent", first: true, predicate: ["tabContentWrapper"], descendants: true }], ngImport: i0, template: "<a\n  class=\"sky-vertical-tab\"\n  [attr.aria-controls]=\"isMobile ? null : ariaControls || tabContentPane.id\"\n  [attr.aria-selected]=\"active\"\n  [attr.id]=\"tabId\"\n  [attr.role]=\"isMobile ? undefined : ariaRole\"\n  [ngClass]=\"{\n    'sky-vertical-tab-active': active,\n    'sky-vertical-tab-disabled': disabled,\n    'sky-font-deemphasized': disabled,\n    'sky-deemphasized': disabled\n  }\"\n  [tabIndex]=\"tabIndex()\"\n  (click)=\"activateTab()\"\n  (keyup)=\"onTabButtonKeyUp($event)\"\n>\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      >\n        ({{ tabHeaderCount }})\n      </span>\n    </div>\n    <sky-status-indicator\n      *ngIf=\"errorIndicator\"\n      class=\"sky-vertical-tab-heading-error\"\n      descriptionType=\"error\"\n      indicatorType=\"danger\"\n    ></sky-status-indicator>\n    <sky-icon\n      *ngIf=\"isMobile && showTabRightArrow\"\n      class=\"sky-vertical-tab-right-arrow\"\n      icon=\"chevron-right\"\n    >\n    </sky-icon>\n  </div>\n</a>\n\n<div #tabContentWrapper>\n  <div\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    #tabContentPane\n  >\n    <ng-content></ng-content>\n\n    <div></div>\n  </div>\n</div>\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-visible{outline:thin dotted;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}.sky-vertical-tab-right-arrow{padding:3px 10px 0 0;color:#cdcfd2}:host-context(.sky-theme-modern) .sky-vertical-tab{color:#686c73;cursor:pointer;padding:10px 0 10px 10px;margin:10px 0 20px 10px}: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}:host-context(.sky-theme-modern) .sky-vertical-tab:not(:active):focus-visible{outline:solid 2px #1870B8;outline-offset:-2px;box-shadow:0 1px 8px #0000004d}:host-context(.sky-theme-modern) .sky-vertical-tab:focus:active:hover{outline:none;background:none}:host-context(.sky-theme-modern) .sky-vertical-tab:active{border-left:3px solid #00b4f1;color:#212327;padding-left:7px}:host-context(.sky-theme-modern) .sky-vertical-tab .sky-vertical-tab-heading-error{padding-left:10px;position:relative;top:-2px}:host-context(.sky-theme-modern) .sky-vertical-tab-active{background:none;color:#212327;padding-left:7px;border-left:3px solid #1870B8}.sky-theme-modern .sky-vertical-tab{color:#686c73;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{color:#212327;background-color:transparent;padding-left:9px;border-left:1px solid #00b4f1}.sky-theme-modern .sky-vertical-tab:not(:active):focus-visible{outline:solid 2px #1870B8;outline-offset:-2px;box-shadow:0 1px 8px #0000004d}.sky-theme-modern .sky-vertical-tab:focus:active:hover{outline:none;background:none}.sky-theme-modern .sky-vertical-tab:active{border-left:3px solid #00b4f1;color:#212327;padding-left:7px}.sky-theme-modern .sky-vertical-tab .sky-vertical-tab-heading-error{padding-left:10px;position:relative;top:-2px}.sky-theme-modern .sky-vertical-tab-active{background:none;color:#212327;padding-left:7px;border-left:3px solid #1870B8}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i1.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "component", type: i6.λ10, selector: "sky-status-indicator", inputs: ["indicatorType", "descriptionType", "customDescription"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyVerticalTabComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'sky-vertical-tab', providers: [
-                        SkyVerticalTabMediaQueryService,
-                        {
-                            provide: SkyMediaQueryService,
-                            useExisting: SkyVerticalTabMediaQueryService,
-                        },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<a\n  class=\"sky-vertical-tab\"\n  [attr.aria-controls]=\"isMobile ? null : ariaControls || tabContentPane.id\"\n  [attr.aria-selected]=\"active\"\n  [attr.id]=\"tabId\"\n  [attr.role]=\"isMobile ? undefined : ariaRole\"\n  [ngClass]=\"{\n    'sky-vertical-tab-active': active,\n    'sky-vertical-tab-disabled': disabled,\n    'sky-font-deemphasized': disabled,\n    'sky-deemphasized': disabled\n  }\"\n  [tabIndex]=\"tabIndex()\"\n  (click)=\"activateTab()\"\n  (keyup)=\"onTabButtonKeyUp($event)\"\n>\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      >\n        ({{ tabHeaderCount }})\n      </span>\n    </div>\n    <sky-status-indicator\n      *ngIf=\"errorIndicator\"\n      class=\"sky-vertical-tab-heading-error\"\n      descriptionType=\"error\"\n      indicatorType=\"danger\"\n    ></sky-status-indicator>\n    <sky-icon\n      *ngIf=\"isMobile && showTabRightArrow\"\n      class=\"sky-vertical-tab-right-arrow\"\n      icon=\"chevron-right\"\n    >\n    </sky-icon>\n  </div>\n</a>\n\n<div #tabContentWrapper>\n  <div\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    #tabContentPane\n  >\n    <ng-content></ng-content>\n\n    <div></div>\n  </div>\n</div>\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-visible{outline:thin dotted;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}.sky-vertical-tab-right-arrow{padding:3px 10px 0 0;color:#cdcfd2}:host-context(.sky-theme-modern) .sky-vertical-tab{color:#686c73;cursor:pointer;padding:10px 0 10px 10px;margin:10px 0 20px 10px}: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}:host-context(.sky-theme-modern) .sky-vertical-tab:not(:active):focus-visible{outline:solid 2px #1870B8;outline-offset:-2px;box-shadow:0 1px 8px #0000004d}:host-context(.sky-theme-modern) .sky-vertical-tab:focus:active:hover{outline:none;background:none}:host-context(.sky-theme-modern) .sky-vertical-tab:active{border-left:3px solid #00b4f1;color:#212327;padding-left:7px}:host-context(.sky-theme-modern) .sky-vertical-tab .sky-vertical-tab-heading-error{padding-left:10px;position:relative;top:-2px}:host-context(.sky-theme-modern) .sky-vertical-tab-active{background:none;color:#212327;padding-left:7px;border-left:3px solid #1870B8}.sky-theme-modern .sky-vertical-tab{color:#686c73;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{color:#212327;background-color:transparent;padding-left:9px;border-left:1px solid #00b4f1}.sky-theme-modern .sky-vertical-tab:not(:active):focus-visible{outline:solid 2px #1870B8;outline-offset:-2px;box-shadow:0 1px 8px #0000004d}.sky-theme-modern .sky-vertical-tab:focus:active:hover{outline:none;background:none}.sky-theme-modern .sky-vertical-tab:active{border-left:3px solid #00b4f1;color:#212327;padding-left:7px}.sky-theme-modern .sky-vertical-tab .sky-vertical-tab-heading-error{padding-left:10px;position:relative;top:-2px}.sky-theme-modern .sky-vertical-tab-active{background:none;color:#212327;padding-left:7px;border-left:3px solid #1870B8}\n"] }]
-        }], ctorParameters: function () {
-        return [{ type: SkyVerticalTabsetAdapterService }, { type: i0.ChangeDetectorRef }, { type: SkyVerticalTabsetService }, { type: SkyVerticalTabMediaQueryService }, { type: SkyTabIdService, decorators: [{
-                        type: Optional
-                    }] }];
-    }, propDecorators: { active: [{
-                type: Input
-            }], ariaControls: [{
-                type: Input
-            }], ariaRole: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], errorIndicator: [{
-                type: Input
-            }], tabHeaderCount: [{
-                type: Input
-            }], tabHeading: [{
-                type: Input
-            }], showTabRightArrow: [{
-                type: Input
-            }], tabId: [{
-                type: Input
-            }], tabContent: [{
-                type: ViewChild,
-                args: ['tabContentWrapper']
-            }], onWindowResize: [{
-                type: HostListener,
-                args: ['window:resize']
-            }] } });
-
-var _SkyVerticalTabsetGroupComponent_instances, _SkyVerticalTabsetGroupComponent_ngUnsubscribe, _SkyVerticalTabsetGroupComponent_tabService, _SkyVerticalTabsetGroupComponent_changeRef, _SkyVerticalTabsetGroupComponent__disabled, _SkyVerticalTabsetGroupComponent__open, _SkyVerticalTabsetGroupComponent_updateSlideDirection;
-class SkyVerticalTabsetGroupComponent {
-    /**
-     * Whether to disable the ability to expand and collapse the group.
-     * @default false
-     */
-    set disabled(value) {
-        __classPrivateFieldSet(this, _SkyVerticalTabsetGroupComponent__disabled, value, "f");
-        __classPrivateFieldGet(this, _SkyVerticalTabsetGroupComponent_instances, "m", _SkyVerticalTabsetGroupComponent_updateSlideDirection).call(this, false);
-    }
-    get disabled() {
-        return __classPrivateFieldGet(this, _SkyVerticalTabsetGroupComponent__disabled, "f");
-    }
-    /**
-     * Whether the collapsible group is expanded.
-     * @default false
-     */
-    set open(value) {
-        __classPrivateFieldSet(this, _SkyVerticalTabsetGroupComponent__open, value, "f");
-        __classPrivateFieldGet(this, _SkyVerticalTabsetGroupComponent_instances, "m", _SkyVerticalTabsetGroupComponent_updateSlideDirection).call(this, false);
-    }
-    get open() {
-        return __classPrivateFieldGet(this, _SkyVerticalTabsetGroupComponent__open, "f");
-    }
-    constructor(tabService, changeRef) {
-        _SkyVerticalTabsetGroupComponent_instances.add(this);
-        this.animationDisabled = false;
-        this.slideDirection = 'up';
-        _SkyVerticalTabsetGroupComponent_ngUnsubscribe.set(this, new Subject());
-        _SkyVerticalTabsetGroupComponent_tabService.set(this, void 0);
-        _SkyVerticalTabsetGroupComponent_changeRef.set(this, void 0);
-        _SkyVerticalTabsetGroupComponent__disabled.set(this, void 0);
-        _SkyVerticalTabsetGroupComponent__open.set(this, void 0);
-        this.tabClicked = () => {
-            __classPrivateFieldGet(this, _SkyVerticalTabsetGroupComponent_changeRef, "f").markForCheck();
-        };
-        this.tabsHidden = () => {
-            // Angular will sometimes place the animation into the "void" state when tabs are hidden. Update our internal variable to reflect that.
-            this.slideDirection = 'void';
-            __classPrivateFieldGet(this, _SkyVerticalTabsetGroupComponent_changeRef, "f").markForCheck();
-        };
-        this.tabsShown = () => {
-            // Set the animation back up so that the "void" state is returned to where it was prior to the tabs being hidden.
-            // This will be instantaneous due to there not being a "void -> *" state on the slide animation.
-            __classPrivateFieldGet(this, _SkyVerticalTabsetGroupComponent_instances, "m", _SkyVerticalTabsetGroupComponent_updateSlideDirection).call(this, true);
-            __classPrivateFieldGet(this, _SkyVerticalTabsetGroupComponent_changeRef, "f").markForCheck();
-        };
-        __classPrivateFieldSet(this, _SkyVerticalTabsetGroupComponent_tabService, tabService, "f");
-        __classPrivateFieldSet(this, _SkyVerticalTabsetGroupComponent_changeRef, changeRef, "f");
-    }
-    ngOnInit() {
-        __classPrivateFieldGet(this, _SkyVerticalTabsetGroupComponent_tabService, "f").hidingTabs
-            .pipe(takeUntil(__classPrivateFieldGet(this, _SkyVerticalTabsetGroupComponent_ngUnsubscribe, "f")))
-            .subscribe(this.tabsHidden);
-        __classPrivateFieldGet(this, _SkyVerticalTabsetGroupComponent_tabService, "f").showingTabs
-            .pipe(takeUntil(__classPrivateFieldGet(this, _SkyVerticalTabsetGroupComponent_ngUnsubscribe, "f")))
-            .subscribe(this.tabsShown);
-        __classPrivateFieldGet(this, _SkyVerticalTabsetGroupComponent_tabService, "f").tabClicked
-            .pipe(takeUntil(__classPrivateFieldGet(this, _SkyVerticalTabsetGroupComponent_ngUnsubscribe, "f")))
-            .subscribe(this.tabClicked);
-    }
-    ngOnDestroy() {
-        __classPrivateFieldGet(this, _SkyVerticalTabsetGroupComponent_ngUnsubscribe, "f").next();
-        __classPrivateFieldGet(this, _SkyVerticalTabsetGroupComponent_ngUnsubscribe, "f").complete();
-    }
-    updateSlideDirection(event) {
-        this.slideDirection = event.toState;
-    }
-    toggleMenuOpen() {
-        if (!this.disabled) {
-            this.open = !this.open;
-        }
-        __classPrivateFieldGet(this, _SkyVerticalTabsetGroupComponent_instances, "m", _SkyVerticalTabsetGroupComponent_updateSlideDirection).call(this, true);
-        __classPrivateFieldGet(this, _SkyVerticalTabsetGroupComponent_changeRef, "f").markForCheck();
-    }
-    subMenuOpen() {
-        return !!this.tabs && this.tabs.find((t) => !!t.active) !== undefined;
-    }
-}
-_SkyVerticalTabsetGroupComponent_ngUnsubscribe = new WeakMap(), _SkyVerticalTabsetGroupComponent_tabService = new WeakMap(), _SkyVerticalTabsetGroupComponent_changeRef = new WeakMap(), _SkyVerticalTabsetGroupComponent__disabled = new WeakMap(), _SkyVerticalTabsetGroupComponent__open = new WeakMap(), _SkyVerticalTabsetGroupComponent_instances = new WeakSet(), _SkyVerticalTabsetGroupComponent_updateSlideDirection = function _SkyVerticalTabsetGroupComponent_updateSlideDirection(animate) {
-    this.animationDisabled = !animate;
-    this.slideDirection = this.open && !this.disabled ? 'down' : 'up';
-};
-SkyVerticalTabsetGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyVerticalTabsetGroupComponent, deps: [{ token: SkyVerticalTabsetService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-SkyVerticalTabsetGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SkyVerticalTabsetGroupComponent, selector: "sky-vertical-tabset-group", inputs: { disabled: "disabled", groupHeading: "groupHeading", open: "open" }, queries: [{ propertyName: "tabs", predicate: SkyVerticalTabComponent }], ngImport: i0, template: "<div class=\"sky-vertical-tabset-group\">\n  <!-- [ngClass] includes font classes for both modern and default styles -->\n  <div\n    class=\"sky-vertical-tabset-group-header\"\n    [ngClass]=\"{\n      'sky-vertical-tabset-group-header-sub-open sky-font-emphasized':\n        subMenuOpen(),\n      'sky-font-deemphasized': disabled,\n      'sky-deemphasized': disabled,\n      'sky-vertical-tabset-disabled': disabled\n    }\"\n    [tabIndex]=\"-1\"\n  >\n    <button\n      class=\"sky-padding-even-default\"\n      type=\"button\"\n      skyId\n      [attr.aria-controls]=\"groupContent.id\"\n      [attr.aria-expanded]=\"!disabled && open\"\n      (click)=\"toggleMenuOpen()\"\n      #groupHeadingButton\n    >\n      {{ groupHeading }}\n      <sky-expansion-indicator\n        class=\"sky-vertical-tabset-group-expansion-indicator\"\n        [direction]=\"!disabled && open ? 'up' : 'down'\"\n      >\n      </sky-expansion-indicator>\n    </button>\n  </div>\n  <div\n    class=\"sky-vertical-tabset-group-content\"\n    skyId\n    [attr.labelledby]=\"groupHeadingButton.id\"\n    [@.disabled]=\"animationDisabled\"\n    [@skyAnimationSlide]=\"slideDirection\"\n    (@skyAnimationSlide.done)=\"updateSlideDirection($event)\"\n    #groupContent\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 button{cursor:pointer;display:flex;justify-content:space-between;border:none;width:100%;text-align:left;background:none}.sky-vertical-tabset-group-content{overflow:hidden;border-top:1px solid #e2e3e4}:host ::ng-deep .sky-vertical-tabset-group-expansion-indicator>button{font-size:14px!important}.sky-vertical-tabset-disabled{cursor:not-allowed;pointer-events:none}:host-context(.sky-theme-modern) .sky-vertical-tabset-group{border:none;margin:10px 0}:host-context(.sky-theme-modern) .sky-vertical-tabset-group-content{border:none;padding-left:25px}:host-context(.sky-theme-modern) .sky-vertical-tabset-group-header{position:relative}:host-context(.sky-theme-modern) .sky-vertical-tabset-group-expansion-indicator{position:absolute;top:6px;right:5px}.sky-theme-modern .sky-vertical-tabset-group{border:none;margin:10px 0}.sky-theme-modern .sky-vertical-tabset-group-content{border:none;padding-left:25px}.sky-theme-modern .sky-vertical-tabset-group-header{position:relative}.sky-theme-modern .sky-vertical-tabset-group-expansion-indicator{position:absolute;top:6px;right:5px}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "component", type: i6.λ15, selector: "sky-expansion-indicator", inputs: ["direction"] }], animations: [skyAnimationSlide], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyVerticalTabsetGroupComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'sky-vertical-tabset-group', changeDetection: ChangeDetectionStrategy.OnPush, animations: [skyAnimationSlide], template: "<div class=\"sky-vertical-tabset-group\">\n  <!-- [ngClass] includes font classes for both modern and default styles -->\n  <div\n    class=\"sky-vertical-tabset-group-header\"\n    [ngClass]=\"{\n      'sky-vertical-tabset-group-header-sub-open sky-font-emphasized':\n        subMenuOpen(),\n      'sky-font-deemphasized': disabled,\n      'sky-deemphasized': disabled,\n      'sky-vertical-tabset-disabled': disabled\n    }\"\n    [tabIndex]=\"-1\"\n  >\n    <button\n      class=\"sky-padding-even-default\"\n      type=\"button\"\n      skyId\n      [attr.aria-controls]=\"groupContent.id\"\n      [attr.aria-expanded]=\"!disabled && open\"\n      (click)=\"toggleMenuOpen()\"\n      #groupHeadingButton\n    >\n      {{ groupHeading }}\n      <sky-expansion-indicator\n        class=\"sky-vertical-tabset-group-expansion-indicator\"\n        [direction]=\"!disabled && open ? 'up' : 'down'\"\n      >\n      </sky-expansion-indicator>\n    </button>\n  </div>\n  <div\n    class=\"sky-vertical-tabset-group-content\"\n    skyId\n    [attr.labelledby]=\"groupHeadingButton.id\"\n    [@.disabled]=\"animationDisabled\"\n    [@skyAnimationSlide]=\"slideDirection\"\n    (@skyAnimationSlide.done)=\"updateSlideDirection($event)\"\n    #groupContent\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 button{cursor:pointer;display:flex;justify-content:space-between;border:none;width:100%;text-align:left;background:none}.sky-vertical-tabset-group-content{overflow:hidden;border-top:1px solid #e2e3e4}:host ::ng-deep .sky-vertical-tabset-group-expansion-indicator>button{font-size:14px!important}.sky-vertical-tabset-disabled{cursor:not-allowed;pointer-events:none}:host-context(.sky-theme-modern) .sky-vertical-tabset-group{border:none;margin:10px 0}:host-context(.sky-theme-modern) .sky-vertical-tabset-group-content{border:none;padding-left:25px}:host-context(.sky-theme-modern) .sky-vertical-tabset-group-header{position:relative}:host-context(.sky-theme-modern) .sky-vertical-tabset-group-expansion-indicator{position:absolute;top:6px;right:5px}.sky-theme-modern .sky-vertical-tabset-group{border:none;margin:10px 0}.sky-theme-modern .sky-vertical-tabset-group-content{border:none;padding-left:25px}.sky-theme-modern .sky-vertical-tabset-group-header{position:relative}.sky-theme-modern .sky-vertical-tabset-group-expansion-indicator{position:absolute;top:6px;right:5px}\n"] }]
-        }], ctorParameters: function () { return [{ type: SkyVerticalTabsetService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { disabled: [{
-                type: Input
-            }], groupHeading: [{
-                type: Input
-            }], open: [{
-                type: Input
-            }], tabs: [{
-                type: ContentChildren,
-                args: [SkyVerticalTabComponent]
-            }] } });
-
-var _SkyVerticalTabsetComponent_ngUnsubscribe, _SkyVerticalTabsetComponent__ariaRole, _SkyVerticalTabsetComponent_resources, _SkyVerticalTabsetComponent_changeRef, _SkyVerticalTabsetComponent_tabIdSvc;
-class SkyVerticalTabsetComponent {
-    /**
-     * The 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"
-     * @deprecated Any other value than `tablist` could lead to a poor user experience for users with assistive technology.
-     * In the next major version, this property will be automatically set to `tablist`.
-     */
-    get ariaRole() {
-        return __classPrivateFieldGet(this, _SkyVerticalTabsetComponent__ariaRole, "f");
-    }
-    set ariaRole(value) {
-        __classPrivateFieldSet(this, _SkyVerticalTabsetComponent__ariaRole, value !== null && value !== void 0 ? value : 'tablist', "f");
-    }
-    constructor(adapterService, tabService, resources, changeRef, tabIdSvc) {
-        this.adapterService = adapterService;
-        this.tabService = tabService;
-        /**
-         * Whether the vertical tabset loads tab content during initialization so that it
-         * displays content without moving around elements in the content container.
-         * @default false
-         */
-        this.maintainTabContent = false;
-        /**
-         * 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.
-         */
-        this.activeChange = new EventEmitter();
-        this.isMobile = false;
-        _SkyVerticalTabsetComponent_ngUnsubscribe.set(this, new Subject());
-        _SkyVerticalTabsetComponent__ariaRole.set(this, 'tablist');
-        _SkyVerticalTabsetComponent_resources.set(this, void 0);
-        _SkyVerticalTabsetComponent_changeRef.set(this, void 0);
-        _SkyVerticalTabsetComponent_tabIdSvc.set(this, void 0);
-        __classPrivateFieldSet(this, _SkyVerticalTabsetComponent_resources, resources, "f");
-        __classPrivateFieldSet(this, _SkyVerticalTabsetComponent_changeRef, changeRef, "f");
-        __classPrivateFieldSet(this, _SkyVerticalTabsetComponent_tabIdSvc, tabIdSvc, "f");
-        __classPrivateFieldGet(this, _SkyVerticalTabsetComponent_tabIdSvc, "f").ids.pipe(takeUntil(__classPrivateFieldGet(this, _SkyVerticalTabsetComponent_ngUnsubscribe, "f"))).subscribe((ids) => {
-            this.ariaOwns = ids.join(' ') || undefined;
-            __classPrivateFieldGet(this, _SkyVerticalTabsetComponent_changeRef, "f").markForCheck();
-        });
-    }
-    ngOnInit() {
-        this.tabService.maintainTabContent = this.maintainTabContent;
-        this.tabService.indexChanged
-            .pipe(takeUntil(__classPrivateFieldGet(this, _SkyVerticalTabsetComponent_ngUnsubscribe, "f")))
-            .subscribe((index) => {
-            this.activeChange.emit(index);
-            if (this.contentWrapper) {
-                this.adapterService.scrollToContentTop(this.contentWrapper);
-            }
-            __classPrivateFieldGet(this, _SkyVerticalTabsetComponent_changeRef, "f").markForCheck();
-        });
-        this.tabService.switchingMobile
-            .pipe(takeUntil(__classPrivateFieldGet(this, _SkyVerticalTabsetComponent_ngUnsubscribe, "f")))
-            .subscribe((mobile) => {
-            this.isMobile = mobile;
-            __classPrivateFieldGet(this, _SkyVerticalTabsetComponent_changeRef, "f").markForCheck();
-        });
-        if (this.tabService.isMobile()) {
-            this.isMobile = true;
-            this.tabService.animationContentVisibleState = VISIBLE_STATE;
-            __classPrivateFieldGet(this, _SkyVerticalTabsetComponent_changeRef, "f").markForCheck();
-        }
-        if (!this.showTabsText) {
-            __classPrivateFieldGet(this, _SkyVerticalTabsetComponent_resources, "f")
-                .getString('skyux_vertical_tabs_show_tabs_text')
-                .pipe(take(1))
-                .subscribe((resource) => {
-                /* sanity check */
-                /* istanbul ignore else */
-                if (!this.showTabsText) {
-                    this.showTabsText = resource;
-                }
-            });
-        }
-    }
-    ngAfterViewChecked() {
-        this.tabService.content = this.content;
-        this.tabService.updateContent();
-    }
-    ngOnDestroy() {
-        __classPrivateFieldGet(this, _SkyVerticalTabsetComponent_ngUnsubscribe, "f").next();
-        __classPrivateFieldGet(this, _SkyVerticalTabsetComponent_ngUnsubscribe, "f").complete();
-    }
-}
-_SkyVerticalTabsetComponent_ngUnsubscribe = new WeakMap(), _SkyVerticalTabsetComponent__ariaRole = new WeakMap(), _SkyVerticalTabsetComponent_resources = new WeakMap(), _SkyVerticalTabsetComponent_changeRef = new WeakMap(), _SkyVerticalTabsetComponent_tabIdSvc = new WeakMap();
-SkyVerticalTabsetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyVerticalTabsetComponent, deps: [{ token: SkyVerticalTabsetAdapterService }, { token: SkyVerticalTabsetService }, { token: i3.SkyLibResourcesService }, { token: i0.ChangeDetectorRef }, { token: SkyTabIdService }], target: i0.ɵɵFactoryTarget.Component });
-SkyVerticalTabsetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SkyVerticalTabsetComponent, selector: "sky-vertical-tabset", inputs: { showTabsText: "showTabsText", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", ariaRole: "ariaRole", maintainTabContent: "maintainTabContent" }, outputs: { activeChange: "activeChange" }, providers: [SkyTabIdService, SkyVerticalTabsetService], viewQueries: [{ propertyName: "tabGroups", first: true, predicate: ["groupContainerWrapper"], descendants: true }, { propertyName: "content", first: true, predicate: ["skySideContent"], descendants: true }, { propertyName: "contentWrapper", first: true, predicate: ["contentContainerWrapper"], descendants: true }], ngImport: i0, template: "<div class=\"sky-vertical-tabset\">\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    aria-orientation=\"vertical\"\n    class=\"sky-vertical-tabset-tablist\"\n    [attr.aria-label]=\"ariaLabel\"\n    [attr.aria-labelledby]=\"ariaLabelledBy\"\n    [attr.aria-owns]=\"ariaOwns\"\n    [attr.role]=\"isMobile ? undefined : ariaRole\"\n  ></span>\n  <div\n    *ngIf=\"maintainTabContent || tabService.tabsVisible()\"\n    class=\"sky-vertical-tabset-group-container\"\n    [@tabGroupEnter]=\"tabService.animationTabsVisibleState\"\n    [ngClass]=\"{ 'sky-vertical-tabset-hidden': !tabService.tabsVisible() }\"\n  >\n    <ng-content></ng-content>\n  </div>\n  <div\n    *ngIf=\"maintainTabContent || tabService.contentVisible()\"\n    class=\"sky-vertical-tabset-content\"\n    [ngClass]=\"{\n      'sky-vertical-tabset-content-hidden': !tabService.contentVisible()\n    }\"\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-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:1px solid #cdcfd2}}: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: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}:host-context(.sky-theme-modern) .sky-vertical-tabset-content{margin:15px}@media (min-width: 768px){:host-context(.sky-theme-modern) :host .sky-vertical-tabset-content{margin:20px 30px}:host-context(.sky-theme-modern) :host .sky-vertical-tabset-group-container{border-right:1px solid #d2d2d2}}:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-sm) .sky-vertical-tabset-content,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-md) .sky-vertical-tabset-content,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-lg) .sky-vertical-tabset-content{margin:20px 30px}:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-sm) .sky-vertical-tabset-group-container,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container{border-right:1px solid #d2d2d2}.sky-theme-modern .sky-vertical-tabset-content{margin:15px}@media (min-width: 768px){.sky-theme-modern :host .sky-vertical-tabset-content{margin:20px 30px}.sky-theme-modern :host .sky-vertical-tabset-group-container{border-right:1px solid #d2d2d2}}.sky-theme-modern :host-context(.sky-responsive-container-sm) .sky-vertical-tabset-content,.sky-theme-modern :host-context(.sky-responsive-container-md) .sky-vertical-tabset-content,.sky-theme-modern :host-context(.sky-responsive-container-lg) .sky-vertical-tabset-content{margin:20px 30px}.sky-theme-modern :host-context(.sky-responsive-container-sm) .sky-vertical-tabset-group-container,.sky-theme-modern :host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,.sky-theme-modern :host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container{border-right:1px solid #d2d2d2}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], animations: [
-        trigger('tabGroupEnter', [
-            transition(`${HIDDEN_STATE} => ${VISIBLE_STATE}`, [
-                style({ transform: 'translate(-100%)' }),
-                animate('150ms ease-in'),
-            ]),
-        ]),
-        trigger('contentEnter', [
-            transition(`${HIDDEN_STATE} => ${VISIBLE_STATE}`, [
-                style({ transform: 'translate(100%)' }),
-                animate('150ms ease-in'),
-            ]),
-        ]),
-    ], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyVerticalTabsetComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'sky-vertical-tabset', providers: [SkyTabIdService, SkyVerticalTabsetService], changeDetection: ChangeDetectionStrategy.OnPush, animations: [
-                        trigger('tabGroupEnter', [
-                            transition(`${HIDDEN_STATE} => ${VISIBLE_STATE}`, [
-                                style({ transform: 'translate(-100%)' }),
-                                animate('150ms ease-in'),
-                            ]),
-                        ]),
-                        trigger('contentEnter', [
-                            transition(`${HIDDEN_STATE} => ${VISIBLE_STATE}`, [
-                                style({ transform: 'translate(100%)' }),
-                                animate('150ms ease-in'),
-                            ]),
-                        ]),
-                    ], template: "<div class=\"sky-vertical-tabset\">\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    aria-orientation=\"vertical\"\n    class=\"sky-vertical-tabset-tablist\"\n    [attr.aria-label]=\"ariaLabel\"\n    [attr.aria-labelledby]=\"ariaLabelledBy\"\n    [attr.aria-owns]=\"ariaOwns\"\n    [attr.role]=\"isMobile ? undefined : ariaRole\"\n  ></span>\n  <div\n    *ngIf=\"maintainTabContent || tabService.tabsVisible()\"\n    class=\"sky-vertical-tabset-group-container\"\n    [@tabGroupEnter]=\"tabService.animationTabsVisibleState\"\n    [ngClass]=\"{ 'sky-vertical-tabset-hidden': !tabService.tabsVisible() }\"\n  >\n    <ng-content></ng-content>\n  </div>\n  <div\n    *ngIf=\"maintainTabContent || tabService.contentVisible()\"\n    class=\"sky-vertical-tabset-content\"\n    [ngClass]=\"{\n      'sky-vertical-tabset-content-hidden': !tabService.contentVisible()\n    }\"\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-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:1px solid #cdcfd2}}: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: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}:host-context(.sky-theme-modern) .sky-vertical-tabset-content{margin:15px}@media (min-width: 768px){:host-context(.sky-theme-modern) :host .sky-vertical-tabset-content{margin:20px 30px}:host-context(.sky-theme-modern) :host .sky-vertical-tabset-group-container{border-right:1px solid #d2d2d2}}:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-sm) .sky-vertical-tabset-content,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-md) .sky-vertical-tabset-content,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-lg) .sky-vertical-tabset-content{margin:20px 30px}:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-sm) .sky-vertical-tabset-group-container,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container{border-right:1px solid #d2d2d2}.sky-theme-modern .sky-vertical-tabset-content{margin:15px}@media (min-width: 768px){.sky-theme-modern :host .sky-vertical-tabset-content{margin:20px 30px}.sky-theme-modern :host .sky-vertical-tabset-group-container{border-right:1px solid #d2d2d2}}.sky-theme-modern :host-context(.sky-responsive-container-sm) .sky-vertical-tabset-content,.sky-theme-modern :host-context(.sky-responsive-container-md) .sky-vertical-tabset-content,.sky-theme-modern :host-context(.sky-responsive-container-lg) .sky-vertical-tabset-content{margin:20px 30px}.sky-theme-modern :host-context(.sky-responsive-container-sm) .sky-vertical-tabset-group-container,.sky-theme-modern :host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,.sky-theme-modern :host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container{border-right:1px solid #d2d2d2}\n"] }]
-        }], ctorParameters: function () { return [{ type: SkyVerticalTabsetAdapterService }, { type: SkyVerticalTabsetService }, { type: i3.SkyLibResourcesService }, { type: i0.ChangeDetectorRef }, { type: SkyTabIdService }]; }, propDecorators: { showTabsText: [{
-                type: Input
-            }], ariaLabel: [{
-                type: Input
-            }], ariaLabelledBy: [{
-                type: Input
-            }], ariaRole: [{
-                type: Input
-            }], maintainTabContent: [{
-                type: Input
-            }], activeChange: [{
-                type: Output
-            }], tabGroups: [{
-                type: ViewChild,
-                args: ['groupContainerWrapper']
-            }], content: [{
-                type: ViewChild,
-                args: ['skySideContent']
-            }], contentWrapper: [{
-                type: ViewChild,
-                args: ['contentContainerWrapper']
-            }] } });
-
-class SkyVerticalTabsetModule {
-}
-SkyVerticalTabsetModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyVerticalTabsetModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SkyVerticalTabsetModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: SkyVerticalTabsetModule, declarations: [SkyVerticalTabsetComponent,
-        SkyVerticalTabsetGroupComponent,
-        SkyVerticalTabComponent], imports: [CommonModule,
-        SkyIconModule,
-        SkyIdModule,
-        SkyExpansionIndicatorModule,
-        SkyStatusIndicatorModule,
-        SkyTabsResourcesModule,
-        SkyThemeModule], exports: [SkyVerticalTabsetComponent,
-        SkyVerticalTabsetGroupComponent,
-        SkyVerticalTabComponent] });
-SkyVerticalTabsetModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyVerticalTabsetModule, providers: [SkyVerticalTabsetAdapterService], imports: [CommonModule,
-        SkyIconModule,
-        SkyIdModule,
-        SkyExpansionIndicatorModule,
-        SkyStatusIndicatorModule,
-        SkyTabsResourcesModule,
-        SkyThemeModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyVerticalTabsetModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        SkyVerticalTabsetComponent,
-                        SkyVerticalTabsetGroupComponent,
-                        SkyVerticalTabComponent,
-                    ],
-                    imports: [
-                        CommonModule,
-                        SkyIconModule,
-                        SkyIdModule,
-                        SkyExpansionIndicatorModule,
-                        SkyStatusIndicatorModule,
-                        SkyTabsResourcesModule,
-                        SkyThemeModule,
-                    ],
-                    providers: [SkyVerticalTabsetAdapterService],
-                    exports: [
-                        SkyVerticalTabsetComponent,
-                        SkyVerticalTabsetGroupComponent,
-                        SkyVerticalTabComponent,
-                    ],
-                }]
-        }] });
-
-class SkySectionedFormService {
-    constructor() {
-        /**
-         * @internal
-         */
-        this.invalidChange = new BehaviorSubject(undefined);
-        /**
-         * @internal
-         */
-        this.requiredChange = new BehaviorSubject(undefined);
-    }
-    /**
-     * Sets the current section's invalid state based on the `isInvalid` parameter.
-     * This method is used within a `sky-sectioned-form-section` element.
-     */
-    invalidFieldChanged(isInvalid) {
-        this.invalidChange.next(isInvalid);
-    }
-    /**
-     * Sets the current section's required state based on the `isRequired` parameter.
-     * This method is used within a `sky-sectioned-form-section` element.
-     */
-    requiredFieldChanged(isRequired) {
-        this.requiredChange.next(isRequired);
-    }
-}
-SkySectionedFormService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkySectionedFormService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-SkySectionedFormService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkySectionedFormService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkySectionedFormService, decorators: [{
-            type: Injectable
-        }] });
-
-var _SkySectionedFormSectionComponent_ngUnsubscribe, _SkySectionedFormSectionComponent_sectionedFormService, _SkySectionedFormSectionComponent_tabsetService, _SkySectionedFormSectionComponent_changeRef;
-let nextId$1 = 0;
-/**
- * Creates an individual form to display as a section within the sectioned form.
- */
-class SkySectionedFormSectionComponent {
-    constructor(sectionedFormService, tabsetService, changeRef) {
-        this.sectionTabId = `sky-sectioned-form-tab-${++nextId$1}`;
-        this.sectionContentId = `sky-sectioned-form-section-${++nextId$1}`;
-        /**
-         * Whether the section is active when the form loads.
-         * @default false
-         */
-        this.active = false;
-        _SkySectionedFormSectionComponent_ngUnsubscribe.set(this, new Subject());
-        _SkySectionedFormSectionComponent_sectionedFormService.set(this, void 0);
-        _SkySectionedFormSectionComponent_tabsetService.set(this, void 0);
-        _SkySectionedFormSectionComponent_changeRef.set(this, void 0);
-        __classPrivateFieldSet(this, _SkySectionedFormSectionComponent_sectionedFormService, sectionedFormService, "f");
-        __classPrivateFieldSet(this, _SkySectionedFormSectionComponent_tabsetService, tabsetService, "f");
-        __classPrivateFieldSet(this, _SkySectionedFormSectionComponent_changeRef, changeRef, "f");
-    }
-    ngOnInit() {
-        __classPrivateFieldGet(this, _SkySectionedFormSectionComponent_changeRef, "f").detectChanges();
-        __classPrivateFieldGet(this, _SkySectionedFormSectionComponent_tabsetService, "f").switchingMobile.subscribe((mobile) => {
-            __classPrivateFieldGet(this, _SkySectionedFormSectionComponent_changeRef, "f").detectChanges();
-        });
-        __classPrivateFieldGet(this, _SkySectionedFormSectionComponent_sectionedFormService, "f").requiredChange
-            .pipe(takeUntil(__classPrivateFieldGet(this, _SkySectionedFormSectionComponent_ngUnsubscribe, "f")))
-            .subscribe((required) => (this.fieldRequired = required));
-        __classPrivateFieldGet(this, _SkySectionedFormSectionComponent_sectionedFormService, "f").invalidChange
-            .pipe(takeUntil(__classPrivateFieldGet(this, _SkySectionedFormSectionComponent_ngUnsubscribe, "f")))
-            .subscribe((invalid) => (this.fieldInvalid = invalid));
-    }
-    ngOnDestroy() {
-        __classPrivateFieldGet(this, _SkySectionedFormSectionComponent_ngUnsubscribe, "f").next();
-        __classPrivateFieldGet(this, _SkySectionedFormSectionComponent_ngUnsubscribe, "f").complete();
-    }
-}
-_SkySectionedFormSectionComponent_ngUnsubscribe = new WeakMap(), _SkySectionedFormSectionComponent_sectionedFormService = new WeakMap(), _SkySectionedFormSectionComponent_tabsetService = new WeakMap(), _SkySectionedFormSectionComponent_changeRef = new WeakMap();
-SkySectionedFormSectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkySectionedFormSectionComponent, deps: [{ token: SkySectionedFormService }, { token: SkyVerticalTabsetService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-SkySectionedFormSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SkySectionedFormSectionComponent, 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  [ngClass]=\"{\n    'sky-tab-field-required': fieldRequired\n  }\"\n  [showTabRightArrow]=\"true\"\n  [tabHeaderCount]=\"itemCount\"\n  [tabHeading]=\"heading\"\n  [tabId]=\"sectionTabId\"\n>\n  <ng-content></ng-content>\n</sky-vertical-tab>\n", styles: [":host .sky-tab-field-required ::ng-deep .sky-vertical-tab-heading:after{content:\"*\";color:var(--sky-highlight-color-danger);padding-left:5px}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SkyVerticalTabComponent, selector: "sky-vertical-tab", inputs: ["active", "ariaControls", "ariaRole", "disabled", "errorIndicator", "tabHeaderCount", "tabHeading", "showTabRightArrow", "tabId"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkySectionedFormSectionComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'sky-sectioned-form-section', providers: [SkySectionedFormService], template: "<sky-vertical-tab\n  [active]=\"active\"\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>\n  <ng-content></ng-content>\n</sky-vertical-tab>\n", styles: [":host .sky-tab-field-required ::ng-deep .sky-vertical-tab-heading:after{content:\"*\";color:var(--sky-highlight-color-danger);padding-left:5px}\n"] }]
-        }], ctorParameters: function () { return [{ type: SkySectionedFormService }, { type: SkyVerticalTabsetService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { heading: [{
-                type: Input
-            }], itemCount: [{
-                type: Input
-            }], active: [{
-                type: Input
-            }], tab: [{
-                type: ViewChild,
-                args: [SkyVerticalTabComponent]
-            }] } });
-
-var SkySectionedFormMessageType;
-(function (SkySectionedFormMessageType) {
-    SkySectionedFormMessageType[SkySectionedFormMessageType["ShowTabs"] = 1] = "ShowTabs";
-})(SkySectionedFormMessageType || (SkySectionedFormMessageType = {}));
-
-var _SkySectionedFormComponent_instances, _SkySectionedFormComponent_ngUnsubscribe, _SkySectionedFormComponent_messageStreamSub, _SkySectionedFormComponent_changeRef, _SkySectionedFormComponent_tabIdSvc, _SkySectionedFormComponent_logger, _SkySectionedFormComponent__messageStream, _SkySectionedFormComponent_showTabs, _SkySectionedFormComponent_initMessageStream;
-/**
- * Creates a container for the sectioned forms.
- */
-class SkySectionedFormComponent {
-    set messageStream(value) {
-        __classPrivateFieldSet(this, _SkySectionedFormComponent__messageStream, value || new Subject(), "f");
-        __classPrivateFieldGet(this, _SkySectionedFormComponent_instances, "m", _SkySectionedFormComponent_initMessageStream).call(this);
-    }
-    get messageStream() {
-        return __classPrivateFieldGet(this, _SkySectionedFormComponent__messageStream, "f");
-    }
-    constructor(tabService, changeRef, tabIdSvc, logger) {
-        this.tabService = tabService;
-        _SkySectionedFormComponent_instances.add(this);
-        /**
-         * Whether the sectioned form loads section content during initialization so that it
-         * displays content without moving around elements in the content container.
-         * @default false
-         */
-        this.maintainSectionContent = false;
-        /**
-         * Fires when the active tab changes and emits the index of the active
-         * section. The index is based on the section's position when the form loads.
-         */
-        this.indexChanged = new EventEmitter();
-        /**
-         * Fires when the sectioned form tabs are shown or hidden.
-         */
-        this.tabsVisibleChanged = new EventEmitter();
-        this.ariaRole = 'tablist';
-        _SkySectionedFormComponent_ngUnsubscribe.set(this, new Subject());
-        _SkySectionedFormComponent_messageStreamSub.set(this, void 0);
-        _SkySectionedFormComponent_changeRef.set(this, void 0);
-        _SkySectionedFormComponent_tabIdSvc.set(this, void 0);
-        _SkySectionedFormComponent_logger.set(this, void 0);
-        _SkySectionedFormComponent__messageStream.set(this, new Subject());
-        __classPrivateFieldSet(this, _SkySectionedFormComponent_changeRef, changeRef, "f");
-        __classPrivateFieldSet(this, _SkySectionedFormComponent_tabIdSvc, tabIdSvc, "f");
-        __classPrivateFieldSet(this, _SkySectionedFormComponent_logger, logger, "f");
-        __classPrivateFieldGet(this, _SkySectionedFormComponent_instances, "m", _SkySectionedFormComponent_initMessageStream).call(this);
-        __classPrivateFieldGet(this, _SkySectionedFormComponent_tabIdSvc, "f").ids.pipe(takeUntil(__classPrivateFieldGet(this, _SkySectionedFormComponent_ngUnsubscribe, "f"))).subscribe((ids) => {
-            this.ariaOwns = ids.join(' ') || undefined;
-            __classPrivateFieldGet(this, _SkySectionedFormComponent_changeRef, "f").markForCheck();
-        });
-    }
-    ngOnInit() {
-        this.tabService.maintainTabContent = this.maintainSectionContent;
-        this.tabService.indexChanged
-            .pipe(takeUntil(__classPrivateFieldGet(this, _SkySectionedFormComponent_ngUnsubscribe, "f")))
-            .subscribe((index) => {
-            this.indexChanged.emit(index);
-            __classPrivateFieldGet(this, _SkySectionedFormComponent_changeRef, "f").markForCheck();
-        });
-        this.tabService.switchingMobile
-            .pipe(takeUntil(__classPrivateFieldGet(this, _SkySectionedFormComponent_ngUnsubscribe, "f")))
-            .subscribe((mobile) => {
-            if (!mobile) {
-                this.ariaRole = 'tablist';
-            }
-            else {
-                this.ariaRole = undefined;
-            }
-            __classPrivateFieldGet(this, _SkySectionedFormComponent_changeRef, "f").markForCheck();
-        });
-        this.tabService.hidingTabs
-            .pipe(takeUntil(__classPrivateFieldGet(this, _SkySectionedFormComponent_ngUnsubscribe, "f")))
-            .subscribe(() => {
-            this.tabsVisibleChanged.emit(false);
-        });
-        this.tabService.showingTabs
-            .pipe(takeUntil(__classPrivateFieldGet(this, _SkySectionedFormComponent_ngUnsubscribe, "f")))
-            .subscribe(() => {
-            this.tabsVisibleChanged.emit(true);
-        });
-        if (this.tabService.isMobile()) {
-            this.ariaRole = undefined;
-            this.tabService.animationContentVisibleState = VISIBLE_STATE;
-            __classPrivateFieldGet(this, _SkySectionedFormComponent_changeRef, "f").markForCheck();
-        }
-    }
-    ngAfterViewChecked() {
-        this.tabService.content = this.content;
-        this.tabService.updateContent();
-    }
-    ngOnDestroy() {
-        __classPrivateFieldGet(this, _SkySectionedFormComponent_ngUnsubscribe, "f").next();
-        __classPrivateFieldGet(this, _SkySectionedFormComponent_ngUnsubscribe, "f").complete();
-    }
-    /**
-     * @deprecated Use the `tabsVisibleChanged` output to listen for tab visibility changes.
-     */
-    tabsVisible() {
-        __classPrivateFieldGet(this, _SkySectionedFormComponent_logger, "f").deprecated('SectionedFormComponent.tabsVisible()', {
-            deprecationMajorVersion: 8,
-            moreInfoUrl: 'https://developer.blackbaud.com/skyux/components/sectioned-form',
-            replacementRecommendation: 'Use the `tabsVisibleChanged` output to listen for tab visibility changes.',
-        });
-        __classPrivateFieldGet(this, _SkySectionedFormComponent_changeRef, "f").markForCheck();
-        return this.tabService.tabsVisible();
-    }
-    /**
-     * @deprecated Use the `messageStream` input and push a `ShowTabs` message to the message stream instead.
-     */
-    showTabs() {
-        __classPrivateFieldGet(this, _SkySectionedFormComponent_logger, "f").deprecated('SectionedFormComponent.showTabs()', {
-            deprecationMajorVersion: 8,
-            moreInfoUrl: 'https://developer.blackbaud.com/skyux/components/sectioned-form',
-            replacementRecommendation: 'Use the `messageStream` input and push a `ShowTabs` message to the message stream instead.',
-        });
-        __classPrivateFieldGet(this, _SkySectionedFormComponent_instances, "m", _SkySectionedFormComponent_showTabs).call(this);
-    }
-}
-_SkySectionedFormComponent_ngUnsubscribe = new WeakMap(), _SkySectionedFormComponent_messageStreamSub = new WeakMap(), _SkySectionedFormComponent_changeRef = new WeakMap(), _SkySectionedFormComponent_tabIdSvc = new WeakMap(), _SkySectionedFormComponent_logger = new WeakMap(), _SkySectionedFormComponent__messageStream = new WeakMap(), _SkySectionedFormComponent_instances = new WeakSet(), _SkySectionedFormComponent_showTabs = function _SkySectionedFormComponent_showTabs() {
-    this.tabService.showTabs();
-    __classPrivateFieldGet(this, _SkySectionedFormComponent_changeRef, "f").markForCheck();
-}, _SkySectionedFormComponent_initMessageStream = function _SkySectionedFormComponent_initMessageStream() {
-    if (__classPrivateFieldGet(this, _SkySectionedFormComponent_messageStreamSub, "f")) {
-        __classPrivateFieldGet(this, _SkySectionedFormComponent_messageStreamSub, "f").unsubscribe();
-    }
-    __classPrivateFieldSet(this, _SkySectionedFormComponent_messageStreamSub, this.messageStream
-        .pipe(takeUntil(__classPrivateFieldGet(this, _SkySectionedFormComponent_ngUnsubscribe, "f")))
-        .subscribe((message) => {
-        switch (message.type) {
-            case SkySectionedFormMessageType.ShowTabs:
-                __classPrivateFieldGet(this, _SkySectionedFormComponent_instances, "m", _SkySectionedFormComponent_showTabs).call(this);
-                break;
-        }
-    }), "f");
-};
-SkySectionedFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkySectionedFormComponent, deps: [{ token: SkyVerticalTabsetService }, { token: i0.ChangeDetectorRef }, { token: SkyTabIdService }, { token: i1.SkyLogService }], target: i0.ɵɵFactoryTarget.Component });
-SkySectionedFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SkySectionedFormComponent, selector: "sky-sectioned-form", inputs: { maintainSectionContent: "maintainSectionContent", messageStream: "messageStream" }, outputs: { indexChanged: "indexChanged", tabsVisibleChanged: "tabsVisibleChanged" }, providers: [SkyTabIdService, SkyVerticalTabsetService], viewQueries: [{ propertyName: "content", first: true, predicate: ["skySectionSideContent"], descendants: true }], ngImport: i0, template: "<div class=\"sky-sectioned-form\" (window:resize)=\"tabService.updateContent()\">\n  <!--\n    ARIA rules do not allow tabpanel elements to be children of a tablist element.\n    However, the markup for each sky-vertical-tab component includes both the tab button\n    and its panel, making the panel element a child of its tablist. Moreover, our\n    sky-vertical-tab components can be grouped within collapsible containers, which also\n    violates accessibility rules because only tab buttons can be children of a tablist.\n    To address this, we create an empty tablist element with an aria-owns attribute,\n    pointing to each tab element individually. That way, we don't have to worry about the\n    structure for each sky-vertical-tab component in order to satisfy accessibility\n    guidelines.\n  -->\n  <span\n    aria-orientation=\"vertical\"\n    [attr.aria-owns]=\"ariaOwns\"\n    [attr.role]=\"ariaRole\"\n  ></span>\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\"\n    [ngClass]=\"{\n      'sky-sectioned-form-content-hidden': !tabService.contentVisible()\n    }\"\n    [@contentEnter]=\"tabService.animationContentVisibleState\"\n    #skySectionSideContent\n  ></div>\n</div>\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-xs) .sky-sectioned-form,:host-context(.sky-responsive-container-sm) .sky-sectioned-form,:host-context(.sky-responsive-container-md) .sky-sectioned-form,:host-context(.sky-responsive-container-lg) .sky-sectioned-form{display:block;max-height:none}:host-context(.sky-responsive-container-xs) .sky-sectioned-form-content,:host-context(.sky-responsive-container-sm) .sky-sectioned-form-content,:host-context(.sky-responsive-container-md) .sky-sectioned-form-content,:host-context(.sky-responsive-container-lg) .sky-sectioned-form-content{flex-basis:auto;overflow-y:visible}:host-context(.sky-responsive-container-xs) .sky-sectioned-form-tabs,:host-context(.sky-responsive-container-sm) .sky-sectioned-form-tabs,:host-context(.sky-responsive-container-md) .sky-sectioned-form-tabs,:host-context(.sky-responsive-container-lg) .sky-sectioned-form-tabs{flex-basis:auto;overflow-y:visible;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%;padding:15px;overflow-y:auto}:host .sky-sectioned-form-tabs{flex-basis:30%;overflow-y:auto}}:host-context(.sky-responsive-container-sm) .sky-sectioned-form,:host-context(.sky-responsive-container-md) .sky-sectioned-form,:host-context(.sky-responsive-container-lg) .sky-sectioned-form{display:flex;max-height:100%}:host-context(.sky-responsive-container-sm) .sky-sectioned-form-content,:host-context(.sky-responsive-container-md) .sky-sectioned-form-content,:host-context(.sky-responsive-container-lg) .sky-sectioned-form-content{flex-basis:70%;padding:15px;overflow-y:auto}:host-context(.sky-responsive-container-sm) .sky-sectioned-form-tabs,:host-context(.sky-responsive-container-md) .sky-sectioned-form-tabs,:host-context(.sky-responsive-container-lg) .sky-sectioned-form-tabs{flex-basis:30%;overflow-y:auto}.sky-sectioned-form-tabs-hidden,.sky-sectioned-form-content-hidden{display:none}:host-context(.sky-theme-modern) .sky-sectioned-form-content{padding:15px}:host-context(.sky-theme-modern) .sky-sectioned-form-tabs{border-right:1px solid #d2d2d2}@media (min-width: 768px){:host-context(.sky-theme-modern) :host .sky-sectioned-form-content{margin:20px 30px}}:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-sm) .sky-sectioned-form-content,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-md) .sky-sectioned-form-content,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-lg) .sky-sectioned-form-content{margin:20px 30px}.sky-theme-modern .sky-sectioned-form-content{padding:15px}.sky-theme-modern .sky-sectioned-form-tabs{border-right:1px solid #d2d2d2}@media (min-width: 768px){.sky-theme-modern :host .sky-sectioned-form-content{margin:20px 30px}}.sky-theme-modern :host-context(.sky-responsive-container-sm) .sky-sectioned-form-content,.sky-theme-modern :host-context(.sky-responsive-container-md) .sky-sectioned-form-content,.sky-theme-modern :host-context(.sky-responsive-container-lg) .sky-sectioned-form-content{margin:20px 30px}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [
-        trigger('tabEnter', [
-            transition(`${HIDDEN_STATE} => ${VISIBLE_STATE}`, [
-                style({ transform: 'translate(-100%)' }),
-                animate('150ms ease-in'),
-            ]),
-        ]),
-        trigger('contentEnter', [
-            transition(`${HIDDEN_STATE} => ${VISIBLE_STATE}`, [
-                style({ transform: 'translate(100%)' }),
-                animate('150ms ease-in'),
-            ]),
-        ]),
-    ], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkySectionedFormComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'sky-sectioned-form', providers: [SkyTabIdService, SkyVerticalTabsetService], changeDetection: ChangeDetectionStrategy.OnPush, animations: [
-                        trigger('tabEnter', [
-                            transition(`${HIDDEN_STATE} => ${VISIBLE_STATE}`, [
-                                style({ transform: 'translate(-100%)' }),
-                                animate('150ms ease-in'),
-                            ]),
-                        ]),
-                        trigger('contentEnter', [
-                            transition(`${HIDDEN_STATE} => ${VISIBLE_STATE}`, [
-                                style({ transform: 'translate(100%)' }),
-                                animate('150ms ease-in'),
-                            ]),
-                        ]),
-                    ], template: "<div class=\"sky-sectioned-form\" (window:resize)=\"tabService.updateContent()\">\n  <!--\n    ARIA rules do not allow tabpanel elements to be children of a tablist element.\n    However, the markup for each sky-vertical-tab component includes both the tab button\n    and its panel, making the panel element a child of its tablist. Moreover, our\n    sky-vertical-tab components can be grouped within collapsible containers, which also\n    violates accessibility rules because only tab buttons can be children of a tablist.\n    To address this, we create an empty tablist element with an aria-owns attribute,\n    pointing to each tab element individually. That way, we don't have to worry about the\n    structure for each sky-vertical-tab component in order to satisfy accessibility\n    guidelines.\n  -->\n  <span\n    aria-orientation=\"vertical\"\n    [attr.aria-owns]=\"ariaOwns\"\n    [attr.role]=\"ariaRole\"\n  ></span>\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\"\n    [ngClass]=\"{\n      'sky-sectioned-form-content-hidden': !tabService.contentVisible()\n    }\"\n    [@contentEnter]=\"tabService.animationContentVisibleState\"\n    #skySectionSideContent\n  ></div>\n</div>\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-xs) .sky-sectioned-form,:host-context(.sky-responsive-container-sm) .sky-sectioned-form,:host-context(.sky-responsive-container-md) .sky-sectioned-form,:host-context(.sky-responsive-container-lg) .sky-sectioned-form{display:block;max-height:none}:host-context(.sky-responsive-container-xs) .sky-sectioned-form-content,:host-context(.sky-responsive-container-sm) .sky-sectioned-form-content,:host-context(.sky-responsive-container-md) .sky-sectioned-form-content,:host-context(.sky-responsive-container-lg) .sky-sectioned-form-content{flex-basis:auto;overflow-y:visible}:host-context(.sky-responsive-container-xs) .sky-sectioned-form-tabs,:host-context(.sky-responsive-container-sm) .sky-sectioned-form-tabs,:host-context(.sky-responsive-container-md) .sky-sectioned-form-tabs,:host-context(.sky-responsive-container-lg) .sky-sectioned-form-tabs{flex-basis:auto;overflow-y:visible;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%;padding:15px;overflow-y:auto}:host .sky-sectioned-form-tabs{flex-basis:30%;overflow-y:auto}}:host-context(.sky-responsive-container-sm) .sky-sectioned-form,:host-context(.sky-responsive-container-md) .sky-sectioned-form,:host-context(.sky-responsive-container-lg) .sky-sectioned-form{display:flex;max-height:100%}:host-context(.sky-responsive-container-sm) .sky-sectioned-form-content,:host-context(.sky-responsive-container-md) .sky-sectioned-form-content,:host-context(.sky-responsive-container-lg) .sky-sectioned-form-content{flex-basis:70%;padding:15px;overflow-y:auto}:host-context(.sky-responsive-container-sm) .sky-sectioned-form-tabs,:host-context(.sky-responsive-container-md) .sky-sectioned-form-tabs,:host-context(.sky-responsive-container-lg) .sky-sectioned-form-tabs{flex-basis:30%;overflow-y:auto}.sky-sectioned-form-tabs-hidden,.sky-sectioned-form-content-hidden{display:none}:host-context(.sky-theme-modern) .sky-sectioned-form-content{padding:15px}:host-context(.sky-theme-modern) .sky-sectioned-form-tabs{border-right:1px solid #d2d2d2}@media (min-width: 768px){:host-context(.sky-theme-modern) :host .sky-sectioned-form-content{margin:20px 30px}}:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-sm) .sky-sectioned-form-content,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-md) .sky-sectioned-form-content,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-lg) .sky-sectioned-form-content{margin:20px 30px}.sky-theme-modern .sky-sectioned-form-content{padding:15px}.sky-theme-modern .sky-sectioned-form-tabs{border-right:1px solid #d2d2d2}@media (min-width: 768px){.sky-theme-modern :host .sky-sectioned-form-content{margin:20px 30px}}.sky-theme-modern :host-context(.sky-responsive-container-sm) .sky-sectioned-form-content,.sky-theme-modern :host-context(.sky-responsive-container-md) .sky-sectioned-form-content,.sky-theme-modern :host-context(.sky-responsive-container-lg) .sky-sectioned-form-content{margin:20px 30px}\n"] }]
-        }], ctorParameters: function () { return [{ type: SkyVerticalTabsetService }, { type: i0.ChangeDetectorRef }, { type: SkyTabIdService }, { type: i1.SkyLogService }]; }, propDecorators: { maintainSectionContent: [{
-                type: Input
-            }], messageStream: [{
-                type: Input
-            }], indexChanged: [{
-                type: Output
-            }], tabsVisibleChanged: [{
-                type: Output
-            }], content: [{
-                type: ViewChild,
-                args: ['skySectionSideContent']
-            }] } });
-
-class SkySectionedFormModule {
-}
-SkySectionedFormModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkySectionedFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SkySectionedFormModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: SkySectionedFormModule, declarations: [SkySectionedFormComponent, SkySectionedFormSectionComponent], imports: [CommonModule,
-        SkyCheckboxModule,
-        SkyThemeModule,
-        SkyVerticalTabsetModule], exports: [SkySectionedFormComponent, SkySectionedFormSectionComponent] });
-SkySectionedFormModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkySectionedFormModule, imports: [CommonModule,
-        SkyCheckboxModule,
-        SkyThemeModule,
-        SkyVerticalTabsetModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkySectionedFormModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [SkySectionedFormComponent, SkySectionedFormSectionComponent],
-                    imports: [
-                        CommonModule,
-                        SkyCheckboxModule,
-                        SkyThemeModule,
-                        SkyVerticalTabsetModule,
-                    ],
-                    exports: [SkySectionedFormComponent, SkySectionedFormSectionComponent],
-                }]
-        }] });
-
-/**
- * @internal
- */
-class SkyTabButtonAdapterService {
-    focusButtonLink(buttonEl) {
-        buttonEl.nativeElement.querySelector('a').focus();
-    }
-}
-SkyTabButtonAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyTabButtonAdapterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-SkyTabButtonAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyTabButtonAdapterService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyTabButtonAdapterService, decorators: [{
-            type: Injectable
-        }] });
-
-var _SkyTabsetService_instances, _SkyTabsetService_activeTabIndex, _SkyTabsetService_focusedTabBtnIndex, _SkyTabsetService_activeTabUnregistered, _SkyTabsetService_activeTabLayout, _SkyTabsetService_tabs, _SkyTabsetService_tabCounter, _SkyTabsetService_isTabIndexActive, _SkyTabsetService_getNextTabArrayIndex, _SkyTabsetService_getPrevTabArrayIndex;
-/**
- * @internal
- */
-class SkyTabsetService {
-    get activeTabUnregistered() {
-        return __classPrivateFieldGet(this, _SkyTabsetService_activeTabUnregistered, "f");
-    }
-    get activeTabIndex() {
-        return __classPrivateFieldGet(this, _SkyTabsetService_activeTabIndex, "f");
-    }
-    get focusedTabBtnIndex() {
-        return __classPrivateFieldGet(this, _SkyTabsetService_focusedTabBtnIndex, "f");
-    }
-    get activeTabLayout() {
-        return __classPrivateFieldGet(this, _SkyTabsetService_activeTabLayout, "f");
-    }
-    constructor() {
-        _SkyTabsetService_instances.add(this);
-        this.currentActiveTabIndex = 0;
-        this.currentFocusedTabBtnIndex = 0;
-        _SkyTabsetService_activeTabIndex.set(this, void 0);
-        _SkyTabsetService_focusedTabBtnIndex.set(this, void 0);
-        _SkyTabsetService_activeTabUnregistered.set(this, void 0);
-        _SkyTabsetService_activeTabLayout.set(this, new Subject());
-        _SkyTabsetService_tabs.set(this, []);
-        _SkyTabsetService_tabCounter.set(this, 0);
-        __classPrivateFieldSet(this, _SkyTabsetService_activeTabIndex, new BehaviorSubject(0), "f");
-        __classPrivateFieldSet(this, _SkyTabsetService_activeTabUnregistered, new Subject(), "f");
-        __classPrivateFieldSet(this, _SkyTabsetService_focusedTabBtnIndex, new Subject(), "f");
-    }
-    ngOnDestroy() {
-        __classPrivateFieldGet(this, _SkyTabsetService_activeTabIndex, "f").complete();
-        __classPrivateFieldGet(this, _SkyTabsetService_activeTabUnregistered, "f").complete();
-        __classPrivateFieldGet(this, _SkyTabsetService_focusedTabBtnIndex, "f").complete();
-        __classPrivateFieldGet(this, _SkyTabsetService_activeTabLayout, "f").complete();
-    }
-    /**
-     * Sets the active tab by its unique `tabIndex` property.
-     */
-    setActiveTabIndex(value, config = {
-        emitChange: true,
-    }) {
-        if (value !== undefined &&
-            !this.tabIndexesEqual(value, this.currentActiveTabIndex)) {
-            this.currentActiveTabIndex = value;
-            /* istanbul ignore else */
-            if (config.emitChange) {
-                __classPrivateFieldGet(this, _SkyTabsetService_activeTabIndex, "f").next(value);
-            }
-            this.setFocusedTabBtnIndex(value);
-        }
-    }
-    focusNextTabBtn(tabButtons) {
-        const currentTabArrayIndex = __classPrivateFieldGet(this, _SkyTabsetService_tabs, "f").findIndex((tab) => this.tabIndexesEqual(tab.tabIndex, this.currentFocusedTabBtnIndex));
-        for (let i = __classPrivateFieldGet(this, _SkyTabsetService_instances, "m", _SkyTabsetService_getNextTabArrayIndex).call(this, currentTabArrayIndex); i !== currentTabArrayIndex; i = __classPrivateFieldGet(this, _SkyTabsetService_instances, "m", _SkyTabsetService_getNextTabArrayIndex).call(this, i)) {
-            const tabBtn = tabButtons[i];
-            if (!tabBtn.disabled && tabBtn.tabIndex !== undefined) {
-                this.setFocusedTabBtnIndex(tabBtn.tabIndex);
-                return;
-            }
-        }
-    }
-    focusPrevTabBtn(tabButtons) {
-        const currentTabArrayIndex = __classPrivateFieldGet(this, _SkyTabsetService_tabs, "f").findIndex((tab) => this.tabIndexesEqual(tab.tabIndex, this.currentFocusedTabBtnIndex));
-        for (let i = __classPrivateFieldGet(this, _SkyTabsetService_instances, "m", _SkyTabsetService_getPrevTabArrayIndex).call(this, currentTabArrayIndex); i !== currentTabArrayIndex; i = __classPrivateFieldGet(this, _SkyTabsetService_instances, "m", _SkyTabsetService_getPrevTabArrayIndex).call(this, i)) {
-            const tabBtn = tabButtons[i];
-            if (!tabBtn.disabled && tabBtn.tabIndex !== undefined) {
-                this.setFocusedTabBtnIndex(tabBtn.tabIndex);
-                return;
-            }
-        }
-    }
-    focusFirstOrNearestTabBtn(tabButtons) {
-        for (let i = 0; i < tabButtons.length; i++) {
-            const tabBtn = tabButtons[i];
-            if (!tabBtn.disabled && tabBtn.tabIndex !== undefined) {
-                this.setFocusedTabBtnIndex(tabBtn.tabIndex);
-                return;
-            }
-        }
-    }
-    focusLastOrNearestTabBtn(tabButtons) {
-        for (let i = tabButtons.length - 1; i >= 0; i--) {
-            const tabBtn = tabButtons[i];
-            if (!tabBtn.disabled && tabBtn.tabIndex !== undefined) {
-                this.setFocusedTabBtnIndex(tabBtn.tabIndex);
-                return;
-            }
-        }
-    }
-    setFocusedTabBtnIndex(tabIndex) {
-        this.currentFocusedTabBtnIndex = tabIndex;
-        __classPrivateFieldGet(this, _SkyTabsetService_focusedTabBtnIndex, "f").next(tabIndex);
-    }
-    /**
-     * Registers a tab component.
-     */
-    registerTab(tabIndex) {
-        var _a;
-        if (tabIndex === undefined) {
-            tabIndex = __classPrivateFieldGet(this, _SkyTabsetService_tabCounter, "f");
-            __classPrivateFieldSet(this, _SkyTabsetService_tabCounter, (_a = __classPrivateFieldGet(this, _SkyTabsetService_tabCounter, "f"), _a++, _a), "f");
-        }
-        __classPrivateFieldGet(this, _SkyTabsetService_tabs, "f").push({ tabIndex });
-        return tabIndex;
-    }
-    updateTabIndex(currentTabIndex, newTabIndex) {
-        const found = __classPrivateFieldGet(this, _SkyTabsetService_tabs, "f").find((tab) => this.tabIndexesEqual(tab.tabIndex, currentTabIndex));
-        if (found) {
-            found.tabIndex = newTabIndex;
-        }
-    }
-    updateActiveTabLayout(layout) {
-        __classPrivateFieldGet(this, _SkyTabsetService_activeTabLayout, "f").next(layout);
-    }
-    /**
-     * Unregisters a tab component.
-     */
-    unregisterTab(tabIndex) {
-        var _b;
-        const index = __classPrivateFieldGet(this, _SkyTabsetService_tabs, "f").findIndex((tab) => this.tabIndexesEqual(tab.tabIndex, tabIndex));
-        // Notify the tabset component when an active tab is unregistered.
-        if (__classPrivateFieldGet(this, _SkyTabsetService_instances, "m", _SkyTabsetService_isTabIndexActive).call(this, (_b = __classPrivateFieldGet(this, _SkyTabsetService_tabs, "f")[index]) === null || _b === void 0 ? void 0 : _b.tabIndex)) {
-            __classPrivateFieldGet(this, _SkyTabsetService_activeTabUnregistered, "f").next({
-                arrayIndex: index,
-            });
-        }
-        __classPrivateFieldGet(this, _SkyTabsetService_tabs, "f").splice(index, 1);
-    }
-    /**
-     * Unregisters all tab components at once.
-     */
-    unregisterAll() {
-        __classPrivateFieldSet(this, _SkyTabsetService_tabs, [], "f");
-    }
-    /**
-     * Compares two tab indexes and returns `true` if they are equal.
-     */
-    tabIndexesEqual(tabIndex1, tabIndex2) {
-        return (tabIndex1 === tabIndex2 ||
-            (tabIndex1 !== undefined &&
-                tabIndex2 !== undefined &&
-                +tabIndex1 === +tabIndex2));
-    }
-    /**
-     * Verifies if a provided tab index is registered.
-     */
-    isValidTabIndex(tabIndex) {
-        return __classPrivateFieldGet(this, _SkyTabsetService_tabs, "f").some((tab) => this.tabIndexesEqual(tab.tabIndex, tabIndex));
-    }
-    /**
-     * Activates the first registered tab.
-     */
-    activateFirstTab() {
-        const firstTabIndex = __classPrivateFieldGet(this, _SkyTabsetService_tabs, "f")[0] && __classPrivateFieldGet(this, _SkyTabsetService_tabs, "f")[0].tabIndex;
-        if (firstTabIndex !== undefined) {
-            this.setActiveTabIndex(firstTabIndex);
-            return firstTabIndex;
-        }
-        return undefined;
-    }
-    /**
-     * Activates the next registered tab, or the previous one based on a provided array index.
-     */
-    activateNearestTab(arrayIndex) {
-        const newActiveTab = __classPrivateFieldGet(this, _SkyTabsetService_tabs, "f")[arrayIndex] || __classPrivateFieldGet(this, _SkyTabsetService_tabs, "f")[arrayIndex - 1];
-        if (newActiveTab) {
-            this.currentActiveTabIndex = newActiveTab.tabIndex;
-        }
-    }
-}
-_SkyTabsetService_activeTabIndex = new WeakMap(), _SkyTabsetService_focusedTabBtnIndex = new WeakMap(), _SkyTabsetService_activeTabUnregistered = new WeakMap(), _SkyTabsetService_activeTabLayout = new WeakMap(), _SkyTabsetService_tabs = new WeakMap(), _SkyTabsetService_tabCounter = new WeakMap(), _SkyTabsetService_instances = new WeakSet(), _SkyTabsetService_isTabIndexActive = function _SkyTabsetService_isTabIndexActive(tabIndex) {
-    return this.tabIndexesEqual(tabIndex, this.currentActiveTabIndex);
-}, _SkyTabsetService_getNextTabArrayIndex = function _SkyTabsetService_getNextTabArrayIndex(currentIndex) {
-    let nextIndex = currentIndex + 1;
-    if (nextIndex === __classPrivateFieldGet(this, _SkyTabsetService_tabs, "f").length) {
-        nextIndex = 0;
-    }
-    return nextIndex;
-}, _SkyTabsetService_getPrevTabArrayIndex = function _SkyTabsetService_getPrevTabArrayIndex(currentIndex) {
-    let prevIndex = currentIndex - 1;
-    if (prevIndex < 0) {
-        prevIndex = __classPrivateFieldGet(this, _SkyTabsetService_tabs, "f").length - 1;
-    }
-    return prevIndex;
-};
-SkyTabsetService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyTabsetService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-SkyTabsetService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyTabsetService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyTabsetService, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return []; } });
-
-var _SkyTabButtonComponent_instances, _SkyTabButtonComponent__isActive, _SkyTabButtonComponent__isDisabled, _SkyTabButtonComponent__tabStyle, _SkyTabButtonComponent_adapterService, _SkyTabButtonComponent_changeDetectorRef, _SkyTabButtonComponent_elementRef, _SkyTabButtonComponent_tabsetService, _SkyTabButtonComponent_ngUnsubscribe, _SkyTabButtonComponent_updateWizardStepState;
-const DEFAULT_DISABLED = false;
-/**
- * @internal
- */
-class SkyTabButtonComponent {
-    get active() {
-        return __classPrivateFieldGet(this, _SkyTabButtonComponent__isActive, "f");
-    }
-    set active(value) {
-        __classPrivateFieldSet(this, _SkyTabButtonComponent__isActive, value, "f");
-        __classPrivateFieldGet(this, _SkyTabButtonComponent_instances, "m", _SkyTabButtonComponent_updateWizardStepState).call(this);
-    }
-    get disabled() {
-        return __classPrivateFieldGet(this, _SkyTabButtonComponent__isDisabled, "f");
-    }
-    set disabled(value) {
-        __classPrivateFieldSet(this, _SkyTabButtonComponent__isDisabled, value !== null && value !== void 0 ? value : DEFAULT_DISABLED, "f");
-        __classPrivateFieldGet(this, _SkyTabButtonComponent_instances, "m", _SkyTabButtonComponent_updateWizardStepState).call(this);
-    }
-    get tabStyle() {
-        return __classPrivateFieldGet(this, _SkyTabButtonComponent__tabStyle, "f");
-    }
-    set tabStyle(style) {
-        __classPrivateFieldSet(this, _SkyTabButtonComponent__tabStyle, style, "f");
-        __classPrivateFieldGet(this, _SkyTabButtonComponent_instances, "m", _SkyTabButtonComponent_updateWizardStepState).call(this);
-    }
-    constructor(elementRef, adapterService, changeDetectorRef, tabsetService) {
-        _SkyTabButtonComponent_instances.add(this);
-        this.buttonClick = new EventEmitter();
-        this.closeClick = new EventEmitter();
-        this.closeBtnTabIndex = '-1';
-        _SkyTabButtonComponent__isActive.set(this, false);
-        _SkyTabButtonComponent__isDisabled.set(this, DEFAULT_DISABLED);
-        _SkyTabButtonComponent__tabStyle.set(this, void 0);
-        _SkyTabButtonComponent_adapterService.set(this, void 0);
-        _SkyTabButtonComponent_changeDetectorRef.set(this, void 0);
-        _SkyTabButtonComponent_elementRef.set(this, void 0);
-        _SkyTabButtonComponent_tabsetService.set(this, void 0);
-        _SkyTabButtonComponent_ngUnsubscribe.set(this, new Subject());
-        __classPrivateFieldSet(this, _SkyTabButtonComponent_adapterService, adapterService, "f");
-        __classPrivateFieldSet(this, _SkyTabButtonComponent_changeDetectorRef, changeDetectorRef, "f");
-        __classPrivateFieldSet(this, _SkyTabButtonComponent_elementRef, elementRef, "f");
-        __classPrivateFieldSet(this, _SkyTabButtonComponent_tabsetService, tabsetService, "f");
-    }
-    ngAfterViewInit() {
-        __classPrivateFieldGet(this, _SkyTabButtonComponent_tabsetService, "f").focusedTabBtnIndex
-            .pipe(distinctUntilChanged(), takeUntil(__classPrivateFieldGet(this, _SkyTabButtonComponent_ngUnsubscribe, "f")))
-            .subscribe((focusedIndex) => {
-            if (this.tabIndex !== undefined && focusedIndex === this.tabIndex) {
-                this.closeBtnTabIndex = '0';
-                this.focusBtn();
-            }
-            else {
-                this.closeBtnTabIndex = '-1';
-            }
-            __classPrivateFieldGet(this, _SkyTabButtonComponent_changeDetectorRef, "f").markForCheck();
-        });
-    }
-    ngOnDestroy() {
-        __classPrivateFieldGet(this, _SkyTabButtonComponent_ngUnsubscribe, "f").next();
-        __classPrivateFieldGet(this, _SkyTabButtonComponent_ngUnsubscribe, "f").complete();
-    }
-    onButtonClick(event) {
-        if (!this.disabled) {
-            this.buttonClick.emit();
-            event.preventDefault();
-        }
-    }
-    onTabButtonKeyDown(event) {
-        /*istanbul ignore else */
-        if (event.key) {
-            switch (event.key.toUpperCase()) {
-                case ' ':
-                case 'ENTER':
-                    this.onButtonClick(event);
-                    break;
-                /* istanbul ignore next */
-                default:
-                    break;
-            }
-        }
-    }
-    onCloseClick(event) {
-        this.closeClick.emit();
-        // Prevent the click event from bubbling up to the anchor tag;
-        // otherwise it will trigger a page refresh.
-        event.stopPropagation();
-        event.preventDefault();
-    }
-    focusBtn() {
-        __classPrivateFieldGet(this, _SkyTabButtonComponent_adapterService, "f").focusButtonLink(__classPrivateFieldGet(this, _SkyTabButtonComponent_elementRef, "f"));
-    }
-    onFocus() {
-        if (this.tabIndex !== undefined) {
-            __classPrivateFieldGet(this, _SkyTabButtonComponent_tabsetService, "f").setFocusedTabBtnIndex(this.tabIndex);
-        }
-    }
-}
-_SkyTabButtonComponent__isActive = new WeakMap(), _SkyTabButtonComponent__isDisabled = new WeakMap(), _SkyTabButtonComponent__tabStyle = new WeakMap(), _SkyTabButtonComponent_adapterService = new WeakMap(), _SkyTabButtonComponent_changeDetectorRef = new WeakMap(), _SkyTabButtonComponent_elementRef = new WeakMap(), _SkyTabButtonComponent_tabsetService = new WeakMap(), _SkyTabButtonComponent_ngUnsubscribe = new WeakMap(), _SkyTabButtonComponent_instances = new WeakSet(), _SkyTabButtonComponent_updateWizardStepState = function _SkyTabButtonComponent_updateWizardStepState() {
-    if (this.tabStyle === 'tabs') {
-        this.wizardStepState = undefined;
-    }
-    else {
-        if (this.active) {
-            this.wizardStepState = 'current';
-        }
-        else if (!this.disabled) {
-            this.wizardStepState = 'completed';
-        }
-        else {
-            this.wizardStepState = 'unavailable';
-        }
-    }
-    __classPrivateFieldGet(this, _SkyTabButtonComponent_changeDetectorRef, "f").markForCheck();
-};
-SkyTabButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyTabButtonComponent, deps: [{ token: i0.ElementRef }, { token: SkyTabButtonAdapterService }, { token: i0.ChangeDetectorRef }, { token: SkyTabsetService }], target: i0.ɵɵFactoryTarget.Component });
-SkyTabButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SkyTabButtonComponent, selector: "sky-tab-button", inputs: { active: "active", ariaControls: "ariaControls", buttonHref: "buttonHref", buttonId: "buttonId", buttonText: "buttonText", buttonTextCount: "buttonTextCount", closeable: "closeable", disabled: "disabled", tabIndex: "tabIndex", tabNumber: "tabNumber", totalTabsCount: "totalTabsCount", tabStyle: "tabStyle" }, outputs: { buttonClick: "buttonClick", closeClick: "closeClick" }, providers: [SkyTabButtonAdapterService], ngImport: i0, 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    #tabButtonEl\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    [attr.aria-label]=\"\n      (tabStyle === 'wizard'\n        ? 'skyux_wizard_sr_step_' + wizardStepState\n        : 'skyux_tabs_sr_tab_order'\n      ) | skyLibResources : tabNumber : totalTabsCount : buttonText\n    \"\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]=\"active ? '0' : '-1'\"\n    (click)=\"onButtonClick($event)\"\n    (keydown)=\"onTabButtonKeyDown($event)\"\n    (focus)=\"onFocus()\"\n  >\n    <span class=\"sky-tab-heading\" [attr.aria-hidden]=\"true\">\n      {{ buttonText }}\n      <span *ngIf=\"buttonTextCount !== undefined\" class=\"sky-tab-header-count\">\n        {{ buttonTextCount }}\n      </span>\n      <span\n        *ngIf=\"closeable\"\n        class=\"sky-btn-tab-close\"\n        [tabindex]=\"closeBtnTabIndex\"\n        [attr.aria-label]=\"'skyux_tab_close' | skyLibResources : buttonText\"\n        [ngClass]=\"{\n          'sky-btn-tab-close-disabled': disabled\n        }\"\n        (click)=\"onCloseClick($event)\"\n        (keydown.enter)=\"onCloseClick($event)\"\n      >\n        <sky-icon icon=\"remove\"></sky-icon>\n      </span>\n    </span>\n  </a>\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;padding:1px 6px}.sky-btn-tab-wrapper .sky-btn-tab-close:hover{color:#212327;transition:color .15s}.sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:#fff}.sky-btn-tab-wrapper.sky-btn-tab-wrapper-disabled{cursor:not-allowed}.sky-tab-btn-closeable{padding-right:43px}:host-context(.sky-theme-modern) .sky-btn-tab-wrapper{margin-right:10px}:host-context(.sky-theme-modern) .sky-btn-tab-wrapper .sky-btn-tab-close{top:12px;right:10px}: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}:host-context(.sky-theme-modern) .sky-tab-btn-closeable{padding-right:44px}.sky-theme-modern .sky-btn-tab-wrapper{margin-right:10px}.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{color:#686c73}.sky-theme-modern .sky-tab-btn-closeable{padding-right:44px}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-btn-tab-wrapper .sky-btn-tab-close{color:#eeeeef}: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}.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{color:#eeeeef}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyTabButtonComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'sky-tab-button', providers: [SkyTabButtonAdapterService], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.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    #tabButtonEl\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    [attr.aria-label]=\"\n      (tabStyle === 'wizard'\n        ? 'skyux_wizard_sr_step_' + wizardStepState\n        : 'skyux_tabs_sr_tab_order'\n      ) | skyLibResources : tabNumber : totalTabsCount : buttonText\n    \"\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]=\"active ? '0' : '-1'\"\n    (click)=\"onButtonClick($event)\"\n    (keydown)=\"onTabButtonKeyDown($event)\"\n    (focus)=\"onFocus()\"\n  >\n    <span class=\"sky-tab-heading\" [attr.aria-hidden]=\"true\">\n      {{ buttonText }}\n      <span *ngIf=\"buttonTextCount !== undefined\" class=\"sky-tab-header-count\">\n        {{ buttonTextCount }}\n      </span>\n      <span\n        *ngIf=\"closeable\"\n        class=\"sky-btn-tab-close\"\n        [tabindex]=\"closeBtnTabIndex\"\n        [attr.aria-label]=\"'skyux_tab_close' | skyLibResources : buttonText\"\n        [ngClass]=\"{\n          'sky-btn-tab-close-disabled': disabled\n        }\"\n        (click)=\"onCloseClick($event)\"\n        (keydown.enter)=\"onCloseClick($event)\"\n      >\n        <sky-icon icon=\"remove\"></sky-icon>\n      </span>\n    </span>\n  </a>\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;padding:1px 6px}.sky-btn-tab-wrapper .sky-btn-tab-close:hover{color:#212327;transition:color .15s}.sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:#fff}.sky-btn-tab-wrapper.sky-btn-tab-wrapper-disabled{cursor:not-allowed}.sky-tab-btn-closeable{padding-right:43px}:host-context(.sky-theme-modern) .sky-btn-tab-wrapper{margin-right:10px}:host-context(.sky-theme-modern) .sky-btn-tab-wrapper .sky-btn-tab-close{top:12px;right:10px}: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}:host-context(.sky-theme-modern) .sky-tab-btn-closeable{padding-right:44px}.sky-theme-modern .sky-btn-tab-wrapper{margin-right:10px}.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{color:#686c73}.sky-theme-modern .sky-tab-btn-closeable{padding-right:44px}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-btn-tab-wrapper .sky-btn-tab-close{color:#eeeeef}: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}.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{color:#eeeeef}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: SkyTabButtonAdapterService }, { type: i0.ChangeDetectorRef }, { type: SkyTabsetService }]; }, propDecorators: { active: [{
-                type: Input
-            }], ariaControls: [{
-                type: Input
-            }], buttonHref: [{
-                type: Input
-            }], buttonId: [{
-                type: Input
-            }], buttonText: [{
-                type: Input
-            }], buttonTextCount: [{
-                type: Input
-            }], closeable: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], tabIndex: [{
-                type: Input
-            }], tabNumber: [{
-                type: Input
-            }], totalTabsCount: [{
-                type: Input
-            }], tabStyle: [{
-                type: Input
-            }], buttonClick: [{
-                type: Output
-            }], closeClick: [{
-                type: Output
-            }] } });
-
-var _SkyTabsetPermalinkService_instances, _SkyTabsetPermalinkService_popStateChange, _SkyTabsetPermalinkService_subscription, _SkyTabsetPermalinkService_activatedRoute, _SkyTabsetPermalinkService_location, _SkyTabsetPermalinkService_router, _SkyTabsetPermalinkService_getParams;
-/**
- * @internal
- */
-class SkyTabsetPermalinkService {
-    get popStateChange() {
-        return __classPrivateFieldGet(this, _SkyTabsetPermalinkService_popStateChange, "f");
-    }
-    constructor(activatedRoute, location, router) {
-        _SkyTabsetPermalinkService_instances.add(this);
-        _SkyTabsetPermalinkService_popStateChange.set(this, void 0);
-        _SkyTabsetPermalinkService_subscription.set(this, void 0);
-        _SkyTabsetPermalinkService_activatedRoute.set(this, void 0);
-        _SkyTabsetPermalinkService_location.set(this, void 0);
-        _SkyTabsetPermalinkService_router.set(this, void 0);
-        __classPrivateFieldSet(this, _SkyTabsetPermalinkService_activatedRoute, activatedRoute, "f");
-        __classPrivateFieldSet(this, _SkyTabsetPermalinkService_location, location, "f");
-        __classPrivateFieldSet(this, _SkyTabsetPermalinkService_router, router, "f");
-        __classPrivateFieldSet(this, _SkyTabsetPermalinkService_popStateChange, new Subject(), "f");
-    }
-    ngOnDestroy() {
-        if (__classPrivateFieldGet(this, _SkyTabsetPermalinkService_subscription, "f")) {
-            __classPrivateFieldGet(this, _SkyTabsetPermalinkService_subscription, "f").unsubscribe();
-        }
-        __classPrivateFieldGet(this, _SkyTabsetPermalinkService_popStateChange, "f").complete();
-    }
-    init() {
-        __classPrivateFieldSet(this, _SkyTabsetPermalinkService_subscription, __classPrivateFieldGet(this, _SkyTabsetPermalinkService_location, "f").subscribe(() => {
-            __classPrivateFieldGet(this, _SkyTabsetPermalinkService_popStateChange, "f").next();
-        }), "f");
-    }
-    /**
-     * Returns the value of a URL query param.
-     */
-    getParam(name) {
-        return __classPrivateFieldGet(this, _SkyTabsetPermalinkService_instances, "m", _SkyTabsetPermalinkService_getParams).call(this)[name];
-    }
-    /**
-     * Sets the value of a URL query param.
-     */
-    setParam(name, value) {
-        const params = __classPrivateFieldGet(this, _SkyTabsetPermalinkService_instances, "m", _SkyTabsetPermalinkService_getParams).call(this);
-        if (value === null) {
-            delete params[name];
-        }
-        else {
-            params[name] = value;
-        }
-        // Update the URL without triggering a navigation state change.
-        // See: https://stackoverflow.com/a/46486677
-        const url = __classPrivateFieldGet(this, _SkyTabsetPermalinkService_router, "f")
-            .createUrlTree([], {
-            relativeTo: __classPrivateFieldGet(this, _SkyTabsetPermalinkService_activatedRoute, "f"),
-            queryParams: params,
-            queryParamsHandling: 'merge',
-        })
-            .toString();
-        // Abort redirect if the current URL is equal to the new URL.
-        if (__classPrivateFieldGet(this, _SkyTabsetPermalinkService_location, "f").isCurrentPathEqualTo(url)) {
-            return;
-        }
-        __classPrivateFieldGet(this, _SkyTabsetPermalinkService_location, "f").go(url);
-    }
-    /**
-     * Removes the provided query param from the URL.
-     */
-    clearParam(name) {
-        this.setParam(name, null);
-    }
-    /**
-     * Returns a relative URL that includes the provided query parameter. The value is intended to be
-     * used by an HTML anchor element.
-     */
-    getParamHref(name, value) {
-        if (!name) {
-            return null;
-        }
-        const params = __classPrivateFieldGet(this, _SkyTabsetPermalinkService_instances, "m", _SkyTabsetPermalinkService_getParams).call(this);
-        params[name] = value;
-        const baseUrl = __classPrivateFieldGet(this, _SkyTabsetPermalinkService_location, "f").path().split('?')[0];
-        const paramString = Object.keys(params)
-            .map((k) => `${k}=${params[k]}`)
-            .join('&');
-        return __classPrivateFieldGet(this, _SkyTabsetPermalinkService_location, "f").prepareExternalUrl(`${baseUrl}?${paramString}`);
-    }
-    /**
-     * Converts the provided string into a value that can be safely used in a URL.
-     */
-    urlify(value) {
-        if (!value) {
-            return '';
-        }
-        const sanitized = value
-            .toLowerCase()
-            // Remove special characters.
-            .replace(/[_~`@!#$%^&*()[\]{};:'/\\<>,.?=+|"]/g, '')
-            // Replace space characters with a dash.
-            .replace(/\s/g, '-')
-            // Remove any double-dashes.
-            .replace(/--/g, '-');
-        return sanitized;
-    }
-}
-_SkyTabsetPermalinkService_popStateChange = new WeakMap(), _SkyTabsetPermalinkService_subscription = new WeakMap(), _SkyTabsetPermalinkService_activatedRoute = new WeakMap(), _SkyTabsetPermalinkService_location = new WeakMap(), _SkyTabsetPermalinkService_router = new WeakMap(), _SkyTabsetPermalinkService_instances = new WeakSet(), _SkyTabsetPermalinkService_getParams = function _SkyTabsetPermalinkService_getParams() {
-    const params = {};
-    const path = __classPrivateFieldGet(this, _SkyTabsetPermalinkService_location, "f").path();
-    if (path.indexOf('?') === -1) {
-        return params;
-    }
-    const existingParamPairs = path.split('?')[1].split('&');
-    existingParamPairs.forEach((pair) => {
-        const fragments = pair.split('=');
-        params[fragments[0]] = decodeURIComponent(fragments[1]);
-    });
-    return params;
-};
-SkyTabsetPermalinkService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyTabsetPermalinkService, deps: [{ token: i1$1.ActivatedRoute }, { token: i4.Location }, { token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Injectable });
-SkyTabsetPermalinkService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyTabsetPermalinkService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyTabsetPermalinkService, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: i1$1.ActivatedRoute }, { type: i4.Location }, { type: i1$1.Router }]; } });
-
-var _SkyTabComponent_instances, _SkyTabComponent__active, _SkyTabComponent_activeChange, _SkyTabComponent__permalinkValue, _SkyTabComponent_stateChange, _SkyTabComponent__tabHeading, _SkyTabComponent__tabIndex, _SkyTabComponent__layout, _SkyTabComponent_tabIndexChange, _SkyTabComponent_changeDetector, _SkyTabComponent_permalinkService, _SkyTabComponent_tabsetService, _SkyTabComponent_setPermalinkValueOrDefault;
-const LAYOUT_CLASS_PREFIX = 'sky-layout-host-';
-const LAYOUT_DEFAULT = 'none';
-let nextId = 0;
-class SkyTabComponent {
-    /**
-     * Whether the tab is active when the tabset loads. After initialization, the `active`
-     * property on the tabset component should be used to set the active tab.
-     * @default false
-     */
-    set active(value) {
-        if (value !== undefined && !!value !== __classPrivateFieldGet(this, _SkyTabComponent__active, "f")) {
-            __classPrivateFieldSet(this, _SkyTabComponent__active, value, "f");
-            __classPrivateFieldGet(this, _SkyTabComponent_activeChange, "f").next();
-        }
-    }
-    get active() {
-        return __classPrivateFieldGet(this, _SkyTabComponent__active, "f");
-    }
-    get activeChange() {
-        return __classPrivateFieldGet(this, _SkyTabComponent_activeChange, "f");
-    }
-    /**
-     * The custom query parameter value for the tab.
-     * This works in conjunction with the tabset's `permalinkId` to distinguish
-     * the tab's unique state in the URL by generating a query parameter that is
-     * written as `?<queryParam>-active-tab=<sanitized-tab-heading`.
-     * By default, the query parameter's value is parsed automatically from the tab's heading text.
-     * This input only applies when the tabset's `tabStyle` is `"tabs"`.
-     */
-    set permalinkValue(value) {
-        __classPrivateFieldSet(this, _SkyTabComponent__permalinkValue, value, "f");
-        __classPrivateFieldGet(this, _SkyTabComponent_instances, "m", _SkyTabComponent_setPermalinkValueOrDefault).call(this);
-    }
-    get permalinkValue() {
-        return __classPrivateFieldGet(this, _SkyTabComponent__permalinkValue, "f");
-    }
-    /**
-     * The tab header.
-     * When using tabs as the main navigation on a page,
-     * use [the Angular `Title` service](https://angular.io/docs/ts/latest/cookbook/set-document-title.html)
-     * and [the SKY UX `title` configuration property](https://developer.blackbaud.com/skyux/learn/reference/configuration#app)
-     * to reflect the tab header in the page title.
-     * @required
-     */
-    set tabHeading(value) {
-        __classPrivateFieldSet(this, _SkyTabComponent__tabHeading, value, "f");
-        __classPrivateFieldGet(this, _SkyTabComponent_instances, "m", _SkyTabComponent_setPermalinkValueOrDefault).call(this);
-    }
-    get tabHeading() {
-        return __classPrivateFieldGet(this, _SkyTabComponent__tabHeading, "f");
-    }
-    /**
-     * The unique identifier for the tab.
-     * If not defined, the identifier is set to the position of the tab on load, starting with `0`.
-     */
-    set tabIndex(value) {
-        if (value !== __classPrivateFieldGet(this, _SkyTabComponent__tabIndex, "f") &&
-            value !== undefined &&
-            __classPrivateFieldGet(this, _SkyTabComponent__tabIndex, "f") !== undefined) {
-            __classPrivateFieldGet(this, _SkyTabComponent_tabsetService, "f").updateTabIndex(__classPrivateFieldGet(this, _SkyTabComponent__tabIndex, "f"), value);
-            __classPrivateFieldGet(this, _SkyTabComponent_tabIndexChange, "f").next(value);
-        }
-        __classPrivateFieldSet(this, _SkyTabComponent__tabIndex, value, "f");
-    }
-    get tabIndex() {
-        return __classPrivateFieldGet(this, _SkyTabComponent__tabIndex, "f");
-    }
-    /**
-     * The page layout that corresponds with the top-level component type
-     * used on the page. For laying out custom content, use `auto` to allow
-     * the page contents to expand beyond the bottom of the browser window
-     * or `fit` to constrain the page contents to the available viewport.
-     * @default "auto"
-     */
-    set layout(value) {
-        const layout = value || LAYOUT_DEFAULT;
-        __classPrivateFieldSet(this, _SkyTabComponent__layout, layout, "f");
-        this.cssClass = `${LAYOUT_CLASS_PREFIX}${layout}`;
-        if (this.active) {
-            __classPrivateFieldGet(this, _SkyTabComponent_tabsetService, "f").updateActiveTabLayout(layout);
-        }
-    }
-    get layout() {
-        return __classPrivateFieldGet(this, _SkyTabComponent__layout, "f");
-    }
-    /**
-     * Alerts the tabset component when this component has changes that need to be reflected in the UI.
-     */
-    get stateChange() {
-        return __classPrivateFieldGet(this, _SkyTabComponent_stateChange, "f");
-    }
-    get tabIndexChange() {
-        return __classPrivateFieldGet(this, _SkyTabComponent_tabIndexChange, "f");
-    }
-    constructor(changeDetector, permalinkService, tabsetService) {
-        _SkyTabComponent_instances.add(this);
-        this.cssClass = `${LAYOUT_CLASS_PREFIX}${LAYOUT_DEFAULT}`;
-        /**
-         * Fires when users click the button to close the tab.
-         * The close button is added to the tab when you specify a listener for this event.
-         * This event only applies when the tabset's `tabStyle` is `"tabs"`.
-         */
-        this.close = new EventEmitter(); // eslint-disable-line @angular-eslint/no-output-native
-        this.permalinkValueOrDefault = '';
-        this.showContent = false;
-        _SkyTabComponent__active.set(this, false);
-        _SkyTabComponent_activeChange.set(this, void 0);
-        _SkyTabComponent__permalinkValue.set(this, void 0);
-        _SkyTabComponent_stateChange.set(this, void 0);
-        _SkyTabComponent__tabHeading.set(this, void 0);
-        _SkyTabComponent__tabIndex.set(this, void 0);
-        _SkyTabComponent__layout.set(this, LAYOUT_DEFAULT);
-        _SkyTabComponent_tabIndexChange.set(this, void 0);
-        _SkyTabComponent_changeDetector.set(this, void 0);
-        _SkyTabComponent_permalinkService.set(this, void 0);
-        _SkyTabComponent_tabsetService.set(this, void 0);
-        __classPrivateFieldSet(this, _SkyTabComponent_changeDetector, changeDetector, "f");
-        __classPrivateFieldSet(this, _SkyTabComponent_permalinkService, permalinkService, "f");
-        __classPrivateFieldSet(this, _SkyTabComponent_tabsetService, tabsetService, "f");
-        const id = nextId++;
-        this.tabPanelId = `sky-tab-${id}`;
-        this.tabButtonId = `${this.tabPanelId}-nav-btn`;
-        __classPrivateFieldSet(this, _SkyTabComponent_activeChange, new BehaviorSubject(undefined), "f");
-        __classPrivateFieldSet(this, _SkyTabComponent_stateChange, new BehaviorSubject(undefined), "f");
-        __classPrivateFieldSet(this, _SkyTabComponent_tabIndexChange, new BehaviorSubject(undefined), "f");
-        __classPrivateFieldGet(this, _SkyTabComponent_instances, "m", _SkyTabComponent_setPermalinkValueOrDefault).call(this);
-    }
-    ngOnChanges(changes) {
-        if ((changes['disabled'] && !changes['disabled'].firstChange) ||
-            (changes['tabHeading'] && !changes['tabHeading'].firstChange) ||
-            (changes['tabHeaderCount'] && !changes['tabHeaderCount'].firstChange) ||
-            (changes['permalinkValue'] && !changes['permalinkValue'].firstChange)) {
-            __classPrivateFieldGet(this, _SkyTabComponent_stateChange, "f").next();
-        }
-    }
-    ngOnDestroy() {
-        __classPrivateFieldGet(this, _SkyTabComponent_activeChange, "f").complete();
-        __classPrivateFieldGet(this, _SkyTabComponent_stateChange, "f").complete();
-        __classPrivateFieldGet(this, _SkyTabComponent_tabIndexChange, "f").complete();
-        if (this.tabIndex !== undefined) {
-            __classPrivateFieldGet(this, _SkyTabComponent_tabsetService, "f").unregisterTab(this.tabIndex);
-        }
-    }
-    init() {
-        __classPrivateFieldSet(this, _SkyTabComponent__tabIndex, __classPrivateFieldGet(this, _SkyTabComponent_tabsetService, "f").registerTab(this.tabIndex), "f");
-    }
-    activate() {
-        __classPrivateFieldSet(this, _SkyTabComponent__active, true, "f");
-        this.showContent = true;
-        __classPrivateFieldGet(this, _SkyTabComponent_changeDetector, "f").markForCheck();
-    }
-    deactivate() {
-        __classPrivateFieldSet(this, _SkyTabComponent__active, false, "f");
-        this.showContent = false;
-        __classPrivateFieldGet(this, _SkyTabComponent_changeDetector, "f").markForCheck();
-    }
-    isCloseable() {
-        return this.close.observers.length > 0;
-    }
-}
-_SkyTabComponent__active = new WeakMap(), _SkyTabComponent_activeChange = new WeakMap(), _SkyTabComponent__permalinkValue = new WeakMap(), _SkyTabComponent_stateChange = new WeakMap(), _SkyTabComponent__tabHeading = new WeakMap(), _SkyTabComponent__tabIndex = new WeakMap(), _SkyTabComponent__layout = new WeakMap(), _SkyTabComponent_tabIndexChange = new WeakMap(), _SkyTabComponent_changeDetector = new WeakMap(), _SkyTabComponent_permalinkService = new WeakMap(), _SkyTabComponent_tabsetService = new WeakMap(), _SkyTabComponent_instances = new WeakSet(), _SkyTabComponent_setPermalinkValueOrDefault = function _SkyTabComponent_setPermalinkValueOrDefault() {
-    this.permalinkValueOrDefault =
-        __classPrivateFieldGet(this, _SkyTabComponent_permalinkService, "f").urlify(this.permalinkValue) ||
-            __classPrivateFieldGet(this, _SkyTabComponent_permalinkService, "f").urlify(this.tabHeading);
-};
-SkyTabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyTabComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: SkyTabsetPermalinkService }, { token: SkyTabsetService }], target: i0.ɵɵFactoryTarget.Component });
-SkyTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SkyTabComponent, selector: "sky-tab", inputs: { active: "active", disabled: "disabled", permalinkValue: "permalinkValue", tabHeaderCount: "tabHeaderCount", tabHeading: "tabHeading", tabIndex: "tabIndex", layout: "layout" }, outputs: { close: "close" }, host: { properties: { "class": "this.cssClass" } }, usesOnChanges: true, ngImport: i0, 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", styles: [":host.sky-layout-host-fit{display:flex;flex-grow:1;position:static}:host.sky-layout-host-fit .sky-tab{flex-grow:1;position:relative}.sky-tab{flex-grow:var(--sky-layout-host-content-flex-grow, 0);overflow:var(--sky-layout-host-content-overflow, visible);padding:var(--sky-layout-host-content-spacing, 0);position:var(--sky-layout-host-content-position, static)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyTabComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'sky-tab', changeDetection: ChangeDetectionStrategy.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", styles: [":host.sky-layout-host-fit{display:flex;flex-grow:1;position:static}:host.sky-layout-host-fit .sky-tab{flex-grow:1;position:relative}.sky-tab{flex-grow:var(--sky-layout-host-content-flex-grow, 0);overflow:var(--sky-layout-host-content-overflow, visible);padding:var(--sky-layout-host-content-spacing, 0);position:var(--sky-layout-host-content-position, static)}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: SkyTabsetPermalinkService }, { type: SkyTabsetService }]; }, propDecorators: { active: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], permalinkValue: [{
-                type: Input
-            }], tabHeaderCount: [{
-                type: Input
-            }], tabHeading: [{
-                type: Input
-            }], tabIndex: [{
-                type: Input
-            }], layout: [{
-                type: Input
-            }], cssClass: [{
-                type: HostBinding,
-                args: ['class']
-            }], close: [{
-                type: Output
-            }] } });
-
-class SkyTabsetNavButtonDisabledPipe {
-    transform(disabled, buttonType, tabToSelectExists, tabToSelectIsDisabled) {
-        if (disabled !== undefined) {
-            return disabled;
-        }
-        else if (buttonType === 'finish') {
-            return false;
-        }
-        return !tabToSelectExists || !!tabToSelectIsDisabled;
-    }
-}
-SkyTabsetNavButtonDisabledPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyTabsetNavButtonDisabledPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-SkyTabsetNavButtonDisabledPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: SkyTabsetNavButtonDisabledPipe, name: "skyTabsetNavButtonDisabled" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyTabsetNavButtonDisabledPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'skyTabsetNavButtonDisabled',
-                }]
-        }] });
-
-var _SkyTabsetNavButtonComponent_instances, _SkyTabsetNavButtonComponent__buttonType, _SkyTabsetNavButtonComponent__disabled, _SkyTabsetNavButtonComponent__tabset, _SkyTabsetNavButtonComponent_activeIndexNumber, _SkyTabsetNavButtonComponent_activeSkyTabIndex, _SkyTabsetNavButtonComponent_currentTabsetSub, _SkyTabsetNavButtonComponent_logger, _SkyTabsetNavButtonComponent_tabCount, _SkyTabsetNavButtonComponent_ngUnsubscribe, _SkyTabsetNavButtonComponent_updateButtonVisibility, _SkyTabsetNavButtonComponent_updateButtonProperties, _SkyTabsetNavButtonComponent_updateTabToSelect;
-const buttonTypeNext = 'next';
-const buttonTypePrevious = 'previous';
-const buttonTypeFinish = 'finish';
-class SkyTabsetNavButtonComponent {
-    /**
-     * The tabset wizard component to associate with the nav button.
-     * @required
-     */
-    get tabset() {
-        return __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent__tabset, "f");
-    }
-    set tabset(value) {
-        __classPrivateFieldSet(this, _SkyTabsetNavButtonComponent__tabset, value, "f");
-        if (__classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_currentTabsetSub, "f")) {
-            __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_currentTabsetSub, "f").unsubscribe();
-        }
-        if (value) {
-            __classPrivateFieldSet(this, _SkyTabsetNavButtonComponent_currentTabsetSub, value.activeChange
-                .pipe(distinctUntilChanged(), takeUntil(__classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_ngUnsubscribe, "f")))
-                .subscribe((index) => {
-                var _a, _b;
-                __classPrivateFieldSet(this, _SkyTabsetNavButtonComponent_activeSkyTabIndex, index, "f");
-                __classPrivateFieldSet(this, _SkyTabsetNavButtonComponent_tabCount, (_b = (_a = __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent__tabset, "f")) === null || _a === void 0 ? void 0 : _a.tabs) === null || _b === void 0 ? void 0 : _b.length, "f");
-                __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_instances, "m", _SkyTabsetNavButtonComponent_updateTabToSelect).call(this);
-                __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_instances, "m", _SkyTabsetNavButtonComponent_updateButtonVisibility).call(this);
-                __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_instances, "m", _SkyTabsetNavButtonComponent_updateButtonProperties).call(this);
-            }), "f");
-        }
-        else {
-            __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_logger, "f").error('The SkyTabsetNavButtonComponent requires a reference to the SkyTabsetComponent it controls.');
-        }
-    }
-    /**
-     * The type of nav button to include.
-     * @required
-     */
-    get buttonType() {
-        return __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent__buttonType, "f");
-    }
-    set buttonType(value) {
-        __classPrivateFieldSet(this, _SkyTabsetNavButtonComponent__buttonType, value, "f");
-        __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_instances, "m", _SkyTabsetNavButtonComponent_updateTabToSelect).call(this);
-        __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_instances, "m", _SkyTabsetNavButtonComponent_updateButtonProperties).call(this);
-        __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_instances, "m", _SkyTabsetNavButtonComponent_updateButtonVisibility).call(this);
-        if (value === buttonTypeFinish) {
-            this.type = 'submit';
-        }
-        else {
-            this.type = 'button';
-        }
-    }
-    /**
-     * Whether to disable the nav button.
-     * Defaults to the disabled state of the next tab for `next`, the existence of a previous tab for `previous`,
-     * and false for `finish`.
-     */
-    set disabled(value) {
-        __classPrivateFieldSet(this, _SkyTabsetNavButtonComponent__disabled, value, "f");
-    }
-    get disabled() {
-        return __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent__disabled, "f");
-    }
-    constructor(logger) {
-        _SkyTabsetNavButtonComponent_instances.add(this);
-        this.isVisible = false;
-        this.type = 'submit';
-        _SkyTabsetNavButtonComponent__buttonType.set(this, void 0);
-        _SkyTabsetNavButtonComponent__disabled.set(this, void 0);
-        _SkyTabsetNavButtonComponent__tabset.set(this, void 0);
-        _SkyTabsetNavButtonComponent_activeIndexNumber.set(this, void 0);
-        _SkyTabsetNavButtonComponent_activeSkyTabIndex.set(this, void 0);
-        _SkyTabsetNavButtonComponent_currentTabsetSub.set(this, void 0);
-        _SkyTabsetNavButtonComponent_logger.set(this, void 0);
-        _SkyTabsetNavButtonComponent_tabCount.set(this, void 0);
-        _SkyTabsetNavButtonComponent_ngUnsubscribe.set(this, new Subject());
-        __classPrivateFieldSet(this, _SkyTabsetNavButtonComponent_logger, logger, "f");
-    }
-    ngOnDestroy() {
-        __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_ngUnsubscribe, "f").next();
-        __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_ngUnsubscribe, "f").complete();
-    }
-    buttonClick() {
-        /* istanbul ignore else */
-        if (this.tabToSelect && !this.tabToSelect.disabled && this.tabset) {
-            this.tabset.active = this.tabToSelect.tabIndex;
-        }
-    }
-}
-_SkyTabsetNavButtonComponent__buttonType = new WeakMap(), _SkyTabsetNavButtonComponent__disabled = new WeakMap(), _SkyTabsetNavButtonComponent__tabset = new WeakMap(), _SkyTabsetNavButtonComponent_activeIndexNumber = new WeakMap(), _SkyTabsetNavButtonComponent_activeSkyTabIndex = new WeakMap(), _SkyTabsetNavButtonComponent_currentTabsetSub = new WeakMap(), _SkyTabsetNavButtonComponent_logger = new WeakMap(), _SkyTabsetNavButtonComponent_tabCount = new WeakMap(), _SkyTabsetNavButtonComponent_ngUnsubscribe = new WeakMap(), _SkyTabsetNavButtonComponent_instances = new WeakSet(), _SkyTabsetNavButtonComponent_updateButtonVisibility = function _SkyTabsetNavButtonComponent_updateButtonVisibility() {
-    const isLastStep = !!__classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_tabCount, "f") && __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_activeIndexNumber, "f") === __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_tabCount, "f") - 1;
-    if (this.buttonType === buttonTypeFinish) {
-        this.isVisible = isLastStep;
-    }
-    else if (this.buttonType === buttonTypeNext) {
-        this.isVisible = !isLastStep;
-    }
-    else {
-        this.isVisible = true;
-    }
-}, _SkyTabsetNavButtonComponent_updateButtonProperties = function _SkyTabsetNavButtonComponent_updateButtonProperties() {
-    var _a;
-    if (this.buttonType === buttonTypeNext ||
-        this.buttonType === buttonTypeFinish) {
-        this.buttonClassName = 'sky-btn-primary';
-    }
-    else {
-        this.buttonClassName = 'sky-btn-default';
-    }
-    this.ariaControls = (_a = this.tabToSelect) === null || _a === void 0 ? void 0 : _a.tabPanelId;
-}, _SkyTabsetNavButtonComponent_updateTabToSelect = function _SkyTabsetNavButtonComponent_updateTabToSelect() {
-    var _a;
-    if ((_a = this.tabset) === null || _a === void 0 ? void 0 : _a.tabs) {
-        const tabs = this.tabset.tabs.toArray();
-        this.tabToSelect = undefined;
-        // tab index can be a number or a string, but we need the actual number index
-        __classPrivateFieldSet(this, _SkyTabsetNavButtonComponent_activeIndexNumber, tabs.findIndex((tab) => tab.tabIndex === __classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_activeSkyTabIndex, "f")), "f");
-        /* istanbul ignore else */
-        if (__classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_activeIndexNumber, "f") !== undefined) {
-            if (this.buttonType === buttonTypeNext) {
-                this.tabToSelect = tabs[__classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_activeIndexNumber, "f") + 1];
-            }
-            else if (this.buttonType === buttonTypePrevious) {
-                this.tabToSelect = tabs[__classPrivateFieldGet(this, _SkyTabsetNavButtonComponent_activeIndexNumber, "f") - 1];
-            }
-        }
-    }
-};
-SkyTabsetNavButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyTabsetNavButtonComponent, deps: [{ token: i1.SkyLogService }], target: i0.ɵɵFactoryTarget.Component });
-SkyTabsetNavButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SkyTabsetNavButtonComponent, selector: "sky-tabset-nav-button", inputs: { tabset: "tabset", buttonType: "buttonType", buttonText: "buttonText", disabled: "disabled" }, ngImport: i0, template: "<button\n  *ngIf=\"isVisible\"\n  class=\"sky-btn sky-margin-inline-sm\"\n  [attr.aria-controls]=\"ariaControls\"\n  [disabled]=\"\n    disabled\n      | skyTabsetNavButtonDisabled\n        : buttonType\n        : !!tabToSelect\n        : tabToSelect?.disabled\n  \"\n  [ngClass]=\"buttonClassName\"\n  [type]=\"type\"\n  (click)=\"buttonType === 'finish' ? null : buttonClick()\"\n>\n  {{ buttonText || ('skyux_tabs_navigator_' + buttonType | skyLibResources) }}\n</button>\n", dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "pipe", type: SkyTabsetNavButtonDisabledPipe, name: "skyTabsetNavButtonDisabled" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyTabsetNavButtonComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'sky-tabset-nav-button', template: "<button\n  *ngIf=\"isVisible\"\n  class=\"sky-btn sky-margin-inline-sm\"\n  [attr.aria-controls]=\"ariaControls\"\n  [disabled]=\"\n    disabled\n      | skyTabsetNavButtonDisabled\n        : buttonType\n        : !!tabToSelect\n        : tabToSelect?.disabled\n  \"\n  [ngClass]=\"buttonClassName\"\n  [type]=\"type\"\n  (click)=\"buttonType === 'finish' ? null : buttonClick()\"\n>\n  {{ buttonText || ('skyux_tabs_navigator_' + buttonType | skyLibResources) }}\n</button>\n" }]
-        }], ctorParameters: function () { return [{ type: i1.SkyLogService }]; }, propDecorators: { tabset: [{
-                type: Input
-            }], buttonType: [{
-                type: Input
-            }], buttonText: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }] } });
-
-var _SkyTabsetAdapterService_instances, _SkyTabsetAdapterService_currentOverflow, _SkyTabsetAdapterService_tabsetRef, _SkyTabsetAdapterService_tabsOffsetLeft, _SkyTabsetAdapterService_overflowChange, _SkyTabsetAdapterService_getTabsOffsetLeft;
-/**
- * @internal
- */
-class SkyTabsetAdapterService {
-    get overflowChange() {
-        return __classPrivateFieldGet(this, _SkyTabsetAdapterService_overflowChange, "f");
-    }
-    constructor() {
-        _SkyTabsetAdapterService_instances.add(this);
-        _SkyTabsetAdapterService_currentOverflow.set(this, false);
-        _SkyTabsetAdapterService_tabsetRef.set(this, void 0);
-        _SkyTabsetAdapterService_tabsOffsetLeft.set(this, void 0);
-        _SkyTabsetAdapterService_overflowChange.set(this, void 0);
-        __classPrivateFieldSet(this, _SkyTabsetAdapterService_overflowChange, new BehaviorSubject(false), "f");
-    }
-    ngOnDestroy() {
-        __classPrivateFieldGet(this, _SkyTabsetAdapterService_overflowChange, "f").complete();
-    }
-    registerTabset(tabsetRef) {
-        __classPrivateFieldSet(this, _SkyTabsetAdapterService_tabsetRef, tabsetRef, "f");
-        __classPrivateFieldSet(this, _SkyTabsetAdapterService_tabsOffsetLeft, __classPrivateFieldGet(this, _SkyTabsetAdapterService_instances, "m", _SkyTabsetAdapterService_getTabsOffsetLeft).call(this, tabsetRef.nativeElement), "f");
-    }
-    /**
-     * Detects if the tab buttons are wider than the tabset container.
-     */
-    detectOverflow() {
-        var _a;
-        const nativeElement = (_a = __classPrivateFieldGet(this, _SkyTabsetAdapterService_tabsetRef, "f")) === null || _a === void 0 ? void 0 : _a.nativeElement;
-        const tabsetRect = nativeElement
-            .querySelector('.sky-tabset')
-            .getBoundingClientRect();
-        const tabButtonsRect = nativeElement
-            .querySelector('.sky-tabset-tabs')
-            .getBoundingClientRect();
-        const tabExtraButtonsRect = nativeElement
-            .querySelector('.sky-tabset-btns')
-            .getBoundingClientRect();
-        const tabButtonsWidth = tabButtonsRect.width + tabExtraButtonsRect.width + __classPrivateFieldGet(this, _SkyTabsetAdapterService_tabsOffsetLeft, "f");
-        const newOverflow = tabButtonsWidth > tabsetRect.width;
-        if (__classPrivateFieldGet(this, _SkyTabsetAdapterService_currentOverflow, "f") !== newOverflow) {
-            __classPrivateFieldSet(this, _SkyTabsetAdapterService_currentOverflow, newOverflow, "f");
-            __classPrivateFieldGet(this, _SkyTabsetAdapterService_overflowChange, "f").next(__classPrivateFieldGet(this, _SkyTabsetAdapterService_currentOverflow, "f"));
-        }
-    }
-}
-_SkyTabsetAdapterService_currentOverflow = new WeakMap(), _SkyTabsetAdapterService_tabsetRef = new WeakMap(), _SkyTabsetAdapterService_tabsOffsetLeft = new WeakMap(), _SkyTabsetAdapterService_overflowChange = new WeakMap(), _SkyTabsetAdapterService_instances = new WeakSet(), _SkyTabsetAdapterService_getTabsOffsetLeft = function _SkyTabsetAdapterService_getTabsOffsetLeft(tabsetEl) {
-    var _a;
-    const tabsetRect = tabsetEl.getBoundingClientRect();
-    // The dropdown element is the first "tab" and always exists in the DOM, even when hidden.
-    const firstTabRect = (_a = tabsetEl
-        .querySelector('.sky-tabset-dropdown')) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-    // Safety check
-    /* istanbul ignore next */
-    if (!firstTabRect) {
-        return 0;
-    }
-    return firstTabRect.left - tabsetRect.left;
-};
-SkyTabsetAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyTabsetAdapterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-SkyTabsetAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyTabsetAdapterService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyTabsetAdapterService, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return []; } });
-
-var _SkyTabsetComponent_instances, _SkyTabsetComponent_ngUnsubscribe, _SkyTabsetComponent_tabComponentsChangeUnsubscribe, _SkyTabsetComponent_tabComponentsStateChangeUnsubscribe, _SkyTabsetComponent__active, _SkyTabsetComponent__permalinkId, _SkyTabsetComponent__tabs, _SkyTabsetComponent__tabDisplayMode, _SkyTabsetComponent__tabStyle, _SkyTabsetComponent_changeDetector, _SkyTabsetComponent_elementRef, _SkyTabsetComponent_adapterService, _SkyTabsetComponent_permalinkService, _SkyTabsetComponent_tabsetService, _SkyTabsetComponent_layoutHostSvc, _SkyTabsetComponent_getInitialTabIndex, _SkyTabsetComponent_listenActiveIndexChange, _SkyTabsetComponent_updateLayout, _SkyTabsetComponent_listenTabComponentsStateChange, _SkyTabsetComponent_initTabComponents, _SkyTabsetComponent_resetTabComponents, _SkyTabsetComponent_emitTabIndexChange, _SkyTabsetComponent_unsubscribeTabComponentsStateChange, _SkyTabsetComponent_listenTabButtonsOverflowChange, _SkyTabsetComponent_listenLocationPopStateChange, _SkyTabsetComponent_setActiveTabIndexByPermalinkId, _SkyTabsetComponent_getActiveTabIndexByPermalinkId, _SkyTabsetComponent_getActiveTabComponent, _SkyTabsetComponent_createTabButtons, _SkyTabsetComponent_updateTabButtons, _SkyTabsetComponent_updateTabsetComponent;
-class SkyTabsetComponent {
-    /**
-     * Activates a tab by its `tabIndex` property.
-     */
-    set active(value) {
-        if (value === undefined ||
-            __classPrivateFieldGet(this, _SkyTabsetComponent_tabsetService, "f").tabIndexesEqual(value, __classPrivateFieldGet(this, _SkyTabsetComponent__active, "f"))) {
-            return;
-        }
-        __classPrivateFieldSet(this, _SkyTabsetComponent__active, value, "f");
-        if (this.tabs) {
-            __classPrivateFieldGet(this, _SkyTabsetComponent_tabsetService, "f").setActiveTabIndex(value);
-        }
-        else {
-            // On init, wait for children tabs to render before broadcasting the active tab index.
-            setTimeout(() => {
-                if (__classPrivateFieldGet(this, _SkyTabsetComponent_tabsetService, "f").isValidTabIndex(value)) {
-                    // On init, yield to the permalink ID, if it exists.
-                    if (__classPrivateFieldGet(this, _SkyTabsetComponent_instances, "m", _SkyTabsetComponent_getActiveTabIndexByPermalinkId).call(this) === undefined) {
-                        __classPrivateFieldGet(this, _SkyTabsetComponent_tabsetService, "f").setActiveTabIndex(value);
-                    }
-                }
-                else {
-                    // Activate the first tab if the new tab index is invalid.
-                    __classPrivateFieldSet(this, _SkyTabsetComponent__active, __classPrivateFieldGet(this, _SkyTabsetComponent_tabsetService, "f").activateFirstTab(), "f");
-                }
-            });
-        }
-    }
-    get active() {
-        return __classPrivateFieldGet(this, _SkyTabsetComponent__active, "f");
-    }
-    /**
-     * Distinguishes a tabset's unique state in the URL by generating a query parameter
-     * that is written as `?<queryParam>-active-tab=<sanitized-tab-heading>`.
-     * The query parameter's value is parsed automatically from the selected tab's heading text,
-     * but you can supply a custom query parameter value for each tab with its `permalinkValue`.
-     * This input only applies when `tabStyle` is `"tabs"`
-     */
-    set permalinkId(value) {
-        if (!value) {
-            __classPrivateFieldSet(this, _SkyTabsetComponent__permalinkId, '', "f");
-        }
-        else {
-            const sanitized = __classPrivateFieldGet(this, _SkyTabsetComponent_permalinkService, "f").urlify(value);
-            __classPrivateFieldSet(this, _SkyTabsetComponent__permalinkId, `${sanitized}-active-tab`, "f");
-        }
-    }
-    get permalinkId() {
-        return __classPrivateFieldGet(this, _SkyTabsetComponent__permalinkId, "f");
-    }
-    /**
-     * The behavior for a series of tabs.
-     * @default "tabs"
-     */
-    set tabStyle(value) {
-        __classPrivateFieldSet(this, _SkyTabsetComponent__tabStyle, value || 'tabs', "f");
-    }
-    get tabStyle() {
-        return __classPrivateFieldGet(this, _SkyTabsetComponent__tabStyle, "f");
-    }
-    set tabDisplayMode(value) {
-        __classPrivateFieldSet(this, _SkyTabsetComponent__tabDisplayMode, value, "f");
-        __classPrivateFieldGet(this, _SkyTabsetComponent_changeDetector, "f").markForCheck();
-    }
-    get tabDisplayMode() {
-        return __classPrivateFieldGet(this, _SkyTabsetComponent__tabDisplayMode, "f");
-    }
-    set tabs(value) {
-        __classPrivateFieldSet(this, _SkyTabsetComponent__tabs, value, "f");
-        __classPrivateFieldGet(this, _SkyTabsetComponent_tabComponentsChangeUnsubscribe, "f").next();
-        value === null || value === void 0 ? void 0 : value.changes.pipe(takeUntil(__classPrivateFieldGet(this, _SkyTabsetComponent_tabComponentsChangeUnsubscribe, "f"))).subscribe(() => {
-            __classPrivateFieldGet(this, _SkyTabsetComponent_instances, "m", _SkyTabsetComponent_resetTabComponents).call(this);
-        });
-    }
-    get tabs() {
-        return __classPrivateFieldGet(this, _SkyTabsetComponent__tabs, "f");
-    }
-    constructor(changeDetector, elementRef, adapterService, permalinkService, tabsetService) {
-        _SkyTabsetComponent_instances.add(this);
-        /**
-         * Fires when the active tab changes. This event emits the index of the active tab.
-         */
-        this.activeChange = new EventEmitter();
-        /**
-         * Fires when users click the button to add a new tab.
-         * The new tab button is added to the tab area when you specify a listener for this event.
-         * This event only applies when `tabStyle` is `"tabs"`.
-         */
-        this.newTab = new EventEmitter();
-        /**
-         * Fires when users click the button to open a tab.
-         * The open tab button is added to the tab area when you specify a listener for this event.
-         * This event only applies when `tabStyle` is `"tabs"`.
-         */
-        this.openTab = new EventEmitter();
-        /**
-         * Fires when any tab's `tabIndex` value changes.
-         * This event only applies when `tabStyle` is `"tabs"`.
-         */
-        this.tabIndexesChange = new EventEmitter();
-        this.cssClass = 'sky-tabset-layout-none';
-        this.dropdownTriggerButtonText = '';
-        this.tabButtons = [];
-        _SkyTabsetComponent_ngUnsubscribe.set(this, new Subject());
-        _SkyTabsetComponent_tabComponentsChangeUnsubscribe.set(this, new Subject());
-        _SkyTabsetComponent_tabComponentsStateChangeUnsubscribe.set(this, new Subject());
-        _SkyTabsetComponent__active.set(this, void 0);
-        _SkyTabsetComponent__permalinkId.set(this, '');
-        _SkyTabsetComponent__tabs.set(this, void 0);
-        _SkyTabsetComponent__tabDisplayMode.set(this, 'tabs');
-        _SkyTabsetComponent__tabStyle.set(this, 'tabs');
-        _SkyTabsetComponent_changeDetector.set(this, void 0);
-        _SkyTabsetComponent_elementRef.set(this, void 0);
-        _SkyTabsetComponent_adapterService.set(this, void 0);
-        _SkyTabsetComponent_permalinkService.set(this, void 0);
-        _SkyTabsetComponent_tabsetService.set(this, void 0);
-        _SkyTabsetComponent_layoutHostSvc.set(this, inject(SkyLayoutHostService, { optional: true }));
-        __classPrivateFieldSet(this, _SkyTabsetComponent_changeDetector, changeDetector, "f");
-        __classPrivateFieldSet(this, _SkyTabsetComponent_elementRef, elementRef, "f");
-        __classPrivateFieldSet(this, _SkyTabsetComponent_adapterService, adapterService, "f");
-        __classPrivateFieldSet(this, _SkyTabsetComponent_permalinkService, permalinkService, "f");
-        __classPrivateFieldSet(this, _SkyTabsetComponent_tabsetService, tabsetService, "f");
-    }
-    ngAfterViewInit() {
-        __classPrivateFieldGet(this, _SkyTabsetComponent_instances, "m", _SkyTabsetComponent_initTabComponents).call(this);
-        const initialTabIndex = __classPrivateFieldGet(this, _SkyTabsetComponent_instances, "m", _SkyTabsetComponent_getInitialTabIndex).call(this);
-        __classPrivateFieldGet(this, _SkyTabsetComponent_tabsetService, "f").setActiveTabIndex(initialTabIndex);
-        __classPrivateFieldGet(this, _SkyTabsetComponent_instances, "m", _SkyTabsetComponent_listenTabButtonsOverflowChange).call(this);
-        __classPrivateFieldGet(this, _SkyTabsetComponent_instances, "m", _SkyTabsetComponent_listenLocationPopStateChange).call(this);
-        // If the currently active tab is getting unregistered, activate the next one.
-        __classPrivateFieldGet(this, _SkyTabsetComponent_tabsetService, "f").activeTabUnregistered
-            .pipe(takeUntil(__classPrivateFieldGet(this, _SkyTabsetComponent_ngUnsubscribe, "f")))
-            .subscribe((tab) => {
-            // Wait for the new tabs to render before activating.
-            setTimeout(() => {
-                __classPrivateFieldGet(this, _SkyTabsetComponent_tabsetService, "f").activateNearestTab(tab.arrayIndex);
-            });
-        });
-        __classPrivateFieldGet(this, _SkyTabsetComponent_tabsetService, "f").activeTabLayout
-            .pipe(takeUntil(__classPrivateFieldGet(this, _SkyTabsetComponent_ngUnsubscribe, "f")))
-            .subscribe((layout) => {
-            __classPrivateFieldGet(this, _SkyTabsetComponent_instances, "m", _SkyTabsetComponent_updateLayout).call(this, layout);
-        });
-        // Let the tabset render the initial active index before listening for changes.
-        setTimeout(() => {
-            __classPrivateFieldGet(this, _SkyTabsetComponent_instances, "m", _SkyTabsetComponent_listenTabComponentsStateChange).call(this);
-            __classPrivateFieldGet(this, _SkyTabsetComponent_instances, "m", _SkyTabsetComponent_listenActiveIndexChange).call(this);
-            __classPrivateFieldGet(this, _SkyTabsetComponent_permalinkService, "f").init();
-        });
-    }
-    ngOnDestroy() {
-        __classPrivateFieldGet(this, _SkyTabsetComponent_ngUnsubscribe, "f").next();
-        __classPrivateFieldGet(this, _SkyTabsetComponent_ngUnsubscribe, "f").complete();
-        __classPrivateFieldGet(this, _SkyTabsetComponent_tabComponentsChangeUnsubscribe, "f").next();
-        __classPrivateFieldGet(this, _SkyTabsetComponent_tabComponentsChangeUnsubscribe, "f").complete();
-        __classPrivateFieldGet(this, _SkyTabsetComponent_instances, "m", _SkyTabsetComponent_unsubscribeTabComponentsStateChange).call(this);
-        if (this.permalinkId) {
-            __classPrivateFieldGet(this, _SkyTabsetComponent_permalinkService, "f").clearParam(this.permalinkId);
-        }
-    }
-    onWindowResize() {
-        __classPrivateFieldGet(this, _SkyTabsetComponent_adapterService, "f").detectOverflow();
-    }
-    onTabCloseClick(tabButton) {
-        var _a;
-        const tabComponent = (_a = this.tabs) === null || _a === void 0 ? void 0 : _a.find((tab) => __classPrivateFieldGet(this, _SkyTabsetComponent_tabsetService, "f").tabIndexesEqual(tab.tabIndex, tabButton.tabIndex));
-        tabComponent === null || tabComponent === void 0 ? void 0 : tabComponent.close.emit();
-    }
-    onTabButtonClick(tabButton) {
-        __classPrivateFieldGet(this, _SkyTabsetComponent_tabsetService, "f").setActiveTabIndex(tabButton.tabIndex);
-    }
-    onNewTabClick() {
-        this.newTab.emit();
-    }
-    onOpenTabClick() {
-        this.openTab.emit();
-    }
-    onRightKeyDown() {
-        __classPrivateFieldGet(this, _SkyTabsetComponent_tabsetService, "f").focusNextTabBtn(this.tabButtons);
-    }
-    onLeftKeyDown() {
-        __classPrivateFieldGet(this, _SkyTabsetComponent_tabsetService, "f").focusPrevTabBtn(this.tabButtons);
-    }
-    onHomeKeyDown() {
-        __classPrivateFieldGet(this, _SkyTabsetComponent_tabsetService, "f").focusFirstOrNearestTabBtn(this.tabButtons);
-    }
-    onEndKeyDown() {
-        __classPrivateFieldGet(this, _SkyTabsetComponent_tabsetService, "f").focusLastOrNearestTabBtn(this.tabButtons);
-    }
-}
-_SkyTabsetComponent_ngUnsubscribe = new WeakMap(), _SkyTabsetComponent_tabComponentsChangeUnsubscribe = new WeakMap(), _SkyTabsetComponent_tabComponentsStateChangeUnsubscribe = new WeakMap(), _SkyTabsetComponent__active = new WeakMap(), _SkyTabsetComponent__permalinkId = new WeakMap(), _SkyTabsetComponent__tabs = new WeakMap(), _SkyTabsetComponent__tabDisplayMode = new WeakMap(), _SkyTabsetComponent__tabStyle = new WeakMap(), _SkyTabsetComponent_changeDetector = new WeakMap(), _SkyTabsetComponent_elementRef = new WeakMap(), _SkyTabsetComponent_adapterService = new WeakMap(), _SkyTabsetComponent_permalinkService = new WeakMap(), _SkyTabsetComponent_tabsetService = new WeakMap(), _SkyTabsetComponent_layoutHostSvc = new WeakMap(), _SkyTabsetComponent_instances = new WeakSet(), _SkyTabsetComponent_getInitialTabIndex = function _SkyTabsetComponent_getInitialTabIndex() {
-    var _a;
-    let activeIndex = __classPrivateFieldGet(this, _SkyTabsetComponent_instances, "m", _SkyTabsetComponent_getActiveTabIndexByPermalinkId).call(this);
-    if (activeIndex === undefined) {
-        activeIndex = (_a = __classPrivateFieldGet(this, _SkyTabsetComponent_instances, "m", _SkyTabsetComponent_getActiveTabComponent).call(this)) === null || _a === void 0 ? void 0 : _a.tabIndex;
-        if (activeIndex === undefined) {
-            activeIndex = this.active;
-        }
-    }
-    return activeIndex;
-}, _SkyTabsetComponent_listenActiveIndexChange = function _SkyTabsetComponent_listenActiveIndexChange() {
-    __classPrivateFieldGet(this, _SkyTabsetComponent_tabsetService, "f").activeTabIndex
-        .pipe(distinctUntilChanged(), takeUntil(__classPrivateFieldGet(this, _SkyTabsetComponent_ngUnsubscribe, "f")))
-        .subscribe((activeIndex) => {
-        __classPrivateFieldGet(this, _SkyTabsetComponent_instances, "m", _SkyTabsetComponent_updateTabsetComponent).call(this, activeIndex);
-        const activeTab = __classPrivateFieldGet(this, _SkyTabsetComponent_instances, "m", _SkyTabsetComponent_getActiveTabComponent).call(this);
-        __classPrivateFieldGet(this, _SkyTabsetComponent_instances, "m", _SkyTabsetComponent_updateLayout).call(this, activeTab === null || activeTab === void 0 ? void 0 : activeTab.layout);
-    });
-}, _SkyTabsetComponent_updateLayout = function _SkyTabsetComponent_updateLayout(layout) {
-    if (__classPrivateFieldGet(this, _SkyTabsetComponent_layoutHostSvc, "f") && layout) {
-        __classPrivateFieldGet(this, _SkyTabsetComponent_layoutHostSvc, "f").setHostLayoutForChild({
-            layout,
-        });
-        this.cssClass = `sky-tabset-layout-${layout}`;
-    }
-}, _SkyTabsetComponent_listenTabComponentsStateChange = function _SkyTabsetComponent_listenTabComponentsStateChange() {
-    if (this.tabs) {
-        combineLatest(this.tabs.map((tab) => tab.activeChange))
-            .pipe(takeUntil(race(__classPrivateFieldGet(this, _SkyTabsetComponent_tabComponentsStateChangeUnsubscribe, "f"), __classPrivateFieldGet(this, _SkyTabsetComponent_ngUnsubscribe, "f"))))
-            .subscribe(() => {
-            // Wait for the tab components to render changes before finding the active one.
-            setTimeout(() => {
-                var _a;
-                const tabIndex = (_a = __classPrivateFieldGet(this, _SkyTabsetComponent_instances, "m", _SkyTabsetComponent_getActiveTabComponent).call(this)) === null || _a === void 0 ? void 0 : _a.tabIndex;
-                __classPrivateFieldGet(this, _SkyTabsetComponent_tabsetService, "f").setActiveTabIndex(tabIndex);
-            });
-        });
-        combineLatest(this.tabs.map((tab) => tab.tabIndexChange))
-            .pipe(takeUntil(race(__classPrivateFieldGet(this, _SkyTabsetComponent_tabComponentsStateChangeUnsubscribe, "f"), __classPrivateFieldGet(this, _SkyTabsetComponent_ngUnsubscribe, "f"))))
-            .subscribe(() => {
-            // Don't emit the first change.
-            if (this.lastActiveTabIndex !== undefined) {
-                // Wait for the tab components to render changes before updating the view.
-                setTimeout(() => {
-                    __classPrivateFieldGet(this, _SkyTabsetComponent_instances, "m", _SkyTabsetComponent_updateTabsetComponent).call(this, __classPrivateFieldGet(this, _SkyTabsetComponent_tabsetService, "f").currentActiveTabIndex, true);
-                    __classPrivateFieldGet(this, _SkyTabsetComponent_instances, "m", _SkyTabsetComponent_emitTabIndexChange).call(this);
-                });
-            }
-        });
-        combineLatest(this.tabs.map((tab) => tab.stateChange))
-            .pipe(takeUntil(race(__classPrivateFieldGet(this, _SkyTabsetComponent_tabComponentsStateChangeUnsubscribe, "f"), __classPrivateFieldGet(this, _SkyTabsetComponent_ngUnsubscribe, "f"))))
-            .subscribe(() => {
-            // Wait for the tab components to render changes before finding the active one.
-            setTimeout(() => {
-                __classPrivateFieldGet(this, _SkyTabsetComponent_instances, "m", _SkyTabsetComponent_updateTabsetComponent).call(this, __classPrivateFieldGet(this, _SkyTabsetComponent_tabsetService, "f").currentActiveTabIndex, true);
-            });
-        });
-    }
-}, _SkyTabsetComponent_initTabComponents = function _SkyTabsetComponent_initTabComponents() {
-    var _a;
-    (_a = this.tabs) === null || _a === void 0 ? void 0 : _a.forEach((tab) => tab.init());
-}, _SkyTabsetComponent_resetTabComponents = function _SkyTabsetComponent_resetTabComponents() {
-    var _a, _b;
-    __classPrivateFieldGet(this, _SkyTabsetComponent_instances, "m", _SkyTabsetComponent_unsubscribeTabComponentsStateChange).call(this);
-    __classPrivateFieldGet(this, _SkyTabsetComponent_tabsetService, "f").unregisterAll();
-    // If there are no tab components, do a hard reset of the view.
-    if (((_a = this.tabs) === null || _a === void 0 ? void 0 : _a.length) === 0) {
-        __classPrivateFieldGet(this, _SkyTabsetComponent_instances, "m", _SkyTabsetComponent_updateTabsetComponent).call(this, 0, true);
-        return;
-    }
-    __classPrivateFieldGet(this, _SkyTabsetComponent_instances, "m", _SkyTabsetComponent_initTabComponents).call(this);
-    const activeIndex = (_b = __classPrivateFieldGet(this, _SkyTabsetComponent_instances, "m", _SkyTabsetComponent_getActiveTabComponent).call(this)) === null || _b === void 0 ? void 0 : _b.tabIndex;
-    __classPrivateFieldGet(this, _SkyTabsetComponent_tabsetService, "f").setActiveTabIndex(activeIndex, {
-        emitChange: false,
-    });
-    __classPrivateFieldGet(this, _SkyTabsetComponent_instances, "m", _SkyTabsetComponent_listenTabComponentsStateChange).call(this);
-}, _SkyTabsetComponent_emitTabIndexChange = function _SkyTabsetComponent_emitTabIndexChange() {
-    var _a;
-    this.tabIndexesChange.emit({
-        tabs: (_a = this.tabs) === null || _a === void 0 ? void 0 : _a.map((tab) => ({
-            tabHeading: tab.tabHeading,
-            tabIndex: tab.tabIndex,
-        })),
-    });
-}, _SkyTabsetComponent_unsubscribeTabComponentsStateChange = function _SkyTabsetComponent_unsubscribeTabComponentsStateChange() {
-    __classPrivateFieldGet(this, _SkyTabsetComponent_tabComponentsStateChangeUnsubscribe, "f").next();
-    __classPrivateFieldGet(this, _SkyTabsetComponent_tabComponentsStateChangeUnsubscribe, "f").complete();
-    __classPrivateFieldSet(this, _SkyTabsetComponent_tabComponentsStateChangeUnsubscribe, new Subject(), "f");
-}, _SkyTabsetComponent_listenTabButtonsOverflowChange = function _SkyTabsetComponent_listenTabButtonsOverflowChange() {
-    __classPrivateFieldGet(this, _SkyTabsetComponent_adapterService, "f").registerTabset(__classPrivateFieldGet(this, _SkyTabsetComponent_elementRef, "f"));
-    __classPrivateFieldGet(this, _SkyTabsetComponent_adapterService, "f").overflowChange
-        .pipe(takeUntil(__classPrivateFieldGet(this, _SkyTabsetComponent_ngUnsubscribe, "f")))
-        .subscribe((isOverflowing) => {
-        this.tabDisplayMode = isOverflowing ? 'dropdown' : 'tabs';
-        __classPrivateFieldGet(this, _SkyTabsetComponent_changeDetector, "f").markForCheck();
-    });
-}, _SkyTabsetComponent_listenLocationPopStateChange = function _SkyTabsetComponent_listenLocationPopStateChange() {
-    __classPrivateFieldGet(this, _SkyTabsetComponent_permalinkService, "f").popStateChange
-        .pipe(takeUntil(__classPrivateFieldGet(this, _SkyTabsetComponent_ngUnsubscribe, "f")))
-        .subscribe(() => {
-        __classPrivateFieldGet(this, _SkyTabsetComponent_instances, "m", _SkyTabsetComponent_setActiveTabIndexByPermalinkId).call(this);
-    });
-}, _SkyTabsetComponent_setActiveTabIndexByPermalinkId = function _SkyTabsetComponent_setActiveTabIndexByPermalinkId() {
-    const activeIndex = __classPrivateFieldGet(this, _SkyTabsetComponent_instances, "m", _SkyTabsetComponent_getActiveTabIndexByPermalinkId).call(this);
-    __classPrivateFieldGet(this, _SkyTabsetComponent_tabsetService, "f").setActiveTabIndex(activeIndex);
-}, _SkyTabsetComponent_getActiveTabIndexByPermalinkId = function _SkyTabsetComponent_getActiveTabIndexByPermalinkId() {
-    var _a, _b;
-    if (this.permalinkId) {
-        const paramValue = __classPrivateFieldGet(this, _SkyTabsetComponent_permalinkService, "f").getParam(this.permalinkId);
-        if (paramValue) {
-            return (_b = (_a = this.tabs) === null || _a === void 0 ? void 0 : _a.find((tab) => tab.permalinkValueOrDefault === paramValue)) === null || _b === void 0 ? void 0 : _b.tabIndex;
-        }
-        return undefined;
-    }
-    return undefined;
-}, _SkyTabsetComponent_getActiveTabComponent = function _SkyTabsetComponent_getActiveTabComponent() {
-    var _a;
-    return (_a = this.tabs) === null || _a === void 0 ? void 0 : _a.toArray().reverse().find((tab) => tab.active === true);
-}, _SkyTabsetComponent_createTabButtons = function _SkyTabsetComponent_createTabButtons(activeIndex) {
-    // Safety check
-    /* istanbul ignore next */
-    if (!this.tabs) {
-        return [];
-    }
-    return this.tabs.map((tab, index) => ({
-        active: __classPrivateFieldGet(this, _SkyTabsetComponent_tabsetService, "f").tabIndexesEqual(tab.tabIndex, activeIndex),
-        closeable: tab.isCloseable(),
-        ariaControls: tab.tabPanelId,
-        disabled: tab.disabled,
-        buttonHref: tab.disabled
-            ? null
-            : __classPrivateFieldGet(this, _SkyTabsetComponent_permalinkService, "f").getParamHref(this.permalinkId, tab.permalinkValueOrDefault),
-        buttonId: tab.tabButtonId,
-        buttonTextCount: tab.tabHeaderCount,
-        buttonText: tab.tabHeading,
-        tabIndex: tab.tabIndex,
-        tabNumber: index + 1,
-        totalTabsCount: this.tabs.length,
-    }));
-}, _SkyTabsetComponent_updateTabButtons = function _SkyTabsetComponent_updateTabButtons(activeIndex) {
-    this.tabButtons.forEach((button) => {
-        button.active = __classPrivateFieldGet(this, _SkyTabsetComponent_tabsetService, "f").tabIndexesEqual(button.tabIndex, activeIndex);
-    });
-}, _SkyTabsetComponent_updateTabsetComponent = function _SkyTabsetComponent_updateTabsetComponent(activeIndex, regenerateTabButtons = false) {
-    var _a, _b, _c, _d;
-    // Activate/deactivate tab components.
-    (_a = this.tabs) === null || _a === void 0 ? void 0 : _a.forEach((tab) => {
-        __classPrivateFieldGet(this, _SkyTabsetComponent_tabsetService, "f").tabIndexesEqual(tab.tabIndex, activeIndex)
-            ? tab.activate()
-            : tab.deactivate();
-    });
-    // Update the tab button models.
-    if (regenerateTabButtons || !this.tabButtons.length) {
-        this.tabButtons = __classPrivateFieldGet(this, _SkyTabsetComponent_instances, "m", _SkyTabsetComponent_createTabButtons).call(this, activeIndex);
-    }
-    else {
-        __classPrivateFieldGet(this, _SkyTabsetComponent_instances, "m", _SkyTabsetComponent_updateTabButtons).call(this, activeIndex);
-    }
-    // Update the dropdown trigger button text.
-    this.dropdownTriggerButtonText =
-        (_c = (_b = this.tabButtons.find((b) => {
-            return __classPrivateFieldGet(this, _SkyTabsetComponent_tabsetService, "f").tabIndexesEqual(b.tabIndex, activeIndex);
-        })) === null || _b === void 0 ? void 0 : _b.buttonText) !== null && _c !== void 0 ? _c : '';
-    // Set the query params based on active tab.
-    if (this.permalinkId) {
-        const activeTabComponent = (_d = this.tabs) === null || _d === void 0 ? void 0 : _d.find((tab) => {
-            return __classPrivateFieldGet(this, _SkyTabsetComponent_tabsetService, "f").tabIndexesEqual(tab.tabIndex, activeIndex);
-        });
-        if (activeTabComponent) {
-            __classPrivateFieldGet(this, _SkyTabsetComponent_permalinkService, "f").setParam(this.permalinkId, activeTabComponent.permalinkValueOrDefault);
-        }
-    }
-    // Wait for tab button view models to render before gauging dimensions.
-    setTimeout(() => {
-        __classPrivateFieldGet(this, _SkyTabsetComponent_adapterService, "f").detectOverflow();
-    });
-    __classPrivateFieldGet(this, _SkyTabsetComponent_changeDetector, "f").markForCheck();
-    // Emit the new active index value to consumers.
-    if (this.lastActiveTabIndex !== activeIndex) {
-        this.lastActiveTabIndex = activeIndex;
-        this.activeChange.emit(activeIndex);
-    }
-};
-SkyTabsetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyTabsetComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: SkyTabsetAdapterService }, { token: SkyTabsetPermalinkService }, { token: SkyTabsetService }], target: i0.ɵɵFactoryTarget.Component });
-SkyTabsetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SkyTabsetComponent, selector: "sky-tabset", inputs: { active: "active", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", permalinkId: "permalinkId", tabStyle: "tabStyle" }, outputs: { activeChange: "activeChange", newTab: "newTab", openTab: "openTab", tabIndexesChange: "tabIndexesChange" }, host: { properties: { "class": "this.cssClass" } }, providers: [
-        SkyTabsetAdapterService,
-        SkyTabsetPermalinkService,
-        SkyTabsetService,
-    ], queries: [{ propertyName: "tabs", predicate: SkyTabComponent }], ngImport: i0, template: "<div\n  class=\"sky-tabset\"\n  role=\"tablist\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.aria-labelledby]=\"ariaLabelledBy\"\n  [ngClass]=\"\n    'sky-tabset-mode-' + tabDisplayMode + ' sky-tabset-style-' + tabStyle\n  \"\n  (window:resize)=\"onWindowResize()\"\n  (keydown.arrowright)=\"onRightKeyDown()\"\n  (keydown.arrowleft)=\"onLeftKeyDown()\"\n  (keydown.home)=\"onHomeKeyDown()\"\n  (keydown.end)=\"onEndKeyDown()\"\n>\n  <span class=\"sky-tabset-dropdown\">\n    <sky-dropdown *ngIf=\"tabDisplayMode === 'dropdown'\" buttonType=\"tab\">\n      <sky-dropdown-button>\n        {{ dropdownTriggerButtonText }}\n      </sky-dropdown-button>\n      <sky-dropdown-menu>\n        <sky-dropdown-item\n          *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\n              *ngTemplateOutlet=\"\n                tabButtonTemplate;\n                context: {\n                  $implicit: tabButton\n                }\n              \"\n            ></ng-container>\n          </div>\n        </sky-dropdown-item>\n      </sky-dropdown-menu>\n    </sky-dropdown>\n  </span>\n  <span class=\"sky-tabset-tabs\">\n    <ng-container *ngFor=\"let tabButton of tabButtons\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          tabButtonTemplate;\n          context: {\n            $implicit: tabButton\n          }\n        \"\n      ></ng-container>\n    </ng-container>\n  </span>\n  <span class=\"sky-tabset-btns\">\n    <button\n      *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 icon=\"plus-circle\" size=\"lg\"> </sky-icon>\n    </button>\n    <button\n      *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 icon=\"folder-open-o\" size=\"lg\"> </sky-icon>\n    </button>\n  </span>\n</div>\n<ng-content></ng-content>\n\n<ng-template let-tabButton #tabButtonTemplate>\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    [tabIndex]=\"tabButton.tabIndex\"\n    [tabStyle]=\"tabStyle\"\n    [tabNumber]=\"tabButton.tabNumber\"\n    [totalTabsCount]=\"tabButton.totalTabsCount\"\n    (buttonClick)=\"onTabButtonClick(tabButton)\"\n    (closeClick)=\"onTabCloseClick(tabButton)\"\n  ></sky-tab-button>\n</ng-template>\n", styles: ["sky-tabset.sky-tabset-layout-fit{position:absolute;inset:0;display:flex;flex-direction:column}sky-tabset.sky-tabset-layout-fit .sky-tabset{flex-grow:0}.sky-tabset{--sky-tabset-margin: 0;align-items:center;border-bottom:2px solid #0974a1;display:flex;list-style-type:none;margin:var(--sky-tabset-margin);padding:0 0 0 var(--sky-layout-host-tab-content-spacing, 15px);white-space:nowrap;flex-grow:var(--sky-layout-host-content-flex-grow, 0);overflow:var(--sky-layout-host-content-overflow, hidden);position:var(--sky-layout-host-content-position, static)}.sky-tabset.sky-tabset-style-wizard{border-bottom:none;padding-left:0}.sky-modal-content .sky-tabset-style-tabs{--sky-tabset-margin: var( --sky-compat-tabset-tabs-modal-margin, 0 -15px 20px )}.sky-modal-content .sky-tabset-style-wizard{--sky-tabset-margin: var( --sky-compat-tabset-wizard-modal-margin, 0 0 20px )}.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-modal-content .sky-tabset{--sky-tabset-margin: -10px -30px 30px;padding-left:30px;padding-right:30px}.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}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5.λ2, selector: "sky-dropdown-button" }, { kind: "component", type: i5.λ3, selector: "sky-dropdown", inputs: ["buttonStyle", "buttonType", "disabled", "dismissOnBlur", "label", "horizontalAlignment", "messageStream", "title", "trigger"] }, { kind: "component", type: i5.λ1, selector: "sky-dropdown-item", inputs: ["ariaRole"] }, { kind: "component", type: i5.λ4, selector: "sky-dropdown-menu", inputs: ["ariaLabelledBy", "ariaRole", "useNativeFocus"], outputs: ["menuChanges"] }, { kind: "component", type: i6.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i7.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "component", type: SkyTabButtonComponent, selector: "sky-tab-button", inputs: ["active", "ariaControls", "buttonHref", "buttonId", "buttonText", "buttonTextCount", "closeable", "disabled", "tabIndex", "tabNumber", "totalTabsCount", "tabStyle"], outputs: ["buttonClick", "closeClick"] }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyTabsetComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'sky-tabset', providers: [
-                        SkyTabsetAdapterService,
-                        SkyTabsetPermalinkService,
-                        SkyTabsetService,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"sky-tabset\"\n  role=\"tablist\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.aria-labelledby]=\"ariaLabelledBy\"\n  [ngClass]=\"\n    'sky-tabset-mode-' + tabDisplayMode + ' sky-tabset-style-' + tabStyle\n  \"\n  (window:resize)=\"onWindowResize()\"\n  (keydown.arrowright)=\"onRightKeyDown()\"\n  (keydown.arrowleft)=\"onLeftKeyDown()\"\n  (keydown.home)=\"onHomeKeyDown()\"\n  (keydown.end)=\"onEndKeyDown()\"\n>\n  <span class=\"sky-tabset-dropdown\">\n    <sky-dropdown *ngIf=\"tabDisplayMode === 'dropdown'\" buttonType=\"tab\">\n      <sky-dropdown-button>\n        {{ dropdownTriggerButtonText }}\n      </sky-dropdown-button>\n      <sky-dropdown-menu>\n        <sky-dropdown-item\n          *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\n              *ngTemplateOutlet=\"\n                tabButtonTemplate;\n                context: {\n                  $implicit: tabButton\n                }\n              \"\n            ></ng-container>\n          </div>\n        </sky-dropdown-item>\n      </sky-dropdown-menu>\n    </sky-dropdown>\n  </span>\n  <span class=\"sky-tabset-tabs\">\n    <ng-container *ngFor=\"let tabButton of tabButtons\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          tabButtonTemplate;\n          context: {\n            $implicit: tabButton\n          }\n        \"\n      ></ng-container>\n    </ng-container>\n  </span>\n  <span class=\"sky-tabset-btns\">\n    <button\n      *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 icon=\"plus-circle\" size=\"lg\"> </sky-icon>\n    </button>\n    <button\n      *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 icon=\"folder-open-o\" size=\"lg\"> </sky-icon>\n    </button>\n  </span>\n</div>\n<ng-content></ng-content>\n\n<ng-template let-tabButton #tabButtonTemplate>\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    [tabIndex]=\"tabButton.tabIndex\"\n    [tabStyle]=\"tabStyle\"\n    [tabNumber]=\"tabButton.tabNumber\"\n    [totalTabsCount]=\"tabButton.totalTabsCount\"\n    (buttonClick)=\"onTabButtonClick(tabButton)\"\n    (closeClick)=\"onTabCloseClick(tabButton)\"\n  ></sky-tab-button>\n</ng-template>\n", styles: ["sky-tabset.sky-tabset-layout-fit{position:absolute;inset:0;display:flex;flex-direction:column}sky-tabset.sky-tabset-layout-fit .sky-tabset{flex-grow:0}.sky-tabset{--sky-tabset-margin: 0;align-items:center;border-bottom:2px solid #0974a1;display:flex;list-style-type:none;margin:var(--sky-tabset-margin);padding:0 0 0 var(--sky-layout-host-tab-content-spacing, 15px);white-space:nowrap;flex-grow:var(--sky-layout-host-content-flex-grow, 0);overflow:var(--sky-layout-host-content-overflow, hidden);position:var(--sky-layout-host-content-position, static)}.sky-tabset.sky-tabset-style-wizard{border-bottom:none;padding-left:0}.sky-modal-content .sky-tabset-style-tabs{--sky-tabset-margin: var( --sky-compat-tabset-tabs-modal-margin, 0 -15px 20px )}.sky-modal-content .sky-tabset-style-wizard{--sky-tabset-margin: var( --sky-compat-tabset-wizard-modal-margin, 0 0 20px )}.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-modal-content .sky-tabset{--sky-tabset-margin: -10px -30px 30px;padding-left:30px;padding-right:30px}.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}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: SkyTabsetAdapterService }, { type: SkyTabsetPermalinkService }, { type: SkyTabsetService }]; }, propDecorators: { active: [{
-                type: Input
-            }], ariaLabel: [{
-                type: Input
-            }], ariaLabelledBy: [{
-                type: Input
-            }], permalinkId: [{
-                type: Input
-            }], tabStyle: [{
-                type: Input
-            }], activeChange: [{
-                type: Output
-            }], newTab: [{
-                type: Output
-            }], openTab: [{
-                type: Output
-            }], tabIndexesChange: [{
-                type: Output
-            }], tabs: [{
-                type: ContentChildren,
-                args: [SkyTabComponent]
-            }], cssClass: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
-
-class SkyTabsModule {
-}
-SkyTabsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyTabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SkyTabsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: SkyTabsModule, declarations: [SkyTabButtonComponent,
-        SkyTabComponent,
-        SkyTabsetComponent,
-        SkyTabsetNavButtonComponent,
-        SkyTabsetNavButtonDisabledPipe], imports: [CommonModule,
-        RouterModule,
-        SkyDropdownModule,
-        SkyI18nModule,
-        SkyIconModule,
-        SkyTabsResourcesModule,
-        SkyThemeModule], exports: [SkyTabComponent, SkyTabsetComponent, SkyTabsetNavButtonComponent] });
-SkyTabsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyTabsModule, imports: [CommonModule,
-        RouterModule,
-        SkyDropdownModule,
-        SkyI18nModule,
-        SkyIconModule,
-        SkyTabsResourcesModule,
-        SkyThemeModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyTabsModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        SkyTabButtonComponent,
-                        SkyTabComponent,
-                        SkyTabsetComponent,
-                        SkyTabsetNavButtonComponent,
-                        SkyTabsetNavButtonDisabledPipe,
-                    ],
-                    imports: [
-                        CommonModule,
-                        RouterModule,
-                        SkyDropdownModule,
-                        SkyI18nModule,
-                        SkyIconModule,
-                        SkyTabsResourcesModule,
-                        SkyThemeModule,
-                    ],
-                    exports: [SkyTabComponent, SkyTabsetComponent, SkyTabsetNavButtonComponent],
-                }]
-        }] });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { SkySectionedFormComponent, SkySectionedFormMessageType, SkySectionedFormModule, SkySectionedFormService, SkyTabsModule, SkyVerticalTabsetModule, SkyTabComponent as λ1, SkyTabsetComponent as λ2, SkyTabsetNavButtonComponent as λ3, SkyVerticalTabComponent as λ4, SkySectionedFormSectionComponent as λ5, SkyVerticalTabsetComponent as λ6, SkyVerticalTabsetGroupComponent as λ7 };
-//# sourceMappingURL=skyux-tabs.mjs.map