@skyux/tabs 8.7.2 → 9.0.0-alpha.1

package/documentation.json

@@ -7029,184 +7029,184 @@
   },
   "codeExamples": [
     {
-      "fileName": "address-form-demo.component.html",
-      "filePath": "/projects/tabs/documentation/code-examples/sectioned-form/modal/address-form-demo.component.html",
-      "rawContents": "<div>Address form</div>\n"
+      "fileName": "wizard-demo.module.ts",
+      "filePath": "/projects/tabs/documentation/code-examples/wizard/basic/wizard-demo.module.ts",
+      "rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { SkyIdModule } from '@skyux/core';\nimport { SkyCheckboxModule, SkyInputBoxModule } from '@skyux/forms';\nimport { SkyStatusIndicatorModule } from '@skyux/indicators';\nimport { SkyFluidGridModule } from '@skyux/layout';\nimport { SkyModalModule } from '@skyux/modals';\nimport { SkyPhoneFieldModule } from '@skyux/phone-field';\nimport { SkyTabsModule } from '@skyux/tabs';\nimport { SkyThemeModule } from '@skyux/theme';\n\nimport { WizardDemoModalComponent } from './wizard-demo-modal.component';\nimport { WizardDemoComponent } from './wizard-demo.component';\n\n@NgModule({\n  declarations: [WizardDemoComponent, WizardDemoModalComponent],\n  imports: [\n    CommonModule,\n    ReactiveFormsModule,\n    SkyCheckboxModule,\n    SkyFluidGridModule,\n    SkyIdModule,\n    SkyInputBoxModule,\n    SkyModalModule,\n    SkyPhoneFieldModule,\n    SkyStatusIndicatorModule,\n    SkyTabsModule,\n    SkyThemeModule,\n  ],\n  exports: [WizardDemoComponent],\n})\nexport class WizardDemoModule {}\n"
     },
     {
-      "fileName": "address-form-demo.component.ts",
-      "filePath": "/projects/tabs/documentation/code-examples/sectioned-form/modal/address-form-demo.component.ts",
-      "rawContents": "import { ChangeDetectionStrategy, Component } from '@angular/core';\n\n@Component({\n  selector: 'app-address-form-demo',\n  templateUrl: './address-form-demo.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class AddressFormDemoComponent {}\n"
+      "fileName": "wizard-demo.component.ts",
+      "filePath": "/projects/tabs/documentation/code-examples/wizard/basic/wizard-demo.component.ts",
+      "rawContents": "import { Component } from '@angular/core';\nimport { SkyModalService } from '@skyux/modals';\n\nimport { WizardDemoModalComponent } from './wizard-demo-modal.component';\n\n@Component({\n  selector: 'app-wizard-demo',\n  templateUrl: './wizard-demo.component.html',\n})\nexport class WizardDemoComponent {\n  #modalService: SkyModalService;\n\n  constructor(modalService: SkyModalService) {\n    this.#modalService = modalService;\n  }\n\n  public modalSize = 'large';\n\n  public openWizard(): void {\n    this.#modalService.open(WizardDemoModalComponent, { size: this.modalSize });\n  }\n}\n"
     },
     {
-      "fileName": "information-form-demo.component.html",
-      "filePath": "/projects/tabs/documentation/code-examples/sectioned-form/modal/information-form-demo.component.html",
-      "rawContents": "<form novalidate [formGroup]=\"myForm\">\n  <div style=\"display: flex\">\n    <div class=\"sky-margin-inline-lg\" style=\"flex: 1\">\n      <sky-input-box labelText=\"Name\">\n        <input formControlName=\"name\" type=\"text\" />\n      </sky-input-box>\n    </div>\n    <div style=\"flex: 1\">\n      <sky-input-box labelText=\"ID\">\n        <input formControlName=\"id\" type=\"text\" />\n        <span class=\"sky-error-indicator\">\n          <sky-status-indicator\n            *ngIf=\"myForm.get('id')?.invalid\"\n            indicatorType=\"danger\"\n            descriptionType=\"error\"\n          >\n            Enter a valid value.\n          </sky-status-indicator>\n        </span>\n      </sky-input-box>\n    </div>\n  </div>\n</form>\n"
+      "fileName": "wizard-demo.component.html",
+      "filePath": "/projects/tabs/documentation/code-examples/wizard/basic/wizard-demo.component.html",
+      "rawContents": "<button type=\"button\" class=\"sky-btn sky-btn-default\" (click)=\"openWizard()\">\n  Open Wizard\n</button>\n"
     },
     {
-      "fileName": "information-form-demo.component.ts",
-      "filePath": "/projects/tabs/documentation/code-examples/sectioned-form/modal/information-form-demo.component.ts",
-      "rawContents": "import {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  OnInit,\n} from '@angular/core';\nimport {\n  UntypedFormBuilder,\n  UntypedFormGroup,\n  Validators,\n} from '@angular/forms';\nimport { SkySectionedFormService } from '@skyux/tabs';\n\n@Component({\n  selector: 'app-information-form-demo',\n  templateUrl: './information-form-demo.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class InformationFormDemoComponent implements OnInit {\n  public id = '5324901';\n  public myForm: UntypedFormGroup;\n  public name = '';\n  public nameRequired = false;\n\n  #sectionedFormService: SkySectionedFormService;\n  #changeDetector: ChangeDetectorRef;\n\n  constructor(\n    formBuilder: UntypedFormBuilder,\n    sectionedFormService: SkySectionedFormService,\n    changeDetector: ChangeDetectorRef\n  ) {\n    this.#sectionedFormService = sectionedFormService;\n    this.#changeDetector = changeDetector;\n\n    this.myForm = formBuilder.group({\n      name: [this.name],\n      nameRequired: [this.nameRequired],\n      id: [this.id, Validators.pattern('^[0-9]+$')],\n    });\n  }\n\n  public ngOnInit(): void {\n    this.myForm.valueChanges.subscribe((changes) => {\n      console.log(changes);\n      this.id = changes.id;\n      this.name = changes.name;\n      this.nameRequired = changes.nameRequired;\n      this.checkValidity();\n    });\n    this.#changeDetector.markForCheck();\n  }\n\n  public checkValidity(): void {\n    if (this.nameRequired) {\n      this.myForm.get('name')?.setValidators([Validators.required]);\n      this.#sectionedFormService.requiredFieldChanged(true);\n    } else {\n      this.myForm.get('name')?.setValidators([]);\n      this.#sectionedFormService.requiredFieldChanged(false);\n    }\n\n    if (!this.myForm.get('name')?.value && this.nameRequired) {\n      this.#sectionedFormService.invalidFieldChanged(true);\n    } else {\n      this.#sectionedFormService.invalidFieldChanged(false);\n    }\n  }\n}\n"
+      "fileName": "wizard-demo-modal.component.ts",
+      "filePath": "/projects/tabs/documentation/code-examples/wizard/basic/wizard-demo-modal.component.ts",
+      "rawContents": "import { Component, OnInit } from '@angular/core';\nimport {\n  UntypedFormBuilder,\n  UntypedFormControl,\n  UntypedFormGroup,\n  Validators,\n} from '@angular/forms';\nimport { SkyModalInstance } from '@skyux/modals';\nimport { SkyTabIndex } from '@skyux/tabs';\n\n@Component({\n  selector: 'app-wizard-demo-modal',\n  templateUrl: './wizard-demo-modal.component.html',\n})\nexport class WizardDemoModalComponent implements OnInit {\n  constructor(\n    public instance: SkyModalInstance,\n    formBuilder: UntypedFormBuilder\n  ) {\n    this.firstName = new UntypedFormControl('', Validators.required);\n    this.middleName = new UntypedFormControl();\n    this.lastName = new UntypedFormControl('', Validators.required);\n    this.phoneNumber = new UntypedFormControl('', Validators.required);\n    this.email = new UntypedFormControl('', Validators.required);\n    this.termsAccepted = new UntypedFormControl(false);\n    this.mailingList = new UntypedFormControl(false);\n\n    this.newMemberForm = formBuilder.group({\n      firstName: this.firstName,\n      middleName: this.middleName,\n      lastName: this.lastName,\n      phoneNumber: this.phoneNumber,\n      email: this.email,\n      termsAccepted: this.termsAccepted,\n      mailingList: this.mailingList,\n    });\n  }\n\n  public newMemberForm: UntypedFormGroup;\n  public title = 'New Member Sign-up';\n  public activeIndex: SkyTabIndex = 0;\n  public step2Disabled = true;\n  public step3Disabled = true;\n  public saveDisabled = true;\n\n  public firstName: UntypedFormControl | undefined;\n  public middleName: UntypedFormControl | undefined;\n  public lastName: UntypedFormControl | undefined;\n  public phoneNumber: UntypedFormControl | undefined;\n  public email: UntypedFormControl | undefined;\n  public termsAccepted: UntypedFormControl | undefined;\n  public mailingList: UntypedFormControl | undefined;\n\n  public ngOnInit(): void {\n    this.newMemberForm.valueChanges.subscribe(() => {\n      this.checkRequirementsMet();\n    });\n  }\n\n  public checkRequirementsMet(): void {\n    this.step2Disabled = !(\n      this.newMemberForm?.get('firstName')?.value &&\n      this.newMemberForm?.get('lastName')?.value\n    );\n    this.step3Disabled = !(\n      this.newMemberForm?.get('phoneNumber')?.value &&\n      this.newMemberForm?.get('phoneNumber')?.valid &&\n      this.newMemberForm?.get('email')?.value\n    );\n    this.saveDisabled = !this.newMemberForm?.get('termsAccepted')?.value;\n  }\n\n  public onCancelClick(): void {\n    this.instance.cancel();\n  }\n\n  public onSave(): void {\n    this.instance.save();\n  }\n}\n"
     },
     {
-      "fileName": "phone-form-demo.component.html",
-      "filePath": "/projects/tabs/documentation/code-examples/sectioned-form/modal/phone-form-demo.component.html",
-      "rawContents": "<div>Phone form</div>\n"
+      "fileName": "wizard-demo-modal.component.html",
+      "filePath": "/projects/tabs/documentation/code-examples/wizard/basic/wizard-demo-modal.component.html",
+      "rawContents": "<form [formGroup]=\"newMemberForm\" (ngSubmit)=\"onSave()\">\n  <sky-modal>\n    <sky-modal-header>\n      {{ title }}\n    </sky-modal-header>\n    <sky-modal-content>\n      <sky-tabset\n        ariaLabel=\"Sign-up steps\"\n        [(active)]=\"activeIndex\"\n        tabStyle=\"wizard\"\n        #wizardDemo\n      >\n        <sky-tab tabHeading=\"1. Biographical Details\">\n          <sky-fluid-grid [disableMargin]=\"true\" gutterSize=\"small\">\n            <sky-row>\n              <sky-column [screenSmall]=\"12\" [screenMedium]=\"4\">\n                <sky-input-box labelText=\"First name\">\n                  <input type=\"text\" formControlName=\"firstName\" />\n                </sky-input-box>\n              </sky-column>\n              <sky-column [screenSmall]=\"12\" [screenMedium]=\"4\">\n                <sky-input-box labelText=\"Middle name\">\n                  <input type=\"text\" formControlName=\"middleName\" />\n                </sky-input-box>\n              </sky-column>\n              <sky-column [screenSmall]=\"12\" [screenMedium]=\"4\">\n                <sky-input-box labelText=\"Last name\">\n                  <input type=\"text\" formControlName=\"lastName\" />\n                </sky-input-box>\n              </sky-column>\n            </sky-row>\n          </sky-fluid-grid>\n        </sky-tab>\n        <sky-tab tabHeading=\"2. Contact Information\" [disabled]=\"step2Disabled\">\n          <sky-fluid-grid [disableMargin]=\"true\" gutterSize=\"small\">\n            <sky-row>\n              <sky-column [screenSmall]=\"12\" [screenMedium]=\"6\">\n                <sky-input-box labelText=\"Phone Number\">\n                  <sky-phone-field defaultCountry=\"us\">\n                    <input formControlName=\"phoneNumber\" skyPhoneFieldInput />\n                  </sky-phone-field>\n                </sky-input-box>\n              </sky-column>\n              <sky-column [screenSmall]=\"12\" [screenMedium]=\"6\">\n                <sky-input-box labelText=\"Email\">\n                  <input type=\"email\" formControlName=\"email\" />\n                </sky-input-box>\n              </sky-column>\n            </sky-row>\n          </sky-fluid-grid>\n        </sky-tab>\n        <sky-tab tabHeading=\"3. More Information\" [disabled]=\"step3Disabled\">\n          <sky-fluid-grid [disableMargin]=\"true\" gutterSize=\"small\">\n            <sky-row>\n              <sky-column [screenSmall]=\"12\">\n                <sky-checkbox formControlName=\"termsAccepted\" [required]=\"true\">\n                  <sky-checkbox-label>\n                    Accept terms and conditions\n                  </sky-checkbox-label>\n                </sky-checkbox>\n              </sky-column>\n              <sky-column [screenSmall]=\"12\">\n                <sky-checkbox formControlName=\"mailingList\">\n                  <sky-checkbox-label>\n                    Sign up for our email newsletter\n                  </sky-checkbox-label>\n                </sky-checkbox>\n              </sky-column>\n            </sky-row>\n          </sky-fluid-grid>\n        </sky-tab>\n      </sky-tabset>\n    </sky-modal-content>\n    <sky-modal-footer>\n      <sky-tabset-nav-button\n        buttonType=\"previous\"\n        [tabset]=\"wizardDemo\"\n      ></sky-tabset-nav-button>\n      <sky-tabset-nav-button\n        buttonType=\"next\"\n        [tabset]=\"wizardDemo\"\n      ></sky-tabset-nav-button>\n      <sky-tabset-nav-button\n        buttonType=\"finish\"\n        [tabset]=\"wizardDemo\"\n        [disabled]=\"saveDisabled\"\n      ></sky-tabset-nav-button>\n      <button\n        class=\"sky-btn sky-btn-link\"\n        type=\"button\"\n        (click)=\"onCancelClick()\"\n      >\n        Cancel\n      </button>\n    </sky-modal-footer>\n  </sky-modal>\n</form>\n"
     },
     {
-      "fileName": "phone-form-demo.component.ts",
-      "filePath": "/projects/tabs/documentation/code-examples/sectioned-form/modal/phone-form-demo.component.ts",
-      "rawContents": "import { ChangeDetectionStrategy, Component } from '@angular/core';\n\n@Component({\n  selector: 'app-phone-form-demo',\n  templateUrl: './phone-form-demo.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class PhoneFormDemoComponent {}\n"
+      "fileName": "vertical-tabs-demo.module.ts",
+      "filePath": "/projects/tabs/documentation/code-examples/vertical-tabs/grouped/vertical-tabs-demo.module.ts",
+      "rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyVerticalTabsetModule } from '@skyux/tabs';\n\nimport { SkyVerticalTabsDemoComponent } from './vertical-tabs-demo.component';\n\n@NgModule({\n  imports: [CommonModule, SkyVerticalTabsetModule],\n  declarations: [SkyVerticalTabsDemoComponent],\n  exports: [SkyVerticalTabsDemoComponent],\n})\nexport class SkyVerticalTabDemoModule {}\n"
     },
     {
-      "fileName": "sectioned-form-demo.component.html",
-      "filePath": "/projects/tabs/documentation/code-examples/sectioned-form/modal/sectioned-form-demo.component.html",
-      "rawContents": "<button class=\"sky-btn sky-btn-default\" type=\"button\" (click)=\"openModal()\">\n  Open sectioned form\n</button>\n"
+      "fileName": "vertical-tabs-demo.component.ts",
+      "filePath": "/projects/tabs/documentation/code-examples/vertical-tabs/grouped/vertical-tabs-demo.component.ts",
+      "rawContents": "import { Component } from '@angular/core';\n\nimport { VerticalTabsDemoGroup } from './vertical-tabs-demo-group';\n\n@Component({\n  selector: 'app-vertical-tab-demo',\n  templateUrl: './vertical-tabs-demo.component.html',\n})\nexport class SkyVerticalTabsDemoComponent {\n  public groups: VerticalTabsDemoGroup[];\n\n  constructor() {\n    this.groups = [\n      {\n        heading: 'Group 1',\n        isOpen: false,\n        isDisabled: false,\n        subTabs: [\n          { tabHeading: 'Group 1 — Tab 1', content: 'Group 1 — Tab 1 Content' },\n          {\n            tabHeading: 'Group 1 — Tab 2',\n            content: 'Group 1 — Tab 2 Content',\n            tabHeaderCount: 7,\n          },\n        ],\n      },\n      {\n        heading: 'Group 2',\n        isOpen: true,\n        isDisabled: false,\n        subTabs: [\n          {\n            tabHeading: 'Group 2 — Tab 1',\n            content: 'Group 2 — Tab 1 Content',\n            active: true,\n          },\n          {\n            tabHeading: 'Group 2 — Tab 2 — Disabled',\n            content: 'Group 2 — Tab 2 Content',\n            disabled: true,\n          },\n        ],\n      },\n      {\n        heading: 'Disabled',\n        isOpen: false,\n        isDisabled: true,\n        subTabs: [],\n      },\n    ];\n  }\n}\n"
     },
     {
-      "fileName": "sectioned-form-demo.component.ts",
-      "filePath": "/projects/tabs/documentation/code-examples/sectioned-form/modal/sectioned-form-demo.component.ts",
-      "rawContents": "import { ChangeDetectionStrategy, Component } from '@angular/core';\nimport { SkyModalCloseArgs, SkyModalService } from '@skyux/modals';\n\nimport { SectionedFormModalDemoComponent } from './sectioned-form-modal-demo.component';\n\n@Component({\n  selector: 'app-sectioned-form-demo',\n  templateUrl: './sectioned-form-demo.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SectionedFormDemoComponent {\n  #modal: SkyModalService;\n\n  constructor(modal: SkyModalService) {\n    this.#modal = modal;\n  }\n\n  public openModal(): void {\n    const modalInstance = this.#modal.open(SectionedFormModalDemoComponent, {\n      size: 'large',\n    });\n\n    modalInstance.closed.subscribe((result: SkyModalCloseArgs) => {\n      if (result.reason === 'cancel') {\n        console.log(`Modal cancelled`);\n      } else if (result.reason === 'save') {\n        console.log(`Modal saved`);\n      }\n    });\n  }\n}\n"
+      "fileName": "vertical-tabs-demo.component.html",
+      "filePath": "/projects/tabs/documentation/code-examples/vertical-tabs/grouped/vertical-tabs-demo.component.html",
+      "rawContents": "<sky-vertical-tabset showTabsText=\"Tab list\">\n  <sky-vertical-tabset-group\n    *ngFor=\"let group of groups\"\n    [groupHeading]=\"group.heading\"\n    [open]=\"group.isOpen\"\n    [disabled]=\"group.isDisabled\"\n  >\n    <sky-vertical-tab\n      *ngFor=\"let tab of group.subTabs\"\n      [active]=\"tab.active\"\n      [tabHeading]=\"tab.tabHeading\"\n      [tabHeaderCount]=\"tab.tabHeaderCount\"\n      [disabled]=\"tab.disabled\"\n    >\n      {{ tab.content }}\n    </sky-vertical-tab>\n  </sky-vertical-tabset-group>\n</sky-vertical-tabset>\n"
     },
     {
-      "fileName": "sectioned-form-demo.module.ts",
-      "filePath": "/projects/tabs/documentation/code-examples/sectioned-form/modal/sectioned-form-demo.module.ts",
-      "rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { SkyInputBoxModule } from '@skyux/forms';\nimport { SkyStatusIndicatorModule } from '@skyux/indicators';\nimport { SkyModalModule } from '@skyux/modals';\nimport { SkySectionedFormModule } from '@skyux/tabs';\n\nimport { AddressFormDemoComponent } from './address-form-demo.component';\nimport { InformationFormDemoComponent } from './information-form-demo.component';\nimport { PhoneFormDemoComponent } from './phone-form-demo.component';\nimport { SectionedFormDemoComponent } from './sectioned-form-demo.component';\nimport { SectionedFormModalDemoComponent } from './sectioned-form-modal-demo.component';\n\n@NgModule({\n  declarations: [\n    AddressFormDemoComponent,\n    InformationFormDemoComponent,\n    PhoneFormDemoComponent,\n    SectionedFormModalDemoComponent,\n    SectionedFormDemoComponent,\n  ],\n  exports: [SectionedFormDemoComponent],\n  imports: [\n    CommonModule,\n    ReactiveFormsModule,\n    SkyInputBoxModule,\n    SkyModalModule,\n    SkySectionedFormModule,\n    SkyStatusIndicatorModule,\n  ],\n})\nexport class SectionedFormDemoModule {}\n"
+      "fileName": "vertical-tabs-demo-sub-tab.ts",
+      "filePath": "/projects/tabs/documentation/code-examples/vertical-tabs/grouped/vertical-tabs-demo-sub-tab.ts",
+      "rawContents": "export interface VerticalTabsDemoSubTab {\n  tabHeading: string;\n  content: string;\n  tabHeaderCount?: number;\n  active?: boolean;\n  disabled?: boolean;\n}\n"
     },
     {
-      "fileName": "sectioned-form-modal-demo.component.html",
-      "filePath": "/projects/tabs/documentation/code-examples/sectioned-form/modal/sectioned-form-modal-demo.component.html",
-      "rawContents": "<sky-modal>\n  <sky-modal-header>\n    Sectioned form — Index: {{ activeIndexDisplay }}\n  </sky-modal-header>\n  <sky-modal-content>\n    <sky-sectioned-form (indexChanged)=\"onIndexChanged($event)\">\n      <sky-sectioned-form-section heading=\"Basic information\">\n        <app-information-form-demo></app-information-form-demo>\n      </sky-sectioned-form-section>\n      <sky-sectioned-form-section\n        heading=\"Addresses\"\n        [itemCount]=\"2\"\n        [active]=\"activeTab\"\n      >\n        <app-address-form-demo></app-address-form-demo>\n      </sky-sectioned-form-section>\n      <sky-sectioned-form-section heading=\"Phone numbers\" [itemCount]=\"3\">\n        <app-phone-form-demo></app-phone-form-demo>\n      </sky-sectioned-form-section>\n    </sky-sectioned-form>\n  </sky-modal-content>\n  <sky-modal-footer>\n    <button\n      *ngIf=\"tabsHidden()\"\n      class=\"sky-btn sky-btn-secondary\"\n      type=\"button\"\n      (click)=\"showTabs()\"\n    >\n      Show sections\n    </button>\n    <button\n      class=\"sky-btn sky-btn-primary\"\n      type=\"button\"\n      (click)=\"modalInstance.save()\"\n    >\n      Save\n    </button>\n    <button\n      class=\"sky-btn sky-btn-link\"\n      type=\"button\"\n      (click)=\"modalInstance.cancel()\"\n    >\n      Cancel\n    </button>\n  </sky-modal-footer>\n</sky-modal>\n"
+      "fileName": "vertical-tabs-demo-group.ts",
+      "filePath": "/projects/tabs/documentation/code-examples/vertical-tabs/grouped/vertical-tabs-demo-group.ts",
+      "rawContents": "import { VerticalTabsDemoSubTab } from './vertical-tabs-demo-sub-tab';\n\nexport interface VerticalTabsDemoGroup {\n  heading: string;\n  isOpen: boolean;\n  isDisabled: boolean;\n  subTabs: VerticalTabsDemoSubTab[];\n}\n"
     },
     {
-      "fileName": "sectioned-form-modal-demo.component.ts",
-      "filePath": "/projects/tabs/documentation/code-examples/sectioned-form/modal/sectioned-form-modal-demo.component.ts",
-      "rawContents": "import {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  ViewChild,\n} from '@angular/core';\nimport { SkyModalInstance } from '@skyux/modals';\nimport { SkySectionedFormComponent } from '@skyux/tabs';\n\n@Component({\n  selector: 'app-sectioned-form-modal-demo',\n  templateUrl: './sectioned-form-modal-demo.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SectionedFormModalDemoComponent {\n  public activeIndexDisplay: number | undefined;\n\n  public activeTab = true;\n\n  @ViewChild(SkySectionedFormComponent)\n  public sectionedFormComponent: SkySectionedFormComponent | undefined;\n\n  #changeDetector: ChangeDetectorRef;\n\n  constructor(\n    public modalInstance: SkyModalInstance,\n    changeDetector: ChangeDetectorRef\n  ) {\n    this.#changeDetector = changeDetector;\n  }\n\n  public onIndexChanged(newIndex: number): void {\n    this.activeIndexDisplay = newIndex;\n    this.#changeDetector.markForCheck();\n  }\n\n  public tabsHidden(): boolean {\n    return !this.sectionedFormComponent?.tabsVisible();\n  }\n\n  public showTabs(): void {\n    this.sectionedFormComponent?.showTabs();\n  }\n}\n"
+      "fileName": "vertical-tabs-demo.module.ts",
+      "filePath": "/projects/tabs/documentation/code-examples/vertical-tabs/basic/vertical-tabs-demo.module.ts",
+      "rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyVerticalTabsetModule } from '@skyux/tabs';\n\nimport { VerticalTabDemoComponent } from './vertical-tabs-demo.component';\n\n@NgModule({\n  imports: [CommonModule, SkyVerticalTabsetModule],\n  declarations: [VerticalTabDemoComponent],\n  exports: [VerticalTabDemoComponent],\n})\nexport class SkyVerticalTabDemoModule {}\n"
     },
     {
-      "fileName": "tabs-demo.component.html",
-      "filePath": "/projects/tabs/documentation/code-examples/tabs/dynamic-add-close/tabs-demo.component.html",
-      "rawContents": "<sky-tabset ariaLabel=\"Tab demonstration\" (newTab)=\"onNewTabClick()\">\n  <sky-tab\n    *ngFor=\"let tab of tabArray; let i = index\"\n    [tabHeading]=\"tab.tabHeading\"\n    (close)=\"onCloseClick(i)\"\n  >\n    {{ tab.tabContent }}\n  </sky-tab>\n</sky-tabset>\n"
+      "fileName": "vertical-tabs-demo.component.ts",
+      "filePath": "/projects/tabs/documentation/code-examples/vertical-tabs/basic/vertical-tabs-demo.component.ts",
+      "rawContents": "import { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-vertical-tab-demo',\n  templateUrl: './vertical-tabs-demo.component.html',\n})\nexport class VerticalTabDemoComponent {}\n"
     },
     {
-      "fileName": "tabs-demo.component.ts",
-      "filePath": "/projects/tabs/documentation/code-examples/tabs/dynamic-add-close/tabs-demo.component.ts",
-      "rawContents": "import { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-tabs-demo',\n  templateUrl: './tabs-demo.component.html',\n})\nexport class TabsDemoComponent {\n  public tabArray = [\n    {\n      tabHeading: 'Tab 1',\n      tabContent: 'Content for Tab 1',\n    },\n    {\n      tabHeading: 'Tab 2',\n      tabContent: 'Content for Tab 2',\n    },\n    {\n      tabHeading: 'Tab 3',\n      tabContent: 'Content for Tab 3',\n    },\n  ];\n\n  #tabCounter = 3;\n\n  public onNewTabClick(): void {\n    this.#tabCounter++;\n\n    this.tabArray.push({\n      tabHeading: 'Tab ' + this.#tabCounter,\n      tabContent: 'Content for Tab' + this.#tabCounter,\n    });\n  }\n\n  public onCloseClick(arrayIndex: number): void {\n    this.tabArray.splice(arrayIndex, 1);\n  }\n}\n"
+      "fileName": "vertical-tabs-demo.component.html",
+      "filePath": "/projects/tabs/documentation/code-examples/vertical-tabs/basic/vertical-tabs-demo.component.html",
+      "rawContents": "<sky-vertical-tabset>\n  <sky-vertical-tab tabHeading=\"Tab 1\"> Tab 1 content </sky-vertical-tab>\n  <sky-vertical-tab tabHeading=\"Tab 2\" [active]=\"true\">\n    Tab 2 content\n  </sky-vertical-tab>\n  <sky-vertical-tab tabHeading=\"Tab 3\"> Tab 3 content </sky-vertical-tab>\n</sky-vertical-tabset>\n"
     },
     {
       "fileName": "tabs-demo.module.ts",
-      "filePath": "/projects/tabs/documentation/code-examples/tabs/dynamic-add-close/tabs-demo.module.ts",
+      "filePath": "/projects/tabs/documentation/code-examples/tabs/static-add-close/tabs-demo.module.ts",
       "rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyTabsModule } from '@skyux/tabs';\n\nimport { TabsDemoComponent } from './tabs-demo.component';\n\n@NgModule({\n  imports: [CommonModule, SkyTabsModule],\n  declarations: [TabsDemoComponent],\n  exports: [TabsDemoComponent],\n})\nexport class TabsDemoModule {}\n"
     },
-    {
-      "fileName": "tabs-demo.component.html",
-      "filePath": "/projects/tabs/documentation/code-examples/tabs/dynamic/tabs-demo.component.html",
-      "rawContents": "<sky-tabset ariaLabel=\"Tab demonstration\">\n  <sky-tab *ngFor=\"let tab of tabArray\" [tabHeading]=\"tab.tabHeading\">\n    {{ tab.tabContent }}\n  </sky-tab>\n</sky-tabset>\n"
-    },
     {
       "fileName": "tabs-demo.component.ts",
-      "filePath": "/projects/tabs/documentation/code-examples/tabs/dynamic/tabs-demo.component.ts",
-      "rawContents": "import { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-tabs-demo',\n  templateUrl: './tabs-demo.component.html',\n})\nexport class TabsDemoComponent {\n  public tabArray = [\n    {\n      tabHeading: 'Tab 1',\n      tabContent: 'A list containing 25012 items',\n    },\n    {\n      tabHeading: 'Tab 2',\n      tabContent: 'A list containing 280 items',\n    },\n    {\n      tabHeading: 'Tab 3',\n      tabContent: \"This tab doesn't have a list of items\",\n    },\n  ];\n}\n"
-    },
-    {
-      "fileName": "tabs-demo.module.ts",
-      "filePath": "/projects/tabs/documentation/code-examples/tabs/dynamic/tabs-demo.module.ts",
-      "rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyTabsModule } from '@skyux/tabs';\n\nimport { TabsDemoComponent } from './tabs-demo.component';\n\n@NgModule({\n  imports: [CommonModule, SkyTabsModule],\n  declarations: [TabsDemoComponent],\n  exports: [TabsDemoComponent],\n})\nexport class TabsDemoModule {}\n"
+      "filePath": "/projects/tabs/documentation/code-examples/tabs/static-add-close/tabs-demo.component.ts",
+      "rawContents": "import { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-tabs-demo',\n  templateUrl: './tabs-demo.component.html',\n})\nexport class TabsDemoComponent {\n  public showTab3 = true;\n\n  public onNewTabClick(): void {\n    alert('Add tab clicked!');\n  }\n}\n"
     },
     {
       "fileName": "tabs-demo.component.html",
       "filePath": "/projects/tabs/documentation/code-examples/tabs/static-add-close/tabs-demo.component.html",
       "rawContents": "<sky-tabset ariaLabel=\"Tab demonstration\" (newTab)=\"onNewTabClick()\">\n  <sky-tab [tabHeading]=\"'Tab 1'\"> Content for Tab 1 </sky-tab>\n  <sky-tab [tabHeading]=\"'Tab 2'\"> Content for Tab 2 </sky-tab>\n  <sky-tab *ngIf=\"showTab3\" [tabHeading]=\"'Tab 3'\" (close)=\"showTab3 = false\">\n    Content for Tab 3\n  </sky-tab>\n</sky-tabset>\n"
     },
-    {
-      "fileName": "tabs-demo.component.ts",
-      "filePath": "/projects/tabs/documentation/code-examples/tabs/static-add-close/tabs-demo.component.ts",
-      "rawContents": "import { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-tabs-demo',\n  templateUrl: './tabs-demo.component.html',\n})\nexport class TabsDemoComponent {\n  public showTab3 = true;\n\n  public onNewTabClick(): void {\n    alert('Add tab clicked!');\n  }\n}\n"
-    },
     {
       "fileName": "tabs-demo.module.ts",
-      "filePath": "/projects/tabs/documentation/code-examples/tabs/static-add-close/tabs-demo.module.ts",
+      "filePath": "/projects/tabs/documentation/code-examples/tabs/static/tabs-demo.module.ts",
       "rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyTabsModule } from '@skyux/tabs';\n\nimport { TabsDemoComponent } from './tabs-demo.component';\n\n@NgModule({\n  imports: [CommonModule, SkyTabsModule],\n  declarations: [TabsDemoComponent],\n  exports: [TabsDemoComponent],\n})\nexport class TabsDemoModule {}\n"
     },
+    {
+      "fileName": "tabs-demo.component.ts",
+      "filePath": "/projects/tabs/documentation/code-examples/tabs/static/tabs-demo.component.ts",
+      "rawContents": "import { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-tabs-demo',\n  templateUrl: './tabs-demo.component.html',\n})\nexport class TabsDemoComponent {}\n"
+    },
     {
       "fileName": "tabs-demo.component.html",
       "filePath": "/projects/tabs/documentation/code-examples/tabs/static/tabs-demo.component.html",
       "rawContents": "<sky-tabset ariaLabel=\"Tab demonstration\">\n  <sky-tab [tabHeading]=\"'Tab 1'\"> Content for Tab 1 </sky-tab>\n  <sky-tab [tabHeading]=\"'Tab 2'\"> Content for Tab 2 </sky-tab>\n  <sky-tab [tabHeading]=\"'Tab 3'\"> Content for Tab 3 </sky-tab>\n</sky-tabset>\n"
     },
+    {
+      "fileName": "tabs-demo.module.ts",
+      "filePath": "/projects/tabs/documentation/code-examples/tabs/dynamic-add-close/tabs-demo.module.ts",
+      "rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyTabsModule } from '@skyux/tabs';\n\nimport { TabsDemoComponent } from './tabs-demo.component';\n\n@NgModule({\n  imports: [CommonModule, SkyTabsModule],\n  declarations: [TabsDemoComponent],\n  exports: [TabsDemoComponent],\n})\nexport class TabsDemoModule {}\n"
+    },
     {
       "fileName": "tabs-demo.component.ts",
-      "filePath": "/projects/tabs/documentation/code-examples/tabs/static/tabs-demo.component.ts",
-      "rawContents": "import { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-tabs-demo',\n  templateUrl: './tabs-demo.component.html',\n})\nexport class TabsDemoComponent {}\n"
+      "filePath": "/projects/tabs/documentation/code-examples/tabs/dynamic-add-close/tabs-demo.component.ts",
+      "rawContents": "import { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-tabs-demo',\n  templateUrl: './tabs-demo.component.html',\n})\nexport class TabsDemoComponent {\n  public tabArray = [\n    {\n      tabHeading: 'Tab 1',\n      tabContent: 'Content for Tab 1',\n    },\n    {\n      tabHeading: 'Tab 2',\n      tabContent: 'Content for Tab 2',\n    },\n    {\n      tabHeading: 'Tab 3',\n      tabContent: 'Content for Tab 3',\n    },\n  ];\n\n  #tabCounter = 3;\n\n  public onNewTabClick(): void {\n    this.#tabCounter++;\n\n    this.tabArray.push({\n      tabHeading: 'Tab ' + this.#tabCounter,\n      tabContent: 'Content for Tab' + this.#tabCounter,\n    });\n  }\n\n  public onCloseClick(arrayIndex: number): void {\n    this.tabArray.splice(arrayIndex, 1);\n  }\n}\n"
+    },
+    {
+      "fileName": "tabs-demo.component.html",
+      "filePath": "/projects/tabs/documentation/code-examples/tabs/dynamic-add-close/tabs-demo.component.html",
+      "rawContents": "<sky-tabset ariaLabel=\"Tab demonstration\" (newTab)=\"onNewTabClick()\">\n  <sky-tab\n    *ngFor=\"let tab of tabArray; let i = index\"\n    [tabHeading]=\"tab.tabHeading\"\n    (close)=\"onCloseClick(i)\"\n  >\n    {{ tab.tabContent }}\n  </sky-tab>\n</sky-tabset>\n"
     },
     {
       "fileName": "tabs-demo.module.ts",
-      "filePath": "/projects/tabs/documentation/code-examples/tabs/static/tabs-demo.module.ts",
+      "filePath": "/projects/tabs/documentation/code-examples/tabs/dynamic/tabs-demo.module.ts",
       "rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyTabsModule } from '@skyux/tabs';\n\nimport { TabsDemoComponent } from './tabs-demo.component';\n\n@NgModule({\n  imports: [CommonModule, SkyTabsModule],\n  declarations: [TabsDemoComponent],\n  exports: [TabsDemoComponent],\n})\nexport class TabsDemoModule {}\n"
     },
     {
-      "fileName": "vertical-tabs-demo.component.html",
-      "filePath": "/projects/tabs/documentation/code-examples/vertical-tabs/basic/vertical-tabs-demo.component.html",
-      "rawContents": "<sky-vertical-tabset>\n  <sky-vertical-tab tabHeading=\"Tab 1\"> Tab 1 content </sky-vertical-tab>\n  <sky-vertical-tab tabHeading=\"Tab 2\" [active]=\"true\">\n    Tab 2 content\n  </sky-vertical-tab>\n  <sky-vertical-tab tabHeading=\"Tab 3\"> Tab 3 content </sky-vertical-tab>\n</sky-vertical-tabset>\n"
+      "fileName": "tabs-demo.component.ts",
+      "filePath": "/projects/tabs/documentation/code-examples/tabs/dynamic/tabs-demo.component.ts",
+      "rawContents": "import { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-tabs-demo',\n  templateUrl: './tabs-demo.component.html',\n})\nexport class TabsDemoComponent {\n  public tabArray = [\n    {\n      tabHeading: 'Tab 1',\n      tabContent: 'A list containing 25012 items',\n    },\n    {\n      tabHeading: 'Tab 2',\n      tabContent: 'A list containing 280 items',\n    },\n    {\n      tabHeading: 'Tab 3',\n      tabContent: \"This tab doesn't have a list of items\",\n    },\n  ];\n}\n"
     },
     {
-      "fileName": "vertical-tabs-demo.component.ts",
-      "filePath": "/projects/tabs/documentation/code-examples/vertical-tabs/basic/vertical-tabs-demo.component.ts",
-      "rawContents": "import { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-vertical-tab-demo',\n  templateUrl: './vertical-tabs-demo.component.html',\n})\nexport class VerticalTabDemoComponent {}\n"
+      "fileName": "tabs-demo.component.html",
+      "filePath": "/projects/tabs/documentation/code-examples/tabs/dynamic/tabs-demo.component.html",
+      "rawContents": "<sky-tabset ariaLabel=\"Tab demonstration\">\n  <sky-tab *ngFor=\"let tab of tabArray\" [tabHeading]=\"tab.tabHeading\">\n    {{ tab.tabContent }}\n  </sky-tab>\n</sky-tabset>\n"
     },
     {
-      "fileName": "vertical-tabs-demo.module.ts",
-      "filePath": "/projects/tabs/documentation/code-examples/vertical-tabs/basic/vertical-tabs-demo.module.ts",
-      "rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyVerticalTabsetModule } from '@skyux/tabs';\n\nimport { VerticalTabDemoComponent } from './vertical-tabs-demo.component';\n\n@NgModule({\n  imports: [CommonModule, SkyVerticalTabsetModule],\n  declarations: [VerticalTabDemoComponent],\n  exports: [VerticalTabDemoComponent],\n})\nexport class SkyVerticalTabDemoModule {}\n"
+      "fileName": "sectioned-form-modal-demo.component.ts",
+      "filePath": "/projects/tabs/documentation/code-examples/sectioned-form/modal/sectioned-form-modal-demo.component.ts",
+      "rawContents": "import {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  ViewChild,\n} from '@angular/core';\nimport { SkyModalInstance } from '@skyux/modals';\nimport { SkySectionedFormComponent } from '@skyux/tabs';\n\n@Component({\n  selector: 'app-sectioned-form-modal-demo',\n  templateUrl: './sectioned-form-modal-demo.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SectionedFormModalDemoComponent {\n  public activeIndexDisplay: number | undefined;\n\n  public activeTab = true;\n\n  @ViewChild(SkySectionedFormComponent)\n  public sectionedFormComponent: SkySectionedFormComponent | undefined;\n\n  #changeDetector: ChangeDetectorRef;\n\n  constructor(\n    public modalInstance: SkyModalInstance,\n    changeDetector: ChangeDetectorRef\n  ) {\n    this.#changeDetector = changeDetector;\n  }\n\n  public onIndexChanged(newIndex: number): void {\n    this.activeIndexDisplay = newIndex;\n    this.#changeDetector.markForCheck();\n  }\n\n  public tabsHidden(): boolean {\n    return !this.sectionedFormComponent?.tabsVisible();\n  }\n\n  public showTabs(): void {\n    this.sectionedFormComponent?.showTabs();\n  }\n}\n"
     },
     {
-      "fileName": "vertical-tabs-demo-group.ts",
-      "filePath": "/projects/tabs/documentation/code-examples/vertical-tabs/grouped/vertical-tabs-demo-group.ts",
-      "rawContents": "import { VerticalTabsDemoSubTab } from './vertical-tabs-demo-sub-tab';\n\nexport interface VerticalTabsDemoGroup {\n  heading: string;\n  isOpen: boolean;\n  isDisabled: boolean;\n  subTabs: VerticalTabsDemoSubTab[];\n}\n"
+      "fileName": "sectioned-form-modal-demo.component.html",
+      "filePath": "/projects/tabs/documentation/code-examples/sectioned-form/modal/sectioned-form-modal-demo.component.html",
+      "rawContents": "<sky-modal>\n  <sky-modal-header>\n    Sectioned form — Index: {{ activeIndexDisplay }}\n  </sky-modal-header>\n  <sky-modal-content>\n    <sky-sectioned-form (indexChanged)=\"onIndexChanged($event)\">\n      <sky-sectioned-form-section heading=\"Basic information\">\n        <app-information-form-demo></app-information-form-demo>\n      </sky-sectioned-form-section>\n      <sky-sectioned-form-section\n        heading=\"Addresses\"\n        [itemCount]=\"2\"\n        [active]=\"activeTab\"\n      >\n        <app-address-form-demo></app-address-form-demo>\n      </sky-sectioned-form-section>\n      <sky-sectioned-form-section heading=\"Phone numbers\" [itemCount]=\"3\">\n        <app-phone-form-demo></app-phone-form-demo>\n      </sky-sectioned-form-section>\n    </sky-sectioned-form>\n  </sky-modal-content>\n  <sky-modal-footer>\n    <button\n      *ngIf=\"tabsHidden()\"\n      class=\"sky-btn sky-btn-secondary\"\n      type=\"button\"\n      (click)=\"showTabs()\"\n    >\n      Show sections\n    </button>\n    <button\n      class=\"sky-btn sky-btn-primary\"\n      type=\"button\"\n      (click)=\"modalInstance.save()\"\n    >\n      Save\n    </button>\n    <button\n      class=\"sky-btn sky-btn-link\"\n      type=\"button\"\n      (click)=\"modalInstance.cancel()\"\n    >\n      Cancel\n    </button>\n  </sky-modal-footer>\n</sky-modal>\n"
     },
     {
-      "fileName": "vertical-tabs-demo-sub-tab.ts",
-      "filePath": "/projects/tabs/documentation/code-examples/vertical-tabs/grouped/vertical-tabs-demo-sub-tab.ts",
-      "rawContents": "export interface VerticalTabsDemoSubTab {\n  tabHeading: string;\n  content: string;\n  tabHeaderCount?: number;\n  active?: boolean;\n  disabled?: boolean;\n}\n"
+      "fileName": "sectioned-form-demo.module.ts",
+      "filePath": "/projects/tabs/documentation/code-examples/sectioned-form/modal/sectioned-form-demo.module.ts",
+      "rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { SkyInputBoxModule } from '@skyux/forms';\nimport { SkyStatusIndicatorModule } from '@skyux/indicators';\nimport { SkyModalModule } from '@skyux/modals';\nimport { SkySectionedFormModule } from '@skyux/tabs';\n\nimport { AddressFormDemoComponent } from './address-form-demo.component';\nimport { InformationFormDemoComponent } from './information-form-demo.component';\nimport { PhoneFormDemoComponent } from './phone-form-demo.component';\nimport { SectionedFormDemoComponent } from './sectioned-form-demo.component';\nimport { SectionedFormModalDemoComponent } from './sectioned-form-modal-demo.component';\n\n@NgModule({\n  declarations: [\n    AddressFormDemoComponent,\n    InformationFormDemoComponent,\n    PhoneFormDemoComponent,\n    SectionedFormModalDemoComponent,\n    SectionedFormDemoComponent,\n  ],\n  exports: [SectionedFormDemoComponent],\n  imports: [\n    CommonModule,\n    ReactiveFormsModule,\n    SkyInputBoxModule,\n    SkyModalModule,\n    SkySectionedFormModule,\n    SkyStatusIndicatorModule,\n  ],\n})\nexport class SectionedFormDemoModule {}\n"
     },
     {
-      "fileName": "vertical-tabs-demo.component.html",
-      "filePath": "/projects/tabs/documentation/code-examples/vertical-tabs/grouped/vertical-tabs-demo.component.html",
-      "rawContents": "<sky-vertical-tabset showTabsText=\"Tab list\">\n  <sky-vertical-tabset-group\n    *ngFor=\"let group of groups\"\n    [groupHeading]=\"group.heading\"\n    [open]=\"group.isOpen\"\n    [disabled]=\"group.isDisabled\"\n  >\n    <sky-vertical-tab\n      *ngFor=\"let tab of group.subTabs\"\n      [active]=\"tab.active\"\n      [tabHeading]=\"tab.tabHeading\"\n      [tabHeaderCount]=\"tab.tabHeaderCount\"\n      [disabled]=\"tab.disabled\"\n    >\n      {{ tab.content }}\n    </sky-vertical-tab>\n  </sky-vertical-tabset-group>\n</sky-vertical-tabset>\n"
+      "fileName": "sectioned-form-demo.component.ts",
+      "filePath": "/projects/tabs/documentation/code-examples/sectioned-form/modal/sectioned-form-demo.component.ts",
+      "rawContents": "import { ChangeDetectionStrategy, Component } from '@angular/core';\nimport { SkyModalCloseArgs, SkyModalService } from '@skyux/modals';\n\nimport { SectionedFormModalDemoComponent } from './sectioned-form-modal-demo.component';\n\n@Component({\n  selector: 'app-sectioned-form-demo',\n  templateUrl: './sectioned-form-demo.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SectionedFormDemoComponent {\n  #modal: SkyModalService;\n\n  constructor(modal: SkyModalService) {\n    this.#modal = modal;\n  }\n\n  public openModal(): void {\n    const modalInstance = this.#modal.open(SectionedFormModalDemoComponent, {\n      size: 'large',\n    });\n\n    modalInstance.closed.subscribe((result: SkyModalCloseArgs) => {\n      if (result.reason === 'cancel') {\n        console.log(`Modal cancelled`);\n      } else if (result.reason === 'save') {\n        console.log(`Modal saved`);\n      }\n    });\n  }\n}\n"
     },
     {
-      "fileName": "vertical-tabs-demo.component.ts",
-      "filePath": "/projects/tabs/documentation/code-examples/vertical-tabs/grouped/vertical-tabs-demo.component.ts",
-      "rawContents": "import { Component } from '@angular/core';\n\nimport { VerticalTabsDemoGroup } from './vertical-tabs-demo-group';\n\n@Component({\n  selector: 'app-vertical-tab-demo',\n  templateUrl: './vertical-tabs-demo.component.html',\n})\nexport class SkyVerticalTabsDemoComponent {\n  public groups: VerticalTabsDemoGroup[];\n\n  constructor() {\n    this.groups = [\n      {\n        heading: 'Group 1',\n        isOpen: false,\n        isDisabled: false,\n        subTabs: [\n          { tabHeading: 'Group 1 — Tab 1', content: 'Group 1 — Tab 1 Content' },\n          {\n            tabHeading: 'Group 1 — Tab 2',\n            content: 'Group 1 — Tab 2 Content',\n            tabHeaderCount: 7,\n          },\n        ],\n      },\n      {\n        heading: 'Group 2',\n        isOpen: true,\n        isDisabled: false,\n        subTabs: [\n          {\n            tabHeading: 'Group 2 — Tab 1',\n            content: 'Group 2 — Tab 1 Content',\n            active: true,\n          },\n          {\n            tabHeading: 'Group 2 — Tab 2 — Disabled',\n            content: 'Group 2 — Tab 2 Content',\n            disabled: true,\n          },\n        ],\n      },\n      {\n        heading: 'Disabled',\n        isOpen: false,\n        isDisabled: true,\n        subTabs: [],\n      },\n    ];\n  }\n}\n"
+      "fileName": "sectioned-form-demo.component.html",
+      "filePath": "/projects/tabs/documentation/code-examples/sectioned-form/modal/sectioned-form-demo.component.html",
+      "rawContents": "<button class=\"sky-btn sky-btn-default\" type=\"button\" (click)=\"openModal()\">\n  Open sectioned form\n</button>\n"
     },
     {
-      "fileName": "vertical-tabs-demo.module.ts",
-      "filePath": "/projects/tabs/documentation/code-examples/vertical-tabs/grouped/vertical-tabs-demo.module.ts",
-      "rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyVerticalTabsetModule } from '@skyux/tabs';\n\nimport { SkyVerticalTabsDemoComponent } from './vertical-tabs-demo.component';\n\n@NgModule({\n  imports: [CommonModule, SkyVerticalTabsetModule],\n  declarations: [SkyVerticalTabsDemoComponent],\n  exports: [SkyVerticalTabsDemoComponent],\n})\nexport class SkyVerticalTabDemoModule {}\n"
+      "fileName": "phone-form-demo.component.ts",
+      "filePath": "/projects/tabs/documentation/code-examples/sectioned-form/modal/phone-form-demo.component.ts",
+      "rawContents": "import { ChangeDetectionStrategy, Component } from '@angular/core';\n\n@Component({\n  selector: 'app-phone-form-demo',\n  templateUrl: './phone-form-demo.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class PhoneFormDemoComponent {}\n"
     },
     {
-      "fileName": "wizard-demo-modal.component.html",
-      "filePath": "/projects/tabs/documentation/code-examples/wizard/basic/wizard-demo-modal.component.html",
-      "rawContents": "<form [formGroup]=\"newMemberForm\" (ngSubmit)=\"onSave()\">\n  <sky-modal>\n    <sky-modal-header>\n      {{ title }}\n    </sky-modal-header>\n    <sky-modal-content>\n      <sky-tabset\n        ariaLabel=\"Sign-up steps\"\n        [(active)]=\"activeIndex\"\n        tabStyle=\"wizard\"\n        #wizardDemo\n      >\n        <sky-tab tabHeading=\"1. Biographical Details\">\n          <sky-fluid-grid [disableMargin]=\"true\" gutterSize=\"small\">\n            <sky-row>\n              <sky-column [screenSmall]=\"12\" [screenMedium]=\"4\">\n                <sky-input-box labelText=\"First name\">\n                  <input type=\"text\" formControlName=\"firstName\" />\n                </sky-input-box>\n              </sky-column>\n              <sky-column [screenSmall]=\"12\" [screenMedium]=\"4\">\n                <sky-input-box labelText=\"Middle name\">\n                  <input type=\"text\" formControlName=\"middleName\" />\n                </sky-input-box>\n              </sky-column>\n              <sky-column [screenSmall]=\"12\" [screenMedium]=\"4\">\n                <sky-input-box labelText=\"Last name\">\n                  <input type=\"text\" formControlName=\"lastName\" />\n                </sky-input-box>\n              </sky-column>\n            </sky-row>\n          </sky-fluid-grid>\n        </sky-tab>\n        <sky-tab tabHeading=\"2. Contact Information\" [disabled]=\"step2Disabled\">\n          <sky-fluid-grid [disableMargin]=\"true\" gutterSize=\"small\">\n            <sky-row>\n              <sky-column [screenSmall]=\"12\" [screenMedium]=\"6\">\n                <sky-input-box labelText=\"Phone Number\">\n                  <sky-phone-field defaultCountry=\"us\">\n                    <input formControlName=\"phoneNumber\" skyPhoneFieldInput />\n                  </sky-phone-field>\n                </sky-input-box>\n              </sky-column>\n              <sky-column [screenSmall]=\"12\" [screenMedium]=\"6\">\n                <sky-input-box labelText=\"Email\">\n                  <input type=\"email\" formControlName=\"email\" />\n                </sky-input-box>\n              </sky-column>\n            </sky-row>\n          </sky-fluid-grid>\n        </sky-tab>\n        <sky-tab tabHeading=\"3. More Information\" [disabled]=\"step3Disabled\">\n          <sky-fluid-grid [disableMargin]=\"true\" gutterSize=\"small\">\n            <sky-row>\n              <sky-column [screenSmall]=\"12\">\n                <sky-checkbox formControlName=\"termsAccepted\" [required]=\"true\">\n                  <sky-checkbox-label>\n                    Accept terms and conditions\n                  </sky-checkbox-label>\n                </sky-checkbox>\n              </sky-column>\n              <sky-column [screenSmall]=\"12\">\n                <sky-checkbox formControlName=\"mailingList\">\n                  <sky-checkbox-label>\n                    Sign up for our email newsletter\n                  </sky-checkbox-label>\n                </sky-checkbox>\n              </sky-column>\n            </sky-row>\n          </sky-fluid-grid>\n        </sky-tab>\n      </sky-tabset>\n    </sky-modal-content>\n    <sky-modal-footer>\n      <sky-tabset-nav-button\n        buttonType=\"previous\"\n        [tabset]=\"wizardDemo\"\n      ></sky-tabset-nav-button>\n      <sky-tabset-nav-button\n        buttonType=\"next\"\n        [tabset]=\"wizardDemo\"\n      ></sky-tabset-nav-button>\n      <sky-tabset-nav-button\n        buttonType=\"finish\"\n        [tabset]=\"wizardDemo\"\n        [disabled]=\"saveDisabled\"\n      ></sky-tabset-nav-button>\n      <button\n        class=\"sky-btn sky-btn-link\"\n        type=\"button\"\n        (click)=\"onCancelClick()\"\n      >\n        Cancel\n      </button>\n    </sky-modal-footer>\n  </sky-modal>\n</form>\n"
+      "fileName": "phone-form-demo.component.html",
+      "filePath": "/projects/tabs/documentation/code-examples/sectioned-form/modal/phone-form-demo.component.html",
+      "rawContents": "<div>Phone form</div>\n"
     },
     {
-      "fileName": "wizard-demo-modal.component.ts",
-      "filePath": "/projects/tabs/documentation/code-examples/wizard/basic/wizard-demo-modal.component.ts",
-      "rawContents": "import { Component, OnInit } from '@angular/core';\nimport {\n  UntypedFormBuilder,\n  UntypedFormControl,\n  UntypedFormGroup,\n  Validators,\n} from '@angular/forms';\nimport { SkyModalInstance } from '@skyux/modals';\nimport { SkyTabIndex } from '@skyux/tabs';\n\n@Component({\n  selector: 'app-wizard-demo-modal',\n  templateUrl: './wizard-demo-modal.component.html',\n})\nexport class WizardDemoModalComponent implements OnInit {\n  constructor(\n    public instance: SkyModalInstance,\n    formBuilder: UntypedFormBuilder\n  ) {\n    this.firstName = new UntypedFormControl('', Validators.required);\n    this.middleName = new UntypedFormControl();\n    this.lastName = new UntypedFormControl('', Validators.required);\n    this.phoneNumber = new UntypedFormControl('', Validators.required);\n    this.email = new UntypedFormControl('', Validators.required);\n    this.termsAccepted = new UntypedFormControl(false);\n    this.mailingList = new UntypedFormControl(false);\n\n    this.newMemberForm = formBuilder.group({\n      firstName: this.firstName,\n      middleName: this.middleName,\n      lastName: this.lastName,\n      phoneNumber: this.phoneNumber,\n      email: this.email,\n      termsAccepted: this.termsAccepted,\n      mailingList: this.mailingList,\n    });\n  }\n\n  public newMemberForm: UntypedFormGroup;\n  public title = 'New Member Sign-up';\n  public activeIndex: SkyTabIndex = 0;\n  public step2Disabled = true;\n  public step3Disabled = true;\n  public saveDisabled = true;\n\n  public firstName: UntypedFormControl | undefined;\n  public middleName: UntypedFormControl | undefined;\n  public lastName: UntypedFormControl | undefined;\n  public phoneNumber: UntypedFormControl | undefined;\n  public email: UntypedFormControl | undefined;\n  public termsAccepted: UntypedFormControl | undefined;\n  public mailingList: UntypedFormControl | undefined;\n\n  public ngOnInit(): void {\n    this.newMemberForm.valueChanges.subscribe(() => {\n      this.checkRequirementsMet();\n    });\n  }\n\n  public checkRequirementsMet(): void {\n    this.step2Disabled = !(\n      this.newMemberForm?.get('firstName')?.value &&\n      this.newMemberForm?.get('lastName')?.value\n    );\n    this.step3Disabled = !(\n      this.newMemberForm?.get('phoneNumber')?.value &&\n      this.newMemberForm?.get('phoneNumber')?.valid &&\n      this.newMemberForm?.get('email')?.value\n    );\n    this.saveDisabled = !this.newMemberForm?.get('termsAccepted')?.value;\n  }\n\n  public onCancelClick(): void {\n    this.instance.cancel();\n  }\n\n  public onSave(): void {\n    this.instance.save();\n  }\n}\n"
+      "fileName": "information-form-demo.component.ts",
+      "filePath": "/projects/tabs/documentation/code-examples/sectioned-form/modal/information-form-demo.component.ts",
+      "rawContents": "import {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  OnInit,\n} from '@angular/core';\nimport {\n  UntypedFormBuilder,\n  UntypedFormGroup,\n  Validators,\n} from '@angular/forms';\nimport { SkySectionedFormService } from '@skyux/tabs';\n\n@Component({\n  selector: 'app-information-form-demo',\n  templateUrl: './information-form-demo.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class InformationFormDemoComponent implements OnInit {\n  public id = '5324901';\n  public myForm: UntypedFormGroup;\n  public name = '';\n  public nameRequired = false;\n\n  #sectionedFormService: SkySectionedFormService;\n  #changeDetector: ChangeDetectorRef;\n\n  constructor(\n    formBuilder: UntypedFormBuilder,\n    sectionedFormService: SkySectionedFormService,\n    changeDetector: ChangeDetectorRef\n  ) {\n    this.#sectionedFormService = sectionedFormService;\n    this.#changeDetector = changeDetector;\n\n    this.myForm = formBuilder.group({\n      name: [this.name],\n      nameRequired: [this.nameRequired],\n      id: [this.id, Validators.pattern('^[0-9]+$')],\n    });\n  }\n\n  public ngOnInit(): void {\n    this.myForm.valueChanges.subscribe((changes) => {\n      console.log(changes);\n      this.id = changes.id;\n      this.name = changes.name;\n      this.nameRequired = changes.nameRequired;\n      this.checkValidity();\n    });\n    this.#changeDetector.markForCheck();\n  }\n\n  public checkValidity(): void {\n    if (this.nameRequired) {\n      this.myForm.get('name')?.setValidators([Validators.required]);\n      this.#sectionedFormService.requiredFieldChanged(true);\n    } else {\n      this.myForm.get('name')?.setValidators([]);\n      this.#sectionedFormService.requiredFieldChanged(false);\n    }\n\n    if (!this.myForm.get('name')?.value && this.nameRequired) {\n      this.#sectionedFormService.invalidFieldChanged(true);\n    } else {\n      this.#sectionedFormService.invalidFieldChanged(false);\n    }\n  }\n}\n"
     },
     {
-      "fileName": "wizard-demo.component.html",
-      "filePath": "/projects/tabs/documentation/code-examples/wizard/basic/wizard-demo.component.html",
-      "rawContents": "<button type=\"button\" class=\"sky-btn sky-btn-default\" (click)=\"openWizard()\">\n  Open Wizard\n</button>\n"
+      "fileName": "information-form-demo.component.html",
+      "filePath": "/projects/tabs/documentation/code-examples/sectioned-form/modal/information-form-demo.component.html",
+      "rawContents": "<form novalidate [formGroup]=\"myForm\">\n  <div style=\"display: flex\">\n    <div class=\"sky-margin-inline-lg\" style=\"flex: 1\">\n      <sky-input-box labelText=\"Name\">\n        <input formControlName=\"name\" type=\"text\" />\n      </sky-input-box>\n    </div>\n    <div style=\"flex: 1\">\n      <sky-input-box labelText=\"ID\">\n        <input formControlName=\"id\" type=\"text\" />\n        <span class=\"sky-error-indicator\">\n          <sky-status-indicator\n            *ngIf=\"myForm.get('id')?.invalid\"\n            indicatorType=\"danger\"\n            descriptionType=\"error\"\n          >\n            Enter a valid value.\n          </sky-status-indicator>\n        </span>\n      </sky-input-box>\n    </div>\n  </div>\n</form>\n"
     },
     {
-      "fileName": "wizard-demo.component.ts",
-      "filePath": "/projects/tabs/documentation/code-examples/wizard/basic/wizard-demo.component.ts",
-      "rawContents": "import { Component } from '@angular/core';\nimport { SkyModalService } from '@skyux/modals';\n\nimport { WizardDemoModalComponent } from './wizard-demo-modal.component';\n\n@Component({\n  selector: 'app-wizard-demo',\n  templateUrl: './wizard-demo.component.html',\n})\nexport class WizardDemoComponent {\n  #modalService: SkyModalService;\n\n  constructor(modalService: SkyModalService) {\n    this.#modalService = modalService;\n  }\n\n  public modalSize = 'large';\n\n  public openWizard(): void {\n    this.#modalService.open(WizardDemoModalComponent, { size: this.modalSize });\n  }\n}\n"
+      "fileName": "address-form-demo.component.ts",
+      "filePath": "/projects/tabs/documentation/code-examples/sectioned-form/modal/address-form-demo.component.ts",
+      "rawContents": "import { ChangeDetectionStrategy, Component } from '@angular/core';\n\n@Component({\n  selector: 'app-address-form-demo',\n  templateUrl: './address-form-demo.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class AddressFormDemoComponent {}\n"
     },
     {
-      "fileName": "wizard-demo.module.ts",
-      "filePath": "/projects/tabs/documentation/code-examples/wizard/basic/wizard-demo.module.ts",
-      "rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { SkyIdModule } from '@skyux/core';\nimport { SkyCheckboxModule, SkyInputBoxModule } from '@skyux/forms';\nimport { SkyStatusIndicatorModule } from '@skyux/indicators';\nimport { SkyFluidGridModule } from '@skyux/layout';\nimport { SkyModalModule } from '@skyux/modals';\nimport { SkyPhoneFieldModule } from '@skyux/phone-field';\nimport { SkyTabsModule } from '@skyux/tabs';\nimport { SkyThemeModule } from '@skyux/theme';\n\nimport { WizardDemoModalComponent } from './wizard-demo-modal.component';\nimport { WizardDemoComponent } from './wizard-demo.component';\n\n@NgModule({\n  declarations: [WizardDemoComponent, WizardDemoModalComponent],\n  imports: [\n    CommonModule,\n    ReactiveFormsModule,\n    SkyCheckboxModule,\n    SkyFluidGridModule,\n    SkyIdModule,\n    SkyInputBoxModule,\n    SkyModalModule,\n    SkyPhoneFieldModule,\n    SkyStatusIndicatorModule,\n    SkyTabsModule,\n    SkyThemeModule,\n  ],\n  exports: [WizardDemoComponent],\n})\nexport class WizardDemoModule {}\n"
+      "fileName": "address-form-demo.component.html",
+      "filePath": "/projects/tabs/documentation/code-examples/sectioned-form/modal/address-form-demo.component.html",
+      "rawContents": "<div>Address form</div>\n"
     }
   ]
 }

