@skyux/tabs 5.6.2 → 6.0.0-beta.0

package/esm2015/lib/modules/vertical-tabset/vertical-tab-media-query.service.js

@@ -1,72 +0,0 @@
-import { Injectable } from '@angular/core';
-import { SkyMediaBreakpoints } from '@skyux/core';
-import { BehaviorSubject } from 'rxjs';
-import * as i0 from "@angular/core";
-/**
- * @internal
- */
-export class SkyVerticalTabMediaQueryService {
-    constructor() {
-        this.currentSubject = new BehaviorSubject(this.current);
-        this._current = SkyMediaBreakpoints.xs;
-        this.currentSubject.next(this._current);
-    }
-    get current() {
-        return this._current;
-    }
-    subscribe(listener) {
-        return this.currentSubject.subscribe({
-            next: (breakpoints) => {
-                listener(breakpoints);
-            },
-        });
-    }
-    setBreakpointForWidth(width) {
-        let breakpoint;
-        if (this.isWidthWithinBreakpiont(width, SkyMediaBreakpoints.xs)) {
-            breakpoint = SkyMediaBreakpoints.xs;
-        }
-        else if (this.isWidthWithinBreakpiont(width, SkyMediaBreakpoints.sm)) {
-            breakpoint = SkyMediaBreakpoints.sm;
-        }
-        else if (this.isWidthWithinBreakpiont(width, SkyMediaBreakpoints.md)) {
-            breakpoint = SkyMediaBreakpoints.md;
-        }
-        else {
-            breakpoint = SkyMediaBreakpoints.lg;
-        }
-        this._current = breakpoint;
-        this.currentSubject.next(this._current);
-    }
-    isWidthWithinBreakpiont(width, breakpoint) {
-        const xsBreakpointMaxPixels = 767;
-        const smBreakpointMinPixels = 768;
-        const smBreakpointMaxPixels = 991;
-        const mdBreakpointMinPixels = 992;
-        const mdBreakpointMaxPixels = 1199;
-        const lgBreakpointMinPixels = 1200;
-        switch (breakpoint) {
-            case SkyMediaBreakpoints.xs: {
-                return width <= xsBreakpointMaxPixels;
-            }
-            case SkyMediaBreakpoints.sm: {
-                return width >= smBreakpointMinPixels && width <= smBreakpointMaxPixels;
-            }
-            case SkyMediaBreakpoints.md: {
-                return width >= mdBreakpointMinPixels && width <= mdBreakpointMaxPixels;
-            }
-            default: {
-                return width >= lgBreakpointMinPixels;
-            }
-        }
-    }
-    destroy() {
-        this.currentSubject.complete();
-    }
-}
-SkyVerticalTabMediaQueryService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyVerticalTabMediaQueryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-SkyVerticalTabMediaQueryService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyVerticalTabMediaQueryService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyVerticalTabMediaQueryService, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return []; } });
-//# sourceMappingURL=vertical-tab-media-query.service.js.map

