@skyux/tabs 4.6.9 → 5.0.0-beta.4

package/fesm2015/skyux-tabs.js

@@ -1,16 +1,22 @@
-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 * as i0 from '@angular/core';
+import { Injectable, EventEmitter, Component, ChangeDetectionStrategy, Input, Output, ViewChild, HostListener, NgModule, ContentChildren, ViewEncapsulation } from '@angular/core';
+import * as i2 from '@angular/common';
+import { CommonModule } 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 * as i1 from '@skyux/core';
+import { SkyMediaBreakpoints, SkyMediaQueryService } from '@skyux/core';
+import * as i4 from '@skyux/indicators';
 import { SkyChevronModule, SkyIconModule, SkyStatusIndicatorModule } from '@skyux/indicators';
+import * as i4$1 from '@skyux/theme';
 import { SkyThemeModule } from '@skyux/theme';
-import { getStringForLocale, SKY_LIB_RESOURCES_PROVIDERS, SkyLibResourcesService, SkyI18nModule } from '@skyux/i18n';
+import * as i3 from '@skyux/i18n';
+import { getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS } from '@skyux/i18n';
 import { SkyCheckboxModule } from '@skyux/forms';
-import { ActivatedRoute, Router, RouterModule } from '@angular/router';
+import * as i1$1 from '@angular/router';
+import { RouterModule } from '@angular/router';
+import * as i4$2 from '@skyux/popovers';
 import { SkyDropdownModule } from '@skyux/popovers';
 
 const VISIBLE_STATE = 'shown';
@@ -18,7 +24,7 @@ const HIDDEN_STATE = 'void';
 /**
  * @internal
  */
-let SkyVerticalTabsetService = class SkyVerticalTabsetService {
+class SkyVerticalTabsetService {
     constructor(mediaQueryService) {
         this.mediaQueryService = mediaQueryService;
         this.activeIndex = undefined;
@@ -65,14 +71,17 @@ let SkyVerticalTabsetService = class SkyVerticalTabsetService {
         this.tabAdded.next(tab);
     }
     destroyTab(tab) {
+        var _a;
         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);
-            }
+        if (this.maintainTabContent &&
+            tab.contentRendered &&
+            (
+            /* istanbul ignore next */
+            (_a = this._content) === null || _a === void 0 ? void 0 : _a.nativeElement.contains(tab.tabContent.nativeElement))) {
+            this._content.nativeElement.removeChild(tab.tabContent.nativeElement);
         }
         this.tabs.splice(tabIndex, 1);
         // update tab indices
@@ -147,6 +156,7 @@ let SkyVerticalTabsetService = class SkyVerticalTabsetService {
         this.content = undefined;
     }
     moveContent() {
+        /* istanbul ignore else */
         if (this._content && !this._contentAdded) {
             let activeTab = this.activeTab();
             let activeContent = activeTab ? activeTab.tabContent : undefined;
@@ -167,18 +177,17 @@ let SkyVerticalTabsetService = class SkyVerticalTabsetService {
         }
         this.indexChanged.next(this.activeIndex);
     }
-};
-SkyVerticalTabsetService.ctorParameters = () => [
-    { type: SkyMediaQueryService }
-];
-SkyVerticalTabsetService = __decorate([
-    Injectable()
-], SkyVerticalTabsetService);
+}
+SkyVerticalTabsetService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: SkyVerticalTabsetService, deps: [{ token: i1.SkyMediaQueryService }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyVerticalTabsetService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: SkyVerticalTabsetService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: SkyVerticalTabsetService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i1.SkyMediaQueryService }]; } });
 
 /**
  * Creates a container for the sectioned forms.
  */
-let SkySectionedFormComponent = class SkySectionedFormComponent {
+class SkySectionedFormComponent {
     constructor(tabService, changeRef) {
         this.tabService = tabService;
         this.changeRef = changeRef;
@@ -235,48 +244,58 @@ let SkySectionedFormComponent = class SkySectionedFormComponent {
         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')
-                ])
+}
+SkySectionedFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: SkySectionedFormComponent, deps: [{ token: SkyVerticalTabsetService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+SkySectionedFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: SkySectionedFormComponent, selector: "sky-sectioned-form", inputs: { maintainSectionContent: "maintainSectionContent" }, outputs: { indexChanged: "indexChanged" }, providers: [SkyVerticalTabsetService], viewQueries: [{ propertyName: "content", first: true, predicate: ["skySectionSideContent"], descendants: true }], ngImport: i0, template: "<div\n  aria-orientation=\"vertical\"\n  class=\"sky-sectioned-form\"\n  [attr.role]=\"ariaRole\"\n  (window:resize)=\"tabService.updateContent()\"\n>\n  <div\n    *ngIf=\"maintainSectionContent || tabsVisible()\"\n    class=\"sky-sectioned-form-tabs\"\n    [ngClass]=\"{'sky-sectioned-form-tabs-hidden': !tabsVisible()}\"\n    [@tabEnter]=\"tabService.animationTabsVisibleState\"\n  >\n    <ng-content></ng-content>\n  </div>\n  <div\n    *ngIf=\"maintainSectionContent || tabService.contentVisible()\"\n    class=\"sky-sectioned-form-content\"\n    [ngClass]=\"{'sky-sectioned-form-content-hidden': !tabService.contentVisible()}\"\n    [@contentEnter]=\"tabService.animationContentVisibleState\"\n    #skySectionSideContent\n  >\n  </div>\n</div>\n\n", styles: [":host .sky-sectioned-form{display:block;max-height:none}:host .sky-sectioned-form-content{flex-basis:auto;overflow-y:visible}:host .sky-sectioned-form-tabs{flex-basis:auto;overflow-y:visible;border-right:1px solid #e2e3e4}:host-context(.sky-responsive-container-xs) .sky-sectioned-form,:host-context(.sky-responsive-container-sm) .sky-sectioned-form,:host-context(.sky-responsive-container-md) .sky-sectioned-form,:host-context(.sky-responsive-container-lg) .sky-sectioned-form{display:block;max-height:none}:host-context(.sky-responsive-container-xs) .sky-sectioned-form-content,:host-context(.sky-responsive-container-sm) .sky-sectioned-form-content,:host-context(.sky-responsive-container-md) .sky-sectioned-form-content,:host-context(.sky-responsive-container-lg) .sky-sectioned-form-content{flex-basis:auto;overflow-y:visible}:host-context(.sky-responsive-container-xs) .sky-sectioned-form-tabs,:host-context(.sky-responsive-container-sm) .sky-sectioned-form-tabs,:host-context(.sky-responsive-container-md) .sky-sectioned-form-tabs,:host-context(.sky-responsive-container-lg) .sky-sectioned-form-tabs{flex-basis:auto;overflow-y:visible;border-right:1px solid #e2e3e4}@media (min-width: 768px){:host .sky-sectioned-form{display:flex;max-height:100%}:host .sky-sectioned-form-content{flex-basis:70%;margin:15px;overflow-y:auto}:host .sky-sectioned-form-tabs{flex-basis:30%;overflow-y:auto}}:host-context(.sky-responsive-container-sm) .sky-sectioned-form,:host-context(.sky-responsive-container-md) .sky-sectioned-form,:host-context(.sky-responsive-container-lg) .sky-sectioned-form{display:flex;max-height:100%}:host-context(.sky-responsive-container-sm) .sky-sectioned-form-content,:host-context(.sky-responsive-container-md) .sky-sectioned-form-content,:host-context(.sky-responsive-container-lg) .sky-sectioned-form-content{flex-basis:70%;margin:15px;overflow-y:auto}:host-context(.sky-responsive-container-sm) .sky-sectioned-form-tabs,:host-context(.sky-responsive-container-md) .sky-sectioned-form-tabs,:host-context(.sky-responsive-container-lg) .sky-sectioned-form-tabs{flex-basis:30%;overflow-y:auto}.sky-sectioned-form-tabs-hidden{display:none}.sky-sectioned-form-content-hidden{display:none}:host-context(.sky-theme-modern) .sky-sectioned-form-content{margin:15px}:host-context(.sky-theme-modern) .sky-sectioned-form-tabs{border-right:1px solid #d2d2d2}@media (min-width: 768px){:host-context(.sky-theme-modern) :host .sky-sectioned-form-content{margin:20px 30px}}:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-sm) .sky-sectioned-form-content,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-md) .sky-sectioned-form-content,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-lg) .sky-sectioned-form-content{margin:20px 30px}.sky-theme-modern .sky-sectioned-form-content{margin:15px}.sky-theme-modern .sky-sectioned-form-tabs{border-right:1px solid #d2d2d2}@media (min-width: 768px){.sky-theme-modern :host .sky-sectioned-form-content{margin:20px 30px}}.sky-theme-modern :host-context(.sky-responsive-container-sm) .sky-sectioned-form-content,.sky-theme-modern :host-context(.sky-responsive-container-md) .sky-sectioned-form-content,.sky-theme-modern :host-context(.sky-responsive-container-lg) .sky-sectioned-form-content{margin:20px 30px}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], 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);
+        ])
+    ], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: SkySectionedFormComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-sectioned-form',
+                    templateUrl: './sectioned-form.component.html',
+                    styleUrls: ['./sectioned-form.component.scss'],
+                    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')
+                            ])
+                        ])
+                    ]
+                }]
+        }], ctorParameters: function () { return [{ type: SkyVerticalTabsetService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { maintainSectionContent: [{
+                type: Input
+            }], indexChanged: [{
+                type: Output
+            }], content: [{
+                type: ViewChild,
+                args: ['skySectionSideContent']
+            }] } });
 
 /**
  * @internal
  */
-let SkyVerticalTabMediaQueryService = class SkyVerticalTabMediaQueryService {
+class SkyVerticalTabMediaQueryService {
     constructor() {
         this.currentSubject = new BehaviorSubject(this.current);
         this._current = SkyMediaBreakpoints.xs;
@@ -334,12 +353,14 @@ let SkyVerticalTabMediaQueryService = class SkyVerticalTabMediaQueryService {
     destroy() {
         this.currentSubject.complete();
     }
-};
-SkyVerticalTabMediaQueryService = __decorate([
-    Injectable()
-], SkyVerticalTabMediaQueryService);
+}
+SkyVerticalTabMediaQueryService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: SkyVerticalTabMediaQueryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SkyVerticalTabMediaQueryService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: SkyVerticalTabMediaQueryService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: SkyVerticalTabMediaQueryService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return []; } });
 
