@skyux/code-examples 14.5.0 → 14.6.0

package/fesm2022/skyux-code-examples.mjs

@@ -14221,7 +14221,7 @@ let ModalComponent$1 = class ModalComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ModalComponent, isStandalone: true, selector: "app-modal", ngImport: i0, template: "<sky-modal [headingText]=\"'Sectioned form \u2014 Index: ' + activeIndexDisplay\">\n  <sky-modal-content>\n    <sky-sectioned-form\n      data-sky-id=\"modal-sectioned-form\"\n      [messageStream]=\"sectionedFormController\"\n      (indexChanged)=\"onIndexChanged($event)\"\n      (tabsVisibleChanged)=\"onTabsVisibleChanged($event)\"\n    >\n      <sky-sectioned-form-section heading=\"Basic information\">\n        <app-information-form />\n      </sky-sectioned-form-section>\n      <sky-sectioned-form-section\n        heading=\"Addresses\"\n        [itemCount]=\"2\"\n        [active]=\"activeTab\"\n      >\n        <app-address-form />\n      </sky-sectioned-form-section>\n      <sky-sectioned-form-section heading=\"Phone numbers\" [itemCount]=\"3\">\n        <app-phone-form />\n      </sky-sectioned-form-section>\n    </sky-sectioned-form>\n  </sky-modal-content>\n  <sky-modal-footer>\n    @if (tabsHidden) {\n      <button\n        class=\"sky-btn sky-btn-default\"\n        type=\"button\"\n        (click)=\"showTabs()\"\n      >\n        <sky-icon iconName=\"chevron-left\" />\n        Show sections\n      </button>\n    }\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", dependencies: [{ kind: "component", type: AddressFormComponent, selector: "app-address-form" }, { kind: "component", type: InformationFormComponent, selector: "app-information-form" }, { kind: "component", type: PhoneFormComponent, selector: "app-phone-form" }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1$9.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyModalModule }, { kind: "component", type: i3.λ5, selector: "sky-modal", inputs: ["formErrors", "headingText", "helpKey", "helpPopoverContent", "helpPopoverTitle", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy", "layout", "headingHidden"] }, { kind: "component", type: i3.λ2, selector: "sky-modal-content" }, { kind: "component", type: i3.λ3, selector: "sky-modal-footer" }, { kind: "ngmodule", type: SkySectionedFormModule }, { kind: "component", type: i1$2.SkySectionedFormComponent, selector: "sky-sectioned-form", inputs: ["maintainSectionContent", "messageStream"], outputs: ["indexChanged", "tabsVisibleChanged"] }, { kind: "component", type: i1$2.λ5, selector: "sky-sectioned-form-section", inputs: ["heading", "itemCount", "active"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ModalComponent, isStandalone: true, selector: "app-modal", ngImport: i0, template: "<sky-modal [headingText]=\"'Sectioned form \u2014 Index: ' + activeIndexDisplay\">\n  <sky-modal-content>\n    <sky-sectioned-form\n      data-sky-id=\"modal-sectioned-form\"\n      tabWidth=\"auto\"\n      [messageStream]=\"sectionedFormController\"\n      (indexChanged)=\"onIndexChanged($event)\"\n      (tabsVisibleChanged)=\"onTabsVisibleChanged($event)\"\n    >\n      <sky-sectioned-form-section heading=\"Basic information\">\n        <app-information-form />\n      </sky-sectioned-form-section>\n      <sky-sectioned-form-section\n        heading=\"Addresses\"\n        [itemCount]=\"2\"\n        [active]=\"activeTab\"\n      >\n        <app-address-form />\n      </sky-sectioned-form-section>\n      <sky-sectioned-form-section heading=\"Phone numbers\" [itemCount]=\"3\">\n        <app-phone-form />\n      </sky-sectioned-form-section>\n    </sky-sectioned-form>\n  </sky-modal-content>\n  <sky-modal-footer>\n    @if (tabsHidden) {\n      <button\n        class=\"sky-btn sky-btn-default\"\n        type=\"button\"\n        (click)=\"showTabs()\"\n      >\n        <sky-icon iconName=\"chevron-left\" />\n        Show sections\n      </button>\n    }\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", dependencies: [{ kind: "component", type: AddressFormComponent, selector: "app-address-form" }, { kind: "component", type: InformationFormComponent, selector: "app-information-form" }, { kind: "component", type: PhoneFormComponent, selector: "app-phone-form" }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1$9.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyModalModule }, { kind: "component", type: i3.λ5, selector: "sky-modal", inputs: ["formErrors", "headingText", "helpKey", "helpPopoverContent", "helpPopoverTitle", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy", "layout", "headingHidden"] }, { kind: "component", type: i3.λ2, selector: "sky-modal-content" }, { kind: "component", type: i3.λ3, selector: "sky-modal-footer" }, { kind: "ngmodule", type: SkySectionedFormModule }, { kind: "component", type: i1$2.SkySectionedFormComponent, selector: "sky-sectioned-form", inputs: ["maintainSectionContent", "tabWidth", "messageStream"], outputs: ["indexChanged", "tabsVisibleChanged"] }, { kind: "component", type: i1$2.λ5, selector: "sky-sectioned-form-section", inputs: ["heading", "itemCount", "active"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 };
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ModalComponent$1, decorators: [{
             type: Component,
@@ -14232,7 +14232,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                         SkyIconModule,
                         SkyModalModule,
                         SkySectionedFormModule,
-                    ], template: "<sky-modal [headingText]=\"'Sectioned form \u2014 Index: ' + activeIndexDisplay\">\n  <sky-modal-content>\n    <sky-sectioned-form\n      data-sky-id=\"modal-sectioned-form\"\n      [messageStream]=\"sectionedFormController\"\n      (indexChanged)=\"onIndexChanged($event)\"\n      (tabsVisibleChanged)=\"onTabsVisibleChanged($event)\"\n    >\n      <sky-sectioned-form-section heading=\"Basic information\">\n        <app-information-form />\n      </sky-sectioned-form-section>\n      <sky-sectioned-form-section\n        heading=\"Addresses\"\n        [itemCount]=\"2\"\n        [active]=\"activeTab\"\n      >\n        <app-address-form />\n      </sky-sectioned-form-section>\n      <sky-sectioned-form-section heading=\"Phone numbers\" [itemCount]=\"3\">\n        <app-phone-form />\n      </sky-sectioned-form-section>\n    </sky-sectioned-form>\n  </sky-modal-content>\n  <sky-modal-footer>\n    @if (tabsHidden) {\n      <button\n        class=\"sky-btn sky-btn-default\"\n        type=\"button\"\n        (click)=\"showTabs()\"\n      >\n        <sky-icon iconName=\"chevron-left\" />\n        Show sections\n      </button>\n    }\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" }]
+                    ], template: "<sky-modal [headingText]=\"'Sectioned form \u2014 Index: ' + activeIndexDisplay\">\n  <sky-modal-content>\n    <sky-sectioned-form\n      data-sky-id=\"modal-sectioned-form\"\n      tabWidth=\"auto\"\n      [messageStream]=\"sectionedFormController\"\n      (indexChanged)=\"onIndexChanged($event)\"\n      (tabsVisibleChanged)=\"onTabsVisibleChanged($event)\"\n    >\n      <sky-sectioned-form-section heading=\"Basic information\">\n        <app-information-form />\n      </sky-sectioned-form-section>\n      <sky-sectioned-form-section\n        heading=\"Addresses\"\n        [itemCount]=\"2\"\n        [active]=\"activeTab\"\n      >\n        <app-address-form />\n      </sky-sectioned-form-section>\n      <sky-sectioned-form-section heading=\"Phone numbers\" [itemCount]=\"3\">\n        <app-phone-form />\n      </sky-sectioned-form-section>\n    </sky-sectioned-form>\n  </sky-modal-content>\n  <sky-modal-footer>\n    @if (tabsHidden) {\n      <button\n        class=\"sky-btn sky-btn-default\"\n        type=\"button\"\n        (click)=\"showTabs()\"\n      >\n        <sky-icon iconName=\"chevron-left\" />\n        Show sections\n      </button>\n    }\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" }]
         }] });
 
 /**
@@ -14364,11 +14364,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
  */
 class TabsVerticalTabsBasicExampleComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TabsVerticalTabsBasicExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: TabsVerticalTabsBasicExampleComponent, isStandalone: true, selector: "app-tabs-vertical-tabs-basic-example", ngImport: i0, template: "<sky-vertical-tabset data-sky-id=\"vertical-tabs-basic\">\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\" [disabled]=\"true\">\n    Tab 3 content\n  </sky-vertical-tab>\n</sky-vertical-tabset>\n", dependencies: [{ kind: "ngmodule", type: SkyVerticalTabsetModule }, { kind: "component", type: i1$2.λ6, selector: "sky-vertical-tabset", inputs: ["showTabsText", "ariaLabel", "ariaLabelledBy", "ariaRole", "maintainTabContent"], outputs: ["activeChange"] }, { kind: "component", type: i1$2.λ4, selector: "sky-vertical-tab", inputs: ["active", "ariaControls", "ariaRole", "disabled", "errorIndicator", "requiredIndicator", "tabHeaderCount", "tabHeading", "showTabRightArrow", "tabId"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: TabsVerticalTabsBasicExampleComponent, isStandalone: true, selector: "app-tabs-vertical-tabs-basic-example", ngImport: i0, template: "<sky-vertical-tabset data-sky-id=\"vertical-tabs-basic\" tabWidth=\"auto\">\n  <sky-vertical-tab tabHeading=\"A short tab\"> 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\n    tabHeading=\"A very long tab heading that wraps when the width is constrained\"\n    [disabled]=\"true\"\n  >\n    Tab 3 content\n  </sky-vertical-tab>\n</sky-vertical-tabset>\n", dependencies: [{ kind: "ngmodule", type: SkyVerticalTabsetModule }, { kind: "component", type: i1$2.λ6, selector: "sky-vertical-tabset", inputs: ["showTabsText", "ariaLabel", "ariaLabelledBy", "ariaRole", "maintainTabContent", "tabWidth"], outputs: ["activeChange"] }, { kind: "component", type: i1$2.λ4, selector: "sky-vertical-tab", inputs: ["active", "ariaControls", "ariaRole", "disabled", "errorIndicator", "requiredIndicator", "tabHeaderCount", "tabHeading", "showTabRightArrow", "tabId"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TabsVerticalTabsBasicExampleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-tabs-vertical-tabs-basic-example', imports: [SkyVerticalTabsetModule], template: "<sky-vertical-tabset data-sky-id=\"vertical-tabs-basic\">\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\" [disabled]=\"true\">\n    Tab 3 content\n  </sky-vertical-tab>\n</sky-vertical-tabset>\n" }]
+            args: [{ selector: 'app-tabs-vertical-tabs-basic-example', imports: [SkyVerticalTabsetModule], template: "<sky-vertical-tabset data-sky-id=\"vertical-tabs-basic\" tabWidth=\"auto\">\n  <sky-vertical-tab tabHeading=\"A short tab\"> 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\n    tabHeading=\"A very long tab heading that wraps when the width is constrained\"\n    [disabled]=\"true\"\n  >\n    Tab 3 content\n  </sky-vertical-tab>\n</sky-vertical-tabset>\n" }]
         }] });
 
 /**
@@ -14416,7 +14416,7 @@ class TabsVerticalTabsGroupedExampleComponent {
         ];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TabsVerticalTabsGroupedExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: TabsVerticalTabsGroupedExampleComponent, isStandalone: true, selector: "app-tabs-vertical-tabs-grouped-example", ngImport: i0, template: "<sky-vertical-tabset data-sky-id=\"vertical-tabs-group\" showTabsText=\"Tab list\">\n  @for (group of groups; track group) {\n    <sky-vertical-tabset-group\n      [groupHeading]=\"group.heading\"\n      [open]=\"group.isOpen\"\n      [disabled]=\"group.isDisabled\"\n    >\n      @for (tab of group.subTabs; track tab) {\n        <sky-vertical-tab\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      }\n    </sky-vertical-tabset-group>\n  }\n</sky-vertical-tabset>\n", dependencies: [{ kind: "ngmodule", type: SkyVerticalTabsetModule }, { kind: "component", type: i1$2.λ6, selector: "sky-vertical-tabset", inputs: ["showTabsText", "ariaLabel", "ariaLabelledBy", "ariaRole", "maintainTabContent"], outputs: ["activeChange"] }, { kind: "component", type: i1$2.λ7, selector: "sky-vertical-tabset-group", inputs: ["disabled", "groupHeading", "open"] }, { kind: "component", type: i1$2.λ4, selector: "sky-vertical-tab", inputs: ["active", "ariaControls", "ariaRole", "disabled", "errorIndicator", "requiredIndicator", "tabHeaderCount", "tabHeading", "showTabRightArrow", "tabId"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: TabsVerticalTabsGroupedExampleComponent, isStandalone: true, selector: "app-tabs-vertical-tabs-grouped-example", ngImport: i0, template: "<sky-vertical-tabset data-sky-id=\"vertical-tabs-group\" showTabsText=\"Tab list\">\n  @for (group of groups; track group) {\n    <sky-vertical-tabset-group\n      [groupHeading]=\"group.heading\"\n      [open]=\"group.isOpen\"\n      [disabled]=\"group.isDisabled\"\n    >\n      @for (tab of group.subTabs; track tab) {\n        <sky-vertical-tab\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      }\n    </sky-vertical-tabset-group>\n  }\n</sky-vertical-tabset>\n", dependencies: [{ kind: "ngmodule", type: SkyVerticalTabsetModule }, { kind: "component", type: i1$2.λ6, selector: "sky-vertical-tabset", inputs: ["showTabsText", "ariaLabel", "ariaLabelledBy", "ariaRole", "maintainTabContent", "tabWidth"], outputs: ["activeChange"] }, { kind: "component", type: i1$2.λ7, selector: "sky-vertical-tabset-group", inputs: ["disabled", "groupHeading", "open"] }, { kind: "component", type: i1$2.λ4, selector: "sky-vertical-tab", inputs: ["active", "ariaControls", "ariaRole", "disabled", "errorIndicator", "requiredIndicator", "tabHeaderCount", "tabHeading", "showTabRightArrow", "tabId"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TabsVerticalTabsGroupedExampleComponent, decorators: [{
             type: Component,
@@ -14476,7 +14476,7 @@ class TabsVerticalTabsMixedExampleComponent {
         ];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TabsVerticalTabsMixedExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: TabsVerticalTabsMixedExampleComponent, isStandalone: true, selector: "app-tabs-vertical-tabs-mixed-example", ngImport: i0, template: "<sky-vertical-tabset data-sky-id=\"vertical-tabs-mixed\" showTabsText=\"Tab list\">\n  @for (group of groupedTabs; track group) {\n    <sky-vertical-tabset-group\n      [groupHeading]=\"group.heading\"\n      [open]=\"group.isOpen\"\n      [disabled]=\"group.isDisabled\"\n    >\n      @for (tab of group.subTabs; track tab) {\n        <sky-vertical-tab [active]=\"tab.active\" [tabHeading]=\"tab.tabHeading\">\n          {{ tab.content }}\n        </sky-vertical-tab>\n      }\n    </sky-vertical-tabset-group>\n  }\n\n  <sky-vertical-tab tabHeading=\"Tab 1\"> Tab 1 Content </sky-vertical-tab>\n\n  <sky-vertical-tab tabHeading=\"Tab 2\" [tabHeaderCount]=\"3\">\n    Tab 2 Content\n  </sky-vertical-tab>\n\n  <sky-vertical-tab tabHeading=\"Tab 3\" [disabled]=\"true\">\n    Tab 3 Content\n  </sky-vertical-tab>\n</sky-vertical-tabset>\n", dependencies: [{ kind: "ngmodule", type: SkyVerticalTabsetModule }, { kind: "component", type: i1$2.λ6, selector: "sky-vertical-tabset", inputs: ["showTabsText", "ariaLabel", "ariaLabelledBy", "ariaRole", "maintainTabContent"], outputs: ["activeChange"] }, { kind: "component", type: i1$2.λ7, selector: "sky-vertical-tabset-group", inputs: ["disabled", "groupHeading", "open"] }, { kind: "component", type: i1$2.λ4, selector: "sky-vertical-tab", inputs: ["active", "ariaControls", "ariaRole", "disabled", "errorIndicator", "requiredIndicator", "tabHeaderCount", "tabHeading", "showTabRightArrow", "tabId"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: TabsVerticalTabsMixedExampleComponent, isStandalone: true, selector: "app-tabs-vertical-tabs-mixed-example", ngImport: i0, template: "<sky-vertical-tabset data-sky-id=\"vertical-tabs-mixed\" showTabsText=\"Tab list\">\n  @for (group of groupedTabs; track group) {\n    <sky-vertical-tabset-group\n      [groupHeading]=\"group.heading\"\n      [open]=\"group.isOpen\"\n      [disabled]=\"group.isDisabled\"\n    >\n      @for (tab of group.subTabs; track tab) {\n        <sky-vertical-tab [active]=\"tab.active\" [tabHeading]=\"tab.tabHeading\">\n          {{ tab.content }}\n        </sky-vertical-tab>\n      }\n    </sky-vertical-tabset-group>\n  }\n\n  <sky-vertical-tab tabHeading=\"Tab 1\"> Tab 1 Content </sky-vertical-tab>\n\n  <sky-vertical-tab tabHeading=\"Tab 2\" [tabHeaderCount]=\"3\">\n    Tab 2 Content\n  </sky-vertical-tab>\n\n  <sky-vertical-tab tabHeading=\"Tab 3\" [disabled]=\"true\">\n    Tab 3 Content\n  </sky-vertical-tab>\n</sky-vertical-tabset>\n", dependencies: [{ kind: "ngmodule", type: SkyVerticalTabsetModule }, { kind: "component", type: i1$2.λ6, selector: "sky-vertical-tabset", inputs: ["showTabsText", "ariaLabel", "ariaLabelledBy", "ariaRole", "maintainTabContent", "tabWidth"], outputs: ["activeChange"] }, { kind: "component", type: i1$2.λ7, selector: "sky-vertical-tabset-group", inputs: ["disabled", "groupHeading", "open"] }, { kind: "component", type: i1$2.λ4, selector: "sky-vertical-tab", inputs: ["active", "ariaControls", "ariaRole", "disabled", "errorIndicator", "requiredIndicator", "tabHeaderCount", "tabHeading", "showTabRightArrow", "tabId"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TabsVerticalTabsMixedExampleComponent, decorators: [{
             type: Component,