package/esm2015/lib/modules/vertical-tabset/vertical-tab-media-query.service.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"vertical-tab-media-query.service.js","sourceRoot":"","sources":["../../../../../../../../libs/components/tabs/src/lib/modules/vertical-tabset/vertical-tab-media-query.service.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,mBAAmB,EAAyB,MAAM,aAAa,CAAC;AAEzE,OAAO,EAAE,eAAe,EAAgB,MAAM,MAAM,CAAC;;AAErD;;GAEG;AAEH,MAAM,OAAO,+BAA+B;IAW1C;QANQ,mBAAc,GAAG,IAAI,eAAe,CAC1C,IAAI,CAAC,OAAO,CACb,CAAC;QAEM,aAAQ,GAAG,mBAAmB,CAAC,EAAE,CAAC;QAGxC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAC1C,CAAC;IAZD,IAAW,OAAO;QAChB,OAAO,IAAI,CAAC,QAAQ,CAAC;IACvB,CAAC;IAYM,SAAS,CAAC,QAA+B;QAC9C,OAAO,IAAI,CAAC,cAAc,CAAC,SAAS,CAAC;YACnC,IAAI,EAAE,CAAC,WAAgC,EAAE,EAAE;gBACzC,QAAQ,CAAC,WAAW,CAAC,CAAC;YACxB,CAAC;SACF,CAAC,CAAC;IACL,CAAC;IAEM,qBAAqB,CAAC,KAAa;QACxC,IAAI,UAA+B,CAAC;QAEpC,IAAI,IAAI,CAAC,uBAAuB,CAAC,KAAK,EAAE,mBAAmB,CAAC,EAAE,CAAC,EAAE;YAC/D,UAAU,GAAG,mBAAmB,CAAC,EAAE,CAAC;SACrC;aAAM,IAAI,IAAI,CAAC,uBAAuB,CAAC,KAAK,EAAE,mBAAmB,CAAC,EAAE,CAAC,EAAE;YACtE,UAAU,GAAG,mBAAmB,CAAC,EAAE,CAAC;SACrC;aAAM,IAAI,IAAI,CAAC,uBAAuB,CAAC,KAAK,EAAE,mBAAmB,CAAC,EAAE,CAAC,EAAE;YACtE,UAAU,GAAG,mBAAmB,CAAC,EAAE,CAAC;SACrC;aAAM;YACL,UAAU,GAAG,mBAAmB,CAAC,EAAE,CAAC;SACrC;QAED,IAAI,CAAC,QAAQ,GAAG,UAAU,CAAC;QAC3B,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAC1C,CAAC;IAEM,uBAAuB,CAC5B,KAAa,EACb,UAA+B;QAE/B,MAAM,qBAAqB,GAAG,GAAG,CAAC;QAClC,MAAM,qBAAqB,GAAG,GAAG,CAAC;QAClC,MAAM,qBAAqB,GAAG,GAAG,CAAC;QAClC,MAAM,qBAAqB,GAAG,GAAG,CAAC;QAClC,MAAM,qBAAqB,GAAG,IAAI,CAAC;QACnC,MAAM,qBAAqB,GAAG,IAAI,CAAC;QAEnC,QAAQ,UAAU,EAAE;YAClB,KAAK,mBAAmB,CAAC,EAAE,CAAC,CAAC;gBAC3B,OAAO,KAAK,IAAI,qBAAqB,CAAC;aACvC;YACD,KAAK,mBAAmB,CAAC,EAAE,CAAC,CAAC;gBAC3B,OAAO,KAAK,IAAI,qBAAqB,IAAI,KAAK,IAAI,qBAAqB,CAAC;aACzE;YACD,KAAK,mBAAmB,CAAC,EAAE,CAAC,CAAC;gBAC3B,OAAO,KAAK,IAAI,qBAAqB,IAAI,KAAK,IAAI,qBAAqB,CAAC;aACzE;YACD,OAAO,CAAC,CAAC;gBACP,OAAO,KAAK,IAAI,qBAAqB,CAAC;aACvC;SACF;IACH,CAAC;IAEM,OAAO;QACZ,IAAI,CAAC,cAAc,CAAC,QAAQ,EAAE,CAAC;IACjC,CAAC;;6HArEU,+BAA+B;iIAA/B,+BAA+B;4FAA/B,+BAA+B;kBAD3C,UAAU","sourcesContent":["import { Injectable } from '@angular/core';\nimport { SkyMediaBreakpoints, SkyMediaQueryListener } from '@skyux/core';\n\nimport { BehaviorSubject, Subscription } from 'rxjs';\n\n/**\n * @internal\n */\n@Injectable()\nexport class SkyVerticalTabMediaQueryService {\n  public get current(): SkyMediaBreakpoints {\n    return this._current;\n  }\n\n  private currentSubject = new BehaviorSubject<SkyMediaBreakpoints>(\n    this.current\n  );\n\n  private _current = SkyMediaBreakpoints.xs;\n\n  constructor() {\n    this.currentSubject.next(this._current);\n  }\n\n  public subscribe(listener: SkyMediaQueryListener): Subscription {\n    return this.currentSubject.subscribe({\n      next: (breakpoints: SkyMediaBreakpoints) => {\n        listener(breakpoints);\n      },\n    });\n  }\n\n  public setBreakpointForWidth(width: number): void {\n    let breakpoint: SkyMediaBreakpoints;\n\n    if (this.isWidthWithinBreakpiont(width, SkyMediaBreakpoints.xs)) {\n      breakpoint = SkyMediaBreakpoints.xs;\n    } else if (this.isWidthWithinBreakpiont(width, SkyMediaBreakpoints.sm)) {\n      breakpoint = SkyMediaBreakpoints.sm;\n    } else if (this.isWidthWithinBreakpiont(width, SkyMediaBreakpoints.md)) {\n      breakpoint = SkyMediaBreakpoints.md;\n    } else {\n      breakpoint = SkyMediaBreakpoints.lg;\n    }\n\n    this._current = breakpoint;\n    this.currentSubject.next(this._current);\n  }\n\n  public isWidthWithinBreakpiont(\n    width: number,\n    breakpoint: SkyMediaBreakpoints\n  ): boolean {\n    const xsBreakpointMaxPixels = 767;\n    const smBreakpointMinPixels = 768;\n    const smBreakpointMaxPixels = 991;\n    const mdBreakpointMinPixels = 992;\n    const mdBreakpointMaxPixels = 1199;\n    const lgBreakpointMinPixels = 1200;\n\n    switch (breakpoint) {\n      case SkyMediaBreakpoints.xs: {\n        return width <= xsBreakpointMaxPixels;\n      }\n      case SkyMediaBreakpoints.sm: {\n        return width >= smBreakpointMinPixels && width <= smBreakpointMaxPixels;\n      }\n      case SkyMediaBreakpoints.md: {\n        return width >= mdBreakpointMinPixels && width <= mdBreakpointMaxPixels;\n      }\n      default: {\n        return width >= lgBreakpointMinPixels;\n      }\n    }\n  }\n\n  public destroy(): void {\n    this.currentSubject.complete();\n  }\n}\n"]}

package/esm2015/lib/modules/vertical-tabset/vertical-tab.component.js