-let SkyVerticalTabsetAdapterService = class SkyVerticalTabsetAdapterService {
+class SkyVerticalTabsetAdapterService {
     constructor(rendererFactory) {
         this.rendererFactory = rendererFactory;
         this.renderer = this.rendererFactory.createRenderer(undefined, undefined);
@@ -377,15 +398,14 @@ let SkyVerticalTabsetAdapterService = class SkyVerticalTabsetAdapterService {
         }
         this.renderer.addClass(nativeEl, newClass);
     }
-};
-SkyVerticalTabsetAdapterService.ctorParameters = () => [
-    { type: RendererFactory2 }
-];
-SkyVerticalTabsetAdapterService = __decorate([
-    Injectable()
-], SkyVerticalTabsetAdapterService);
+}
+SkyVerticalTabsetAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: SkyVerticalTabsetAdapterService, deps: [{ token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyVerticalTabsetAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: SkyVerticalTabsetAdapterService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: SkyVerticalTabsetAdapterService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i0.RendererFactory2 }]; } });
 
-let SkyVerticalTabComponent = class SkyVerticalTabComponent {
+class SkyVerticalTabComponent {
     constructor(adapterService, changeRef, tabsetService, verticalTabMediaQueryService) {
         this.adapterService = adapterService;
         this.changeRef = changeRef;
@@ -450,6 +470,7 @@ let SkyVerticalTabComponent = class SkyVerticalTabComponent {
     }
     set contentRendered(value) {
         this._contentRendered = value;
+        /* istanbul ignore else */
         if (this._contentRendered) {
             // NOTE: Wrapped in a setTimeout here to ensure that everything has completed rendering.
             setTimeout(() => {
@@ -512,66 +533,55 @@ let SkyVerticalTabComponent = class SkyVerticalTabComponent {
         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);
+}
+SkyVerticalTabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: SkyVerticalTabComponent, deps: [{ token: SkyVerticalTabsetAdapterService }, { token: i0.ChangeDetectorRef }, { token: SkyVerticalTabsetService }, { token: SkyVerticalTabMediaQueryService }], target: i0.ɵɵFactoryTarget.Component });
+SkyVerticalTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: SkyVerticalTabComponent, selector: "sky-vertical-tab", inputs: { active: "active", ariaControls: "ariaControls", ariaInvalid: "ariaInvalid", ariaRequired: "ariaRequired", ariaRole: "ariaRole", disabled: "disabled", errorIndicator: "errorIndicator", tabHeaderCount: "tabHeaderCount", tabHeading: "tabHeading", showTabRightArrow: "showTabRightArrow", tabId: "tabId" }, host: { listeners: { "window:resize": "onWindowResize()" } }, providers: [
+        SkyVerticalTabMediaQueryService,
+        { provide: SkyMediaQueryService, useExisting: SkyVerticalTabMediaQueryService }
+    ], viewQueries: [{ propertyName: "tabContent", first: true, predicate: ["tabContentWrapper"], descendants: true }], ngImport: i0, template: "<a\n  class=\"sky-vertical-tab\"\n  [attr.aria-controls]=\"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-font-deemphasized': 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    <sky-icon\n      *ngIf=\"showTabRightArrow\"\n      class=\"sky-vertical-tab-right-arrow\"\n      icon=\"chevron-right\"\n    >\n    </sky-icon>\n  </div>\n</a>\n\n<div\n  #tabContentWrapper\n>\n  <div\n    class=\"sky-vertical-tab-content-pane\"\n    [ngClass]=\"{'sky-vertical-tab-hidden': !active}\"\n  >\n\n    <ng-content></ng-content>\n\n  <div>\n\n</div>\n\n", styles: [".sky-vertical-tab{cursor:pointer;padding:7px 0 7px 10px;margin:5px 0 5px 10px;display:flex;text-decoration:none}.sky-vertical-tab:not(.sky-deemphasized){color:#212327}.sky-vertical-tab:hover{background-color:#eeeeef}.sky-vertical-tab:focus-visible{outline:thin dotted;outline:-webkit-focus-ring-color auto 5px}.sky-vertical-tab:hover .sky-vertical-tab-right-arrow{color:#979ba2}.sky-vertical-tab-active{background-color:#eeeeef;color:#212327;padding-left:6px;border-left:4px solid #00b4f1}.sky-vertical-tab-hidden{display:none}.sky-vertical-tab-display{display:flex;flex-grow:1}.sky-vertical-tab-heading-error{padding-left:5px}.sky-vertical-tab-count{margin-left:5px}.sky-vertical-tab-disabled{cursor:not-allowed;pointer-events:none}.sky-vertical-tab-right-arrow{padding:3px 10px 0 0;color:#cdcfd2}:host-context(.sky-theme-modern) .sky-vertical-tab{color:#686c73;cursor:pointer;padding:10px 0 10px 10px;margin:10px 0 20px 10px}:host-context(.sky-theme-modern) .sky-vertical-tab:not(.sky-vertical-tab-active):not(:active):hover{color:#212327;background-color:transparent;padding-left:9px;border-left:1px solid #00b4f1}:host-context(.sky-theme-modern) .sky-vertical-tab:not(:active):focus-visible{outline:solid 2px #1870B8;outline-offset:-2px;box-shadow:0 1px 8px #0000004d}:host-context(.sky-theme-modern) .sky-vertical-tab:focus:active:hover{outline:none;background:none}:host-context(.sky-theme-modern) .sky-vertical-tab:active{border-left:3px solid #00b4f1;color:#212327;padding-left:7px}:host-context(.sky-theme-modern) .sky-vertical-tab .sky-vertical-tab-heading-error{padding-left:10px;position:relative;top:-2px}:host-context(.sky-theme-modern) .sky-vertical-tab-active{background:none;color:#212327;padding-left:7px;border-left:3px solid #1870B8}.sky-theme-modern .sky-vertical-tab{color:#686c73;cursor:pointer;padding:10px 0 10px 10px;margin:10px 0 20px 10px}.sky-theme-modern .sky-vertical-tab:not(.sky-vertical-tab-active):not(:active):hover{color:#212327;background-color:transparent;padding-left:9px;border-left:1px solid #00b4f1}.sky-theme-modern .sky-vertical-tab:not(:active):focus-visible{outline:solid 2px #1870B8;outline-offset:-2px;box-shadow:0 1px 8px #0000004d}.sky-theme-modern .sky-vertical-tab:focus:active:hover{outline:none;background:none}.sky-theme-modern .sky-vertical-tab:active{border-left:3px solid #00b4f1;color:#212327;padding-left:7px}.sky-theme-modern .sky-vertical-tab .sky-vertical-tab-heading-error{padding-left:10px;position:relative;top:-2px}.sky-theme-modern .sky-vertical-tab-active{background:none;color:#212327;padding-left:7px;border-left:3px solid #1870B8}\n"], components: [{ type: i4.λ10, selector: "sky-status-indicator", inputs: ["indicatorType", "descriptionType", "customDescription"] }, { type: i4.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: SkyVerticalTabComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-vertical-tab',
+                    templateUrl: './vertical-tab.component.html',
+                    styleUrls: ['./vertical-tab.component.scss'],
+                    providers: [
+                        SkyVerticalTabMediaQueryService,
+                        { provide: SkyMediaQueryService, useExisting: SkyVerticalTabMediaQueryService }
+                    ],
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }], ctorParameters: function () { return [{ type: SkyVerticalTabsetAdapterService }, { type: i0.ChangeDetectorRef }, { type: SkyVerticalTabsetService }, { type: SkyVerticalTabMediaQueryService }]; }, propDecorators: { active: [{
+                type: Input
+            }], ariaControls: [{
+                type: Input
+            }], ariaInvalid: [{
+                type: Input
+            }], ariaRequired: [{
+                type: Input
+            }], ariaRole: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], errorIndicator: [{
+                type: Input
+            }], tabHeaderCount: [{
+                type: Input
+            }], tabHeading: [{
+                type: Input
+            }], showTabRightArrow: [{
+                type: Input
+            }], tabId: [{
+                type: Input
+            }], tabContent: [{
+                type: ViewChild,
+                args: ['tabContentWrapper']
+            }], onWindowResize: [{
+                type: HostListener,
+                args: ['window:resize']
+            }] } });
 
-let SkySectionedFormService = class SkySectionedFormService {
+class SkySectionedFormService {
     constructor() {
         /**
          * @internal
@@ -596,22 +606,24 @@ let SkySectionedFormService = class SkySectionedFormService {
     requiredFieldChanged(isRequired) {
         this.requiredChange.next(isRequired);
     }
-};
-SkySectionedFormService = __decorate([
-    Injectable()
-], SkySectionedFormService);
+}
+SkySectionedFormService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: SkySectionedFormService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SkySectionedFormService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: SkySectionedFormService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: SkySectionedFormService, decorators: [{
+            type: Injectable
+        }] });
 
-let nextId = 0;
+let nextId$1 = 0;
 /**
  * Creates an individual form to display as a section within the sectioned form.
  */
-let SkySectionedFormSectionComponent = class 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.sectionTabId = `sky-sectioned-form-tab-${++nextId$1}`;
+        this.sectionContentId = `sky-sectioned-form-section-${++nextId$1}`;
         this.isMobile = false;
         this._ngUnsubscribe = new Subject();
     }
@@ -640,58 +652,67 @@ let SkySectionedFormSectionComponent = class SkySectionedFormSectionComponent {
         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);
+}
+SkySectionedFormSectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: SkySectionedFormSectionComponent, deps: [{ token: SkySectionedFormService }, { token: SkyVerticalTabsetService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+SkySectionedFormSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: SkySectionedFormSectionComponent, selector: "sky-sectioned-form-section", inputs: { heading: "heading", itemCount: "itemCount", active: "active" }, providers: [SkySectionedFormService], viewQueries: [{ propertyName: "tab", first: true, predicate: SkyVerticalTabComponent, descendants: true }], ngImport: i0, template: "<sky-vertical-tab\n  [active]=\"active\"\n  [ariaControls]=\"sectionContentId\"\n  [ariaInvalid]=\"fieldInvalid\"\n  [ariaRequired]=\"fieldRequired\"\n  [errorIndicator]=\"fieldInvalid\"\n  [ngClass]=\"{\n    'sky-tab-field-required': fieldRequired\n  }\"\n  [showTabRightArrow]=\"true\"\n  [tabHeaderCount]=\"itemCount\"\n  [tabHeading]=\"heading\"\n  [tabId]=\"sectionTabId\">\n  <div\n    [attr.aria-labelledby]=\"ariaLabelledby\"\n    [attr.role]=\"ariaRole\"\n    [id]=\"sectionContentId\"\n    #tabContent>\n    <ng-content></ng-content>\n  </div>\n</sky-vertical-tab>\n", styles: [":host .sky-tab-field-required ::ng-deep .sky-vertical-tab-heading:after{content:\"*\";color:#ef4044;padding-left:5px}\n"], components: [{ type: SkyVerticalTabComponent, selector: "sky-vertical-tab", inputs: ["active", "ariaControls", "ariaInvalid", "ariaRequired", "ariaRole", "disabled", "errorIndicator", "tabHeaderCount", "tabHeading", "showTabRightArrow", "tabId"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: SkySectionedFormSectionComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-sectioned-form-section',
+                    templateUrl: './sectioned-form-section.component.html',
+                    providers: [SkySectionedFormService],
+                    styleUrls: ['./sectioned-form-section.component.scss']
+                }]
+        }], ctorParameters: function () { return [{ type: SkySectionedFormService }, { type: SkyVerticalTabsetService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { heading: [{
+                type: Input
+            }], itemCount: [{
+                type: Input
+            }], active: [{
+                type: Input
+            }], tab: [{
+                type: ViewChild,
+                args: [SkyVerticalTabComponent]
+            }] } });
 
-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" } };
-    }
+/**
+ * NOTICE: DO NOT MODIFY THIS FILE!
+ * The contents of this file were automatically generated by
+ * the 'ng generate @skyux/i18n:lib-resources-module modules/shared/sky-tabs' schematic.
+ * To update this file, simply rerun the command.
+ */
+const RESOURCES = {
+    'EN-US': { "skyux_tab_add": { "message": "Add tab" }, "skyux_tab_close": { "message": "Close {0} tab" }, "skyux_tabs_navigator_next": { "message": "Next" }, "skyux_tabs_navigator_previous": { "message": "Previous" }, "skyux_tab_open": { "message": "Open tab" }, "skyux_vertical_tabs_show_tabs_text": { "message": "Tab list" } },
+};
+class SkyTabsResourcesProvider {
     getString(localeInfo, name) {
-        return getStringForLocale(this.resources, localeInfo.locale, name);
+        return getLibStringForLocale(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);
+}
+/**
+ * Import into any component library module that needs to use resource strings.
+ */
+class SkyTabsResourcesModule {
+}
+SkyTabsResourcesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: SkyTabsResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyTabsResourcesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: SkyTabsResourcesModule, exports: [SkyI18nModule] });
+SkyTabsResourcesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: SkyTabsResourcesModule, providers: [{
+            provide: SKY_LIB_RESOURCES_PROVIDERS,
+            useClass: SkyTabsResourcesProvider,
+            multi: true
+        }], imports: [SkyI18nModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: SkyTabsResourcesModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    exports: [SkyI18nModule],
+                    providers: [{
+                            provide: SKY_LIB_RESOURCES_PROVIDERS,
+                            useClass: SkyTabsResourcesProvider,
+                            multi: true
+                        }]
+                }]
+        }] });
 
