@skyux/tabs 5.1.0 → 5.5.0

package/esm2015/index.js

@@ -0,0 +1,23 @@
+export * from './lib/modules/sectioned-form/sectioned-form.module';
+export * from './lib/modules/sectioned-form/sectioned-form.service';
+export * from './lib/modules/tabs/tab-index';
+export * from './lib/modules/tabs/tabset-buttons-display-mode';
+export * from './lib/modules/tabs/tabset-style';
+export * from './lib/modules/tabs/tabset-tab-indexes-change';
+export * from './lib/modules/tabs/tabs.module';
+export * from './lib/modules/vertical-tabset/vertical-tabset.module';
+// The following export is needed because our docs use it as a prescribed pattern.
+// Ideally, this functionality would live in a standard `Input` or `Output`.
+// https://developer.blackbaud.com/skyux/components/sectioned-form#code
+// TODO: Try to remove in a major release.
+export * from './lib/modules/sectioned-form/sectioned-form.component';
+// Components and directives must be exported to support Angular's "partial" Ivy compiler.
+// Obscure names are used to indicate types are not part of public API.
+export { SkyTabComponent as λ1 } from './lib/modules/tabs/tab.component';
+export { SkyTabsetComponent as λ2 } from './lib/modules/tabs/tabset.component';
+export { SkyTabsetNavButtonComponent as λ3 } from './lib/modules/tabs/tabset-nav-button.component';
+export { SkyVerticalTabComponent as λ4 } from './lib/modules/vertical-tabset/vertical-tab.component';
+export { SkySectionedFormSectionComponent as λ5 } from './lib/modules/sectioned-form/sectioned-form-section.component';
+export { SkyVerticalTabsetComponent as λ6 } from './lib/modules/vertical-tabset/vertical-tabset.component';
+export { SkyVerticalTabsetGroupComponent as λ7 } from './lib/modules/vertical-tabset/vertical-tabset-group.component';
+//# sourceMappingURL=index.js.map

package/esm2015/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../libs/components/tabs/src/index.ts"],"names":[],"mappings":"AAAA,cAAc,oDAAoD,CAAC;AACnE,cAAc,qDAAqD,CAAC;AAEpE,cAAc,8BAA8B,CAAC;AAC7C,cAAc,gDAAgD,CAAC;AAC/D,cAAc,iCAAiC,CAAC;AAChD,cAAc,8CAA8C,CAAC;AAC7D,cAAc,gCAAgC,CAAC;AAE/C,cAAc,sDAAsD,CAAC;AAErE,kFAAkF;AAClF,4EAA4E;AAC5E,uEAAuE;AACvE,0CAA0C;AAC1C,cAAc,uDAAuD,CAAC;AAEtE,0FAA0F;AAC1F,uEAAuE;AACvE,OAAO,EAAE,eAAe,IAAI,EAAE,EAAE,MAAM,kCAAkC,CAAC;AACzE,OAAO,EAAE,kBAAkB,IAAI,EAAE,EAAE,MAAM,qCAAqC,CAAC;AAC/E,OAAO,EAAE,2BAA2B,IAAI,EAAE,EAAE,MAAM,gDAAgD,CAAC;AACnG,OAAO,EAAE,uBAAuB,IAAI,EAAE,EAAE,MAAM,sDAAsD,CAAC;AACrG,OAAO,EAAE,gCAAgC,IAAI,EAAE,EAAE,MAAM,+DAA+D,CAAC;AACvH,OAAO,EAAE,0BAA0B,IAAI,EAAE,EAAE,MAAM,yDAAyD,CAAC;AAC3G,OAAO,EAAE,+BAA+B,IAAI,EAAE,EAAE,MAAM,+DAA+D,CAAC","sourcesContent":["export * from './lib/modules/sectioned-form/sectioned-form.module';\nexport * from './lib/modules/sectioned-form/sectioned-form.service';\n\nexport * from './lib/modules/tabs/tab-index';\nexport * from './lib/modules/tabs/tabset-buttons-display-mode';\nexport * from './lib/modules/tabs/tabset-style';\nexport * from './lib/modules/tabs/tabset-tab-indexes-change';\nexport * from './lib/modules/tabs/tabs.module';\n\nexport * from './lib/modules/vertical-tabset/vertical-tabset.module';\n\n// The following export is needed because our docs use it as a prescribed pattern.\n// Ideally, this functionality would live in a standard `Input` or `Output`.\n// https://developer.blackbaud.com/skyux/components/sectioned-form#code\n// TODO: Try to remove in a major release.\nexport * from './lib/modules/sectioned-form/sectioned-form.component';\n\n// Components and directives must be exported to support Angular's \"partial\" Ivy compiler.\n// Obscure names are used to indicate types are not part of public API.\nexport { SkyTabComponent as λ1 } from './lib/modules/tabs/tab.component';\nexport { SkyTabsetComponent as λ2 } from './lib/modules/tabs/tabset.component';\nexport { SkyTabsetNavButtonComponent as λ3 } from './lib/modules/tabs/tabset-nav-button.component';\nexport { SkyVerticalTabComponent as λ4 } from './lib/modules/vertical-tabset/vertical-tab.component';\nexport { SkySectionedFormSectionComponent as λ5 } from './lib/modules/sectioned-form/sectioned-form-section.component';\nexport { SkyVerticalTabsetComponent as λ6 } from './lib/modules/vertical-tabset/vertical-tabset.component';\nexport { SkyVerticalTabsetGroupComponent as λ7 } from './lib/modules/vertical-tabset/vertical-tabset-group.component';\n"]}

package/esm2015/lib/modules/sectioned-form/sectioned-form-section.component.js

