@skyux/tabs 5.0.3 → 5.5.0-alpha.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/lib/modules/tabs/tab-button.component.js

@@ -0,0 +1,76 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, ViewEncapsulation, } from '@angular/core';
+import * as i0 from "@angular/core";
+import * as i1 from "@skyux/indicators";
+import * as i2 from "@angular/common";
+import * as i3 from "@skyux/i18n";
+/**
+ * @internal
+ */
+export class SkyTabButtonComponent {
+    constructor() {
+        this.buttonClick = new EventEmitter();
+        this.closeClick = new EventEmitter();
+    }
+    onButtonClick(event) {
+        if (!this.disabled) {
+            this.buttonClick.emit();
+            event.preventDefault();
+        }
+    }
+    onTabButtonKeyDown(event) {
+        /*istanbul ignore else */
+        if (event.key) {
+            switch (event.key.toUpperCase()) {
+                case ' ':
+                case 'ENTER':
+                    this.onButtonClick(event);
+                    break;
+                /* istanbul ignore next */
+                default:
+                    break;
+            }
+        }
+    }
+    onCloseClick(event) {
+        this.closeClick.emit();
+        // Prevent the click event from bubbling up to the anchor tag;
+        // otherwise it will trigger a page refresh.
+        event.stopPropagation();
+        event.preventDefault();
+    }
+}
+SkyTabButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTabButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyTabButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyTabButtonComponent, selector: "sky-tab-button", inputs: { active: "active", ariaControls: "ariaControls", buttonHref: "buttonHref", buttonId: "buttonId", buttonText: "buttonText", buttonTextCount: "buttonTextCount", closeable: "closeable", disabled: "disabled", tabStyle: "tabStyle" }, outputs: { buttonClick: "buttonClick", closeClick: "closeClick" }, ngImport: i0, template: "<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", styles: [".sky-btn-tab-wrapper{display:inline-block;position:relative;margin-right:5px}.sky-btn-tab-wrapper .sky-btn-tab-close{position:absolute;top:10px;right:10px;color:#686c73}.sky-btn-tab-wrapper .sky-btn-tab-close:hover{color:#212327;transition:color .15s}.sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:#fff}.sky-tab-btn-closeable{padding-right:43px}:host-context(.sky-theme-modern) .sky-btn-tab-wrapper{margin-right:10px}:host-context(.sky-theme-modern) .sky-btn-tab-wrapper .sky-btn-tab-close{top:12px;right:10px}:host-context(.sky-theme-modern) .sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:#686c73}:host-context(.sky-theme-modern) .sky-tab-btn-closeable{padding-right:44px}.sky-theme-modern .sky-btn-tab-wrapper{margin-right:10px}.sky-theme-modern .sky-btn-tab-wrapper .sky-btn-tab-close{top:12px;right:10px}.sky-theme-modern .sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:#686c73}.sky-theme-modern .sky-tab-btn-closeable{padding-right:44px}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-btn-tab-wrapper .sky-btn-tab-close{color:#eeeeef}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:#eeeeef}.sky-theme-modern.sky-theme-mode-dark .sky-btn-tab-wrapper .sky-btn-tab-close{color:#eeeeef}.sky-theme-modern.sky-theme-mode-dark .sky-btn-tab-wrapper.sky-btn-tab-wrapper-selected:not(.sky-btn-tab-wrapper-disabled) .sky-btn-tab-close{color:#eeeeef}\n"], components: [{ type: i1.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "skyLibResources": i3.SkyLibResourcesPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyTabButtonComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-tab-button',
+                    templateUrl: './tab-button.component.html',
+                    styleUrls: ['./tab-button.component.scss'],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                }]
+        }], propDecorators: { active: [{
+                type: Input
+            }], ariaControls: [{
+                type: Input
+            }], buttonHref: [{
+                type: Input
+            }], buttonId: [{
+                type: Input
+            }], buttonText: [{
+                type: Input
+            }], buttonTextCount: [{
+                type: Input
+            }], closeable: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], tabStyle: [{
+                type: Input
+            }], buttonClick: [{
+                type: Output
+            }], closeClick: [{
+                type: Output
+            }] } });
+//# 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"]}