@skyux/tabs 8.6.0 → 9.0.0-alpha.0

package/fesm2022/skyux-tabs.mjs

@@ -0,0 +1,2586 @@
+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 { 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 {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyTabsResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: SkyTabsResourcesModule, exports: [SkyI18nModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyTabsResourcesModule, providers: [
+            {
+                provide: SKY_LIB_RESOURCES_PROVIDERS,
+                useClass: SkyTabsResourcesProvider,
+                multi: true,
+            },
+        ], imports: [SkyI18nModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyTabsResourcesModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    exports: [SkyI18nModule],
+                    providers: [
+                        {
+                            provide: SKY_LIB_RESOURCES_PROVIDERS,
+                            useClass: SkyTabsResourcesProvider,
+                            multi: true,
+                        },
+                    ],
+                }]
+        }] });
+
+/**
+ * @internal
+ */
+class SkyVerticalTabMediaQueryService {
+    #currentSubject;
+    constructor() {
+        this.#currentSubject = new ReplaySubject(1);
+    }
+    subscribe(listener) {
+        return this.#currentSubject.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;
+        this.#currentSubject.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() {
+        this.#currentSubject.complete();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyVerticalTabMediaQueryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyVerticalTabMediaQueryService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyVerticalTabMediaQueryService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return []; } });
+
+class SkyVerticalTabsetAdapterService {
+    #renderer;
+    constructor(rendererFactory) {
+        this.#renderer = rendererFactory.createRenderer(undefined, null);
+    }
+    getWidth(elementRef) {
+        return elementRef.nativeElement.clientWidth;
+    }
+    scrollToContentTop(element) {
+        element.nativeElement.scrollTop = 0;
+    }
+    setResponsiveClass(element, breakpoint) {
+        const nativeEl = element.nativeElement;
+        this.#renderer.removeClass(nativeEl, 'sky-responsive-container-xs');
+        this.#renderer.removeClass(nativeEl, 'sky-responsive-container-sm');
+        this.#renderer.removeClass(nativeEl, 'sky-responsive-container-md');
+        this.#renderer.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;
+            }
+        }
+        this.#renderer.addClass(nativeEl, newClass);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyVerticalTabsetAdapterService, deps: [{ token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyVerticalTabsetAdapterService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyVerticalTabsetAdapterService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i0.RendererFactory2 }]; } });
+
+const VISIBLE_STATE = 'shown';
+const HIDDEN_STATE = 'void';
+/**
+ * @internal
+ */
+class SkyVerticalTabsetService {
+    #contentAdded;
+    #tabsVisible;
+    #isMobile;
+    #mediaQueryService;
+    constructor(mediaQueryService) {
+        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);
+        this.#contentAdded = false;
+        this.#tabsVisible = false;
+        this.#isMobile = false;
+        this.#mediaQueryService = mediaQueryService;
+        this.#mediaQueryService.subscribe((breakpoint) => {
+            const nowMobile = breakpoint === SkyMediaBreakpoints.xs;
+            if (nowMobile && !this.#isMobile) {
+                // switching to mobile
+                this.switchingMobile.next(true);
+                if (!this.#tabsVisible) {
+                    this.hidingTabs.next(true);
+                }
+            }
+            else if (!nowMobile && this.#isMobile) {
+                // switching to widescreen
+                this.switchingMobile.next(false);
+                if (!this.#tabsVisible) {
+                    this.showingTabs.next(true);
+                }
+            }
+            this.#isMobile = nowMobile;
+        });
+    }
+    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) {
+        const tabIndex = this.tabs.indexOf(tab);
+        if (tabIndex === -1) {
+            return;
+        }
+        if (this.maintainTabContent &&
+            tab.contentRendered &&
+            /* istanbul ignore next */
+            this.content?.nativeElement.contains(tab.tabContent?.nativeElement)) {
+            this.content?.nativeElement.removeChild(tab.tabContent?.nativeElement);
+        }
+        this.tabs.splice(tabIndex, 1);
+        // update tab indices
+        this.tabs.forEach((tabItem, index) => (tabItem.index = index));
+        if (tab.active) {
+            if (!this.maintainTabContent) {
+                this.#destroyContent();
+            }
+            // 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);
+        this.#updateTabClicked();
+    }
+    activeTab() {
+        return this.tabs.find((t) => t.index === this.activeIndex);
+    }
+    isMobile() {
+        return this.#isMobile;
+    }
+    updateContent() {
+        if (!this.maintainTabContent) {
+            if (!this.#contentAdded && this.contentVisible()) {
+                // content needs to be moved
+                this.#moveContent();
+            }
+            else if (this.#contentAdded && !this.contentVisible()) {
+                // content hidden
+                this.#contentAdded = false;
+            }
+        }
+        else {
+            this.tabs.forEach((tab) => {
+                if (!tab.contentRendered) {
+                    this.content?.nativeElement.appendChild(tab.tabContent?.nativeElement);
+                    tab.contentRendered = true;
+                }
+            });
+        }
+    }
+    tabsVisible() {
+        return !this.isMobile() || this.#tabsVisible;
+    }
+    contentVisible() {
+        return !this.isMobile() || !this.#tabsVisible;
+    }
+    showTabs() {
+        this.#tabsVisible = true;
+        this.#contentAdded = false;
+        this.animationTabsVisibleState = VISIBLE_STATE;
+        this.animationContentVisibleState = HIDDEN_STATE;
+        this.showingTabs.next(true);
+    }
+    #destroyContent() {
+        if (this.content) {
+            this.content.nativeElement.innerHTML = '';
+        }
+        this.content = undefined;
+    }
+    #moveContent() {
+        /* istanbul ignore else */
+        if (this.content && !this.#contentAdded) {
+            const activeTab = this.activeTab();
+            const activeContent = activeTab ? activeTab.tabContent : undefined;
+            if (activeContent && activeTab && activeContent.nativeElement) {
+                this.content.nativeElement.appendChild(activeContent.nativeElement);
+                activeTab.contentRendered = true;
+                this.#contentAdded = true;
+            }
+        }
+    }
+    #updateTabClicked() {
+        this.#contentAdded = false;
+        if (this.isMobile()) {
+            this.#tabsVisible = false;
+            this.animationContentVisibleState = VISIBLE_STATE;
+            this.animationTabsVisibleState = HIDDEN_STATE;
+            this.hidingTabs.next(true);
+        }
+        this.indexChanged.next(this.activeIndex);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyVerticalTabsetService, deps: [{ token: i1.SkyMediaQueryService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyVerticalTabsetService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyVerticalTabsetService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i1.SkyMediaQueryService }]; } });
+
+/**
+ * Tracks the element IDs for all tabs within a tablist.
+ * @internal
+ */
+class SkyTabIdService {
+    get ids() {
+        return this.#idsObs;
+    }
+    #ids;
+    #ids$;
+    #idsObs;
+    constructor() {
+        this.#ids = new Map();
+        this.#ids$ = new BehaviorSubject([]);
+        this.#idsObs = this.#ids$.asObservable();
+    }
+    /**
+     * 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 (!this.#ids.has(id) || this.#ids.get(id) !== elementId) {
+            this.#ids.set(id, elementId);
+            this.#emitIds();
+        }
+    }
+    /**
+     * Disassociates a tab's ID with its parent tablist.
+     * @param {string} id The ID used to register the tab.
+     */
+    unregister(id) {
+        if (this.#ids.has(id)) {
+            this.#ids.delete(id);
+            this.#emitIds();
+        }
+    }
+    #emitIds() {
+        this.#ids$.next(Array.from(this.#ids.values()));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyTabIdService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyTabIdService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyTabIdService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return []; } });
+
+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 this.#_ariaRole;
+    }
+    set ariaRole(value) {
+        this.#_ariaRole = value ?? 'tab';
+    }
+    /**
+     * The ID for the tab.
+     * @deprecated Now that the vertical tabs provide aria labels automatically, this input is no longer necessary.
+     */
+    set tabId(value) {
+        this.#tabIdOrDefault = value || this.#defaultTabId;
+        this.#tabIdSvc?.register(this.#defaultTabId, this.#tabIdOrDefault);
+    }
+    get tabId() {
+        return this.#tabIdOrDefault;
+    }
+    set contentRendered(value) {
+        this.#_contentRendered = value;
+        /* istanbul ignore else */
+        if (this.#_contentRendered) {
+            // NOTE: Wrapped in a setTimeout here to ensure that everything has completed rendering.
+            setTimeout(() => {
+                if (this.tabContent) {
+                    this.#updateBreakpointAndResponsiveClass();
+                }
+            });
+        }
+    }
+    get contentRendered() {
+        return this.#_contentRendered;
+    }
+    #_ariaRole;
+    #_contentRendered;
+    #tabIdOrDefault;
+    #defaultTabId;
+    #mobileSubscription;
+    #ngUnsubscribe;
+    #adapterService;
+    #changeRef;
+    #tabsetService;
+    #verticalTabMediaQueryService;
+    #tabIdSvc;
+    constructor(adapterService, changeRef, tabsetService, verticalTabMediaQueryService, tabIdSvc) {
+        /**
+         * 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;
+        this.#_ariaRole = 'tab';
+        this.#_contentRendered = false;
+        this.#mobileSubscription = new Subject();
+        this.#ngUnsubscribe = new Subject();
+        this.#adapterService = adapterService;
+        this.#changeRef = changeRef;
+        this.#tabsetService = tabsetService;
+        this.#verticalTabMediaQueryService = verticalTabMediaQueryService;
+        this.#tabIdSvc = tabIdSvc;
+        this.#tabIdOrDefault = this.#defaultTabId = `sky-vertical-tab-${++nextId$2}`;
+        this.tabId = this.#defaultTabId;
+    }
+    ngOnInit() {
+        this.isMobile = this.#tabsetService.isMobile();
+        this.#changeRef.markForCheck();
+        this.#tabsetService.switchingMobile.subscribe((mobile) => {
+            this.isMobile = mobile;
+            this.#changeRef.markForCheck();
+        });
+        // Update the breakpoint and responsive class here just as a sanity check since we can not
+        // watch for element resizing.
+        this.#tabsetService.indexChanged
+            .pipe(takeUntil(this.#ngUnsubscribe))
+            .subscribe((index) => {
+            if (this.index === index && this.contentRendered) {
+                if (this.tabContent) {
+                    this.#updateBreakpointAndResponsiveClass();
+                }
+            }
+        });
+        this.#tabsetService.addTab(this);
+    }
+    ngOnDestroy() {
+        this.#tabIdSvc?.unregister(this.#defaultTabId);
+        this.#mobileSubscription.unsubscribe();
+        this.#ngUnsubscribe.next();
+        this.#ngUnsubscribe.complete();
+        this.#tabsetService.destroyTab(this);
+    }
+    tabIndex() {
+        if (!this.disabled) {
+            return 0;
+        }
+        else {
+            return -1;
+        }
+    }
+    activateTab() {
+        if (!this.disabled) {
+            this.active = true;
+            this.#tabsetService.activateTab(this);
+            this.#changeRef.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) {
+            this.#updateBreakpointAndResponsiveClass();
+        }
+    }
+    tabDeactivated() {
+        this.#changeRef.markForCheck();
+    }
+    #updateBreakpointAndResponsiveClass() {
+        if (this.tabContent) {
+            const width = this.#adapterService.getWidth(this.tabContent);
+            this.#verticalTabMediaQueryService.setBreakpointForWidth(width);
+            const newBreakpoint = this.#verticalTabMediaQueryService.current;
+            if (newBreakpoint) {
+                this.#adapterService.setResponsiveClass(this.tabContent, newBreakpoint);
+            }
+            this.#changeRef.markForCheck();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyVerticalTabComponent, deps: [{ token: SkyVerticalTabsetAdapterService }, { token: i0.ChangeDetectorRef }, { token: SkyVerticalTabsetService }, { token: SkyVerticalTabMediaQueryService }, { token: SkyTabIdService, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", 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: "16.1.7", 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']
+            }] } });
+
+class SkyVerticalTabsetGroupComponent {
+    /**
+     * Whether to disable the ability to expand and collapse the group.
+     * @default false
+     */
+    set disabled(value) {
+        this.#_disabled = value;
+        this.#updateSlideDirection(false);
+    }
+    get disabled() {
+        return this.#_disabled;
+    }
+    /**
+     * Whether the collapsible group is expanded.
+     * @default false
+     */
+    set open(value) {
+        this.#_open = value;
+        this.#updateSlideDirection(false);
+    }
+    get open() {
+        return this.#_open;
+    }
+    #ngUnsubscribe;
+    #tabService;
+    #changeRef;
+    #_disabled;
+    #_open;
+    constructor(tabService, changeRef) {
+        this.animationDisabled = false;
+        this.slideDirection = 'up';
+        this.#ngUnsubscribe = new Subject();
+        this.tabClicked = () => {
+            this.#changeRef.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';
+            this.#changeRef.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.
+            this.#updateSlideDirection(true);
+            this.#changeRef.markForCheck();
+        };
+        this.#tabService = tabService;
+        this.#changeRef = changeRef;
+    }
+    ngOnInit() {
+        this.#tabService.hidingTabs
+            .pipe(takeUntil(this.#ngUnsubscribe))
+            .subscribe(this.tabsHidden);
+        this.#tabService.showingTabs
+            .pipe(takeUntil(this.#ngUnsubscribe))
+            .subscribe(this.tabsShown);
+        this.#tabService.tabClicked
+            .pipe(takeUntil(this.#ngUnsubscribe))
+            .subscribe(this.tabClicked);
+    }
+    ngOnDestroy() {
+        this.#ngUnsubscribe.next();
+        this.#ngUnsubscribe.complete();
+    }
+    updateSlideDirection(event) {
+        this.slideDirection = event.toState;
+    }
+    toggleMenuOpen() {
+        if (!this.disabled) {
+            this.open = !this.open;
+        }
+        this.#updateSlideDirection(true);
+        this.#changeRef.markForCheck();
+    }
+    subMenuOpen() {
+        return !!this.tabs && this.tabs.find((t) => !!t.active) !== undefined;
+    }
+    #updateSlideDirection(animate) {
+        this.animationDisabled = !animate;
+        this.slideDirection = this.open && !this.disabled ? 'down' : 'up';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyVerticalTabsetGroupComponent, deps: [{ token: SkyVerticalTabsetService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", 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: "16.1.7", 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]
+            }] } });
+
+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 this.#_ariaRole;
+    }
+    set ariaRole(value) {
+        this.#_ariaRole = value ?? 'tablist';
+    }
+    #ngUnsubscribe;
+    #_ariaRole;
+    #resources;
+    #changeRef;
+    #tabIdSvc;
+    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;
+        this.#ngUnsubscribe = new Subject();
+        this.#_ariaRole = 'tablist';
+        this.#resources = resources;
+        this.#changeRef = changeRef;
+        this.#tabIdSvc = tabIdSvc;
+        this.#tabIdSvc.ids.pipe(takeUntil(this.#ngUnsubscribe)).subscribe((ids) => {
+            this.ariaOwns = ids.join(' ') || undefined;
+            this.#changeRef.markForCheck();
+        });
+    }
+    ngOnInit() {
+        this.tabService.maintainTabContent = this.maintainTabContent;
+        this.tabService.indexChanged
+            .pipe(takeUntil(this.#ngUnsubscribe))
+            .subscribe((index) => {
+            this.activeChange.emit(index);
+            if (this.contentWrapper) {
+                this.adapterService.scrollToContentTop(this.contentWrapper);
+            }
+            this.#changeRef.markForCheck();
+        });
+        this.tabService.switchingMobile
+            .pipe(takeUntil(this.#ngUnsubscribe))
+            .subscribe((mobile) => {
+            this.isMobile = mobile;
+            this.#changeRef.markForCheck();
+        });
+        if (this.tabService.isMobile()) {
+            this.isMobile = true;
+            this.tabService.animationContentVisibleState = VISIBLE_STATE;
+            this.#changeRef.markForCheck();
+        }
+        if (!this.showTabsText) {
+            this.#resources
+                .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() {
+        this.#ngUnsubscribe.next();
+        this.#ngUnsubscribe.complete();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyVerticalTabsetComponent, deps: [{ token: SkyVerticalTabsetAdapterService }, { token: SkyVerticalTabsetService }, { token: i3.SkyLibResourcesService }, { token: i0.ChangeDetectorRef }, { token: SkyTabIdService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", 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: "16.1.7", 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 {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyVerticalTabsetModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: SkyVerticalTabsetModule, declarations: [SkyVerticalTabsetComponent,
+            SkyVerticalTabsetGroupComponent,
+            SkyVerticalTabComponent], imports: [CommonModule,
+            SkyIconModule,
+            SkyIdModule,
+            SkyExpansionIndicatorModule,
+            SkyStatusIndicatorModule,
+            SkyTabsResourcesModule,
+            SkyThemeModule], exports: [SkyVerticalTabsetComponent,
+            SkyVerticalTabsetGroupComponent,
+            SkyVerticalTabComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyVerticalTabsetModule, providers: [SkyVerticalTabsetAdapterService], imports: [CommonModule,
+            SkyIconModule,
+            SkyIdModule,
+            SkyExpansionIndicatorModule,
+            SkyStatusIndicatorModule,
+            SkyTabsResourcesModule,
+            SkyThemeModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", 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);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkySectionedFormService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkySectionedFormService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkySectionedFormService, decorators: [{
+            type: Injectable
+        }] });
+
+let nextId$1 = 0;
+/**
+ * Creates an individual form to display as a section within the sectioned form.
+ */
+class SkySectionedFormSectionComponent {
+    #ngUnsubscribe;
+    #sectionedFormService;
+    #tabsetService;
+    #changeRef;
+    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;
+        this.#ngUnsubscribe = new Subject();
+        this.#sectionedFormService = sectionedFormService;
+        this.#tabsetService = tabsetService;
+        this.#changeRef = changeRef;
+    }
+    ngOnInit() {
+        this.#changeRef.detectChanges();
+        this.#tabsetService.switchingMobile.subscribe((mobile) => {
+            this.#changeRef.detectChanges();
+        });
+        this.#sectionedFormService.requiredChange
+            .pipe(takeUntil(this.#ngUnsubscribe))
+            .subscribe((required) => (this.fieldRequired = required));
+        this.#sectionedFormService.invalidChange
+            .pipe(takeUntil(this.#ngUnsubscribe))
+            .subscribe((invalid) => (this.fieldInvalid = invalid));
+    }
+    ngOnDestroy() {
+        this.#ngUnsubscribe.next();
+        this.#ngUnsubscribe.complete();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkySectionedFormSectionComponent, deps: [{ token: SkySectionedFormService }, { token: SkyVerticalTabsetService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", 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: "16.1.7", 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 = {}));
+
+/**
+ * Creates a container for the sectioned forms.
+ */
+class SkySectionedFormComponent {
+    set messageStream(value) {
+        this.#_messageStream = value || new Subject();
+        this.#initMessageStream();
+    }
+    get messageStream() {
+        return this.#_messageStream;
+    }
+    #ngUnsubscribe;
+    #messageStreamSub;
+    #changeRef;
+    #tabIdSvc;
+    #logger;
+    #_messageStream;
+    constructor(tabService, changeRef, tabIdSvc, logger) {
+        this.tabService = tabService;
+        /**
+         * 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';
+        this.#ngUnsubscribe = new Subject();
+        this.#_messageStream = new Subject();
+        this.#changeRef = changeRef;
+        this.#tabIdSvc = tabIdSvc;
+        this.#logger = logger;
+        this.#initMessageStream();
+        this.#tabIdSvc.ids.pipe(takeUntil(this.#ngUnsubscribe)).subscribe((ids) => {
+            this.ariaOwns = ids.join(' ') || undefined;
+            this.#changeRef.markForCheck();
+        });
+    }
+    ngOnInit() {
+        this.tabService.maintainTabContent = this.maintainSectionContent;
+        this.tabService.indexChanged
+            .pipe(takeUntil(this.#ngUnsubscribe))
+            .subscribe((index) => {
+            this.indexChanged.emit(index);
+            this.#changeRef.markForCheck();
+        });
+        this.tabService.switchingMobile
+            .pipe(takeUntil(this.#ngUnsubscribe))
+            .subscribe((mobile) => {
+            if (!mobile) {
+                this.ariaRole = 'tablist';
+            }
+            else {
+                this.ariaRole = undefined;
+            }
+            this.#changeRef.markForCheck();
+        });
+        this.tabService.hidingTabs
+            .pipe(takeUntil(this.#ngUnsubscribe))
+            .subscribe(() => {
+            this.tabsVisibleChanged.emit(false);
+        });
+        this.tabService.showingTabs
+            .pipe(takeUntil(this.#ngUnsubscribe))
+            .subscribe(() => {
+            this.tabsVisibleChanged.emit(true);
+        });
+        if (this.tabService.isMobile()) {
+            this.ariaRole = undefined;
+            this.tabService.animationContentVisibleState = VISIBLE_STATE;
+            this.#changeRef.markForCheck();
+        }
+    }
+    ngAfterViewChecked() {
+        this.tabService.content = this.content;
+        this.tabService.updateContent();
+    }
+    ngOnDestroy() {
+        this.#ngUnsubscribe.next();
+        this.#ngUnsubscribe.complete();
+    }
+    /**
+     * @deprecated Use the `tabsVisibleChanged` output to listen for tab visibility changes.
+     */
+    tabsVisible() {
+        this.#logger.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.',
+        });
+        this.#changeRef.markForCheck();
+        return this.tabService.tabsVisible();
+    }
+    /**
+     * @deprecated Use the `messageStream` input and push a `ShowTabs` message to the message stream instead.
+     */
+    showTabs() {
+        this.#logger.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.',
+        });
+        this.#showTabs();
+    }
+    #showTabs() {
+        this.tabService.showTabs();
+        this.#changeRef.markForCheck();
+    }
+    #initMessageStream() {
+        if (this.#messageStreamSub) {
+            this.#messageStreamSub.unsubscribe();
+        }
+        this.#messageStreamSub = this.messageStream
+            .pipe(takeUntil(this.#ngUnsubscribe))
+            .subscribe((message) => {
+            switch (message.type) {
+                case SkySectionedFormMessageType.ShowTabs:
+                    this.#showTabs();
+                    break;
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkySectionedFormComponent, deps: [{ token: SkyVerticalTabsetService }, { token: i0.ChangeDetectorRef }, { token: SkyTabIdService }, { token: i1.SkyLogService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", 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: "16.1.7", 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 {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkySectionedFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: SkySectionedFormModule, declarations: [SkySectionedFormComponent, SkySectionedFormSectionComponent], imports: [CommonModule,
+            SkyCheckboxModule,
+            SkyThemeModule,
+            SkyVerticalTabsetModule], exports: [SkySectionedFormComponent, SkySectionedFormSectionComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkySectionedFormModule, imports: [CommonModule,
+            SkyCheckboxModule,
+            SkyThemeModule,
+            SkyVerticalTabsetModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", 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();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyTabButtonAdapterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyTabButtonAdapterService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyTabButtonAdapterService, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * @internal
+ */
+class SkyTabsetService {
+    get activeTabUnregistered() {
+        return this.#activeTabUnregistered;
+    }
+    get activeTabIndex() {
+        return this.#activeTabIndex;
+    }
+    get focusedTabBtnIndex() {
+        return this.#focusedTabBtnIndex;
+    }
+    get activeTabLayout() {
+        return this.#activeTabLayout;
+    }
+    #activeTabIndex;
+    #focusedTabBtnIndex;
+    #activeTabUnregistered;
+    #activeTabLayout;
+    #tabs;
+    #tabCounter;
+    constructor() {
+        this.currentActiveTabIndex = 0;
+        this.currentFocusedTabBtnIndex = 0;
+        this.#activeTabLayout = new Subject();
+        this.#tabs = [];
+        this.#tabCounter = 0;
+        this.#activeTabIndex = new BehaviorSubject(0);
+        this.#activeTabUnregistered =
+            new Subject();
+        this.#focusedTabBtnIndex = new Subject();
+    }
+    ngOnDestroy() {
+        this.#activeTabIndex.complete();
+        this.#activeTabUnregistered.complete();
+        this.#focusedTabBtnIndex.complete();
+        this.#activeTabLayout.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) {
+                this.#activeTabIndex.next(value);
+            }
+            this.setFocusedTabBtnIndex(value);
+        }
+    }
+    focusNextTabBtn(tabButtons) {
+        const currentTabArrayIndex = this.#tabs.findIndex((tab) => this.tabIndexesEqual(tab.tabIndex, this.currentFocusedTabBtnIndex));
+        for (let i = this.#getNextTabArrayIndex(currentTabArrayIndex); i !== currentTabArrayIndex; i = this.#getNextTabArrayIndex(i)) {
+            const tabBtn = tabButtons[i];
+            if (!tabBtn.disabled && tabBtn.tabIndex !== undefined) {
+                this.setFocusedTabBtnIndex(tabBtn.tabIndex);
+                return;
+            }
+        }
+    }
+    focusPrevTabBtn(tabButtons) {
+        const currentTabArrayIndex = this.#tabs.findIndex((tab) => this.tabIndexesEqual(tab.tabIndex, this.currentFocusedTabBtnIndex));
+        for (let i = this.#getPrevTabArrayIndex(currentTabArrayIndex); i !== currentTabArrayIndex; i = this.#getPrevTabArrayIndex(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;
+        this.#focusedTabBtnIndex.next(tabIndex);
+    }
+    /**
+     * Registers a tab component.
+     */
+    registerTab(tabIndex) {
+        if (tabIndex === undefined) {
+            tabIndex = this.#tabCounter;
+            this.#tabCounter++;
+        }
+        this.#tabs.push({ tabIndex });
+        return tabIndex;
+    }
+    updateTabIndex(currentTabIndex, newTabIndex) {
+        const found = this.#tabs.find((tab) => this.tabIndexesEqual(tab.tabIndex, currentTabIndex));
+        if (found) {
+            found.tabIndex = newTabIndex;
+        }
+    }
+    updateActiveTabLayout(layout) {
+        this.#activeTabLayout.next(layout);
+    }
+    /**
+     * Unregisters a tab component.
+     */
+    unregisterTab(tabIndex) {
+        const index = this.#tabs.findIndex((tab) => this.tabIndexesEqual(tab.tabIndex, tabIndex));
+        // Notify the tabset component when an active tab is unregistered.
+        if (this.#isTabIndexActive(this.#tabs[index]?.tabIndex)) {
+            this.#activeTabUnregistered.next({
+                arrayIndex: index,
+            });
+        }
+        this.#tabs.splice(index, 1);
+    }
+    /**
+     * Unregisters all tab components at once.
+     */
+    unregisterAll() {
+        this.#tabs = [];
+    }
+    /**
+     * 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 this.#tabs.some((tab) => this.tabIndexesEqual(tab.tabIndex, tabIndex));
+    }
+    /**
+     * Activates the first registered tab.
+     */
+    activateFirstTab() {
+        const firstTabIndex = this.#tabs[0] && this.#tabs[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 = this.#tabs[arrayIndex] || this.#tabs[arrayIndex - 1];
+        if (newActiveTab) {
+            this.currentActiveTabIndex = newActiveTab.tabIndex;
+        }
+    }
+    #isTabIndexActive(tabIndex) {
+        return this.tabIndexesEqual(tabIndex, this.currentActiveTabIndex);
+    }
+    #getNextTabArrayIndex(currentIndex) {
+        let nextIndex = currentIndex + 1;
+        if (nextIndex === this.#tabs.length) {
+            nextIndex = 0;
+        }
+        return nextIndex;
+    }
+    #getPrevTabArrayIndex(currentIndex) {
+        let prevIndex = currentIndex - 1;
+        if (prevIndex < 0) {
+            prevIndex = this.#tabs.length - 1;
+        }
+        return prevIndex;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyTabsetService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyTabsetService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyTabsetService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return []; } });
+
+const DEFAULT_DISABLED = false;
+/**
+ * @internal
+ */
+class SkyTabButtonComponent {
+    get active() {
+        return this.#_isActive;
+    }
+    set active(value) {
+        this.#_isActive = value;
+        this.#updateWizardStepState();
+    }
+    get disabled() {
+        return this.#_isDisabled;
+    }
+    set disabled(value) {
+        this.#_isDisabled = value ?? DEFAULT_DISABLED;
+        this.#updateWizardStepState();
+    }
+    get tabStyle() {
+        return this.#_tabStyle;
+    }
+    set tabStyle(style) {
+        this.#_tabStyle = style;
+        this.#updateWizardStepState();
+    }
+    constructor(elementRef, adapterService, changeDetectorRef, tabsetService) {
+        this.buttonClick = new EventEmitter();
+        this.closeClick = new EventEmitter();
+        this.closeBtnTabIndex = '-1';
+        this.#_isActive = false;
+        this.#_isDisabled = DEFAULT_DISABLED;
+        this.#ngUnsubscribe = new Subject();
+        this.#adapterService = adapterService;
+        this.#changeDetectorRef = changeDetectorRef;
+        this.#elementRef = elementRef;
+        this.#tabsetService = tabsetService;
+    }
+    #_isActive;
+    #_isDisabled;
+    #_tabStyle;
+    #adapterService;
+    #changeDetectorRef;
+    #elementRef;
+    #tabsetService;
+    #ngUnsubscribe;
+    ngAfterViewInit() {
+        this.#tabsetService.focusedTabBtnIndex
+            .pipe(distinctUntilChanged(), takeUntil(this.#ngUnsubscribe))
+            .subscribe((focusedIndex) => {
+            if (this.tabIndex !== undefined && focusedIndex === this.tabIndex) {
+                this.closeBtnTabIndex = '0';
+                this.focusBtn();
+            }
+            else {
+                this.closeBtnTabIndex = '-1';
+            }
+            this.#changeDetectorRef.markForCheck();
+        });
+    }
+    ngOnDestroy() {
+        this.#ngUnsubscribe.next();
+        this.#ngUnsubscribe.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() {
+        this.#adapterService.focusButtonLink(this.#elementRef);
+    }
+    onFocus() {
+        if (this.tabIndex !== undefined) {
+            this.#tabsetService.setFocusedTabBtnIndex(this.tabIndex);
+        }
+    }
+    #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';
+            }
+        }
+        this.#changeDetectorRef.markForCheck();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyTabButtonComponent, deps: [{ token: i0.ElementRef }, { token: SkyTabButtonAdapterService }, { token: i0.ChangeDetectorRef }, { token: SkyTabsetService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", 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: "16.1.7", 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
+            }] } });
+
+/**
+ * @internal
+ */
+class SkyTabsetPermalinkService {
+    get popStateChange() {
+        return this.#popStateChange;
+    }
+    #popStateChange;
+    #subscription;
+    #activatedRoute;
+    #location;
+    #router;
+    constructor(activatedRoute, location, router) {
+        this.#activatedRoute = activatedRoute;
+        this.#location = location;
+        this.#router = router;
+        this.#popStateChange = new Subject();
+    }
+    ngOnDestroy() {
+        if (this.#subscription) {
+            this.#subscription.unsubscribe();
+        }
+        this.#popStateChange.complete();
+    }
+    init() {
+        this.#subscription = this.#location.subscribe(() => {
+            this.#popStateChange.next();
+        });
+    }
+    /**
+     * Returns the value of a URL query param.
+     */
+    getParam(name) {
+        return this.#getParams()[name];
+    }
+    /**
+     * Sets the value of a URL query param.
+     */
+    setParam(name, value) {
+        const params = this.#getParams();
+        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 = this.#router
+            .createUrlTree([], {
+            relativeTo: this.#activatedRoute,
+            queryParams: params,
+            queryParamsHandling: 'merge',
+        })
+            .toString();
+        // Abort redirect if the current URL is equal to the new URL.
+        if (this.#location.isCurrentPathEqualTo(url)) {
+            return;
+        }
+        this.#location.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 = this.#getParams();
+        params[name] = value;
+        const baseUrl = this.#location.path().split('?')[0];
+        const paramString = Object.keys(params)
+            .map((k) => `${k}=${params[k]}`)
+            .join('&');
+        return this.#location.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;
+    }
+    /**
+     * Returns all query params that exist in the current URL.
+     */
+    #getParams() {
+        const params = {};
+        const path = this.#location.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;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyTabsetPermalinkService, deps: [{ token: i1$1.ActivatedRoute }, { token: i4.Location }, { token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyTabsetPermalinkService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyTabsetPermalinkService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i1$1.ActivatedRoute }, { type: i4.Location }, { type: i1$1.Router }]; } });
+
+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 !== this.#_active) {
+            this.#_active = value;
+            this.#activeChange.next();
+        }
+    }
+    get active() {
+        return this.#_active;
+    }
+    get activeChange() {
+        return this.#activeChange;
+    }
+    /**
+     * 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) {
+        this.#_permalinkValue = value;
+        this.#setPermalinkValueOrDefault();
+    }
+    get permalinkValue() {
+        return this.#_permalinkValue;
+    }
+    /**
+     * 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) {
+        this.#_tabHeading = value;
+        this.#setPermalinkValueOrDefault();
+    }
+    get tabHeading() {
+        return this.#_tabHeading;
+    }
+    /**
+     * 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 !== this.#_tabIndex &&
+            value !== undefined &&
+            this.#_tabIndex !== undefined) {
+            this.#tabsetService.updateTabIndex(this.#_tabIndex, value);
+            this.#tabIndexChange.next(value);
+        }
+        this.#_tabIndex = value;
+    }
+    get tabIndex() {
+        return this.#_tabIndex;
+    }
+    /**
+     * 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;
+        this.#_layout = layout;
+        this.cssClass = `${LAYOUT_CLASS_PREFIX}${layout}`;
+        if (this.active) {
+            this.#tabsetService.updateActiveTabLayout(layout);
+        }
+    }
+    get layout() {
+        return this.#_layout;
+    }
+    /**
+     * Alerts the tabset component when this component has changes that need to be reflected in the UI.
+     */
+    get stateChange() {
+        return this.#stateChange;
+    }
+    get tabIndexChange() {
+        return this.#tabIndexChange;
+    }
+    #_active;
+    #activeChange;
+    #_permalinkValue;
+    #stateChange;
+    #_tabHeading;
+    #_tabIndex;
+    #_layout;
+    #tabIndexChange;
+    #changeDetector;
+    #permalinkService;
+    #tabsetService;
+    constructor(changeDetector, permalinkService, tabsetService) {
+        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;
+        this.#_active = false;
+        this.#_layout = LAYOUT_DEFAULT;
+        this.#changeDetector = changeDetector;
+        this.#permalinkService = permalinkService;
+        this.#tabsetService = tabsetService;
+        const id = nextId++;
+        this.tabPanelId = `sky-tab-${id}`;
+        this.tabButtonId = `${this.tabPanelId}-nav-btn`;
+        this.#activeChange = new BehaviorSubject(undefined);
+        this.#stateChange = new BehaviorSubject(undefined);
+        this.#tabIndexChange = new BehaviorSubject(undefined);
+        this.#setPermalinkValueOrDefault();
+    }
+    ngOnChanges(changes) {
+        if ((changes['disabled'] && !changes['disabled'].firstChange) ||
+            (changes['tabHeading'] && !changes['tabHeading'].firstChange) ||
+            (changes['tabHeaderCount'] && !changes['tabHeaderCount'].firstChange) ||
+            (changes['permalinkValue'] && !changes['permalinkValue'].firstChange)) {
+            this.#stateChange.next();
+        }
+    }
+    ngOnDestroy() {
+        this.#activeChange.complete();
+        this.#stateChange.complete();
+        this.#tabIndexChange.complete();
+        if (this.tabIndex !== undefined) {
+            this.#tabsetService.unregisterTab(this.tabIndex);
+        }
+    }
+    init() {
+        this.#_tabIndex = this.#tabsetService.registerTab(this.tabIndex);
+    }
+    activate() {
+        this.#_active = true;
+        this.showContent = true;
+        this.#changeDetector.markForCheck();
+    }
+    deactivate() {
+        this.#_active = false;
+        this.showContent = false;
+        this.#changeDetector.markForCheck();
+    }
+    isCloseable() {
+        return this.close.observers.length > 0;
+    }
+    #setPermalinkValueOrDefault() {
+        this.permalinkValueOrDefault =
+            this.#permalinkService.urlify(this.permalinkValue) ||
+                this.#permalinkService.urlify(this.tabHeading);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyTabComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: SkyTabsetPermalinkService }, { token: SkyTabsetService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", 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: "16.1.7", 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;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyTabsetNavButtonDisabledPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: SkyTabsetNavButtonDisabledPipe, name: "skyTabsetNavButtonDisabled" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyTabsetNavButtonDisabledPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'skyTabsetNavButtonDisabled',
+                }]
+        }] });
+
+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 this.#_tabset;
+    }
+    set tabset(value) {
+        this.#_tabset = value;
+        if (this.#currentTabsetSub) {
+            this.#currentTabsetSub.unsubscribe();
+        }
+        if (value) {
+            this.#currentTabsetSub = value.activeChange
+                .pipe(distinctUntilChanged(), takeUntil(this.#ngUnsubscribe))
+                .subscribe((index) => {
+                this.#activeSkyTabIndex = index;
+                this.#tabCount = this.#_tabset?.tabs?.length;
+                this.#updateTabToSelect();
+                this.#updateButtonVisibility();
+                this.#updateButtonProperties();
+            });
+        }
+        else {
+            this.#logger.error('The SkyTabsetNavButtonComponent requires a reference to the SkyTabsetComponent it controls.');
+        }
+    }
+    /**
+     * The type of nav button to include.
+     * @required
+     */
+    get buttonType() {
+        return this.#_buttonType;
+    }
+    set buttonType(value) {
+        this.#_buttonType = value;
+        this.#updateTabToSelect();
+        this.#updateButtonProperties();
+        this.#updateButtonVisibility();
+        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) {
+        this.#_disabled = value;
+    }
+    get disabled() {
+        return this.#_disabled;
+    }
+    #_buttonType;
+    #_disabled;
+    #_tabset;
+    #activeIndexNumber;
+    #activeSkyTabIndex;
+    #currentTabsetSub;
+    #logger;
+    #tabCount;
+    #ngUnsubscribe;
+    constructor(logger) {
+        this.isVisible = false;
+        this.type = 'submit';
+        this.#ngUnsubscribe = new Subject();
+        this.#logger = logger;
+    }
+    ngOnDestroy() {
+        this.#ngUnsubscribe.next();
+        this.#ngUnsubscribe.complete();
+    }
+    buttonClick() {
+        /* istanbul ignore else */
+        if (this.tabToSelect && !this.tabToSelect.disabled && this.tabset) {
+            this.tabset.active = this.tabToSelect.tabIndex;
+        }
+    }
+    #updateButtonVisibility() {
+        const isLastStep = !!this.#tabCount && this.#activeIndexNumber === this.#tabCount - 1;
+        if (this.buttonType === buttonTypeFinish) {
+            this.isVisible = isLastStep;
+        }
+        else if (this.buttonType === buttonTypeNext) {
+            this.isVisible = !isLastStep;
+        }
+        else {
+            this.isVisible = true;
+        }
+    }
+    #updateButtonProperties() {
+        if (this.buttonType === buttonTypeNext ||
+            this.buttonType === buttonTypeFinish) {
+            this.buttonClassName = 'sky-btn-primary';
+        }
+        else {
+            this.buttonClassName = 'sky-btn-default';
+        }
+        this.ariaControls = this.tabToSelect?.tabPanelId;
+    }
+    #updateTabToSelect() {
+        if (this.tabset?.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
+            this.#activeIndexNumber = tabs.findIndex((tab) => tab.tabIndex === this.#activeSkyTabIndex);
+            /* istanbul ignore else */
+            if (this.#activeIndexNumber !== undefined) {
+                if (this.buttonType === buttonTypeNext) {
+                    this.tabToSelect = tabs[this.#activeIndexNumber + 1];
+                }
+                else if (this.buttonType === buttonTypePrevious) {
+                    this.tabToSelect = tabs[this.#activeIndexNumber - 1];
+                }
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyTabsetNavButtonComponent, deps: [{ token: i1.SkyLogService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", 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: "16.1.7", 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
+            }] } });
+
+/**
+ * @internal
+ */
+class SkyTabsetAdapterService {
+    get overflowChange() {
+        return this.#overflowChange;
+    }
+    #currentOverflow = false;
+    #tabsetRef;
+    #tabsOffsetLeft;
+    #overflowChange;
+    constructor() {
+        this.#overflowChange = new BehaviorSubject(false);
+    }
+    ngOnDestroy() {
+        this.#overflowChange.complete();
+    }
+    registerTabset(tabsetRef) {
+        this.#tabsetRef = tabsetRef;
+        this.#tabsOffsetLeft = this.#getTabsOffsetLeft(tabsetRef.nativeElement);
+    }
+    /**
+     * Detects if the tab buttons are wider than the tabset container.
+     */
+    detectOverflow() {
+        const nativeElement = this.#tabsetRef?.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 + this.#tabsOffsetLeft;
+        const newOverflow = tabButtonsWidth > tabsetRect.width;
+        if (this.#currentOverflow !== newOverflow) {
+            this.#currentOverflow = newOverflow;
+            this.#overflowChange.next(this.#currentOverflow);
+        }
+    }
+    /**
+     * Returns the number of pixels to the left of the first tab.
+     */
+    #getTabsOffsetLeft(tabsetEl) {
+        const tabsetRect = tabsetEl.getBoundingClientRect();
+        // The dropdown element is the first "tab" and always exists in the DOM, even when hidden.
+        const firstTabRect = tabsetEl
+            .querySelector('.sky-tabset-dropdown')
+            ?.getBoundingClientRect();
+        // Safety check
+        /* istanbul ignore next */
+        if (!firstTabRect) {
+            return 0;
+        }
+        return firstTabRect.left - tabsetRect.left;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyTabsetAdapterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyTabsetAdapterService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyTabsetAdapterService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return []; } });
+
+class SkyTabsetComponent {
+    /**
+     * Activates a tab by its `tabIndex` property.
+     */
+    set active(value) {
+        if (value === undefined ||
+            this.#tabsetService.tabIndexesEqual(value, this.#_active)) {
+            return;
+        }
+        this.#_active = value;
+        if (this.tabs) {
+            this.#tabsetService.setActiveTabIndex(value);
+        }
+        else {
+            // On init, wait for children tabs to render before broadcasting the active tab index.
+            setTimeout(() => {
+                if (this.#tabsetService.isValidTabIndex(value)) {
+                    // On init, yield to the permalink ID, if it exists.
+                    if (this.#getActiveTabIndexByPermalinkId() === undefined) {
+                        this.#tabsetService.setActiveTabIndex(value);
+                    }
+                }
+                else {
+                    // Activate the first tab if the new tab index is invalid.
+                    this.#_active = this.#tabsetService.activateFirstTab();
+                }
+            });
+        }
+    }
+    get active() {
+        return this.#_active;
+    }
+    /**
+     * 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) {
+            this.#_permalinkId = '';
+        }
+        else {
+            const sanitized = this.#permalinkService.urlify(value);
+            this.#_permalinkId = `${sanitized}-active-tab`;
+        }
+    }
+    get permalinkId() {
+        return this.#_permalinkId;
+    }
+    /**
+     * The behavior for a series of tabs.
+     * @default "tabs"
+     */
+    set tabStyle(value) {
+        this.#_tabStyle = value || 'tabs';
+    }
+    get tabStyle() {
+        return this.#_tabStyle;
+    }
+    set tabDisplayMode(value) {
+        this.#_tabDisplayMode = value;
+        this.#changeDetector.markForCheck();
+    }
+    get tabDisplayMode() {
+        return this.#_tabDisplayMode;
+    }
+    set tabs(value) {
+        this.#_tabs = value;
+        this.#tabComponentsChangeUnsubscribe.next();
+        value?.changes
+            .pipe(takeUntil(this.#tabComponentsChangeUnsubscribe))
+            .subscribe(() => {
+            this.#resetTabComponents();
+        });
+    }
+    get tabs() {
+        return this.#_tabs;
+    }
+    #ngUnsubscribe;
+    #tabComponentsChangeUnsubscribe;
+    #tabComponentsStateChangeUnsubscribe;
+    #_active;
+    #_permalinkId;
+    #_tabs;
+    #_tabDisplayMode;
+    #_tabStyle;
+    #changeDetector;
+    #elementRef;
+    #adapterService;
+    #permalinkService;
+    #tabsetService;
+    #layoutHostSvc;
+    constructor(changeDetector, elementRef, adapterService, permalinkService, tabsetService) {
+        /**
+         * 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 = [];
+        this.#ngUnsubscribe = new Subject();
+        this.#tabComponentsChangeUnsubscribe = new Subject();
+        this.#tabComponentsStateChangeUnsubscribe = new Subject();
+        this.#_permalinkId = '';
+        this.#_tabDisplayMode = 'tabs';
+        this.#_tabStyle = 'tabs';
+        this.#layoutHostSvc = inject(SkyLayoutHostService, { optional: true });
+        this.#changeDetector = changeDetector;
+        this.#elementRef = elementRef;
+        this.#adapterService = adapterService;
+        this.#permalinkService = permalinkService;
+        this.#tabsetService = tabsetService;
+    }
+    ngAfterViewInit() {
+        this.#initTabComponents();
+        const initialTabIndex = this.#getInitialTabIndex();
+        this.#tabsetService.setActiveTabIndex(initialTabIndex);
+        this.#listenTabButtonsOverflowChange();
+        this.#listenLocationPopStateChange();
+        // If the currently active tab is getting unregistered, activate the next one.
+        this.#tabsetService.activeTabUnregistered
+            .pipe(takeUntil(this.#ngUnsubscribe))
+            .subscribe((tab) => {
+            // Wait for the new tabs to render before activating.
+            setTimeout(() => {
+                this.#tabsetService.activateNearestTab(tab.arrayIndex);
+            });
+        });
+        this.#tabsetService.activeTabLayout
+            .pipe(takeUntil(this.#ngUnsubscribe))
+            .subscribe((layout) => {
+            this.#updateLayout(layout);
+        });
+        // Let the tabset render the initial active index before listening for changes.
+        setTimeout(() => {
+            this.#listenTabComponentsStateChange();
+            this.#listenActiveIndexChange();
+            this.#permalinkService.init();
+        });
+    }
+    ngOnDestroy() {
+        this.#ngUnsubscribe.next();
+        this.#ngUnsubscribe.complete();
+        this.#tabComponentsChangeUnsubscribe.next();
+        this.#tabComponentsChangeUnsubscribe.complete();
+        this.#unsubscribeTabComponentsStateChange();
+        if (this.permalinkId) {
+            this.#permalinkService.clearParam(this.permalinkId);
+        }
+    }
+    onWindowResize() {
+        this.#adapterService.detectOverflow();
+    }
+    onTabCloseClick(tabButton) {
+        const tabComponent = this.tabs?.find((tab) => this.#tabsetService.tabIndexesEqual(tab.tabIndex, tabButton.tabIndex));
+        tabComponent?.close.emit();
+    }
+    onTabButtonClick(tabButton) {
+        this.#tabsetService.setActiveTabIndex(tabButton.tabIndex);
+    }
+    onNewTabClick() {
+        this.newTab.emit();
+    }
+    onOpenTabClick() {
+        this.openTab.emit();
+    }
+    onRightKeyDown() {
+        this.#tabsetService.focusNextTabBtn(this.tabButtons);
+    }
+    onLeftKeyDown() {
+        this.#tabsetService.focusPrevTabBtn(this.tabButtons);
+    }
+    onHomeKeyDown() {
+        this.#tabsetService.focusFirstOrNearestTabBtn(this.tabButtons);
+    }
+    onEndKeyDown() {
+        this.#tabsetService.focusLastOrNearestTabBtn(this.tabButtons);
+    }
+    /**
+     * Sets the initial active tab index based on the following criteria.
+     * 1. Does the URL include a query param that reflects this tabset's active tab?
+     * 2. Does one of the tab components have their `active` property set to `true`?
+     * 3. Is the tabset component's `active` property set to a specific tab index?
+     */
+    #getInitialTabIndex() {
+        let activeIndex = this.#getActiveTabIndexByPermalinkId();
+        if (activeIndex === undefined) {
+            activeIndex = this.#getActiveTabComponent()?.tabIndex;
+            if (activeIndex === undefined) {
+                activeIndex = this.active;
+            }
+        }
+        return activeIndex;
+    }
+    #listenActiveIndexChange() {
+        this.#tabsetService.activeTabIndex
+            .pipe(distinctUntilChanged(), takeUntil(this.#ngUnsubscribe))
+            .subscribe((activeIndex) => {
+            this.#updateTabsetComponent(activeIndex);
+            const activeTab = this.#getActiveTabComponent();
+            this.#updateLayout(activeTab?.layout);
+        });
+    }
+    #updateLayout(layout) {
+        if (this.#layoutHostSvc && layout) {
+            this.#layoutHostSvc.setHostLayoutForChild({
+                layout,
+            });
+            this.cssClass = `sky-tabset-layout-${layout}`;
+        }
+    }
+    #listenTabComponentsStateChange() {
+        if (this.tabs) {
+            combineLatest(this.tabs.map((tab) => tab.activeChange))
+                .pipe(takeUntil(race(this.#tabComponentsStateChangeUnsubscribe, this.#ngUnsubscribe)))
+                .subscribe(() => {
+                // Wait for the tab components to render changes before finding the active one.
+                setTimeout(() => {
+                    const tabIndex = this.#getActiveTabComponent()?.tabIndex;
+                    this.#tabsetService.setActiveTabIndex(tabIndex);
+                });
+            });
+            combineLatest(this.tabs.map((tab) => tab.tabIndexChange))
+                .pipe(takeUntil(race(this.#tabComponentsStateChangeUnsubscribe, this.#ngUnsubscribe)))
+                .subscribe(() => {
+                // Don't emit the first change.
+                if (this.lastActiveTabIndex !== undefined) {
+                    // Wait for the tab components to render changes before updating the view.
+                    setTimeout(() => {
+                        this.#updateTabsetComponent(this.#tabsetService.currentActiveTabIndex, true);
+                        this.#emitTabIndexChange();
+                    });
+                }
+            });
+            combineLatest(this.tabs.map((tab) => tab.stateChange))
+                .pipe(takeUntil(race(this.#tabComponentsStateChangeUnsubscribe, this.#ngUnsubscribe)))
+                .subscribe(() => {
+                // Wait for the tab components to render changes before finding the active one.
+                setTimeout(() => {
+                    this.#updateTabsetComponent(this.#tabsetService.currentActiveTabIndex, true);
+                });
+            });
+        }
+    }
+    #initTabComponents() {
+        this.tabs?.forEach((tab) => tab.init());
+    }
+    #resetTabComponents() {
+        this.#unsubscribeTabComponentsStateChange();
+        this.#tabsetService.unregisterAll();
+        // If there are no tab components, do a hard reset of the view.
+        if (this.tabs?.length === 0) {
+            this.#updateTabsetComponent(0, true);
+            return;
+        }
+        this.#initTabComponents();
+        const activeIndex = this.#getActiveTabComponent()?.tabIndex;
+        this.#tabsetService.setActiveTabIndex(activeIndex, {
+            emitChange: false,
+        });
+        this.#listenTabComponentsStateChange();
+    }
+    #emitTabIndexChange() {
+        this.tabIndexesChange.emit({
+            tabs: this.tabs?.map((tab) => ({
+                tabHeading: tab.tabHeading,
+                tabIndex: tab.tabIndex,
+            })),
+        });
+    }
+    #unsubscribeTabComponentsStateChange() {
+        this.#tabComponentsStateChangeUnsubscribe.next();
+        this.#tabComponentsStateChangeUnsubscribe.complete();
+        this.#tabComponentsStateChangeUnsubscribe = new Subject();
+    }
+    #listenTabButtonsOverflowChange() {
+        this.#adapterService.registerTabset(this.#elementRef);
+        this.#adapterService.overflowChange
+            .pipe(takeUntil(this.#ngUnsubscribe))
+            .subscribe((isOverflowing) => {
+            this.tabDisplayMode = isOverflowing ? 'dropdown' : 'tabs';
+            this.#changeDetector.markForCheck();
+        });
+    }
+    /**
+     * Listen for back/forward history button presses to detect query param changes in the URL.
+     */
+    #listenLocationPopStateChange() {
+        this.#permalinkService.popStateChange
+            .pipe(takeUntil(this.#ngUnsubscribe))
+            .subscribe(() => {
+            this.#setActiveTabIndexByPermalinkId();
+        });
+    }
+    #setActiveTabIndexByPermalinkId() {
+        const activeIndex = this.#getActiveTabIndexByPermalinkId();
+        this.#tabsetService.setActiveTabIndex(activeIndex);
+    }
+    #getActiveTabIndexByPermalinkId() {
+        if (this.permalinkId) {
+            const paramValue = this.#permalinkService.getParam(this.permalinkId);
+            if (paramValue) {
+                return this.tabs?.find((tab) => tab.permalinkValueOrDefault === paramValue)?.tabIndex;
+            }
+            return undefined;
+        }
+        return undefined;
+    }
+    #getActiveTabComponent() {
+        return this.tabs
+            ?.toArray()
+            .reverse()
+            .find((tab) => tab.active === true);
+    }
+    #createTabButtons(activeIndex) {
+        // Safety check
+        /* istanbul ignore next */
+        if (!this.tabs) {
+            return [];
+        }
+        return this.tabs.map((tab, index) => ({
+            active: this.#tabsetService.tabIndexesEqual(tab.tabIndex, activeIndex),
+            closeable: tab.isCloseable(),
+            ariaControls: tab.tabPanelId,
+            disabled: tab.disabled,
+            buttonHref: tab.disabled
+                ? null
+                : this.#permalinkService.getParamHref(this.permalinkId, tab.permalinkValueOrDefault),
+            buttonId: tab.tabButtonId,
+            buttonTextCount: tab.tabHeaderCount,
+            buttonText: tab.tabHeading,
+            tabIndex: tab.tabIndex,
+            tabNumber: index + 1,
+            totalTabsCount: this.tabs.length,
+        }));
+    }
+    #updateTabButtons(activeIndex) {
+        this.tabButtons.forEach((button) => {
+            button.active = this.#tabsetService.tabIndexesEqual(button.tabIndex, activeIndex);
+        });
+    }
+    /**
+     * Updates the UI and state of the tabset component after the tab index or
+     * tab components have changed.
+     * @param activeIndex The currently active tab index.
+     * @param regenerateTabButtons Indicates if tab button view models should be regenerated.
+     * Setting this value to `false` will simply update the existing tab buttons. Setting this value
+     * to `true` is only necessary when the underlying tab components have changed and the tab
+     * buttons must reflect those changes.
+     */
+    #updateTabsetComponent(activeIndex, regenerateTabButtons = false) {
+        // Activate/deactivate tab components.
+        this.tabs?.forEach((tab) => {
+            this.#tabsetService.tabIndexesEqual(tab.tabIndex, activeIndex)
+                ? tab.activate()
+                : tab.deactivate();
+        });
+        // Update the tab button models.
+        if (regenerateTabButtons || !this.tabButtons.length) {
+            this.tabButtons = this.#createTabButtons(activeIndex);
+        }
+        else {
+            this.#updateTabButtons(activeIndex);
+        }
+        // Update the dropdown trigger button text.
+        this.dropdownTriggerButtonText =
+            this.tabButtons.find((b) => {
+                return this.#tabsetService.tabIndexesEqual(b.tabIndex, activeIndex);
+            })?.buttonText ?? '';
+        // Set the query params based on active tab.
+        if (this.permalinkId) {
+            const activeTabComponent = this.tabs?.find((tab) => {
+                return this.#tabsetService.tabIndexesEqual(tab.tabIndex, activeIndex);
+            });
+            if (activeTabComponent) {
+                this.#permalinkService.setParam(this.permalinkId, activeTabComponent.permalinkValueOrDefault);
+            }
+        }
+        // Wait for tab button view models to render before gauging dimensions.
+        setTimeout(() => {
+            this.#adapterService.detectOverflow();
+        });
+        this.#changeDetector.markForCheck();
+        // Emit the new active index value to consumers.
+        if (this.lastActiveTabIndex !== activeIndex) {
+            this.lastActiveTabIndex = activeIndex;
+            this.activeChange.emit(activeIndex);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyTabsetComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: SkyTabsetAdapterService }, { token: SkyTabsetPermalinkService }, { token: SkyTabsetService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", 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: "16.1.7", 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 {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyTabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: SkyTabsModule, declarations: [SkyTabButtonComponent,
+            SkyTabComponent,
+            SkyTabsetComponent,
+            SkyTabsetNavButtonComponent,
+            SkyTabsetNavButtonDisabledPipe], imports: [CommonModule,
+            RouterModule,
+            SkyDropdownModule,
+            SkyI18nModule,
+            SkyIconModule,
+            SkyTabsResourcesModule,
+            SkyThemeModule], exports: [SkyTabComponent, SkyTabsetComponent, SkyTabsetNavButtonComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyTabsModule, imports: [CommonModule,
+            RouterModule,
+            SkyDropdownModule,
+            SkyI18nModule,
+            SkyIconModule,
+            SkyTabsResourcesModule,
+            SkyThemeModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", 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