@skyux/tabs 5.6.2 → 6.0.0-beta.0

package/bundles/skyux-tabs.umd.js

@@ -1,2258 +0,0 @@
-(function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@angular/core'), require('@skyux/forms'), require('@skyux/theme'), require('@skyux/core'), require('@skyux/indicators'), require('@skyux/i18n'), require('rxjs'), require('rxjs/operators'), require('@skyux/animations'), require('@angular/animations'), require('@angular/router'), require('@skyux/popovers')) :
-    typeof define === 'function' && define.amd ? define('@skyux/tabs', ['exports', '@angular/common', '@angular/core', '@skyux/forms', '@skyux/theme', '@skyux/core', '@skyux/indicators', '@skyux/i18n', 'rxjs', 'rxjs/operators', '@skyux/animations', '@angular/animations', '@angular/router', '@skyux/popovers'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.skyux = global.skyux || {}, global.skyux.tabs = {}), global.ng.common, global.ng.core, global.forms, global.i8, global.i1, global.i4, global.i3, global.rxjs, global.rxjs.operators, global.animations, global.ng.animations, global.ng.router, global.i4$1));
-})(this, (function (exports, i2, i0, forms, i8, i1, i4, i3, rxjs, operators, animations, animations$1, i1$1, i4$1) { 'use strict';
-
-    function _interopNamespace(e) {
-        if (e && e.__esModule) return e;
-        var n = Object.create(null);
-        if (e) {
-            Object.keys(e).forEach(function (k) {
-                if (k !== 'default') {
-                    var d = Object.getOwnPropertyDescriptor(e, k);
-                    Object.defineProperty(n, k, d.get ? d : {
-                        enumerable: true,
-                        get: function () { return e[k]; }
-                    });
-                }
-            });
-        }
-        n["default"] = e;
-        return Object.freeze(n);
-    }
-
-    var i2__namespace = /*#__PURE__*/_interopNamespace(i2);
-    var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
-    var i8__namespace = /*#__PURE__*/_interopNamespace(i8);
-    var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
-    var i4__namespace = /*#__PURE__*/_interopNamespace(i4);
-    var i3__namespace = /*#__PURE__*/_interopNamespace(i3);
-    var i1__namespace$1 = /*#__PURE__*/_interopNamespace(i1$1);
-    var i4__namespace$1 = /*#__PURE__*/_interopNamespace(i4$1);
-
-    /**
-     * NOTICE: DO NOT MODIFY THIS FILE!
-     * The contents of this file were automatically generated by
-     * the 'ng generate @skyux/i18n:lib-resources-module modules/shared/sky-tabs' schematic.
-     * To update this file, simply rerun the command.
-     */
-    var RESOURCES = {
-        'EN-US': {
-            skyux_tab_add: { message: 'Add tab' },
-            skyux_tab_close: { message: 'Close {0} tab' },
-            skyux_tabs_navigator_next: { message: 'Next' },
-            skyux_tabs_navigator_previous: { message: 'Previous' },
-            skyux_tab_open: { message: 'Open tab' },
-            skyux_vertical_tabs_show_tabs_text: { message: 'Tab list' },
-        },
-    };
-    var SkyTabsResourcesProvider = /** @class */ (function () {
-        function SkyTabsResourcesProvider() {
-        }
-        SkyTabsResourcesProvider.prototype.getString = function (localeInfo, name) {
-            return i3.getLibStringForLocale(RESOURCES, localeInfo.locale, name);
-        };
-        return SkyTabsResourcesProvider;
-    }());
-    /**
-     * Import into any component library module that needs to use resource strings.
-     */
-    var SkyTabsResourcesModule = /** @class */ (function () {
-        function SkyTabsResourcesModule() {
-        }
-        return SkyTabsResourcesModule;
-    }());
-    SkyTabsResourcesModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTabsResourcesModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    SkyTabsResourcesModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTabsResourcesModule, exports: [i3.SkyI18nModule] });
-    SkyTabsResourcesModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTabsResourcesModule, providers: [
-            {
-                provide: i3.SKY_LIB_RESOURCES_PROVIDERS,
-                useClass: SkyTabsResourcesProvider,
-                multi: true,
-            },
-        ], imports: [i3.SkyI18nModule] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTabsResourcesModule, decorators: [{
-                type: i0.NgModule,
-                args: [{
-                        exports: [i3.SkyI18nModule],
-                        providers: [
-                            {
-                                provide: i3.SKY_LIB_RESOURCES_PROVIDERS,
-                                useClass: SkyTabsResourcesProvider,
-                                multi: true,
-                            },
-                        ],
-                    }]
-            }] });
-
-    /**
-     * @internal
-     */
-    var SkyVerticalTabMediaQueryService = /** @class */ (function () {
-        function SkyVerticalTabMediaQueryService() {
-            this.currentSubject = new rxjs.BehaviorSubject(this.current);
-            this._current = i1.SkyMediaBreakpoints.xs;
-            this.currentSubject.next(this._current);
-        }
-        Object.defineProperty(SkyVerticalTabMediaQueryService.prototype, "current", {
-            get: function () {
-                return this._current;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        SkyVerticalTabMediaQueryService.prototype.subscribe = function (listener) {
-            return this.currentSubject.subscribe({
-                next: function (breakpoints) {
-                    listener(breakpoints);
-                },
-            });
-        };
-        SkyVerticalTabMediaQueryService.prototype.setBreakpointForWidth = function (width) {
-            var breakpoint;
-            if (this.isWidthWithinBreakpiont(width, i1.SkyMediaBreakpoints.xs)) {
-                breakpoint = i1.SkyMediaBreakpoints.xs;
-            }
-            else if (this.isWidthWithinBreakpiont(width, i1.SkyMediaBreakpoints.sm)) {
-                breakpoint = i1.SkyMediaBreakpoints.sm;
-            }
-            else if (this.isWidthWithinBreakpiont(width, i1.SkyMediaBreakpoints.md)) {
-                breakpoint = i1.SkyMediaBreakpoints.md;
-            }
-            else {
-                breakpoint = i1.SkyMediaBreakpoints.lg;
-            }
-            this._current = breakpoint;
-            this.currentSubject.next(this._current);
-        };
-        SkyVerticalTabMediaQueryService.prototype.isWidthWithinBreakpiont = function (width, breakpoint) {
-            var xsBreakpointMaxPixels = 767;
-            var smBreakpointMinPixels = 768;
-            var smBreakpointMaxPixels = 991;
-            var mdBreakpointMinPixels = 992;
-            var mdBreakpointMaxPixels = 1199;
-            var lgBreakpointMinPixels = 1200;
-            switch (breakpoint) {
-                case i1.SkyMediaBreakpoints.xs: {
-                    return width <= xsBreakpointMaxPixels;
-                }
-                case i1.SkyMediaBreakpoints.sm: {
-                    return width >= smBreakpointMinPixels && width <= smBreakpointMaxPixels;
-                }
-                case i1.SkyMediaBreakpoints.md: {
-                    return width >= mdBreakpointMinPixels && width <= mdBreakpointMaxPixels;
-                }
-                default: {
-                    return width >= lgBreakpointMinPixels;
-                }
-            }
-        };
-        SkyVerticalTabMediaQueryService.prototype.destroy = function () {
-            this.currentSubject.complete();
-        };
-        return SkyVerticalTabMediaQueryService;
-    }());
-    SkyVerticalTabMediaQueryService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyVerticalTabMediaQueryService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    SkyVerticalTabMediaQueryService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyVerticalTabMediaQueryService });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyVerticalTabMediaQueryService, decorators: [{
-                type: i0.Injectable
-            }], ctorParameters: function () { return []; } });
-
-    var SkyVerticalTabsetAdapterService = /** @class */ (function () {
-        function SkyVerticalTabsetAdapterService(rendererFactory) {
-            this.rendererFactory = rendererFactory;
-            this.renderer = this.rendererFactory.createRenderer(undefined, undefined);
-        }
-        SkyVerticalTabsetAdapterService.prototype.getWidth = function (elementRef) {
-            return elementRef.nativeElement.clientWidth;
-        };
-        SkyVerticalTabsetAdapterService.prototype.scrollToContentTop = function (element) {
-            element.nativeElement.scrollTop = 0;
-        };
-        SkyVerticalTabsetAdapterService.prototype.setResponsiveClass = function (element, breakpoint) {
-            var 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');
-            var newClass;
-            switch (breakpoint) {
-                case i1.SkyMediaBreakpoints.xs: {
-                    newClass = 'sky-responsive-container-xs';
-                    break;
-                }
-                case i1.SkyMediaBreakpoints.sm: {
-                    newClass = 'sky-responsive-container-sm';
-                    break;
-                }
-                case i1.SkyMediaBreakpoints.md: {
-                    newClass = 'sky-responsive-container-md';
-                    break;
-                }
-                default: {
-                    newClass = 'sky-responsive-container-lg';
-                    break;
-                }
-            }
-            this.renderer.addClass(nativeEl, newClass);
-        };
-        return SkyVerticalTabsetAdapterService;
-    }());
-    SkyVerticalTabsetAdapterService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyVerticalTabsetAdapterService, deps: [{ token: i0__namespace.RendererFactory2 }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    SkyVerticalTabsetAdapterService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyVerticalTabsetAdapterService });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyVerticalTabsetAdapterService, decorators: [{
-                type: i0.Injectable
-            }], ctorParameters: function () { return [{ type: i0__namespace.RendererFactory2 }]; } });
-
-    var VISIBLE_STATE = 'shown';
-    var HIDDEN_STATE = 'void';
-    /**
-     * @internal
-     */
-    var SkyVerticalTabsetService = /** @class */ (function () {
-        function SkyVerticalTabsetService(mediaQueryService) {
-            var _this = this;
-            this.mediaQueryService = mediaQueryService;
-            this.activeIndex = undefined;
-            this.hidingTabs = new rxjs.BehaviorSubject(false);
-            this.indexChanged = new rxjs.BehaviorSubject(undefined);
-            this.maintainTabContent = false;
-            this.showingTabs = new rxjs.BehaviorSubject(false);
-            this.switchingMobile = new rxjs.Subject();
-            this.tabs = [];
-            this.tabAdded = new rxjs.Subject();
-            this.tabClicked = new rxjs.BehaviorSubject(undefined);
-            this._contentAdded = false;
-            this._tabsVisible = false;
-            this._isMobile = false;
-            this.mediaQueryService.subscribe(function (breakpoint) {
-                var nowMobile = breakpoint === i1.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;
-            });
-        }
-        Object.defineProperty(SkyVerticalTabsetService.prototype, "content", {
-            set: function (value) {
-                this._content = value;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        SkyVerticalTabsetService.prototype.addTab = function (tab) {
-            var index = this.tabs.length;
-            tab.index = index;
-            this.tabs.push(tab);
-            if (tab.active) {
-                this.activateTab(tab);
-            }
-            this.tabAdded.next(tab);
-        };
-        SkyVerticalTabsetService.prototype.destroyTab = function (tab) {
-            var _a;
-            var tabIndex = this.tabs.indexOf(tab);
-            if (tabIndex === -1) {
-                return;
-            }
-            if (this.maintainTabContent &&
-                tab.contentRendered &&
-                (
-                /* istanbul ignore next */
-                (_a = this._content) === null || _a === void 0 ? void 0 : _a.nativeElement.contains(tab.tabContent.nativeElement))) {
-                this._content.nativeElement.removeChild(tab.tabContent.nativeElement);
-            }
-            this.tabs.splice(tabIndex, 1);
-            // update tab indices
-            this.tabs.forEach(function (tabItem, index) { return (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.
-                var newActiveTab = this.tabs[tabIndex] || this.tabs[tabIndex - 1];
-                /*istanbul ignore else */
-                if (newActiveTab) {
-                    newActiveTab.activateTab();
-                }
-            }
-        };
-        SkyVerticalTabsetService.prototype.activateTab = function (tab) {
-            var _this = this;
-            // unactivate active tab
-            var activeTab = this.tabs.find(function (t) { return 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();
-        };
-        SkyVerticalTabsetService.prototype.activeTab = function () {
-            var _this = this;
-            return this.tabs.find(function (t) { return t.index === _this.activeIndex; });
-        };
-        SkyVerticalTabsetService.prototype.isMobile = function () {
-            return this._isMobile;
-        };
-        SkyVerticalTabsetService.prototype.updateContent = function () {
-            var _this = this;
-            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(function (tab) {
-                    if (!tab.contentRendered) {
-                        _this._content.nativeElement.appendChild(tab.tabContent.nativeElement);
-                        tab.contentRendered = true;
-                    }
-                });
-            }
-        };
-        SkyVerticalTabsetService.prototype.tabsVisible = function () {
-            return !this.isMobile() || this._tabsVisible;
-        };
-        SkyVerticalTabsetService.prototype.contentVisible = function () {
-            return !this.isMobile() || !this._tabsVisible;
-        };
-        SkyVerticalTabsetService.prototype.showTabs = function () {
-            this._tabsVisible = true;
-            this._contentAdded = false;
-            this.animationTabsVisibleState = VISIBLE_STATE;
-            this.animationContentVisibleState = HIDDEN_STATE;
-            this.showingTabs.next(true);
-        };
-        SkyVerticalTabsetService.prototype.destroyContent = function () {
-            if (this._content) {
-                this._content.nativeElement.innerHTML = '';
-            }
-            this.content = undefined;
-        };
-        SkyVerticalTabsetService.prototype.moveContent = function () {
-            /* istanbul ignore else */
-            if (this._content && !this._contentAdded) {
-                var activeTab = this.activeTab();
-                var activeContent = activeTab ? activeTab.tabContent : undefined;
-                if (activeContent && activeContent.nativeElement) {
-                    this._content.nativeElement.appendChild(activeContent.nativeElement);
-                    activeTab.contentRendered = true;
-                    this._contentAdded = true;
-                }
-            }
-        };
-        SkyVerticalTabsetService.prototype.updateTabClicked = function () {
-            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);
-        };
-        return SkyVerticalTabsetService;
-    }());
-    SkyVerticalTabsetService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyVerticalTabsetService, deps: [{ token: i1__namespace.SkyMediaQueryService }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    SkyVerticalTabsetService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyVerticalTabsetService });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyVerticalTabsetService, decorators: [{
-                type: i0.Injectable
-            }], ctorParameters: function () { return [{ type: i1__namespace.SkyMediaQueryService }]; } });
-
-    var nextId$2 = 0;
-    var SkyVerticalTabComponent = /** @class */ (function () {
-        function SkyVerticalTabComponent(adapterService, changeRef, tabsetService, verticalTabMediaQueryService) {
-            this.adapterService = adapterService;
-            this.changeRef = changeRef;
-            this.tabsetService = tabsetService;
-            this.verticalTabMediaQueryService = verticalTabMediaQueryService;
-            /**
-             * Indicates whether the tab is active when the tabset loads.
-             */
-            this.active = false;
-            /**
-             * Indicates whether to disable the tab.
-             */
-            this.disabled = false;
-            /**
-             * Indicates whether to indicate that the tab has an error.
-             * @internal This is used for sectioned forms and is not currently a supported design for pure vertical tabs.
-             */
-            this.errorIndicator = false;
-            /**
-             * Specifies an ID for the tab.
-             * @deprecated Now that the vertical tabs provide aria labels automatically, this input is no longer necessary.
-             */
-            this.tabId = "sky-vertical-tab-" + ++nextId$2;
-            this.isMobile = false;
-            this._contentRendered = false;
-            this._mobileSubscription = new rxjs.Subject();
-            this._ngUnsubscribe = new rxjs.Subject();
-            this._showTabRightArrow = false;
-        }
-        Object.defineProperty(SkyVerticalTabComponent.prototype, "ariaRole", {
-            /**
-             * Specifies an ARIA role for the vertical tab
-             * [to support accessibility](https://developer.blackbaud.com/skyux/learn/accessibility)
-             * by indicating how the tab functions and what it controls. For information about how
-             * an ARIA role indicates what an item represents on a web page, see the
-             * [WAI-ARIA roles model](https://www.w3.org/WAI/PF/aria/roles).
-             * @default "tab"
-             * @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: function () {
-                if (this.isMobile) {
-                    return undefined;
-                }
-                return this._ariaRole || 'tab';
-            },
-            set: function (value) {
-                this._ariaRole = value;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(SkyVerticalTabComponent.prototype, "showTabRightArrow", {
-            /**
-             * Indicates whether to display a chevron-right icon in the righthand side of the tab.
-             * @internal
-             */
-            get: function () {
-                return this._showTabRightArrow && this.tabsetService.isMobile();
-            },
-            set: function (value) {
-                this._showTabRightArrow = value;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(SkyVerticalTabComponent.prototype, "contentRendered", {
-            get: function () {
-                return this._contentRendered;
-            },
-            set: function (value) {
-                var _this = this;
-                this._contentRendered = value;
-                /* istanbul ignore else */
-                if (this._contentRendered) {
-                    // NOTE: Wrapped in a setTimeout here to ensure that everything has completed rendering.
-                    setTimeout(function () {
-                        _this.updateBreakpointAndResponsiveClass(_this.adapterService.getWidth(_this.tabContent));
-                    });
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        SkyVerticalTabComponent.prototype.ngOnInit = function () {
-            var _this = this;
-            this.isMobile = this.tabsetService.isMobile();
-            this.changeRef.markForCheck();
-            this.tabsetService.switchingMobile.subscribe(function (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(operators.takeUntil(this._ngUnsubscribe))
-                .subscribe(function (index) {
-                if (_this.index === index && _this.contentRendered) {
-                    _this.updateBreakpointAndResponsiveClass(_this.adapterService.getWidth(_this.tabContent));
-                }
-            });
-            this.tabsetService.addTab(this);
-        };
-        SkyVerticalTabComponent.prototype.ngOnDestroy = function () {
-            this._mobileSubscription.unsubscribe();
-            this._ngUnsubscribe.next();
-            this._ngUnsubscribe.complete();
-            this.tabsetService.destroyTab(this);
-        };
-        SkyVerticalTabComponent.prototype.tabIndex = function () {
-            if (!this.disabled) {
-                return 0;
-            }
-            else {
-                return -1;
-            }
-        };
-        SkyVerticalTabComponent.prototype.activateTab = function () {
-            if (!this.disabled) {
-                this.active = true;
-                this.tabsetService.activateTab(this);
-                this.changeRef.markForCheck();
-            }
-        };
-        SkyVerticalTabComponent.prototype.onTabButtonKeyUp = function (event) {
-            /*istanbul ignore else */
-            if (event.key) {
-                switch (event.key.toUpperCase()) {
-                    case ' ':
-                    case 'ENTER':
-                        this.activateTab();
-                        event.stopPropagation();
-                        break;
-                    /* istanbul ignore next */
-                    default:
-                        break;
-                }
-            }
-        };
-        SkyVerticalTabComponent.prototype.onWindowResize = function () {
-            this.updateBreakpointAndResponsiveClass(this.adapterService.getWidth(this.tabContent));
-        };
-        SkyVerticalTabComponent.prototype.tabDeactivated = function () {
-            this.changeRef.markForCheck();
-        };
-        SkyVerticalTabComponent.prototype.updateBreakpointAndResponsiveClass = function (width) {
-            this.verticalTabMediaQueryService.setBreakpointForWidth(width);
-            var newBreakpiont = this.verticalTabMediaQueryService.current;
-            this.adapterService.setResponsiveClass(this.tabContent, newBreakpiont);
-            this.changeRef.markForCheck();
-        };
-        return SkyVerticalTabComponent;
-    }());
-    SkyVerticalTabComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyVerticalTabComponent, deps: [{ token: SkyVerticalTabsetAdapterService }, { token: i0__namespace.ChangeDetectorRef }, { token: SkyVerticalTabsetService }, { token: SkyVerticalTabMediaQueryService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkyVerticalTabComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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: i1.SkyMediaQueryService,
-                useExisting: SkyVerticalTabMediaQueryService,
-            },
-        ], viewQueries: [{ propertyName: "tabContent", first: true, predicate: ["tabContentWrapper"], descendants: true }], ngImport: i0__namespace, 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]=\"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=\"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"], components: [{ type: i4__namespace.λ10, selector: "sky-status-indicator", inputs: ["indicatorType", "descriptionType", "customDescription"] }, { type: i4__namespace.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i2__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.λ2, selector: "[skyId]", exportAs: ["skyId"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyVerticalTabComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        selector: 'sky-vertical-tab',
-                        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]=\"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=\"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"],
-                        providers: [
-                            SkyVerticalTabMediaQueryService,
-                            {
-                                provide: i1.SkyMediaQueryService,
-                                useExisting: SkyVerticalTabMediaQueryService,
-                            },
-                        ],
-                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    }]
-            }], ctorParameters: function () { return [{ type: SkyVerticalTabsetAdapterService }, { type: i0__namespace.ChangeDetectorRef }, { type: SkyVerticalTabsetService }, { type: SkyVerticalTabMediaQueryService }]; }, propDecorators: { active: [{
-                    type: i0.Input
-                }], ariaControls: [{
-                    type: i0.Input
-                }], ariaRole: [{
-                    type: i0.Input
-                }], disabled: [{
-                    type: i0.Input
-                }], errorIndicator: [{
-                    type: i0.Input
-                }], tabHeaderCount: [{
-                    type: i0.Input
-                }], tabHeading: [{
-                    type: i0.Input
-                }], showTabRightArrow: [{
-                    type: i0.Input
-                }], tabId: [{
-                    type: i0.Input
-                }], tabContent: [{
-                    type: i0.ViewChild,
-                    args: ['tabContentWrapper']
-                }], onWindowResize: [{
-                    type: i0.HostListener,
-                    args: ['window:resize']
-                }] } });
-
-    var SkyVerticalTabsetGroupComponent = /** @class */ (function () {
-        function SkyVerticalTabsetGroupComponent(tabService, changeRef) {
-            var _this = this;
-            this.tabService = tabService;
-            this.changeRef = changeRef;
-            this.ngUnsubscribe = new rxjs.Subject();
-            this.openBeforeTabsHidden = false;
-            this._open = false;
-            this.tabClicked = function () {
-                _this.changeRef.markForCheck();
-            };
-            this.tabsHidden = function () {
-                // this fixes an animation bug with ngIf when the parent component goes from visible to hidden
-                _this.openBeforeTabsHidden = _this.open;
-                _this.open = false;
-                _this.changeRef.markForCheck();
-            };
-            this.tabsShown = function () {
-                _this.open = _this.openBeforeTabsHidden;
-                _this.changeRef.markForCheck();
-            };
-        }
-        Object.defineProperty(SkyVerticalTabsetGroupComponent.prototype, "open", {
-            get: function () {
-                return !this.disabled && this._open;
-            },
-            /**
-             * Indicates whether the collapsible group is expanded.
-             * @default false
-             */
-            set: function (value) {
-                this._open = value;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        SkyVerticalTabsetGroupComponent.prototype.ngOnInit = function () {
-            this.tabService.hidingTabs
-                .pipe(operators.takeUntil(this.ngUnsubscribe))
-                .subscribe(this.tabsHidden);
-            this.tabService.showingTabs
-                .pipe(operators.takeUntil(this.ngUnsubscribe))
-                .subscribe(this.tabsShown);
-            this.tabService.tabClicked
-                .pipe(operators.takeUntil(this.ngUnsubscribe))
-                .subscribe(this.tabClicked);
-        };
-        SkyVerticalTabsetGroupComponent.prototype.ngOnDestroy = function () {
-            this.ngUnsubscribe.next();
-            this.ngUnsubscribe.complete();
-        };
-        SkyVerticalTabsetGroupComponent.prototype.toggleMenuOpen = function () {
-            if (!this.disabled) {
-                this.open = !this.open;
-            }
-            this.changeRef.markForCheck();
-        };
-        SkyVerticalTabsetGroupComponent.prototype.subMenuOpen = function () {
-            return this.tabs && this.tabs.find(function (t) { return t.active; }) !== undefined;
-        };
-        return SkyVerticalTabsetGroupComponent;
-    }());
-    SkyVerticalTabsetGroupComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyVerticalTabsetGroupComponent, deps: [{ token: SkyVerticalTabsetService }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkyVerticalTabsetGroupComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyVerticalTabsetGroupComponent, selector: "sky-vertical-tabset-group", inputs: { disabled: "disabled", groupHeading: "groupHeading", open: "open" }, queries: [{ propertyName: "tabs", predicate: SkyVerticalTabComponent }], ngImport: i0__namespace, 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 sky-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]=\"open\"\n      (click)=\"toggleMenuOpen()\"\n      #groupHeadingButton\n    >\n      {{ groupHeading }}\n      <sky-expansion-indicator\n        class=\"sky-vertical-tabset-group-expansion-indicator\"\n        [direction]=\"open ? 'up' : 'down'\"\n      >\n      </sky-expansion-indicator>\n    </button>\n  </div>\n  <div\n    class=\"sky-vertical-tabset-group-content\"\n    role=\"region\"\n    skyId\n    [attr.labelledby]=\"groupHeadingButton.id\"\n    [@skyAnimationSlide]=\"open ? 'down' : 'up'\"\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"], components: [{ type: i4__namespace.λ15, selector: "sky-expansion-indicator", inputs: ["direction"] }], directives: [{ type: i2__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1__namespace.λ2, selector: "[skyId]", exportAs: ["skyId"] }], animations: [animations.skyAnimationSlide], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyVerticalTabsetGroupComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        selector: 'sky-vertical-tabset-group',
-                        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 sky-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]=\"open\"\n      (click)=\"toggleMenuOpen()\"\n      #groupHeadingButton\n    >\n      {{ groupHeading }}\n      <sky-expansion-indicator\n        class=\"sky-vertical-tabset-group-expansion-indicator\"\n        [direction]=\"open ? 'up' : 'down'\"\n      >\n      </sky-expansion-indicator>\n    </button>\n  </div>\n  <div\n    class=\"sky-vertical-tabset-group-content\"\n    role=\"region\"\n    skyId\n    [attr.labelledby]=\"groupHeadingButton.id\"\n    [@skyAnimationSlide]=\"open ? 'down' : 'up'\"\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"],
-                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                        animations: [animations.skyAnimationSlide],
-                    }]
-            }], ctorParameters: function () { return [{ type: SkyVerticalTabsetService }, { type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { disabled: [{
-                    type: i0.Input
-                }], groupHeading: [{
-                    type: i0.Input
-                }], open: [{
-                    type: i0.Input
-                }], tabs: [{
-                    type: i0.ContentChildren,
-                    args: [SkyVerticalTabComponent]
-                }] } });
-
-    var SkyVerticalTabsetComponent = /** @class */ (function () {
-        function SkyVerticalTabsetComponent(adapterService, tabService, resources, changeRef) {
-            this.adapterService = adapterService;
-            this.tabService = tabService;
-            this.resources = resources;
-            this.changeRef = changeRef;
-            /**
-             * Indicates whether the vertical tabset loads tab content during initialization so that it
-             * displays content without moving around elements in the content container.
-             * @default false
-             */
-            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 i0.EventEmitter();
-            this.isMobile = false;
-            this._ngUnsubscribe = new rxjs.Subject();
-        }
-        Object.defineProperty(SkyVerticalTabsetComponent.prototype, "ariaRole", {
-            /**
-             * Specifies an ARIA role for the vertical tabset
-             * [to support accessibility](https://developer.blackbaud.com/skyux/learn/accessibility)
-             * by indicating how the tabset functions and what it controls. For information about how
-             * an ARIA role indicates what an item represents on a web page, see the
-             * [WAI-ARIA roles model](https://www.w3.org/WAI/PF/aria/roles).
-             * @default "tablist"
-             * @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: function () {
-                if (this.isMobile) {
-                    return undefined;
-                }
-                return this._ariaRole || 'tablist';
-            },
-            set: function (value) {
-                this._ariaRole = value;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        SkyVerticalTabsetComponent.prototype.ngOnInit = function () {
-            var _this = this;
-            this.tabService.maintainTabContent = this.maintainTabContent;
-            this.tabService.indexChanged
-                .pipe(operators.takeUntil(this._ngUnsubscribe))
-                .subscribe(function (index) {
-                _this.activeChange.emit(index);
-                if (_this.contentWrapper) {
-                    _this.adapterService.scrollToContentTop(_this.contentWrapper);
-                }
-                _this.changeRef.markForCheck();
-            });
-            this.tabService.switchingMobile
-                .pipe(operators.takeUntil(this._ngUnsubscribe))
-                .subscribe(function (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(operators.take(1))
-                    .subscribe(function (resource) {
-                    /* sanity check */
-                    /* istanbul ignore else */
-                    if (!_this.showTabsText) {
-                        _this.showTabsText = resource;
-                    }
-                });
-            }
-        };
-        SkyVerticalTabsetComponent.prototype.ngAfterViewChecked = function () {
-            this.tabService.content = this.content;
-            this.tabService.updateContent();
-        };
-        SkyVerticalTabsetComponent.prototype.ngOnDestroy = function () {
-            this._ngUnsubscribe.next();
-            this._ngUnsubscribe.complete();
-        };
-        return SkyVerticalTabsetComponent;
-    }());
-    SkyVerticalTabsetComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyVerticalTabsetComponent, deps: [{ token: SkyVerticalTabsetAdapterService }, { token: SkyVerticalTabsetService }, { token: i3__namespace.SkyLibResourcesService }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkyVerticalTabsetComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyVerticalTabsetComponent, selector: "sky-vertical-tabset", inputs: { showTabsText: "showTabsText", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", ariaRole: "ariaRole", maintainTabContent: "maintainTabContent" }, outputs: { activeChange: "activeChange" }, providers: [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__namespace, template: "<div class=\"sky-vertical-tabset\" (window:resize)=\"tabService.updateContent()\">\n  <div\n    *ngIf=\"maintainTabContent || tabService.tabsVisible()\"\n    aria-orientation=\"vertical\"\n    class=\"sky-vertical-tabset-group-container\"\n    [ngClass]=\"{ 'sky-vertical-tabset-hidden': !tabService.tabsVisible() }\"\n    [attr.aria-label]=\"ariaLabel\"\n    [attr.aria-labelledby]=\"ariaLabelledBy\"\n    [attr.role]=\"ariaRole\"\n    [@tabGroupEnter]=\"tabService.animationTabsVisibleState\"\n    #groupContainerWrapper\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"], components: [{ type: i4__namespace.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [
-            animations$1.trigger('tabGroupEnter', [
-                animations$1.transition(HIDDEN_STATE + " => " + VISIBLE_STATE, [
-                    animations$1.style({ transform: 'translate(-100%)' }),
-                    animations$1.animate('150ms ease-in'),
-                ]),
-            ]),
-            animations$1.trigger('contentEnter', [
-                animations$1.transition(HIDDEN_STATE + " => " + VISIBLE_STATE, [
-                    animations$1.style({ transform: 'translate(100%)' }),
-                    animations$1.animate('150ms ease-in'),
-                ]),
-            ]),
-        ], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyVerticalTabsetComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        selector: 'sky-vertical-tabset',
-                        template: "<div class=\"sky-vertical-tabset\" (window:resize)=\"tabService.updateContent()\">\n  <div\n    *ngIf=\"maintainTabContent || tabService.tabsVisible()\"\n    aria-orientation=\"vertical\"\n    class=\"sky-vertical-tabset-group-container\"\n    [ngClass]=\"{ 'sky-vertical-tabset-hidden': !tabService.tabsVisible() }\"\n    [attr.aria-label]=\"ariaLabel\"\n    [attr.aria-labelledby]=\"ariaLabelledBy\"\n    [attr.role]=\"ariaRole\"\n    [@tabGroupEnter]=\"tabService.animationTabsVisibleState\"\n    #groupContainerWrapper\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"],
-                        providers: [SkyVerticalTabsetService],
-                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                        animations: [
-                            animations$1.trigger('tabGroupEnter', [
-                                animations$1.transition(HIDDEN_STATE + " => " + VISIBLE_STATE, [
-                                    animations$1.style({ transform: 'translate(-100%)' }),
-                                    animations$1.animate('150ms ease-in'),
-                                ]),
-                            ]),
-                            animations$1.trigger('contentEnter', [
-                                animations$1.transition(HIDDEN_STATE + " => " + VISIBLE_STATE, [
-                                    animations$1.style({ transform: 'translate(100%)' }),
-                                    animations$1.animate('150ms ease-in'),
-                                ]),
-                            ]),
-                        ],
-                    }]
-            }], ctorParameters: function () { return [{ type: SkyVerticalTabsetAdapterService }, { type: SkyVerticalTabsetService }, { type: i3__namespace.SkyLibResourcesService }, { type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { showTabsText: [{
-                    type: i0.Input
-                }], ariaLabel: [{
-                    type: i0.Input
-                }], ariaLabelledBy: [{
-                    type: i0.Input
-                }], ariaRole: [{
-                    type: i0.Input
-                }], maintainTabContent: [{
-                    type: i0.Input
-                }], activeChange: [{
-                    type: i0.Output
-                }], tabGroups: [{
-                    type: i0.ViewChild,
-                    args: ['groupContainerWrapper']
-                }], content: [{
-                    type: i0.ViewChild,
-                    args: ['skySideContent']
-                }], contentWrapper: [{
-                    type: i0.ViewChild,
-                    args: ['contentContainerWrapper']
-                }] } });
-
-    var SkyVerticalTabsetModule = /** @class */ (function () {
-        function SkyVerticalTabsetModule() {
-        }
-        return SkyVerticalTabsetModule;
-    }());
-    SkyVerticalTabsetModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyVerticalTabsetModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    SkyVerticalTabsetModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyVerticalTabsetModule, declarations: [SkyVerticalTabsetComponent,
-            SkyVerticalTabsetGroupComponent,
-            SkyVerticalTabComponent], imports: [i2.CommonModule,
-            i4.SkyIconModule,
-            i1.SkyIdModule,
-            i4.SkyExpansionIndicatorModule,
-            i4.SkyStatusIndicatorModule,
-            SkyTabsResourcesModule,
-            i8.SkyThemeModule], exports: [SkyVerticalTabsetComponent,
-            SkyVerticalTabsetGroupComponent,
-            SkyVerticalTabComponent] });
-    SkyVerticalTabsetModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyVerticalTabsetModule, providers: [SkyVerticalTabsetAdapterService], imports: [[
-                i2.CommonModule,
-                i4.SkyIconModule,
-                i1.SkyIdModule,
-                i4.SkyExpansionIndicatorModule,
-                i4.SkyStatusIndicatorModule,
-                SkyTabsResourcesModule,
-                i8.SkyThemeModule,
-            ]] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyVerticalTabsetModule, decorators: [{
-                type: i0.NgModule,
-                args: [{
-                        declarations: [
-                            SkyVerticalTabsetComponent,
-                            SkyVerticalTabsetGroupComponent,
-                            SkyVerticalTabComponent,
-                        ],
-                        imports: [
-                            i2.CommonModule,
-                            i4.SkyIconModule,
-                            i1.SkyIdModule,
-                            i4.SkyExpansionIndicatorModule,
-                            i4.SkyStatusIndicatorModule,
-                            SkyTabsResourcesModule,
-                            i8.SkyThemeModule,
-                        ],
-                        providers: [SkyVerticalTabsetAdapterService],
-                        exports: [
-                            SkyVerticalTabsetComponent,
-                            SkyVerticalTabsetGroupComponent,
-                            SkyVerticalTabComponent,
-                        ],
-                    }]
-            }] });
-
-    var SkySectionedFormService = /** @class */ (function () {
-        function SkySectionedFormService() {
-            /**
-             * @internal
-             */
-            this.invalidChange = new rxjs.BehaviorSubject(undefined);
-            /**
-             * @internal
-             */
-            this.requiredChange = new rxjs.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.
-         */
-        SkySectionedFormService.prototype.invalidFieldChanged = function (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.
-         */
-        SkySectionedFormService.prototype.requiredFieldChanged = function (isRequired) {
-            this.requiredChange.next(isRequired);
-        };
-        return SkySectionedFormService;
-    }());
-    SkySectionedFormService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkySectionedFormService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    SkySectionedFormService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkySectionedFormService });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkySectionedFormService, decorators: [{
-                type: i0.Injectable
-            }] });
-
-    var nextId$1 = 0;
-    /**
-     * Creates an individual form to display as a section within the sectioned form.
-     */
-    var SkySectionedFormSectionComponent = /** @class */ (function () {
-        function SkySectionedFormSectionComponent(sectionedFormService, tabsetService, changeRef) {
-            this.sectionedFormService = sectionedFormService;
-            this.tabsetService = tabsetService;
-            this.changeRef = changeRef;
-            this.sectionTabId = "sky-sectioned-form-tab-" + ++nextId$1;
-            this.sectionContentId = "sky-sectioned-form-section-" + ++nextId$1;
-            /**
-             * Indicates whether the section is active when the form loads.
-             * @default false
-             */
-            this.active = false;
-            this._ngUnsubscribe = new rxjs.Subject();
-        }
-        SkySectionedFormSectionComponent.prototype.ngOnInit = function () {
-            var _this = this;
-            this.changeRef.detectChanges();
-            this.tabsetService.switchingMobile.subscribe(function (mobile) {
-                _this.changeRef.detectChanges();
-            });
-            this.sectionedFormService.requiredChange
-                .pipe(operators.takeUntil(this._ngUnsubscribe))
-                .subscribe(function (required) { return (_this.fieldRequired = required); });
-            this.sectionedFormService.invalidChange
-                .pipe(operators.takeUntil(this._ngUnsubscribe))
-                .subscribe(function (invalid) { return (_this.fieldInvalid = invalid); });
-        };
-        SkySectionedFormSectionComponent.prototype.ngOnDestroy = function () {
-            this._ngUnsubscribe.next();
-            this._ngUnsubscribe.complete();
-        };
-        return SkySectionedFormSectionComponent;
-    }());
-    SkySectionedFormSectionComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkySectionedFormSectionComponent, deps: [{ token: SkySectionedFormService }, { token: SkyVerticalTabsetService }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkySectionedFormSectionComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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__namespace, 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:#ef4044;padding-left:5px}\n"], components: [{ type: SkyVerticalTabComponent, selector: "sky-vertical-tab", inputs: ["active", "ariaControls", "ariaRole", "disabled", "errorIndicator", "tabHeaderCount", "tabHeading", "showTabRightArrow", "tabId"] }], directives: [{ type: i2__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkySectionedFormSectionComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        selector: 'sky-sectioned-form-section',
-                        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",
-                        providers: [SkySectionedFormService],
-                        styles: [":host .sky-tab-field-required ::ng-deep .sky-vertical-tab-heading:after{content:\"*\";color:#ef4044;padding-left:5px}\n"],
-                    }]
-            }], ctorParameters: function () { return [{ type: SkySectionedFormService }, { type: SkyVerticalTabsetService }, { type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { heading: [{
-                    type: i0.Input
-                }], itemCount: [{
-                    type: i0.Input
-                }], active: [{
-                    type: i0.Input
-                }], tab: [{
-                    type: i0.ViewChild,
-                    args: [SkyVerticalTabComponent]
-                }] } });
-
-    /**
-     * Creates a container for the sectioned forms.
-     */
-    var SkySectionedFormComponent = /** @class */ (function () {
-        function SkySectionedFormComponent(tabService, changeRef) {
-            this.tabService = tabService;
-            this.changeRef = changeRef;
-            /**
-             * Indicates 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 i0.EventEmitter();
-            this.isMobile = false;
-            this._ngUnsubscribe = new rxjs.Subject();
-        }
-        Object.defineProperty(SkySectionedFormComponent.prototype, "ariaRole", {
-            get: function () {
-                return this.isMobile ? undefined : 'tablist';
-            },
-            enumerable: false,
-            configurable: true
-        });
-        SkySectionedFormComponent.prototype.ngOnInit = function () {
-            var _this = this;
-            this.tabService.maintainTabContent = this.maintainSectionContent;
-            this.tabService.indexChanged
-                .pipe(operators.takeUntil(this._ngUnsubscribe))
-                .subscribe(function (index) {
-                _this.indexChanged.emit(index);
-                _this.changeRef.markForCheck();
-            });
-            this.tabService.switchingMobile
-                .pipe(operators.takeUntil(this._ngUnsubscribe))
-                .subscribe(function (mobile) {
-                _this.isMobile = mobile;
-                _this.changeRef.markForCheck();
-            });
-            if (this.tabService.isMobile()) {
-                this.isMobile = true;
-                this.tabService.animationContentVisibleState = VISIBLE_STATE;
-                this.changeRef.markForCheck();
-            }
-        };
-        SkySectionedFormComponent.prototype.ngAfterViewChecked = function () {
-            this.tabService.content = this.content;
-            this.tabService.updateContent();
-        };
-        SkySectionedFormComponent.prototype.ngOnDestroy = function () {
-            this._ngUnsubscribe.next();
-            this._ngUnsubscribe.complete();
-        };
-        SkySectionedFormComponent.prototype.tabsVisible = function () {
-            this.changeRef.markForCheck();
-            return this.tabService.tabsVisible();
-        };
-        SkySectionedFormComponent.prototype.showTabs = function () {
-            this.tabService.showTabs();
-            this.changeRef.markForCheck();
-        };
-        return SkySectionedFormComponent;
-    }());
-    SkySectionedFormComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkySectionedFormComponent, deps: [{ token: SkyVerticalTabsetService }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkySectionedFormComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkySectionedFormComponent, selector: "sky-sectioned-form", inputs: { maintainSectionContent: "maintainSectionContent" }, outputs: { indexChanged: "indexChanged" }, providers: [SkyVerticalTabsetService], viewQueries: [{ propertyName: "content", first: true, predicate: ["skySectionSideContent"], descendants: true }], ngImport: i0__namespace, template: "<div\n  aria-orientation=\"vertical\"\n  class=\"sky-sectioned-form\"\n  [attr.role]=\"ariaRole\"\n  (window:resize)=\"tabService.updateContent()\"\n>\n  <div\n    *ngIf=\"maintainSectionContent || tabsVisible()\"\n    class=\"sky-sectioned-form-tabs\"\n    [ngClass]=\"{ 'sky-sectioned-form-tabs-hidden': !tabsVisible() }\"\n    [@tabEnter]=\"tabService.animationTabsVisibleState\"\n  >\n    <ng-content></ng-content>\n  </div>\n  <div\n    *ngIf=\"maintainSectionContent || tabService.contentVisible()\"\n    class=\"sky-sectioned-form-content\"\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%;margin: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%;margin: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{display:none}.sky-sectioned-form-content-hidden{display:none}:host-context(.sky-theme-modern) .sky-sectioned-form-content{margin: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{margin: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"], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [
-            animations$1.trigger('tabEnter', [
-                animations$1.transition(HIDDEN_STATE + " => " + VISIBLE_STATE, [
-                    animations$1.style({ transform: 'translate(-100%)' }),
-                    animations$1.animate('150ms ease-in'),
-                ]),
-            ]),
-            animations$1.trigger('contentEnter', [
-                animations$1.transition(HIDDEN_STATE + " => " + VISIBLE_STATE, [
-                    animations$1.style({ transform: 'translate(100%)' }),
-                    animations$1.animate('150ms ease-in'),
-                ]),
-            ]),
-        ], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkySectionedFormComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        selector: 'sky-sectioned-form',
-                        template: "<div\n  aria-orientation=\"vertical\"\n  class=\"sky-sectioned-form\"\n  [attr.role]=\"ariaRole\"\n  (window:resize)=\"tabService.updateContent()\"\n>\n  <div\n    *ngIf=\"maintainSectionContent || tabsVisible()\"\n    class=\"sky-sectioned-form-tabs\"\n    [ngClass]=\"{ 'sky-sectioned-form-tabs-hidden': !tabsVisible() }\"\n    [@tabEnter]=\"tabService.animationTabsVisibleState\"\n  >\n    <ng-content></ng-content>\n  </div>\n  <div\n    *ngIf=\"maintainSectionContent || tabService.contentVisible()\"\n    class=\"sky-sectioned-form-content\"\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%;margin: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%;margin: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{display:none}.sky-sectioned-form-content-hidden{display:none}:host-context(.sky-theme-modern) .sky-sectioned-form-content{margin: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{margin: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"],
-                        providers: [SkyVerticalTabsetService],
-                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                        animations: [
-                            animations$1.trigger('tabEnter', [
-                                animations$1.transition(HIDDEN_STATE + " => " + VISIBLE_STATE, [
-                                    animations$1.style({ transform: 'translate(-100%)' }),
-                                    animations$1.animate('150ms ease-in'),
-                                ]),
-                            ]),
-                            animations$1.trigger('contentEnter', [
-                                animations$1.transition(HIDDEN_STATE + " => " + VISIBLE_STATE, [
-                                    animations$1.style({ transform: 'translate(100%)' }),
-                                    animations$1.animate('150ms ease-in'),
-                                ]),
-                            ]),
-                        ],
-                    }]
-            }], ctorParameters: function () { return [{ type: SkyVerticalTabsetService }, { type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { maintainSectionContent: [{
-                    type: i0.Input
-                }], indexChanged: [{
-                    type: i0.Output
-                }], content: [{
-                    type: i0.ViewChild,
-                    args: ['skySectionSideContent']
-                }] } });
-
-    var SkySectionedFormModule = /** @class */ (function () {
-        function SkySectionedFormModule() {
-        }
-        return SkySectionedFormModule;
-    }());
-    SkySectionedFormModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkySectionedFormModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    SkySectionedFormModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkySectionedFormModule, declarations: [SkySectionedFormComponent, SkySectionedFormSectionComponent], imports: [i2.CommonModule,
-            forms.SkyCheckboxModule,
-            i8.SkyThemeModule,
-            SkyVerticalTabsetModule], exports: [SkySectionedFormComponent, SkySectionedFormSectionComponent] });
-    SkySectionedFormModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkySectionedFormModule, imports: [[
-                i2.CommonModule,
-                forms.SkyCheckboxModule,
-                i8.SkyThemeModule,
-                SkyVerticalTabsetModule,
-            ]] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkySectionedFormModule, decorators: [{
-                type: i0.NgModule,
-                args: [{
-                        declarations: [SkySectionedFormComponent, SkySectionedFormSectionComponent],
-                        imports: [
-                            i2.CommonModule,
-                            forms.SkyCheckboxModule,
-                            i8.SkyThemeModule,
-                            SkyVerticalTabsetModule,
-                        ],
-                        exports: [SkySectionedFormComponent, SkySectionedFormSectionComponent],
-                    }]
-            }] });
-
-    /**
-     * @internal
-     */
-    var SkyTabButtonComponent = /** @class */ (function () {
-        function SkyTabButtonComponent() {
-            this.buttonClick = new i0.EventEmitter();
-            this.closeClick = new i0.EventEmitter();
-        }
-        SkyTabButtonComponent.prototype.onButtonClick = function (event) {
-            if (!this.disabled) {
-                this.buttonClick.emit();
-                event.preventDefault();
-            }
-        };
-        SkyTabButtonComponent.prototype.onTabButtonKeyDown = function (event) {
-            /*istanbul ignore else */
-            if (event.key) {
-                switch (event.key.toUpperCase()) {
-                    case ' ':
-                    case 'ENTER':
-                        this.onButtonClick(event);
-                        break;
-                    /* istanbul ignore next */
-                    default:
-                        break;
-                }
-            }
-        };
-        SkyTabButtonComponent.prototype.onCloseClick = function (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();
-        };
-        return SkyTabButtonComponent;
-    }());
-    SkyTabButtonComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTabButtonComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkyTabButtonComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyTabButtonComponent, selector: "sky-tab-button", inputs: { active: "active", ariaControls: "ariaControls", buttonHref: "buttonHref", buttonId: "buttonId", buttonText: "buttonText", buttonTextCount: "buttonTextCount", closeable: "closeable", disabled: "disabled", tabStyle: "tabStyle" }, outputs: { buttonClick: "buttonClick", closeClick: "closeClick" }, ngImport: i0__namespace, template: "<div\n  class=\"sky-btn-tab-wrapper\"\n  [ngClass]=\"{\n    'sky-btn-tab-wrapper-selected': active,\n    'sky-btn-tab-wrapper-disabled': disabled\n  }\"\n>\n  <a\n    class=\"sky-btn-tab\"\n    role=\"tab\"\n    [attr.aria-controls]=\"ariaControls\"\n    [attr.aria-disabled]=\"disabled\"\n    [attr.aria-selected]=\"active\"\n    [attr.href]=\"buttonHref\"\n    [id]=\"buttonId\"\n    [ngClass]=\"{\n      'sky-btn-tab-wizard': tabStyle === 'wizard',\n      'sky-btn-tab-selected': active,\n      'sky-btn-tab-disabled': disabled,\n      'sky-tab-btn-closeable': closeable\n    }\"\n    [tabindex]=\"disabled ? '-1' : '0'\"\n    (click)=\"onButtonClick($event)\"\n    (keydown)=\"onTabButtonKeyDown($event)\"\n  >\n    <span class=\"sky-tab-heading\">\n      {{ buttonText }}\n      <span *ngIf=\"buttonTextCount !== undefined\" class=\"sky-tab-header-count\">\n        {{ buttonTextCount }}\n      </span>\n    </span>\n  </a>\n\n  <button\n    *ngIf=\"closeable\"\n    class=\"sky-btn-tab-close\"\n    type=\"button\"\n    [attr.aria-label]=\"'skyux_tab_close' | skyLibResources: buttonText\"\n    [disabled]=\"disabled\"\n    [ngClass]=\"{\n      'sky-btn-tab-close-disabled': disabled\n    }\"\n    (click)=\"onCloseClick($event)\"\n  >\n    <sky-icon icon=\"remove\"></sky-icon>\n  </button>\n</div>\n", styles: [".sky-btn-tab-wrapper{display:inline-block;position:relative;margin-right:5px}.sky-btn-tab-wrapper .sky-btn-tab-close{position:absolute;top:10px;right:10px;color:#686c73}.sky-btn-tab-wrapper .sky-btn-tab-close:hover{color:#212327;transition:color .15s}.sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:#fff}.sky-tab-btn-closeable{padding-right:43px}: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"], components: [{ type: i4__namespace.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i2__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "skyLibResources": i3__namespace.SkyLibResourcesPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTabButtonComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        selector: 'sky-tab-button',
-                        template: "<div\n  class=\"sky-btn-tab-wrapper\"\n  [ngClass]=\"{\n    'sky-btn-tab-wrapper-selected': active,\n    'sky-btn-tab-wrapper-disabled': disabled\n  }\"\n>\n  <a\n    class=\"sky-btn-tab\"\n    role=\"tab\"\n    [attr.aria-controls]=\"ariaControls\"\n    [attr.aria-disabled]=\"disabled\"\n    [attr.aria-selected]=\"active\"\n    [attr.href]=\"buttonHref\"\n    [id]=\"buttonId\"\n    [ngClass]=\"{\n      'sky-btn-tab-wizard': tabStyle === 'wizard',\n      'sky-btn-tab-selected': active,\n      'sky-btn-tab-disabled': disabled,\n      'sky-tab-btn-closeable': closeable\n    }\"\n    [tabindex]=\"disabled ? '-1' : '0'\"\n    (click)=\"onButtonClick($event)\"\n    (keydown)=\"onTabButtonKeyDown($event)\"\n  >\n    <span class=\"sky-tab-heading\">\n      {{ buttonText }}\n      <span *ngIf=\"buttonTextCount !== undefined\" class=\"sky-tab-header-count\">\n        {{ buttonTextCount }}\n      </span>\n    </span>\n  </a>\n\n  <button\n    *ngIf=\"closeable\"\n    class=\"sky-btn-tab-close\"\n    type=\"button\"\n    [attr.aria-label]=\"'skyux_tab_close' | skyLibResources: buttonText\"\n    [disabled]=\"disabled\"\n    [ngClass]=\"{\n      'sky-btn-tab-close-disabled': disabled\n    }\"\n    (click)=\"onCloseClick($event)\"\n  >\n    <sky-icon icon=\"remove\"></sky-icon>\n  </button>\n</div>\n",
-                        styles: [".sky-btn-tab-wrapper{display:inline-block;position:relative;margin-right:5px}.sky-btn-tab-wrapper .sky-btn-tab-close{position:absolute;top:10px;right:10px;color:#686c73}.sky-btn-tab-wrapper .sky-btn-tab-close:hover{color:#212327;transition:color .15s}.sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:#fff}.sky-tab-btn-closeable{padding-right:43px}: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"],
-                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                        encapsulation: i0.ViewEncapsulation.None,
-                    }]
-            }], propDecorators: { active: [{
-                    type: i0.Input
-                }], ariaControls: [{
-                    type: i0.Input
-                }], buttonHref: [{
-                    type: i0.Input
-                }], buttonId: [{
-                    type: i0.Input
-                }], buttonText: [{
-                    type: i0.Input
-                }], buttonTextCount: [{
-                    type: i0.Input
-                }], closeable: [{
-                    type: i0.Input
-                }], disabled: [{
-                    type: i0.Input
-                }], tabStyle: [{
-                    type: i0.Input
-                }], buttonClick: [{
-                    type: i0.Output
-                }], closeClick: [{
-                    type: i0.Output
-                }] } });
-
-    /**
-     * @internal
-     */
-    var SkyTabsetPermalinkService = /** @class */ (function () {
-        function SkyTabsetPermalinkService(activatedRoute, location, router) {
-            this.activatedRoute = activatedRoute;
-            this.location = location;
-            this.router = router;
-            this._popStateChange = new rxjs.Subject();
-        }
-        Object.defineProperty(SkyTabsetPermalinkService.prototype, "popStateChange", {
-            get: function () {
-                return this._popStateChange.asObservable();
-            },
-            enumerable: false,
-            configurable: true
-        });
-        SkyTabsetPermalinkService.prototype.ngOnDestroy = function () {
-            if (this.subscription) {
-                this.subscription.unsubscribe();
-            }
-        };
-        SkyTabsetPermalinkService.prototype.init = function () {
-            var _this = this;
-            this.subscription = this.location.subscribe(function () {
-                _this._popStateChange.next();
-            });
-        };
-        /**
-         * Returns the value of a URL query param.
-         */
-        SkyTabsetPermalinkService.prototype.getParam = function (name) {
-            return this.getParams()[name];
-        };
-        /**
-         * Sets the value of a URL query param.
-         */
-        SkyTabsetPermalinkService.prototype.setParam = function (name, value) {
-            var 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
-            var 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.
-         */
-        SkyTabsetPermalinkService.prototype.clearParam = function (name) {
-            /*tslint:disable-next-line:no-null-keyword*/
-            this.setParam(name, null);
-        };
-        /**
-         * Returns a relative URL that includes the provided query parameter. The value is inteded to be
-         * used by an HTML anchor element.
-         */
-        SkyTabsetPermalinkService.prototype.getParamHref = function (name, value) {
-            if (!name) {
-                /*tslint:disable-next-line:no-null-keyword*/
-                return null;
-            }
-            var params = this.getParams();
-            params[name] = value;
-            var baseUrl = this.location.path().split('?')[0];
-            var paramString = Object.keys(params)
-                .map(function (k) { return 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.
-         */
-        SkyTabsetPermalinkService.prototype.urlify = function (value) {
-            if (!value) {
-                return '';
-            }
-            var 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.
-         */
-        SkyTabsetPermalinkService.prototype.getParams = function () {
-            var params = {};
-            var path = this.location.path();
-            if (path.indexOf('?') === -1) {
-                return params;
-            }
-            var existingParamPairs = path.split('?')[1].split('&');
-            existingParamPairs.forEach(function (pair) {
-                var fragments = pair.split('=');
-                params[fragments[0]] = decodeURIComponent(fragments[1]);
-            });
-            return params;
-        };
-        return SkyTabsetPermalinkService;
-    }());
-    SkyTabsetPermalinkService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTabsetPermalinkService, deps: [{ token: i1__namespace$1.ActivatedRoute }, { token: i2__namespace.Location }, { token: i1__namespace$1.Router }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    SkyTabsetPermalinkService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTabsetPermalinkService });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTabsetPermalinkService, decorators: [{
-                type: i0.Injectable
-            }], ctorParameters: function () { return [{ type: i1__namespace$1.ActivatedRoute }, { type: i2__namespace.Location }, { type: i1__namespace$1.Router }]; } });
-
-    /**
-     * @internal
-     */
-    var SkyTabsetService = /** @class */ (function () {
-        function SkyTabsetService() {
-            this.currentActiveTabIndex = 0;
-            this._activeTabIndex = new rxjs.BehaviorSubject(0);
-            this._activeTabUnregistered = new rxjs.Subject();
-            this.tabs = [];
-            this.tabCounter = 0;
-        }
-        Object.defineProperty(SkyTabsetService.prototype, "activeTabUnregistered", {
-            get: function () {
-                return this._activeTabUnregistered.asObservable();
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(SkyTabsetService.prototype, "activeTabIndex", {
-            get: function () {
-                return this._activeTabIndex.asObservable();
-            },
-            enumerable: false,
-            configurable: true
-        });
-        /**
-         * Sets the active tab by its unique `tabIndex` property.
-         */
-        SkyTabsetService.prototype.setActiveTabIndex = function (value, config) {
-            if (config === void 0) { config = {
-                emitChange: true,
-            }; }
-            if (value !== undefined &&
-                !this.tabIndexesEqual(value, this.currentActiveTabIndex)) {
-                this.currentActiveTabIndex = value;
-                /* istanbul ignore else */
-                if (config.emitChange) {
-                    this._activeTabIndex.next(value);
-                }
-            }
-        };
-        /**
-         * Registers a tab component.
-         */
-        SkyTabsetService.prototype.registerTab = function (tabIndex) {
-            if (tabIndex === undefined) {
-                tabIndex = this.tabCounter;
-                this.tabCounter++;
-            }
-            this.tabs.push({ tabIndex: tabIndex });
-            return tabIndex;
-        };
-        SkyTabsetService.prototype.updateTabIndex = function (currentTabIndex, newTabIndex) {
-            var _this = this;
-            var found = this.tabs.find(function (tab) { return _this.tabIndexesEqual(tab.tabIndex, currentTabIndex); });
-            found.tabIndex = newTabIndex;
-        };
-        /**
-         * Unregisters a tab component.
-         */
-        SkyTabsetService.prototype.unregisterTab = function (tabIndex) {
-            var _this = this;
-            var index = this.tabs.findIndex(function (tab) { return _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.
-         */
-        SkyTabsetService.prototype.unregisterAll = function () {
-            this.tabs = [];
-        };
-        /**
-         * Compares two tab indexes and returns `true` if they are equal.
-         */
-        SkyTabsetService.prototype.tabIndexesEqual = function (tabIndex1, tabIndex2) {
-            return tabIndex1 === tabIndex2 || +tabIndex1 === +tabIndex2;
-        };
-        /**
-         * Verifies if a provided tab index is registered.
-         */
-        SkyTabsetService.prototype.isValidTabIndex = function (tabIndex) {
-            var _this = this;
-            return this.tabs.some(function (tab) { return _this.tabIndexesEqual(tab.tabIndex, tabIndex); });
-        };
-        /**
-         * Activates the first registered tab.
-         */
-        SkyTabsetService.prototype.activateFirstTab = function () {
-            var firstTabIndex = this.tabs[0] && this.tabs[0].tabIndex;
-            if (firstTabIndex !== undefined) {
-                this.setActiveTabIndex(firstTabIndex);
-                return firstTabIndex;
-            }
-        };
-        /**
-         * Activates the next registered tab, or the previous one based on a provided array index.
-         */
-        SkyTabsetService.prototype.activateNearestTab = function (arrayIndex) {
-            var newActiveTab = this.tabs[arrayIndex] || this.tabs[arrayIndex - 1];
-            if (newActiveTab) {
-                this.currentActiveTabIndex = newActiveTab.tabIndex;
-            }
-        };
-        SkyTabsetService.prototype.isTabIndexActive = function (tabIndex) {
-            return this.tabIndexesEqual(tabIndex, this.currentActiveTabIndex);
-        };
-        return SkyTabsetService;
-    }());
-    SkyTabsetService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTabsetService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    SkyTabsetService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTabsetService });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTabsetService, decorators: [{
-                type: i0.Injectable
-            }] });
-
-    var nextId = 0;
-    var SkyTabComponent = /** @class */ (function () {
-        function SkyTabComponent(changeDetector, permalinkService, tabsetService) {
-            this.changeDetector = changeDetector;
-            this.permalinkService = permalinkService;
-            this.tabsetService = tabsetService;
-            /**
-             * 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.close = new i0.EventEmitter(); // eslint-disable-line @angular-eslint/no-output-native
-            this.showContent = false;
-            this._activeChange = new rxjs.BehaviorSubject(undefined);
-            this._stateChange = new rxjs.BehaviorSubject(undefined);
-            this._tabIndexChange = new rxjs.BehaviorSubject(undefined);
-            var id = nextId++;
-            this.tabPanelId = "sky-tab-" + id;
-            this.tabButtonId = this.tabPanelId + "-nav-btn";
-        }
-        Object.defineProperty(SkyTabComponent.prototype, "active", {
-            get: function () {
-                return this._active || false;
-            },
-            /**
-             * Indicates 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: function (value) {
-                if (value !== undefined && value !== this._active) {
-                    this._active = value;
-                    this._activeChange.next();
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(SkyTabComponent.prototype, "activeChange", {
-            get: function () {
-                return this._activeChange.asObservable();
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(SkyTabComponent.prototype, "permalinkValue", {
-            get: function () {
-                return (this._permalinkValue || this.permalinkService.urlify(this.tabHeading));
-            },
-            /**
-             * Specifies a 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.
-             */
-            set: function (value) {
-                this._permalinkValue = this.permalinkService.urlify(value);
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(SkyTabComponent.prototype, "tabIndex", {
-            get: function () {
-                return this._tabIndex;
-            },
-            /**
-             * Specifies a unique identifier for the tab.
-             * If not defined, the identifier is set to the position of the tab on load, starting with `0`.
-             */
-            set: function (value) {
-                if (value !== this._tabIndex &&
-                    value !== undefined &&
-                    this._tabIndex !== undefined) {
-                    this.tabsetService.updateTabIndex(this._tabIndex, value);
-                    this._tabIndexChange.next(value);
-                }
-                this._tabIndex = value;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(SkyTabComponent.prototype, "closeable", {
-            get: function () {
-                return this.close.observers.length > 0;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(SkyTabComponent.prototype, "stateChange", {
-            /**
-             * Alerts the tabset component when this component has changes that need to be reflected in the UI.
-             */
-            get: function () {
-                return this._stateChange.asObservable();
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(SkyTabComponent.prototype, "tabIndexChange", {
-            get: function () {
-                return this._tabIndexChange.asObservable();
-            },
-            enumerable: false,
-            configurable: true
-        });
-        SkyTabComponent.prototype.ngOnChanges = function (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();
-            }
-        };
-        SkyTabComponent.prototype.ngOnDestroy = function () {
-            this._stateChange.complete();
-            this.tabsetService.unregisterTab(this.tabIndex);
-        };
-        SkyTabComponent.prototype.init = function () {
-            this._tabIndex = this.tabsetService.registerTab(this.tabIndex);
-        };
-        SkyTabComponent.prototype.activate = function () {
-            this._active = true;
-            this.showContent = true;
-            this.changeDetector.markForCheck();
-        };
-        SkyTabComponent.prototype.deactivate = function () {
-            this._active = false;
-            this.showContent = false;
-            this.changeDetector.markForCheck();
-        };
-        return SkyTabComponent;
-    }());
-    SkyTabComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTabComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: SkyTabsetPermalinkService }, { token: SkyTabsetService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkyTabComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyTabComponent, selector: "sky-tab", inputs: { active: "active", disabled: "disabled", permalinkValue: "permalinkValue", tabHeaderCount: "tabHeaderCount", tabHeading: "tabHeading", tabIndex: "tabIndex" }, outputs: { close: "close" }, usesOnChanges: true, ngImport: i0__namespace, 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", changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTabComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        selector: 'sky-tab',
-                        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",
-                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    }]
-            }], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }, { type: SkyTabsetPermalinkService }, { type: SkyTabsetService }]; }, propDecorators: { active: [{
-                    type: i0.Input
-                }], disabled: [{
-                    type: i0.Input
-                }], permalinkValue: [{
-                    type: i0.Input
-                }], tabHeaderCount: [{
-                    type: i0.Input
-                }], tabHeading: [{
-                    type: i0.Input
-                }], tabIndex: [{
-                    type: i0.Input
-                }], close: [{
-                    type: i0.Output
-                }] } });
-
-    var buttonTypeNext = 'next';
-    var buttonTypePrevious = 'previous';
-    /**
-     * @internal
-     */
-    var SkyTabsetNavButtonComponent = /** @class */ (function () {
-        function SkyTabsetNavButtonComponent(resourceService, changeDetector) {
-            this.resourceService = resourceService;
-            this.changeDetector = changeDetector;
-        }
-        Object.defineProperty(SkyTabsetNavButtonComponent.prototype, "buttonText", {
-            get: function () {
-                if (this._buttonText) {
-                    return this._buttonText;
-                }
-                switch (this.buttonType) {
-                    case buttonTypePrevious:
-                        return this.previousButtonText;
-                    case buttonTypeNext:
-                        return this.nextButtonText;
-                    /* istanbul ignore next */
-                    default:
-                        return '';
-                }
-            },
-            set: function (value) {
-                this._buttonText = value;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(SkyTabsetNavButtonComponent.prototype, "disabled", {
-            get: function () {
-                var tabToSelect;
-                switch (this.buttonType) {
-                    case buttonTypePrevious:
-                        tabToSelect = this.previousTab;
-                        break;
-                    case buttonTypeNext:
-                        tabToSelect = this.nextTab;
-                        break;
-                    /* istanbul ignore next */
-                    default:
-                        break;
-                }
-                return !tabToSelect || tabToSelect.disabled;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(SkyTabsetNavButtonComponent.prototype, "selectedTab", {
-            get: function () {
-                var _this = this;
-                var selectedTab;
-                if (this.tabset && this.tabset.tabs) {
-                    selectedTab = this.tabset.tabs.find(function (tab) { return tab.tabIndex === _this.tabset.lastActiveTabIndex; });
-                }
-                return selectedTab;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(SkyTabsetNavButtonComponent.prototype, "nextTab", {
-            get: function () {
-                var selectedTab = this.selectedTab;
-                if (selectedTab) {
-                    var tabs = this.tabset.tabs.toArray();
-                    return tabs[tabs.indexOf(selectedTab) + 1];
-                }
-                return undefined;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(SkyTabsetNavButtonComponent.prototype, "previousTab", {
-            get: function () {
-                var selectedTab = this.selectedTab;
-                if (selectedTab) {
-                    var tabs = this.tabset.tabs.toArray();
-                    return tabs[tabs.indexOf(selectedTab) - 1];
-                }
-                return undefined;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        SkyTabsetNavButtonComponent.prototype.ngAfterViewInit = function () {
-            var _this = this;
-            rxjs.forkJoin([
-                this.resourceService.getString('skyux_tabs_navigator_previous'),
-                this.resourceService.getString('skyux_tabs_navigator_next'),
-            ])
-                .pipe(operators.take(1))
-                .subscribe(function (resources) {
-                _this.previousButtonText = resources[0];
-                _this.nextButtonText = resources[1];
-                _this.changeDetector.detectChanges();
-            });
-        };
-        SkyTabsetNavButtonComponent.prototype.buttonClick = function () {
-            var tabToSelect;
-            switch (this.buttonType) {
-                case buttonTypePrevious:
-                    tabToSelect = this.previousTab;
-                    break;
-                case buttonTypeNext:
-                    tabToSelect = this.nextTab;
-                    break;
-                /* istanbul ignore next */
-                default:
-                    break;
-            }
-            /* istanbul ignore else */
-            if (tabToSelect && !tabToSelect.disabled) {
-                this.tabset.active = tabToSelect.tabIndex;
-            }
-        };
-        return SkyTabsetNavButtonComponent;
-    }());
-    SkyTabsetNavButtonComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTabsetNavButtonComponent, deps: [{ token: i3__namespace.SkyLibResourcesService }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkyTabsetNavButtonComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyTabsetNavButtonComponent, selector: "sky-tabset-nav-button", inputs: { tabset: "tabset", buttonType: "buttonType", buttonText: "buttonText" }, ngImport: i0__namespace, template: "<button\n  class=\"sky-btn sky-btn-default\"\n  type=\"button\"\n  [disabled]=\"disabled\"\n  (click)=\"buttonClick()\"\n>\n  {{ buttonText }}\n</button>\n" });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTabsetNavButtonComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        selector: 'sky-tabset-nav-button',
-                        template: "<button\n  class=\"sky-btn sky-btn-default\"\n  type=\"button\"\n  [disabled]=\"disabled\"\n  (click)=\"buttonClick()\"\n>\n  {{ buttonText }}\n</button>\n",
-                    }]
-            }], ctorParameters: function () { return [{ type: i3__namespace.SkyLibResourcesService }, { type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { tabset: [{
-                    type: i0.Input
-                }], buttonType: [{
-                    type: i0.Input
-                }], buttonText: [{
-                    type: i0.Input
-                }] } });
-
-    /**
-     * @internal
-     */
-    var SkyTabsetAdapterService = /** @class */ (function () {
-        function SkyTabsetAdapterService() {
-            this._overflowChange = new rxjs.BehaviorSubject(false);
-        }
-        Object.defineProperty(SkyTabsetAdapterService.prototype, "overflowChange", {
-            get: function () {
-                return this._overflowChange.asObservable();
-            },
-            enumerable: false,
-            configurable: true
-        });
-        SkyTabsetAdapterService.prototype.registerTabset = function (tabsetRef) {
-            this.tabsetRef = tabsetRef;
-            this.tabsOffsetLeft = this.getTabsOffsetLeft(tabsetRef.nativeElement);
-        };
-        /**
-         * Detects if the tab buttons are wider than the tabset container.
-         */
-        SkyTabsetAdapterService.prototype.detectOverflow = function () {
-            var nativeElement = this.tabsetRef.nativeElement;
-            var tabsetRect = nativeElement
-                .querySelector('.sky-tabset')
-                .getBoundingClientRect();
-            var tabButtonsRect = nativeElement
-                .querySelector('.sky-tabset-tabs')
-                .getBoundingClientRect();
-            var tabExtraButtonsRect = nativeElement
-                .querySelector('.sky-tabset-btns')
-                .getBoundingClientRect();
-            var tabButtonsWidth = tabButtonsRect.width + tabExtraButtonsRect.width + this.tabsOffsetLeft;
-            var 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.
-         */
-        SkyTabsetAdapterService.prototype.getTabsOffsetLeft = function (tabsetEl) {
-            var tabsetRect = tabsetEl.getBoundingClientRect();
-            // The dropdown element is the first "tab" and always exists in the DOM, even when hidden.
-            var firstTabRect = tabsetEl
-                .querySelector('.sky-tabset-dropdown')
-                .getBoundingClientRect();
-            return firstTabRect.left - tabsetRect.left;
-        };
-        return SkyTabsetAdapterService;
-    }());
-    SkyTabsetAdapterService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTabsetAdapterService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    SkyTabsetAdapterService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTabsetAdapterService });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTabsetAdapterService, decorators: [{
-                type: i0.Injectable
-            }] });
-
-    var SkyTabsetComponent = /** @class */ (function () {
-        function SkyTabsetComponent(changeDetector, elementRef, adapterService, permalinkService, tabsetService) {
-            this.changeDetector = changeDetector;
-            this.elementRef = elementRef;
-            this.adapterService = adapterService;
-            this.permalinkService = permalinkService;
-            this.tabsetService = tabsetService;
-            /**
-             * Fires when the active tab changes. This event emits the index of the active tab.
-             */
-            this.activeChange = new i0.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.newTab = new i0.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.openTab = new i0.EventEmitter();
-            /**
-             * Fires when any tab's `tabIndex` value changes.
-             */
-            this.tabIndexesChange = new i0.EventEmitter();
-            this.tabButtons = [];
-            this.ngUnsubscribe = new rxjs.Subject();
-            this.tabComponentsStateChangeUnsubscribe = new rxjs.Subject();
-        }
-        Object.defineProperty(SkyTabsetComponent.prototype, "active", {
-            get: function () {
-                return this._active;
-            },
-            /**
-             * Activates a tab by its `tabIndex` property.
-             */
-            set: function (value) {
-                var _this = this;
-                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(function () {
-                        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();
-                        }
-                    });
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(SkyTabsetComponent.prototype, "permalinkId", {
-            get: function () {
-                return this._permalinkId || '';
-            },
-            /**
-             * 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`.
-             */
-            set: function (value) {
-                if (!value) {
-                    return;
-                }
-                var sanitized = this.permalinkService.urlify(value);
-                this._permalinkId = sanitized + "-active-tab";
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(SkyTabsetComponent.prototype, "tabStyle", {
-            get: function () {
-                return this._tabStyle || 'tabs';
-            },
-            /**
-             * Specifies the behavior for a series of tabs.
-             * @deprecated The property was designed to create wizards by setting tabStyle="wizard" on tabsets in modals,
-             * but this wizard implementation was replaced by the
-             * [progress indicator component](https://developer.blackbaud.com/skyux/components/progress-indicator).
-             * @default "tabs"
-             */
-            set: function (value) {
-                /*istanbul ignore else*/
-                if (value && value.toLowerCase() === 'wizard') {
-                    console.warn('The tabset wizard is deprecated. Please implement the new approach using ' +
-                        'progress indicator as documented here: https://developer.blackbaud.com/skyux/components/wizard.');
-                }
-                this._tabStyle = value;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(SkyTabsetComponent.prototype, "tabDisplayMode", {
-            get: function () {
-                return this._tabDisplayMode || 'tabs';
-            },
-            set: function (value) {
-                this._tabDisplayMode = value;
-                this.changeDetector.markForCheck();
-            },
-            enumerable: false,
-            configurable: true
-        });
-        SkyTabsetComponent.prototype.ngAfterViewInit = function () {
-            var _this = this;
-            this.initTabComponents();
-            this.listenTabComponentsStructuralChange();
-            var 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(operators.takeUntil(this.ngUnsubscribe))
-                .subscribe(function (tab) {
-                // Wait for the new tabs to render before activating.
-                setTimeout(function () {
-                    _this.tabsetService.activateNearestTab(tab.arrayIndex);
-                });
-            });
-            // Let the tabset render the initial active index before listening for changes.
-            setTimeout(function () {
-                _this.listenTabComponentsStateChange();
-                _this.listenActiveIndexChange();
-                _this.permalinkService.init();
-            });
-        };
-        SkyTabsetComponent.prototype.ngOnDestroy = function () {
-            this.ngUnsubscribe.next();
-            this.ngUnsubscribe.complete();
-            this.unsubscribeTabComponentsStateChange();
-            this.permalinkService.clearParam(this.permalinkId);
-        };
-        SkyTabsetComponent.prototype.onWindowResize = function () {
-            this.adapterService.detectOverflow();
-        };
-        SkyTabsetComponent.prototype.onTabCloseClick = function (tabButton) {
-            var _this = this;
-            var tabComponent = this.tabs.find(function (tab) { return _this.tabsetService.tabIndexesEqual(tab.tabIndex, tabButton.tabIndex); });
-            tabComponent.close.emit();
-        };
-        SkyTabsetComponent.prototype.onTabButtonClick = function (tabButton) {
-            this.tabsetService.setActiveTabIndex(tabButton.tabIndex);
-        };
-        SkyTabsetComponent.prototype.onNewTabClick = function () {
-            this.newTab.emit();
-        };
-        SkyTabsetComponent.prototype.onOpenTabClick = function () {
-            this.openTab.emit();
-        };
-        /**
-         * 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?
-         */
-        SkyTabsetComponent.prototype.getInitialTabIndex = function () {
-            var _a;
-            var activeIndex = this.getActiveTabIndexByPermalinkId();
-            if (activeIndex === undefined) {
-                activeIndex = (_a = this.getActiveTabComponent()) === null || _a === void 0 ? void 0 : _a.tabIndex;
-                if (activeIndex === undefined) {
-                    activeIndex = this.active;
-                }
-            }
-            return activeIndex;
-        };
-        SkyTabsetComponent.prototype.listenActiveIndexChange = function () {
-            var _this = this;
-            this.tabsetService.activeTabIndex
-                .pipe(operators.distinctUntilChanged(), operators.takeUntil(this.ngUnsubscribe))
-                .subscribe(function (activeIndex) {
-                _this.updateTabsetComponent(activeIndex);
-            });
-        };
-        SkyTabsetComponent.prototype.listenTabComponentsStructuralChange = function () {
-            var _this = this;
-            this.tabs.changes.pipe(operators.takeUntil(this.ngUnsubscribe)).subscribe(function () {
-                _this.resetTabComponents();
-            });
-        };
-        SkyTabsetComponent.prototype.listenTabComponentsStateChange = function () {
-            var _this = this;
-            rxjs.combineLatest(this.tabs.map(function (tab) { return tab.activeChange; }))
-                .pipe(operators.takeUntil(rxjs.race(this.tabComponentsStateChangeUnsubscribe, this.ngUnsubscribe)))
-                .subscribe(function () {
-                // Wait for the tab components to render changes before finding the active one.
-                setTimeout(function () {
-                    var _a;
-                    var tabIndex = (_a = _this.getActiveTabComponent()) === null || _a === void 0 ? void 0 : _a.tabIndex;
-                    _this.tabsetService.setActiveTabIndex(tabIndex);
-                });
-            });
-            rxjs.combineLatest(this.tabs.map(function (tab) { return tab.tabIndexChange; }))
-                .pipe(operators.takeUntil(rxjs.race(this.tabComponentsStateChangeUnsubscribe, this.ngUnsubscribe)))
-                .subscribe(function () {
-                // Don't emit the first change.
-                if (_this.lastActiveTabIndex !== undefined) {
-                    // Wait for the tab components to render changes before updating the view.
-                    setTimeout(function () {
-                        _this.updateTabsetComponent(_this.tabsetService.currentActiveTabIndex, true);
-                        _this.emitTabIndexChange();
-                    });
-                }
-            });
-            rxjs.combineLatest(this.tabs.map(function (tab) { return tab.stateChange; }))
-                .pipe(operators.takeUntil(rxjs.race(this.tabComponentsStateChangeUnsubscribe, this.ngUnsubscribe)))
-                .subscribe(function () {
-                // Wait for the tab components to render changes before finding the active one.
-                setTimeout(function () {
-                    _this.updateTabsetComponent(_this.tabsetService.currentActiveTabIndex, true);
-                });
-            });
-        };
-        SkyTabsetComponent.prototype.initTabComponents = function () {
-            this.tabs.forEach(function (tab) { return tab.init(); });
-        };
-        SkyTabsetComponent.prototype.resetTabComponents = function () {
-            var _a;
-            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();
-            var activeIndex = (_a = this.getActiveTabComponent()) === null || _a === void 0 ? void 0 : _a.tabIndex;
-            this.tabsetService.setActiveTabIndex(activeIndex, {
-                emitChange: false,
-            });
-            this.listenTabComponentsStateChange();
-        };
-        SkyTabsetComponent.prototype.emitTabIndexChange = function () {
-            this.tabIndexesChange.emit({
-                tabs: this.tabs.map(function (tab) { return ({
-                    tabHeading: tab.tabHeading,
-                    tabIndex: tab.tabIndex,
-                }); }),
-            });
-        };
-        SkyTabsetComponent.prototype.unsubscribeTabComponentsStateChange = function () {
-            this.tabComponentsStateChangeUnsubscribe.next();
-            this.tabComponentsStateChangeUnsubscribe.complete();
-            this.tabComponentsStateChangeUnsubscribe = new rxjs.Subject();
-        };
-        SkyTabsetComponent.prototype.listenTabButtonsOverflowChange = function () {
-            var _this = this;
-            this.adapterService.registerTabset(this.elementRef);
-            this.adapterService.overflowChange
-                .pipe(operators.takeUntil(this.ngUnsubscribe))
-                .subscribe(function (isOverflowing) {
-                _this.tabDisplayMode = isOverflowing ? 'dropdown' : 'tabs';
-                _this.changeDetector.markForCheck();
-            });
-        };
-        /**
-         * Listen for back/forward history button presses to detect query param changes in the URL.
-         */
-        SkyTabsetComponent.prototype.listenLocationPopStateChange = function () {
-            var _this = this;
-            this.permalinkService.popStateChange
-                .pipe(operators.takeUntil(this.ngUnsubscribe))
-                .subscribe(function () {
-                _this.setActiveTabIndexByPermalinkId();
-            });
-        };
-        SkyTabsetComponent.prototype.setActiveTabIndexByPermalinkId = function () {
-            var activeIndex = this.getActiveTabIndexByPermalinkId();
-            this.tabsetService.setActiveTabIndex(activeIndex);
-        };
-        SkyTabsetComponent.prototype.getActiveTabIndexByPermalinkId = function () {
-            var _a;
-            if (this.permalinkId) {
-                var paramValue_1 = this.permalinkService.getParam(this.permalinkId);
-                if (paramValue_1) {
-                    return (_a = this.tabs.find(function (tab) { return tab.permalinkValue === paramValue_1; })) === null || _a === void 0 ? void 0 : _a.tabIndex;
-                }
-            }
-        };
-        SkyTabsetComponent.prototype.getActiveTabComponent = function () {
-            return this.tabs
-                .toArray()
-                .reverse()
-                .find(function (tab) { return tab.active === true; });
-        };
-        SkyTabsetComponent.prototype.createTabButtons = function (activeIndex) {
-            var _this = this;
-            return this.tabs.map(function (tab) { return ({
-                active: _this.tabsetService.tabIndexesEqual(tab.tabIndex, activeIndex),
-                closeable: tab.closeable,
-                ariaControls: tab.tabPanelId,
-                disabled: tab.disabled,
-                /*tslint:disable-next-line:no-null-keyword*/
-                buttonHref: tab.disabled
-                    ? null
-                    : _this.permalinkService.getParamHref(_this.permalinkId, tab.permalinkValue),
-                buttonId: tab.tabButtonId,
-                buttonTextCount: tab.tabHeaderCount,
-                buttonText: tab.tabHeading,
-                tabIndex: tab.tabIndex,
-            }); });
-        };
-        SkyTabsetComponent.prototype.updateTabButtons = function (activeIndex) {
-            var _this = this;
-            this.tabButtons.forEach(function (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.
-         */
-        SkyTabsetComponent.prototype.updateTabsetComponent = function (activeIndex, regenerateTabButtons) {
-            var _this = this;
-            if (regenerateTabButtons === void 0) { regenerateTabButtons = false; }
-            var _a;
-            // Activate/deactivate tab components.
-            this.tabs.forEach(function (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 = (_a = this.tabButtons.find(function (b) {
-                return _this.tabsetService.tabIndexesEqual(b.tabIndex, activeIndex);
-            })) === null || _a === void 0 ? void 0 : _a.buttonText;
-            // Set the query params based on active tab.
-            if (this.permalinkId) {
-                var activeTabComponent = this.tabs.find(function (tab) {
-                    return _this.tabsetService.tabIndexesEqual(tab.tabIndex, activeIndex);
-                });
-                this.permalinkService.setParam(this.permalinkId, activeTabComponent.permalinkValue);
-            }
-            // Wait for tab button view models to render before gauging dimensions.
-            setTimeout(function () {
-                _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);
-            }
-        };
-        return SkyTabsetComponent;
-    }());
-    SkyTabsetComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTabsetComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: i0__namespace.ElementRef }, { token: SkyTabsetAdapterService }, { token: SkyTabsetPermalinkService }, { token: SkyTabsetService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkyTabsetComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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" }, providers: [
-            SkyTabsetAdapterService,
-            SkyTabsetPermalinkService,
-            SkyTabsetService,
-        ], queries: [{ propertyName: "tabs", predicate: SkyTabComponent }], ngImport: i0__namespace, 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>\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    [tabStyle]=\"tabStyle\"\n    (buttonClick)=\"onTabButtonClick(tabButton)\"\n    (closeClick)=\"onTabCloseClick(tabButton)\"\n  ></sky-tab-button>\n</ng-template>\n", styles: [".sky-tabset{align-items:center;border-bottom:2px solid #0974a1;display:flex;list-style-type:none;margin:0;overflow:hidden;padding:0 0 0 15px;white-space:nowrap}.sky-tabset.sky-tabset-style-wizard{border-bottom:none;padding-bottom:10px;padding-left:0}.sky-tabset-btns{order:1;padding-left:10px}.sky-tabset-dropdown{order:0;max-width:100%}.sky-tabset-mode-dropdown{line-height:0}.sky-tabset-mode-dropdown .sky-tabset-tabs{visibility:hidden;order:2}.sky-tab-dropdown-menu-item sky-tab-button{display:flex;min-width:300px}.sky-tab-dropdown-menu-item .sky-dropdown-item{margin:0}.sky-tab-dropdown-menu-item .sky-btn-tab-wrapper{width:100%;margin-right:0}.sky-tab-dropdown-menu-item .sky-btn-tab{margin:0;border-radius:0;width:100%;display:flex}.sky-tab-dropdown-menu-item .sky-btn-tab>.sky-tab-heading{flex:1 1 auto}.sky-tab-dropdown-menu-item .sky-btn-tab>.sky-btn-tab-close{flex:0 1 auto}.sky-tabset-tabs{order:0;white-space:nowrap}.sky-tabset-btn-new,.sky-tabset-btn-open{color:#0974a1}.sky-theme-modern .sky-tabset{border-bottom:1px solid #d2d2d2;overflow:visible}.sky-theme-modern .sky-tab-dropdown-menu-item .sky-btn-tab-wrapper{margin-right:0}\n"], components: [{ type: i4__namespace$1.λ3, selector: "sky-dropdown", inputs: ["buttonStyle", "buttonType", "disabled", "dismissOnBlur", "label", "horizontalAlignment", "messageStream", "title", "trigger"] }, { type: i4__namespace$1.λ2, selector: "sky-dropdown-button" }, { type: i4__namespace$1.λ4, selector: "sky-dropdown-menu", inputs: ["ariaLabelledBy", "ariaRole", "useNativeFocus"], outputs: ["menuChanges"] }, { type: i4__namespace$1.λ1, selector: "sky-dropdown-item", inputs: ["ariaRole"] }, { type: i4__namespace.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { type: SkyTabButtonComponent, selector: "sky-tab-button", inputs: ["active", "ariaControls", "buttonHref", "buttonId", "buttonText", "buttonTextCount", "closeable", "disabled", "tabStyle"], outputs: ["buttonClick", "closeClick"] }], directives: [{ type: i2__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i8__namespace.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }], pipes: { "skyLibResources": i3__namespace.SkyLibResourcesPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTabsetComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        selector: 'sky-tabset',
-                        styles: [".sky-tabset{align-items:center;border-bottom:2px solid #0974a1;display:flex;list-style-type:none;margin:0;overflow:hidden;padding:0 0 0 15px;white-space:nowrap}.sky-tabset.sky-tabset-style-wizard{border-bottom:none;padding-bottom:10px;padding-left:0}.sky-tabset-btns{order:1;padding-left:10px}.sky-tabset-dropdown{order:0;max-width:100%}.sky-tabset-mode-dropdown{line-height:0}.sky-tabset-mode-dropdown .sky-tabset-tabs{visibility:hidden;order:2}.sky-tab-dropdown-menu-item sky-tab-button{display:flex;min-width:300px}.sky-tab-dropdown-menu-item .sky-dropdown-item{margin:0}.sky-tab-dropdown-menu-item .sky-btn-tab-wrapper{width:100%;margin-right:0}.sky-tab-dropdown-menu-item .sky-btn-tab{margin:0;border-radius:0;width:100%;display:flex}.sky-tab-dropdown-menu-item .sky-btn-tab>.sky-tab-heading{flex:1 1 auto}.sky-tab-dropdown-menu-item .sky-btn-tab>.sky-btn-tab-close{flex:0 1 auto}.sky-tabset-tabs{order:0;white-space:nowrap}.sky-tabset-btn-new,.sky-tabset-btn-open{color:#0974a1}.sky-theme-modern .sky-tabset{border-bottom:1px solid #d2d2d2;overflow:visible}.sky-theme-modern .sky-tab-dropdown-menu-item .sky-btn-tab-wrapper{margin-right:0}\n"],
-                        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>\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    [tabStyle]=\"tabStyle\"\n    (buttonClick)=\"onTabButtonClick(tabButton)\"\n    (closeClick)=\"onTabCloseClick(tabButton)\"\n  ></sky-tab-button>\n</ng-template>\n",
-                        providers: [
-                            SkyTabsetAdapterService,
-                            SkyTabsetPermalinkService,
-                            SkyTabsetService,
-                        ],
-                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                        encapsulation: i0.ViewEncapsulation.None,
-                    }]
-            }], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }, { type: i0__namespace.ElementRef }, { type: SkyTabsetAdapterService }, { type: SkyTabsetPermalinkService }, { type: SkyTabsetService }]; }, propDecorators: { active: [{
-                    type: i0.Input
-                }], ariaLabel: [{
-                    type: i0.Input
-                }], ariaLabelledBy: [{
-                    type: i0.Input
-                }], permalinkId: [{
-                    type: i0.Input
-                }], tabStyle: [{
-                    type: i0.Input
-                }], activeChange: [{
-                    type: i0.Output
-                }], newTab: [{
-                    type: i0.Output
-                }], openTab: [{
-                    type: i0.Output
-                }], tabIndexesChange: [{
-                    type: i0.Output
-                }], tabs: [{
-                    type: i0.ContentChildren,
-                    args: [SkyTabComponent]
-                }] } });
-
-    var SkyTabsModule = /** @class */ (function () {
-        function SkyTabsModule() {
-        }
-        return SkyTabsModule;
-    }());
-    SkyTabsModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTabsModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    SkyTabsModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTabsModule, declarations: [SkyTabButtonComponent,
-            SkyTabComponent,
-            SkyTabsetComponent,
-            SkyTabsetNavButtonComponent], imports: [i2.CommonModule,
-            i1$1.RouterModule,
-            i4$1.SkyDropdownModule,
-            i3.SkyI18nModule,
-            i4.SkyIconModule,
-            SkyTabsResourcesModule,
-            i8.SkyThemeModule], exports: [SkyTabComponent, SkyTabsetComponent, SkyTabsetNavButtonComponent] });
-    SkyTabsModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTabsModule, imports: [[
-                i2.CommonModule,
-                i1$1.RouterModule,
-                i4$1.SkyDropdownModule,
-                i3.SkyI18nModule,
-                i4.SkyIconModule,
-                SkyTabsResourcesModule,
-                i8.SkyThemeModule,
-            ]] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyTabsModule, decorators: [{
-                type: i0.NgModule,
-                args: [{
-                        declarations: [
-                            SkyTabButtonComponent,
-                            SkyTabComponent,
-                            SkyTabsetComponent,
-                            SkyTabsetNavButtonComponent,
-                        ],
-                        imports: [
-                            i2.CommonModule,
-                            i1$1.RouterModule,
-                            i4$1.SkyDropdownModule,
-                            i3.SkyI18nModule,
-                            i4.SkyIconModule,
-                            SkyTabsResourcesModule,
-                            i8.SkyThemeModule,
-                        ],
-                        exports: [SkyTabComponent, SkyTabsetComponent, SkyTabsetNavButtonComponent],
-                    }]
-            }] });
-
-    /**
-     * Generated bundle index. Do not edit.
-     */
-
-    exports.SkySectionedFormComponent = SkySectionedFormComponent;
-    exports.SkySectionedFormModule = SkySectionedFormModule;
-    exports.SkySectionedFormService = SkySectionedFormService;
-    exports.SkyTabsModule = SkyTabsModule;
-    exports.SkyVerticalTabsetModule = SkyVerticalTabsetModule;
-    exports["λ1"] = SkyTabComponent;
-    exports["λ2"] = SkyTabsetComponent;
-    exports["λ3"] = SkyTabsetNavButtonComponent;
-    exports["λ4"] = SkyVerticalTabComponent;
-    exports["λ5"] = SkySectionedFormSectionComponent;
-    exports["λ6"] = SkyVerticalTabsetComponent;
-    exports["λ7"] = SkyVerticalTabsetGroupComponent;
-
-    Object.defineProperty(exports, '__esModule', { value: true });
-
-}));
-//# sourceMappingURL=skyux-tabs.umd.js.map