@@ -1,203 +0,0 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, HostListener, Input, ViewChild, } from '@angular/core';
-import { SkyMediaQueryService } from '@skyux/core';
-import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
-import { SkyVerticalTabMediaQueryService } from './vertical-tab-media-query.service';
-import { SkyVerticalTabsetAdapterService } from './vertical-tabset-adapter.service';
-import { SkyVerticalTabsetService } from './vertical-tabset.service';
-import * as i0 from "@angular/core";
-import * as i1 from "./vertical-tabset-adapter.service";
-import * as i2 from "./vertical-tabset.service";
-import * as i3 from "./vertical-tab-media-query.service";
-import * as i4 from "@skyux/indicators";
-import * as i5 from "@angular/common";
-import * as i6 from "@skyux/core";
-let nextId = 0;
-export class SkyVerticalTabComponent {
-    constructor(adapterService, changeRef, tabsetService, verticalTabMediaQueryService) {
-        this.adapterService = adapterService;
-        this.changeRef = changeRef;
-        this.tabsetService = tabsetService;
-        this.verticalTabMediaQueryService = verticalTabMediaQueryService;
-        /**
-         * Indicates whether the tab is active when the tabset loads.
-         */
-        this.active = false;
-        /**
-         * Indicates whether to disable the tab.
-         */
-        this.disabled = false;
-        /**
-         * Indicates whether to indicate that the tab has an error.
-         * @internal This is used for sectioned forms and is not currently a supported design for pure vertical tabs.
-         */
-        this.errorIndicator = false;
-        /**
-         * Specifies an ID for the tab.
-         * @deprecated Now that the vertical tabs provide aria labels automatically, this input is no longer necessary.
-         */
-        this.tabId = `sky-vertical-tab-${++nextId}`;
-        this.isMobile = false;
-        this._contentRendered = false;
-        this._mobileSubscription = new Subject();
-        this._ngUnsubscribe = new Subject();
-        this._showTabRightArrow = false;
-    }
-    /**
-     * Specifies an ARIA role for the vertical tab
-     * [to support accessibility](https://developer.blackbaud.com/skyux/learn/accessibility)
-     * by indicating how the tab functions and what it controls. For information about how
-     * an ARIA role indicates what an item represents on a web page, see the
-     * [WAI-ARIA roles model](https://www.w3.org/WAI/PF/aria/roles).
-     * @default "tab"
-     * @deprecated Any other value than `tab` could lead to a poor user experience for users with assistive technology.
-     * In the next major version, this property will be automatically set to `tab`.
-     */
-    get ariaRole() {
-        if (this.isMobile) {
-            return undefined;
-        }
-        return this._ariaRole || 'tab';
-    }
-    set ariaRole(value) {
-        this._ariaRole = value;
-    }
-    /**
-     * Indicates whether to display a chevron-right icon in the righthand side of the tab.
-     * @internal
-     */
-    get showTabRightArrow() {
-        return this._showTabRightArrow && this.tabsetService.isMobile();
-    }
-    set showTabRightArrow(value) {
-        this._showTabRightArrow = value;
-    }
-    set contentRendered(value) {
-        this._contentRendered = value;
-        /* istanbul ignore else */
-        if (this._contentRendered) {
-            // NOTE: Wrapped in a setTimeout here to ensure that everything has completed rendering.
-            setTimeout(() => {
-                this.updateBreakpointAndResponsiveClass(this.adapterService.getWidth(this.tabContent));
-            });
-        }
-    }
-    get contentRendered() {
-        return this._contentRendered;
-    }
-    ngOnInit() {
-        this.isMobile = this.tabsetService.isMobile();
-        this.changeRef.markForCheck();
-        this.tabsetService.switchingMobile.subscribe((mobile) => {
-            this.isMobile = mobile;
-            this.changeRef.markForCheck();
-        });
-        // Update the breakpoint and responsive class here just as a sanity check since we can not
-        // watch for element resizing.
-        this.tabsetService.indexChanged
-            .pipe(takeUntil(this._ngUnsubscribe))
-            .subscribe((index) => {
-            if (this.index === index && this.contentRendered) {
-                this.updateBreakpointAndResponsiveClass(this.adapterService.getWidth(this.tabContent));
-            }
-        });
-        this.tabsetService.addTab(this);
-    }
-    ngOnDestroy() {
-        this._mobileSubscription.unsubscribe();
-        this._ngUnsubscribe.next();
-        this._ngUnsubscribe.complete();
-        this.tabsetService.destroyTab(this);
-    }
-    tabIndex() {
-        if (!this.disabled) {
-            return 0;
-        }
-        else {
-            return -1;
-        }
-    }
-    activateTab() {
-        if (!this.disabled) {
-            this.active = true;
-            this.tabsetService.activateTab(this);
-            this.changeRef.markForCheck();
-        }
-    }
-    onTabButtonKeyUp(event) {
-        /*istanbul ignore else */
-        if (event.key) {
-            switch (event.key.toUpperCase()) {
-                case ' ':
-                case 'ENTER':
-                    this.activateTab();
-                    event.stopPropagation();
-                    break;
-                /* istanbul ignore next */
-                default:
-                    break;
-            }
-        }
-    }
-    onWindowResize() {
-        this.updateBreakpointAndResponsiveClass(this.adapterService.getWidth(this.tabContent));
-    }
-    tabDeactivated() {
-        this.changeRef.markForCheck();
-    }
-    updateBreakpointAndResponsiveClass(width) {
-        this.verticalTabMediaQueryService.setBreakpointForWidth(width);
-        const newBreakpiont = this.verticalTabMediaQueryService.current;
-        this.adapterService.setResponsiveClass(this.tabContent, newBreakpiont);
-        this.changeRef.markForCheck();
-    }
-}
-SkyVerticalTabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyVerticalTabComponent, deps: [{ token: i1.SkyVerticalTabsetAdapterService }, { token: i0.ChangeDetectorRef }, { token: i2.SkyVerticalTabsetService }, { token: i3.SkyVerticalTabMediaQueryService }], target: i0.ɵɵFactoryTarget.Component });
-SkyVerticalTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyVerticalTabComponent, selector: "sky-vertical-tab", inputs: { active: "active", ariaControls: "ariaControls", 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]=\"isMobile ? null : ariaControls || tabContentPane.id\"\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)=\"onTabButtonKeyUp($event)\"\n>\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      >\n        ({{ tabHeaderCount }})\n      </span>\n    </div>\n    <sky-status-indicator\n      *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 #tabContentWrapper>\n  <div\n    class=\"sky-vertical-tab-content-pane\"\n    role=\"tabpanel\"\n    tabindex=\"0\"\n    skyId\n    [attr.aria-labelledby]=\"tabId\"\n    [ngClass]=\"{ 'sky-vertical-tab-hidden': !active }\"\n    #tabContentPane\n  >\n    <ng-content></ng-content>\n\n    <div></div>\n  </div>\n</div>\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: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.λ2, selector: "[skyId]", exportAs: ["skyId"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", 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: i1.SkyVerticalTabsetAdapterService }, { type: i0.ChangeDetectorRef }, { type: i2.SkyVerticalTabsetService }, { type: i3.SkyVerticalTabMediaQueryService }]; }, propDecorators: { active: [{
-                type: Input
-            }], ariaControls: [{
-                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']
-            }] } });
-//# sourceMappingURL=vertical-tab.component.js.map