@@ -0,0 +1,67 @@
+import { Component, Input, ViewChild, ChangeDetectorRef, } from '@angular/core';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { SkyVerticalTabComponent } from './../vertical-tabset/vertical-tab.component';
+import { SkySectionedFormService } from './sectioned-form.service';
+import { SkyVerticalTabsetService } from '../vertical-tabset/vertical-tabset.service';
+import * as i0 from "@angular/core";
+import * as i1 from "./sectioned-form.service";
+import * as i2 from "../vertical-tabset/vertical-tabset.service";
+import * as i3 from "../vertical-tabset/vertical-tab.component";
+import * as i4 from "@angular/common";
+let nextId = 0;
+/**
+ * Creates an individual form to display as a section within the sectioned form.
+ */
+export class SkySectionedFormSectionComponent {
+    constructor(sectionedFormService, tabsetService, changeRef) {
+        this.sectionedFormService = sectionedFormService;
+        this.tabsetService = tabsetService;
+        this.changeRef = changeRef;
+        this.sectionTabId = `sky-sectioned-form-tab-${++nextId}`;
+        this.sectionContentId = `sky-sectioned-form-section-${++nextId}`;
+        /**
+         * Indicates whether the section is active when the form loads.
+         * @default false
+         */
+        this.active = false;
+        this._ngUnsubscribe = new Subject();
+    }
+    ngOnInit() {
+        this.changeRef.detectChanges();
+        this.tabsetService.switchingMobile.subscribe((mobile) => {
+            this.changeRef.detectChanges();
+        });
+        this.sectionedFormService.requiredChange
+            .pipe(takeUntil(this._ngUnsubscribe))
+            .subscribe((required) => (this.fieldRequired = required));
+        this.sectionedFormService.invalidChange
+            .pipe(takeUntil(this._ngUnsubscribe))
+            .subscribe((invalid) => (this.fieldInvalid = invalid));
+    }
+    ngOnDestroy() {
+        this._ngUnsubscribe.next();
+        this._ngUnsubscribe.complete();
+    }
+}
+SkySectionedFormSectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkySectionedFormSectionComponent, deps: [{ token: i1.SkySectionedFormService }, { token: i2.SkyVerticalTabsetService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+SkySectionedFormSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkySectionedFormSectionComponent, selector: "sky-sectioned-form-section", inputs: { heading: "heading", itemCount: "itemCount", active: "active" }, providers: [SkySectionedFormService], viewQueries: [{ propertyName: "tab", first: true, predicate: SkyVerticalTabComponent, descendants: true }], ngImport: i0, template: "<sky-vertical-tab\n  [active]=\"active\"\n  [errorIndicator]=\"fieldInvalid\"\n  [ngClass]=\"{\n    'sky-tab-field-required': fieldRequired\n  }\"\n  [showTabRightArrow]=\"true\"\n  [tabHeaderCount]=\"itemCount\"\n  [tabHeading]=\"heading\"\n  [tabId]=\"sectionTabId\"\n>\n  <ng-content></ng-content>\n</sky-vertical-tab>\n", styles: [":host .sky-tab-field-required ::ng-deep .sky-vertical-tab-heading:after{content:\"*\";color:#ef4044;padding-left:5px}\n"], components: [{ type: i3.SkyVerticalTabComponent, selector: "sky-vertical-tab", inputs: ["active", "ariaControls", "ariaRole", "disabled", "errorIndicator", "tabHeaderCount", "tabHeading", "showTabRightArrow", "tabId"] }], directives: [{ type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkySectionedFormSectionComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-sectioned-form-section',
+                    templateUrl: './sectioned-form-section.component.html',
+                    providers: [SkySectionedFormService],
+                    styleUrls: ['./sectioned-form-section.component.scss'],
+                }]
+        }], ctorParameters: function () { return [{ type: i1.SkySectionedFormService }, { type: i2.SkyVerticalTabsetService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { heading: [{
+                type: Input
+            }], itemCount: [{
+                type: Input
+            }], active: [{
+                type: Input
+            }], tab: [{
+                type: ViewChild,
+                args: [SkyVerticalTabComponent]
+            }] } });
+//# sourceMappingURL=sectioned-form-section.component.js.map

package/esm2015/lib/modules/sectioned-form/sectioned-form-section.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sectioned-form-section.component.js","sourceRoot":"","sources":["../../../../../../../../libs/components/tabs/src/lib/modules/sectioned-form/sectioned-form-section.component.ts","../../../../../../../../libs/components/tabs/src/lib/modules/sectioned-form/sectioned-form-section.component.html"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,KAAK,EACL,SAAS,EAGT,iBAAiB,GAClB,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,OAAO,EAAE,MAAM,MAAM,CAAC;AAE/B,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,OAAO,EAAE,uBAAuB,EAAE,MAAM,6CAA6C,CAAC;AACtF,OAAO,EAAE,uBAAuB,EAAE,MAAM,0BAA0B,CAAC;AACnE,OAAO,EAAE,wBAAwB,EAAE,MAAM,4CAA4C,CAAC;;;;;;AAEtF,IAAI,MAAM,GAAG,CAAC,CAAC;AAEf;;GAEG;AAOH,MAAM,OAAO,gCAAgC;IAiC3C,YACU,oBAA6C,EAC7C,aAAuC,EACvC,SAA4B;QAF5B,yBAAoB,GAApB,oBAAoB,CAAyB;QAC7C,kBAAa,GAAb,aAAa,CAA0B;QACvC,cAAS,GAAT,SAAS,CAAmB;QAnC/B,iBAAY,GAAG,0BAA0B,EAAE,MAAM,EAAE,CAAC;QACpD,qBAAgB,GAAG,8BAA8B,EAAE,MAAM,EAAE,CAAC;QAgBnE;;;WAGG;QAEI,WAAM,GAAY,KAAK,CAAC;QAQvB,mBAAc,GAAG,IAAI,OAAO,EAAE,CAAC;IAMpC,CAAC;IAEG,QAAQ;QACb,IAAI,CAAC,SAAS,CAAC,aAAa,EAAE,CAAC;QAE/B,IAAI,CAAC,aAAa,CAAC,eAAe,CAAC,SAAS,CAAC,CAAC,MAAe,EAAE,EAAE;YAC/D,IAAI,CAAC,SAAS,CAAC,aAAa,EAAE,CAAC;QACjC,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,oBAAoB,CAAC,cAAc;aACrC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;aACpC,SAAS,CAAC,CAAC,QAAiB,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC,CAAC,CAAC;QAErE,IAAI,CAAC,oBAAoB,CAAC,aAAa;aACpC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;aACpC,SAAS,CAAC,CAAC,OAAgB,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,YAAY,GAAG,OAAO,CAAC,CAAC,CAAC;IACpE,CAAC;IAEM,WAAW;QAChB,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC;QAC3B,IAAI,CAAC,cAAc,CAAC,QAAQ,EAAE,CAAC;IACjC,CAAC;;8HA1DU,gCAAgC;kHAAhC,gCAAgC,+HAHhC,CAAC,uBAAuB,CAAC,+DA+BzB,uBAAuB,gDCxDpC,qUAaA;4FDea,gCAAgC;kBAN5C,SAAS;mBAAC;oBACT,QAAQ,EAAE,4BAA4B;oBACtC,WAAW,EAAE,yCAAyC;oBACtD,SAAS,EAAE,CAAC,uBAAuB,CAAC;oBACpC,SAAS,EAAE,CAAC,yCAAyC,CAAC;iBACvD;qLAUQ,OAAO;sBADb,KAAK;gBAQC,SAAS;sBADf,KAAK;gBAQC,MAAM;sBADZ,KAAK;gBAOC,GAAG;sBADT,SAAS;uBAAC,uBAAuB","sourcesContent":["import {\n  Component,\n  Input,\n  ViewChild,\n  OnInit,\n  OnDestroy,\n  ChangeDetectorRef,\n} from '@angular/core';\n\nimport { Subject } from 'rxjs';\n\nimport { takeUntil } from 'rxjs/operators';\n\nimport { SkyVerticalTabComponent } from './../vertical-tabset/vertical-tab.component';\nimport { SkySectionedFormService } from './sectioned-form.service';\nimport { SkyVerticalTabsetService } from '../vertical-tabset/vertical-tabset.service';\n\nlet nextId = 0;\n\n/**\n * Creates an individual form to display as a section within the sectioned form.\n */\n@Component({\n  selector: 'sky-sectioned-form-section',\n  templateUrl: './sectioned-form-section.component.html',\n  providers: [SkySectionedFormService],\n  styleUrls: ['./sectioned-form-section.component.scss'],\n})\nexport class SkySectionedFormSectionComponent implements OnInit, OnDestroy {\n  public sectionTabId = `sky-sectioned-form-tab-${++nextId}`;\n  public sectionContentId = `sky-sectioned-form-section-${++nextId}`;\n\n  /**\n   * Specifies the section header.\n   * @required\n   */\n  @Input()\n  public heading: string;\n\n  /**\n   * Indicates the number of items within the section and displays a\n   * counter alongside the section header.\n   */\n  @Input()\n  public itemCount: number;\n\n  /**\n   * Indicates whether the section is active when the form loads.\n   * @default false\n   */\n  @Input()\n  public active: boolean = false;\n\n  public fieldRequired: boolean;\n  public fieldInvalid: boolean;\n\n  @ViewChild(SkyVerticalTabComponent)\n  public tab: SkyVerticalTabComponent;\n\n  private _ngUnsubscribe = new Subject();\n\n  constructor(\n    private sectionedFormService: SkySectionedFormService,\n    private tabsetService: SkyVerticalTabsetService,\n    private changeRef: ChangeDetectorRef\n  ) {}\n\n  public ngOnInit() {\n    this.changeRef.detectChanges();\n\n    this.tabsetService.switchingMobile.subscribe((mobile: boolean) => {\n      this.changeRef.detectChanges();\n    });\n\n    this.sectionedFormService.requiredChange\n      .pipe(takeUntil(this._ngUnsubscribe))\n      .subscribe((required: boolean) => (this.fieldRequired = required));\n\n    this.sectionedFormService.invalidChange\n      .pipe(takeUntil(this._ngUnsubscribe))\n      .subscribe((invalid: boolean) => (this.fieldInvalid = invalid));\n  }\n\n  public ngOnDestroy() {\n    this._ngUnsubscribe.next();\n    this._ngUnsubscribe.complete();\n  }\n}\n","<sky-vertical-tab\n  [active]=\"active\"\n  [errorIndicator]=\"fieldInvalid\"\n  [ngClass]=\"{\n    'sky-tab-field-required': fieldRequired\n  }\"\n  [showTabRightArrow]=\"true\"\n  [tabHeaderCount]=\"itemCount\"\n  [tabHeading]=\"heading\"\n  [tabId]=\"sectionTabId\"\n>\n  <ng-content></ng-content>\n</sky-vertical-tab>\n"]}

package/esm2015/lib/modules/sectioned-form/sectioned-form.component.js