-let SkyVerticalTabsetComponent = class SkyVerticalTabsetComponent {
+class SkyVerticalTabsetComponent {
     constructor(adapterService, tabService, resources, changeRef) {
         this.adapterService = adapterService;
         this.tabService = tabService;
@@ -755,6 +776,7 @@ let SkyVerticalTabsetComponent = class SkyVerticalTabsetComponent {
                 .pipe(take(1))
                 .subscribe(resource => {
                 /* sanity check */
+                /* istanbul ignore else */
                 if (!this.showTabsText) {
                     this.showTabsText = resource;
                 }
@@ -769,59 +791,69 @@ let SkyVerticalTabsetComponent = class SkyVerticalTabsetComponent {
         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')
-                ])
+}
+SkyVerticalTabsetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: SkyVerticalTabsetComponent, deps: [{ token: SkyVerticalTabsetAdapterService }, { token: SkyVerticalTabsetService }, { token: i3.SkyLibResourcesService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+SkyVerticalTabsetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: SkyVerticalTabsetComponent, selector: "sky-vertical-tabset", inputs: { showTabsText: "showTabsText", ariaRole: "ariaRole", maintainTabContent: "maintainTabContent" }, outputs: { activeChange: "activeChange" }, providers: [
+        SkyVerticalTabsetService
+    ], viewQueries: [{ propertyName: "tabGroups", first: true, predicate: ["groupContainerWrapper"], descendants: true }, { propertyName: "content", first: true, predicate: ["skySideContent"], descendants: true }, { propertyName: "contentWrapper", first: true, predicate: ["contentContainerWrapper"], descendants: true }], ngImport: i0, template: " <div class=\"sky-vertical-tabset\" (window:resize)=\"tabService.updateContent()\">\n  <div\n    *ngIf=\"maintainTabContent || tabService.tabsVisible()\"\n    #groupContainerWrapper\n    class=\"sky-vertical-tabset-group-container\"\n    [ngClass]=\"{'sky-vertical-tabset-hidden': !tabService.tabsVisible()}\"\n    [attr.role]=\"ariaRole\"\n    [@tabGroupEnter]=\"tabService.animationTabsVisibleState\"\n  >\n    <ng-content></ng-content>\n  </div>\n  <div\n    *ngIf=\"maintainTabContent || tabService.contentVisible()\"\n    class=\"sky-vertical-tabset-content\"\n    [ngClass]=\"{'sky-vertical-tabset-content-hidden': !tabService.contentVisible()}\"\n    [@contentEnter]=\"tabService.animationContentVisibleState\"\n    #contentContainerWrapper\n  >\n    <div #skySideContent></div>\n    <button\n      *ngIf=\"!tabService.tabsVisible()\"\n      (click)=\"tabService.showTabs()\"\n      class=\"sky-btn sky-btn-primary sky-vertical-tabset-show-tabs-btn\"\n    >\n      <sky-icon icon=\"chevron-left\"></sky-icon>\n      {{ showTabsText }}\n    </button>\n  </div>\n</div>\n", styles: [":host .sky-vertical-tabset{display:block;height:auto}:host .sky-vertical-tabset-group-container{border-right:none}:host-context(.sky-responsive-container-xs) .sky-vertical-tabset,:host-context(.sky-responsive-container-sm) .sky-vertical-tabset,:host-context(.sky-responsive-container-md) .sky-vertical-tabset,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset{display:block;height:auto}:host-context(.sky-responsive-container-xs) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-sm) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container{border-right:none}@media (min-width: 768px){:host .sky-vertical-tabset{display:flex;height:100%}:host .sky-vertical-tabset-group-container{border-right:1px solid #cdcfd2}}:host-context(.sky-responsive-container-sm) .sky-vertical-tabset,:host-context(.sky-responsive-container-md) .sky-vertical-tabset,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset{display:flex;height:100%}:host-context(.sky-responsive-container-sm) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,:host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container{border-right:1px solid #cdcfd2}.sky-vertical-tabset-hidden{display:none}.sky-vertical-tabset-content{margin:10px 0 0 10px;flex-basis:75%;overflow-y:auto}.sky-vertical-tabset-content-hidden{display:none}.sky-vertical-tabset-show-tabs-btn{margin-top:10px}.sky-vertical-tabset-group-container{flex-basis:25%;overflow-y:auto}:host-context(sky-modal-content >) .sky-vertical-tabset{margin:-15px}:host-context(.sky-theme-modern) .sky-vertical-tabset-content{margin:15px}@media (min-width: 768px){:host-context(.sky-theme-modern) :host .sky-vertical-tabset-content{margin:20px 30px}:host-context(.sky-theme-modern) :host .sky-vertical-tabset-group-container{border-right:1px solid #d2d2d2}}:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-sm) .sky-vertical-tabset-content,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-md) .sky-vertical-tabset-content,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-lg) .sky-vertical-tabset-content{margin:20px 30px}:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-sm) .sky-vertical-tabset-group-container,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container{border-right:1px solid #d2d2d2}.sky-theme-modern .sky-vertical-tabset-content{margin:15px}@media (min-width: 768px){.sky-theme-modern :host .sky-vertical-tabset-content{margin:20px 30px}.sky-theme-modern :host .sky-vertical-tabset-group-container{border-right:1px solid #d2d2d2}}.sky-theme-modern :host-context(.sky-responsive-container-sm) .sky-vertical-tabset-content,.sky-theme-modern :host-context(.sky-responsive-container-md) .sky-vertical-tabset-content,.sky-theme-modern :host-context(.sky-responsive-container-lg) .sky-vertical-tabset-content{margin:20px 30px}.sky-theme-modern :host-context(.sky-responsive-container-sm) .sky-vertical-tabset-group-container,.sky-theme-modern :host-context(.sky-responsive-container-md) .sky-vertical-tabset-group-container,.sky-theme-modern :host-context(.sky-responsive-container-lg) .sky-vertical-tabset-group-container{border-right:1px solid #d2d2d2}\n"], components: [{ type: i4.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [
+        trigger('tabGroupEnter', [
+            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);
+        ]),
+        trigger('contentEnter', [
+            transition(`${HIDDEN_STATE} => ${VISIBLE_STATE}`, [
+                style({ transform: 'translate(100%)' }),
+                animate('150ms ease-in')
+            ])
+        ])
+    ], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: SkyVerticalTabsetComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-vertical-tabset',
+                    templateUrl: './vertical-tabset.component.html',
+                    styleUrls: ['./vertical-tabset.component.scss'],
+                    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')
+                            ])
+                        ])
+                    ]
+                }]
+        }], ctorParameters: function () { return [{ type: SkyVerticalTabsetAdapterService }, { type: SkyVerticalTabsetService }, { type: i3.SkyLibResourcesService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { showTabsText: [{
+                type: Input
+            }], ariaRole: [{
+                type: Input
+            }], maintainTabContent: [{
+                type: Input
+            }], activeChange: [{
+                type: Output
+            }], tabGroups: [{
+                type: ViewChild,
+                args: ['groupContainerWrapper']
+            }], content: [{
+                type: ViewChild,
+                args: ['skySideContent']
+            }], contentWrapper: [{
+                type: ViewChild,
+                args: ['contentContainerWrapper']
+            }] } });
 
-let SkyVerticalTabsetGroupComponent = class SkyVerticalTabsetGroupComponent {
+class SkyVerticalTabsetGroupComponent {
     constructor(tabService, changeRef) {
         this.tabService = tabService;
         this.changeRef = changeRef;
@@ -876,110 +908,161 @@ let SkyVerticalTabsetGroupComponent = class SkyVerticalTabsetGroupComponent {
     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'
-                    }))
-                ])
+}
+SkyVerticalTabsetGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: SkyVerticalTabsetGroupComponent, deps: [{ token: SkyVerticalTabsetService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+SkyVerticalTabsetGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: SkyVerticalTabsetGroupComponent, selector: "sky-vertical-tabset-group", inputs: { disabled: "disabled", groupHeading: "groupHeading", open: "open" }, queries: [{ propertyName: "tabs", predicate: SkyVerticalTabComponent }], ngImport: i0, template: "<div class=\"sky-vertical-tabset-group\">\n   <!-- [ngClass] includes font classes for both modern and default styles -->\n  <div\n    class=\"sky-vertical-tabset-group-header sky-padding-even-default\"\n    [ngClass]=\"{\n      'sky-vertical-tabset-group-header-sub-open sky-font-emphasized sky-emphasized': subMenuOpen(),\n      'sky-font-deemphasized': disabled,\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-up\"\n        iconType=\"skyux\"\n      >\n      </sky-icon>\n    </button>\n    <button *ngIf=\"open\"\n      class=\"sky-btn sky-btn-icon-borderless sky-vertical-tabset-group-header-chevron\"\n      type=\"button\"\n    >\n      <sky-icon\n        icon=\"chevron-down\"\n        iconType=\"skyux\"\n      >\n      </sky-icon>\n    </button>\n  </ng-container>\n  </div>\n  <div\n    class=\"sky-vertical-tabset-group-content\"\n    *ngIf=\"open\"\n    [@tabSlide]\n  >\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".sky-vertical-tabset-group{border-bottom:1px solid #e2e3e4;margin:5px 0 5px 5px}.sky-vertical-tabset-group-header{cursor:pointer;display:flex;justify-content:space-between}.sky-vertical-tabset-group-header:focus-visible{outline:thin dotted;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}:host-context(.sky-theme-modern) .sky-vertical-tabset-group{border:none;margin:10px 0}:host-context(.sky-theme-modern) .sky-vertical-tabset-group-content{border:none;padding-left:25px}:host-context(.sky-theme-modern) .sky-vertical-tabset-group-header{position:relative}:host-context(.sky-theme-modern) .sky-vertical-tabset-group-header-chevron{position:absolute;top:6px;right:5px}.sky-theme-modern .sky-vertical-tabset-group{border:none;margin:10px 0}.sky-theme-modern .sky-vertical-tabset-group-content{border:none;padding-left:25px}.sky-theme-modern .sky-vertical-tabset-group-header{position:relative}.sky-theme-modern .sky-vertical-tabset-group-header-chevron{position:absolute;top:6px;right:5px}\n"], components: [{ type: i4.λ2, selector: "sky-chevron", inputs: ["direction", "disabled"], outputs: ["directionChange"] }, { type: i4.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4$1.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], 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);
+        ])
+    ], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: SkyVerticalTabsetGroupComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-vertical-tabset-group',
+                    templateUrl: './vertical-tabset-group.component.html',
+                    styleUrls: ['./vertical-tabset-group.component.scss'],
+                    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'
+                                }))
+                            ])
+                        ])
+                    ]
+                }]
+        }], ctorParameters: function () { return [{ type: SkyVerticalTabsetService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { disabled: [{
+                type: Input
+            }], groupHeading: [{
+                type: Input
+            }], open: [{
+                type: Input
+            }], tabs: [{
+                type: ContentChildren,
+                args: [SkyVerticalTabComponent]
+            }] } });
 
-let SkyVerticalTabsetModule = class SkyVerticalTabsetModule {
-};
-SkyVerticalTabsetModule = __decorate([
-    NgModule({
-        declarations: [
-            SkyVerticalTabsetComponent,
-            SkyVerticalTabsetGroupComponent,
-            SkyVerticalTabComponent
-        ],
-        imports: [
+class SkyVerticalTabsetModule {
+}
+SkyVerticalTabsetModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: SkyVerticalTabsetModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyVerticalTabsetModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: SkyVerticalTabsetModule, declarations: [SkyVerticalTabsetComponent,
+        SkyVerticalTabsetGroupComponent,
+        SkyVerticalTabComponent], imports: [CommonModule,
+        SkyChevronModule,
+        SkyIconModule,
+        SkyStatusIndicatorModule,
+        SkyTabsResourcesModule,
+        SkyThemeModule], exports: [SkyVerticalTabsetComponent,
+        SkyVerticalTabsetGroupComponent,
+        SkyVerticalTabComponent] });
+SkyVerticalTabsetModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: SkyVerticalTabsetModule, providers: [
+        SkyVerticalTabsetAdapterService
+    ], imports: [[
             CommonModule,
-            BrowserAnimationsModule,
             SkyChevronModule,
             SkyIconModule,
-            SkyMediaQueryModule,
             SkyStatusIndicatorModule,
             SkyTabsResourcesModule,
             SkyThemeModule
-        ],
-        providers: [
-            SkyVerticalTabsetAdapterService
-        ],
-        exports: [
-            SkyVerticalTabsetComponent,
-            SkyVerticalTabsetGroupComponent,
-            SkyVerticalTabComponent
-        ]
-    })
-], SkyVerticalTabsetModule);
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: SkyVerticalTabsetModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        SkyVerticalTabsetComponent,
+                        SkyVerticalTabsetGroupComponent,
+                        SkyVerticalTabComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        SkyChevronModule,
+                        SkyIconModule,
+                        SkyStatusIndicatorModule,
+                        SkyTabsResourcesModule,
+                        SkyThemeModule
+                    ],
+                    providers: [
+                        SkyVerticalTabsetAdapterService
+                    ],
+                    exports: [
+                        SkyVerticalTabsetComponent,
+                        SkyVerticalTabsetGroupComponent,
+                        SkyVerticalTabComponent
+                    ]
+                }]
+        }] });
 
