@skyux/tabs 4.6.9

package/esm5/plugin-resources/tabs-resources-provider.js

@@ -0,0 +1,17 @@
+import { __decorate } from "tslib";
+import { Injectable } from '@angular/core';
+import { getStringForLocale } from '@skyux/i18n';
+var SkyTabsResourcesProvider = /** @class */ (function () {
+    function SkyTabsResourcesProvider() {
+        this.resources = { "EN-US": { "skyux_tab_add": "Add tab", "skyux_tab_close": "Close {0} tab", "skyux_tabs_navigator_next": "Next", "skyux_tabs_navigator_previous": "Previous", "skyux_tab_open": "Open tab", "skyux_vertical_tabs_show_tabs_text": "Tab list" } };
+    }
+    SkyTabsResourcesProvider.prototype.getString = function (localeInfo, name) {
+        return getStringForLocale(this.resources, localeInfo.locale, name);
+    };
+    SkyTabsResourcesProvider = __decorate([
+        Injectable()
+    ], SkyTabsResourcesProvider);
+    return SkyTabsResourcesProvider;
+}());
+export { SkyTabsResourcesProvider };
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFicy1yZXNvdXJjZXMtcHJvdmlkZXIuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9Ac2t5dXgvdGFicy8iLCJzb3VyY2VzIjpbInBsdWdpbi1yZXNvdXJjZXMvdGFicy1yZXNvdXJjZXMtcHJvdmlkZXIudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUNBLE9BQU8sRUFDTCxVQUFVLEVBQ1gsTUFBTSxlQUFlLENBQUM7QUFFdkIsT0FBTyxFQUNMLGtCQUFrQixFQUduQixNQUFNLGFBQWEsQ0FBQztBQUdyQjtJQUFBO1FBQ1UsY0FBUyxHQUFRLEVBQUMsT0FBTyxFQUFDLEVBQUMsZUFBZSxFQUFDLFNBQVMsRUFBQyxpQkFBaUIsRUFBQyxlQUFlLEVBQUMsMkJBQTJCLEVBQUMsTUFBTSxFQUFDLCtCQUErQixFQUFDLFVBQVUsRUFBQyxnQkFBZ0IsRUFBQyxVQUFVLEVBQUMsb0NBQW9DLEVBQUMsVUFBVSxFQUFDLEVBQUMsQ0FBQztJQUs3UCxDQUFDO0lBSFEsNENBQVMsR0FBaEIsVUFBaUIsVUFBNEIsRUFBRSxJQUFZO1FBQ3pELE9BQU8sa0JBQWtCLENBQUMsSUFBSSxDQUFDLFNBQVMsRUFBRSxVQUFVLENBQUMsTUFBTSxFQUFFLElBQUksQ0FBQyxDQUFDO0lBQ3JFLENBQUM7SUFMVSx3QkFBd0I7UUFEcEMsVUFBVSxFQUFFO09BQ0Esd0JBQXdCLENBTXBDO0lBQUQsK0JBQUM7Q0FBQSxBQU5ELElBTUM7U0FOWSx3QkFBd0IiLCJzb3VyY2VzQ29udGVudCI6WyJcbmltcG9ydCB7XG4gIEluamVjdGFibGVcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbmltcG9ydCB7XG4gIGdldFN0cmluZ0ZvckxvY2FsZSxcbiAgU2t5QXBwTG9jYWxlSW5mbyxcbiAgU2t5TGliUmVzb3VyY2VzUHJvdmlkZXJcbn0gZnJvbSAnQHNreXV4L2kxOG4nO1xuXG5ASW5qZWN0YWJsZSgpXG5leHBvcnQgY2xhc3MgU2t5VGFic1Jlc291cmNlc1Byb3ZpZGVyIGltcGxlbWVudHMgU2t5TGliUmVzb3VyY2VzUHJvdmlkZXIge1xuICBwcml2YXRlIHJlc291cmNlczogYW55ID0ge1wiRU4tVVNcIjp7XCJza3l1eF90YWJfYWRkXCI6XCJBZGQgdGFiXCIsXCJza3l1eF90YWJfY2xvc2VcIjpcIkNsb3NlIHswfSB0YWJcIixcInNreXV4X3RhYnNfbmF2aWdhdG9yX25leHRcIjpcIk5leHRcIixcInNreXV4X3RhYnNfbmF2aWdhdG9yX3ByZXZpb3VzXCI6XCJQcmV2aW91c1wiLFwic2t5dXhfdGFiX29wZW5cIjpcIk9wZW4gdGFiXCIsXCJza3l1eF92ZXJ0aWNhbF90YWJzX3Nob3dfdGFic190ZXh0XCI6XCJUYWIgbGlzdFwifX07XG5cbiAgcHVibGljIGdldFN0cmluZyhsb2NhbGVJbmZvOiBTa3lBcHBMb2NhbGVJbmZvLCBuYW1lOiBzdHJpbmcpOiBzdHJpbmcge1xuICAgIHJldHVybiBnZXRTdHJpbmdGb3JMb2NhbGUodGhpcy5yZXNvdXJjZXMsIGxvY2FsZUluZm8ubG9jYWxlLCBuYW1lKTtcbiAgfVxufVxuIl19

package/esm5/public_api.js

@@ -0,0 +1,10 @@
+export * from './modules/sectioned-form/sectioned-form.module';
+export * from './modules/sectioned-form/sectioned-form.service';
+export * from './modules/tabs/tabs.module';
+export * from './modules/vertical-tabset/vertical-tabset.module';
+// The following export is needed because our docs use it as a prescribed pattern.
+// Ideally, this functionality would live in a standard `Input` or `Output`.
+// https://developer.blackbaud.com/skyux/components/sectioned-form#code
+// TODO: Try to remove in a major release.
+export * from './modules/sectioned-form/sectioned-form.component';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljX2FwaS5qcyIsInNvdXJjZVJvb3QiOiJuZzovL0Bza3l1eC90YWJzLyIsInNvdXJjZXMiOlsicHVibGljX2FwaS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxjQUFjLGdEQUFnRCxDQUFDO0FBQy9ELGNBQWMsaURBQWlELENBQUM7QUFNaEUsY0FBYyw0QkFBNEIsQ0FBQztBQUUzQyxjQUFjLGtEQUFrRCxDQUFDO0FBRWpFLGtGQUFrRjtBQUNsRiw0RUFBNEU7QUFDNUUsdUVBQXVFO0FBQ3ZFLDBDQUEwQztBQUMxQyxjQUFjLG1EQUFtRCxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0ICogZnJvbSAnLi9tb2R1bGVzL3NlY3Rpb25lZC1mb3JtL3NlY3Rpb25lZC1mb3JtLm1vZHVsZSc7XG5leHBvcnQgKiBmcm9tICcuL21vZHVsZXMvc2VjdGlvbmVkLWZvcm0vc2VjdGlvbmVkLWZvcm0uc2VydmljZSc7XG5cbmV4cG9ydCAqIGZyb20gJy4vbW9kdWxlcy90YWJzL3RhYi1pbmRleCc7XG5leHBvcnQgKiBmcm9tICcuL21vZHVsZXMvdGFicy90YWJzZXQtYnV0dG9ucy1kaXNwbGF5LW1vZGUnO1xuZXhwb3J0ICogZnJvbSAnLi9tb2R1bGVzL3RhYnMvdGFic2V0LXN0eWxlJztcbmV4cG9ydCAqIGZyb20gJy4vbW9kdWxlcy90YWJzL3RhYnNldC10YWItaW5kZXhlcy1jaGFuZ2UnO1xuZXhwb3J0ICogZnJvbSAnLi9tb2R1bGVzL3RhYnMvdGFicy5tb2R1bGUnO1xuXG5leHBvcnQgKiBmcm9tICcuL21vZHVsZXMvdmVydGljYWwtdGFic2V0L3ZlcnRpY2FsLXRhYnNldC5tb2R1bGUnO1xuXG4vLyBUaGUgZm9sbG93aW5nIGV4cG9ydCBpcyBuZWVkZWQgYmVjYXVzZSBvdXIgZG9jcyB1c2UgaXQgYXMgYSBwcmVzY3JpYmVkIHBhdHRlcm4uXG4vLyBJZGVhbGx5LCB0aGlzIGZ1bmN0aW9uYWxpdHkgd291bGQgbGl2ZSBpbiBhIHN0YW5kYXJkIGBJbnB1dGAgb3IgYE91dHB1dGAuXG4vLyBodHRwczovL2RldmVsb3Blci5ibGFja2JhdWQuY29tL3NreXV4L2NvbXBvbmVudHMvc2VjdGlvbmVkLWZvcm0jY29kZVxuLy8gVE9ETzogVHJ5IHRvIHJlbW92ZSBpbiBhIG1ham9yIHJlbGVhc2UuXG5leHBvcnQgKiBmcm9tICcuL21vZHVsZXMvc2VjdGlvbmVkLWZvcm0vc2VjdGlvbmVkLWZvcm0uY29tcG9uZW50JztcbiJdfQ==

package/esm5/skyux-tabs.js

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

package/esm5/testing/public_api.js

@@ -0,0 +1,2 @@
+export * from './tabs/tabset-fixture';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljX2FwaS5qcyIsInNvdXJjZVJvb3QiOiJuZzovL0Bza3l1eC90YWJzL3Rlc3RpbmcvIiwic291cmNlcyI6WyJwdWJsaWNfYXBpLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUNBLGNBQWMsdUJBQXVCLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgKiBmcm9tICcuL3RhYnMvdGFiLWZpeHR1cmUtdGFiJztcbmV4cG9ydCAqIGZyb20gJy4vdGFicy90YWJzZXQtZml4dHVyZSc7XG4iXX0=

package/esm5/testing/skyux-tabs-testing.js

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+export * from './public_api';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2t5dXgtdGFicy10ZXN0aW5nLmpzIiwic291cmNlUm9vdCI6Im5nOi8vQHNreXV4L3RhYnMvdGVzdGluZy8iLCJzb3VyY2VzIjpbInNreXV4LXRhYnMtdGVzdGluZy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7R0FFRztBQUVILGNBQWMsY0FBYyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBHZW5lcmF0ZWQgYnVuZGxlIGluZGV4LiBEbyBub3QgZWRpdC5cbiAqL1xuXG5leHBvcnQgKiBmcm9tICcuL3B1YmxpY19hcGknO1xuIl19

package/esm5/testing/tabs/tab-fixture-tab.js

@@ -0,0 +1 @@
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFiLWZpeHR1cmUtdGFiLmpzIiwic291cmNlUm9vdCI6Im5nOi8vQHNreXV4L3RhYnMvdGVzdGluZy8iLCJzb3VyY2VzIjpbInRhYnMvdGFiLWZpeHR1cmUtdGFiLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiIiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIFByb3BlcnRpZXMgb2YgYSBTS1kgVVggdGFiLlxuICovXG5leHBvcnQgaW50ZXJmYWNlIFNreVRhYnNldEZpeHR1cmVUYWIge1xuXG4gIC8qKlxuICAgKiBJbmRpY2F0ZXMgd2hldGhlciB0aGUgdGFiIGlzIHRoZSBjdXJyZW50bHkgc2VsZWN0ZWQgdGFiLlxuICAgKi9cbiAgYWN0aXZlOiBib29sZWFuO1xuXG4gIC8qKlxuICAgKiBJbmRpY2F0ZXMgd2hldGhlciB0aGUgdGFiIGlzIGRpc2FibGVkLlxuICAgKi9cbiAgZGlzYWJsZWQ6IGJvb2xlYW47XG5cbiAgLyoqXG4gICAqIFRoZSBwZXJtYWxpbmsgdmFsdWUgc3BlY2lmaWVkIGZvciB0aGUgdGFiLlxuICAgKi9cbiAgcGVybWFsaW5rVmFsdWU6IHN0cmluZztcblxuICAvKipcbiAgICogVGhlIGNvdW50IGRpc3BsYXllZCBpbiB0aGUgdGFiIGhlYWRlci5cbiAgICovXG4gIHRhYkhlYWRlckNvdW50OiBzdHJpbmc7XG5cbiAgLyoqXG4gICAqIFRoZSB0ZXh0IGRpc3BsYXllZCBpbiB0aGUgdGFiIGhlYWRlci5cbiAgICovXG4gIHRhYkhlYWRpbmc6IHN0cmluZztcblxufVxuIl19

package/esm5/testing/tabs/tabset-fixture.js