package/esm2015/lib/modules/vertical-tabset/vertical-tab.component.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"vertical-tab.component.js","sourceRoot":"","sources":["../../../../../../../../libs/components/tabs/src/lib/modules/vertical-tabset/vertical-tab.component.ts","../../../../../../../../libs/components/tabs/src/lib/modules/vertical-tabset/vertical-tab.component.html"],"names":[],"mappings":"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","sourcesContent":["import {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  ElementRef,\n  HostListener,\n  Input,\n  OnDestroy,\n  OnInit,\n  ViewChild,\n} from '@angular/core';\nimport { SkyMediaQueryService } from '@skyux/core';\n\nimport { Subject } from 'rxjs';\nimport { takeUntil } from 'rxjs/operators';\n\nimport { SkyVerticalTabMediaQueryService } from './vertical-tab-media-query.service';\nimport { SkyVerticalTabsetAdapterService } from './vertical-tabset-adapter.service';\nimport { SkyVerticalTabsetService } from './vertical-tabset.service';\n\nlet nextId = 0;\n\n@Component({\n  selector: 'sky-vertical-tab',\n  templateUrl: './vertical-tab.component.html',\n  styleUrls: ['./vertical-tab.component.scss'],\n  providers: [\n    SkyVerticalTabMediaQueryService,\n    {\n      provide: SkyMediaQueryService,\n      useExisting: SkyVerticalTabMediaQueryService,\n    },\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SkyVerticalTabComponent implements OnInit, OnDestroy {\n  /**\n   * Indicates whether the tab is active when the tabset loads.\n   */\n  @Input()\n  public active = false;\n\n  /**\n   * Specifies the HTML element ID (without the leading `#`) of the element that contains\n   * the content that the vertical tab displays, which corresponds to the `tabId`. This property\n   * [supports accessibility rules for disclosures](https://www.w3.org/TR/wai-aria-practices-1.1/#disclosure).\n   * @deprecated Now that the vertical tabs provide aria labels automatically, this input is no longer necessary.\n   */\n  @Input()\n  public ariaControls: string;\n\n  /**\n   * Specifies an ARIA role for the vertical tab\n   * [to support accessibility](https://developer.blackbaud.com/skyux/learn/accessibility)\n   * by indicating how the tab functions and what it controls. For information about how\n   * an ARIA role indicates what an item represents on a web page, see the\n   * [WAI-ARIA roles model](https://www.w3.org/WAI/PF/aria/roles).\n   * @default \"tab\"\n   * @deprecated Any other value than `tab` could lead to a poor user experience for users with assistive technology.\n   * In the next major version, this property will be automatically set to `tab`.\n   */\n  @Input()\n  public get ariaRole(): string {\n    if (this.isMobile) {\n      return undefined;\n    }\n    return this._ariaRole || 'tab';\n  }\n  public set ariaRole(value: string) {\n    this._ariaRole = value;\n  }\n\n  /**\n   * Indicates whether to disable the tab.\n   */\n  @Input()\n  public disabled = false;\n\n  /**\n   * Indicates whether to indicate that the tab has an error.\n   * @internal This is used for sectioned forms and is not currently a supported design for pure vertical tabs.\n   */\n  @Input()\n  public errorIndicator = false;\n\n  /**\n   * Displays an item count alongside the tab header to indicate how many list items the tab contains.\n   */\n  @Input()\n  public tabHeaderCount: number;\n\n  /**\n   * Specifies the tab header.\n   * @required\n   */\n  @Input()\n  public tabHeading: string;\n\n  /**\n   * Indicates whether to display a chevron-right icon in the righthand side of the tab.\n   * @internal\n   */\n  @Input()\n  public get showTabRightArrow() {\n    return this._showTabRightArrow && this.tabsetService.isMobile();\n  }\n\n  public set showTabRightArrow(value: boolean) {\n    this._showTabRightArrow = value;\n  }\n\n  /**\n   * Specifies an ID for the tab.\n   * @deprecated Now that the vertical tabs provide aria labels automatically, this input is no longer necessary.\n   */\n  @Input()\n  public tabId = `sky-vertical-tab-${++nextId}`;\n\n  public set contentRendered(value: boolean) {\n    this._contentRendered = value;\n\n    /* istanbul ignore else */\n    if (this._contentRendered) {\n      // NOTE: Wrapped in a setTimeout here to ensure that everything has completed rendering.\n      setTimeout(() => {\n        this.updateBreakpointAndResponsiveClass(\n          this.adapterService.getWidth(this.tabContent)\n        );\n      });\n    }\n  }\n\n  public get contentRendered(): boolean {\n    return this._contentRendered;\n  }\n\n  public index: number;\n\n  public isMobile = false;\n\n  @ViewChild('tabContentWrapper')\n  public tabContent: ElementRef;\n\n  private _ariaRole: string;\n\n  private _contentRendered = false;\n\n  private _mobileSubscription = new Subject();\n\n  private _ngUnsubscribe = new Subject();\n\n  private _showTabRightArrow = false;\n\n  constructor(\n    private adapterService: SkyVerticalTabsetAdapterService,\n    private changeRef: ChangeDetectorRef,\n    private tabsetService: SkyVerticalTabsetService,\n    private verticalTabMediaQueryService: SkyVerticalTabMediaQueryService\n  ) {}\n\n  public ngOnInit(): void {\n    this.isMobile = this.tabsetService.isMobile();\n    this.changeRef.markForCheck();\n\n    this.tabsetService.switchingMobile.subscribe((mobile: boolean) => {\n      this.isMobile = mobile;\n      this.changeRef.markForCheck();\n    });\n\n    // Update the breakpoint and responsive class here just as a sanity check since we can not\n    // watch for element resizing.\n    this.tabsetService.indexChanged\n      .pipe(takeUntil(this._ngUnsubscribe))\n      .subscribe((index) => {\n        if (this.index === index && this.contentRendered) {\n          this.updateBreakpointAndResponsiveClass(\n            this.adapterService.getWidth(this.tabContent)\n          );\n        }\n      });\n\n    this.tabsetService.addTab(this);\n  }\n\n  public ngOnDestroy(): void {\n    this._mobileSubscription.unsubscribe();\n    this._ngUnsubscribe.next();\n    this._ngUnsubscribe.complete();\n    this.tabsetService.destroyTab(this);\n  }\n\n  public tabIndex(): number {\n    if (!this.disabled) {\n      return 0;\n    } else {\n      return -1;\n    }\n  }\n\n  public activateTab(): void {\n    if (!this.disabled) {\n      this.active = true;\n      this.tabsetService.activateTab(this);\n\n      this.changeRef.markForCheck();\n    }\n  }\n\n  public onTabButtonKeyUp(event: KeyboardEvent): void {\n    /*istanbul ignore else */\n    if (event.key) {\n      switch (event.key.toUpperCase()) {\n        case ' ':\n        case 'ENTER':\n          this.activateTab();\n          event.stopPropagation();\n          break;\n        /* istanbul ignore next */\n        default:\n          break;\n      }\n    }\n  }\n\n  @HostListener('window:resize')\n  public onWindowResize(): void {\n    this.updateBreakpointAndResponsiveClass(\n      this.adapterService.getWidth(this.tabContent)\n    );\n  }\n\n  public tabDeactivated(): void {\n    this.changeRef.markForCheck();\n  }\n\n  private updateBreakpointAndResponsiveClass(width: number): void {\n    this.verticalTabMediaQueryService.setBreakpointForWidth(width);\n\n    const newBreakpiont = this.verticalTabMediaQueryService.current;\n\n    this.adapterService.setResponsiveClass(this.tabContent, newBreakpiont);\n\n    this.changeRef.markForCheck();\n  }\n}\n","<a\n  class=\"sky-vertical-tab\"\n  [attr.aria-controls]=\"isMobile ? null : ariaControls || tabContentPane.id\"\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)=\"onTabButtonKeyUp($event)\"\n>\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      >\n        ({{ tabHeaderCount }})\n      </span>\n    </div>\n    <sky-status-indicator\n      *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 #tabContentWrapper>\n  <div\n    class=\"sky-vertical-tab-content-pane\"\n    role=\"tabpanel\"\n    tabindex=\"0\"\n    skyId\n    [attr.aria-labelledby]=\"tabId\"\n    [ngClass]=\"{ 'sky-vertical-tab-hidden': !active }\"\n    #tabContentPane\n  >\n    <ng-content></ng-content>\n\n    <div></div>\n  </div>\n</div>\n"]}

