carbon-components-angular/docs/storybook/tabs-tabs-stories.a0cfde9f.iframe.bundle.js

Next generation components

"use strict";(self.webpackChunkcarbon_components_angular=self.webpackChunkcarbon_components_angular||[]).push([[459],{"./src/tabs/tabs.stories.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Basic:()=>Basic,BeforeAndAfter:()=>BeforeAndAfter,ContainedFullWidth:()=>ContainedFullWidth,ContainedWithSecondaryLabels:()=>ContainedWithSecondaryLabels,Skeleton:()=>Skeleton,With:()=>With,__namedExportsOrder:()=>__namedExportsOrder,default:()=>__WEBPACK_DEFAULT_EXPORT__});var _storybook_angular__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/@storybook/angular/dist/index.mjs"),_grid_grid_module__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./src/grid/grid.module.ts"),_icon_icon_module__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./src/icon/icon.module.ts"),___WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./src/tabs/index.ts"),_stories__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./src/tabs/stories/index.ts");const __WEBPACK_DEFAULT_EXPORT__={title:"Components/Tabs",decorators:[(0,_storybook_angular__WEBPACK_IMPORTED_MODULE_0__.moduleMetadata)({imports:[_icon_icon_module__WEBPACK_IMPORTED_MODULE_2__.QX,_grid_grid_module__WEBPACK_IMPORTED_MODULE_1__.z,___WEBPACK_IMPORTED_MODULE_3__.P4,_stories__WEBPACK_IMPORTED_MODULE_4__.A]})]},Basic=(args=>({props:args,template:'\n        <cds-tabs\n            [type]="type"\n            [followFocus]="followFocus"\n            [isNavigation]="isNavigation"\n            [cacheActive]="cacheActive">\n            <cds-tab heading="one">Tab Content 1</cds-tab>\n            <cds-tab heading="two">Tab Content 2</cds-tab>\n            <cds-tab heading="three" [tabContent]="three"></cds-tab>\n            <cds-tab heading="four" [tabContent]="four"></cds-tab>\n        </cds-tabs>\n\n        \x3c!-- Use templates if you would like to have lifecycle hooks called when cacheActive is false --\x3e\n        <ng-template #three>\n            Tab Content 3\n        </ng-template>\n\n        <ng-template #four>\n            Tab Content 4\n        </ng-template>\n    '})).bind({});Basic.args={followFocus:!0,cacheActive:!0,isNavigation:!1,type:"line"},Basic.argTypes={type:{options:["line","contained"],control:"radio"}};const With=(args=>({props:args,template:'\n        <ng-template #customTabs let-item>\n            {{item ? item.name : "wait for it"}}\n        </ng-template>\n        <ng-template #iconTab>\n            <div style="height: 14px;">\n                Something custom\n                <svg width="16" height="16" viewBox="0 0 16 16"\n                style="height: 14px; width: 14px; fill: #3d70b2;">\n                    <path d="M8 14.5a6.5 6.5 0 1 0 0-13 6.5 6.5 0 0 0 0 13zM8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"></path>\n                    <path d="M9 13H7V7h2z"></path>\n                    <path d="M7 4a1 1 0 1 1 2 0 1 1 0 1 1-2 0"></path>\n                </svg>\n            </div>\n        </ng-template>\n        <cds-tabs [type]="type" [followFocus]="followFocus" [isNavigation]="isNavigation">\n            <cds-tab\n                *ngFor="let item of data; let i = index;"\n                [heading]="customTabs"\n                title="Tab Content"\n                [context]="item">\n                Tab Content {{i + 1}}\n            </cds-tab>\n            <cds-tab [heading]="iconTab" title="Custom tab content">Tab Content Custom</cds-tab>\n        </cds-tabs>\n    '})).bind({});With.storyName="With template",With.args={followFocus:!0,isNavigation:!1,data:[{name:"one"},{name:"two"},{name:"three"}]},With.argTypes={...Basic.argTypes};const BeforeAndAfter=(args=>({props:args,template:'\n        <div style="font-weight: 600; padding-bottom: 10px; padding-top: 20px;">before</div>\n        <cds-tabs [type]="type" [followFocus]="followFocus" [isNavigation]="isNavigation">\n            <cds-tab heading="one">foo</cds-tab>\n            <cds-tab heading="two">bar</cds-tab>\n            <span before>content before</span>\n        </cds-tabs>\n        <div style="font-weight: 600; padding-bottom: 10px; padding-top: 20px;">after</div>\n        <cds-tabs [type]="type" [followFocus]="followFocus" [isNavigation]="isNavigation">\n            <cds-tab heading="one">foo</cds-tab>\n            <cds-tab heading="two">bar</cds-tab>\n            <span after>content after</span>\n        </cds-tabs>\n        <div style="font-weight: 600; padding-bottom: 10px; padding-top: 20px;">both</div>\n        <cds-tabs [type]="type" [followFocus]="followFocus" [isNavigation]="isNavigation">\n            <cds-tab heading="one">foo</cds-tab>\n            <cds-tab heading="two">bar</cds-tab>\n            <span before>content before</span>\n            <span after>content after</span>\n        </cds-tabs>\n    '})).bind({});BeforeAndAfter.storyName="Width before and after content",BeforeAndAfter.args={followFocus:!0,isNavigation:!1},BeforeAndAfter.argTypes={...Basic.argTypes};const Skeleton=(args=>({props:args,template:'\n        <cds-tabs skeleton="true">\n            <cds-tab></cds-tab>\n            <cds-tab></cds-tab>\n        </cds-tabs>\n\n        <div style="margin-top: 5rem">\n            <p>Tab skeleton component for cds-tab-header-group:</p>\n            <cds-tabs-skeleton></cds-tabs-skeleton>\n        </div>\n\n        <div style="margin-top: 5rem">\n            <p>Contained tab skeleton:</p>\n            <cds-tabs-skeleton [contained]="true"></cds-tabs-skeleton>\n        </div>\n    '})).bind({}),ContainedWithSecondaryLabels=(args=>({props:args,template:'\n        <cds-tabs type="contained">\n            <cds-tab heading="Engage" secondaryLabel="(21/25)">Tab Content 1</cds-tab>\n            <cds-tab heading="Analyze" secondaryLabel="(12/16)">Tab Content 2</cds-tab>\n            <cds-tab heading="Remediate" secondaryLabel="(0/7)">Tab Content 3</cds-tab>\n            <cds-tab heading="Assets" secondaryLabel="(4/12)">Tab Content 4</cds-tab>\n            <cds-tab heading="Monitoring" secondaryLabel="(0/10)" [disabled]="true">Tab Content 5</cds-tab>\n        </cds-tabs>\n    '})).bind({});ContainedWithSecondaryLabels.storyName="Contained with secondary labels";const ContainedFullWidth=(args=>({props:args,template:'\n        <cds-tabs type="contained" [fullWidth]="true">\n            <cds-tab heading="TLS">Tab Content 1</cds-tab>\n            <cds-tab heading="Origin">Tab Content 2</cds-tab>\n            <cds-tab heading="Rate limiting" [disabled]="true">Tab Content 3</cds-tab>\n            <cds-tab heading="WAF">Tab Content 4</cds-tab>\n            <cds-tab heading="IP Firewall">Tab Content 5</cds-tab>\n            <cds-tab heading="Firewall rules">Tab Content 6</cds-tab>\n            <cds-tab heading="Range">Tab Content 7</cds-tab>\n            <cds-tab heading="Mutual TLS">Tab Content 8</cds-tab>\n        </cds-tabs>\n    '})).bind({});ContainedFullWidth.storyName="Contained full width",Basic.parameters={...Basic.parameters,docs:{...Basic.parameters?.docs,source:{originalSource:'args => ({\n  props: args,\n  template: `\n        <cds-tabs\n            [type]="type"\n            [followFocus]="followFocus"\n            [isNavigation]="isNavigation"\n            [cacheActive]="cacheActive">\n            <cds-tab heading="one">Tab Content 1</cds-tab>\n            <cds-tab heading="two">Tab Content 2</cds-tab>\n            <cds-tab heading="three" [tabContent]="three"></cds-tab>\n            <cds-tab heading="four" [tabContent]="four"></cds-tab>\n        </cds-tabs>\n\n        \x3c!-- Use templates if you would like to have lifecycle hooks called when cacheActive is false --\x3e\n        <ng-template #three>\n            Tab Content 3\n        </ng-template>\n\n        <ng-template #four>\n            Tab Content 4\n        </ng-template>\n    `\n})',...Basic.parameters?.docs?.source}}},With.parameters={...With.parameters,docs:{...With.parameters?.docs,source:{originalSource:'args => ({\n  props: args,\n  template: `\n        <ng-template #customTabs let-item>\n            {{item ? item.name : "wait for it"}}\n        </ng-template>\n        <ng-template #iconTab>\n            <div style="height: 14px;">\n                Something custom\n                <svg width="16" height="16" viewBox="0 0 16 16"\n                style="height: 14px; width: 14px; fill: #3d70b2;">\n                    <path d="M8 14.5a6.5 6.5 0 1 0 0-13 6.5 6.5 0 0 0 0 13zM8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"></path>\n                    <path d="M9 13H7V7h2z"></path>\n                    <path d="M7 4a1 1 0 1 1 2 0 1 1 0 1 1-2 0"></path>\n                </svg>\n            </div>\n        </ng-template>\n        <cds-tabs [type]="type" [followFocus]="followFocus" [isNavigation]="isNavigation">\n            <cds-tab\n                *ngFor="let item of data; let i = index;"\n                [heading]="customTabs"\n                title="Tab Content"\n                [context]="item">\n                Tab Content {{i + 1}}\n            </cds-tab>\n            <cds-tab [heading]="iconTab" title="Custom tab content">Tab Content Custom</cds-tab>\n        </cds-tabs>\n    `\n})',...With.parameters?.docs?.source}}},BeforeAndAfter.parameters={...BeforeAndAfter.parameters,docs:{...BeforeAndAfter.parameters?.docs,source:{originalSource:'args => ({\n  props: args,\n  template: `\n        <div style="font-weight: 600; padding-bottom: 10px; padding-top: 20px;">before</div>\n        <cds-tabs [type]="type" [followFocus]="followFocus" [isNavigation]="isNavigation">\n            <cds-tab heading="one">foo</cds-tab>\n            <cds-tab heading="two">bar</cds-tab>\n            <span before>content before</span>\n        </cds-tabs>\n        <div style="font-weight: 600; padding-bottom: 10px; padding-top: 20px;">after</div>\n        <cds-tabs [type]="type" [followFocus]="followFocus" [isNavigation]="isNavigation">\n            <cds-tab heading="one">foo</cds-tab>\n            <cds-tab heading="two">bar</cds-tab>\n            <span after>content after</span>\n        </cds-tabs>\n        <div style="font-weight: 600; padding-bottom: 10px; padding-top: 20px;">both</div>\n        <cds-tabs [type]="type" [followFocus]="followFocus" [isNavigation]="isNavigation">\n            <cds-tab heading="one">foo</cds-tab>\n            <cds-tab heading="two">bar</cds-tab>\n            <span before>content before</span>\n            <span after>content after</span>\n        </cds-tabs>\n    `\n})',...BeforeAndAfter.parameters?.docs?.source}}},Skeleton.parameters={...Skeleton.parameters,docs:{...Skeleton.parameters?.docs,source:{originalSource:'args => ({\n  props: args,\n  template: `\n        <cds-tabs skeleton="true">\n            <cds-tab></cds-tab>\n            <cds-tab></cds-tab>\n        </cds-tabs>\n\n        <div style="margin-top: 5rem">\n            <p>Tab skeleton component for cds-tab-header-group:</p>\n            <cds-tabs-skeleton></cds-tabs-skeleton>\n        </div>\n\n        <div style="margin-top: 5rem">\n            <p>Contained tab skeleton:</p>\n            <cds-tabs-skeleton [contained]="true"></cds-tabs-skeleton>\n        </div>\n    `\n})',...Skeleton.parameters?.docs?.source}}},ContainedWithSecondaryLabels.parameters={...ContainedWithSecondaryLabels.parameters,docs:{...ContainedWithSecondaryLabels.parameters?.docs,source:{originalSource:'args => ({\n  props: args,\n  template: `\n        <cds-tabs type="contained">\n            <cds-tab heading="Engage" secondaryLabel="(21/25)">Tab Content 1</cds-tab>\n            <cds-tab heading="Analyze" secondaryLabel="(12/16)">Tab Content 2</cds-tab>\n            <cds-tab heading="Remediate" secondaryLabel="(0/7)">Tab Content 3</cds-tab>\n            <cds-tab heading="Assets" secondaryLabel="(4/12)">Tab Content 4</cds-tab>\n            <cds-tab heading="Monitoring" secondaryLabel="(0/10)" [disabled]="true">Tab Content 5</cds-tab>\n        </cds-tabs>\n    `\n})',...ContainedWithSecondaryLabels.parameters?.docs?.source}}},ContainedFullWidth.parameters={...ContainedFullWidth.parameters,docs:{...ContainedFullWidth.parameters?.docs,source:{originalSource:'args => ({\n  props: args,\n  template: `\n        <cds-tabs type="contained" [fullWidth]="true">\n            <cds-tab heading="TLS">Tab Content 1</cds-tab>\n            <cds-tab heading="Origin">Tab Content 2</cds-tab>\n            <cds-tab heading="Rate limiting" [disabled]="true">Tab Content 3</cds-tab>\n            <cds-tab heading="WAF">Tab Content 4</cds-tab>\n            <cds-tab heading="IP Firewall">Tab Content 5</cds-tab>\n            <cds-tab heading="Firewall rules">Tab Content 6</cds-tab>\n            <cds-tab heading="Range">Tab Content 7</cds-tab>\n            <cds-tab heading="Mutual TLS">Tab Content 8</cds-tab>\n        </cds-tabs>\n    `\n})',...ContainedFullWidth.parameters?.docs?.source}}};const __namedExportsOrder=["Basic","With","BeforeAndAfter","Skeleton","ContainedWithSecondaryLabels","ContainedFullWidth"]}}]);