package/esm2022/lib/modules/sectioned-form/sectioned-form-section.component.mjs

@@ -0,0 +1,65 @@
+import { Component, Input, ViewChild, } 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 * 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 "@angular/common";
+import * as i4 from "../vertical-tabset/vertical-tab.component";
+let nextId = 0;
+/**
+ * Creates an individual form to display as a section within the sectioned form.
+ */
+export class SkySectionedFormSectionComponent {
+    #ngUnsubscribe;
+    #sectionedFormService;
+    #tabsetService;
+    #changeRef;
+    constructor(sectionedFormService, tabsetService, changeRef) {
+        this.sectionTabId = `sky-sectioned-form-tab-${++nextId}`;
+        this.sectionContentId = `sky-sectioned-form-section-${++nextId}`;
+        /**
+         * Whether the section is active when the form loads.
+         * @default false
+         */
+        this.active = false;
+        this.#ngUnsubscribe = new Subject();
+        this.#sectionedFormService = sectionedFormService;
+        this.#tabsetService = tabsetService;
+        this.#changeRef = changeRef;
+    }
+    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();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkySectionedFormSectionComponent, deps: [{ token: i1.SkySectionedFormService }, { token: i2.SkyVerticalTabsetService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", 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:var(--sky-highlight-color-danger);padding-left:5px}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i4.SkyVerticalTabComponent, selector: "sky-vertical-tab", inputs: ["active", "ariaControls", "ariaRole", "disabled", "errorIndicator", "tabHeaderCount", "tabHeading", "showTabRightArrow", "tabId"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkySectionedFormSectionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-sectioned-form-section', providers: [SkySectionedFormService], 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:var(--sky-highlight-color-danger);padding-left:5px}\n"] }]
+        }], 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=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2VjdGlvbmVkLWZvcm0tc2VjdGlvbi5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9saWJzL2NvbXBvbmVudHMvdGFicy9zcmMvbGliL21vZHVsZXMvc2VjdGlvbmVkLWZvcm0vc2VjdGlvbmVkLWZvcm0tc2VjdGlvbi5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9saWJzL2NvbXBvbmVudHMvdGFicy9zcmMvbGliL21vZHVsZXMvc2VjdGlvbmVkLWZvcm0vc2VjdGlvbmVkLWZvcm0tc2VjdGlvbi5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBRUwsU0FBUyxFQUNULEtBQUssRUFHTCxTQUFTLEdBQ1YsTUFBTSxlQUFlLENBQUM7QUFFdkIsT0FBTyxFQUFFLE9BQU8sRUFBRSxNQUFNLE1BQU0sQ0FBQztBQUMvQixPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFJM0MsT0FBTyxFQUFFLHVCQUF1QixFQUFFLE1BQU0sNkNBQTZDLENBQUM7QUFDdEYsT0FBTyxFQUFFLHVCQUF1QixFQUFFLE1BQU0sMEJBQTBCLENBQUM7Ozs7OztBQUVuRSxJQUFJLE1BQU0sR0FBRyxDQUFDLENBQUM7QUFFZjs7R0FFRztBQU9ILE1BQU0sT0FBTyxnQ0FBZ0M7SUE4QjNDLGNBQWMsQ0FBdUI7SUFFckMscUJBQXFCLENBQTBCO0lBQy9DLGNBQWMsQ0FBMkI7SUFDekMsVUFBVSxDQUFvQjtJQUU5QixZQUNFLG9CQUE2QyxFQUM3QyxhQUF1QyxFQUN2QyxTQUE0QjtRQXRDdkIsaUJBQVksR0FBRywwQkFBMEIsRUFBRSxNQUFNLEVBQUUsQ0FBQztRQUNwRCxxQkFBZ0IsR0FBRyw4QkFBOEIsRUFBRSxNQUFNLEVBQUUsQ0FBQztRQWVuRTs7O1dBR0c7UUFFSSxXQUFNLEdBQXdCLEtBQUssQ0FBQztRQVEzQyxtQkFBYyxHQUFHLElBQUksT0FBTyxFQUFRLENBQUM7UUFXbkMsSUFBSSxDQUFDLHFCQUFxQixHQUFHLG9CQUFvQixDQUFDO1FBQ2xELElBQUksQ0FBQyxjQUFjLEdBQUcsYUFBYSxDQUFDO1FBQ3BDLElBQUksQ0FBQyxVQUFVLEdBQUcsU0FBUyxDQUFDO0lBQzlCLENBQUM7SUFFTSxRQUFRO1FBQ2IsSUFBSSxDQUFDLFVBQVUsQ0FBQyxhQUFhLEVBQUUsQ0FBQztRQUVoQyxJQUFJLENBQUMsY0FBYyxDQUFDLGVBQWUsQ0FBQyxTQUFTLENBQUMsQ0FBQyxNQUFlLEVBQUUsRUFBRTtZQUNoRSxJQUFJLENBQUMsVUFBVSxDQUFDLGFBQWEsRUFBRSxDQUFDO1FBQ2xDLENBQUMsQ0FBQyxDQUFDO1FBRUgsSUFBSSxDQUFDLHFCQUFxQixDQUFDLGNBQWM7YUFDdEMsSUFBSSxDQUFDLFNBQVMsQ0FBQyxJQUFJLENBQUMsY0FBYyxDQUFDLENBQUM7YUFDcEMsU0FBUyxDQUNSLENBQUMsUUFBNkIsRUFBRSxFQUFFLENBQUMsQ0FBQyxJQUFJLENBQUMsYUFBYSxHQUFHLFFBQVEsQ0FBQyxDQUNuRSxDQUFDO1FBRUosSUFBSSxDQUFDLHFCQUFxQixDQUFDLGFBQWE7YUFDckMsSUFBSSxDQUFDLFNBQVMsQ0FBQyxJQUFJLENBQUMsY0FBYyxDQUFDLENBQUM7YUFDcEMsU0FBUyxDQUNSLENBQUMsT0FBNEIsRUFBRSxFQUFFLENBQUMsQ0FBQyxJQUFJLENBQUMsWUFBWSxHQUFHLE9BQU8sQ0FBQyxDQUNoRSxDQUFDO0lBQ04sQ0FBQztJQUVNLFdBQVc7UUFDaEIsSUFBSSxDQUFDLGNBQWMsQ0FBQyxJQUFJLEVBQUUsQ0FBQztRQUMzQixJQUFJLENBQUMsY0FBYyxDQUFDLFFBQVEsRUFBRSxDQUFDO0lBQ2pDLENBQUM7OEdBckVVLGdDQUFnQztrR0FBaEMsZ0NBQWdDLCtIQUhoQyxDQUFDLHVCQUF1QixDQUFDLCtEQThCekIsdUJBQXVCLGdEQ3ZEcEMscVVBYUE7OzJGRGVhLGdDQUFnQztrQkFONUMsU0FBUzsrQkFDRSw0QkFBNEIsYUFFM0IsQ0FBQyx1QkFBdUIsQ0FBQztxTEFZN0IsT0FBTztzQkFEYixLQUFLO2dCQU9DLFNBQVM7c0JBRGYsS0FBSztnQkFRQyxNQUFNO3NCQURaLEtBQUs7Z0JBT0MsR0FBRztzQkFEVCxTQUFTO3VCQUFDLHVCQUF1QiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIENoYW5nZURldGVjdG9yUmVmLFxuICBDb21wb25lbnQsXG4gIElucHV0LFxuICBPbkRlc3Ryb3ksXG4gIE9uSW5pdCxcbiAgVmlld0NoaWxkLFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuaW1wb3J0IHsgU3ViamVjdCB9IGZyb20gJ3J4anMnO1xuaW1wb3J0IHsgdGFrZVVudGlsIH0gZnJvbSAncnhqcy9vcGVyYXRvcnMnO1xuXG5pbXBvcnQgeyBTa3lWZXJ0aWNhbFRhYnNldFNlcnZpY2UgfSBmcm9tICcuLi92ZXJ0aWNhbC10YWJzZXQvdmVydGljYWwtdGFic2V0LnNlcnZpY2UnO1xuXG5pbXBvcnQgeyBTa3lWZXJ0aWNhbFRhYkNvbXBvbmVudCB9IGZyb20gJy4vLi4vdmVydGljYWwtdGFic2V0L3ZlcnRpY2FsLXRhYi5jb21wb25lbnQnO1xuaW1wb3J0IHsgU2t5U2VjdGlvbmVkRm9ybVNlcnZpY2UgfSBmcm9tICcuL3NlY3Rpb25lZC1mb3JtLnNlcnZpY2UnO1xuXG5sZXQgbmV4dElkID0gMDtcblxuLyoqXG4gKiBDcmVhdGVzIGFuIGluZGl2aWR1YWwgZm9ybSB0byBkaXNwbGF5IGFzIGEgc2VjdGlvbiB3aXRoaW4gdGhlIHNlY3Rpb25lZCBmb3JtLlxuICovXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdza3ktc2VjdGlvbmVkLWZvcm0tc2VjdGlvbicsXG4gIHRlbXBsYXRlVXJsOiAnLi9zZWN0aW9uZWQtZm9ybS1zZWN0aW9uLmNvbXBvbmVudC5odG1sJyxcbiAgcHJvdmlkZXJzOiBbU2t5U2VjdGlvbmVkRm9ybVNlcnZpY2VdLFxuICBzdHlsZVVybHM6IFsnLi9zZWN0aW9uZWQtZm9ybS1zZWN0aW9uLmNvbXBvbmVudC5zY3NzJ10sXG59KVxuZXhwb3J0IGNsYXNzIFNreVNlY3Rpb25lZEZvcm1TZWN0aW9uQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0LCBPbkRlc3Ryb3kge1xuICBwdWJsaWMgc2VjdGlvblRhYklkID0gYHNreS1zZWN0aW9uZWQtZm9ybS10YWItJHsrK25leHRJZH1gO1xuICBwdWJsaWMgc2VjdGlvbkNvbnRlbnRJZCA9IGBza3ktc2VjdGlvbmVkLWZvcm0tc2VjdGlvbi0keysrbmV4dElkfWA7XG5cbiAgLyoqXG4gICAqIFRoZSBzZWN0aW9uIGhlYWRlci5cbiAgICogQHJlcXVpcmVkXG4gICAqL1xuICBASW5wdXQoKVxuICBwdWJsaWMgaGVhZGluZzogc3RyaW5nIHwgdW5kZWZpbmVkO1xuXG4gIC8qKlxuICAgKiBUaGUgbnVtYmVyIG9mIGl0ZW1zIHdpdGhpbiB0aGUgc2VjdGlvbi4gQSBjb3VudGVyIGFwcGVhcnMgYmVzaWRlIHRoZSBzZWN0aW9uIGhlYWRlci5cbiAgICovXG4gIEBJbnB1dCgpXG4gIHB1YmxpYyBpdGVtQ291bnQ6IG51bWJlciB8IHVuZGVmaW5lZDtcblxuICAvKipcbiAgICogV2hldGhlciB0aGUgc2VjdGlvbiBpcyBhY3RpdmUgd2hlbiB0aGUgZm9ybSBsb2Fkcy5cbiAgICogQGRlZmF1bHQgZmFsc2VcbiAgICovXG4gIEBJbnB1dCgpXG4gIHB1YmxpYyBhY3RpdmU6IGJvb2xlYW4gfCB1bmRlZmluZWQgPSBmYWxzZTtcblxuICBwdWJsaWMgZmllbGRSZXF1aXJlZDogYm9vbGVhbiB8IHVuZGVmaW5lZDtcbiAgcHVibGljIGZpZWxkSW52YWxpZDogYm9vbGVhbiB8IHVuZGVmaW5lZDtcblxuICBAVmlld0NoaWxkKFNreVZlcnRpY2FsVGFiQ29tcG9uZW50KVxuICBwdWJsaWMgdGFiOiBTa3lWZXJ0aWNhbFRhYkNvbXBvbmVudCB8IHVuZGVmaW5lZDtcblxuICAjbmdVbnN1YnNjcmliZSA9IG5ldyBTdWJqZWN0PHZvaWQ+KCk7XG5cbiAgI3NlY3Rpb25lZEZvcm1TZXJ2aWNlOiBTa3lTZWN0aW9uZWRGb3JtU2VydmljZTtcbiAgI3RhYnNldFNlcnZpY2U6IFNreVZlcnRpY2FsVGFic2V0U2VydmljZTtcbiAgI2NoYW5nZVJlZjogQ2hhbmdlRGV0ZWN0b3JSZWY7XG5cbiAgY29uc3RydWN0b3IoXG4gICAgc2VjdGlvbmVkRm9ybVNlcnZpY2U6IFNreVNlY3Rpb25lZEZvcm1TZXJ2aWNlLFxuICAgIHRhYnNldFNlcnZpY2U6IFNreVZlcnRpY2FsVGFic2V0U2VydmljZSxcbiAgICBjaGFuZ2VSZWY6IENoYW5nZURldGVjdG9yUmVmXG4gICkge1xuICAgIHRoaXMuI3NlY3Rpb25lZEZvcm1TZXJ2aWNlID0gc2VjdGlvbmVkRm9ybVNlcnZpY2U7XG4gICAgdGhpcy4jdGFic2V0U2VydmljZSA9IHRhYnNldFNlcnZpY2U7XG4gICAgdGhpcy4jY2hhbmdlUmVmID0gY2hhbmdlUmVmO1xuICB9XG5cbiAgcHVibGljIG5nT25Jbml0KCkge1xuICAgIHRoaXMuI2NoYW5nZVJlZi5kZXRlY3RDaGFuZ2VzKCk7XG5cbiAgICB0aGlzLiN0YWJzZXRTZXJ2aWNlLnN3aXRjaGluZ01vYmlsZS5zdWJzY3JpYmUoKG1vYmlsZTogYm9vbGVhbikgPT4ge1xuICAgICAgdGhpcy4jY2hhbmdlUmVmLmRldGVjdENoYW5nZXMoKTtcbiAgICB9KTtcblxuICAgIHRoaXMuI3NlY3Rpb25lZEZvcm1TZXJ2aWNlLnJlcXVpcmVkQ2hhbmdlXG4gICAgICAucGlwZSh0YWtlVW50aWwodGhpcy4jbmdVbnN1YnNjcmliZSkpXG4gICAgICAuc3Vic2NyaWJlKFxuICAgICAgICAocmVxdWlyZWQ6IGJvb2xlYW4gfCB1bmRlZmluZWQpID0+ICh0aGlzLmZpZWxkUmVxdWlyZWQgPSByZXF1aXJlZClcbiAgICAgICk7XG5cbiAgICB0aGlzLiNzZWN0aW9uZWRGb3JtU2VydmljZS5pbnZhbGlkQ2hhbmdlXG4gICAgICAucGlwZSh0YWtlVW50aWwodGhpcy4jbmdVbnN1YnNjcmliZSkpXG4gICAgICAuc3Vic2NyaWJlKFxuICAgICAgICAoaW52YWxpZDogYm9vbGVhbiB8IHVuZGVmaW5lZCkgPT4gKHRoaXMuZmllbGRJbnZhbGlkID0gaW52YWxpZClcbiAgICAgICk7XG4gIH1cblxuICBwdWJsaWMgbmdPbkRlc3Ryb3koKSB7XG4gICAgdGhpcy4jbmdVbnN1YnNjcmliZS5uZXh0KCk7XG4gICAgdGhpcy4jbmdVbnN1YnNjcmliZS5jb21wbGV0ZSgpO1xuICB9XG59XG4iLCI8c2t5LXZlcnRpY2FsLXRhYlxuICBbYWN0aXZlXT1cImFjdGl2ZVwiXG4gIFtlcnJvckluZGljYXRvcl09XCJmaWVsZEludmFsaWRcIlxuICBbbmdDbGFzc109XCJ7XG4gICAgJ3NreS10YWItZmllbGQtcmVxdWlyZWQnOiBmaWVsZFJlcXVpcmVkXG4gIH1cIlxuICBbc2hvd1RhYlJpZ2h0QXJyb3ddPVwidHJ1ZVwiXG4gIFt0YWJIZWFkZXJDb3VudF09XCJpdGVtQ291bnRcIlxuICBbdGFiSGVhZGluZ109XCJoZWFkaW5nXCJcbiAgW3RhYklkXT1cInNlY3Rpb25UYWJJZFwiXG4+XG4gIDxuZy1jb250ZW50PjwvbmctY29udGVudD5cbjwvc2t5LXZlcnRpY2FsLXRhYj5cbiJdfQ==