package/esm2015/lib/modules/vertical-tabset/vertical-tabset-adapter.service.js

@@ -1,48 +0,0 @@
-import { Injectable, RendererFactory2, } from '@angular/core';
-import { SkyMediaBreakpoints } from '@skyux/core';
-import * as i0 from "@angular/core";
-export class SkyVerticalTabsetAdapterService {
-    constructor(rendererFactory) {
-        this.rendererFactory = rendererFactory;
-        this.renderer = this.rendererFactory.createRenderer(undefined, undefined);
-    }
-    getWidth(elementRef) {
-        return elementRef.nativeElement.clientWidth;
-    }
-    scrollToContentTop(element) {
-        element.nativeElement.scrollTop = 0;
-    }
-    setResponsiveClass(element, breakpoint) {
-        const nativeEl = element.nativeElement;
-        this.renderer.removeClass(nativeEl, 'sky-responsive-container-xs');
-        this.renderer.removeClass(nativeEl, 'sky-responsive-container-sm');
-        this.renderer.removeClass(nativeEl, 'sky-responsive-container-md');
-        this.renderer.removeClass(nativeEl, 'sky-responsive-container-lg');
-        let newClass;
-        switch (breakpoint) {
-            case SkyMediaBreakpoints.xs: {
-                newClass = 'sky-responsive-container-xs';
-                break;
-            }
-            case SkyMediaBreakpoints.sm: {
-                newClass = 'sky-responsive-container-sm';
-                break;
-            }
-            case SkyMediaBreakpoints.md: {
-                newClass = 'sky-responsive-container-md';
-                break;
-            }
-            default: {
-                newClass = 'sky-responsive-container-lg';
-                break;
-            }
-        }
-        this.renderer.addClass(nativeEl, newClass);
-    }
-}
-SkyVerticalTabsetAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyVerticalTabsetAdapterService, deps: [{ token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable });
-SkyVerticalTabsetAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyVerticalTabsetAdapterService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyVerticalTabsetAdapterService, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: i0.RendererFactory2 }]; } });
-//# sourceMappingURL=vertical-tabset-adapter.service.js.map