-let SkySectionedFormModule = class SkySectionedFormModule {
-};
-SkySectionedFormModule = __decorate([
-    NgModule({
-        declarations: [
-            SkySectionedFormComponent,
-            SkySectionedFormSectionComponent
-        ],
-        imports: [
+class SkySectionedFormModule {
+}
+SkySectionedFormModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: SkySectionedFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkySectionedFormModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: SkySectionedFormModule, declarations: [SkySectionedFormComponent,
+        SkySectionedFormSectionComponent], imports: [CommonModule,
+        SkyCheckboxModule,
+        SkyVerticalTabsetModule], exports: [SkySectionedFormComponent,
+        SkySectionedFormSectionComponent] });
+SkySectionedFormModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: SkySectionedFormModule, imports: [[
             CommonModule,
             SkyCheckboxModule,
             SkyVerticalTabsetModule
-        ],
-        exports: [
-            SkySectionedFormComponent,
-            SkySectionedFormSectionComponent
-        ]
-    })
-], SkySectionedFormModule);
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: SkySectionedFormModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        SkySectionedFormComponent,
+                        SkySectionedFormSectionComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        SkyCheckboxModule,
+                        SkyVerticalTabsetModule
+                    ],
+                    exports: [
+                        SkySectionedFormComponent,
+                        SkySectionedFormSectionComponent
+                    ]
+                }]
+        }] });
 
 /**
  * @internal
  */
