@skyux/tabs 8.3.1 → 8.5.0

package/fesm2020/skyux-tabs.mjs

@@ -1,12 +1,12 @@
 import * as i4 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { NgModule, Injectable, Component, ChangeDetectionStrategy, Optional, Input, ViewChild, HostListener, ContentChildren, EventEmitter, Output, ViewEncapsulation, Pipe } from '@angular/core';
+import { NgModule, Injectable, Component, ChangeDetectionStrategy, Optional, Input, ViewChild, HostListener, ContentChildren, EventEmitter, Output, ViewEncapsulation, HostBinding, Pipe, inject } from '@angular/core';
 import { SkyCheckboxModule } from '@skyux/forms';
 import * as i7 from '@skyux/theme';
 import { SkyThemeModule } from '@skyux/theme';
 import * as i1 from '@skyux/core';
-import { SkyMediaBreakpoints, SkyMediaQueryService, SkyIdModule } from '@skyux/core';
+import { SkyMediaBreakpoints, SkyMediaQueryService, SkyIdModule, SkyLayoutHostService } from '@skyux/core';
 import * as i6 from '@skyux/indicators';
 import { SkyIconModule, SkyExpansionIndicatorModule, SkyStatusIndicatorModule } from '@skyux/indicators';
 import * as i3 from '@skyux/i18n';
@@ -1201,7 +1201,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
             type: Injectable
         }] });
 
-var _SkyTabsetService_instances, _SkyTabsetService_activeTabIndex, _SkyTabsetService_focusedTabBtnIndex, _SkyTabsetService_activeTabUnregistered, _SkyTabsetService_tabs, _SkyTabsetService_tabCounter, _SkyTabsetService_isTabIndexActive, _SkyTabsetService_getNextTabArrayIndex, _SkyTabsetService_getPrevTabArrayIndex;
+var _SkyTabsetService_instances, _SkyTabsetService_activeTabIndex, _SkyTabsetService_focusedTabBtnIndex, _SkyTabsetService_activeTabUnregistered, _SkyTabsetService_activeTabLayout, _SkyTabsetService_tabs, _SkyTabsetService_tabCounter, _SkyTabsetService_isTabIndexActive, _SkyTabsetService_getNextTabArrayIndex, _SkyTabsetService_getPrevTabArrayIndex;
 /**
  * @internal
  */
@@ -1215,6 +1215,9 @@ class SkyTabsetService {
     get focusedTabBtnIndex() {
         return __classPrivateFieldGet(this, _SkyTabsetService_focusedTabBtnIndex, "f");
     }
+    get activeTabLayout() {
+        return __classPrivateFieldGet(this, _SkyTabsetService_activeTabLayout, "f");
+    }
     constructor() {
         _SkyTabsetService_instances.add(this);
         this.currentActiveTabIndex = 0;
@@ -1222,6 +1225,7 @@ class SkyTabsetService {
         _SkyTabsetService_activeTabIndex.set(this, void 0);
         _SkyTabsetService_focusedTabBtnIndex.set(this, void 0);
         _SkyTabsetService_activeTabUnregistered.set(this, void 0);
+        _SkyTabsetService_activeTabLayout.set(this, new Subject());
         _SkyTabsetService_tabs.set(this, []);
         _SkyTabsetService_tabCounter.set(this, 0);
         __classPrivateFieldSet(this, _SkyTabsetService_activeTabIndex, new BehaviorSubject(0), "f");
@@ -1232,6 +1236,7 @@ class SkyTabsetService {
         __classPrivateFieldGet(this, _SkyTabsetService_activeTabIndex, "f").complete();
         __classPrivateFieldGet(this, _SkyTabsetService_activeTabUnregistered, "f").complete();
         __classPrivateFieldGet(this, _SkyTabsetService_focusedTabBtnIndex, "f").complete();
+        __classPrivateFieldGet(this, _SkyTabsetService_activeTabLayout, "f").complete();
     }
     /**
      * Sets the active tab by its unique `tabIndex` property.
@@ -1309,6 +1314,9 @@ class SkyTabsetService {
             found.tabIndex = newTabIndex;
         }
     }
+    updateActiveTabLayout(layout) {
+        __classPrivateFieldGet(this, _SkyTabsetService_activeTabLayout, "f").next(layout);
+    }
     /**
      * Unregisters a tab component.
      */
@@ -1364,7 +1372,7 @@ class SkyTabsetService {
         }
     }
 }
-_SkyTabsetService_activeTabIndex = new WeakMap(), _SkyTabsetService_focusedTabBtnIndex = new WeakMap(), _SkyTabsetService_activeTabUnregistered = new WeakMap(), _SkyTabsetService_tabs = new WeakMap(), _SkyTabsetService_tabCounter = new WeakMap(), _SkyTabsetService_instances = new WeakSet(), _SkyTabsetService_isTabIndexActive = function _SkyTabsetService_isTabIndexActive(tabIndex) {
+_SkyTabsetService_activeTabIndex = new WeakMap(), _SkyTabsetService_focusedTabBtnIndex = new WeakMap(), _SkyTabsetService_activeTabUnregistered = new WeakMap(), _SkyTabsetService_activeTabLayout = new WeakMap(), _SkyTabsetService_tabs = new WeakMap(), _SkyTabsetService_tabCounter = new WeakMap(), _SkyTabsetService_instances = new WeakSet(), _SkyTabsetService_isTabIndexActive = function _SkyTabsetService_isTabIndexActive(tabIndex) {
     return this.tabIndexesEqual(tabIndex, this.currentActiveTabIndex);
 }, _SkyTabsetService_getNextTabArrayIndex = function _SkyTabsetService_getNextTabArrayIndex(currentIndex) {
     let nextIndex = currentIndex + 1;
@@ -1658,7 +1666,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
             type: Injectable
         }], ctorParameters: function () { return [{ type: i1$1.ActivatedRoute }, { type: i4.Location }, { type: i1$1.Router }]; } });
 
