@skyux/tabs 8.7.2 → 8.8.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, HostBinding, Pipe, inject } from '@angular/core';
+import { NgModule, Injectable, Component, ChangeDetectionStrategy, Optional, Input, ViewChild, HostListener, ContentChildren, EventEmitter, Output, ViewEncapsulation, inject, HostBinding, Pipe } from '@angular/core';
 import { SkyCheckboxModule } from '@skyux/forms';
 import * as i7 from '@skyux/theme';
 import { SkyThemeModule } from '@skyux/theme';
 import * as i1 from '@skyux/core';
-import { SkyMediaBreakpoints, SkyMediaQueryService, SkyIdModule, SkyLayoutHostService } from '@skyux/core';
+import { SkyMediaBreakpoints, SkyMediaQueryService, SkyIdModule, SkyResizeObserverMediaQueryService, SkyLayoutHostService } from '@skyux/core';
 import * as i6 from '@skyux/indicators';
 import { SkyIconModule, SkyExpansionIndicatorModule, SkyStatusIndicatorModule } from '@skyux/indicators';
 import * as i3 from '@skyux/i18n';
@@ -1666,7 +1666,7 @@ 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__layout, _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__tabElement, _SkyTabComponent_tabIndexChange, _SkyTabComponent_observingTab, _SkyTabComponent_changeDetector, _SkyTabComponent_permalinkService, _SkyTabComponent_tabsetService, _SkyTabComponent_mediaQueryService, _SkyTabComponent_setPermalinkValueOrDefault, _SkyTabComponent_observeTabResize;
 const LAYOUT_CLASS_PREFIX = 'sky-layout-host-';
 const LAYOUT_DEFAULT = 'none';
 let nextId = 0;