@@ -0,0 +1,116 @@
+import { Component, ElementRef, ViewChild, EventEmitter, Output, ChangeDetectionStrategy, ChangeDetectorRef, Input, } from '@angular/core';
+import { style, trigger, transition, animate } from '@angular/animations';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { SkyVerticalTabsetService, HIDDEN_STATE, VISIBLE_STATE, } from './../vertical-tabset/vertical-tabset.service';
+import * as i0 from "@angular/core";
+import * as i1 from "./../vertical-tabset/vertical-tabset.service";
+import * as i2 from "@angular/common";
+/**
+ * Creates a container for the sectioned forms.
+ */
+export class SkySectionedFormComponent {
+    constructor(tabService, changeRef) {
+        this.tabService = tabService;
+        this.changeRef = changeRef;
+        /**
+         * Indicates whether the sectioned form loads section content during initialization so that it
+         * displays content without moving around elements in the content container.
+         * @default false
+         */
+        this.maintainSectionContent = false;
+        /**
+         * Fires when the active tab changes and emits the index of the active
+         * section. The index is based on the section's position when the form loads.
+         */
+        this.indexChanged = new EventEmitter();
+        this.isMobile = false;
+        this._ngUnsubscribe = new Subject();
+    }
+    get ariaRole() {
+        return this.isMobile ? undefined : 'tablist';
+    }
+    ngOnInit() {
+        this.tabService.maintainTabContent = this.maintainSectionContent;
+        this.tabService.indexChanged
+            .pipe(takeUntil(this._ngUnsubscribe))
+            .subscribe((index) => {
+            this.indexChanged.emit(index);
+            this.changeRef.markForCheck();
+        });
+        this.tabService.switchingMobile
+            .pipe(takeUntil(this._ngUnsubscribe))
+            .subscribe((mobile) => {
+            this.isMobile = mobile;
+            this.changeRef.markForCheck();
+        });
+        if (this.tabService.isMobile()) {
+            this.isMobile = true;
+            this.tabService.animationContentVisibleState = VISIBLE_STATE;
+            this.changeRef.markForCheck();
+        }
+    }
+    ngAfterViewChecked() {
+        this.tabService.content = this.content;
+        this.tabService.updateContent();
+    }
+    ngOnDestroy() {
+        this._ngUnsubscribe.next();
+        this._ngUnsubscribe.complete();
+    }
+    tabsVisible() {
+        this.changeRef.markForCheck();
+        return this.tabService.tabsVisible();
+    }
+    showTabs() {
+        this.tabService.showTabs();
+        this.changeRef.markForCheck();
+    }
+}
+SkySectionedFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkySectionedFormComponent, deps: [{ token: i1.SkyVerticalTabsetService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+SkySectionedFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkySectionedFormComponent, selector: "sky-sectioned-form", inputs: { maintainSectionContent: "maintainSectionContent" }, outputs: { indexChanged: "indexChanged" }, providers: [SkyVerticalTabsetService], viewQueries: [{ propertyName: "content", first: true, predicate: ["skySectionSideContent"], descendants: true }], ngImport: i0, template: "<div\n  aria-orientation=\"vertical\"\n  class=\"sky-sectioned-form\"\n  [attr.role]=\"ariaRole\"\n  (window:resize)=\"tabService.updateContent()\"\n>\n  <div\n    *ngIf=\"maintainSectionContent || tabsVisible()\"\n    class=\"sky-sectioned-form-tabs\"\n    [ngClass]=\"{ 'sky-sectioned-form-tabs-hidden': !tabsVisible() }\"\n    [@tabEnter]=\"tabService.animationTabsVisibleState\"\n  >\n    <ng-content></ng-content>\n  </div>\n  <div\n    *ngIf=\"maintainSectionContent || tabService.contentVisible()\"\n    class=\"sky-sectioned-form-content\"\n    [ngClass]=\"{\n      'sky-sectioned-form-content-hidden': !tabService.contentVisible()\n    }\"\n    [@contentEnter]=\"tabService.animationContentVisibleState\"\n    #skySectionSideContent\n  ></div>\n</div>\n", styles: [":host .sky-sectioned-form{display:block;max-height:none}:host .sky-sectioned-form-content{flex-basis:auto;overflow-y:visible}:host .sky-sectioned-form-tabs{flex-basis:auto;overflow-y:visible;border-right:1px solid #e2e3e4}:host-context(.sky-responsive-container-xs) .sky-sectioned-form,:host-context(.sky-responsive-container-sm) .sky-sectioned-form,:host-context(.sky-responsive-container-md) .sky-sectioned-form,:host-context(.sky-responsive-container-lg) .sky-sectioned-form{display:block;max-height:none}:host-context(.sky-responsive-container-xs) .sky-sectioned-form-content,:host-context(.sky-responsive-container-sm) .sky-sectioned-form-content,:host-context(.sky-responsive-container-md) .sky-sectioned-form-content,:host-context(.sky-responsive-container-lg) .sky-sectioned-form-content{flex-basis:auto;overflow-y:visible}:host-context(.sky-responsive-container-xs) .sky-sectioned-form-tabs,:host-context(.sky-responsive-container-sm) .sky-sectioned-form-tabs,:host-context(.sky-responsive-container-md) .sky-sectioned-form-tabs,:host-context(.sky-responsive-container-lg) .sky-sectioned-form-tabs{flex-basis:auto;overflow-y:visible;border-right:1px solid #e2e3e4}@media (min-width: 768px){:host .sky-sectioned-form{display:flex;max-height:100%}:host .sky-sectioned-form-content{flex-basis:70%;margin:15px;overflow-y:auto}:host .sky-sectioned-form-tabs{flex-basis:30%;overflow-y:auto}}:host-context(.sky-responsive-container-sm) .sky-sectioned-form,:host-context(.sky-responsive-container-md) .sky-sectioned-form,:host-context(.sky-responsive-container-lg) .sky-sectioned-form{display:flex;max-height:100%}:host-context(.sky-responsive-container-sm) .sky-sectioned-form-content,:host-context(.sky-responsive-container-md) .sky-sectioned-form-content,:host-context(.sky-responsive-container-lg) .sky-sectioned-form-content{flex-basis:70%;margin:15px;overflow-y:auto}:host-context(.sky-responsive-container-sm) .sky-sectioned-form-tabs,:host-context(.sky-responsive-container-md) .sky-sectioned-form-tabs,:host-context(.sky-responsive-container-lg) .sky-sectioned-form-tabs{flex-basis:30%;overflow-y:auto}.sky-sectioned-form-tabs-hidden{display:none}.sky-sectioned-form-content-hidden{display:none}:host-context(.sky-theme-modern) .sky-sectioned-form-content{margin:15px}:host-context(.sky-theme-modern) .sky-sectioned-form-tabs{border-right:1px solid #d2d2d2}@media (min-width: 768px){:host-context(.sky-theme-modern) :host .sky-sectioned-form-content{margin:20px 30px}}:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-sm) .sky-sectioned-form-content,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-md) .sky-sectioned-form-content,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-lg) .sky-sectioned-form-content{margin:20px 30px}.sky-theme-modern .sky-sectioned-form-content{margin:15px}.sky-theme-modern .sky-sectioned-form-tabs{border-right:1px solid #d2d2d2}@media (min-width: 768px){.sky-theme-modern :host .sky-sectioned-form-content{margin:20px 30px}}.sky-theme-modern :host-context(.sky-responsive-container-sm) .sky-sectioned-form-content,.sky-theme-modern :host-context(.sky-responsive-container-md) .sky-sectioned-form-content,.sky-theme-modern :host-context(.sky-responsive-container-lg) .sky-sectioned-form-content{margin:20px 30px}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [
+        trigger('tabEnter', [
+            transition(`${HIDDEN_STATE} => ${VISIBLE_STATE}`, [
+                style({ transform: 'translate(-100%)' }),
+                animate('150ms ease-in'),
+            ]),
+        ]),
+        trigger('contentEnter', [
+            transition(`${HIDDEN_STATE} => ${VISIBLE_STATE}`, [
+                style({ transform: 'translate(100%)' }),
+                animate('150ms ease-in'),
+            ]),
+        ]),
+    ], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkySectionedFormComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-sectioned-form',
+                    templateUrl: './sectioned-form.component.html',
+                    styleUrls: ['./sectioned-form.component.scss'],
+                    providers: [SkyVerticalTabsetService],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    animations: [
+                        trigger('tabEnter', [
+                            transition(`${HIDDEN_STATE} => ${VISIBLE_STATE}`, [
+                                style({ transform: 'translate(-100%)' }),
+                                animate('150ms ease-in'),
+                            ]),
+                        ]),
+                        trigger('contentEnter', [
+                            transition(`${HIDDEN_STATE} => ${VISIBLE_STATE}`, [
+                                style({ transform: 'translate(100%)' }),
+                                animate('150ms ease-in'),
+                            ]),
+                        ]),
+                    ],
+                }]
+        }], ctorParameters: function () { return [{ type: i1.SkyVerticalTabsetService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { maintainSectionContent: [{
+                type: Input
+            }], indexChanged: [{
+                type: Output
+            }], content: [{
+                type: ViewChild,
+                args: ['skySectionSideContent']
+            }] } });
+//# sourceMappingURL=sectioned-form.component.js.map

package/esm2015/lib/modules/sectioned-form/sectioned-form.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sectioned-form.component.js","sourceRoot":"","sources":["../../../../../../../../libs/components/tabs/src/lib/modules/sectioned-form/sectioned-form.component.ts","../../../../../../../../libs/components/tabs/src/lib/modules/sectioned-form/sectioned-form.component.html"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  OnInit,\n  OnDestroy,\n  ElementRef,\n  ViewChild,\n  EventEmitter,\n  Output,\n  AfterViewChecked,\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Input,\n} from '@angular/core';\n\nimport { style, trigger, transition, animate } from '@angular/animations';\n\nimport { Subject } from 'rxjs';\n\nimport { takeUntil } from 'rxjs/operators';\n\nimport {\n  SkyVerticalTabsetService,\n  HIDDEN_STATE,\n  VISIBLE_STATE,\n} from './../vertical-tabset/vertical-tabset.service';\n\n/**\n * Creates a container for the sectioned forms.\n */\n@Component({\n  selector: 'sky-sectioned-form',\n  templateUrl: './sectioned-form.component.html',\n  styleUrls: ['./sectioned-form.component.scss'],\n  providers: [SkyVerticalTabsetService],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  animations: [\n    trigger('tabEnter', [\n      transition(`${HIDDEN_STATE} => ${VISIBLE_STATE}`, [\n        style({ transform: 'translate(-100%)' }),\n        animate('150ms ease-in'),\n      ]),\n    ]),\n    trigger('contentEnter', [\n      transition(`${HIDDEN_STATE} => ${VISIBLE_STATE}`, [\n        style({ transform: 'translate(100%)' }),\n        animate('150ms ease-in'),\n      ]),\n    ]),\n  ],\n})\nexport class SkySectionedFormComponent\n  implements OnInit, OnDestroy, AfterViewChecked\n{\n  /**\n   * Indicates whether the sectioned form loads section content during initialization so that it\n   * displays content without moving around elements in the content container.\n   * @default false\n   */\n  @Input()\n  public maintainSectionContent: boolean = false;\n\n  /**\n   * Fires when the active tab changes and emits the index of the active\n   * section. The index is based on the section's position when the form loads.\n   */\n  @Output()\n  public indexChanged: EventEmitter<number> = new EventEmitter();\n\n  public get ariaRole(): string {\n    return this.isMobile ? undefined : 'tablist';\n  }\n\n  @ViewChild('skySectionSideContent')\n  public content: ElementRef;\n\n  private isMobile = false;\n  private _ngUnsubscribe = new Subject();\n\n  constructor(\n    public tabService: SkyVerticalTabsetService,\n    private changeRef: ChangeDetectorRef\n  ) {}\n\n  public ngOnInit() {\n    this.tabService.maintainTabContent = this.maintainSectionContent;\n\n    this.tabService.indexChanged\n      .pipe(takeUntil(this._ngUnsubscribe))\n      .subscribe((index) => {\n        this.indexChanged.emit(index);\n        this.changeRef.markForCheck();\n      });\n\n    this.tabService.switchingMobile\n      .pipe(takeUntil(this._ngUnsubscribe))\n      .subscribe((mobile: boolean) => {\n        this.isMobile = mobile;\n        this.changeRef.markForCheck();\n      });\n\n    if (this.tabService.isMobile()) {\n      this.isMobile = true;\n      this.tabService.animationContentVisibleState = VISIBLE_STATE;\n      this.changeRef.markForCheck();\n    }\n  }\n\n  public ngAfterViewChecked() {\n    this.tabService.content = this.content;\n    this.tabService.updateContent();\n  }\n\n  public ngOnDestroy() {\n    this._ngUnsubscribe.next();\n    this._ngUnsubscribe.complete();\n  }\n\n  public tabsVisible() {\n    this.changeRef.markForCheck();\n    return this.tabService.tabsVisible();\n  }\n\n  public showTabs() {\n    this.tabService.showTabs();\n    this.changeRef.markForCheck();\n  }\n}\n","<div\n  aria-orientation=\"vertical\"\n  class=\"sky-sectioned-form\"\n  [attr.role]=\"ariaRole\"\n  (window:resize)=\"tabService.updateContent()\"\n>\n  <div\n    *ngIf=\"maintainSectionContent || tabsVisible()\"\n    class=\"sky-sectioned-form-tabs\"\n    [ngClass]=\"{ 'sky-sectioned-form-tabs-hidden': !tabsVisible() }\"\n    [@tabEnter]=\"tabService.animationTabsVisibleState\"\n  >\n    <ng-content></ng-content>\n  </div>\n  <div\n    *ngIf=\"maintainSectionContent || tabService.contentVisible()\"\n    class=\"sky-sectioned-form-content\"\n    [ngClass]=\"{\n      'sky-sectioned-form-content-hidden': !tabService.contentVisible()\n    }\"\n    [@contentEnter]=\"tabService.animationContentVisibleState\"\n    #skySectionSideContent\n  ></div>\n</div>\n"]}

