@skyux/tabs 8.9.0 → 8.10.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, inject, HostBinding, 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, SkyResizeObserverMediaQueryService, SkyLayoutHostService } 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';
@@ -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__tabElement, _SkyTabComponent_tabIndexChange, _SkyTabComponent_observingTab, _SkyTabComponent_changeDetector, _SkyTabComponent_permalinkService, _SkyTabComponent_tabsetService, _SkyTabComponent_mediaQueryService, _SkyTabComponent_setPermalinkValueOrDefault, _SkyTabComponent_observeTabResize;
+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;
@@ -1745,7 +1745,6 @@ class SkyTabComponent {
         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);
         }
@@ -1762,13 +1761,6 @@ 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}`;
@@ -1787,13 +1779,10 @@ 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");
@@ -1812,9 +1801,6 @@ 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();
@@ -1823,8 +1809,6 @@ 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");
@@ -1843,41 +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__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() {
+_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_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" } }, 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 });
+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  #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, 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"] }]
+            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  #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: [{
@@ -1897,9 +1856,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 args: ['class']
             }], close: [{
                 type: Output
-            }], tabContentWrapper: [{
-                type: ViewChild,
-                args: ['tabContentWrapper']
             }] } });
 
 class SkyTabsetNavButtonDisabledPipe {