@@ -1735,16 +1735,17 @@ class SkyTabComponent {
         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"
+     * The tab layout that applies spacing to the tab container element. Use the layout
+     * that corresponds with the top-level component type used within the tab, or use `fit` to
+     * constrain the tab contents to the available viewport.
+     * Use `none` for custom content that does not adhere to predefined spacing or constraints.
+     * @default "none"
      */
     set layout(value) {
         const layout = value || LAYOUT_DEFAULT;
         __classPrivateFieldSet(this, _SkyTabComponent__layout, layout, "f");
         this.cssClass = `${LAYOUT_CLASS_PREFIX}${layout}`;
+        __classPrivateFieldGet(this, _SkyTabComponent_instances, "m", _SkyTabComponent_observeTabResize).call(this);
         if (this.active) {
             __classPrivateFieldGet(this, _SkyTabComponent_tabsetService, "f").updateActiveTabLayout(layout);
         }
@@ -1761,6 +1762,13 @@ class SkyTabComponent {
     get tabIndexChange() {
         return __classPrivateFieldGet(this, _SkyTabComponent_tabIndexChange, "f");
     }
+    set tabContentWrapper(tabContentWrapper) {
+        __classPrivateFieldSet(this, _SkyTabComponent__tabElement, tabContentWrapper, "f");
+        __classPrivateFieldGet(this, _SkyTabComponent_instances, "m", _SkyTabComponent_observeTabResize).call(this);
+    }
+    get tabContentWrapper() {
+        return __classPrivateFieldGet(this, _SkyTabComponent__tabElement, "f");
+    }
     constructor(changeDetector, permalinkService, tabsetService) {
         _SkyTabComponent_instances.add(this);
         this.cssClass = `${LAYOUT_CLASS_PREFIX}${LAYOUT_DEFAULT}`;
@@ -1779,10 +1787,13 @@ class SkyTabComponent {
         _SkyTabComponent__tabHeading.set(this, void 0);
         _SkyTabComponent__tabIndex.set(this, void 0);
         _SkyTabComponent__layout.set(this, LAYOUT_DEFAULT);
+        _SkyTabComponent__tabElement.set(this, void 0);
         _SkyTabComponent_tabIndexChange.set(this, void 0);
+        _SkyTabComponent_observingTab.set(this, false);
         _SkyTabComponent_changeDetector.set(this, void 0);
         _SkyTabComponent_permalinkService.set(this, void 0);
         _SkyTabComponent_tabsetService.set(this, void 0);
+        _SkyTabComponent_mediaQueryService.set(this, inject(SkyResizeObserverMediaQueryService));
         __classPrivateFieldSet(this, _SkyTabComponent_changeDetector, changeDetector, "f");
         __classPrivateFieldSet(this, _SkyTabComponent_permalinkService, permalinkService, "f");
         __classPrivateFieldSet(this, _SkyTabComponent_tabsetService, tabsetService, "f");
@@ -1801,6 +1812,9 @@ class SkyTabComponent {
             (changes['permalinkValue'] && !changes['permalinkValue'].firstChange)) {
             __classPrivateFieldGet(this, _SkyTabComponent_stateChange, "f").next();
         }
+        if (changes['layout'] && changes['layout'].currentValue === 'none') {
+            __classPrivateFieldGet(this, _SkyTabComponent_mediaQueryService, "f").unobserve();
+        }
     }
     ngOnDestroy() {
         __classPrivateFieldGet(this, _SkyTabComponent_activeChange, "f").complete();
@@ -1809,6 +1823,8 @@ class SkyTabComponent {
         if (this.tabIndex !== undefined) {
             __classPrivateFieldGet(this, _SkyTabComponent_tabsetService, "f").unregisterTab(this.tabIndex);
         }
+        __classPrivateFieldGet(this, _SkyTabComponent_mediaQueryService, "f").unobserve();
+        __classPrivateFieldSet(this, _SkyTabComponent_observingTab, false, "f");
     }
     init() {
         __classPrivateFieldSet(this, _SkyTabComponent__tabIndex, __classPrivateFieldGet(this, _SkyTabComponent_tabsetService, "f").registerTab(this.tabIndex), "f");
@@ -1827,16 +1843,41 @@ 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__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() {
+_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__tabElement = new WeakMap(), _SkyTabComponent_tabIndexChange = new WeakMap(), _SkyTabComponent_observingTab = new WeakMap(), _SkyTabComponent_changeDetector = new WeakMap(), _SkyTabComponent_permalinkService = new WeakMap(), _SkyTabComponent_tabsetService = new WeakMap(), _SkyTabComponent_mediaQueryService = 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_observeTabResize = function _SkyTabComponent_observeTabResize() {
+    if (this.tabContentWrapper) {
+        if (this.layout !== 'none' && !__classPrivateFieldGet(this, _SkyTabComponent_observingTab, "f")) {
+            __classPrivateFieldSet(this, _SkyTabComponent_observingTab, true, "f");
+            __classPrivateFieldGet(this, _SkyTabComponent_mediaQueryService, "f").observe(this.tabContentWrapper, {
+                updateResponsiveClasses: true,
+            });
+        }
+        else if (this.layout === 'none' && __classPrivateFieldGet(this, _SkyTabComponent_observingTab, "f")) {
+            __classPrivateFieldSet(this, _SkyTabComponent_observingTab, false, "f");
+            __classPrivateFieldGet(this, _SkyTabComponent_mediaQueryService, "f").unobserve();
+        }
+    }
 };
 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", 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 });
+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" } }, providers: [
+        SkyResizeObserverMediaQueryService,
+        {
+            provide: SkyMediaQueryService,
+            useExisting: SkyResizeObserverMediaQueryService,
+        },
+    ], viewQueries: [{ propertyName: "tabContentWrapper", first: true, predicate: ["tabContentWrapper"], descendants: true }], 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  #tabContentWrapper\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", 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"] }]
+            args: [{ selector: 'sky-tab', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        SkyResizeObserverMediaQueryService,
+                        {
+                            provide: SkyMediaQueryService,
+                            useExisting: SkyResizeObserverMediaQueryService,
+                        },
+                    ], template: "<div\n  class=\"sky-tab\"\n  role=\"tabpanel\"\n  [attr.aria-labelledby]=\"tabButtonId\"\n  [hidden]=\"!showContent\"\n  [id]=\"tabPanelId\"\n  #tabContentWrapper\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: [{
@@ -1856,6 +1897,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 args: ['class']
             }], close: [{
                 type: Output
+            }], tabContentWrapper: [{
+                type: ViewChild,
+                args: ['tabContentWrapper']
             }] } });
 
 class SkyTabsetNavButtonDisabledPipe {