package/esm2015/lib/modules/sectioned-form/sectioned-form.module.js

@@ -0,0 +1,35 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SkySectionedFormComponent } from './sectioned-form.component';
+import { SkySectionedFormSectionComponent } from './sectioned-form-section.component';
+import { SkyThemeModule } from '@skyux/theme';
+import { SkyVerticalTabsetModule } from '../vertical-tabset/vertical-tabset.module';
+import { SkyCheckboxModule } from '@skyux/forms';
+import * as i0 from "@angular/core";
+export class SkySectionedFormModule {
+}
+SkySectionedFormModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkySectionedFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkySectionedFormModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkySectionedFormModule, declarations: [SkySectionedFormComponent, SkySectionedFormSectionComponent], imports: [CommonModule,
+        SkyCheckboxModule,
+        SkyThemeModule,
+        SkyVerticalTabsetModule], exports: [SkySectionedFormComponent, SkySectionedFormSectionComponent] });
+SkySectionedFormModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkySectionedFormModule, imports: [[
+            CommonModule,
+            SkyCheckboxModule,
+            SkyThemeModule,
+            SkyVerticalTabsetModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkySectionedFormModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SkySectionedFormComponent, SkySectionedFormSectionComponent],
+                    imports: [
+                        CommonModule,
+                        SkyCheckboxModule,
+                        SkyThemeModule,
+                        SkyVerticalTabsetModule,
+                    ],
+                    exports: [SkySectionedFormComponent, SkySectionedFormSectionComponent],
+                }]
+        }] });
+//# sourceMappingURL=sectioned-form.module.js.map

package/esm2015/lib/modules/sectioned-form/sectioned-form.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sectioned-form.module.js","sourceRoot":"","sources":["../../../../../../../../libs/components/tabs/src/lib/modules/sectioned-form/sectioned-form.module.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,yBAAyB,EAAE,MAAM,4BAA4B,CAAC;AACvE,OAAO,EAAE,gCAAgC,EAAE,MAAM,oCAAoC,CAAC;AACtF,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,EAAE,uBAAuB,EAAE,MAAM,2CAA2C,CAAC;AACpF,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;;AAYjD,MAAM,OAAO,sBAAsB;;oHAAtB,sBAAsB;qHAAtB,sBAAsB,iBATlB,yBAAyB,EAAE,gCAAgC,aAExE,YAAY;QACZ,iBAAiB;QACjB,cAAc;QACd,uBAAuB,aAEf,yBAAyB,EAAE,gCAAgC;qHAE1D,sBAAsB,YARxB;YACP,YAAY;YACZ,iBAAiB;YACjB,cAAc;YACd,uBAAuB;SACxB;4FAGU,sBAAsB;kBAVlC,QAAQ;mBAAC;oBACR,YAAY,EAAE,CAAC,yBAAyB,EAAE,gCAAgC,CAAC;oBAC3E,OAAO,EAAE;wBACP,YAAY;wBACZ,iBAAiB;wBACjB,cAAc;wBACd,uBAAuB;qBACxB;oBACD,OAAO,EAAE,CAAC,yBAAyB,EAAE,gCAAgC,CAAC;iBACvE","sourcesContent":["import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { SkySectionedFormComponent } from './sectioned-form.component';\nimport { SkySectionedFormSectionComponent } from './sectioned-form-section.component';\nimport { SkyThemeModule } from '@skyux/theme';\nimport { SkyVerticalTabsetModule } from '../vertical-tabset/vertical-tabset.module';\nimport { SkyCheckboxModule } from '@skyux/forms';\n\n@NgModule({\n  declarations: [SkySectionedFormComponent, SkySectionedFormSectionComponent],\n  imports: [\n    CommonModule,\n    SkyCheckboxModule,\n    SkyThemeModule,\n    SkyVerticalTabsetModule,\n  ],\n  exports: [SkySectionedFormComponent, SkySectionedFormSectionComponent],\n})\nexport class SkySectionedFormModule {}\n"]}

package/esm2015/lib/modules/sectioned-form/sectioned-form.service.js

@@ -0,0 +1,35 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+import * as i0 from "@angular/core";
+export class SkySectionedFormService {
+    constructor() {
+        /**
+         * @internal
+         */
+        this.invalidChange = new BehaviorSubject(undefined);
+        /**
+         * @internal
+         */
+        this.requiredChange = new BehaviorSubject(undefined);
+    }
+    /**
+     * Sets the current section's invalid state based on the `isInvalid` parameter.
+     * This method is used within a `sky-sectioned-form-section` element.
+     */
+    invalidFieldChanged(isInvalid) {
+        this.invalidChange.next(isInvalid);
+    }
+    /**
+     * Sets the current section's required state based on the `isRequired` parameter.
+     * This method is used within a `sky-sectioned-form-section` element.
+     */
+    requiredFieldChanged(isRequired) {
+        this.requiredChange.next(isRequired);
+    }
+}
+SkySectionedFormService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkySectionedFormService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SkySectionedFormService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkySectionedFormService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkySectionedFormService, decorators: [{
+            type: Injectable
+        }] });
+//# sourceMappingURL=sectioned-form.service.js.map

package/esm2015/lib/modules/sectioned-form/sectioned-form.service.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sectioned-form.service.js","sourceRoot":"","sources":["../../../../../../../../libs/components/tabs/src/lib/modules/sectioned-form/sectioned-form.service.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,OAAO,EAAE,eAAe,EAAE,MAAM,MAAM,CAAC;;AAGvC,MAAM,OAAO,uBAAuB;IADpC;QAEE;;WAEG;QACI,kBAAa,GAA6B,IAAI,eAAe,CAClE,SAAS,CACV,CAAC;QACF;;WAEG;QACI,mBAAc,GAA6B,IAAI,eAAe,CACnE,SAAS,CACV,CAAC;KAiBH;IAfC;;;OAGG;IACI,mBAAmB,CAAC,SAAkB;QAC3C,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IACrC,CAAC;IAED;;;OAGG;IACI,oBAAoB,CAAC,UAAmB;QAC7C,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IACvC,CAAC;;qHA5BU,uBAAuB;yHAAvB,uBAAuB;4FAAvB,uBAAuB;kBADnC,UAAU","sourcesContent":["import { Injectable } from '@angular/core';\n\nimport { BehaviorSubject } from 'rxjs';\n\n@Injectable()\nexport class SkySectionedFormService {\n  /**\n   * @internal\n   */\n  public invalidChange: BehaviorSubject<boolean> = new BehaviorSubject(\n    undefined\n  );\n  /**\n   * @internal\n   */\n  public requiredChange: BehaviorSubject<boolean> = new BehaviorSubject(\n    undefined\n  );\n\n  /**\n   * Sets the current section's invalid state based on the `isInvalid` parameter.\n   * This method is used within a `sky-sectioned-form-section` element.\n   */\n  public invalidFieldChanged(isInvalid: boolean): void {\n    this.invalidChange.next(isInvalid);\n  }\n\n  /**\n   * Sets the current section's required state based on the `isRequired` parameter.\n   * This method is used within a `sky-sectioned-form-section` element.\n   */\n  public requiredFieldChanged(isRequired: boolean): void {\n    this.requiredChange.next(isRequired);\n  }\n}\n"]}