-let SkyTabButtonComponent = class SkyTabButtonComponent {
+class SkyTabButtonComponent {
     constructor() {
         this.buttonClick = new EventEmitter();
         this.closeClick = new EventEmitter();
@@ -1000,54 +1083,46 @@ let SkyTabButtonComponent = class SkyTabButtonComponent {
         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);
+}
+SkyTabButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: SkyTabButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyTabButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: SkyTabButtonComponent, selector: "sky-tab-button", inputs: { active: "active", ariaControls: "ariaControls", buttonHref: "buttonHref", buttonId: "buttonId", buttonText: "buttonText", buttonTextCount: "buttonTextCount", closeable: "closeable", disabled: "disabled", tabStyle: "tabStyle" }, outputs: { buttonClick: "buttonClick", closeClick: "closeClick" }, ngImport: i0, template: "<div\n  class=\"sky-btn-tab-wrapper\"\n  [ngClass]=\"{\n    'sky-btn-tab-wrapper-selected': active,\n    'sky-btn-tab-wrapper-disabled': disabled\n  }\"\n>\n  <a\n    class=\"sky-btn-tab\"\n    role=\"tab\"\n    [attr.aria-controls]=\"ariaControls\"\n    [attr.aria-disabled]=\"disabled\"\n    [attr.aria-selected]=\"active\"\n    [attr.href]=\"buttonHref\"\n    [id]=\"buttonId\"\n    [ngClass]=\"{\n      'sky-btn-tab-wizard': tabStyle === 'wizard',\n      'sky-btn-tab-selected': active,\n      'sky-btn-tab-disabled': disabled,\n      'sky-tab-btn-closeable': closeable\n    }\"\n    [tabindex]=\"disabled ? '-1' : '0'\"\n    (click)=\"onButtonClick($event)\"\n    (keydown.enter)=\"onButtonEnterKeyDown($event)\"\n  >\n    <span\n      class=\"sky-tab-heading\"\n    >\n      {{ buttonText }}\n      <span *ngIf=\"buttonTextCount !== undefined\"\n        class=\"sky-tab-header-count\"\n      >\n        {{ buttonTextCount }}\n      </span>\n    </span>\n  </a>\n\n  <button *ngIf=\"closeable\"\n    class=\"sky-btn-tab-close\"\n    type=\"button\"\n    [attr.aria-label]=\"'skyux_tab_close' | skyLibResources:buttonText\"\n    [disabled]=\"disabled\"\n    [ngClass]=\"{\n      'sky-btn-tab-close-disabled': disabled\n    }\"\n    (click)=\"onCloseClick($event)\"\n    >\n    <sky-icon\n      icon=\"remove\"\n    ></sky-icon>\n  </button>\n</div>\n", styles: [".sky-btn-tab-wrapper{display:inline-block;position:relative;margin-right:5px}.sky-btn-tab-wrapper .sky-btn-tab-close{position:absolute;top:10px;right:10px;color:#686c73}.sky-btn-tab-wrapper .sky-btn-tab-close:hover{color:#212327;transition:color .15s}.sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:#fff}.sky-tab-btn-closeable{padding-right:43px}:host-context(.sky-theme-modern) .sky-btn-tab-wrapper{margin-right:10px}:host-context(.sky-theme-modern) .sky-btn-tab-wrapper .sky-btn-tab-close{top:12px;right:10px}:host-context(.sky-theme-modern) .sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:#686c73}:host-context(.sky-theme-modern) .sky-tab-btn-closeable{padding-right:44px}.sky-theme-modern .sky-btn-tab-wrapper{margin-right:10px}.sky-theme-modern .sky-btn-tab-wrapper .sky-btn-tab-close{top:12px;right:10px}.sky-theme-modern .sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:#686c73}.sky-theme-modern .sky-tab-btn-closeable{padding-right:44px}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-btn-tab-wrapper .sky-btn-tab-close{color:#eeeeef}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:#eeeeef}.sky-theme-modern.sky-theme-mode-dark .sky-btn-tab-wrapper .sky-btn-tab-close{color:#eeeeef}.sky-theme-modern.sky-theme-mode-dark .sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:#eeeeef}\n"], components: [{ type: i4.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "skyLibResources": i3.SkyLibResourcesPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: SkyTabButtonComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-tab-button',
+                    templateUrl: './tab-button.component.html',
+                    styleUrls: ['./tab-button.component.scss'],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None
+                }]
+        }], propDecorators: { active: [{
+                type: Input
+            }], ariaControls: [{
+                type: Input
+            }], buttonHref: [{
+                type: Input
+            }], buttonId: [{
+                type: Input
+            }], buttonText: [{
+                type: Input
+            }], buttonTextCount: [{
+                type: Input
+            }], closeable: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], tabStyle: [{
+                type: Input
+            }], buttonClick: [{
+                type: Output
+            }], closeClick: [{
+                type: Output
+            }] } });
 
 /**
  * @internal
  */