-var _SkyTabComponent_instances, _SkyTabComponent__active, _SkyTabComponent_activeChange, _SkyTabComponent__permalinkValue, _SkyTabComponent_stateChange, _SkyTabComponent__tabHeading, _SkyTabComponent__tabIndex, _SkyTabComponent_tabIndexChange, _SkyTabComponent_changeDetector, _SkyTabComponent_permalinkService, _SkyTabComponent_tabsetService, _SkyTabComponent_setPermalinkValueOrDefault;
+var _SkyTabComponent_instances, _SkyTabComponent__active, _SkyTabComponent_activeChange, _SkyTabComponent__permalinkValue, _SkyTabComponent_stateChange, _SkyTabComponent__tabHeading, _SkyTabComponent__tabIndex, _SkyTabComponent__layout, _SkyTabComponent_tabIndexChange, _SkyTabComponent_changeDetector, _SkyTabComponent_permalinkService, _SkyTabComponent_tabsetService, _SkyTabComponent_setPermalinkValueOrDefault;
+const LAYOUT_CLASS_PREFIX = 'sky-layout-host-';
+const LAYOUT_DEFAULT = 'none';
 let nextId = 0;
 class SkyTabComponent {
     /**
@@ -1724,6 +1734,24 @@ class SkyTabComponent {
     get tabIndex() {
         return __classPrivateFieldGet(this, _SkyTabComponent__tabIndex, "f");
     }
+    /**
+     * The page layout that corresponds with the top-level component type
+     * used on the page. For laying out custom content, use `auto` to allow
+     * the page contents to expand beyond the bottom of the browser window
+     * or `fit` to constrain the page contents to the available viewport.
+     * @default "auto"
+     */
+    set layout(value) {
+        const layout = value || LAYOUT_DEFAULT;
+        __classPrivateFieldSet(this, _SkyTabComponent__layout, layout, "f");
+        this.cssClass = `${LAYOUT_CLASS_PREFIX}${layout}`;
+        if (this.active) {
+            __classPrivateFieldGet(this, _SkyTabComponent_tabsetService, "f").updateActiveTabLayout(layout);
+        }
+    }
+    get layout() {
+        return __classPrivateFieldGet(this, _SkyTabComponent__layout, "f");
+    }
     /**
      * Alerts the tabset component when this component has changes that need to be reflected in the UI.
      */
@@ -1735,6 +1763,7 @@ class SkyTabComponent {
     }
     constructor(changeDetector, permalinkService, tabsetService) {
         _SkyTabComponent_instances.add(this);
+        this.cssClass = `${LAYOUT_CLASS_PREFIX}${LAYOUT_DEFAULT}`;
         /**
          * Fires when users click the button to close the tab.
          * The close button is added to the tab when you specify a listener for this event.
@@ -1749,6 +1778,7 @@ class SkyTabComponent {
         _SkyTabComponent_stateChange.set(this, void 0);
         _SkyTabComponent__tabHeading.set(this, void 0);
         _SkyTabComponent__tabIndex.set(this, void 0);
+        _SkyTabComponent__layout.set(this, LAYOUT_DEFAULT);
         _SkyTabComponent_tabIndexChange.set(this, void 0);
         _SkyTabComponent_changeDetector.set(this, void 0);
         _SkyTabComponent_permalinkService.set(this, void 0);
@@ -1797,16 +1827,16 @@ class SkyTabComponent {
         return this.close.observers.length > 0;
     }
 }
-_SkyTabComponent__active = new WeakMap(), _SkyTabComponent_activeChange = new WeakMap(), _SkyTabComponent__permalinkValue = new WeakMap(), _SkyTabComponent_stateChange = new WeakMap(), _SkyTabComponent__tabHeading = new WeakMap(), _SkyTabComponent__tabIndex = new WeakMap(), _SkyTabComponent_tabIndexChange = new WeakMap(), _SkyTabComponent_changeDetector = new WeakMap(), _SkyTabComponent_permalinkService = new WeakMap(), _SkyTabComponent_tabsetService = new WeakMap(), _SkyTabComponent_instances = new WeakSet(), _SkyTabComponent_setPermalinkValueOrDefault = function _SkyTabComponent_setPermalinkValueOrDefault() {
+_SkyTabComponent__active = new WeakMap(), _SkyTabComponent_activeChange = new WeakMap(), _SkyTabComponent__permalinkValue = new WeakMap(), _SkyTabComponent_stateChange = new WeakMap(), _SkyTabComponent__tabHeading = new WeakMap(), _SkyTabComponent__tabIndex = new WeakMap(), _SkyTabComponent__layout = new WeakMap(), _SkyTabComponent_tabIndexChange = new WeakMap(), _SkyTabComponent_changeDetector = new WeakMap(), _SkyTabComponent_permalinkService = new WeakMap(), _SkyTabComponent_tabsetService = new WeakMap(), _SkyTabComponent_instances = new WeakSet(), _SkyTabComponent_setPermalinkValueOrDefault = function _SkyTabComponent_setPermalinkValueOrDefault() {
     this.permalinkValueOrDefault =
         __classPrivateFieldGet(this, _SkyTabComponent_permalinkService, "f").urlify(this.permalinkValue) ||
             __classPrivateFieldGet(this, _SkyTabComponent_permalinkService, "f").urlify(this.tabHeading);
 };
 SkyTabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyTabComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: SkyTabsetPermalinkService }, { token: SkyTabsetService }], target: i0.ɵɵFactoryTarget.Component });
-SkyTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SkyTabComponent, selector: "sky-tab", inputs: { active: "active", disabled: "disabled", permalinkValue: "permalinkValue", tabHeaderCount: "tabHeaderCount", tabHeading: "tabHeading", tabIndex: "tabIndex" }, 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 });
+SkyTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SkyTabComponent, selector: "sky-tab", inputs: { active: "active", disabled: "disabled", permalinkValue: "permalinkValue", tabHeaderCount: "tabHeaderCount", tabHeading: "tabHeading", tabIndex: "tabIndex", layout: "layout" }, outputs: { close: "close" }, host: { properties: { "class": "this.cssClass" } }, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"sky-tab\"\n  role=\"tabpanel\"\n  [attr.aria-labelledby]=\"tabButtonId\"\n  [hidden]=\"!showContent\"\n  [id]=\"tabPanelId\"\n>\n  <ng-content></ng-content>\n</div>\n", styles: [":host.sky-layout-host-fit{display:flex;flex-grow:1;position:static}:host.sky-layout-host-fit .sky-tab{flex-grow:1;position:relative}.sky-tab{flex-grow:var(--sky-layout-host-content-flex-grow, 0);overflow:var(--sky-layout-host-content-overflow, visible);padding:var(--sky-layout-host-content-spacing, 0);position:var(--sky-layout-host-content-position, static)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyTabComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-tab', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"sky-tab\"\n  role=\"tabpanel\"\n  [attr.aria-labelledby]=\"tabButtonId\"\n  [hidden]=\"!showContent\"\n  [id]=\"tabPanelId\"\n>\n  <ng-content></ng-content>\n</div>\n" }]
+            args: [{ selector: 'sky-tab', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"sky-tab\"\n  role=\"tabpanel\"\n  [attr.aria-labelledby]=\"tabButtonId\"\n  [hidden]=\"!showContent\"\n  [id]=\"tabPanelId\"\n>\n  <ng-content></ng-content>\n</div>\n", styles: [":host.sky-layout-host-fit{display:flex;flex-grow:1;position:static}:host.sky-layout-host-fit .sky-tab{flex-grow:1;position:relative}.sky-tab{flex-grow:var(--sky-layout-host-content-flex-grow, 0);overflow:var(--sky-layout-host-content-overflow, visible);padding:var(--sky-layout-host-content-spacing, 0);position:var(--sky-layout-host-content-position, static)}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: SkyTabsetPermalinkService }, { type: SkyTabsetService }]; }, propDecorators: { active: [{
                 type: Input
             }], disabled: [{
@@ -1819,6 +1849,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 type: Input
             }], tabIndex: [{
                 type: Input
+            }], layout: [{
+                type: Input
+            }], cssClass: [{
+                type: HostBinding,
+                args: ['class']
             }], close: [{
                 type: Output
             }] } });
@@ -2047,7 +2082,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
             type: Injectable
         }], ctorParameters: function () { return []; } });
 
-var _SkyTabsetComponent_instances, _SkyTabsetComponent_ngUnsubscribe, _SkyTabsetComponent_tabComponentsChangeUnsubscribe, _SkyTabsetComponent_tabComponentsStateChangeUnsubscribe, _SkyTabsetComponent__active, _SkyTabsetComponent__permalinkId, _SkyTabsetComponent__tabs, _SkyTabsetComponent__tabDisplayMode, _SkyTabsetComponent__tabStyle, _SkyTabsetComponent_changeDetector, _SkyTabsetComponent_elementRef, _SkyTabsetComponent_adapterService, _SkyTabsetComponent_permalinkService, _SkyTabsetComponent_tabsetService, _SkyTabsetComponent_getInitialTabIndex, _SkyTabsetComponent_listenActiveIndexChange, _SkyTabsetComponent_listenTabComponentsStateChange, _SkyTabsetComponent_initTabComponents, _SkyTabsetComponent_resetTabComponents, _SkyTabsetComponent_emitTabIndexChange, _SkyTabsetComponent_unsubscribeTabComponentsStateChange, _SkyTabsetComponent_listenTabButtonsOverflowChange, _SkyTabsetComponent_listenLocationPopStateChange, _SkyTabsetComponent_setActiveTabIndexByPermalinkId, _SkyTabsetComponent_getActiveTabIndexByPermalinkId, _SkyTabsetComponent_getActiveTabComponent, _SkyTabsetComponent_createTabButtons, _SkyTabsetComponent_updateTabButtons, _SkyTabsetComponent_updateTabsetComponent;
+var _SkyTabsetComponent_instances, _SkyTabsetComponent_ngUnsubscribe, _SkyTabsetComponent_tabComponentsChangeUnsubscribe, _SkyTabsetComponent_tabComponentsStateChangeUnsubscribe, _SkyTabsetComponent__active, _SkyTabsetComponent__permalinkId, _SkyTabsetComponent__tabs, _SkyTabsetComponent__tabDisplayMode, _SkyTabsetComponent__tabStyle, _SkyTabsetComponent_changeDetector, _SkyTabsetComponent_elementRef, _SkyTabsetComponent_adapterService, _SkyTabsetComponent_permalinkService, _SkyTabsetComponent_tabsetService, _SkyTabsetComponent_layoutHostSvc, _SkyTabsetComponent_getInitialTabIndex, _SkyTabsetComponent_listenActiveIndexChange, _SkyTabsetComponent_updateLayout, _SkyTabsetComponent_listenTabComponentsStateChange, _SkyTabsetComponent_initTabComponents, _SkyTabsetComponent_resetTabComponents, _SkyTabsetComponent_emitTabIndexChange, _SkyTabsetComponent_unsubscribeTabComponentsStateChange, _SkyTabsetComponent_listenTabButtonsOverflowChange, _SkyTabsetComponent_listenLocationPopStateChange, _SkyTabsetComponent_setActiveTabIndexByPermalinkId, _SkyTabsetComponent_getActiveTabIndexByPermalinkId, _SkyTabsetComponent_getActiveTabComponent, _SkyTabsetComponent_createTabButtons, _SkyTabsetComponent_updateTabButtons, _SkyTabsetComponent_updateTabsetComponent;
 class SkyTabsetComponent {
     /**
      * Activates a tab by its `tabIndex` property.
@@ -2151,6 +2186,7 @@ class SkyTabsetComponent {
          * This event only applies when `tabStyle` is `"tabs"`.
          */
         this.tabIndexesChange = new EventEmitter();
+        this.cssClass = 'sky-tabset-layout-none';
         this.dropdownTriggerButtonText = '';
         this.tabButtons = [];
         _SkyTabsetComponent_ngUnsubscribe.set(this, new Subject());
@@ -2166,6 +2202,7 @@ class SkyTabsetComponent {
         _SkyTabsetComponent_adapterService.set(this, void 0);
         _SkyTabsetComponent_permalinkService.set(this, void 0);
         _SkyTabsetComponent_tabsetService.set(this, void 0);
+        _SkyTabsetComponent_layoutHostSvc.set(this, inject(SkyLayoutHostService, { optional: true }));
         __classPrivateFieldSet(this, _SkyTabsetComponent_changeDetector, changeDetector, "f");
         __classPrivateFieldSet(this, _SkyTabsetComponent_elementRef, elementRef, "f");
         __classPrivateFieldSet(this, _SkyTabsetComponent_adapterService, adapterService, "f");
@@ -2187,6 +2224,11 @@ class SkyTabsetComponent {
                 __classPrivateFieldGet(this, _SkyTabsetComponent_tabsetService, "f").activateNearestTab(tab.arrayIndex);
             });
         });