package/esm2015/lib/modules/shared/sky-tabs-resources.module.js

@@ -0,0 +1,52 @@
+/**
+ * NOTICE: DO NOT MODIFY THIS FILE!
+ * The contents of this file were automatically generated by
+ * the 'ng generate @skyux/i18n:lib-resources-module modules/shared/sky-tabs' schematic.
+ * To update this file, simply rerun the command.
+ */
+import { NgModule } from '@angular/core';
+import { getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS, } from '@skyux/i18n';
+import * as i0 from "@angular/core";
+const RESOURCES = {
+    'EN-US': {
+        skyux_tab_add: { message: 'Add tab' },
+        skyux_tab_close: { message: 'Close {0} tab' },
+        skyux_tabs_navigator_next: { message: 'Next' },
+        skyux_tabs_navigator_previous: { message: 'Previous' },
+        skyux_tab_open: { message: 'Open tab' },
+        skyux_vertical_tabs_show_tabs_text: { message: 'Tab list' },
+    },
+};
+export class SkyTabsResourcesProvider {
+    getString(localeInfo, name) {
+        return getLibStringForLocale(RESOURCES, localeInfo.locale, name);
+    }
+}
+/**
+ * Import into any component library module that needs to use resource strings.
+ */
+export class SkyTabsResourcesModule {
+}
+SkyTabsResourcesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTabsResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyTabsResourcesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTabsResourcesModule, exports: [SkyI18nModule] });
+SkyTabsResourcesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTabsResourcesModule, providers: [
+        {
+            provide: SKY_LIB_RESOURCES_PROVIDERS,
+            useClass: SkyTabsResourcesProvider,
+            multi: true,
+        },
+    ], imports: [SkyI18nModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTabsResourcesModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    exports: [SkyI18nModule],
+                    providers: [
+                        {
+                            provide: SKY_LIB_RESOURCES_PROVIDERS,
+                            useClass: SkyTabsResourcesProvider,
+                            multi: true,
+                        },
+                    ],
+                }]
+        }] });
+//# sourceMappingURL=sky-tabs-resources.module.js.map

package/esm2015/lib/modules/shared/sky-tabs-resources.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sky-tabs-resources.module.js","sourceRoot":"","sources":["../../../../../../../../libs/components/tabs/src/lib/modules/shared/sky-tabs-resources.module.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EACL,qBAAqB,EAErB,aAAa,EAGb,2BAA2B,GAC5B,MAAM,aAAa,CAAC;;AAErB,MAAM,SAAS,GAA0C;IACvD,OAAO,EAAE;QACP,aAAa,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QACrC,eAAe,EAAE,EAAE,OAAO,EAAE,eAAe,EAAE;QAC7C,yBAAyB,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAC9C,6BAA6B,EAAE,EAAE,OAAO,EAAE,UAAU,EAAE;QACtD,cAAc,EAAE,EAAE,OAAO,EAAE,UAAU,EAAE;QACvC,kCAAkC,EAAE,EAAE,OAAO,EAAE,UAAU,EAAE;KAC5D;CACF,CAAC;AAEF,MAAM,OAAO,wBAAwB;IAC5B,SAAS,CAAC,UAA4B,EAAE,IAAY;QACzD,OAAO,qBAAqB,CAAC,SAAS,EAAE,UAAU,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IACnE,CAAC;CACF;AAED;;GAEG;AAWH,MAAM,OAAO,sBAAsB;;oHAAtB,sBAAsB;qHAAtB,sBAAsB,YATvB,aAAa;qHASZ,sBAAsB,aARtB;QACT;YACE,OAAO,EAAE,2BAA2B;YACpC,QAAQ,EAAE,wBAAwB;YAClC,KAAK,EAAE,IAAI;SACZ;KACF,YAPS,aAAa;4FASZ,sBAAsB;kBAVlC,QAAQ;mBAAC;oBACR,OAAO,EAAE,CAAC,aAAa,CAAC;oBACxB,SAAS,EAAE;wBACT;4BACE,OAAO,EAAE,2BAA2B;4BACpC,QAAQ,EAAE,wBAAwB;4BAClC,KAAK,EAAE,IAAI;yBACZ;qBACF;iBACF","sourcesContent":["/**\n * NOTICE: DO NOT MODIFY THIS FILE!\n * The contents of this file were automatically generated by\n * the 'ng generate @skyux/i18n:lib-resources-module modules/shared/sky-tabs' schematic.\n * To update this file, simply rerun the command.\n */\n\nimport { NgModule } from '@angular/core';\nimport {\n  getLibStringForLocale,\n  SkyAppLocaleInfo,\n  SkyI18nModule,\n  SkyLibResources,\n  SkyLibResourcesProvider,\n  SKY_LIB_RESOURCES_PROVIDERS,\n} from '@skyux/i18n';\n\nconst RESOURCES: { [locale: string]: SkyLibResources } = {\n  'EN-US': {\n    skyux_tab_add: { message: 'Add tab' },\n    skyux_tab_close: { message: 'Close {0} tab' },\n    skyux_tabs_navigator_next: { message: 'Next' },\n    skyux_tabs_navigator_previous: { message: 'Previous' },\n    skyux_tab_open: { message: 'Open tab' },\n    skyux_vertical_tabs_show_tabs_text: { message: 'Tab list' },\n  },\n};\n\nexport class SkyTabsResourcesProvider implements SkyLibResourcesProvider {\n  public getString(localeInfo: SkyAppLocaleInfo, name: string): string {\n    return getLibStringForLocale(RESOURCES, localeInfo.locale, name);\n  }\n}\n\n/**\n * Import into any component library module that needs to use resource strings.\n */\n@NgModule({\n  exports: [SkyI18nModule],\n  providers: [\n    {\n      provide: SKY_LIB_RESOURCES_PROVIDERS,\n      useClass: SkyTabsResourcesProvider,\n      multi: true,\n    },\n  ],\n})\nexport class SkyTabsResourcesModule {}\n"]}

package/esm2015/{modules → lib/modules}/tabs/tab-button.component.js