@@ -0,0 +1,168 @@
+import { __awaiter, __generator } from "tslib";
+import { By } from '@angular/platform-browser';
+import { SkyAppTestUtility } from '@skyux-sdk/testing';
+/**
+ * Allows interaction with a SKY UX tabset component.
+ */
+var SkyTabsetFixture = /** @class */ (function () {
+    function SkyTabsetFixture(fixture, skyTestId) {
+        this.fixture = fixture;
+        this.debugEl = SkyAppTestUtility.getDebugElementByTestId(fixture, skyTestId, 'sky-tabset');
+    }
+    Object.defineProperty(SkyTabsetFixture.prototype, "ariaLabel", {
+        /**
+         * The tabset component's ARIA label.
+         */
+        get: function () {
+            var tabsetEl = this.getTabsetEl();
+            return tabsetEl.getAttribute('aria-label') || undefined;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(SkyTabsetFixture.prototype, "ariaLabelledBy", {
+        /**
+         * The tabset component's ARIA labelled by attribute.
+         */
+        get: function () {
+            var tabsetEl = this.getTabsetEl();
+            return tabsetEl.getAttribute('aria-labelledby') || undefined;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(SkyTabsetFixture.prototype, "activeTabIndex", {
+        /**
+         * The index of the currently selected tab.
+         */
+        get: function () {
+            var tabLinkEls = this.getTabLinkEls();
+            for (var i = 0, n = tabLinkEls.length; i < n; i++) {
+                if (tabLinkEls.item(i).classList.contains('sky-btn-tab-selected')) {
+                    return i;
+                }
+            }
+            return -1;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    /**
+     * Retrieves information about the tab at the specified index.
+     * @param tabIndex The index of the tab.
+     */
+    SkyTabsetFixture.prototype.getTab = function (tabIndex) {
+        var tabLinkEl = this.getTabLinkEl(tabIndex);
+        var active = this.activeTabIndex === tabIndex;
+        var disabled = tabLinkEl.classList.contains('sky-btn-tab-disabled');
+        var tabHeading = this.getTextContent(tabLinkEl.querySelector('.sky-tab-heading').childNodes[0]);
+        var tabHeaderCount = this.getTextContent(tabLinkEl.querySelector('.sky-tab-header-count'));
+        var permalinkValue;
+        if (tabLinkEl.href) {
+            var permalink = tabLinkEl.href.split('?')[1];
+            if (permalink) {
+                var permalinkParts = permalink.split('=');
+                permalinkValue = decodeURIComponent(permalinkParts[1]);
+            }
+        }
+        return {
+            active: active,
+            disabled: disabled,
+            permalinkValue: permalinkValue,
+            tabHeaderCount: tabHeaderCount,
+            tabHeading: tabHeading
+        };
+    };
+    /**
+     * Clicks the tabset's "new" button.
+     */
+    SkyTabsetFixture.prototype.clickNewButton = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                return [2 /*return*/, this.clickButton('sky-tabset-btn-new')];
+            });
+        });
+    };
+    /**
+     * Clicks the tabset's "open" button.
+     */
+    SkyTabsetFixture.prototype.clickOpenButton = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                return [2 /*return*/, this.clickButton('sky-tabset-btn-open')];
+            });
+        });
+    };
+    /**
+     * Clicks the tab button at the specified index.
+     * @param tabIndex The index of the tab.
+     */
+    SkyTabsetFixture.prototype.clickTab = function (tabIndex) {
+        return __awaiter(this, void 0, void 0, function () {
+            var tabLinkEl;
+            return __generator(this, function (_a) {
+                tabLinkEl = this.getTabLinkEl(tabIndex);
+                if (!tabLinkEl) {
+                    throw new Error("There is no tab at index " + tabIndex + ".");
+                }
+                tabLinkEl.click();
+                this.fixture.detectChanges();
+                return [2 /*return*/, this.fixture.whenStable()];
+            });
+        });
+    };
+    /**
+     * Click's the tab's close button at the specified index.
+     * @param tabIndex The index of the tab.
+     */
+    SkyTabsetFixture.prototype.clickTabClose = function (tabIndex) {
+        return __awaiter(this, void 0, void 0, function () {
+            var tabWrapperEl, closeBtnEl;
+            return __generator(this, function (_a) {
+                tabWrapperEl = this.getTabsetEl().querySelectorAll(".sky-tabset-tabs .sky-btn-tab-wrapper")[tabIndex];
+                if (!tabWrapperEl) {
+                    throw new Error("There is no tab at index " + tabIndex + ".");
+                }
+                closeBtnEl = tabWrapperEl.querySelector('.sky-btn-tab-close');
+                if (!closeBtnEl) {
+                    throw new Error('The specified tab does not have a close button.');
+                }
+                closeBtnEl.click();
+                this.fixture.detectChanges();
+                return [2 /*return*/, this.fixture.whenStable()];
+            });
+        });
+    };
+    SkyTabsetFixture.prototype.clickButton = function (buttonCls) {
+        return __awaiter(this, void 0, void 0, function () {
+            var tabsetEl, newButtonEl;
+            return __generator(this, function (_a) {
+                tabsetEl = this.getTabsetEl();
+                newButtonEl = tabsetEl.querySelector(".sky-tabset-btns ." + buttonCls);
+                newButtonEl.click();
+                this.fixture.detectChanges();
+                return [2 /*return*/, this.fixture.whenStable()];
+            });
+        });
+    };
+    SkyTabsetFixture.prototype.getTabsetEl = function () {
+        var tabsetEl = this.debugEl.query(By.css('.sky-tabset')).nativeElement;
+        return tabsetEl;
+    };
+    SkyTabsetFixture.prototype.getTabLinkEls = function () {
+        return this.getTabsetEl().querySelectorAll(".sky-tabset-tabs .sky-btn-tab");
+    };
+    SkyTabsetFixture.prototype.getTabLinkEl = function (tabIndex) {
+        var tabLinkEl = this.getTabLinkEls().item(tabIndex);
+        if (!tabLinkEl) {
+            throw new Error("There is no tab at index " + tabIndex + ".");
+        }
+        return tabLinkEl;
+    };
+    SkyTabsetFixture.prototype.getTextContent = function (el) {
+        return (el && el.textContent.trim()) || undefined;
+    };
+    return SkyTabsetFixture;
+}());
+export { SkyTabsetFixture };
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFic2V0LWZpeHR1cmUuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9Ac2t5dXgvdGFicy90ZXN0aW5nLyIsInNvdXJjZXMiOlsidGFicy90YWJzZXQtZml4dHVyZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBUUEsT0FBTyxFQUNMLEVBQUUsRUFDSCxNQUFNLDJCQUEyQixDQUFDO0FBRW5DLE9BQU8sRUFDTCxpQkFBaUIsRUFDbEIsTUFBTSxvQkFBb0IsQ0FBQztBQU01Qjs7R0FFRztBQUNIO0lBbUNFLDBCQUNVLE9BQThCLEVBQ3RDLFNBQWlCO1FBRFQsWUFBTyxHQUFQLE9BQU8sQ0FBdUI7UUFHdEMsSUFBSSxDQUFDLE9BQU8sR0FBRyxpQkFBaUIsQ0FBQyx1QkFBdUIsQ0FBQyxPQUFPLEVBQUUsU0FBUyxFQUFFLFlBQVksQ0FBQyxDQUFDO0lBQzdGLENBQUM7SUFuQ0Qsc0JBQVcsdUNBQVM7UUFIcEI7O1dBRUc7YUFDSDtZQUNFLElBQU0sUUFBUSxHQUFHLElBQUksQ0FBQyxXQUFXLEVBQUUsQ0FBQztZQUNwQyxPQUFPLFFBQVEsQ0FBQyxZQUFZLENBQUMsWUFBWSxDQUFDLElBQUksU0FBUyxDQUFDO1FBQzFELENBQUM7OztPQUFBO0lBS0Qsc0JBQVcsNENBQWM7UUFIekI7O1dBRUc7YUFDSDtZQUNFLElBQU0sUUFBUSxHQUFHLElBQUksQ0FBQyxXQUFXLEVBQUUsQ0FBQztZQUNwQyxPQUFPLFFBQVEsQ0FBQyxZQUFZLENBQUMsaUJBQWlCLENBQUMsSUFBSSxTQUFTLENBQUM7UUFDL0QsQ0FBQzs7O09BQUE7SUFLRCxzQkFBVyw0Q0FBYztRQUh6Qjs7V0FFRzthQUNIO1lBQ0UsSUFBTSxVQUFVLEdBQUcsSUFBSSxDQUFDLGFBQWEsRUFBRSxDQUFDO1lBRXhDLEtBQUssSUFBSSxDQUFDLEdBQUcsQ0FBQyxFQUFFLENBQUMsR0FBRyxVQUFVLENBQUMsTUFBTSxFQUFFLENBQUMsR0FBRyxDQUFDLEVBQUUsQ0FBQyxFQUFFLEVBQUU7Z0JBQ2pELElBQUks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QyxJQUFJLEVBQUUsQ0FBQyxJQUFJLFNBQVMsQ0FBQztJQUNwRCxDQUFDO0lBRUgsdUJBQUM7QUFBRCxDQUFDLEFBMUtELElBMEtDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQ29tcG9uZW50Rml4dHVyZVxufSBmcm9tICdAYW5ndWxhci9jb3JlL3Rlc3RpbmcnO1xuXG5pbXBvcnQge1xuICBEZWJ1Z0VsZW1lbnRcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbmltcG9ydCB7XG4gIEJ5XG59IGZyb20gJ0Bhbmd1bGFyL3BsYXRmb3JtLWJyb3dzZXInO1xuXG5pbXBvcnQge1xuICBTa3lBcHBUZXN0VXRpbGl0eVxufSBmcm9tICdAc2t5dXgtc2RrL3Rlc3RpbmcnO1xuXG5pbXBvcnQge1xuICBTa3lUYWJzZXRGaXh0dXJlVGFiXG59IGZyb20gJy4vdGFiLWZpeHR1cmUtdGFiJztcblxuLyoqXG4gKiBBbGxvd3MgaW50ZXJhY3Rpb24gd2l0aCBhIFNLWSBVWCB0YWJzZXQgY29tcG9uZW50LlxuICovXG5leHBvcnQgY2xhc3MgU2t5VGFic2V0Rml4dHVyZSB7XG5cbiAgLyoqXG4gICAqIFRoZSB0YWJzZXQgY29tcG9uZW50J3MgQVJJQSBsYWJlbC5cbiAgICovXG4gIHB1YmxpYyBnZXQgYXJpYUxhYmVsKCk6IHN0cmluZyB7XG4gICAgY29uc3QgdGFic2V0RWwgPSB0aGlzLmdldFRhYnNldEVsKCk7XG4gICAgcmV0dXJuIHRhYnNldEVsLmdldEF0dHJpYnV0ZSgnYXJpYS1sYWJlbCcpIHx8IHVuZGVmaW5lZDtcbiAgfVxuXG4gIC8qKlxuICAgKiBUaGUgdGFic2V0IGNvbXBvbmVudCdzIEFSSUEgbGFiZWxsZWQgYnkgYXR0cmlidXRlLlxuICAgKi9cbiAgcHVibGljIGdldCBhcmlhTGFiZWxsZWRCeSgpOiBzdHJpbmcge1xuICAgIGNvbnN0IHRhYnNldEVsID0gdGhpcy5nZXRUYWJzZXRFbCgpO1xuICAgIHJldHVybiB0YWJzZXRFbC5nZXRBdHRyaWJ1dGUoJ2FyaWEtbGFiZWxsZWRieScpIHx8IHVuZGVmaW5lZDtcbiAgfVxuXG4gIC8qKlxuICAgKiBUaGUgaW5kZXggb2YgdGhlIGN1cnJlbnRseSBzZWxlY3RlZCB0YWIuXG4gICAqL1xuICBwdWJsaWMgZ2V0IGFjdGl2ZVRhYkluZGV4KCk6IG51bWJlciB7XG4gICAgY29uc3QgdGFiTGlua0VscyA9IHRoaXMuZ2V0VGFiTGlua0VscygpO1xuXG4gICAgZm9yIChsZXQgaSA9IDAsIG4gPSB0YWJMaW5rRWxzLmxlbmd0aDsgaSA8IG47IGkrKykge1xuICAgICAgaWYgKHRhYkxpbmtFbHMuaXRlbShpKS5jbGFzc0xpc3QuY29udGFpbnMoJ3NreS1idG4tdGFiLXNlbGVjdGVkJykpIHtcbiAgICAgICAgcmV0dXJuIGk7XG4gICAgICB9XG4gICAgfVxuXG4gICAgcmV0dXJuIC0xO1xuICB9XG5cbiAgcHJpdmF0ZSBkZWJ1Z0VsOiBEZWJ1Z0VsZW1lbnQ7XG5cbiAgY29uc3RydWN0b3IoXG4gICAgcHJpdmF0ZSBmaXh0dXJlOiBDb21wb25lbnRGaXh0dXJlPGFueT4sXG4gICAgc2t5VGVzdElkOiBzdHJpbmdcbiAgKSB7XG4gICAgdGhpcy5kZWJ1Z0VsID0gU2t5QXBwVGVzdFV0aWxpdHkuZ2V0RGVidWdFbGVtZW50QnlUZXN0SWQoZml4dHVyZSwgc2t5VGVzdElkLCAnc2t5LXRhYnNldCcpO1xuICB9XG5cbiAgLyoqXG4gICAqIFJldHJpZXZlcyBpbmZvcm1hdGlvbiBhYm91dCB0aGUgdGFiIGF0IHRoZSBzcGVjaWZpZWQgaW5kZXguXG4gICAqIEBwYXJhbSB0YWJJbmRleCBUaGUgaW5kZXggb2YgdGhlIHRhYi5cbiAgICovXG4gIHB1YmxpYyBnZXRUYWIodGFiSW5kZXg6IG51bWJlcik6IFNreVRhYnNldEZpeHR1cmVUYWIge1xuICAgIGNvbnN0IHRhYkxpbmtFbCA9IHRoaXMuZ2V0VGFiTGlua0VsKHRhYkluZGV4KTtcblxuICAgIGNvbnN0IGFjdGl2ZSA9IHRoaXMuYWN0aXZlVGFiSW5kZXggPT09IHRhYkluZGV4O1xuICAgIGNvbnN0IGRpc2FibGVkID0gdGFiTGlua0VsLmNsYXNzTGlzdC5jb250YWlucygnc2t5LWJ0bi10YWItZGlzYWJsZWQnKTtcbiAgICBjb25zdCB0YWJIZWFkaW5nID0gdGhpcy5nZXRUZXh0Q29udGVudChcbiAgICAgIHRhYkxpbmtFbC5xdWVyeVNlbGVjdG9yKCcuc2t5LXRhYi1oZWFkaW5nJykuY2hpbGROb2Rlc1swXVxuICAgICk7XG4gICAgY29uc3QgdGFiSGVhZGVyQ291bnQgPSB0aGlzLmdldFRleHRDb250ZW50KHRhYkxpbmtFbC5xdWVyeVNlbGVjdG9yKCcuc2t5LXRhYi1oZWFkZXItY291bnQnKSk7XG5cbiAgICBsZXQgcGVybWFsaW5rVmFsdWU6IHN0cmluZztcblxuICAgIGlmICh0YWJMaW5rRWwuaHJlZikge1xuICAgICAgY29uc3QgcGVybWFsaW5rID0gdGFiTGlua0VsLmhyZWYuc3BsaXQoJz8nKVsxXTtcbiAgICAgIGlmIChwZXJtYWxpbmspIHtcbiAgICAgICAgY29uc3QgcGVybWFsaW5rUGFydHMgPSBwZXJtYWxpbmsuc3BsaXQoJz0nKTtcblxuICAgICAgICBwZXJtYWxpbmtWYWx1ZSA9IGRlY29kZVVSSUNvbXBvbmVudChwZXJtYWxpbmtQYXJ0c1sxXSk7XG4gICAgICB9XG4gICAgfVxuXG4gICAgcmV0dXJuIHtcbiAgICAgIGFjdGl2ZSxcbiAgICAgIGRpc2FibGVkLFxuICAgICAgcGVybWFsaW5rVmFsdWUsXG4gICAgICB0YWJIZWFkZXJDb3VudCxcbiAgICAgIHRhYkhlYWRpbmdcbiAgICB9O1xuICB9XG5cbiAgLyoqXG4gICAqIENsaWNrcyB0aGUgdGFic2V0J3MgXCJuZXdcIiBidXR0b24uXG4gICAqL1xuICBwdWJsaWMgYXN5bmMgY2xpY2tOZXdCdXR0b24oKTogUHJvbWlzZTxhbnk+IHtcbiAgICByZXR1cm4gdGhpcy5jbGlja0J1dHRvbignc2t5LXRhYnNldC1idG4tbmV3Jyk7XG4gIH1cblxuICAvKipcbiAgICogQ2xpY2tzIHRoZSB0YWJzZXQncyBcIm9wZW5cIiBidXR0b24uXG4gICAqL1xuICBwdWJsaWMgYXN5bmMgY2xpY2tPcGVuQnV0dG9uKCk6IFByb21pc2U8YW55PiB7XG4gICAgcmV0dXJuIHRoaXMuY2xpY2tCdXR0b24oJ3NreS10YWJzZXQtYnRuLW9wZW4nKTtcbiAgfVxuXG4gIC8qKlxuICAgKiBDbGlja3MgdGhlIHRhYiBidXR0b24gYXQgdGhlIHNwZWNpZmllZCBpbmRleC5cbiAgICogQHBhcmFtIHRhYkluZGV4IFRoZSBpbmRleCBvZiB0aGUgdGFiLlxuICAgKi9cbiAgcHVibGljIGFzeW5jIGNsaWNrVGFiKHRhYkluZGV4OiBudW1iZXIpOiBQcm9taXNlPGFueT4ge1xuICAgIGNvbnN0IHRhYkxpbmtFbCA9IHRoaXMuZ2V0VGFiTGlua0VsKHRhYkluZGV4KTtcblxuICAgIGlmICghdGFiTGlua0VsKSB7XG4gICAgICB0aHJvdyBuZXcgRXJyb3IoYFRoZXJlIGlzIG5vIHRhYiBhdCBpbmRleCAke3RhYkluZGV4fS5gKTtcbiAgICB9XG5cbiAgICB0YWJMaW5rRWwuY2xpY2soKTtcblxuICAgIHRoaXMuZml4dHVyZS5kZXRlY3RDaGFuZ2VzKCk7XG4gICAgcmV0dXJuIHRoaXMuZml4dHVyZS53aGVuU3RhYmxlKCk7XG4gIH1cblxuICAvKipcbiAgICogQ2xpY2sncyB0aGUgdGFiJ3MgY2xvc2UgYnV0dG9uIGF0IHRoZSBzcGVjaWZpZWQgaW5kZXguXG4gICAqIEBwYXJhbSB0YWJJbmRleCBUaGUgaW5kZXggb2YgdGhlIHRhYi5cbiAgICovXG4gIHB1YmxpYyBhc3luYyBjbGlja1RhYkNsb3NlKHRhYkluZGV4OiBudW1iZXIpOiBQcm9taXNlPGFueT4ge1xuICAgIGNvbnN0IHRhYldyYXBwZXJFbCA9IHRoaXMuZ2V0VGFic2V0RWwoKS5xdWVyeVNlbGVjdG9yQWxsKFxuICAgICAgYC5za3ktdGFic2V0LXRhYnMgLnNreS1idG4tdGFiLXdyYXBwZXJgXG4gICAgKVt0YWJJbmRleF07XG5cbiAgICBpZiAoIXRhYldyYXBwZXJFbCkge1xuICAgICAgdGhyb3cgbmV3IEVycm9yKGBUaGVyZSBpcyBubyB0YWIgYXQgaW5kZXggJHt0YWJJbmRleH0uYCk7XG4gICAgfVxuXG4gICAgY29uc3QgY2xvc2VCdG5FbCA9IHRhYldyYXBwZXJFbC5xdWVyeVNlbGVjdG9yKCcuc2t5LWJ0bi10YWItY2xvc2UnKSBhcyBIVE1MQnV0dG9uRWxlbWVudDtcblxuICAgIGlmICghY2xvc2VCdG5FbCkge1xuICAgICAgdGhyb3cgbmV3IEVycm9yKCdUaGUgc3BlY2lmaWVkIHRhYiBkb2VzIG5vdCBoYXZlIGEgY2xvc2UgYnV0dG9uLicpO1xuICAgIH1cblxuICAgIGNsb3NlQnRuRWwuY2xpY2soKTtcblxuICAgIHRoaXMuZml4dHVyZS5kZXRlY3RDaGFuZ2VzKCk7XG4gICAgcmV0dXJuIHRoaXMuZml4dHVyZS53aGVuU3RhYmxlKCk7XG4gIH1cblxuICBwcml2YXRlIGFzeW5jIGNsaWNrQnV0dG9uKGJ1dHRvbkNsczogc3RyaW5nKTogUHJvbWlzZTxhbnk+IHtcbiAgICBjb25zdCB0YWJzZXRFbCA9IHRoaXMuZ2V0VGFic2V0RWwoKTtcblxuICAgIGNvbnN0IG5ld0J1dHRvbkVsID1cbiAgICAgIHRhYnNldEVsLnF1ZXJ5U2VsZWN0b3IoYC5za3ktdGFic2V0LWJ0bnMgLiR7YnV0dG9uQ2xzfWApIGFzIEhUTUxCdXR0b25FbGVtZW50O1xuXG4gICAgbmV3QnV0dG9uRWwuY2xpY2soKTtcblxuICAgIHRoaXMuZml4dHVyZS5kZXRlY3RDaGFuZ2VzKCk7XG4gICAgcmV0dXJuIHRoaXMuZml4dHVyZS53aGVuU3RhYmxlKCk7XG4gIH1cblxuICBwcml2YXRlIGdldFRhYnNldEVsKCk6IEhUTUxEaXZFbGVtZW50IHtcbiAgICBjb25zdCB0YWJzZXRFbCA9IHRoaXMuZGVidWdFbC5xdWVyeShCeS5jc3MoJy5za3ktdGFic2V0JykpLm5hdGl2ZUVsZW1lbnQ7XG5cbiAgICByZXR1cm4gdGFic2V0RWw7XG4gIH1cblxuICBwcml2YXRlIGdldFRhYkxpbmtFbHMoKTogTm9kZUxpc3RPZjxIVE1MQW5jaG9yRWxlbWVudD4ge1xuICAgIHJldHVybiB0aGlzLmdldFRhYnNldEVsKCkucXVlcnlTZWxlY3RvckFsbChcbiAgICAgIGAuc2t5LXRhYnNldC10YWJzIC5za3ktYnRuLXRhYmBcbiAgICApO1xuICB9XG5cbiAgcHJpdmF0ZSBnZXRUYWJMaW5rRWwodGFiSW5kZXg6IG51bWJlcik6IEhUTUxBbmNob3JFbGVtZW50IHtcbiAgICBjb25zdCB0YWJMaW5rRWwgPSB0aGlzLmdldFRhYkxpbmtFbHMoKS5pdGVtKHRhYkluZGV4KTtcblxuICAgIGlmICghdGFiTGlua0VsKSB7XG4gICAgICB0aHJvdyBuZXcgRXJyb3IoYFRoZXJlIGlzIG5vIHRhYiBhdCBpbmRleCAke3RhYkluZGV4fS5gKTtcbiAgICB9XG5cbiAgICByZXR1cm4gdGFiTGlua0VsO1xuICB9XG5cbiAgcHJpdmF0ZSBnZXRUZXh0Q29udGVudChlbDogRWxlbWVudCB8IE5vZGUpOiBzdHJpbmcge1xuICAgIHJldHVybiAoZWwgJiYgZWwudGV4dENvbnRlbnQudHJpbSgpKSB8fCB1bmRlZmluZWQ7XG4gIH1cblxufVxuIl19