+        __classPrivateFieldGet(this, _SkyTabsetComponent_tabsetService, "f").activeTabLayout
+            .pipe(takeUntil(__classPrivateFieldGet(this, _SkyTabsetComponent_ngUnsubscribe, "f")))
+            .subscribe((layout) => {
+            __classPrivateFieldGet(this, _SkyTabsetComponent_instances, "m", _SkyTabsetComponent_updateLayout).call(this, layout);
+        });
         // Let the tabset render the initial active index before listening for changes.
         setTimeout(() => {
             __classPrivateFieldGet(this, _SkyTabsetComponent_instances, "m", _SkyTabsetComponent_listenTabComponentsStateChange).call(this);
@@ -2233,7 +2275,7 @@ class SkyTabsetComponent {
         __classPrivateFieldGet(this, _SkyTabsetComponent_tabsetService, "f").focusLastOrNearestTabBtn(this.tabButtons);
     }
 }
-_SkyTabsetComponent_ngUnsubscribe = new WeakMap(), _SkyTabsetComponent_tabComponentsChangeUnsubscribe = new WeakMap(), _SkyTabsetComponent_tabComponentsStateChangeUnsubscribe = new WeakMap(), _SkyTabsetComponent__active = new WeakMap(), _SkyTabsetComponent__permalinkId = new WeakMap(), _SkyTabsetComponent__tabs = new WeakMap(), _SkyTabsetComponent__tabDisplayMode = new WeakMap(), _SkyTabsetComponent__tabStyle = new WeakMap(), _SkyTabsetComponent_changeDetector = new WeakMap(), _SkyTabsetComponent_elementRef = new WeakMap(), _SkyTabsetComponent_adapterService = new WeakMap(), _SkyTabsetComponent_permalinkService = new WeakMap(), _SkyTabsetComponent_tabsetService = new WeakMap(), _SkyTabsetComponent_instances = new WeakSet(), _SkyTabsetComponent_getInitialTabIndex = function _SkyTabsetComponent_getInitialTabIndex() {
+_SkyTabsetComponent_ngUnsubscribe = new WeakMap(), _SkyTabsetComponent_tabComponentsChangeUnsubscribe = new WeakMap(), _SkyTabsetComponent_tabComponentsStateChangeUnsubscribe = new WeakMap(), _SkyTabsetComponent__active = new WeakMap(), _SkyTabsetComponent__permalinkId = new WeakMap(), _SkyTabsetComponent__tabs = new WeakMap(), _SkyTabsetComponent__tabDisplayMode = new WeakMap(), _SkyTabsetComponent__tabStyle = new WeakMap(), _SkyTabsetComponent_changeDetector = new WeakMap(), _SkyTabsetComponent_elementRef = new WeakMap(), _SkyTabsetComponent_adapterService = new WeakMap(), _SkyTabsetComponent_permalinkService = new WeakMap(), _SkyTabsetComponent_tabsetService = new WeakMap(), _SkyTabsetComponent_layoutHostSvc = new WeakMap(), _SkyTabsetComponent_instances = new WeakSet(), _SkyTabsetComponent_getInitialTabIndex = function _SkyTabsetComponent_getInitialTabIndex() {
     let activeIndex = __classPrivateFieldGet(this, _SkyTabsetComponent_instances, "m", _SkyTabsetComponent_getActiveTabIndexByPermalinkId).call(this);
     if (activeIndex === undefined) {
         activeIndex = __classPrivateFieldGet(this, _SkyTabsetComponent_instances, "m", _SkyTabsetComponent_getActiveTabComponent).call(this)?.tabIndex;
@@ -2247,7 +2289,16 @@ _SkyTabsetComponent_ngUnsubscribe = new WeakMap(), _SkyTabsetComponent_tabCompon
         .pipe(distinctUntilChanged(), takeUntil(__classPrivateFieldGet(this, _SkyTabsetComponent_ngUnsubscribe, "f")))
         .subscribe((activeIndex) => {
         __classPrivateFieldGet(this, _SkyTabsetComponent_instances, "m", _SkyTabsetComponent_updateTabsetComponent).call(this, activeIndex);
+        const activeTab = __classPrivateFieldGet(this, _SkyTabsetComponent_instances, "m", _SkyTabsetComponent_getActiveTabComponent).call(this);
+        __classPrivateFieldGet(this, _SkyTabsetComponent_instances, "m", _SkyTabsetComponent_updateLayout).call(this, activeTab?.layout);
     });
+}, _SkyTabsetComponent_updateLayout = function _SkyTabsetComponent_updateLayout(layout) {
+    if (__classPrivateFieldGet(this, _SkyTabsetComponent_layoutHostSvc, "f") && layout) {
+        __classPrivateFieldGet(this, _SkyTabsetComponent_layoutHostSvc, "f").setHostLayoutForChild({
+            layout,
+        });
+        this.cssClass = `sky-tabset-layout-${layout}`;
+    }
 }, _SkyTabsetComponent_listenTabComponentsStateChange = function _SkyTabsetComponent_listenTabComponentsStateChange() {
     if (this.tabs) {
         combineLatest(this.tabs.map((tab) => tab.activeChange))
@@ -2403,18 +2454,18 @@ _SkyTabsetComponent_ngUnsubscribe = new WeakMap(), _SkyTabsetComponent_tabCompon
     }
 };
 SkyTabsetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyTabsetComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: SkyTabsetAdapterService }, { token: SkyTabsetPermalinkService }, { token: SkyTabsetService }], target: i0.ɵɵFactoryTarget.Component });
-SkyTabsetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SkyTabsetComponent, selector: "sky-tabset", inputs: { active: "active", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", permalinkId: "permalinkId", tabStyle: "tabStyle" }, outputs: { activeChange: "activeChange", newTab: "newTab", openTab: "openTab", tabIndexesChange: "tabIndexesChange" }, providers: [
+SkyTabsetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SkyTabsetComponent, selector: "sky-tabset", inputs: { active: "active", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", permalinkId: "permalinkId", tabStyle: "tabStyle" }, outputs: { activeChange: "activeChange", newTab: "newTab", openTab: "openTab", tabIndexesChange: "tabIndexesChange" }, host: { properties: { "class": "this.cssClass" } }, providers: [
         SkyTabsetAdapterService,
         SkyTabsetPermalinkService,
         SkyTabsetService,
-    ], queries: [{ propertyName: "tabs", predicate: SkyTabComponent }], ngImport: i0, template: "<div\n  class=\"sky-tabset\"\n  role=\"tablist\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.aria-labelledby]=\"ariaLabelledBy\"\n  [ngClass]=\"\n    'sky-tabset-mode-' + tabDisplayMode + ' sky-tabset-style-' + tabStyle\n  \"\n  (window:resize)=\"onWindowResize()\"\n  (keydown.arrowright)=\"onRightKeyDown()\"\n  (keydown.arrowleft)=\"onLeftKeyDown()\"\n  (keydown.home)=\"onHomeKeyDown()\"\n  (keydown.end)=\"onEndKeyDown()\"\n>\n  <span class=\"sky-tabset-dropdown\">\n    <sky-dropdown *ngIf=\"tabDisplayMode === 'dropdown'\" buttonType=\"tab\">\n      <sky-dropdown-button>\n        {{ dropdownTriggerButtonText }}\n      </sky-dropdown-button>\n      <sky-dropdown-menu>\n        <sky-dropdown-item\n          *ngFor=\"let tabButton of tabButtons\"\n          class=\"sky-tab-dropdown-menu-item\"\n        >\n          <div\n            class=\"sky-tab-dropdown-item\"\n            [ngClass]=\"{\n              'sky-tab-dropdown-item-selected': tabButton.active\n            }\"\n          >\n            <ng-container\n              *ngTemplateOutlet=\"\n                tabButtonTemplate;\n                context: {\n                  $implicit: tabButton\n                }\n              \"\n            ></ng-container>\n          </div>\n        </sky-dropdown-item>\n      </sky-dropdown-menu>\n    </sky-dropdown>\n  </span>\n  <span class=\"sky-tabset-tabs\">\n    <ng-container *ngFor=\"let tabButton of tabButtons\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          tabButtonTemplate;\n          context: {\n            $implicit: tabButton\n          }\n        \"\n      ></ng-container>\n    </ng-container>\n  </span>\n  <span class=\"sky-tabset-btns\">\n    <button\n      *ngIf=\"newTab.observers.length > 0\"\n      class=\"sky-btn sky-btn-icon sky-tabset-btn-new sky-margin-inline-compact\"\n      type=\"button\"\n      [attr.aria-label]=\"'skyux_tab_add' | skyLibResources\"\n      [skyThemeClass]=\"{\n        'sky-margin-inline-sm': 'modern'\n      }\"\n      (click)=\"onNewTabClick()\"\n    >\n      <sky-icon icon=\"plus-circle\" size=\"lg\"> </sky-icon>\n    </button>\n    <button\n      *ngIf=\"openTab.observers.length > 0\"\n      class=\"sky-btn sky-btn-icon sky-tabset-btn-open sky-margin-inline-compact\"\n      type=\"button\"\n      [attr.aria-label]=\"'skyux_tab_open' | skyLibResources\"\n      [skyThemeClass]=\"{\n        'sky-margin-inline-sm': 'modern'\n      }\"\n      (click)=\"onOpenTabClick()\"\n    >\n      <sky-icon icon=\"folder-open-o\" size=\"lg\"> </sky-icon>\n    </button>\n  </span>\n</div>\n<ng-content></ng-content>\n\n<ng-template let-tabButton #tabButtonTemplate>\n  <sky-tab-button\n    [active]=\"tabButton.active\"\n    [ariaControls]=\"tabButton.ariaControls\"\n    [buttonHref]=\"tabButton.buttonHref\"\n    [buttonId]=\"tabButton.buttonId\"\n    [buttonText]=\"tabButton.buttonText\"\n    [buttonTextCount]=\"tabButton.buttonTextCount\"\n    [closeable]=\"tabButton.closeable\"\n    [disabled]=\"tabButton.disabled\"\n    [tabIndex]=\"tabButton.tabIndex\"\n    [tabStyle]=\"tabStyle\"\n    [tabNumber]=\"tabButton.tabNumber\"\n    [totalTabsCount]=\"tabButton.totalTabsCount\"\n    (buttonClick)=\"onTabButtonClick(tabButton)\"\n    (closeClick)=\"onTabCloseClick(tabButton)\"\n  ></sky-tab-button>\n</ng-template>\n", styles: [".sky-tabset{--sky-tabset-margin: 0;align-items:center;border-bottom:2px solid #0974a1;display:flex;list-style-type:none;margin:var(--sky-tabset-margin);overflow:hidden;padding:0 0 0 15px;white-space:nowrap}.sky-tabset.sky-tabset-style-wizard{border-bottom:none;padding-left:0}.sky-modal-content .sky-tabset-style-tabs{--sky-tabset-margin: var( --sky-compat-tabset-tabs-modal-margin, 0 -15px 20px )}.sky-modal-content .sky-tabset-style-wizard{--sky-tabset-margin: var( --sky-compat-tabset-wizard-modal-margin, 0 0 20px )}.sky-tabset-btns{order:1;padding-left:10px}.sky-tabset-dropdown{order:0;max-width:100%}.sky-tabset-mode-dropdown{line-height:0}.sky-tabset-mode-dropdown .sky-tabset-tabs{visibility:hidden;order:2}.sky-tab-dropdown-menu-item sky-tab-button{display:flex;min-width:300px}.sky-tab-dropdown-menu-item .sky-dropdown-item{margin:0}.sky-tab-dropdown-menu-item .sky-btn-tab-wrapper{width:100%;margin-right:0}.sky-tab-dropdown-menu-item .sky-btn-tab{margin:0;border-radius:0;width:100%;display:flex}.sky-tab-dropdown-menu-item .sky-btn-tab>.sky-tab-heading{flex:1 1 auto}.sky-tab-dropdown-menu-item .sky-btn-tab>.sky-btn-tab-close{flex:0 1 auto}.sky-tabset-tabs{order:0;white-space:nowrap}.sky-tabset-btn-new,.sky-tabset-btn-open{color:#0974a1}.sky-theme-modern .sky-modal-content .sky-tabset{--sky-tabset-margin: -10px -30px 30px;padding-left:30px;padding-right:30px}.sky-theme-modern .sky-tabset{border-bottom:1px solid #d2d2d2;overflow:visible}.sky-theme-modern .sky-tab-dropdown-menu-item .sky-btn-tab-wrapper{margin-right:0}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5.λ2, selector: "sky-dropdown-button" }, { kind: "component", type: i5.λ3, selector: "sky-dropdown", inputs: ["buttonStyle", "buttonType", "disabled", "dismissOnBlur", "label", "horizontalAlignment", "messageStream", "title", "trigger"] }, { kind: "component", type: i5.λ1, selector: "sky-dropdown-item", inputs: ["ariaRole"] }, { kind: "component", type: i5.λ4, selector: "sky-dropdown-menu", inputs: ["ariaLabelledBy", "ariaRole", "useNativeFocus"], outputs: ["menuChanges"] }, { kind: "component", type: i6.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i7.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "component", type: SkyTabButtonComponent, selector: "sky-tab-button", inputs: ["active", "ariaControls", "buttonHref", "buttonId", "buttonText", "buttonTextCount", "closeable", "disabled", "tabIndex", "tabNumber", "totalTabsCount", "tabStyle"], outputs: ["buttonClick", "closeClick"] }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    ], queries: [{ propertyName: "tabs", predicate: SkyTabComponent }], ngImport: i0, template: "<div\n  class=\"sky-tabset\"\n  role=\"tablist\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.aria-labelledby]=\"ariaLabelledBy\"\n  [ngClass]=\"\n    'sky-tabset-mode-' + tabDisplayMode + ' sky-tabset-style-' + tabStyle\n  \"\n  (window:resize)=\"onWindowResize()\"\n  (keydown.arrowright)=\"onRightKeyDown()\"\n  (keydown.arrowleft)=\"onLeftKeyDown()\"\n  (keydown.home)=\"onHomeKeyDown()\"\n  (keydown.end)=\"onEndKeyDown()\"\n>\n  <span class=\"sky-tabset-dropdown\">\n    <sky-dropdown *ngIf=\"tabDisplayMode === 'dropdown'\" buttonType=\"tab\">\n      <sky-dropdown-button>\n        {{ dropdownTriggerButtonText }}\n      </sky-dropdown-button>\n      <sky-dropdown-menu>\n        <sky-dropdown-item\n          *ngFor=\"let tabButton of tabButtons\"\n          class=\"sky-tab-dropdown-menu-item\"\n        >\n          <div\n            class=\"sky-tab-dropdown-item\"\n            [ngClass]=\"{\n              'sky-tab-dropdown-item-selected': tabButton.active\n            }\"\n          >\n            <ng-container\n              *ngTemplateOutlet=\"\n                tabButtonTemplate;\n                context: {\n                  $implicit: tabButton\n                }\n              \"\n            ></ng-container>\n          </div>\n        </sky-dropdown-item>\n      </sky-dropdown-menu>\n    </sky-dropdown>\n  </span>\n  <span class=\"sky-tabset-tabs\">\n    <ng-container *ngFor=\"let tabButton of tabButtons\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          tabButtonTemplate;\n          context: {\n            $implicit: tabButton\n          }\n        \"\n      ></ng-container>\n    </ng-container>\n  </span>\n  <span class=\"sky-tabset-btns\">\n    <button\n      *ngIf=\"newTab.observers.length > 0\"\n      class=\"sky-btn sky-btn-icon sky-tabset-btn-new sky-margin-inline-compact\"\n      type=\"button\"\n      [attr.aria-label]=\"'skyux_tab_add' | skyLibResources\"\n      [skyThemeClass]=\"{\n        'sky-margin-inline-sm': 'modern'\n      }\"\n      (click)=\"onNewTabClick()\"\n    >\n      <sky-icon icon=\"plus-circle\" size=\"lg\"> </sky-icon>\n    </button>\n    <button\n      *ngIf=\"openTab.observers.length > 0\"\n      class=\"sky-btn sky-btn-icon sky-tabset-btn-open sky-margin-inline-compact\"\n      type=\"button\"\n      [attr.aria-label]=\"'skyux_tab_open' | skyLibResources\"\n      [skyThemeClass]=\"{\n        'sky-margin-inline-sm': 'modern'\n      }\"\n      (click)=\"onOpenTabClick()\"\n    >\n      <sky-icon icon=\"folder-open-o\" size=\"lg\"> </sky-icon>\n    </button>\n  </span>\n</div>\n<ng-content></ng-content>\n\n<ng-template let-tabButton #tabButtonTemplate>\n  <sky-tab-button\n    [active]=\"tabButton.active\"\n    [ariaControls]=\"tabButton.ariaControls\"\n    [buttonHref]=\"tabButton.buttonHref\"\n    [buttonId]=\"tabButton.buttonId\"\n    [buttonText]=\"tabButton.buttonText\"\n    [buttonTextCount]=\"tabButton.buttonTextCount\"\n    [closeable]=\"tabButton.closeable\"\n    [disabled]=\"tabButton.disabled\"\n    [tabIndex]=\"tabButton.tabIndex\"\n    [tabStyle]=\"tabStyle\"\n    [tabNumber]=\"tabButton.tabNumber\"\n    [totalTabsCount]=\"tabButton.totalTabsCount\"\n    (buttonClick)=\"onTabButtonClick(tabButton)\"\n    (closeClick)=\"onTabCloseClick(tabButton)\"\n  ></sky-tab-button>\n</ng-template>\n", styles: ["sky-tabset.sky-tabset-layout-fit{position:absolute;inset:0;display:flex;flex-direction:column}sky-tabset.sky-tabset-layout-fit .sky-tabset{flex-grow:0}.sky-tabset{--sky-tabset-margin: 0;align-items:center;border-bottom:2px solid #0974a1;display:flex;list-style-type:none;margin:var(--sky-tabset-margin);padding:0 0 0 var(--sky-layout-host-tab-content-spacing, 15px);white-space:nowrap;flex-grow:var(--sky-layout-host-content-flex-grow, 0);overflow:var(--sky-layout-host-content-overflow, hidden);position:var(--sky-layout-host-content-position, static)}.sky-tabset.sky-tabset-style-wizard{border-bottom:none;padding-left:0}.sky-modal-content .sky-tabset-style-tabs{--sky-tabset-margin: var( --sky-compat-tabset-tabs-modal-margin, 0 -15px 20px )}.sky-modal-content .sky-tabset-style-wizard{--sky-tabset-margin: var( --sky-compat-tabset-wizard-modal-margin, 0 0 20px )}.sky-tabset-btns{order:1;padding-left:10px}.sky-tabset-dropdown{order:0;max-width:100%}.sky-tabset-mode-dropdown{line-height:0}.sky-tabset-mode-dropdown .sky-tabset-tabs{visibility:hidden;order:2}.sky-tab-dropdown-menu-item sky-tab-button{display:flex;min-width:300px}.sky-tab-dropdown-menu-item .sky-dropdown-item{margin:0}.sky-tab-dropdown-menu-item .sky-btn-tab-wrapper{width:100%;margin-right:0}.sky-tab-dropdown-menu-item .sky-btn-tab{margin:0;border-radius:0;width:100%;display:flex}.sky-tab-dropdown-menu-item .sky-btn-tab>.sky-tab-heading{flex:1 1 auto}.sky-tab-dropdown-menu-item .sky-btn-tab>.sky-btn-tab-close{flex:0 1 auto}.sky-tabset-tabs{order:0;white-space:nowrap}.sky-tabset-btn-new,.sky-tabset-btn-open{color:#0974a1}.sky-theme-modern .sky-modal-content .sky-tabset{--sky-tabset-margin: -10px -30px 30px;padding-left:30px;padding-right:30px}.sky-theme-modern .sky-tabset{border-bottom:1px solid #d2d2d2;overflow:visible}.sky-theme-modern .sky-tab-dropdown-menu-item .sky-btn-tab-wrapper{margin-right:0}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5.λ2, selector: "sky-dropdown-button" }, { kind: "component", type: i5.λ3, selector: "sky-dropdown", inputs: ["buttonStyle", "buttonType", "disabled", "dismissOnBlur", "label", "horizontalAlignment", "messageStream", "title", "trigger"] }, { kind: "component", type: i5.λ1, selector: "sky-dropdown-item", inputs: ["ariaRole"] }, { kind: "component", type: i5.λ4, selector: "sky-dropdown-menu", inputs: ["ariaLabelledBy", "ariaRole", "useNativeFocus"], outputs: ["menuChanges"] }, { kind: "component", type: i6.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i7.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "component", type: SkyTabButtonComponent, selector: "sky-tab-button", inputs: ["active", "ariaControls", "buttonHref", "buttonId", "buttonText", "buttonTextCount", "closeable", "disabled", "tabIndex", "tabNumber", "totalTabsCount", "tabStyle"], outputs: ["buttonClick", "closeClick"] }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyTabsetComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-tabset', providers: [
                         SkyTabsetAdapterService,
                         SkyTabsetPermalinkService,
                         SkyTabsetService,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"sky-tabset\"\n  role=\"tablist\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.aria-labelledby]=\"ariaLabelledBy\"\n  [ngClass]=\"\n    'sky-tabset-mode-' + tabDisplayMode + ' sky-tabset-style-' + tabStyle\n  \"\n  (window:resize)=\"onWindowResize()\"\n  (keydown.arrowright)=\"onRightKeyDown()\"\n  (keydown.arrowleft)=\"onLeftKeyDown()\"\n  (keydown.home)=\"onHomeKeyDown()\"\n  (keydown.end)=\"onEndKeyDown()\"\n>\n  <span class=\"sky-tabset-dropdown\">\n    <sky-dropdown *ngIf=\"tabDisplayMode === 'dropdown'\" buttonType=\"tab\">\n      <sky-dropdown-button>\n        {{ dropdownTriggerButtonText }}\n      </sky-dropdown-button>\n      <sky-dropdown-menu>\n        <sky-dropdown-item\n          *ngFor=\"let tabButton of tabButtons\"\n          class=\"sky-tab-dropdown-menu-item\"\n        >\n          <div\n            class=\"sky-tab-dropdown-item\"\n            [ngClass]=\"{\n              'sky-tab-dropdown-item-selected': tabButton.active\n            }\"\n          >\n            <ng-container\n              *ngTemplateOutlet=\"\n                tabButtonTemplate;\n                context: {\n                  $implicit: tabButton\n                }\n              \"\n            ></ng-container>\n          </div>\n        </sky-dropdown-item>\n      </sky-dropdown-menu>\n    </sky-dropdown>\n  </span>\n  <span class=\"sky-tabset-tabs\">\n    <ng-container *ngFor=\"let tabButton of tabButtons\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          tabButtonTemplate;\n          context: {\n            $implicit: tabButton\n          }\n        \"\n      ></ng-container>\n    </ng-container>\n  </span>\n  <span class=\"sky-tabset-btns\">\n    <button\n      *ngIf=\"newTab.observers.length > 0\"\n      class=\"sky-btn sky-btn-icon sky-tabset-btn-new sky-margin-inline-compact\"\n      type=\"button\"\n      [attr.aria-label]=\"'skyux_tab_add' | skyLibResources\"\n      [skyThemeClass]=\"{\n        'sky-margin-inline-sm': 'modern'\n      }\"\n      (click)=\"onNewTabClick()\"\n    >\n      <sky-icon icon=\"plus-circle\" size=\"lg\"> </sky-icon>\n    </button>\n    <button\n      *ngIf=\"openTab.observers.length > 0\"\n      class=\"sky-btn sky-btn-icon sky-tabset-btn-open sky-margin-inline-compact\"\n      type=\"button\"\n      [attr.aria-label]=\"'skyux_tab_open' | skyLibResources\"\n      [skyThemeClass]=\"{\n        'sky-margin-inline-sm': 'modern'\n      }\"\n      (click)=\"onOpenTabClick()\"\n    >\n      <sky-icon icon=\"folder-open-o\" size=\"lg\"> </sky-icon>\n    </button>\n  </span>\n</div>\n<ng-content></ng-content>\n\n<ng-template let-tabButton #tabButtonTemplate>\n  <sky-tab-button\n    [active]=\"tabButton.active\"\n    [ariaControls]=\"tabButton.ariaControls\"\n    [buttonHref]=\"tabButton.buttonHref\"\n    [buttonId]=\"tabButton.buttonId\"\n    [buttonText]=\"tabButton.buttonText\"\n    [buttonTextCount]=\"tabButton.buttonTextCount\"\n    [closeable]=\"tabButton.closeable\"\n    [disabled]=\"tabButton.disabled\"\n    [tabIndex]=\"tabButton.tabIndex\"\n    [tabStyle]=\"tabStyle\"\n    [tabNumber]=\"tabButton.tabNumber\"\n    [totalTabsCount]=\"tabButton.totalTabsCount\"\n    (buttonClick)=\"onTabButtonClick(tabButton)\"\n    (closeClick)=\"onTabCloseClick(tabButton)\"\n  ></sky-tab-button>\n</ng-template>\n", styles: [".sky-tabset{--sky-tabset-margin: 0;align-items:center;border-bottom:2px solid #0974a1;display:flex;list-style-type:none;margin:var(--sky-tabset-margin);overflow:hidden;padding:0 0 0 15px;white-space:nowrap}.sky-tabset.sky-tabset-style-wizard{border-bottom:none;padding-left:0}.sky-modal-content .sky-tabset-style-tabs{--sky-tabset-margin: var( --sky-compat-tabset-tabs-modal-margin, 0 -15px 20px )}.sky-modal-content .sky-tabset-style-wizard{--sky-tabset-margin: var( --sky-compat-tabset-wizard-modal-margin, 0 0 20px )}.sky-tabset-btns{order:1;padding-left:10px}.sky-tabset-dropdown{order:0;max-width:100%}.sky-tabset-mode-dropdown{line-height:0}.sky-tabset-mode-dropdown .sky-tabset-tabs{visibility:hidden;order:2}.sky-tab-dropdown-menu-item sky-tab-button{display:flex;min-width:300px}.sky-tab-dropdown-menu-item .sky-dropdown-item{margin:0}.sky-tab-dropdown-menu-item .sky-btn-tab-wrapper{width:100%;margin-right:0}.sky-tab-dropdown-menu-item .sky-btn-tab{margin:0;border-radius:0;width:100%;display:flex}.sky-tab-dropdown-menu-item .sky-btn-tab>.sky-tab-heading{flex:1 1 auto}.sky-tab-dropdown-menu-item .sky-btn-tab>.sky-btn-tab-close{flex:0 1 auto}.sky-tabset-tabs{order:0;white-space:nowrap}.sky-tabset-btn-new,.sky-tabset-btn-open{color:#0974a1}.sky-theme-modern .sky-modal-content .sky-tabset{--sky-tabset-margin: -10px -30px 30px;padding-left:30px;padding-right:30px}.sky-theme-modern .sky-tabset{border-bottom:1px solid #d2d2d2;overflow:visible}.sky-theme-modern .sky-tab-dropdown-menu-item .sky-btn-tab-wrapper{margin-right:0}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"sky-tabset\"\n  role=\"tablist\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.aria-labelledby]=\"ariaLabelledBy\"\n  [ngClass]=\"\n    'sky-tabset-mode-' + tabDisplayMode + ' sky-tabset-style-' + tabStyle\n  \"\n  (window:resize)=\"onWindowResize()\"\n  (keydown.arrowright)=\"onRightKeyDown()\"\n  (keydown.arrowleft)=\"onLeftKeyDown()\"\n  (keydown.home)=\"onHomeKeyDown()\"\n  (keydown.end)=\"onEndKeyDown()\"\n>\n  <span class=\"sky-tabset-dropdown\">\n    <sky-dropdown *ngIf=\"tabDisplayMode === 'dropdown'\" buttonType=\"tab\">\n      <sky-dropdown-button>\n        {{ dropdownTriggerButtonText }}\n      </sky-dropdown-button>\n      <sky-dropdown-menu>\n        <sky-dropdown-item\n          *ngFor=\"let tabButton of tabButtons\"\n          class=\"sky-tab-dropdown-menu-item\"\n        >\n          <div\n            class=\"sky-tab-dropdown-item\"\n            [ngClass]=\"{\n              'sky-tab-dropdown-item-selected': tabButton.active\n            }\"\n          >\n            <ng-container\n              *ngTemplateOutlet=\"\n                tabButtonTemplate;\n                context: {\n                  $implicit: tabButton\n                }\n              \"\n            ></ng-container>\n          </div>\n        </sky-dropdown-item>\n      </sky-dropdown-menu>\n    </sky-dropdown>\n  </span>\n  <span class=\"sky-tabset-tabs\">\n    <ng-container *ngFor=\"let tabButton of tabButtons\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          tabButtonTemplate;\n          context: {\n            $implicit: tabButton\n          }\n        \"\n      ></ng-container>\n    </ng-container>\n  </span>\n  <span class=\"sky-tabset-btns\">\n    <button\n      *ngIf=\"newTab.observers.length > 0\"\n      class=\"sky-btn sky-btn-icon sky-tabset-btn-new sky-margin-inline-compact\"\n      type=\"button\"\n      [attr.aria-label]=\"'skyux_tab_add' | skyLibResources\"\n      [skyThemeClass]=\"{\n        'sky-margin-inline-sm': 'modern'\n      }\"\n      (click)=\"onNewTabClick()\"\n    >\n      <sky-icon icon=\"plus-circle\" size=\"lg\"> </sky-icon>\n    </button>\n    <button\n      *ngIf=\"openTab.observers.length > 0\"\n      class=\"sky-btn sky-btn-icon sky-tabset-btn-open sky-margin-inline-compact\"\n      type=\"button\"\n      [attr.aria-label]=\"'skyux_tab_open' | skyLibResources\"\n      [skyThemeClass]=\"{\n        'sky-margin-inline-sm': 'modern'\n      }\"\n      (click)=\"onOpenTabClick()\"\n    >\n      <sky-icon icon=\"folder-open-o\" size=\"lg\"> </sky-icon>\n    </button>\n  </span>\n</div>\n<ng-content></ng-content>\n\n<ng-template let-tabButton #tabButtonTemplate>\n  <sky-tab-button\n    [active]=\"tabButton.active\"\n    [ariaControls]=\"tabButton.ariaControls\"\n    [buttonHref]=\"tabButton.buttonHref\"\n    [buttonId]=\"tabButton.buttonId\"\n    [buttonText]=\"tabButton.buttonText\"\n    [buttonTextCount]=\"tabButton.buttonTextCount\"\n    [closeable]=\"tabButton.closeable\"\n    [disabled]=\"tabButton.disabled\"\n    [tabIndex]=\"tabButton.tabIndex\"\n    [tabStyle]=\"tabStyle\"\n    [tabNumber]=\"tabButton.tabNumber\"\n    [totalTabsCount]=\"tabButton.totalTabsCount\"\n    (buttonClick)=\"onTabButtonClick(tabButton)\"\n    (closeClick)=\"onTabCloseClick(tabButton)\"\n  ></sky-tab-button>\n</ng-template>\n", styles: ["sky-tabset.sky-tabset-layout-fit{position:absolute;inset:0;display:flex;flex-direction:column}sky-tabset.sky-tabset-layout-fit .sky-tabset{flex-grow:0}.sky-tabset{--sky-tabset-margin: 0;align-items:center;border-bottom:2px solid #0974a1;display:flex;list-style-type:none;margin:var(--sky-tabset-margin);padding:0 0 0 var(--sky-layout-host-tab-content-spacing, 15px);white-space:nowrap;flex-grow:var(--sky-layout-host-content-flex-grow, 0);overflow:var(--sky-layout-host-content-overflow, hidden);position:var(--sky-layout-host-content-position, static)}.sky-tabset.sky-tabset-style-wizard{border-bottom:none;padding-left:0}.sky-modal-content .sky-tabset-style-tabs{--sky-tabset-margin: var( --sky-compat-tabset-tabs-modal-margin, 0 -15px 20px )}.sky-modal-content .sky-tabset-style-wizard{--sky-tabset-margin: var( --sky-compat-tabset-wizard-modal-margin, 0 0 20px )}.sky-tabset-btns{order:1;padding-left:10px}.sky-tabset-dropdown{order:0;max-width:100%}.sky-tabset-mode-dropdown{line-height:0}.sky-tabset-mode-dropdown .sky-tabset-tabs{visibility:hidden;order:2}.sky-tab-dropdown-menu-item sky-tab-button{display:flex;min-width:300px}.sky-tab-dropdown-menu-item .sky-dropdown-item{margin:0}.sky-tab-dropdown-menu-item .sky-btn-tab-wrapper{width:100%;margin-right:0}.sky-tab-dropdown-menu-item .sky-btn-tab{margin:0;border-radius:0;width:100%;display:flex}.sky-tab-dropdown-menu-item .sky-btn-tab>.sky-tab-heading{flex:1 1 auto}.sky-tab-dropdown-menu-item .sky-btn-tab>.sky-btn-tab-close{flex:0 1 auto}.sky-tabset-tabs{order:0;white-space:nowrap}.sky-tabset-btn-new,.sky-tabset-btn-open{color:#0974a1}.sky-theme-modern .sky-modal-content .sky-tabset{--sky-tabset-margin: -10px -30px 30px;padding-left:30px;padding-right:30px}.sky-theme-modern .sky-tabset{border-bottom:1px solid #d2d2d2;overflow:visible}.sky-theme-modern .sky-tab-dropdown-menu-item .sky-btn-tab-wrapper{margin-right:0}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: SkyTabsetAdapterService }, { type: SkyTabsetPermalinkService }, { type: SkyTabsetService }]; }, propDecorators: { active: [{
                 type: Input
             }], ariaLabel: [{
@@ -2436,6 +2487,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
             }], tabs: [{
                 type: ContentChildren,
                 args: [SkyTabComponent]
+            }], cssClass: [{
+                type: HostBinding,
+                args: ['class']
             }] } });
 
 class SkyTabsModule {