@@ -73,4 +73,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }], closeClick: [{
                 type: Output
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFiLWJ1dHRvbi5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy90YWJzL3NyYy9tb2R1bGVzL3RhYnMvdGFiLWJ1dHRvbi5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy90YWJzL3NyYy9tb2R1bGVzL3RhYnMvdGFiLWJ1dHRvbi5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0wsdUJBQXVCLEVBQ3ZCLFNBQVMsRUFDVCxZQUFZLEVBQ1osS0FBSyxFQUNMLE1BQU0sRUFDTixpQkFBaUIsR0FDbEIsTUFBTSxlQUFlLENBQUM7Ozs7O0FBSXZCOztHQUVHO0FBUUgsTUFBTSxPQUFPLHFCQUFxQjtJQVBsQztRQW9DUyxnQkFBVyxHQUFHLElBQUksWUFBWSxFQUFRLENBQUM7UUFHdkMsZUFBVSxHQUFHLElBQUksWUFBWSxFQUFRLENBQUM7S0FnQzlDO0lBOUJRLGFBQWEsQ0FBQyxLQUFVO1FBQzdCLElBQUksQ0FBQyxJQUFJLENBQUMsUUFBUSxFQUFFO1lBQ2xCLElBQUksQ0FBQyxXQUFXLENBQUMsSUFBSSxFQUFFLENBQUM7WUFDeEIsS0FBSyxDQUFDLGNBQWMsRUFBRSxDQUFDO1NBQ3hCO0lBQ0gsQ0FBQztJQUVNLGtCQUFrQixDQUFDLEtBQW9CO1FBQzVDLHlCQUF5QjtRQUN6QixJQUFJLEtBQUssQ0FBQyxHQUFHLEVBQUU7WUFDYixRQUFRLEtBQUssQ0FBQyxHQUFHLENBQUMsV0FBVyxFQUFFLEVBQUU7Z0JBQy9CLEtBQUssR0FBRyxDQUFDO2dCQUNULEtBQUssT0FBTztvQkFDVixJQUFJLENBQUMsYUFBYSxDQUFDLEtBQUssQ0FBQyxDQUFDO29CQUMxQixNQUFNO2dCQUNSLDBCQUEwQjtnQkFDMUI7b0JBQ0UsTUFBTTthQUNUO1NBQ0Y7SUFDSCxDQUFDO0lBRU0sWUFBWSxDQUFDLEtBQVU7UUFDNUIsSUFBSSxDQUFDLFVBQVUsQ0FBQyxJQUFJLEVBQUUsQ0FBQztRQUV2Qiw4REFBOEQ7UUFDOUQsNENBQTRDO1FBQzVDLEtBQUssQ0FBQyxlQUFlLEVBQUUsQ0FBQztRQUN4QixLQUFLLENBQUMsY0FBYyxFQUFFLENBQUM7SUFDekIsQ0FBQzs7bUhBL0RVLHFCQUFxQjt1R0FBckIscUJBQXFCLHVXQ3JCbEMsNnhDQStDQTs0RkQxQmEscUJBQXFCO2tCQVBqQyxTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSxnQkFBZ0I7b0JBQzFCLFdBQVcsRUFBRSw2QkFBNkI7b0JBQzFDLFNBQVMsRUFBRSxDQUFDLDZCQUE2QixDQUFDO29CQUMxQyxlQUFlLEVBQUUsdUJBQXVCLENBQUMsTUFBTTtvQkFDL0MsYUFBYSxFQUFFLGlCQUFpQixDQUFDLElBQUk7aUJBQ3RDOzhCQUdRLE1BQU07c0JBRFosS0FBSztnQkFJQyxZQUFZO3NCQURsQixLQUFLO2dCQUlDLFVBQVU7c0JBRGhCLEtBQUs7Z0JBSUMsUUFBUTtzQkFEZCxLQUFLO2dCQUlDLFVBQVU7c0JBRGhCLEtBQUs7Z0JBSUMsZUFBZTtzQkFEckIsS0FBSztnQkFJQyxTQUFTO3NCQURmLEtBQUs7Z0JBSUMsUUFBUTtzQkFEZCxLQUFLO2dCQUlDLFFBQVE7c0JBRGQsS0FBSztnQkFJQyxXQUFXO3NCQURqQixNQUFNO2dCQUlBLFVBQVU7c0JBRGhCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcbiAgQ29tcG9uZW50LFxuICBFdmVudEVtaXR0ZXIsXG4gIElucHV0LFxuICBPdXRwdXQsXG4gIFZpZXdFbmNhcHN1bGF0aW9uLFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuaW1wb3J0IHsgU2t5VGFic2V0U3R5bGUgfSBmcm9tICcuL3RhYnNldC1zdHlsZSc7XG5cbi8qKlxuICogQGludGVybmFsXG4gKi9cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3NreS10YWItYnV0dG9uJyxcbiAgdGVtcGxhdGVVcmw6ICcuL3RhYi1idXR0b24uY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi90YWItYnV0dG9uLmNvbXBvbmVudC5zY3NzJ10sXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxuICBlbmNhcHN1bGF0aW9uOiBWaWV3RW5jYXBzdWxhdGlvbi5Ob25lLFxufSlcbmV4cG9ydCBjbGFzcyBTa3lUYWJCdXR0b25Db21wb25lbnQge1xuICBASW5wdXQoKVxuICBwdWJsaWMgYWN0aXZlOiBib29sZWFuO1xuXG4gIEBJbnB1dCgpXG4gIHB1YmxpYyBhcmlhQ29udHJvbHM6IHN0cmluZztcblxuICBASW5wdXQoKVxuICBwdWJsaWMgYnV0dG9uSHJlZjogc3RyaW5nO1xuXG4gIEBJbnB1dCgpXG4gIHB1YmxpYyBidXR0b25JZDogc3RyaW5nO1xuXG4gIEBJbnB1dCgpXG4gIHB1YmxpYyBidXR0b25UZXh0OiBzdHJpbmc7XG5cbiAgQElucHV0KClcbiAgcHVibGljIGJ1dHRvblRleHRDb3VudDogc3RyaW5nIHwgdW5kZWZpbmVkO1xuXG4gIEBJbnB1dCgpXG4gIHB1YmxpYyBjbG9zZWFibGU6IGJvb2xlYW47XG5cbiAgQElucHV0KClcbiAgcHVibGljIGRpc2FibGVkOiBib29sZWFuO1xuXG4gIEBJbnB1dCgpXG4gIHB1YmxpYyB0YWJTdHlsZTogU2t5VGFic2V0U3R5bGU7XG5cbiAgQE91dHB1dCgpXG4gIHB1YmxpYyBidXR0b25DbGljayA9IG5ldyBFdmVudEVtaXR0ZXI8dm9pZD4oKTtcblxuICBAT3V0cHV0KClcbiAgcHVibGljIGNsb3NlQ2xpY2sgPSBuZXcgRXZlbnRFbWl0dGVyPHZvaWQ+KCk7XG5cbiAgcHVibGljIG9uQnV0dG9uQ2xpY2soZXZlbnQ6IGFueSk6IHZvaWQge1xuICAgIGlmICghdGhpcy5kaXNhYmxlZCkge1xuICAgICAgdGhpcy5idXR0b25DbGljay5lbWl0KCk7XG4gICAgICBldmVudC5wcmV2ZW50RGVmYXVsdCgpO1xuICAgIH1cbiAgfVxuXG4gIHB1YmxpYyBvblRhYkJ1dHRvbktleURvd24oZXZlbnQ6IEtleWJvYXJkRXZlbnQpOiB2b2lkIHtcbiAgICAvKmlzdGFuYnVsIGlnbm9yZSBlbHNlICovXG4gICAgaWYgKGV2ZW50LmtleSkge1xuICAgICAgc3dpdGNoIChldmVudC5rZXkudG9VcHBlckNhc2UoKSkge1xuICAgICAgICBjYXNlICcgJzpcbiAgICAgICAgY2FzZSAnRU5URVInOlxuICAgICAgICAgIHRoaXMub25CdXR0b25DbGljayhldmVudCk7XG4gICAgICAgICAgYnJlYWs7XG4gICAgICAgIC8qIGlzdGFuYnVsIGlnbm9yZSBuZXh0ICovXG4gICAgICAgIGRlZmF1bHQ6XG4gICAgICAgICAgYnJlYWs7XG4gICAgICB9XG4gICAgfVxuICB9XG5cbiAgcHVibGljIG9uQ2xvc2VDbGljayhldmVudDogYW55KTogdm9pZCB7XG4gICAgdGhpcy5jbG9zZUNsaWNrLmVtaXQoKTtcblxuICAgIC8vIFByZXZlbnQgdGhlIGNsaWNrIGV2ZW50IGZyb20gYnViYmxpbmcgdXAgdG8gdGhlIGFuY2hvciB0YWc7XG4gICAgLy8gb3RoZXJ3aXNlIGl0IHdpbGwgdHJpZ2dlciBhIHBhZ2UgcmVmcmVzaC5cbiAgICBldmVudC5zdG9wUHJvcGFnYXRpb24oKTtcbiAgICBldmVudC5wcmV2ZW50RGVmYXVsdCgpO1xuICB9XG59XG4iLCI8ZGl2XG4gIGNsYXNzPVwic2t5LWJ0bi10YWItd3JhcHBlclwiXG4gIFtuZ0NsYXNzXT1cIntcbiAgICAnc2t5LWJ0bi10YWItd3JhcHBlci1zZWxlY3RlZCc6IGFjdGl2ZSxcbiAgICAnc2t5LWJ0bi10YWItd3JhcHBlci1kaXNhYmxlZCc6IGRpc2FibGVkXG4gIH1cIlxuPlxuICA8YVxuICAgIGNsYXNzPVwic2t5LWJ0bi10YWJcIlxuICAgIHJvbGU9XCJ0YWJcIlxuICAgIFthdHRyLmFyaWEtY29udHJvbHNdPVwiYXJpYUNvbnRyb2xzXCJcbiAgICBbYXR0ci5hcmlhLWRpc2FibGVkXT1cImRpc2FibGVkXCJcbiAgICBbYXR0ci5hcmlhLXNlbGVjdGVkXT1cImFjdGl2ZVwiXG4gICAgW2F0dHIuaHJlZl09XCJidXR0b25IcmVmXCJcbiAgICBbaWRdPVwiYnV0dG9uSWRcIlxuICAgIFtuZ0NsYXNzXT1cIntcbiAgICAgICdza3ktYnRuLXRhYi13aXphcmQnOiB0YWJTdHlsZSA9PT0gJ3dpemFyZCcsXG4gICAgICAnc2t5LWJ0bi10YWItc2VsZWN0ZWQnOiBhY3RpdmUsXG4gICAgICAnc2t5LWJ0bi10YWItZGlzYWJsZWQnOiBkaXNhYmxlZCxcbiAgICAgICdza3ktdGFiLWJ0bi1jbG9zZWFibGUnOiBjbG9zZWFibGVcbiAgICB9XCJcbiAgICBbdGFiaW5kZXhdPVwiZGlzYWJsZWQgPyAnLTEnIDogJzAnXCJcbiAgICAoY2xpY2spPVwib25CdXR0b25DbGljaygkZXZlbnQpXCJcbiAgICAoa2V5ZG93bik9XCJvblRhYkJ1dHRvbktleURvd24oJGV2ZW50KVwiXG4gID5cbiAgICA8c3BhbiBjbGFzcz1cInNreS10YWItaGVhZGluZ1wiPlxuICAgICAge3sgYnV0dG9uVGV4dCB9fVxuICAgICAgPHNwYW4gKm5nSWY9XCJidXR0b25UZXh0Q291bnQgIT09IHVuZGVmaW5lZFwiIGNsYXNzPVwic2t5LXRhYi1oZWFkZXItY291bnRcIj5cbiAgICAgICAge3sgYnV0dG9uVGV4dENvdW50IH19XG4gICAgICA8L3NwYW4+XG4gICAgPC9zcGFuPlxuICA8L2E+XG5cbiAgPGJ1dHRvblxuICAgICpuZ0lmPVwiY2xvc2VhYmxlXCJcbiAgICBjbGFzcz1cInNreS1idG4tdGFiLWNsb3NlXCJcbiAgICB0eXBlPVwiYnV0dG9uXCJcbiAgICBbYXR0ci5hcmlhLWxhYmVsXT1cIidza3l1eF90YWJfY2xvc2UnIHwgc2t5TGliUmVzb3VyY2VzOiBidXR0b25UZXh0XCJcbiAgICBbZGlzYWJsZWRdPVwiZGlzYWJsZWRcIlxuICAgIFtuZ0NsYXNzXT1cIntcbiAgICAgICdza3ktYnRuLXRhYi1jbG9zZS1kaXNhYmxlZCc6IGRpc2FibGVkXG4gICAgfVwiXG4gICAgKGNsaWNrKT1cIm9uQ2xvc2VDbGljaygkZXZlbnQpXCJcbiAgPlxuICAgIDxza3ktaWNvbiBpY29uPVwicmVtb3ZlXCI+PC9za3ktaWNvbj5cbiAgPC9idXR0b24+XG48L2Rpdj5cbiJdfQ==
+//# sourceMappingURL=tab-button.component.js.map

package/esm2015/lib/modules/tabs/tab-button.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-button.component.js","sourceRoot":"","sources":["../../../../../../../../libs/components/tabs/src/lib/modules/tabs/tab-button.component.ts","../../../../../../../../libs/components/tabs/src/lib/modules/tabs/tab-button.component.html"],"names":[],"mappings":"AAAA,OAAO,EACL,uBAAuB,EACvB,SAAS,EACT,YAAY,EACZ,KAAK,EACL,MAAM,EACN,iBAAiB,GAClB,MAAM,eAAe,CAAC;;;;;AAIvB;;GAEG;AAQH,MAAM,OAAO,qBAAqB;IAPlC;QAoCS,gBAAW,GAAG,IAAI,YAAY,EAAQ,CAAC;QAGvC,eAAU,GAAG,IAAI,YAAY,EAAQ,CAAC;KAgC9C;IA9BQ,aAAa,CAAC,KAAU;QAC7B,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAClB,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;YACxB,KAAK,CAAC,cAAc,EAAE,CAAC;SACxB;IACH,CAAC;IAEM,kBAAkB,CAAC,KAAoB;QAC5C,yBAAyB;QACzB,IAAI,KAAK,CAAC,GAAG,EAAE;YACb,QAAQ,KAAK,CAAC,GAAG,CAAC,WAAW,EAAE,EAAE;gBAC/B,KAAK,GAAG,CAAC;gBACT,KAAK,OAAO;oBACV,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;oBAC1B,MAAM;gBACR,0BAA0B;gBAC1B;oBACE,MAAM;aACT;SACF;IACH,CAAC;IAEM,YAAY,CAAC,KAAU;QAC5B,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;QAEvB,8DAA8D;QAC9D,4CAA4C;QAC5C,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,KAAK,CAAC,cAAc,EAAE,CAAC;IACzB,CAAC;;mHA/DU,qBAAqB;uGAArB,qBAAqB,uWCrBlC,6xCA+CA;4FD1Ba,qBAAqB;kBAPjC,SAAS;mBAAC;oBACT,QAAQ,EAAE,gBAAgB;oBAC1B,WAAW,EAAE,6BAA6B;oBAC1C,SAAS,EAAE,CAAC,6BAA6B,CAAC;oBAC1C,eAAe,EAAE,uBAAuB,CAAC,MAAM;oBAC/C,aAAa,EAAE,iBAAiB,CAAC,IAAI;iBACtC;8BAGQ,MAAM;sBADZ,KAAK;gBAIC,YAAY;sBADlB,KAAK;gBAIC,UAAU;sBADhB,KAAK;gBAIC,QAAQ;sBADd,KAAK;gBAIC,UAAU;sBADhB,KAAK;gBAIC,eAAe;sBADrB,KAAK;gBAIC,SAAS;sBADf,KAAK;gBAIC,QAAQ;sBADd,KAAK;gBAIC,QAAQ;sBADd,KAAK;gBAIC,WAAW;sBADjB,MAAM;gBAIA,UAAU;sBADhB,MAAM","sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  EventEmitter,\n  Input,\n  Output,\n  ViewEncapsulation,\n} from '@angular/core';\n\nimport { SkyTabsetStyle } from './tabset-style';\n\n/**\n * @internal\n */\n@Component({\n  selector: 'sky-tab-button',\n  templateUrl: './tab-button.component.html',\n  styleUrls: ['./tab-button.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n})\nexport class SkyTabButtonComponent {\n  @Input()\n  public active: boolean;\n\n  @Input()\n  public ariaControls: string;\n\n  @Input()\n  public buttonHref: string;\n\n  @Input()\n  public buttonId: string;\n\n  @Input()\n  public buttonText: string;\n\n  @Input()\n  public buttonTextCount: string | undefined;\n\n  @Input()\n  public closeable: boolean;\n\n  @Input()\n  public disabled: boolean;\n\n  @Input()\n  public tabStyle: SkyTabsetStyle;\n\n  @Output()\n  public buttonClick = new EventEmitter<void>();\n\n  @Output()\n  public closeClick = new EventEmitter<void>();\n\n  public onButtonClick(event: any): void {\n    if (!this.disabled) {\n      this.buttonClick.emit();\n      event.preventDefault();\n    }\n  }\n\n  public onTabButtonKeyDown(event: KeyboardEvent): void {\n    /*istanbul ignore else */\n    if (event.key) {\n      switch (event.key.toUpperCase()) {\n        case ' ':\n        case 'ENTER':\n          this.onButtonClick(event);\n          break;\n        /* istanbul ignore next */\n        default:\n          break;\n      }\n    }\n  }\n\n  public onCloseClick(event: any): void {\n    this.closeClick.emit();\n\n    // Prevent the click event from bubbling up to the anchor tag;\n    // otherwise it will trigger a page refresh.\n    event.stopPropagation();\n    event.preventDefault();\n  }\n}\n","<div\n  class=\"sky-btn-tab-wrapper\"\n  [ngClass]=\"{\n    'sky-btn-tab-wrapper-selected': active,\n    'sky-btn-tab-wrapper-disabled': disabled\n  }\"\n>\n  <a\n    class=\"sky-btn-tab\"\n    role=\"tab\"\n    [attr.aria-controls]=\"ariaControls\"\n    [attr.aria-disabled]=\"disabled\"\n    [attr.aria-selected]=\"active\"\n    [attr.href]=\"buttonHref\"\n    [id]=\"buttonId\"\n    [ngClass]=\"{\n      'sky-btn-tab-wizard': tabStyle === 'wizard',\n      'sky-btn-tab-selected': active,\n      'sky-btn-tab-disabled': disabled,\n      'sky-tab-btn-closeable': closeable\n    }\"\n    [tabindex]=\"disabled ? '-1' : '0'\"\n    (click)=\"onButtonClick($event)\"\n    (keydown)=\"onTabButtonKeyDown($event)\"\n  >\n    <span class=\"sky-tab-heading\">\n      {{ buttonText }}\n      <span *ngIf=\"buttonTextCount !== undefined\" class=\"sky-tab-header-count\">\n        {{ buttonTextCount }}\n      </span>\n    </span>\n  </a>\n\n  <button\n    *ngIf=\"closeable\"\n    class=\"sky-btn-tab-close\"\n    type=\"button\"\n    [attr.aria-label]=\"'skyux_tab_close' | skyLibResources: buttonText\"\n    [disabled]=\"disabled\"\n    [ngClass]=\"{\n      'sky-btn-tab-close-disabled': disabled\n    }\"\n    (click)=\"onCloseClick($event)\"\n  >\n    <sky-icon icon=\"remove\"></sky-icon>\n  </button>\n</div>\n"]}

package/esm2015/lib/modules/tabs/tab-index.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=tab-index.js.map

package/esm2015/lib/modules/tabs/tab-index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-index.js","sourceRoot":"","sources":["../../../../../../../../libs/components/tabs/src/lib/modules/tabs/tab-index.ts"],"names":[],"mappings":"","sourcesContent":["export type SkyTabIndex = string | number;\n"]}

package/esm2015/lib/modules/tabs/tab.component.js

@@ -0,0 +1,135 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, Output, } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+import { SkyTabsetPermalinkService } from './tabset-permalink.service';
+import { SkyTabsetService } from './tabset.service';
+import * as i0 from "@angular/core";
+import * as i1 from "./tabset-permalink.service";
+import * as i2 from "./tabset.service";
+let nextId = 0;
+export class SkyTabComponent {
+    constructor(changeDetector, permalinkService, tabsetService) {
+        this.changeDetector = changeDetector;
+        this.permalinkService = permalinkService;
+        this.tabsetService = tabsetService;
+        /**
+         * 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.
+         */
+        this.close = new EventEmitter(); // eslint-disable-line @angular-eslint/no-output-native
+        this.showContent = false;
+        this._activeChange = new BehaviorSubject(undefined);
+        this._stateChange = new BehaviorSubject(undefined);
+        this._tabIndexChange = new BehaviorSubject(undefined);
+        const id = nextId++;
+        this.tabPanelId = `sky-tab-${id}`;
+        this.tabButtonId = `${this.tabPanelId}-nav-btn`;
+    }
+    /**
+     * Indicates whether the tab is active when the tabset loads. After initialization, the `active`
+     * property on the tabset component should be used to set the active tab.
+     * @default false
+     */
+    set active(value) {
+        if (value !== undefined && value !== this._active) {
+            this._active = value;
+            this._activeChange.next();
+        }
+    }
+    get active() {
+        return this._active || false;
+    }
+    get activeChange() {
+        return this._activeChange.asObservable();
+    }
+    /**
+     * Specifies a custom query parameter value for the tab.
+     * This works in conjunction with the tabset's `permalinkId` to distinguish
+     * the tab's unique state in the URL by generating a query parameter that is
+     * written as `?<queryParam>-active-tab=<sanitized-tab-heading`.
+     * By default, the query parameter's value is parsed automatically from the tab's heading text.
+     */
+    set permalinkValue(value) {
+        this._permalinkValue = this.permalinkService.urlify(value);
+    }
+    get permalinkValue() {
+        return (this._permalinkValue || this.permalinkService.urlify(this.tabHeading));
+    }
+    /**
+     * Specifies a unique identifier for the tab.
+     * If not defined, the identifier is set to the position of the tab on load, starting with `0`.
+     */
+    set tabIndex(value) {
+        if (value !== this._tabIndex &&
+            value !== undefined &&
+            this._tabIndex !== undefined) {
+            this.tabsetService.updateTabIndex(this._tabIndex, value);
+            this._tabIndexChange.next(value);
+        }
+        this._tabIndex = value;
+    }
+    get tabIndex() {
+        return this._tabIndex;
+    }
+    get closeable() {
+        return this.close.observers.length > 0;
+    }
+    /**
+     * Alerts the tabset component when this component has changes that need to be reflected in the UI.
+     */
+    get stateChange() {
+        return this._stateChange.asObservable();
+    }
+    get tabIndexChange() {
+        return this._tabIndexChange.asObservable();
+    }
+    ngOnChanges(changes) {
+        if ((changes.disabled && !changes.disabled.firstChange) ||
+            (changes.tabHeading && !changes.tabHeading.firstChange) ||
+            (changes.tabHeaderCount && !changes.tabHeaderCount.firstChange) ||
+            (changes.permalinkValue && !changes.permalinkValue.firstChange)) {
+            this._stateChange.next();
+        }
+    }
+    ngOnDestroy() {
+        this._stateChange.complete();
+        this.tabsetService.unregisterTab(this.tabIndex);
+    }
+    init() {
+        this._tabIndex = this.tabsetService.registerTab(this.tabIndex);
+    }
+    activate() {
+        this._active = true;
+        this.showContent = true;
+        this.changeDetector.markForCheck();
+    }
+    deactivate() {
+        this._active = false;
+        this.showContent = false;
+        this.changeDetector.markForCheck();
+    }
+}
+SkyTabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTabComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.SkyTabsetPermalinkService }, { token: i2.SkyTabsetService }], target: i0.ɵɵFactoryTarget.Component });
+SkyTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyTabComponent, selector: "sky-tab", inputs: { active: "active", disabled: "disabled", permalinkValue: "permalinkValue", tabHeaderCount: "tabHeaderCount", tabHeading: "tabHeading", tabIndex: "tabIndex" }, outputs: { close: "close" }, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"sky-tab\"\n  role=\"tabpanel\"\n  [attr.aria-labelledby]=\"tabButtonId\"\n  [hidden]=\"!showContent\"\n  [id]=\"tabPanelId\"\n>\n  <ng-content></ng-content>\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTabComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-tab',
+                    templateUrl: './tab.component.html',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.SkyTabsetPermalinkService }, { type: i2.SkyTabsetService }]; }, propDecorators: { active: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], permalinkValue: [{
+                type: Input
+            }], tabHeaderCount: [{
+                type: Input
+            }], tabHeading: [{
+                type: Input
+            }], tabIndex: [{
+                type: Input
+            }], close: [{
+                type: Output
+            }] } });
+//# sourceMappingURL=tab.component.js.map