package/fesm2015/skyux-tabs-testing.js

@@ -0,0 +1,148 @@
+import { __awaiter } from 'tslib';
+import { By } from '@angular/platform-browser';
+import { SkyAppTestUtility } from '@skyux-sdk/testing';
+
+/**
+ * Allows interaction with a SKY UX tabset component.
+ */
+class SkyTabsetFixture {
+    constructor(fixture, skyTestId) {
+        this.fixture = fixture;
+        this.debugEl = SkyAppTestUtility.getDebugElementByTestId(fixture, skyTestId, 'sky-tabset');
+    }
+    /**
+     * The tabset component's ARIA label.
+     */
+    get ariaLabel() {
+        const tabsetEl = this.getTabsetEl();
+        return tabsetEl.getAttribute('aria-label') || undefined;
+    }
+    /**
+     * The tabset component's ARIA labelled by attribute.
+     */
+    get ariaLabelledBy() {
+        const tabsetEl = this.getTabsetEl();
+        return tabsetEl.getAttribute('aria-labelledby') || undefined;
+    }
+    /**
+     * The index of the currently selected tab.
+     */
+    get activeTabIndex() {
+        const tabLinkEls = this.getTabLinkEls();
+        for (let i = 0, n = tabLinkEls.length; i < n; i++) {
+            if (tabLinkEls.item(i).classList.contains('sky-btn-tab-selected')) {
+                return i;
+            }
+        }
+        return -1;
+    }
+    /**
+     * Retrieves information about the tab at the specified index.
+     * @param tabIndex The index of the tab.
+     */
+    getTab(tabIndex) {
+        const tabLinkEl = this.getTabLinkEl(tabIndex);
+        const active = this.activeTabIndex === tabIndex;
+        const disabled = tabLinkEl.classList.contains('sky-btn-tab-disabled');
+        const tabHeading = this.getTextContent(tabLinkEl.querySelector('.sky-tab-heading').childNodes[0]);
+        const tabHeaderCount = this.getTextContent(tabLinkEl.querySelector('.sky-tab-header-count'));
+        let permalinkValue;
+        if (tabLinkEl.href) {
+            const permalink = tabLinkEl.href.split('?')[1];
+            if (permalink) {
+                const permalinkParts = permalink.split('=');
+                permalinkValue = decodeURIComponent(permalinkParts[1]);
+            }
+        }
+        return {
+            active,
+            disabled,
+            permalinkValue,
+            tabHeaderCount,
+            tabHeading
+        };
+    }
+    /**
+     * Clicks the tabset's "new" button.
+     */
+    clickNewButton() {
+        return __awaiter(this, void 0, void 0, function* () {
+            return this.clickButton('sky-tabset-btn-new');
+        });
+    }
+    /**
+     * Clicks the tabset's "open" button.
+     */
+    clickOpenButton() {
+        return __awaiter(this, void 0, void 0, function* () {
+            return this.clickButton('sky-tabset-btn-open');
+        });
+    }
+    /**
+     * Clicks the tab button at the specified index.
+     * @param tabIndex The index of the tab.
+     */
+    clickTab(tabIndex) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const tabLinkEl = this.getTabLinkEl(tabIndex);
+            if (!tabLinkEl) {
+                throw new Error(`There is no tab at index ${tabIndex}.`);
+            }
+            tabLinkEl.click();
+            this.fixture.detectChanges();
+            return this.fixture.whenStable();
+        });
+    }
+    /**
+     * Click's the tab's close button at the specified index.
+     * @param tabIndex The index of the tab.
+     */
+    clickTabClose(tabIndex) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const tabWrapperEl = this.getTabsetEl().querySelectorAll(`.sky-tabset-tabs .sky-btn-tab-wrapper`)[tabIndex];
+            if (!tabWrapperEl) {
+                throw new Error(`There is no tab at index ${tabIndex}.`);
+            }
+            const closeBtnEl = tabWrapperEl.querySelector('.sky-btn-tab-close');
+            if (!closeBtnEl) {
+                throw new Error('The specified tab does not have a close button.');
+            }
+            closeBtnEl.click();
+            this.fixture.detectChanges();
+            return this.fixture.whenStable();
+        });
+    }
+    clickButton(buttonCls) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const tabsetEl = this.getTabsetEl();
+            const newButtonEl = tabsetEl.querySelector(`.sky-tabset-btns .${buttonCls}`);
+            newButtonEl.click();
+            this.fixture.detectChanges();
+            return this.fixture.whenStable();
+        });
+    }
+    getTabsetEl() {
+        const tabsetEl = this.debugEl.query(By.css('.sky-tabset')).nativeElement;
+        return tabsetEl;
+    }
+    getTabLinkEls() {
+        return this.getTabsetEl().querySelectorAll(`.sky-tabset-tabs .sky-btn-tab`);
+    }
+    getTabLinkEl(tabIndex) {
+        const tabLinkEl = this.getTabLinkEls().item(tabIndex);
+        if (!tabLinkEl) {
+            throw new Error(`There is no tab at index ${tabIndex}.`);
+        }
+        return tabLinkEl;
+    }
+    getTextContent(el) {
+        return (el && el.textContent.trim()) || undefined;
+    }
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SkyTabsetFixture };
+//# sourceMappingURL=skyux-tabs-testing.js.map

package/fesm2015/skyux-tabs-testing.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skyux-tabs-testing.js","sources":["ng://@skyux/tabs/testing/tabs/tabset-fixture.ts","ng://@skyux/tabs/testing/skyux-tabs-testing.ts"],"sourcesContent":["import {\n  ComponentFixture\n} from '@angular/core/testing';\n\nimport {\n  DebugElement\n} from '@angular/core';\n\nimport {\n  By\n} from '@angular/platform-browser';\n\nimport {\n  SkyAppTestUtility\n} from '@skyux-sdk/testing';\n\nimport {\n  SkyTabsetFixtureTab\n} from './tab-fixture-tab';\n\n/**\n * Allows interaction with a SKY UX tabset component.\n */\nexport class SkyTabsetFixture {\n\n  /**\n   * The tabset component's ARIA label.\n   */\n  public get ariaLabel(): string {\n    const tabsetEl = this.getTabsetEl();\n    return tabsetEl.getAttribute('aria-label') || undefined;\n  }\n\n  /**\n   * The tabset component's ARIA labelled by attribute.\n   */\n  public get ariaLabelledBy(): string {\n    const tabsetEl = this.getTabsetEl();\n    return tabsetEl.getAttribute('aria-labelledby') || undefined;\n  }\n\n  /**\n   * The index of the currently selected tab.\n   */\n  public get activeTabIndex(): number {\n    const tabLinkEls = this.getTabLinkEls();\n\n    for (let i = 0, n = tabLinkEls.length; i < n; i++) {\n      if (tabLinkEls.item(i).classList.contains('sky-btn-tab-selected')) {\n        return i;\n      }\n    }\n\n    return -1;\n  }\n\n  private debugEl: DebugElement;\n\n  constructor(\n    private fixture: ComponentFixture<any>,\n    skyTestId: string\n  ) {\n    this.debugEl = SkyAppTestUtility.getDebugElementByTestId(fixture, skyTestId, 'sky-tabset');\n  }\n\n  /**\n   * Retrieves information about the tab at the specified index.\n   * @param tabIndex The index of the tab.\n   */\n  public getTab(tabIndex: number): SkyTabsetFixtureTab {\n    const tabLinkEl = this.getTabLinkEl(tabIndex);\n\n    const active = this.activeTabIndex === tabIndex;\n    const disabled = tabLinkEl.classList.contains('sky-btn-tab-disabled');\n    const tabHeading = this.getTextContent(\n      tabLinkEl.querySelector('.sky-tab-heading').childNodes[0]\n    );\n    const tabHeaderCount = this.getTextContent(tabLinkEl.querySelector('.sky-tab-header-count'));\n\n    let permalinkValue: string;\n\n    if (tabLinkEl.href) {\n      const permalink = tabLinkEl.href.split('?')[1];\n      if (permalink) {\n        const permalinkParts = permalink.split('=');\n\n        permalinkValue = decodeURIComponent(permalinkParts[1]);\n      }\n    }\n\n    return {\n      active,\n      disabled,\n      permalinkValue,\n      tabHeaderCount,\n      tabHeading\n    };\n  }\n\n  /**\n   * Clicks the tabset's \"new\" button.\n   */\n  public async clickNewButton(): Promise<any> {\n    return this.clickButton('sky-tabset-btn-new');\n  }\n\n  /**\n   * Clicks the tabset's \"open\" button.\n   */\n  public async clickOpenButton(): Promise<any> {\n    return this.clickButton('sky-tabset-btn-open');\n  }\n\n  /**\n   * Clicks the tab button at the specified index.\n   * @param tabIndex The index of the tab.\n   */\n  public async clickTab(tabIndex: number): Promise<any> {\n    const tabLinkEl = this.getTabLinkEl(tabIndex);\n\n    if (!tabLinkEl) {\n      throw new Error(`There is no tab at index ${tabIndex}.`);\n    }\n\n    tabLinkEl.click();\n\n    this.fixture.detectChanges();\n    return this.fixture.whenStable();\n  }\n\n  /**\n   * Click's the tab's close button at the specified index.\n   * @param tabIndex The index of the tab.\n   */\n  public async clickTabClose(tabIndex: number): Promise<any> {\n    const tabWrapperEl = this.getTabsetEl().querySelectorAll(\n      `.sky-tabset-tabs .sky-btn-tab-wrapper`\n    )[tabIndex];\n\n    if (!tabWrapperEl) {\n      throw new Error(`There is no tab at index ${tabIndex}.`);\n    }\n\n    const closeBtnEl = tabWrapperEl.querySelector('.sky-btn-tab-close') as HTMLButtonElement;\n\n    if (!closeBtnEl) {\n      throw new Error('The specified tab does not have a close button.');\n    }\n\n    closeBtnEl.click();\n\n    this.fixture.detectChanges();\n    return this.fixture.whenStable();\n  }\n\n  private async clickButton(buttonCls: string): Promise<any> {\n    const tabsetEl = this.getTabsetEl();\n\n    const newButtonEl =\n      tabsetEl.querySelector(`.sky-tabset-btns .${buttonCls}`) as HTMLButtonElement;\n\n    newButtonEl.click();\n\n    this.fixture.detectChanges();\n    return this.fixture.whenStable();\n  }\n\n  private getTabsetEl(): HTMLDivElement {\n    const tabsetEl = this.debugEl.query(By.css('.sky-tabset')).nativeElement;\n\n    return tabsetEl;\n  }\n\n  private getTabLinkEls(): NodeListOf<HTMLAnchorElement> {\n    return this.getTabsetEl().querySelectorAll(\n      `.sky-tabset-tabs .sky-btn-tab`\n    );\n  }\n\n  private getTabLinkEl(tabIndex: number): HTMLAnchorElement {\n    const tabLinkEl = this.getTabLinkEls().item(tabIndex);\n\n    if (!tabLinkEl) {\n      throw new Error(`There is no tab at index ${tabIndex}.`);\n    }\n\n    return tabLinkEl;\n  }\n\n  private getTextContent(el: Element | Node): string {\n    return (el && el.textContent.trim()) || undefined;\n  }\n\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}

package/fesm2015/skyux-tabs.js