package/esm2015/lib/modules/vertical-tabset/vertical-tabset-adapter.service.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"vertical-tabset-adapter.service.js","sourceRoot":"","sources":["../../../../../../../../libs/components/tabs/src/lib/modules/vertical-tabset/vertical-tabset-adapter.service.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,UAAU,EAEV,gBAAgB,GACjB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;;AAGlD,MAAM,OAAO,+BAA+B;IAG1C,YAAoB,eAAiC;QAAjC,oBAAe,GAAf,eAAe,CAAkB;QACnD,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,eAAe,CAAC,cAAc,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;IAC5E,CAAC;IAEM,QAAQ,CAAC,UAAsB;QACpC,OAAO,UAAU,CAAC,aAAa,CAAC,WAAW,CAAC;IAC9C,CAAC;IAEM,kBAAkB,CAAC,OAAmB;QAC3C,OAAO,CAAC,aAAa,CAAC,SAAS,GAAG,CAAC,CAAC;IACtC,CAAC;IAEM,kBAAkB,CACvB,OAAmB,EACnB,UAA+B;QAE/B,MAAM,QAAQ,GAAgB,OAAO,CAAC,aAAa,CAAC;QAEpD,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,QAAQ,EAAE,6BAA6B,CAAC,CAAC;QACnE,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,QAAQ,EAAE,6BAA6B,CAAC,CAAC;QACnE,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,QAAQ,EAAE,6BAA6B,CAAC,CAAC;QACnE,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,QAAQ,EAAE,6BAA6B,CAAC,CAAC;QAEnE,IAAI,QAAgB,CAAC;QAErB,QAAQ,UAAU,EAAE;YAClB,KAAK,mBAAmB,CAAC,EAAE,CAAC,CAAC;gBAC3B,QAAQ,GAAG,6BAA6B,CAAC;gBACzC,MAAM;aACP;YACD,KAAK,mBAAmB,CAAC,EAAE,CAAC,CAAC;gBAC3B,QAAQ,GAAG,6BAA6B,CAAC;gBACzC,MAAM;aACP;YACD,KAAK,mBAAmB,CAAC,EAAE,CAAC,CAAC;gBAC3B,QAAQ,GAAG,6BAA6B,CAAC;gBACzC,MAAM;aACP;YACD,OAAO,CAAC,CAAC;gBACP,QAAQ,GAAG,6BAA6B,CAAC;gBACzC,MAAM;aACP;SACF;QAED,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;IAC7C,CAAC;;6HAhDU,+BAA+B;iIAA/B,+BAA+B;4FAA/B,+BAA+B;kBAD3C,UAAU","sourcesContent":["import {\n  ElementRef,\n  Injectable,\n  Renderer2,\n  RendererFactory2,\n} from '@angular/core';\nimport { SkyMediaBreakpoints } from '@skyux/core';\n\n@Injectable()\nexport class SkyVerticalTabsetAdapterService {\n  private renderer: Renderer2;\n\n  constructor(private rendererFactory: RendererFactory2) {\n    this.renderer = this.rendererFactory.createRenderer(undefined, undefined);\n  }\n\n  public getWidth(elementRef: ElementRef): number {\n    return elementRef.nativeElement.clientWidth;\n  }\n\n  public scrollToContentTop(element: ElementRef): void {\n    element.nativeElement.scrollTop = 0;\n  }\n\n  public setResponsiveClass(\n    element: ElementRef,\n    breakpoint: SkyMediaBreakpoints\n  ): void {\n    const nativeEl: HTMLElement = element.nativeElement;\n\n    this.renderer.removeClass(nativeEl, 'sky-responsive-container-xs');\n    this.renderer.removeClass(nativeEl, 'sky-responsive-container-sm');\n    this.renderer.removeClass(nativeEl, 'sky-responsive-container-md');\n    this.renderer.removeClass(nativeEl, 'sky-responsive-container-lg');\n\n    let newClass: string;\n\n    switch (breakpoint) {\n      case SkyMediaBreakpoints.xs: {\n        newClass = 'sky-responsive-container-xs';\n        break;\n      }\n      case SkyMediaBreakpoints.sm: {\n        newClass = 'sky-responsive-container-sm';\n        break;\n      }\n      case SkyMediaBreakpoints.md: {\n        newClass = 'sky-responsive-container-md';\n        break;\n      }\n      default: {\n        newClass = 'sky-responsive-container-lg';\n        break;\n      }\n    }\n\n    this.renderer.addClass(nativeEl, newClass);\n  }\n}\n"]}

package/esm2015/lib/modules/vertical-tabset/vertical-tabset-group.component.js