package/esm2015/lib/modules/tabs/tab.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab.component.js","sourceRoot":"","sources":["../../../../../../../../libs/components/tabs/src/lib/modules/tabs/tab.component.ts","../../../../../../../../libs/components/tabs/src/lib/modules/tabs/tab.component.html"],"names":[],"mappings":"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","sourcesContent":["import {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  EventEmitter,\n  Input,\n  OnChanges,\n  OnDestroy,\n  Output,\n  SimpleChanges,\n} from '@angular/core';\n\nimport { BehaviorSubject, Observable } from 'rxjs';\n\nimport { SkyTabIndex } from './tab-index';\n\nimport { SkyTabsetPermalinkService } from './tabset-permalink.service';\n\nimport { SkyTabsetService } from './tabset.service';\n\nlet nextId = 0;\n\n@Component({\n  selector: 'sky-tab',\n  templateUrl: './tab.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SkyTabComponent implements OnChanges, OnDestroy {\n  /**\n   * Indicates whether the tab is active when the tabset loads. After initialization, the `active`\n   * property on the tabset component should be used to set the active tab.\n   * @default false\n   */\n  @Input()\n  public set active(value: boolean) {\n    if (value !== undefined && value !== this._active) {\n      this._active = value;\n      this._activeChange.next();\n    }\n  }\n\n  public get active(): boolean {\n    return this._active || false;\n  }\n\n  public get activeChange(): Observable<void> {\n    return this._activeChange.asObservable();\n  }\n\n  /**\n   * Indicates whether to disable the tab.\n   * @default false\n   */\n  @Input()\n  public disabled: boolean;\n\n  /**\n   * Specifies a custom query parameter value for the tab.\n   * This works in conjunction with the tabset's `permalinkId` to distinguish\n   * the tab's unique state in the URL by generating a query parameter that is\n   * written as `?<queryParam>-active-tab=<sanitized-tab-heading`.\n   * By default, the query parameter's value is parsed automatically from the tab's heading text.\n   */\n  @Input()\n  public set permalinkValue(value: string) {\n    this._permalinkValue = this.permalinkService.urlify(value);\n  }\n\n  public get permalinkValue(): string {\n    return (\n      this._permalinkValue || this.permalinkService.urlify(this.tabHeading)\n    );\n  }\n\n  /**\n   * Displays a counter beside the tab header.\n   */\n  @Input()\n  public tabHeaderCount: string | undefined;\n\n  /**\n   * Specifies the tab header.\n   * When using tabs as the main navigation on a page,\n   * use [the Angular `Title` service](https://angular.io/docs/ts/latest/cookbook/set-document-title.html)\n   * and [the SKY UX `title` configuration property](https://developer.blackbaud.com/skyux/learn/reference/configuration#app)\n   * to reflect the tab header in the page title.\n   * @required\n   */\n  @Input()\n  public tabHeading: string;\n\n  /**\n   * Specifies a unique identifier for the tab.\n   * If not defined, the identifier is set to the position of the tab on load, starting with `0`.\n   */\n  @Input()\n  public set tabIndex(value: SkyTabIndex) {\n    if (\n      value !== this._tabIndex &&\n      value !== undefined &&\n      this._tabIndex !== undefined\n    ) {\n      this.tabsetService.updateTabIndex(this._tabIndex, value);\n      this._tabIndexChange.next(value);\n    }\n\n    this._tabIndex = value;\n  }\n\n  public get tabIndex(): SkyTabIndex {\n    return this._tabIndex;\n  }\n\n  /**\n   * Fires when users click the button to close the tab.\n   * The close button is added to the tab when you specify a listener for this event.\n   */\n  @Output()\n  public close = new EventEmitter<void>(); // eslint-disable-line @angular-eslint/no-output-native\n\n  public get closeable(): boolean {\n    return this.close.observers.length > 0;\n  }\n\n  /**\n   * Alerts the tabset component when this component has changes that need to be reflected in the UI.\n   */\n  public get stateChange(): Observable<void> {\n    return this._stateChange.asObservable();\n  }\n\n  public get tabIndexChange(): Observable<SkyTabIndex> {\n    return this._tabIndexChange.asObservable();\n  }\n\n  public showContent: boolean = false;\n\n  public tabButtonId: string;\n\n  public tabPanelId: string;\n\n  private _active: boolean;\n\n  private _activeChange = new BehaviorSubject<void>(undefined);\n\n  private _permalinkValue: string;\n\n  private _stateChange = new BehaviorSubject<void>(undefined);\n\n  private _tabIndex: SkyTabIndex;\n\n  private _tabIndexChange = new BehaviorSubject<SkyTabIndex>(undefined);\n\n  constructor(\n    private changeDetector: ChangeDetectorRef,\n    private permalinkService: SkyTabsetPermalinkService,\n    private tabsetService: SkyTabsetService\n  ) {\n    const id = nextId++;\n    this.tabPanelId = `sky-tab-${id}`;\n    this.tabButtonId = `${this.tabPanelId}-nav-btn`;\n  }\n\n  public ngOnChanges(changes: SimpleChanges): void {\n    if (\n      (changes.disabled && !changes.disabled.firstChange) ||\n      (changes.tabHeading && !changes.tabHeading.firstChange) ||\n      (changes.tabHeaderCount && !changes.tabHeaderCount.firstChange) ||\n      (changes.permalinkValue && !changes.permalinkValue.firstChange)\n    ) {\n      this._stateChange.next();\n    }\n  }\n\n  public ngOnDestroy(): void {\n    this._stateChange.complete();\n    this.tabsetService.unregisterTab(this.tabIndex);\n  }\n\n  public init(): void {\n    this._tabIndex = this.tabsetService.registerTab(this.tabIndex);\n  }\n\n  public activate(): void {\n    this._active = true;\n    this.showContent = true;\n    this.changeDetector.markForCheck();\n  }\n\n  public deactivate(): void {\n    this._active = false;\n    this.showContent = false;\n    this.changeDetector.markForCheck();\n  }\n}\n","<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"]}