-let SkyTabsetPermalinkService = class SkyTabsetPermalinkService {
+class SkyTabsetPermalinkService {
     constructor(activatedRoute, location, router) {
         this.activatedRoute = activatedRoute;
         this.location = location;
@@ -1151,20 +1226,17 @@ let SkyTabsetPermalinkService = class SkyTabsetPermalinkService {
         });
         return params;
     }
-};
-SkyTabsetPermalinkService.ctorParameters = () => [
-    { type: ActivatedRoute },
-    { type: Location },
-    { type: Router }
-];
-SkyTabsetPermalinkService = __decorate([
-    Injectable()
-], SkyTabsetPermalinkService);
+}
+SkyTabsetPermalinkService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: SkyTabsetPermalinkService, deps: [{ token: i1$1.ActivatedRoute }, { token: i2.Location }, { token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyTabsetPermalinkService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: SkyTabsetPermalinkService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: SkyTabsetPermalinkService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i1$1.ActivatedRoute }, { type: i2.Location }, { type: i1$1.Router }]; } });
 
 /**
  * @internal
  */
-let SkyTabsetService = class SkyTabsetService {
+class SkyTabsetService {
     constructor() {
         this.currentActiveTabIndex = 0;
         this._activeTabIndex = new BehaviorSubject(0);
@@ -1187,6 +1259,7 @@ let SkyTabsetService = class SkyTabsetService {
         if (value !== undefined &&
             !this.tabIndexesEqual(value, this.currentActiveTabIndex)) {
             this.currentActiveTabIndex = value;
+            /* istanbul ignore else */
             if (config.emitChange) {
                 this._activeTabIndex.next(value);
             }
@@ -1261,13 +1334,15 @@ let SkyTabsetService = class SkyTabsetService {
     isTabIndexActive(tabIndex) {
         return this.tabIndexesEqual(tabIndex, this.currentActiveTabIndex);
     }
-};
-SkyTabsetService = __decorate([
-    Injectable()
-], SkyTabsetService);
+}
+SkyTabsetService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: SkyTabsetService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SkyTabsetService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: SkyTabsetService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: SkyTabsetService, decorators: [{
+            type: Injectable
+        }] });
 
-let nextId$1 = 0;
-let SkyTabComponent = class SkyTabComponent {
+let nextId = 0;
+class SkyTabComponent {
     constructor(changeDetector, permalinkService, tabsetService) {
         this.changeDetector = changeDetector;
         this.permalinkService = permalinkService;
@@ -1281,7 +1356,7 @@ let SkyTabComponent = class SkyTabComponent {
         this._activeChange = new BehaviorSubject(undefined);
         this._stateChange = new BehaviorSubject(undefined);
         this._tabIndexChange = new BehaviorSubject(undefined);
-        const id = nextId$1++;
+        const id = nextId++;
         this.tabPanelId = `sky-tab-${id}`;
         this.tabButtonId = `${this.tabPanelId}-nav-btn`;
     }
@@ -1369,47 +1444,38 @@ let SkyTabComponent = class SkyTabComponent {
         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);
+}
+SkyTabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: SkyTabComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: SkyTabsetPermalinkService }, { token: SkyTabsetService }], target: i0.ɵɵFactoryTarget.Component });
+SkyTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: SkyTabComponent, selector: "sky-tab", inputs: { active: "active", disabled: "disabled", permalinkValue: "permalinkValue", tabHeaderCount: "tabHeaderCount", tabHeading: "tabHeading", tabIndex: "tabIndex" }, outputs: { close: "close" }, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"sky-tab\"\n  role=\"tabpanel\"\n  [attr.aria-labelledby]=\"tabButtonId\"\n  [hidden]=\"!showContent\"\n  [id]=\"tabPanelId\"\n>\n  <ng-content></ng-content>\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: SkyTabComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-tab',
+                    templateUrl: './tab.component.html',
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: SkyTabsetPermalinkService }, { type: SkyTabsetService }]; }, propDecorators: { active: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], permalinkValue: [{
+                type: Input
+            }], tabHeaderCount: [{
+                type: Input
+            }], tabHeading: [{
+                type: Input
+            }], tabIndex: [{
+                type: Input
+            }], close: [{
+                type: Output
+            }] } });
 
 const buttonTypeNext = 'next';
 const buttonTypePrevious = 'previous';
 /**
  * @internal
  */