@@ -1,89 +0,0 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChildren, Input, QueryList, } from '@angular/core';
-import { skyAnimationSlide } from '@skyux/animations';
-import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
-import { SkyVerticalTabComponent } from './vertical-tab.component';
-import { SkyVerticalTabsetService } from './vertical-tabset.service';
-import * as i0 from "@angular/core";
-import * as i1 from "./vertical-tabset.service";
-import * as i2 from "@skyux/indicators";
-import * as i3 from "@angular/common";
-import * as i4 from "@skyux/core";
-export class SkyVerticalTabsetGroupComponent {
-    constructor(tabService, changeRef) {
-        this.tabService = tabService;
-        this.changeRef = changeRef;
-        this.ngUnsubscribe = new Subject();
-        this.openBeforeTabsHidden = false;
-        this._open = false;
-        this.tabClicked = () => {
-            this.changeRef.markForCheck();
-        };
-        this.tabsHidden = () => {
-            // this fixes an animation bug with ngIf when the parent component goes from visible to hidden
-            this.openBeforeTabsHidden = this.open;
-            this.open = false;
-            this.changeRef.markForCheck();
-        };
-        this.tabsShown = () => {
-            this.open = this.openBeforeTabsHidden;
-            this.changeRef.markForCheck();
-        };
-    }
-    /**
-     * Indicates whether the collapsible group is expanded.
-     * @default false
-     */
-    set open(value) {
-        this._open = value;
-    }
-    get open() {
-        return !this.disabled && this._open;
-    }
-    ngOnInit() {
-        this.tabService.hidingTabs
-            .pipe(takeUntil(this.ngUnsubscribe))
-            .subscribe(this.tabsHidden);
-        this.tabService.showingTabs
-            .pipe(takeUntil(this.ngUnsubscribe))
-            .subscribe(this.tabsShown);
-        this.tabService.tabClicked
-            .pipe(takeUntil(this.ngUnsubscribe))
-            .subscribe(this.tabClicked);
-    }
-    ngOnDestroy() {
-        this.ngUnsubscribe.next();
-        this.ngUnsubscribe.complete();
-    }
-    toggleMenuOpen() {
-        if (!this.disabled) {
-            this.open = !this.open;
-        }
-        this.changeRef.markForCheck();
-    }
-    subMenuOpen() {
-        return this.tabs && this.tabs.find((t) => t.active) !== undefined;
-    }
-}
-SkyVerticalTabsetGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyVerticalTabsetGroupComponent, deps: [{ token: i1.SkyVerticalTabsetService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-SkyVerticalTabsetGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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\"\n    [ngClass]=\"{\n      'sky-vertical-tabset-group-header-sub-open sky-font-emphasized sky-emphasized':\n        subMenuOpen(),\n      'sky-font-deemphasized': disabled,\n      'sky-deemphasized': disabled,\n      'sky-vertical-tabset-disabled': disabled\n    }\"\n    [tabIndex]=\"-1\"\n  >\n    <button\n      class=\"sky-padding-even-default\"\n      type=\"button\"\n      skyId\n      [attr.aria-controls]=\"groupContent.id\"\n      [attr.aria-expanded]=\"open\"\n      (click)=\"toggleMenuOpen()\"\n      #groupHeadingButton\n    >\n      {{ groupHeading }}\n      <sky-expansion-indicator\n        class=\"sky-vertical-tabset-group-expansion-indicator\"\n        [direction]=\"open ? 'up' : 'down'\"\n      >\n      </sky-expansion-indicator>\n    </button>\n  </div>\n  <div\n    class=\"sky-vertical-tabset-group-content\"\n    role=\"region\"\n    skyId\n    [attr.labelledby]=\"groupHeadingButton.id\"\n    [@skyAnimationSlide]=\"open ? 'down' : 'up'\"\n    #groupContent\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 button{cursor:pointer;display:flex;justify-content:space-between;border:none;width:100%;text-align:left;background:none}.sky-vertical-tabset-group-content{overflow:hidden;border-top:1px solid #e2e3e4}:host ::ng-deep .sky-vertical-tabset-group-expansion-indicator>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-expansion-indicator{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-expansion-indicator{position:absolute;top:6px;right:5px}\n"], components: [{ type: i2.λ15, selector: "sky-expansion-indicator", inputs: ["direction"] }], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.λ2, selector: "[skyId]", exportAs: ["skyId"] }], animations: [skyAnimationSlide], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", 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: [skyAnimationSlide],
-                }]
-        }], ctorParameters: function () { return [{ type: i1.SkyVerticalTabsetService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { disabled: [{
-                type: Input
-            }], groupHeading: [{
-                type: Input
-            }], open: [{
-                type: Input
-            }], tabs: [{
-                type: ContentChildren,
-                args: [SkyVerticalTabComponent]
-            }] } });
-//# sourceMappingURL=vertical-tabset-group.component.js.map

package/esm2015/lib/modules/vertical-tabset/vertical-tabset-group.component.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"vertical-tabset-group.component.js","sourceRoot":"","sources":["../../../../../../../../libs/components/tabs/src/lib/modules/vertical-tabset/vertical-tabset-group.component.ts","../../../../../../../../libs/components/tabs/src/lib/modules/vertical-tabset/vertical-tabset-group.component.html"],"names":[],"mappings":"AAAA,OAAO,EACL,uBAAuB,EACvB,iBAAiB,EACjB,SAAS,EACT,eAAe,EACf,KAAK,EAGL,SAAS,GACV,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEtD,OAAO,EAAE,OAAO,EAAE,MAAM,MAAM,CAAC;AAC/B,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,OAAO,EAAE,uBAAuB,EAAE,MAAM,0BAA0B,CAAC;AACnE,OAAO,EAAE,wBAAwB,EAAE,MAAM,2BAA2B,CAAC;;;;;;AASrE,MAAM,OAAO,+BAA+B;IAoC1C,YACU,UAAoC,EACpC,SAA4B;QAD5B,eAAU,GAAV,UAAU,CAA0B;QACpC,cAAS,GAAT,SAAS,CAAmB;QAR9B,kBAAa,GAAG,IAAI,OAAO,EAAE,CAAC;QAE9B,yBAAoB,GAAG,KAAK,CAAC;QAE7B,UAAK,GAAG,KAAK,CAAC;QAsCf,eAAU,GAAG,GAAG,EAAE;YACvB,IAAI,CAAC,SAAS,CAAC,YAAY,EAAE,CAAC;QAChC,CAAC,CAAC;QAEK,eAAU,GAAG,GAAG,EAAE;YACvB,8FAA8F;YAC9F,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC,IAAI,CAAC;YACtC,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;YAClB,IAAI,CAAC,SAAS,CAAC,YAAY,EAAE,CAAC;QAChC,CAAC,CAAC;QAEK,cAAS,GAAG,GAAG,EAAE;YACtB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,oBAAoB,CAAC;YACtC,IAAI,CAAC,SAAS,CAAC,YAAY,EAAE,CAAC;QAChC,CAAC,CAAC;IA/CC,CAAC;IAzBJ;;;OAGG;IACH,IACW,IAAI,CAAC,KAAc;QAC5B,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;IACrB,CAAC;IAED,IAAW,IAAI;QACb,OAAO,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,KAAK,CAAC;IACtC,CAAC;IAgBM,QAAQ;QACb,IAAI,CAAC,UAAU,CAAC,UAAU;aACvB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;aACnC,SAAS,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QAE9B,IAAI,CAAC,UAAU,CAAC,WAAW;aACxB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;aACnC,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QAE7B,IAAI,CAAC,UAAU,CAAC,UAAU;aACvB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;aACnC,SAAS,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IAChC,CAAC;IAEM,WAAW;QAChB,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;QAC1B,IAAI,CAAC,aAAa,CAAC,QAAQ,EAAE,CAAC;IAChC,CAAC;IAEM,cAAc;QACnB,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAClB,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;SACxB;QAED,IAAI,CAAC,SAAS,CAAC,YAAY,EAAE,CAAC;IAChC,CAAC;IAEM,WAAW;QAChB,OAAO,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,SAAS,CAAC;IACpE,CAAC;;6HAtEU,+BAA+B;iHAA/B,+BAA+B,oKA2BzB,uBAAuB,6BCpD1C,msCAyCA,k7CDlBc,CAAC,iBAAiB,CAAC;4FAEpB,+BAA+B;kBAP3C,SAAS;mBAAC;oBACT,QAAQ,EAAE,2BAA2B;oBACrC,WAAW,EAAE,wCAAwC;oBACrD,SAAS,EAAE,CAAC,wCAAwC,CAAC;oBACrD,eAAe,EAAE,uBAAuB,CAAC,MAAM;oBAC/C,UAAU,EAAE,CAAC,iBAAiB,CAAC;iBAChC;+IAOQ,QAAQ;sBADd,KAAK;gBAOC,YAAY;sBADlB,KAAK;gBAQK,IAAI;sBADd,KAAK;gBAUE,IAAI;sBADX,eAAe;uBAAC,uBAAuB","sourcesContent":["import {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  ContentChildren,\n  Input,\n  OnDestroy,\n  OnInit,\n  QueryList,\n} from '@angular/core';\nimport { skyAnimationSlide } from '@skyux/animations';\n\nimport { Subject } from 'rxjs';\nimport { takeUntil } from 'rxjs/operators';\n\nimport { SkyVerticalTabComponent } from './vertical-tab.component';\nimport { SkyVerticalTabsetService } from './vertical-tabset.service';\n\n@Component({\n  selector: 'sky-vertical-tabset-group',\n  templateUrl: './vertical-tabset-group.component.html',\n  styleUrls: ['./vertical-tabset-group.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  animations: [skyAnimationSlide],\n})\nexport class SkyVerticalTabsetGroupComponent implements OnInit, OnDestroy {\n  /**\n   * Indicates whether to disable the ability to expand and collapse the group.\n   * @default false\n   */\n  @Input()\n  public disabled: boolean;\n\n  /**\n   * Specifies the header for the collapsible group of tabs.\n   */\n  @Input()\n  public groupHeading: string;\n\n  /**\n   * Indicates whether the collapsible group is expanded.\n   * @default false\n   */\n  @Input()\n  public set open(value: boolean) {\n    this._open = value;\n  }\n\n  public get open(): boolean {\n    return !this.disabled && this._open;\n  }\n\n  @ContentChildren(SkyVerticalTabComponent)\n  private tabs: QueryList<SkyVerticalTabComponent>;\n\n  private ngUnsubscribe = new Subject();\n\n  private openBeforeTabsHidden = false;\n\n  private _open = false;\n\n  constructor(\n    private tabService: SkyVerticalTabsetService,\n    private changeRef: ChangeDetectorRef\n  ) {}\n\n  public ngOnInit(): void {\n    this.tabService.hidingTabs\n      .pipe(takeUntil(this.ngUnsubscribe))\n      .subscribe(this.tabsHidden);\n\n    this.tabService.showingTabs\n      .pipe(takeUntil(this.ngUnsubscribe))\n      .subscribe(this.tabsShown);\n\n    this.tabService.tabClicked\n      .pipe(takeUntil(this.ngUnsubscribe))\n      .subscribe(this.tabClicked);\n  }\n\n  public ngOnDestroy(): void {\n    this.ngUnsubscribe.next();\n    this.ngUnsubscribe.complete();\n  }\n\n  public toggleMenuOpen(): void {\n    if (!this.disabled) {\n      this.open = !this.open;\n    }\n\n    this.changeRef.markForCheck();\n  }\n\n  public subMenuOpen(): boolean {\n    return this.tabs && this.tabs.find((t) => t.active) !== undefined;\n  }\n\n  public tabClicked = () => {\n    this.changeRef.markForCheck();\n  };\n\n  public tabsHidden = () => {\n    // this fixes an animation bug with ngIf when the parent component goes from visible to hidden\n    this.openBeforeTabsHidden = this.open;\n    this.open = false;\n    this.changeRef.markForCheck();\n  };\n\n  public tabsShown = () => {\n    this.open = this.openBeforeTabsHidden;\n    this.changeRef.markForCheck();\n  };\n}\n","<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\"\n    [ngClass]=\"{\n      'sky-vertical-tabset-group-header-sub-open sky-font-emphasized sky-emphasized':\n        subMenuOpen(),\n      'sky-font-deemphasized': disabled,\n      'sky-deemphasized': disabled,\n      'sky-vertical-tabset-disabled': disabled\n    }\"\n    [tabIndex]=\"-1\"\n  >\n    <button\n      class=\"sky-padding-even-default\"\n      type=\"button\"\n      skyId\n      [attr.aria-controls]=\"groupContent.id\"\n      [attr.aria-expanded]=\"open\"\n      (click)=\"toggleMenuOpen()\"\n      #groupHeadingButton\n    >\n      {{ groupHeading }}\n      <sky-expansion-indicator\n        class=\"sky-vertical-tabset-group-expansion-indicator\"\n        [direction]=\"open ? 'up' : 'down'\"\n      >\n      </sky-expansion-indicator>\n    </button>\n  </div>\n  <div\n    class=\"sky-vertical-tabset-group-content\"\n    role=\"region\"\n    skyId\n    [attr.labelledby]=\"groupHeadingButton.id\"\n    [@skyAnimationSlide]=\"open ? 'down' : 'up'\"\n    #groupContent\n  >\n    <ng-content></ng-content>\n  </div>\n</div>\n"]}