@@ -0,0 +1,1998 @@
+import { __decorate } from 'tslib';
+import { Injectable, EventEmitter, ChangeDetectorRef, Input, Output, ViewChild, Component, ChangeDetectionStrategy, RendererFactory2, HostListener, NgModule, ContentChildren, ViewEncapsulation, ElementRef } from '@angular/core';
+import { CommonModule, Location } from '@angular/common';
+import { trigger, transition, style, animate } from '@angular/animations';
+import { BehaviorSubject, Subject, forkJoin, combineLatest, race } from 'rxjs';
+import { takeUntil, take, distinctUntilChanged } from 'rxjs/operators';
+import { SkyMediaBreakpoints, SkyMediaQueryService, SkyMediaQueryModule } from '@skyux/core';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { SkyChevronModule, SkyIconModule, SkyStatusIndicatorModule } from '@skyux/indicators';
+import { SkyThemeModule } from '@skyux/theme';
+import { getStringForLocale, SKY_LIB_RESOURCES_PROVIDERS, SkyLibResourcesService, SkyI18nModule } from '@skyux/i18n';
+import { SkyCheckboxModule } from '@skyux/forms';
+import { ActivatedRoute, Router, RouterModule } from '@angular/router';
+import { SkyDropdownModule } from '@skyux/popovers';
+
+const VISIBLE_STATE = 'shown';
+const HIDDEN_STATE = 'void';
+/**
+ * @internal
+ */
+let SkyVerticalTabsetService = class SkyVerticalTabsetService {
+    constructor(mediaQueryService) {
+        this.mediaQueryService = mediaQueryService;
+        this.activeIndex = undefined;
+        this.hidingTabs = new BehaviorSubject(false);
+        this.indexChanged = new BehaviorSubject(undefined);
+        this.maintainTabContent = false;
+        this.showingTabs = new BehaviorSubject(false);
+        this.switchingMobile = new Subject();
+        this.tabs = [];
+        this.tabAdded = new Subject();
+        this.tabClicked = new BehaviorSubject(undefined);
+        this._contentAdded = false;
+        this._tabsVisible = false;
+        this._isMobile = false;
+        this.mediaQueryService.subscribe(breakpoint => {
+            const nowMobile = breakpoint === SkyMediaBreakpoints.xs;
+            if (nowMobile && !this._isMobile) {
+                // switching to mobile
+                this.switchingMobile.next(true);
+                if (!this._tabsVisible) {
+                    this.hidingTabs.next(true);
+                }
+            }
+            else if (!nowMobile && this._isMobile) {
+                // switching to widescreen
+                this.switchingMobile.next(false);
+                if (!this._tabsVisible) {
+                    this.showingTabs.next(true);
+                }
+            }
+            this._isMobile = nowMobile;
+        });
+    }
+    set content(value) {
+        this._content = value;
+    }
+    addTab(tab) {
+        const index = this.tabs.length;
+        tab.index = index;
+        this.tabs.push(tab);
+        if (tab.active) {
+            this.activateTab(tab);
+        }
+        this.tabAdded.next(tab);
+    }
+    destroyTab(tab) {
+        let tabIndex = this.tabs.indexOf(tab);
+        if (tabIndex === -1) {
+            return;
+        }
+        if (this.maintainTabContent && tab.contentRendered && this._content) {
+            if (this._content.nativeElement.contains(tab.tabContent.nativeElement)) {
+                this._content.nativeElement.removeChild(tab.tabContent.nativeElement);
+            }
+        }
+        this.tabs.splice(tabIndex, 1);
+        // update tab indices
+        this.tabs.forEach((tabItem, index) => tabItem.index = index);
+        if (tab.active) {
+            if (!this.maintainTabContent) {
+                this.destroyContent();
+            }
+            // Try selecting the next tab first, and if there's no next tab then
+            // try selecting the previous one.
+            let newActiveTab = this.tabs[tabIndex] || this.tabs[tabIndex - 1];
+            /*istanbul ignore else */
+            if (newActiveTab) {
+                newActiveTab.activateTab();
+            }
+        }
+    }
+    activateTab(tab) {
+        // unactivate active tab
+        let activeTab = this.tabs.find(t => t.index === this.activeIndex);
+        if (activeTab && activeTab.index !== tab.index) {
+            activeTab.active = false;
+            activeTab.tabDeactivated();
+        }
+        this.activeIndex = tab.index;
+        this.tabClicked.next(true);
+        this.updateTabClicked();
+    }
+    activeTab() {
+        return this.tabs.find(t => t.index === this.activeIndex);
+    }
+    isMobile() {
+        return this._isMobile;
+    }
+    updateContent() {
+        if (!this.maintainTabContent) {
+            if (!this._contentAdded && this.contentVisible()) {
+                // content needs to be moved
+                this.moveContent();
+            }
+            else if (this._contentAdded && !this.contentVisible()) {
+                // content hidden
+                this._contentAdded = false;
+            }
+        }
+        else {
+            this.tabs.forEach((tab) => {
+                if (!tab.contentRendered) {
+                    this._content.nativeElement.appendChild(tab.tabContent.nativeElement);
+                    tab.contentRendered = true;
+                }
+            });
+        }
+    }
+    tabsVisible() {
+        return !this.isMobile() || this._tabsVisible;
+    }
+    contentVisible() {
+        return !this.isMobile() || !this._tabsVisible;
+    }
+    showTabs() {
+        this._tabsVisible = true;
+        this._contentAdded = false;
+        this.animationTabsVisibleState = VISIBLE_STATE;
+        this.animationContentVisibleState = HIDDEN_STATE;
+        this.showingTabs.next(true);
+    }
+    destroyContent() {
+        if (this._content) {
+            this._content.nativeElement.innerHTML = '';
+        }
+        this.content = undefined;
+    }
+    moveContent() {
+        if (this._content && !this._contentAdded) {
+            let activeTab = this.activeTab();
+            let activeContent = activeTab ? activeTab.tabContent : undefined;
+            if (activeContent && activeContent.nativeElement) {
+                this._content.nativeElement.appendChild(activeContent.nativeElement);
+                activeTab.contentRendered = true;
+                this._contentAdded = true;
+            }
+        }
+    }
+    updateTabClicked() {
+        this._contentAdded = false;
+        if (this.isMobile()) {
+            this._tabsVisible = false;
+            this.animationContentVisibleState = VISIBLE_STATE;
+            this.animationTabsVisibleState = HIDDEN_STATE;
+            this.hidingTabs.next(true);
+        }
+        this.indexChanged.next(this.activeIndex);
+    }
+};
+SkyVerticalTabsetService.ctorParameters = () => [
+    { type: SkyMediaQueryService }
+];
+SkyVerticalTabsetService = __decorate([
+    Injectable()
+], SkyVerticalTabsetService);
+
+/**
+ * Creates a container for the sectioned forms.
+ */
+let SkySectionedFormComponent = class SkySectionedFormComponent {
+    constructor(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 EventEmitter();
+        this.isMobile = false;
+        this._ngUnsubscribe = new Subject();
+    }
+    get ariaRole() {
+        return this.isMobile ? undefined : 'tablist';
+    }
+    ngOnInit() {
+        this.tabService.maintainTabContent = this.maintainSectionContent;
+        this.tabService.indexChanged
+            .pipe(takeUntil(this._ngUnsubscribe))
+            .subscribe(index => {
+            this.indexChanged.emit(index);
+            this.changeRef.markForCheck();
+        });
+        this.tabService.switchingMobile
+            .pipe(takeUntil(this._ngUnsubscribe))
+            .subscribe((mobile) => {
+            this.isMobile = mobile;
+            this.changeRef.markForCheck();
+        });
+        if (this.tabService.isMobile()) {
+            this.isMobile = true;
+            this.tabService.animationContentVisibleState = VISIBLE_STATE;
+            this.changeRef.markForCheck();
+        }
+    }
+    ngAfterViewChecked() {
+        this.tabService.content = this.content;
+        this.tabService.updateContent();
+    }
+    ngOnDestroy() {
+        this._ngUnsubscribe.next();
+        this._ngUnsubscribe.complete();
+    }
+    tabsVisible() {
+        this.changeRef.markForCheck();
+        return this.tabService.tabsVisible();
+    }
+    showTabs() {
+        this.tabService.showTabs();
+        this.changeRef.markForCheck();
+    }
+};
+SkySectionedFormComponent.ctorParameters = () => [
+    { type: SkyVerticalTabsetService },
+    { type: ChangeDetectorRef }
+];
+__decorate([
+    Input()
+], SkySectionedFormComponent.prototype, "maintainSectionContent", void 0);
+__decorate([
+    Output()
+], SkySectionedFormComponent.prototype, "indexChanged", void 0);
+__decorate([
+    ViewChild('skySectionSideContent')
+], SkySectionedFormComponent.prototype, "content", void 0);
+SkySectionedFormComponent = __decorate([
+    Component({
+        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 sky-padding-even-large\"\n    [ngClass]=\"{'sky-sectioned-form-content-hidden': !tabService.contentVisible()}\"\n    [@contentEnter]=\"tabService.animationContentVisibleState\"\n    #skySectionSideContent\n  >\n  </div>\n</div>\n\n",
+        providers: [SkyVerticalTabsetService],
+        changeDetection: ChangeDetectionStrategy.OnPush,
+        animations: [
+            trigger('tabEnter', [
+                transition(`${HIDDEN_STATE} => ${VISIBLE_STATE}`, [
+                    style({ transform: 'translate(-100%)' }),
+                    animate('150ms ease-in')
+                ])
+            ]),
+            trigger('contentEnter', [
+                transition(`${HIDDEN_STATE} => ${VISIBLE_STATE}`, [
+                    style({ transform: 'translate(100%)' }),
+                    animate('150ms ease-in')
+                ])
+            ])
+        ],
+        styles: [":host .sky-sectioned-form{display:block;max-height:none}:host .sky-sectioned-form-content{flex-basis:auto;overflow-y:visible}:host .sky-sectioned-form-tabs{flex-basis:auto;overflow-y:visible;border-right:1px solid #e2e3e4}:host-context(.sky-responsive-container-lg) .sky-sectioned-form,:host-context(.sky-responsive-container-md) .sky-sectioned-form,:host-context(.sky-responsive-container-sm) .sky-sectioned-form,:host-context(.sky-responsive-container-xs) .sky-sectioned-form{display:block;max-height:none}:host-context(.sky-responsive-container-lg) .sky-sectioned-form-content,:host-context(.sky-responsive-container-md) .sky-sectioned-form-content,:host-context(.sky-responsive-container-sm) .sky-sectioned-form-content,:host-context(.sky-responsive-container-xs) .sky-sectioned-form-content{flex-basis:auto;overflow-y:visible}:host-context(.sky-responsive-container-lg) .sky-sectioned-form-tabs,:host-context(.sky-responsive-container-md) .sky-sectioned-form-tabs,:host-context(.sky-responsive-container-sm) .sky-sectioned-form-tabs,:host-context(.sky-responsive-container-xs) .sky-sectioned-form-tabs{flex-basis:auto;overflow-y:visible;border-right:1px solid #e2e3e4}@media (min-width:768px){:host .sky-sectioned-form{display:flex;max-height:100%}:host .sky-sectioned-form-content{flex-basis:70%;overflow-y:auto}:host .sky-sectioned-form-tabs{flex-basis:30%;overflow-y:auto}}:host-context(.sky-responsive-container-lg) .sky-sectioned-form,:host-context(.sky-responsive-container-md) .sky-sectioned-form,:host-context(.sky-responsive-container-sm) .sky-sectioned-form{display:flex;max-height:100%}:host-context(.sky-responsive-container-lg) .sky-sectioned-form-content,:host-context(.sky-responsive-container-md) .sky-sectioned-form-content,:host-context(.sky-responsive-container-sm) .sky-sectioned-form-content{flex-basis:70%;overflow-y:auto}:host-context(.sky-responsive-container-lg) .sky-sectioned-form-tabs,:host-context(.sky-responsive-container-md) .sky-sectioned-form-tabs,:host-context(.sky-responsive-container-sm) .sky-sectioned-form-tabs{flex-basis:30%;overflow-y:auto}.sky-sectioned-form-content-hidden,.sky-sectioned-form-tabs-hidden{display:none}"]
+    })
+], SkySectionedFormComponent);
+
+/**
+ * @internal
+ */
+let SkyVerticalTabMediaQueryService = class SkyVerticalTabMediaQueryService {
+    constructor() {
+        this.currentSubject = new BehaviorSubject(this.current);
+        this._current = SkyMediaBreakpoints.xs;
+        this.currentSubject.next(this._current);
+    }
+    get current() {
+        return this._current;
+    }
+    subscribe(listener) {
+        return this.currentSubject.subscribe({
+            next: (breakpoints) => {
+                listener(breakpoints);
+            }
+        });
+    }
+    setBreakpointForWidth(width) {
+        let breakpoint;
+        if (this.isWidthWithinBreakpiont(width, SkyMediaBreakpoints.xs)) {
+            breakpoint = SkyMediaBreakpoints.xs;
+        }
+        else if (this.isWidthWithinBreakpiont(width, SkyMediaBreakpoints.sm)) {
+            breakpoint = SkyMediaBreakpoints.sm;
+        }
+        else if (this.isWidthWithinBreakpiont(width, SkyMediaBreakpoints.md)) {
+            breakpoint = SkyMediaBreakpoints.md;
+        }
+        else {
+            breakpoint = SkyMediaBreakpoints.lg;
+        }
+        this._current = breakpoint;
+        this.currentSubject.next(this._current);
+    }
+    isWidthWithinBreakpiont(width, breakpoint) {
+        const xsBreakpointMaxPixels = 767;
+        const smBreakpointMinPixels = 768;
+        const smBreakpointMaxPixels = 991;
+        const mdBreakpointMinPixels = 992;
+        const mdBreakpointMaxPixels = 1199;
+        const lgBreakpointMinPixels = 1200;
+        switch (breakpoint) {
+            case SkyMediaBreakpoints.xs: {
+                return (width <= xsBreakpointMaxPixels);
+            }
+            case SkyMediaBreakpoints.sm: {
+                return (width >= smBreakpointMinPixels && width <= smBreakpointMaxPixels);
+            }
+            case SkyMediaBreakpoints.md: {
+                return (width >= mdBreakpointMinPixels && width <= mdBreakpointMaxPixels);
+            }
+            default: {
+                return (width >= lgBreakpointMinPixels);
+            }
+        }
+    }
+    destroy() {
+        this.currentSubject.complete();
+    }
+};
+SkyVerticalTabMediaQueryService = __decorate([
+    Injectable()
+], SkyVerticalTabMediaQueryService);
+
+let SkyVerticalTabsetAdapterService = class SkyVerticalTabsetAdapterService {
+    constructor(rendererFactory) {
+        this.rendererFactory = rendererFactory;
+        this.renderer = this.rendererFactory.createRenderer(undefined, undefined);
+    }
+    getWidth(elementRef) {
+        return elementRef.nativeElement.clientWidth;
+    }
+    scrollToContentTop(element) {
+        element.nativeElement.scrollTop = 0;
+    }
+    setResponsiveClass(element, breakpoint) {
+        const nativeEl = element.nativeElement;
+        this.renderer.removeClass(nativeEl, 'sky-responsive-container-xs');
+        this.renderer.removeClass(nativeEl, 'sky-responsive-container-sm');
+        this.renderer.removeClass(nativeEl, 'sky-responsive-container-md');
+        this.renderer.removeClass(nativeEl, 'sky-responsive-container-lg');
+        let newClass;
+        switch (breakpoint) {
+            case SkyMediaBreakpoints.xs: {
+                newClass = 'sky-responsive-container-xs';
+                break;
+            }
+            case SkyMediaBreakpoints.sm: {
+                newClass = 'sky-responsive-container-sm';
+                break;
+            }
+            case SkyMediaBreakpoints.md: {
+                newClass = 'sky-responsive-container-md';
+                break;
+            }
+            default: {
+                newClass = 'sky-responsive-container-lg';
+                break;
+            }
+        }
+        this.renderer.addClass(nativeEl, newClass);
+    }
+};
+SkyVerticalTabsetAdapterService.ctorParameters = () => [
+    { type: RendererFactory2 }
+];
+SkyVerticalTabsetAdapterService = __decorate([
+    Injectable()
+], SkyVerticalTabsetAdapterService);
+
+let SkyVerticalTabComponent = class SkyVerticalTabComponent {
+    constructor(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;
+        this.isMobile = false;
+        this._contentRendered = false;
+        this._mobileSubscription = new Subject();
+        this._ngUnsubscribe = new Subject();
+        this._showTabRightArrow = false;
+    }
+    /**
+     * Specifies the HTML element ID (without the leading `#`) of the element that contains
+     * the content that the vertical tab displays, which corresponds to the `tabId`. This property
+     * [supports accessibility rules for disclosures](https://www.w3.org/TR/wai-aria-practices-1.1/#disclosure).
+     */
+    get ariaControls() {
+        return this.isMobile ? undefined : this._ariaControls;
+    }
+    set ariaControls(value) {
+        this._ariaControls = value;
+    }
+    /**
+     * Specifies an ARIA role for the vertical tab
+     * [to support accessibility](https://developer.blackbaud.com/skyux/learn/accessibility)
+     * by indicating how the tab functions and what it controls. For information about how
+     * an ARIA role indicates what an item represents on a web page, see the
+     * [WAI-ARIA roles model](https://www.w3.org/WAI/PF/aria/roles).
+     * @default "tab"
+     */
+    get ariaRole() {
+        if (this.isMobile) {
+            return undefined;
+        }
+        return this._ariaRole || 'tab';
+    }
+    set ariaRole(value) {
+        this._ariaRole = value;
+    }
+    /**
+     * Indicates whether to display a chevron-right icon in the righthand side of the tab.
+     * @internal
+     */
+    get showTabRightArrow() {
+        return this._showTabRightArrow && this.tabsetService.isMobile();
+    }
+    set showTabRightArrow(value) {
+        this._showTabRightArrow = value;
+    }
+    set contentRendered(value) {
+        this._contentRendered = value;
+        if (this._contentRendered) {
+            // NOTE: Wrapped in a setTimeout here to ensure that everything has completed rendering.
+            setTimeout(() => {
+                this.updateBreakpointAndResponsiveClass(this.adapterService.getWidth(this.tabContent));
+            });
+        }
+    }
+    get contentRendered() {
+        return this._contentRendered;
+    }
+    ngOnInit() {
+        this.isMobile = this.tabsetService.isMobile();
+        this.changeRef.markForCheck();
+        this.tabsetService.switchingMobile
+            .subscribe((mobile) => {
+            this.isMobile = mobile;
+            this.changeRef.markForCheck();
+        });
+        // Update the breakpoint and responsive class here just as a sanity check since we can not
+        // watch for element resizing.
+        this.tabsetService.indexChanged
+            .pipe(takeUntil(this._ngUnsubscribe))
+            .subscribe((index) => {
+            if (this.index === index && this.contentRendered) {
+                this.updateBreakpointAndResponsiveClass(this.adapterService.getWidth(this.tabContent));
+            }
+        });
+        this.tabsetService.addTab(this);
+    }
+    ngOnDestroy() {
+        this._mobileSubscription.unsubscribe();
+        this._ngUnsubscribe.next();
+        this._ngUnsubscribe.complete();
+        this.tabsetService.destroyTab(this);
+    }
+    tabIndex() {
+        if (!this.disabled) {
+            return 0;
+        }
+        else {
+            return -1;
+        }
+    }
+    activateTab() {
+        if (!this.disabled) {
+            this.active = true;
+            this.tabsetService.activateTab(this);
+            this.changeRef.markForCheck();
+        }
+    }
+    onWindowResize() {
+        this.updateBreakpointAndResponsiveClass(this.adapterService.getWidth(this.tabContent));
+    }
+    tabDeactivated() {
+        this.changeRef.markForCheck();
+    }
+    updateBreakpointAndResponsiveClass(width) {
+        this.verticalTabMediaQueryService.setBreakpointForWidth(width);
+        const newBreakpiont = this.verticalTabMediaQueryService.current;
+        this.adapterService.setResponsiveClass(this.tabContent, newBreakpiont);
+        this.changeRef.markForCheck();
+    }
+};
+SkyVerticalTabComponent.ctorParameters = () => [
+    { type: SkyVerticalTabsetAdapterService },
+    { type: ChangeDetectorRef },
+    { type: SkyVerticalTabsetService },
+    { type: SkyVerticalTabMediaQueryService }
+];
+__decorate([
+    Input()
+], SkyVerticalTabComponent.prototype, "active", void 0);
+__decorate([
+    Input()
+], SkyVerticalTabComponent.prototype, "ariaControls", null);
+__decorate([
+    Input()
+], SkyVerticalTabComponent.prototype, "ariaInvalid", void 0);
+__decorate([
+    Input()
+], SkyVerticalTabComponent.prototype, "ariaRequired", void 0);
+__decorate([
+    Input()
+], SkyVerticalTabComponent.prototype, "ariaRole", null);
+__decorate([
+    Input()
+], SkyVerticalTabComponent.prototype, "disabled", void 0);
+__decorate([
+    Input()
+], SkyVerticalTabComponent.prototype, "errorIndicator", void 0);
+__decorate([
+    Input()
+], SkyVerticalTabComponent.prototype, "tabHeaderCount", void 0);
+__decorate([
+    Input()
+], SkyVerticalTabComponent.prototype, "tabHeading", void 0);
+__decorate([
+    Input()
+], SkyVerticalTabComponent.prototype, "showTabRightArrow", null);
+__decorate([
+    Input()
+], SkyVerticalTabComponent.prototype, "tabId", void 0);
+__decorate([
+    ViewChild('tabContentWrapper')
+], SkyVerticalTabComponent.prototype, "tabContent", void 0);
+__decorate([
+    HostListener('window:resize')
+], SkyVerticalTabComponent.prototype, "onWindowResize", null);
+SkyVerticalTabComponent = __decorate([
+    Component({
+        selector: 'sky-vertical-tab',
+        template: "<a\n  class=\"sky-vertical-tab\"\n  [attr.aria-controls]=\"ariaControls\"\n  [attr.aria-invalid]=\"ariaInvalid\"\n  [attr.aria-required]=\"ariaRequired ? ariaRequired : null\"\n  [attr.aria-selected]=\"active\"\n  [attr.id]=\"tabId\"\n  [attr.role]=\"ariaRole\"\n  [ngClass]=\"{\n    'sky-vertical-tab-active': active,\n    'sky-vertical-tab-disabled': disabled,\n    'sky-deemphasized': disabled\n  }\"\n  [tabIndex]=\"tabIndex()\"\n  (click)=\"activateTab()\"\n  (keyup.enter)=\"activateTab()\">\n  <div class=\"sky-vertical-tab-display\">\n    <div class=\"sky-vertical-tab-heading\">\n      <span class=\"sky-vertical-tab-heading-value\">{{ tabHeading }}</span>\n      <span\n        class=\"sky-vertical-tab-count\"\n        *ngIf=\"tabHeaderCount || tabHeaderCount === 0\">\n        ({{ tabHeaderCount }})\n      </span>\n    </div>\n    <sky-status-indicator *ngIf=\"errorIndicator\"\n      class=\"sky-vertical-tab-heading-error\"\n      descriptionType=\"error\"\n      indicatorType=\"danger\"\n    ></sky-status-indicator>\n\n    <sky-icon\n      *ngIf=\"showTabRightArrow\"\n      class=\"sky-vertical-tab-right-arrow\"\n      icon=\"chevron-right\"\n    >\n    </sky-icon>\n  </div>\n</a>\n\n<div\n  #tabContentWrapper\n>\n  <div\n    class=\"sky-vertical-tab-content-pane\"\n    [ngClass]=\"{'sky-vertical-tab-hidden': !active}\"\n  >\n\n    <ng-content></ng-content>\n\n  <div>\n\n</div>\n\n",
+        providers: [
+            SkyVerticalTabMediaQueryService,
+            { provide: SkyMediaQueryService, useExisting: SkyVerticalTabMediaQueryService }
+        ],
+        changeDetection: ChangeDetectionStrategy.OnPush,
+        styles: [".sky-vertical-tab{cursor:pointer;padding:7px 0 7px 10px;margin:5px 0 5px 10px;display:flex;text-decoration:none}.sky-vertical-tab:not(.sky-deemphasized){color:#212327}.sky-vertical-tab:hover{background-color:#eeeeef}.sky-vertical-tab:focus{outline:dotted thin;outline:-webkit-focus-ring-color auto 5px}.sky-vertical-tab:hover .sky-vertical-tab-right-arrow{color:#979ba2}.sky-vertical-tab-active{background-color:#eeeeef;color:#212327;padding-left:6px;border-left:4px solid #00b4f1}.sky-vertical-tab-hidden{display:none}.sky-vertical-tab-display{display:flex;flex-grow:1}.sky-vertical-tab-heading-error{padding-left:5px}.sky-vertical-tab-count{margin-left:5px}.sky-vertical-tab-disabled{cursor:not-allowed;pointer-events:none;font-style:normal}.sky-vertical-tab-right-arrow{padding:3px 10px 0 0;color:#cdcfd2}.sky-theme-modern .sky-vertical-tab,:host-context(.sky-theme-modern) .sky-vertical-tab{cursor:pointer;padding:10px 0 10px 10px;margin:10px 0 20px 10px}.sky-theme-modern .sky-vertical-tab:not(.sky-vertical-tab-active):not(:active):hover,:host-context(.sky-theme-modern) .sky-vertical-tab:not(.sky-vertical-tab-active):not(:active):hover{color:#212327;background-color:transparent;padding-left:9px;border-left:1px solid #00b4f1}.sky-theme-modern .sky-vertical-tab:not(:active):focus,:host-context(.sky-theme-modern) .sky-vertical-tab:not(:active):focus{outline:#1870b8 solid 2px;outline-offset:-2px;box-shadow:0 1px 8px 0 rgba(0,0,0,.3)}.sky-theme-modern .sky-vertical-tab:focus:active:hover,:host-context(.sky-theme-modern) .sky-vertical-tab:focus:active:hover{outline:0;background:0 0}.sky-theme-modern .sky-vertical-tab:active,:host-context(.sky-theme-modern) .sky-vertical-tab:active{border-left:3px solid #00b4f1;padding-left:7px}.sky-theme-modern .sky-vertical-tab .sky-vertical-tab-heading-error,:host-context(.sky-theme-modern) .sky-vertical-tab .sky-vertical-tab-heading-error{padding-left:10px}.sky-theme-modern .sky-vertical-tab-active,:host-context(.sky-theme-modern) .sky-vertical-tab-active{background:0 0;padding-left:7px;border-left:3px solid #1870b8}"]
+    })
+], SkyVerticalTabComponent);
+
+let SkySectionedFormService = class SkySectionedFormService {
+    constructor() {
+        /**
+         * @internal
+         */
+        this.invalidChange = new BehaviorSubject(undefined);
+        /**
+         * @internal
+         */
+        this.requiredChange = new BehaviorSubject(undefined);
+    }
+    /**
+     * Sets the current section's invalid state based on the `isInvalid` parameter.
+     * This method is used within a `sky-sectioned-form-section` element.
+     */
+    invalidFieldChanged(isInvalid) {
+        this.invalidChange.next(isInvalid);
+    }
+    /**
+     * Sets the current section's required state based on the `isRequired` parameter.
+     * This method is used within a `sky-sectioned-form-section` element.
+     */
+    requiredFieldChanged(isRequired) {
+        this.requiredChange.next(isRequired);
+    }
+};
+SkySectionedFormService = __decorate([
+    Injectable()
+], SkySectionedFormService);
+
+let nextId = 0;
+/**
+ * Creates an individual form to display as a section within the sectioned form.
+ */
+let SkySectionedFormSectionComponent = class SkySectionedFormSectionComponent {
+    constructor(sectionedFormService, tabsetService, changeRef) {
+        this.sectionedFormService = sectionedFormService;
+        this.tabsetService = tabsetService;
+        this.changeRef = changeRef;
+        this.sectionTabId = `sky-sectioned-form-tab-${++nextId}`;
+        this.sectionContentId = `sky-sectioned-form-section-${++nextId}`;
+        this.isMobile = false;
+        this._ngUnsubscribe = new Subject();
+    }
+    get ariaRole() {
+        return this.isMobile ? undefined : 'tabpanel';
+    }
+    get ariaLabelledby() {
+        return this.isMobile ? undefined : this.sectionTabId;
+    }
+    ngOnInit() {
+        this.isMobile = this.tabsetService.isMobile();
+        this.changeRef.detectChanges();
+        this.tabsetService.switchingMobile
+            .subscribe((mobile) => {
+            this.isMobile = mobile;
+            this.changeRef.detectChanges();
+        });
+        this.sectionedFormService.requiredChange
+            .pipe(takeUntil(this._ngUnsubscribe))
+            .subscribe((required) => this.fieldRequired = required);
+        this.sectionedFormService.invalidChange
+            .pipe(takeUntil(this._ngUnsubscribe))
+            .subscribe((invalid) => this.fieldInvalid = invalid);
+    }
+    ngOnDestroy() {
+        this._ngUnsubscribe.next();
+        this._ngUnsubscribe.complete();
+    }
+};
+SkySectionedFormSectionComponent.ctorParameters = () => [
+    { type: SkySectionedFormService },
+    { type: SkyVerticalTabsetService },
+    { type: ChangeDetectorRef }
+];
+__decorate([
+    Input()
+], SkySectionedFormSectionComponent.prototype, "heading", void 0);
+__decorate([
+    Input()
+], SkySectionedFormSectionComponent.prototype, "itemCount", void 0);
+__decorate([
+    Input()
+], SkySectionedFormSectionComponent.prototype, "active", void 0);
+__decorate([
+    ViewChild(SkyVerticalTabComponent)
+], SkySectionedFormSectionComponent.prototype, "tab", void 0);
+SkySectionedFormSectionComponent = __decorate([
+    Component({
+        selector: 'sky-sectioned-form-section',
+        template: "<sky-vertical-tab\n  [active]=\"active\"\n  [ariaControls]=\"sectionContentId\"\n  [ariaInvalid]=\"fieldInvalid\"\n  [ariaRequired]=\"fieldRequired\"\n  [errorIndicator]=\"fieldInvalid\"\n  [ngClass]=\"{\n    'sky-tab-field-required': fieldRequired\n  }\"\n  [showTabRightArrow]=\"true\"\n  [tabHeaderCount]=\"itemCount\"\n  [tabHeading]=\"heading\"\n  [tabId]=\"sectionTabId\">\n  <div\n    [attr.aria-labelledby]=\"ariaLabelledby\"\n    [attr.role]=\"ariaRole\"\n    [id]=\"sectionContentId\"\n    #tabContent>\n    <ng-content></ng-content>\n  </div>\n</sky-vertical-tab>\n",
+        providers: [SkySectionedFormService],
+        styles: [":host .sky-tab-field-required ::ng-deep .sky-vertical-tab-heading:after{content:\"*\";color:#ef4044;padding-left:5px}"]
+    })
+], SkySectionedFormSectionComponent);
+
+let SkyTabsResourcesProvider = class SkyTabsResourcesProvider {
+    constructor() {
+        this.resources = { "EN-US": { "skyux_tab_add": "Add tab", "skyux_tab_close": "Close {0} tab", "skyux_tabs_navigator_next": "Next", "skyux_tabs_navigator_previous": "Previous", "skyux_tab_open": "Open tab", "skyux_vertical_tabs_show_tabs_text": "Tab list" } };
+    }
+    getString(localeInfo, name) {
+        return getStringForLocale(this.resources, localeInfo.locale, name);
+    }
+};
+SkyTabsResourcesProvider = __decorate([
+    Injectable()
+], SkyTabsResourcesProvider);
+
+let SkyTabsResourcesModule = class SkyTabsResourcesModule {
+};
+SkyTabsResourcesModule = __decorate([
+    NgModule({
+        providers: [{
+                provide: SKY_LIB_RESOURCES_PROVIDERS,
+                useClass: SkyTabsResourcesProvider,
+                multi: true
+            }]
+    })
+], SkyTabsResourcesModule);
+
+let SkyVerticalTabsetComponent = class SkyVerticalTabsetComponent {
+    constructor(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 EventEmitter();
+        this.isMobile = false;
+        this._ngUnsubscribe = new Subject();
+    }
+    /**
+     * Specifies an ARIA role for the vertical tabset
+     * [to support accessibility](https://developer.blackbaud.com/skyux/learn/accessibility)
+     * by indicating how the tabset functions and what it controls. For information about how
+     * an ARIA role indicates what an item represents on a web page, see the
+     * [WAI-ARIA roles model](https://www.w3.org/WAI/PF/aria/roles).
+     * @default "tablist"
+     */
+    get ariaRole() {
+        if (this.isMobile) {
+            return undefined;
+        }
+        return this._ariaRole || 'tablist';
+    }
+    set ariaRole(value) {
+        this._ariaRole = value;
+    }
+    ngOnInit() {
+        this.tabService.maintainTabContent = this.maintainTabContent;
+        this.tabService.indexChanged
+            .pipe(takeUntil(this._ngUnsubscribe))
+            .subscribe((index) => {
+            this.activeChange.emit(index);
+            if (this.contentWrapper) {
+                this.adapterService.scrollToContentTop(this.contentWrapper);
+            }
+            this.changeRef.markForCheck();
+        });
+        this.tabService.switchingMobile
+            .pipe(takeUntil(this._ngUnsubscribe))
+            .subscribe((mobile) => {
+            this.isMobile = mobile;
+            this.changeRef.markForCheck();
+        });
+        if (this.tabService.isMobile()) {
+            this.isMobile = true;
+            this.tabService.animationContentVisibleState = VISIBLE_STATE;
+            this.changeRef.markForCheck();
+        }
+        if (!this.showTabsText) {
+            this.resources.getString('skyux_vertical_tabs_show_tabs_text')
+                .pipe(take(1))
+                .subscribe(resource => {
+                /* sanity check */
+                if (!this.showTabsText) {
+                    this.showTabsText = resource;
+                }
+            });
+        }
+    }
+    ngAfterViewChecked() {
+        this.tabService.content = this.content;
+        this.tabService.updateContent();
+    }
+    ngOnDestroy() {
+        this._ngUnsubscribe.next();
+        this._ngUnsubscribe.complete();
+    }
+};
+SkyVerticalTabsetComponent.ctorParameters = () => [
+    { type: SkyVerticalTabsetAdapterService },
+    { type: SkyVerticalTabsetService },
+    { type: SkyLibResourcesService },
+    { type: ChangeDetectorRef }
+];
+__decorate([
+    Input()
+], SkyVerticalTabsetComponent.prototype, "showTabsText", void 0);
+__decorate([
+    Input()
+], SkyVerticalTabsetComponent.prototype, "ariaRole", null);
+__decorate([
+    Input()
+], SkyVerticalTabsetComponent.prototype, "maintainTabContent", void 0);
+__decorate([
+    Output()
+], SkyVerticalTabsetComponent.prototype, "activeChange", void 0);
+__decorate([
+    ViewChild('groupContainerWrapper')
+], SkyVerticalTabsetComponent.prototype, "tabGroups", void 0);
+__decorate([
+    ViewChild('skySideContent')
+], SkyVerticalTabsetComponent.prototype, "content", void 0);
+__decorate([
+    ViewChild('contentContainerWrapper')
+], SkyVerticalTabsetComponent.prototype, "contentWrapper", void 0);
+SkyVerticalTabsetComponent = __decorate([
+    Component({
+        selector: 'sky-vertical-tabset',
+        template: " <div class=\"sky-vertical-tabset\" (window:resize)=\"tabService.updateContent()\">\n  <div\n    *ngIf=\"maintainTabContent || tabService.tabsVisible()\"\n    #groupContainerWrapper\n    class=\"sky-vertical-tabset-group-container\"\n    [ngClass]=\"{'sky-vertical-tabset-hidden': !tabService.tabsVisible()}\"\n    [attr.role]=\"ariaRole\"\n    [@tabGroupEnter]=\"tabService.animationTabsVisibleState\"\n  >\n    <ng-content></ng-content>\n  </div>\n  <div\n    *ngIf=\"maintainTabContent || tabService.contentVisible()\"\n    class=\"sky-vertical-tabset-content\"\n    [ngClass]=\"{'sky-vertical-tabset-content-hidden': !tabService.contentVisible()}\"\n    [@contentEnter]=\"tabService.animationContentVisibleState\"\n    #contentContainerWrapper\n  >\n    <div #skySideContent></div>\n    <button\n      *ngIf=\"!tabService.tabsVisible()\"\n      (click)=\"tabService.showTabs()\"\n      class=\"sky-btn sky-btn-primary sky-vertical-tabset-show-tabs-btn\"\n    >\n      <sky-icon icon=\"chevron-left\"></sky-icon>\n      {{ showTabsText }}\n    </button>\n  </div>\n</div>\n",
+        providers: [SkyVerticalTabsetService],
+        changeDetection: ChangeDetectionStrategy.OnPush,
+        animations: [
+            trigger('tabGroupEnter', [
+                transition(`${HIDDEN_STATE} => ${VISIBLE_STATE}`, [
+                    style({ transform: 'translate(-100%)' }),
+                    animate('150ms ease-in')
+                ])
+            ]),
+            trigger('contentEnter', [
+                transition(`${HIDDEN_STATE} => ${VISIBLE_STATE}`, [
+                    style({ transform: 'translate(100%)' }),
+                    animate('150ms ease-in')
+                ])
+            ])
+        ],
+        styles: [":host .sky-vertical-tabset{display:block;height:auto}:host .sky-vertical-tabset-group-container{border-right:none}:host-context(.sky-responsive-container-lg) .sky-vertical-tabset,:host-context(.sky-responsive-container-md) .sky-vertical-tabset,:host-context(.sky-responsive-container-sm) .sky-vertical-tabset,:host-context(.sky-responsive-container-xs) .sky-vertical-tabset{display:block;height:auto}:host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-sm) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-xs) .sky-vertical-tabset-group-container{border-right:none}@media (min-width:768px){:host .sky-vertical-tabset{display:flex;height:100%}:host .sky-vertical-tabset-group-container{border-right:1px solid #cdcfd2}}:host-context(.sky-responsive-container-lg) .sky-vertical-tabset,:host-context(.sky-responsive-container-md) .sky-vertical-tabset,:host-context(.sky-responsive-container-sm) .sky-vertical-tabset{display:flex;height:100%}:host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-sm) .sky-vertical-tabset-group-container{border-right:1px solid #cdcfd2}.sky-vertical-tabset-hidden{display:none}.sky-vertical-tabset-content{margin:10px 0 0 10px;flex-basis:75%;overflow-y:auto}.sky-vertical-tabset-content-hidden{display:none}.sky-vertical-tabset-show-tabs-btn{margin-top:10px}.sky-vertical-tabset-group-container{flex-basis:25%;overflow-y:auto}:host-context(sky-modal-content>) .sky-vertical-tabset{margin:-15px}"]
+    })
+], SkyVerticalTabsetComponent);
+
+let SkyVerticalTabsetGroupComponent = class SkyVerticalTabsetGroupComponent {
+    constructor(tabService, changeRef) {
+        this.tabService = tabService;
+        this.changeRef = changeRef;
+        this.ngUnsubscribe = new Subject();
+        this.openBeforeTabsHidden = false;
+        this._open = false;
+        this.tabClicked = () => {
+            this.changeRef.markForCheck();
+        };
+        this.tabsHidden = () => {
+            // 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 = () => {
+            this.open = this.openBeforeTabsHidden;
+            this.changeRef.markForCheck();
+        };
+    }
+    /**
+     * Indicates whether the collapsible group is expanded.
+     * @default "false"
+     */
+    set open(value) {
+        this._open = value;
+    }
+    get open() {
+        return !this.disabled && this._open;
+    }
+    ngOnInit() {
+        this.tabService.hidingTabs
+            .pipe(takeUntil(this.ngUnsubscribe))
+            .subscribe(this.tabsHidden);
+        this.tabService.showingTabs
+            .pipe(takeUntil(this.ngUnsubscribe))
+            .subscribe(this.tabsShown);
+        this.tabService.tabClicked
+            .pipe(takeUntil(this.ngUnsubscribe))
+            .subscribe(this.tabClicked);
+    }
+    ngOnDestroy() {
+        this.ngUnsubscribe.next();
+        this.ngUnsubscribe.complete();
+    }
+    toggleMenuOpen() {
+        if (!this.disabled) {
+            this.open = !this.open;
+        }
+        this.changeRef.markForCheck();
+    }
+    subMenuOpen() {
+        return this.tabs && (this.tabs.find(t => t.active) !== undefined);
+    }
+};
+SkyVerticalTabsetGroupComponent.ctorParameters = () => [
+    { type: SkyVerticalTabsetService },
+    { type: ChangeDetectorRef }
+];
+__decorate([
+    Input()
+], SkyVerticalTabsetGroupComponent.prototype, "disabled", void 0);
+__decorate([
+    Input()
+], SkyVerticalTabsetGroupComponent.prototype, "groupHeading", void 0);
+__decorate([
+    Input()
+], SkyVerticalTabsetGroupComponent.prototype, "open", null);
+__decorate([
+    ContentChildren(SkyVerticalTabComponent)
+], SkyVerticalTabsetGroupComponent.prototype, "tabs", void 0);
+SkyVerticalTabsetGroupComponent = __decorate([
+    Component({
+        selector: 'sky-vertical-tabset-group',
+        template: "<div class=\"sky-vertical-tabset-group\">\n  <div\n    class=\"sky-vertical-tabset-group-header sky-padding-even-default\"\n    [ngClass]=\"{\n      'sky-vertical-tabset-group-header-sub-open sky-emphasized': subMenuOpen(),\n      'sky-deemphasized': disabled,\n      'sky-vertical-tabset-disabled': disabled\n    }\"\n    (click)=\"toggleMenuOpen()\"\n    (keyup.enter)=\"toggleMenuOpen()\"\n    [tabIndex]=\"-1\"\n  >\n    {{ groupHeading }}\n    <sky-chevron *skyThemeIf=\"'default'\"\n      class=\"sky-vertical-tabset-group-header-chevron\"\n      [direction]=\"open ? 'up' : 'down'\"\n      [disabled]=\"disabled\"\n      (directionChange)=\"toggleMenuOpen()\"\n      (keyup.enter)=\"$event.stopPropagation()\"\n    >\n    </sky-chevron>\n    <ng-container *skyThemeIf=\"'modern'\">\n    <button *ngIf=\"!open\"\n      class=\"sky-btn sky-btn-icon-borderless sky-vertical-tabset-group-header-chevron\"\n      type=\"button\"\n    >\n      <sky-icon\n        icon=\"chevron-right\"\n        iconType=\"skyux\"\n      >\n      </sky-icon>\n    </button>\n    <button *ngIf=\"open\"\n      class=\"sky-btn sky-btn-icon-borderless sky-vertical-tabset-group-header-chevron\"\n      type=\"button\"\n    >\n      <sky-icon\n        icon=\"chevron-down\"\n        iconType=\"skyux\"\n      >\n      </sky-icon>\n    </button>\n    </ng-container>\n  </div>\n  <div\n    class=\"sky-vertical-tabset-group-content\"\n    *ngIf=\"open\"\n    [@tabSlide]\n  >\n    <ng-content></ng-content>\n  </div>\n</div>\n",
+        changeDetection: ChangeDetectionStrategy.OnPush,
+        animations: [
+            trigger('tabSlide', [
+                transition(':enter', [
+                    style({
+                        height: '0',
+                        visibility: 'hidden'
+                    }),
+                    animate('150ms ease-in', style({
+                        height: '*',
+                        visibility: 'visible'
+                    }))
+                ]),
+                transition(':leave', [
+                    style({
+                        height: '*',
+                        visibility: 'visible'
+                    }),
+                    animate('150ms ease-in', style({
+                        height: '0',
+                        visibility: 'hidden'
+                    }))
+                ])
+            ])
+        ],
+        styles: [".sky-vertical-tabset-group{border-bottom:1px solid #e2e3e4;margin:5px 0 5px 5px}.sky-vertical-tabset-group-header{cursor:pointer;display:flex;justify-content:space-between}.sky-vertical-tabset-group-header:focus{outline:dotted thin;outline:-webkit-focus-ring-color auto 5px}.sky-vertical-tabset-group-content{overflow:hidden;border-top:1px solid #e2e3e4}:host ::ng-deep .sky-vertical-tabset-group-header-chevron>button{font-size:14px!important}.sky-vertical-tabset-disabled{cursor:not-allowed;pointer-events:none;font-style:normal}.sky-theme-modern .sky-vertical-tabset-group,:host-context(.sky-theme-modern) .sky-vertical-tabset-group{border:none}.sky-theme-modern .sky-vertical-tabset-group-content,:host-context(.sky-theme-modern) .sky-vertical-tabset-group-content{border:none;padding-left:25px}.sky-theme-modern .sky-vertical-tabset-group-header,:host-context(.sky-theme-modern) .sky-vertical-tabset-group-header{position:relative}.sky-theme-modern .sky-vertical-tabset-group-header-chevron,:host-context(.sky-theme-modern) .sky-vertical-tabset-group-header-chevron{position:absolute;top:6px;right:5px}"]
+    })
+], SkyVerticalTabsetGroupComponent);
+
+let SkyVerticalTabsetModule = class SkyVerticalTabsetModule {
+};
+SkyVerticalTabsetModule = __decorate([
+    NgModule({
+        declarations: [
+            SkyVerticalTabsetComponent,
+            SkyVerticalTabsetGroupComponent,
+            SkyVerticalTabComponent
+        ],
+        imports: [
+            CommonModule,
+            BrowserAnimationsModule,
+            SkyChevronModule,
+            SkyIconModule,
+            SkyMediaQueryModule,
+            SkyStatusIndicatorModule,
+            SkyTabsResourcesModule,
+            SkyThemeModule
+        ],
+        providers: [
+            SkyVerticalTabsetAdapterService
+        ],
+        exports: [
+            SkyVerticalTabsetComponent,
+            SkyVerticalTabsetGroupComponent,
+            SkyVerticalTabComponent
+        ]
+    })
+], SkyVerticalTabsetModule);
+
+let SkySectionedFormModule = class SkySectionedFormModule {
+};
+SkySectionedFormModule = __decorate([
+    NgModule({
+        declarations: [
+            SkySectionedFormComponent,
+            SkySectionedFormSectionComponent
+        ],
+        imports: [
+            CommonModule,
+            SkyCheckboxModule,
+            SkyVerticalTabsetModule
+        ],
+        exports: [
+            SkySectionedFormComponent,
+            SkySectionedFormSectionComponent
+        ]
+    })
+], SkySectionedFormModule);
+
+/**
+ * @internal
+ */
+let SkyTabButtonComponent = class SkyTabButtonComponent {
+    constructor() {
+        this.buttonClick = new EventEmitter();
+        this.closeClick = new EventEmitter();
+    }
+    onButtonClick(event) {
+        if (!this.disabled) {
+            this.buttonClick.emit();
+            event.preventDefault();
+        }
+    }
+    onButtonEnterKeyDown(event) {
+        this.onButtonClick(event);
+    }
+    onCloseClick(event) {
+        this.closeClick.emit();
+        // Prevent the click event from bubbling up to the anchor tag;
+        // otherwise it will trigger a page refresh.
+        event.stopPropagation();
+        event.preventDefault();
+    }
+};
+__decorate([
+    Input()
+], SkyTabButtonComponent.prototype, "active", void 0);
+__decorate([
+    Input()
+], SkyTabButtonComponent.prototype, "ariaControls", void 0);
+__decorate([
+    Input()
+], SkyTabButtonComponent.prototype, "buttonHref", void 0);
+__decorate([
+    Input()
+], SkyTabButtonComponent.prototype, "buttonId", void 0);
+__decorate([
+    Input()
+], SkyTabButtonComponent.prototype, "buttonText", void 0);
+__decorate([
+    Input()
+], SkyTabButtonComponent.prototype, "buttonTextCount", void 0);
+__decorate([
+    Input()
+], SkyTabButtonComponent.prototype, "closeable", void 0);
+__decorate([
+    Input()
+], SkyTabButtonComponent.prototype, "disabled", void 0);
+__decorate([
+    Input()
+], SkyTabButtonComponent.prototype, "tabStyle", void 0);
+__decorate([
+    Output()
+], SkyTabButtonComponent.prototype, "buttonClick", void 0);
+__decorate([
+    Output()
+], SkyTabButtonComponent.prototype, "closeClick", void 0);
+SkyTabButtonComponent = __decorate([
+    Component({
+        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.enter)=\"onButtonEnterKeyDown($event)\"\n  >\n    <span\n      class=\"sky-tab-heading\"\n    >\n      {{ buttonText }}\n      <span *ngIf=\"buttonTextCount !== undefined\"\n        class=\"sky-tab-header-count\"\n      >\n        {{ buttonTextCount }}\n      </span>\n    </span>\n  </a>\n\n  <button *ngIf=\"closeable\"\n    class=\"sky-btn-tab-close\"\n    type=\"button\"\n    [attr.aria-label]=\"'skyux_tab_close' | skyLibResources:buttonText\"\n    [disabled]=\"disabled\"\n    [ngClass]=\"{\n      'sky-btn-tab-close-disabled': disabled\n    }\"\n    (click)=\"onCloseClick($event)\"\n    >\n    <sky-icon\n      icon=\"remove\"\n    ></sky-icon>\n  </button>\n</div>\n",
+        changeDetection: ChangeDetectionStrategy.OnPush,
+        encapsulation: ViewEncapsulation.None,
+        styles: [".sky-btn-tab-wrapper{display:inline-block;position:relative;margin-right:5px}.sky-btn-tab-wrapper .sky-btn-tab-close{position:absolute;top:10px;right:10px;color:#686c73}.sky-btn-tab-wrapper .sky-btn-tab-close:hover{color:#212327;transition:color 150ms}.sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:#fff}.sky-tab-btn-closeable{padding-right:43px}.sky-theme-modern .sky-btn-tab-wrapper,:host-context(.sky-theme-modern) .sky-btn-tab-wrapper{margin-right:10px}.sky-theme-modern .sky-btn-tab-wrapper .sky-btn-tab-close,:host-context(.sky-theme-modern) .sky-btn-tab-wrapper .sky-btn-tab-close{top:12px;right:10px}.sky-theme-modern .sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close,:host-context(.sky-theme-modern) .sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:#686c73}.sky-theme-modern .sky-tab-btn-closeable,:host-context(.sky-theme-modern) .sky-tab-btn-closeable{padding-right:44px}.sky-theme-modern.sky-theme-mode-dark .sky-btn-tab-wrapper .sky-btn-tab-close,:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-btn-tab-wrapper .sky-btn-tab-close{color:#eeeeef}.sky-theme-modern.sky-theme-mode-dark .sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close,:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:#eeeeef}"]
+    })
+], SkyTabButtonComponent);
+
+/**
+ * @internal
+ */
+let SkyTabsetPermalinkService = class SkyTabsetPermalinkService {
+    constructor(activatedRoute, location, router) {
+        this.activatedRoute = activatedRoute;
+        this.location = location;
+        this.router = router;
+        this._popStateChange = new Subject();
+    }
+    get popStateChange() {
+        return this._popStateChange.asObservable();
+    }
+    ngOnDestroy() {
+        if (this.subscription) {
+            this.subscription.unsubscribe();
+        }
+    }
+    init() {
+        this.subscription = this.location.subscribe(() => {
+            this._popStateChange.next();
+        });
+    }
+    /**
+     * Returns the value of a URL query param.
+     */
+    getParam(name) {
+        return this.getParams()[name];
+    }
+    /**
+     * Sets the value of a URL query param.
+     */
+    setParam(name, value) {
+        const params = this.getParams();
+        if (value === null) {
+            delete params[name];
+        }
+        else {
+            params[name] = value;
+        }
+        // Update the URL without triggering a navigation state change.
+        // See: https://stackoverflow.com/a/46486677
+        const url = this.router.createUrlTree(['.'], {
+            relativeTo: this.activatedRoute,
+            queryParams: params,
+            queryParamsHandling: 'merge'
+        }).toString();
+        // Abort redirect if the current URL is equal to the new URL.
+        if (this.location.isCurrentPathEqualTo(url)) {
+            return;
+        }
+        this.location.go(url);
+    }
+    /**
+     * Removes the provided query param from the URL.
+     */
+    clearParam(name) {
+        /*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.
+     */
+    getParamHref(name, value) {
+        if (!name) {
+            /*tslint:disable-next-line:no-null-keyword*/
+            return null;
+        }
+        const params = this.getParams();
+        params[name] = value;
+        const baseUrl = this.location.path().split('?')[0];
+        const paramString = Object.keys(params).map(k => `${k}=${params[k]}`).join('&');
+        return this.location.prepareExternalUrl(`${baseUrl}?${paramString}`);
+    }
+    /**
+     * Converts the provided string into a value that can be safely used in a URL.
+     */
+    urlify(value) {
+        if (!value) {
+            return '';
+        }
+        const sanitized = value.toLowerCase()
+            // Remove special characters.
+            .replace(/[\_\~\`\@\!\#\$\%\^\&\*\(\)\[\]\{\}\;\:\'\/\\\<\>\,\.\?\=\+\|"]/g, '')
+            // Replace space characters with a dash.
+            .replace(/\s/g, '-')
+            // Remove any double-dashes.
+            .replace(/--/g, '-');
+        return sanitized;
+    }
+    /**
+     * Returns all query params that exist in the current URL.
+     */
+    getParams() {
+        const params = {};
+        const path = this.location.path();
+        if (path.indexOf('?') === -1) {
+            return params;
+        }
+        const existingParamPairs = path.split('?')[1].split('&');
+        existingParamPairs.forEach((pair) => {
+            const fragments = pair.split('=');
+            params[fragments[0]] = decodeURIComponent(fragments[1]);
+        });
+        return params;
+    }
+};
+SkyTabsetPermalinkService.ctorParameters = () => [
+    { type: ActivatedRoute },
+    { type: Location },
+    { type: Router }
+];
+SkyTabsetPermalinkService = __decorate([
+    Injectable()
+], SkyTabsetPermalinkService);
+
+/**
+ * @internal
+ */
+let SkyTabsetService = class SkyTabsetService {
+    constructor() {
+        this.currentActiveTabIndex = 0;
+        this._activeTabIndex = new BehaviorSubject(0);
+        this._activeTabUnregistered = new Subject();
+        this.tabs = [];
+        this.tabCounter = 0;
+    }
+    get activeTabUnregistered() {
+        return this._activeTabUnregistered.asObservable();
+    }
+    get activeTabIndex() {
+        return this._activeTabIndex.asObservable();
+    }
+    /**
+     * Sets the active tab by its unique `tabIndex` property.
+     */
+    setActiveTabIndex(value, config = {
+        emitChange: true
+    }) {
+        if (value !== undefined &&
+            !this.tabIndexesEqual(value, this.currentActiveTabIndex)) {
+            this.currentActiveTabIndex = value;
+            if (config.emitChange) {
+                this._activeTabIndex.next(value);
+            }
+        }
+    }
+    /**
+     * Registers a tab component.
+     */
+    registerTab(tabIndex) {
+        if (tabIndex === undefined) {
+            tabIndex = this.tabCounter;
+            this.tabCounter++;
+        }
+        this.tabs.push({ tabIndex });
+        return tabIndex;
+    }
+    updateTabIndex(currentTabIndex, newTabIndex) {
+        const found = this.tabs.find(tab => this.tabIndexesEqual(tab.tabIndex, currentTabIndex));
+        found.tabIndex = newTabIndex;
+    }
+    /**
+     * Unregisters a tab component.
+     */
+    unregisterTab(tabIndex) {
+        const index = this.tabs.findIndex(tab => this.tabIndexesEqual(tab.tabIndex, tabIndex));
+        // Notify the tabset component when an active tab is unregistered.
+        if (this.isTabIndexActive(this.tabs[index].tabIndex)) {
+            this._activeTabUnregistered.next({
+                arrayIndex: index
+            });
+        }
+        this.tabs.splice(index, 1);
+    }
+    /**
+     * Unregisters all tab components at once.
+     */
+    unregisterAll() {
+        this.tabs = [];
+    }
+    /**
+     * Compares two tab indexes and returns `true` if they are equal.
+     */
+    tabIndexesEqual(tabIndex1, tabIndex2) {
+        return (tabIndex1 === tabIndex2 ||
+            +tabIndex1 === +tabIndex2);
+    }
+    /**
+     * Verifies if a provided tab index is registered.
+     */
+    isValidTabIndex(tabIndex) {
+        return this.tabs.some(tab => this.tabIndexesEqual(tab.tabIndex, tabIndex));
+    }
+    /**
+     * Activates the first registered tab.
+     */
+    activateFirstTab() {
+        const firstTabIndex = this.tabs[0] && this.tabs[0].tabIndex;
+        if (firstTabIndex !== undefined) {
+            this.setActiveTabIndex(firstTabIndex);
+            return firstTabIndex;
+        }
+    }
+    /**
+     * Activates the next registered tab, or the previous one based on a provided array index.
+     */
+    activateNearestTab(arrayIndex) {
+        const newActiveTab = this.tabs[arrayIndex] || this.tabs[arrayIndex - 1];
+        if (newActiveTab) {
+            this.currentActiveTabIndex = newActiveTab.tabIndex;
+        }
+    }
+    isTabIndexActive(tabIndex) {
+        return this.tabIndexesEqual(tabIndex, this.currentActiveTabIndex);
+    }
+};
+SkyTabsetService = __decorate([
+    Injectable()
+], SkyTabsetService);
+
+let nextId$1 = 0;
+let SkyTabComponent = class SkyTabComponent {
+    constructor(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 EventEmitter();
+        this.showContent = false;
+        this._activeChange = new BehaviorSubject(undefined);
+        this._stateChange = new BehaviorSubject(undefined);
+        this._tabIndexChange = new BehaviorSubject(undefined);
+        const id = nextId$1++;
+        this.tabPanelId = `sky-tab-${id}`;
+        this.tabButtonId = `${this.tabPanelId}-nav-btn`;
+    }
+    /**
+     * 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 active(value) {
+        if (value !== undefined &&
+            value !== this._active) {
+            this._active = value;
+            this._activeChange.next();
+        }
+    }
+    get active() {
+        return this._active || false;
+    }
+    get activeChange() {
+        return this._activeChange.asObservable();
+    }
+    /**
+     * 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 permalinkValue(value) {
+        this._permalinkValue = this.permalinkService.urlify(value);
+    }
+    get permalinkValue() {
+        return this._permalinkValue || this.permalinkService.urlify(this.tabHeading);
+    }
+    /**
+     * 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 tabIndex(value) {
+        if (value !== this._tabIndex &&
+            value !== undefined &&
+            this._tabIndex !== undefined) {
+            this.tabsetService.updateTabIndex(this._tabIndex, value);
+            this._tabIndexChange.next(value);
+        }
+        this._tabIndex = value;
+    }
+    get tabIndex() {
+        return this._tabIndex;
+    }
+    get closeable() {
+        return this.close.observers.length > 0;
+    }
+    /**
+     * Alerts the tabset component when this component has changes that need to be reflected in the UI.
+     */
+    get stateChange() {
+        return this._stateChange.asObservable();
+    }
+    get tabIndexChange() {
+        return this._tabIndexChange.asObservable();
+    }
+    ngOnChanges(changes) {
+        if (changes.disabled && !changes.disabled.firstChange ||
+            changes.tabHeading && !changes.tabHeading.firstChange ||
+            changes.tabHeaderCount && !changes.tabHeaderCount.firstChange ||
+            changes.permalinkValue && !changes.permalinkValue.firstChange) {
+            this._stateChange.next();
+        }
+    }
+    ngOnDestroy() {
+        this._stateChange.complete();
+        this.tabsetService.unregisterTab(this.tabIndex);
+    }
+    init() {
+        this._tabIndex = this.tabsetService.registerTab(this.tabIndex);
+    }
+    activate() {
+        this._active = true;
+        this.showContent = true;
+        this.changeDetector.markForCheck();
+    }
+    deactivate() {
+        this._active = false;
+        this.showContent = false;
+        this.changeDetector.markForCheck();
+    }
+};
+SkyTabComponent.ctorParameters = () => [
+    { type: ChangeDetectorRef },
+    { type: SkyTabsetPermalinkService },
+    { type: SkyTabsetService }
+];
+__decorate([
+    Input()
+], SkyTabComponent.prototype, "active", null);
+__decorate([
+    Input()
+], SkyTabComponent.prototype, "disabled", void 0);
+__decorate([
+    Input()
+], SkyTabComponent.prototype, "permalinkValue", null);
+__decorate([
+    Input()
+], SkyTabComponent.prototype, "tabHeaderCount", void 0);
+__decorate([
+    Input()
+], SkyTabComponent.prototype, "tabHeading", void 0);
+__decorate([
+    Input()
+], SkyTabComponent.prototype, "tabIndex", null);
+__decorate([
+    Output()
+], SkyTabComponent.prototype, "close", void 0);
+SkyTabComponent = __decorate([
+    Component({
+        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: ChangeDetectionStrategy.OnPush
+    })
+], SkyTabComponent);
+
+const buttonTypeNext = 'next';
+const buttonTypePrevious = 'previous';
+/**
+ * @internal
+ */
+let SkyTabsetNavButtonComponent = class SkyTabsetNavButtonComponent {
+    constructor(resourceService, changeDetector) {
+        this.resourceService = resourceService;
+        this.changeDetector = changeDetector;
+    }
+    set buttonText(value) {
+        this._buttonText = value;
+    }
+    get buttonText() {
+        if (this._buttonText) {
+            return this._buttonText;
+        }
+        switch (this.buttonType) {
+            case buttonTypePrevious:
+                return this.previousButtonText;
+            case buttonTypeNext:
+                return this.nextButtonText;
+            /* istanbul ignore next */
+            default:
+                return '';
+        }
+    }
+    get disabled() {
+        let 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;
+    }
+    get selectedTab() {
+        let selectedTab;
+        if (this.tabset && this.tabset.tabs) {
+            selectedTab = this.tabset.tabs.find((tab) => tab.tabIndex === this.tabset.lastActiveTabIndex);
+        }
+        return selectedTab;
+    }
+    get nextTab() {
+        let selectedTab = this.selectedTab;
+        if (selectedTab) {
+            let tabs = this.tabset.tabs.toArray();
+            return tabs[tabs.indexOf(selectedTab) + 1];
+        }
+        return undefined;
+    }
+    get previousTab() {
+        let selectedTab = this.selectedTab;
+        if (selectedTab) {
+            let tabs = this.tabset.tabs.toArray();
+            return tabs[tabs.indexOf(selectedTab) - 1];
+        }
+        return undefined;
+    }
+    ngAfterViewInit() {
+        forkJoin([
+            this.resourceService.getString('skyux_tabs_navigator_previous'),
+            this.resourceService.getString('skyux_tabs_navigator_next')
+        ])
+            .pipe(take(1))
+            .subscribe(resources => {
+            this.previousButtonText = resources[0];
+            this.nextButtonText = resources[1];
+            this.changeDetector.detectChanges();
+        });
+    }
+    buttonClick() {
+        let 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;
+        }
+    }
+};
+SkyTabsetNavButtonComponent.ctorParameters = () => [
+    { type: SkyLibResourcesService },
+    { type: ChangeDetectorRef }
+];
+__decorate([
+    Input()
+], SkyTabsetNavButtonComponent.prototype, "tabset", void 0);
+__decorate([
+    Input()
+], SkyTabsetNavButtonComponent.prototype, "buttonType", void 0);
+__decorate([
+    Input()
+], SkyTabsetNavButtonComponent.prototype, "buttonText", null);
+SkyTabsetNavButtonComponent = __decorate([
+    Component({
+        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"
+    })
+], SkyTabsetNavButtonComponent);
+
+/**
+ * @internal
+ */
+let SkyTabsetAdapterService = class SkyTabsetAdapterService {
+    constructor() {
+        this._overflowChange = new BehaviorSubject(false);
+    }
+    get overflowChange() {
+        return this._overflowChange.asObservable();
+    }
+    registerTabset(tabsetRef) {
+        this.tabsetRef = tabsetRef;
+        this.tabsOffsetLeft = this.getTabsOffsetLeft(tabsetRef.nativeElement);
+    }
+    /**
+     * Detects if the tab buttons are wider than the tabset container.
+     */
+    detectOverflow() {
+        const nativeElement = this.tabsetRef.nativeElement;
+        const tabsetRect = nativeElement
+            .querySelector('.sky-tabset')
+            .getBoundingClientRect();
+        const tabButtonsRect = nativeElement
+            .querySelector('.sky-tabset-tabs')
+            .getBoundingClientRect();
+        const tabExtraButtonsRect = nativeElement
+            .querySelector('.sky-tabset-btns')
+            .getBoundingClientRect();
+        const tabButtonsWidth = tabButtonsRect.width + tabExtraButtonsRect.width + this.tabsOffsetLeft;
+        const newOverflow = (tabButtonsWidth > tabsetRect.width);
+        if (this.currentOverflow !== newOverflow) {
+            this.currentOverflow = newOverflow;
+            this._overflowChange.next(this.currentOverflow);
+        }
+    }
+    /**
+     * Returns the number of pixels to the left of the first tab.
+     */
+    getTabsOffsetLeft(tabsetEl) {
+        const tabsetRect = tabsetEl.getBoundingClientRect();
+        // The dropdown element is the first "tab" and always exists in the DOM, even when hidden.
+        const firstTabRect = tabsetEl.querySelector('.sky-tabset-dropdown').getBoundingClientRect();
+        return firstTabRect.left - tabsetRect.left;
+    }
+};
+SkyTabsetAdapterService = __decorate([
+    Injectable()
+], SkyTabsetAdapterService);
+
+let SkyTabsetComponent = class SkyTabsetComponent {
+    constructor(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 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 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 EventEmitter();
+        /**
+         * Fires when any tab's `tabIndex` value changes.
+         */
+        this.tabIndexesChange = new EventEmitter();
+        this.tabButtons = [];
+        this.ngUnsubscribe = new Subject();
+        this.tabComponentsStateChangeUnsubscribe = new Subject();
+    }
+    /**
+     * Activates a tab by its `tabIndex` property.
+     */
+    set active(value) {
+        if (value === undefined ||
+            this.tabsetService.tabIndexesEqual(value, this._active)) {
+            return;
+        }
+        this._active = value;
+        if (this.tabs) {
+            this.tabsetService.setActiveTabIndex(value);
+        }
+        else {
+            // On init, wait for children tabs to render before broadcasting the active tab index.
+            setTimeout(() => {
+                if (this.tabsetService.isValidTabIndex(value)) {
+                    // On init, yield to the permalink ID, if it exists.
+                    if (this.getActiveTabIndexByPermalinkId() === undefined) {
+                        this.tabsetService.setActiveTabIndex(value);
+                    }
+                }
+                else {
+                    // Activate the first tab if the new tab index is invalid.
+                    this._active = this.tabsetService.activateFirstTab();
+                }
+            });
+        }
+    }
+    get active() {
+        return this._active;
+    }
+    /**
+     * Distinguishes a tabset's unique state in the URL by generating a query parameter
+     * that is written as `?<queryParam>-active-tab=<sanitized-tab-heading>`.
+     * The query parameter's value is parsed automatically from the selected tab's heading text,
+     * but you can supply a custom query parameter value for each tab with its `permalinkValue`.
+     */
+    set permalinkId(value) {
+        if (!value) {
+            return;
+        }
+        const sanitized = this.permalinkService.urlify(value);
+        this._permalinkId = `${sanitized}-active-tab`;
+    }
+    get permalinkId() {
+        return this._permalinkId || '';
+    }
+    /**
+     * 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 tabStyle(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;
+    }
+    get tabStyle() {
+        return this._tabStyle || 'tabs';
+    }
+    set tabDisplayMode(value) {
+        this._tabDisplayMode = value;
+        this.changeDetector.markForCheck();
+    }
+    get tabDisplayMode() {
+        return this._tabDisplayMode || 'tabs';
+    }
+    ngAfterViewInit() {
+        this.initTabComponents();
+        this.listenTabComponentsStructuralChange();
+        const initialTabIndex = this.getInitialTabIndex();
+        this.tabsetService.setActiveTabIndex(initialTabIndex);
+        this.listenTabButtonsOverflowChange();
+        this.listenLocationPopStateChange();
+        // If the currently active tab is getting unregistered, activate the next one.
+        this.tabsetService.activeTabUnregistered
+            .pipe(takeUntil(this.ngUnsubscribe))
+            .subscribe(tab => {
+            // Wait for the new tabs to render before activating.
+            setTimeout(() => {
+                this.tabsetService.activateNearestTab(tab.arrayIndex);
+            });
+        });
+        // Let the tabset render the initial active index before listening for changes.
+        setTimeout(() => {
+            this.listenTabComponentsStateChange();
+            this.listenActiveIndexChange();
+            this.permalinkService.init();
+        });
+    }
+    ngOnDestroy() {
+        this.ngUnsubscribe.next();
+        this.ngUnsubscribe.complete();
+        this.unsubscribeTabComponentsStateChange();
+        this.permalinkService.clearParam(this.permalinkId);
+    }
+    onWindowResize() {
+        this.adapterService.detectOverflow();
+    }
+    onTabCloseClick(tabButton) {
+        const tabComponent = this.tabs.find(tab => this.tabsetService.tabIndexesEqual(tab.tabIndex, tabButton.tabIndex));
+        tabComponent.close.emit();
+    }
+    onTabButtonClick(tabButton) {
+        this.tabsetService.setActiveTabIndex(tabButton.tabIndex);
+    }
+    onNewTabClick() {
+        this.newTab.emit();
+    }
+    onOpenTabClick() {
+        this.openTab.emit();
+    }
+    /**
+     * Sets the initial active tab index based on the following criteria.
+     * 1. Does the URL include a query param that reflects this tabset's active tab?
+     * 2. Does one of the tab components have their `active` property set to `true`?
+     * 3. Is the tabset component's `active` property set to a specific tab index?
+     */
+    getInitialTabIndex() {
+        var _a;
+        let 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;
+    }
+    listenActiveIndexChange() {
+        this.tabsetService.activeTabIndex
+            .pipe(distinctUntilChanged(), takeUntil(this.ngUnsubscribe))
+            .subscribe(activeIndex => {
+            this.updateTabsetComponent(activeIndex);
+        });
+    }
+    listenTabComponentsStructuralChange() {
+        this.tabs.changes
+            .pipe(takeUntil(this.ngUnsubscribe))
+            .subscribe(() => {
+            this.resetTabComponents();
+        });
+    }
+    listenTabComponentsStateChange() {
+        combineLatest(this.tabs.map(tab => tab.activeChange))
+            .pipe(takeUntil(race(this.tabComponentsStateChangeUnsubscribe, this.ngUnsubscribe)))
+            .subscribe(() => {
+            // Wait for the tab components to render changes before finding the active one.
+            setTimeout(() => {
+                var _a;
+                const tabIndex = (_a = this.getActiveTabComponent()) === null || _a === void 0 ? void 0 : _a.tabIndex;
+                this.tabsetService.setActiveTabIndex(tabIndex);
+            });
+        });
+        combineLatest(this.tabs.map(tab => tab.tabIndexChange))
+            .pipe(takeUntil(race(this.tabComponentsStateChangeUnsubscribe, this.ngUnsubscribe)))
+            .subscribe(() => {
+            // Don't emit the first change.
+            if (this.lastActiveTabIndex !== undefined) {
+                // Wait for the tab components to render changes before updating the view.
+                setTimeout(() => {
+                    this.updateTabsetComponent(this.tabsetService.currentActiveTabIndex, true);
+                    this.emitTabIndexChange();
+                });
+            }
+        });
+        combineLatest(this.tabs.map(tab => tab.stateChange))
+            .pipe(takeUntil(race(this.tabComponentsStateChangeUnsubscribe, this.ngUnsubscribe)))
+            .subscribe(() => {
+            // Wait for the tab components to render changes before finding the active one.
+            setTimeout(() => {
+                this.updateTabsetComponent(this.tabsetService.currentActiveTabIndex, true);
+            });
+        });
+    }
+    initTabComponents() {
+        this.tabs.forEach(tab => tab.init());
+    }
+    resetTabComponents() {
+        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();
+        const activeIndex = (_a = this.getActiveTabComponent()) === null || _a === void 0 ? void 0 : _a.tabIndex;
+        this.tabsetService.setActiveTabIndex(activeIndex, {
+            emitChange: false
+        });
+        this.listenTabComponentsStateChange();
+    }
+    emitTabIndexChange() {
+        this.tabIndexesChange.emit({
+            tabs: this.tabs.map(tab => ({
+                tabHeading: tab.tabHeading,
+                tabIndex: tab.tabIndex
+            }))
+        });
+    }
+    unsubscribeTabComponentsStateChange() {
+        this.tabComponentsStateChangeUnsubscribe.next();
+        this.tabComponentsStateChangeUnsubscribe.complete();
+        this.tabComponentsStateChangeUnsubscribe = new Subject();
+    }
+    listenTabButtonsOverflowChange() {
+        this.adapterService.registerTabset(this.elementRef);
+        this.adapterService.overflowChange
+            .pipe(takeUntil(this.ngUnsubscribe))
+            .subscribe(isOverflowing => {
+            this.tabDisplayMode = (isOverflowing) ? 'dropdown' : 'tabs';
+            this.changeDetector.markForCheck();
+        });
+    }
+    /**
+     * Listen for back/forward history button presses to detect query param changes in the URL.
+     */
+    listenLocationPopStateChange() {
+        this.permalinkService.popStateChange
+            .pipe(takeUntil(this.ngUnsubscribe))
+            .subscribe(() => {
+            this.setActiveTabIndexByPermalinkId();
+        });
+    }
+    setActiveTabIndexByPermalinkId() {
+        const activeIndex = this.getActiveTabIndexByPermalinkId();
+        this.tabsetService.setActiveTabIndex(activeIndex);
+    }
+    getActiveTabIndexByPermalinkId() {
+        var _a;
+        if (this.permalinkId) {
+            const paramValue = this.permalinkService.getParam(this.permalinkId);
+            if (paramValue) {
+                return (_a = this.tabs.find(tab => tab.permalinkValue === paramValue)) === null || _a === void 0 ? void 0 : _a.tabIndex;
+            }
+        }
+    }
+    getActiveTabComponent() {
+        return this.tabs.toArray().reverse().find(tab => tab.active === true);
+    }
+    createTabButtons(activeIndex) {
+        return this.tabs.map(tab => ({
+            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
+        }));
+    }
+    updateTabButtons(activeIndex) {
+        this.tabButtons.forEach(button => {
+            button.active = this.tabsetService.tabIndexesEqual(button.tabIndex, activeIndex);
+        });
+    }
+    /**
+     * Updates the UI and state of the tabset component after the tab index or
+     * tab components have changed.
+     * @param activeIndex The currently active tab index.
+     * @param regenerateTabButtons Indicates if tab button view models should be regenerated.
+     * Setting this value to `false` will simply update the existing tab buttons. Setting this value
+     * to `true` is only necessary when the underlying tab components have changed and the tab
+     * buttons must reflect those changes.
+     */
+    updateTabsetComponent(activeIndex, regenerateTabButtons = false) {
+        var _a;
+        // Activate/deactivate tab components.
+        this.tabs.forEach(tab => {
+            this.tabsetService.tabIndexesEqual(tab.tabIndex, activeIndex)
+                ? tab.activate()
+                : tab.deactivate();
+        });
+        // Update the tab button models.
+        if (regenerateTabButtons || !this.tabButtons.length) {
+            this.tabButtons = this.createTabButtons(activeIndex);
+        }
+        else {
+            this.updateTabButtons(activeIndex);
+        }
+        // Update the dropdown trigger button text.
+        this.dropdownTriggerButtonText = (_a = this.tabButtons.find(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) {
+            const activeTabComponent = this.tabs.find(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(() => {
+            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);
+        }
+    }
+};
+SkyTabsetComponent.ctorParameters = () => [
+    { type: ChangeDetectorRef },
+    { type: ElementRef },
+    { type: SkyTabsetAdapterService },
+    { type: SkyTabsetPermalinkService },
+    { type: SkyTabsetService }
+];
+__decorate([
+    Input()
+], SkyTabsetComponent.prototype, "active", null);
+__decorate([
+    Input()
+], SkyTabsetComponent.prototype, "ariaLabel", void 0);
+__decorate([
+    Input()
+], SkyTabsetComponent.prototype, "ariaLabelledBy", void 0);
+__decorate([
+    Input()
+], SkyTabsetComponent.prototype, "permalinkId", null);
+__decorate([
+    Input()
+], SkyTabsetComponent.prototype, "tabStyle", null);
+__decorate([
+    Output()
+], SkyTabsetComponent.prototype, "activeChange", void 0);
+__decorate([
+    Output()
+], SkyTabsetComponent.prototype, "newTab", void 0);
+__decorate([
+    Output()
+], SkyTabsetComponent.prototype, "openTab", void 0);
+__decorate([
+    Output()
+], SkyTabsetComponent.prototype, "tabIndexesChange", void 0);
+__decorate([
+    ContentChildren(SkyTabComponent)
+], SkyTabsetComponent.prototype, "tabs", void 0);
+SkyTabsetComponent = __decorate([
+    Component({
+        selector: 'sky-tabset',
+        template: "<div\n  class=\"sky-tabset\"\n  role=\"tablist\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.aria-labelledby]=\"ariaLabelledBy\"\n  [ngClass]=\"'sky-tabset-mode-' + tabDisplayMode + ' sky-tabset-style-' + tabStyle\"\n  (window:resize)=\"onWindowResize()\"\n>\n  <span class=\"sky-tabset-dropdown\">\n    <sky-dropdown *ngIf=\"tabDisplayMode === 'dropdown'\"\n      buttonType=\"tab\"\n    >\n      <sky-dropdown-button>\n        {{ dropdownTriggerButtonText }}\n      </sky-dropdown-button>\n      <sky-dropdown-menu>\n        <sky-dropdown-item *ngFor=\"let tabButton of tabButtons\"\n          class=\"sky-tab-dropdown-menu-item\"\n        >\n          <div\n            class=\"sky-tab-dropdown-item\"\n            [ngClass]=\"{\n              'sky-tab-dropdown-item-selected': tabButton.active\n            }\"\n          >\n            <ng-container *ngTemplateOutlet=\"tabButtonTemplate; context: {\n              $implicit: tabButton\n            }\"></ng-container>\n          </div>\n        </sky-dropdown-item>\n      </sky-dropdown-menu>\n    </sky-dropdown>\n  </span>\n  <span\n    class=\"sky-tabset-tabs\"\n  >\n    <ng-container *ngFor=\"let tabButton of tabButtons\">\n      <ng-container *ngTemplateOutlet=\"tabButtonTemplate; context: {\n        $implicit: tabButton\n      }\"></ng-container>\n    </ng-container>\n  </span>\n  <span\n    class=\"sky-tabset-btns\"\n  >\n    <button *ngIf=\"newTab.observers.length > 0\"\n      class=\"sky-btn sky-btn-icon sky-tabset-btn-new sky-margin-inline-compact\"\n      type=\"button\"\n      [attr.aria-label]=\"'skyux_tab_add' | skyLibResources\"\n      [skyThemeClass]=\"{\n        'sky-margin-inline-sm': 'modern'\n      }\"\n      (click)=\"onNewTabClick()\"\n    >\n      <sky-icon\n        icon=\"plus-circle\"\n        size=\"lg\"\n      >\n      </sky-icon>\n    </button>\n    <button *ngIf=\"openTab.observers.length > 0\"\n      class=\"sky-btn sky-btn-icon sky-tabset-btn-open sky-margin-inline-compact\"\n      type=\"button\"\n      [attr.aria-label]=\"'skyux_tab_open' | skyLibResources\"\n      [skyThemeClass]=\"{\n        'sky-margin-inline-sm': 'modern'\n      }\"\n      (click)=\"onOpenTabClick()\"\n    >\n      <sky-icon\n        icon=\"folder-open-o\"\n        size=\"lg\"\n      >\n      </sky-icon>\n    </button>\n  </span>\n</div>\n<ng-content></ng-content>\n\n<ng-template\n  let-tabButton\n  #tabButtonTemplate\n>\n  <sky-tab-button\n    [active]=\"tabButton.active\"\n    [ariaControls]=\"tabButton.ariaControls\"\n    [buttonHref]=\"tabButton.buttonHref\"\n    [buttonId]=\"tabButton.buttonId\"\n    [buttonText]=\"tabButton.buttonText\"\n    [buttonTextCount]=\"tabButton.buttonTextCount\"\n    [closeable]=\"tabButton.closeable\"\n    [disabled]=\"tabButton.disabled\"\n    [tabStyle]=\"tabStyle\"\n    (buttonClick)=\"onTabButtonClick(tabButton)\"\n    (closeClick)=\"onTabCloseClick(tabButton)\"\n  ></sky-tab-button>\n</ng-template>\n",
+        providers: [
+            SkyTabsetAdapterService,
+            SkyTabsetPermalinkService,
+            SkyTabsetService
+        ],
+        changeDetection: ChangeDetectionStrategy.OnPush,
+        encapsulation: ViewEncapsulation.None,
+        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}"]
+    })
+], SkyTabsetComponent);
+
+let SkyTabsModule = class SkyTabsModule {
+};
+SkyTabsModule = __decorate([
+    NgModule({
+        declarations: [
+            SkyTabButtonComponent,
+            SkyTabComponent,
+            SkyTabsetComponent,
+            SkyTabsetNavButtonComponent
+        ],
+        imports: [
+            CommonModule,
+            RouterModule,
+            SkyDropdownModule,
+            SkyI18nModule,
+            SkyIconModule,
+            SkyTabsResourcesModule,
+            SkyThemeModule
+        ],
+        exports: [
+            SkyTabComponent,
+            SkyTabsetComponent,
+            SkyTabsetNavButtonComponent
+        ]
+    })
+], SkyTabsModule);
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SkySectionedFormComponent, SkySectionedFormModule, SkySectionedFormService, SkyTabsModule, SkyVerticalTabsetModule, VISIBLE_STATE as ɵa, HIDDEN_STATE as ɵb, SkyVerticalTabsetService as ɵc, SkySectionedFormSectionComponent as ɵd, SkyVerticalTabComponent as ɵe, SkyVerticalTabMediaQueryService as ɵf, SkyVerticalTabsetAdapterService as ɵg, SkyVerticalTabsetComponent as ɵh, SkyVerticalTabsetGroupComponent as ɵi, SkyTabsResourcesModule as ɵj, SkyTabsResourcesProvider as ɵk, SkyTabButtonComponent as ɵl, SkyTabComponent as ɵm, SkyTabsetPermalinkService as ɵn, SkyTabsetService as ɵo, SkyTabsetComponent as ɵp, SkyTabsetAdapterService as ɵq, SkyTabsetNavButtonComponent as ɵr };
+//# sourceMappingURL=skyux-tabs.js.map