-let SkyTabsetNavButtonComponent = class SkyTabsetNavButtonComponent {
+class SkyTabsetNavButtonComponent {
     constructor(resourceService, changeDetector) {
         this.resourceService = resourceService;
         this.changeDetector = changeDetector;
@@ -1499,31 +1565,27 @@ let SkyTabsetNavButtonComponent = class SkyTabsetNavButtonComponent {
             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);
+}
+SkyTabsetNavButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: SkyTabsetNavButtonComponent, deps: [{ token: i3.SkyLibResourcesService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+SkyTabsetNavButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: SkyTabsetNavButtonComponent, selector: "sky-tabset-nav-button", inputs: { tabset: "tabset", buttonType: "buttonType", buttonText: "buttonText" }, ngImport: i0, template: "<button\n  class=\"sky-btn sky-btn-default\"\n  type=\"button\"\n  [disabled]=\"disabled\"\n  (click)=\"buttonClick()\"\n>\n  {{ buttonText }}\n</button>\n" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: SkyTabsetNavButtonComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-tabset-nav-button',
+                    templateUrl: './tabset-nav-button.component.html'
+                }]
+        }], ctorParameters: function () { return [{ type: i3.SkyLibResourcesService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { tabset: [{
+                type: Input
+            }], buttonType: [{
+                type: Input
+            }], buttonText: [{
+                type: Input
+            }] } });
 
 /**
  * @internal
  */
-let SkyTabsetAdapterService = class SkyTabsetAdapterService {
+class SkyTabsetAdapterService {
     constructor() {
         this._overflowChange = new BehaviorSubject(false);
     }
@@ -1564,12 +1626,14 @@ let SkyTabsetAdapterService = class SkyTabsetAdapterService {
         const firstTabRect = tabsetEl.querySelector('.sky-tabset-dropdown').getBoundingClientRect();
         return firstTabRect.left - tabsetRect.left;
     }
-};
-SkyTabsetAdapterService = __decorate([
-    Injectable()
-], SkyTabsetAdapterService);
+}
+SkyTabsetAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: SkyTabsetAdapterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SkyTabsetAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: SkyTabsetAdapterService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: SkyTabsetAdapterService, decorators: [{
+            type: Injectable
+        }] });
 
-let SkyTabsetComponent = class SkyTabsetComponent {
+class SkyTabsetComponent {
     constructor(changeDetector, elementRef, adapterService, permalinkService, tabsetService) {
         this.changeDetector = changeDetector;
         this.elementRef = elementRef;
@@ -1910,70 +1974,66 @@ let SkyTabsetComponent = class SkyTabsetComponent {
             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);
+}
+SkyTabsetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: SkyTabsetComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: SkyTabsetAdapterService }, { token: SkyTabsetPermalinkService }, { token: SkyTabsetService }], target: i0.ɵɵFactoryTarget.Component });
+SkyTabsetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: SkyTabsetComponent, selector: "sky-tabset", inputs: { active: "active", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", permalinkId: "permalinkId", tabStyle: "tabStyle" }, outputs: { activeChange: "activeChange", newTab: "newTab", openTab: "openTab", tabIndexesChange: "tabIndexesChange" }, providers: [
+        SkyTabsetAdapterService,
+        SkyTabsetPermalinkService,
+        SkyTabsetService
+    ], queries: [{ propertyName: "tabs", predicate: SkyTabComponent }], ngImport: i0, template: "<div\n  class=\"sky-tabset\"\n  role=\"tablist\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.aria-labelledby]=\"ariaLabelledBy\"\n  [ngClass]=\"'sky-tabset-mode-' + tabDisplayMode + ' sky-tabset-style-' + tabStyle\"\n  (window:resize)=\"onWindowResize()\"\n>\n  <span class=\"sky-tabset-dropdown\">\n    <sky-dropdown *ngIf=\"tabDisplayMode === 'dropdown'\"\n      buttonType=\"tab\"\n    >\n      <sky-dropdown-button>\n        {{ dropdownTriggerButtonText }}\n      </sky-dropdown-button>\n      <sky-dropdown-menu>\n        <sky-dropdown-item *ngFor=\"let tabButton of tabButtons\"\n          class=\"sky-tab-dropdown-menu-item\"\n        >\n          <div\n            class=\"sky-tab-dropdown-item\"\n            [ngClass]=\"{\n              'sky-tab-dropdown-item-selected': tabButton.active\n            }\"\n          >\n            <ng-container *ngTemplateOutlet=\"tabButtonTemplate; context: {\n              $implicit: tabButton\n            }\"></ng-container>\n          </div>\n        </sky-dropdown-item>\n      </sky-dropdown-menu>\n    </sky-dropdown>\n  </span>\n  <span\n    class=\"sky-tabset-tabs\"\n  >\n    <ng-container *ngFor=\"let tabButton of tabButtons\">\n      <ng-container *ngTemplateOutlet=\"tabButtonTemplate; context: {\n        $implicit: tabButton\n      }\"></ng-container>\n    </ng-container>\n  </span>\n  <span\n    class=\"sky-tabset-btns\"\n  >\n    <button *ngIf=\"newTab.observers.length > 0\"\n      class=\"sky-btn sky-btn-icon sky-tabset-btn-new sky-margin-inline-compact\"\n      type=\"button\"\n      [attr.aria-label]=\"'skyux_tab_add' | skyLibResources\"\n      [skyThemeClass]=\"{\n        'sky-margin-inline-sm': 'modern'\n      }\"\n      (click)=\"onNewTabClick()\"\n    >\n      <sky-icon\n        icon=\"plus-circle\"\n        size=\"lg\"\n      >\n      </sky-icon>\n    </button>\n    <button *ngIf=\"openTab.observers.length > 0\"\n      class=\"sky-btn sky-btn-icon sky-tabset-btn-open sky-margin-inline-compact\"\n      type=\"button\"\n      [attr.aria-label]=\"'skyux_tab_open' | skyLibResources\"\n      [skyThemeClass]=\"{\n        'sky-margin-inline-sm': 'modern'\n      }\"\n      (click)=\"onOpenTabClick()\"\n    >\n      <sky-icon\n        icon=\"folder-open-o\"\n        size=\"lg\"\n      >\n      </sky-icon>\n    </button>\n  </span>\n</div>\n<ng-content></ng-content>\n\n<ng-template\n  let-tabButton\n  #tabButtonTemplate\n>\n  <sky-tab-button\n    [active]=\"tabButton.active\"\n    [ariaControls]=\"tabButton.ariaControls\"\n    [buttonHref]=\"tabButton.buttonHref\"\n    [buttonId]=\"tabButton.buttonId\"\n    [buttonText]=\"tabButton.buttonText\"\n    [buttonTextCount]=\"tabButton.buttonTextCount\"\n    [closeable]=\"tabButton.closeable\"\n    [disabled]=\"tabButton.disabled\"\n    [tabStyle]=\"tabStyle\"\n    (buttonClick)=\"onTabButtonClick(tabButton)\"\n    (closeClick)=\"onTabCloseClick(tabButton)\"\n  ></sky-tab-button>\n</ng-template>\n", styles: [".sky-tabset{align-items:center;border-bottom:2px solid #0974a1;display:flex;list-style-type:none;margin:0;overflow:hidden;padding:0 0 0 15px;white-space:nowrap}.sky-tabset.sky-tabset-style-wizard{border-bottom:none;padding-bottom:10px;padding-left:0}.sky-tabset-btns{order:1;padding-left:10px}.sky-tabset-dropdown{order:0;max-width:100%}.sky-tabset-mode-dropdown{line-height:0}.sky-tabset-mode-dropdown .sky-tabset-tabs{visibility:hidden;order:2}.sky-tab-dropdown-menu-item sky-tab-button{display:flex;min-width:300px}.sky-tab-dropdown-menu-item .sky-dropdown-item{margin:0}.sky-tab-dropdown-menu-item .sky-btn-tab-wrapper{width:100%;margin-right:0}.sky-tab-dropdown-menu-item .sky-btn-tab{margin:0;border-radius:0;width:100%;display:flex}.sky-tab-dropdown-menu-item .sky-btn-tab>.sky-tab-heading{flex:1 1 auto}.sky-tab-dropdown-menu-item .sky-btn-tab>.sky-btn-tab-close{flex:0 1 auto}.sky-tabset-tabs{order:0;white-space:nowrap}.sky-tabset-btn-new,.sky-tabset-btn-open{color:#0974a1}.sky-theme-modern .sky-tabset{border-bottom:1px solid #d2d2d2;overflow:visible}.sky-theme-modern .sky-tab-dropdown-menu-item .sky-btn-tab-wrapper{margin-right:0}\n"], components: [{ type: i4$2.λ3, selector: "sky-dropdown", inputs: ["buttonStyle", "buttonType", "disabled", "dismissOnBlur", "label", "horizontalAlignment", "messageStream", "title", "trigger"] }, { type: i4$2.λ2, selector: "sky-dropdown-button" }, { type: i4$2.λ4, selector: "sky-dropdown-menu", inputs: ["ariaLabelledBy", "ariaRole", "useNativeFocus"], outputs: ["menuChanges"] }, { type: i4$2.λ1, selector: "sky-dropdown-item", inputs: ["ariaRole"] }, { type: i4.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { type: SkyTabButtonComponent, selector: "sky-tab-button", inputs: ["active", "ariaControls", "buttonHref", "buttonId", "buttonText", "buttonTextCount", "closeable", "disabled", "tabStyle"], outputs: ["buttonClick", "closeClick"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4$1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }], pipes: { "skyLibResources": i3.SkyLibResourcesPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: SkyTabsetComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-tabset',
+                    styleUrls: ['./tabset.component.scss'],
+                    templateUrl: './tabset.component.html',
+                    providers: [
+                        SkyTabsetAdapterService,
+                        SkyTabsetPermalinkService,
+                        SkyTabsetService
+                    ],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: SkyTabsetAdapterService }, { type: SkyTabsetPermalinkService }, { type: SkyTabsetService }]; }, propDecorators: { active: [{
+                type: Input
+            }], ariaLabel: [{
+                type: Input
+            }], ariaLabelledBy: [{
+                type: Input
+            }], permalinkId: [{
+                type: Input
+            }], tabStyle: [{
+                type: Input
+            }], activeChange: [{
+                type: Output
+            }], newTab: [{
+                type: Output
+            }], openTab: [{
+                type: Output
+            }], tabIndexesChange: [{
+                type: Output
+            }], tabs: [{
+                type: ContentChildren,
+                args: [SkyTabComponent]
+            }] } });
 
-let SkyTabsModule = class SkyTabsModule {
-};
-SkyTabsModule = __decorate([
-    NgModule({
-        declarations: [
-            SkyTabButtonComponent,
-            SkyTabComponent,
-            SkyTabsetComponent,
-            SkyTabsetNavButtonComponent
-        ],
-        imports: [
+class SkyTabsModule {
+}
+SkyTabsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: SkyTabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyTabsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: SkyTabsModule, declarations: [SkyTabButtonComponent,
+        SkyTabComponent,
+        SkyTabsetComponent,
+        SkyTabsetNavButtonComponent], imports: [CommonModule,
+        RouterModule,
+        SkyDropdownModule,
+        SkyI18nModule,
+        SkyIconModule,
+        SkyTabsResourcesModule,
+        SkyThemeModule], exports: [SkyTabComponent,
+        SkyTabsetComponent,
+        SkyTabsetNavButtonComponent] });
+SkyTabsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: SkyTabsModule, imports: [[
             CommonModule,
             RouterModule,
             SkyDropdownModule,
@@ -1981,18 +2041,36 @@ SkyTabsModule = __decorate([
             SkyIconModule,
             SkyTabsResourcesModule,
             SkyThemeModule
-        ],
-        exports: [
-            SkyTabComponent,
-            SkyTabsetComponent,
-            SkyTabsetNavButtonComponent
-        ]
-    })
-], SkyTabsModule);
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: SkyTabsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        SkyTabButtonComponent,
+                        SkyTabComponent,
+                        SkyTabsetComponent,
+                        SkyTabsetNavButtonComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        RouterModule,
+                        SkyDropdownModule,
+                        SkyI18nModule,
+                        SkyIconModule,
+                        SkyTabsResourcesModule,
+                        SkyThemeModule
+                    ],
+                    exports: [
+                        SkyTabComponent,
+                        SkyTabsetComponent,
+                        SkyTabsetNavButtonComponent
+                    ]
+                }]
+        }] });
 
 /**
  * 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 };
+export { SkySectionedFormComponent, SkySectionedFormModule, SkySectionedFormService, SkyTabsModule, SkyVerticalTabsetModule, SkyTabComponent as λ1, SkyTabsetComponent as λ2, SkyTabsetNavButtonComponent as λ3, SkyVerticalTabComponent as λ4, SkySectionedFormSectionComponent as λ5, SkyVerticalTabsetComponent as λ6, SkyVerticalTabsetGroupComponent as λ7 };
 //# sourceMappingURL=skyux-tabs.js.map