carbon-components-angular/docs/storybook/tabs-tabs-approaches-regular-stories.7d67d0e1.iframe.bundle.js

Next generation components

"use strict";(self.webpackChunkcarbon_components_angular=self.webpackChunkcarbon_components_angular||[]).push([[8816],{"./src/tabs/tabs-approaches-regular.stories.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{CdsTabsIconOnly:()=>CdsTabsIconOnly,CdsTabsIconTabs:()=>CdsTabsIconTabs,CdsTabsRegular:()=>CdsTabsRegular,CdsTabsTabIcons:()=>CdsTabsTabIcons,CdsTabsVertical:()=>CdsTabsVertical,Dismissable:()=>Dismissable,__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/Regular",decorators:[(0,_storybook_angular__WEBPACK_IMPORTED_MODULE_0__.moduleMetadata)({imports:[_stories__WEBPACK_IMPORTED_MODULE_4__.A,_icon_icon_module__WEBPACK_IMPORTED_MODULE_2__.QX,_grid_grid_module__WEBPACK_IMPORTED_MODULE_1__.z,___WEBPACK_IMPORTED_MODULE_3__.P4]})],parameters:{docs:{description:{component:"Projected `cds-tabs` / `cds-tabs-vertical` with `cds-tab` children (mirrors Tab header stories)."}}}},CdsTabsRegular=(args=>({props:args,template:'\n        <cds-tabs\n            [type]="type"\n            [followFocus]="followFocus"\n            [cacheActive]="cacheActive"\n            [isNavigation]="isNavigation">\n            <cds-tab heading="Dashboard">Tab content 1</cds-tab>\n            <cds-tab heading="Monitoring">Tab content 2</cds-tab>\n            <cds-tab heading="Activity" [disabled]="true">Tab content 3</cds-tab>\n            <cds-tab heading="Analyze">Tab content 4</cds-tab>\n        </cds-tabs>\n    '})).bind({});CdsTabsRegular.storyName="Regular",CdsTabsRegular.args={followFocus:!0,cacheActive:!0,isNavigation:!1,type:"line"},CdsTabsRegular.argTypes={type:{options:["line","contained"],control:"radio"}};const CdsTabsVertical=(args=>({props:args,template:'\n        <cds-tabs-vertical\n            [followFocus]="followFocus"\n            [cacheActive]="cacheActive"\n            [isNavigation]="isNavigation"\n            [height]="height">\n            <cds-tab heading="Dashboard">Tab content 1</cds-tab>\n            <cds-tab heading="Monitoring">Tab content 2</cds-tab>\n            <cds-tab\n                heading="Extra long label that will go two lines then truncate when it goes beyond the tab length">\n                Tab content 3\n            </cds-tab>\n            <cds-tab heading="Activity" [disabled]="true">Tab content 4</cds-tab>\n        </cds-tabs-vertical>\n    '})).bind({});CdsTabsVertical.storyName="Vertical",CdsTabsVertical.args={followFocus:!0,cacheActive:!0,isNavigation:!1,height:"320px"},CdsTabsVertical.argTypes={height:{control:"text"}};const CdsTabsIconTabs=(args=>({props:args,template:'\n        <ng-template #ip1Icon><svg cdsIcon="dashboard" size="16"></svg></ng-template>\n        <ng-template #ip2Icon><svg cdsIcon="cloud--monitoring" size="16"></svg></ng-template>\n        <ng-template #ip3Icon><svg cdsIcon="activity" size="16"></svg></ng-template>\n        <ng-template #ip4Icon><svg cdsIcon="settings" size="16"></svg></ng-template>\n\n        <cds-tabs\n            [type]="type"\n            [followFocus]="followFocus"\n            [cacheActive]="cacheActive"\n            [isNavigation]="isNavigation">\n            <cds-tab heading="Dashboard" title="Dashboard" [icon]="ip1Icon">Tab content 1</cds-tab>\n            <cds-tab heading="Monitoring" title="Monitoring" [icon]="ip2Icon">Tab content 2</cds-tab>\n            <cds-tab heading="Activity" title="Activity" [icon]="ip3Icon" [disabled]="true">Tab content 3</cds-tab>\n            <cds-tab heading="Settings" title="Settings" [icon]="ip4Icon">Tab content 4</cds-tab>\n        </cds-tabs>\n    '})).bind({});CdsTabsIconTabs.storyName="Icon tabs",CdsTabsIconTabs.args={...CdsTabsRegular.args},CdsTabsIconTabs.argTypes={...CdsTabsRegular.argTypes};const CdsTabsIconOnly=(args=>({props:args,template:'\n        <ng-template #ioSave><svg cdsIcon="save" size="16"></svg></ng-template>\n        <ng-template #ioSearch><svg cdsIcon="search" size="16"></svg></ng-template>\n        <ng-template #ioInfo><svg cdsIcon="information--filled" size="16"></svg></ng-template>\n        <ng-template #ioDoc><svg cdsIcon="document" size="16"></svg></ng-template>\n\n        <cds-tabs\n            [type]="type"\n            [iconSize]="iconSize"\n            [followFocus]="followFocus"\n            [cacheActive]="cacheActive"\n            [isNavigation]="isNavigation">\n            <cds-tab\n                [icon]="ioSave"\n                [iconOnly]="true"\n                iconLabel="Save"\n                [disabled]="true">\n                Tab content 1\n            </cds-tab>\n            <cds-tab [icon]="ioSearch" [iconOnly]="true" iconLabel="Search">\n                Tab content 2\n            </cds-tab>\n            <cds-tab\n                [icon]="ioInfo"\n                [iconOnly]="true"\n                iconLabel="Info"\n                [badgeIndicator]="true">\n                Tab content 3\n            </cds-tab>\n            <cds-tab [icon]="ioDoc" [iconOnly]="true" iconLabel="Document">\n                Tab content 4\n            </cds-tab>\n        </cds-tabs>\n    '})).bind({});CdsTabsIconOnly.storyName="Icon only",CdsTabsIconOnly.args={...CdsTabsRegular.args,iconSize:"default"},CdsTabsIconOnly.argTypes={...CdsTabsRegular.argTypes,iconSize:{options:["default","lg"],control:"radio"}};const CdsTabsTabIcons=(args=>({props:args,template:'\n        <ng-template #dashIcon><svg cdsIcon="dashboard" size="16"></svg></ng-template>\n        <ng-template #monIcon><svg cdsIcon="cloud--monitoring" size="16"></svg></ng-template>\n        <ng-template #actIcon><svg cdsIcon="activity" size="16"></svg></ng-template>\n        <ng-template #settingsIcon><svg cdsIcon="settings" size="16"></svg></ng-template>\n\n        <cds-tabs\n            type="contained"\n            [followFocus]="followFocus"\n            [cacheActive]="cacheActive"\n            [dismissable]="dismissable"\n            [isNavigation]="isNavigation">\n            <cds-tab heading="Dashboard" title="Dashboard" [icon]="dashIcon" secondaryLabel="(21/25)">\n                Tab content 1\n            </cds-tab>\n            <cds-tab heading="Monitoring" title="Monitoring" [icon]="monIcon" secondaryLabel="(12/16)">\n                Tab content 2\n            </cds-tab>\n            <cds-tab\n                heading="Activity"\n                title="Activity"\n                [icon]="actIcon"\n                secondaryLabel="(0/7)"\n                [disabled]="true">\n                Tab content 3\n            </cds-tab>\n            <cds-tab heading="Settings" title="Settings" [icon]="settingsIcon" secondaryLabel="(4/12)">\n                Tab content 4\n            </cds-tab>\n        </cds-tabs>\n    '})).bind({});CdsTabsTabIcons.storyName="Tab header + icons",CdsTabsTabIcons.args={followFocus:!0,cacheActive:!0,isNavigation:!1,dismissable:!1};const Dismissable=(args=>({props:{...args,renderedTabs:[{heading:"Dashboard",content:"Tab Content 1"},{heading:"Monitoring",content:"Tab Content 2"},{heading:"Activity",content:"Tab Content 3"},{heading:"Settings",content:"Tab Content 4",disabled:!0}],onTabClose(tabIndex){this.renderedTabs=this.renderedTabs.filter(((_,i)=>i!==tabIndex))}},template:'\n        <cds-tabs\n            [type]="type"\n            [dismissable]="true"\n            (tabClose)="onTabClose($event)">\n            <cds-tab\n                *ngFor="let tab of renderedTabs"\n                [heading]="tab.heading"\n                [disabled]="tab.disabled">\n                {{ tab.content }}\n            </cds-tab>\n        </cds-tabs>\n    '})).bind({});Dismissable.storyName="Dismissable",Dismissable.args={type:"line"},Dismissable.argTypes={type:{options:["line","contained"],control:"radio"}},CdsTabsRegular.parameters={...CdsTabsRegular.parameters,docs:{...CdsTabsRegular.parameters?.docs,source:{originalSource:'args => ({\n  props: args,\n  template: `\n        <cds-tabs\n            [type]="type"\n            [followFocus]="followFocus"\n            [cacheActive]="cacheActive"\n            [isNavigation]="isNavigation">\n            <cds-tab heading="Dashboard">Tab content 1</cds-tab>\n            <cds-tab heading="Monitoring">Tab content 2</cds-tab>\n            <cds-tab heading="Activity" [disabled]="true">Tab content 3</cds-tab>\n            <cds-tab heading="Analyze">Tab content 4</cds-tab>\n        </cds-tabs>\n    `\n})',...CdsTabsRegular.parameters?.docs?.source}}},CdsTabsVertical.parameters={...CdsTabsVertical.parameters,docs:{...CdsTabsVertical.parameters?.docs,source:{originalSource:'args => ({\n  props: args,\n  template: `\n        <cds-tabs-vertical\n            [followFocus]="followFocus"\n            [cacheActive]="cacheActive"\n            [isNavigation]="isNavigation"\n            [height]="height">\n            <cds-tab heading="Dashboard">Tab content 1</cds-tab>\n            <cds-tab heading="Monitoring">Tab content 2</cds-tab>\n            <cds-tab\n                heading="Extra long label that will go two lines then truncate when it goes beyond the tab length">\n                Tab content 3\n            </cds-tab>\n            <cds-tab heading="Activity" [disabled]="true">Tab content 4</cds-tab>\n        </cds-tabs-vertical>\n    `\n})',...CdsTabsVertical.parameters?.docs?.source}}},CdsTabsIconTabs.parameters={...CdsTabsIconTabs.parameters,docs:{...CdsTabsIconTabs.parameters?.docs,source:{originalSource:'args => ({\n  props: args,\n  template: `\n        <ng-template #ip1Icon><svg cdsIcon="dashboard" size="16"></svg></ng-template>\n        <ng-template #ip2Icon><svg cdsIcon="cloud--monitoring" size="16"></svg></ng-template>\n        <ng-template #ip3Icon><svg cdsIcon="activity" size="16"></svg></ng-template>\n        <ng-template #ip4Icon><svg cdsIcon="settings" size="16"></svg></ng-template>\n\n        <cds-tabs\n            [type]="type"\n            [followFocus]="followFocus"\n            [cacheActive]="cacheActive"\n            [isNavigation]="isNavigation">\n            <cds-tab heading="Dashboard" title="Dashboard" [icon]="ip1Icon">Tab content 1</cds-tab>\n            <cds-tab heading="Monitoring" title="Monitoring" [icon]="ip2Icon">Tab content 2</cds-tab>\n            <cds-tab heading="Activity" title="Activity" [icon]="ip3Icon" [disabled]="true">Tab content 3</cds-tab>\n            <cds-tab heading="Settings" title="Settings" [icon]="ip4Icon">Tab content 4</cds-tab>\n        </cds-tabs>\n    `\n})',...CdsTabsIconTabs.parameters?.docs?.source}}},CdsTabsIconOnly.parameters={...CdsTabsIconOnly.parameters,docs:{...CdsTabsIconOnly.parameters?.docs,source:{originalSource:'args => ({\n  props: args,\n  template: `\n        <ng-template #ioSave><svg cdsIcon="save" size="16"></svg></ng-template>\n        <ng-template #ioSearch><svg cdsIcon="search" size="16"></svg></ng-template>\n        <ng-template #ioInfo><svg cdsIcon="information--filled" size="16"></svg></ng-template>\n        <ng-template #ioDoc><svg cdsIcon="document" size="16"></svg></ng-template>\n\n        <cds-tabs\n            [type]="type"\n            [iconSize]="iconSize"\n            [followFocus]="followFocus"\n            [cacheActive]="cacheActive"\n            [isNavigation]="isNavigation">\n            <cds-tab\n                [icon]="ioSave"\n                [iconOnly]="true"\n                iconLabel="Save"\n                [disabled]="true">\n                Tab content 1\n            </cds-tab>\n            <cds-tab [icon]="ioSearch" [iconOnly]="true" iconLabel="Search">\n                Tab content 2\n            </cds-tab>\n            <cds-tab\n                [icon]="ioInfo"\n                [iconOnly]="true"\n                iconLabel="Info"\n                [badgeIndicator]="true">\n                Tab content 3\n            </cds-tab>\n            <cds-tab [icon]="ioDoc" [iconOnly]="true" iconLabel="Document">\n                Tab content 4\n            </cds-tab>\n        </cds-tabs>\n    `\n})',...CdsTabsIconOnly.parameters?.docs?.source}}},CdsTabsTabIcons.parameters={...CdsTabsTabIcons.parameters,docs:{...CdsTabsTabIcons.parameters?.docs,source:{originalSource:'args => ({\n  props: args,\n  template: `\n        <ng-template #dashIcon><svg cdsIcon="dashboard" size="16"></svg></ng-template>\n        <ng-template #monIcon><svg cdsIcon="cloud--monitoring" size="16"></svg></ng-template>\n        <ng-template #actIcon><svg cdsIcon="activity" size="16"></svg></ng-template>\n        <ng-template #settingsIcon><svg cdsIcon="settings" size="16"></svg></ng-template>\n\n        <cds-tabs\n            type="contained"\n            [followFocus]="followFocus"\n            [cacheActive]="cacheActive"\n            [dismissable]="dismissable"\n            [isNavigation]="isNavigation">\n            <cds-tab heading="Dashboard" title="Dashboard" [icon]="dashIcon" secondaryLabel="(21/25)">\n                Tab content 1\n            </cds-tab>\n            <cds-tab heading="Monitoring" title="Monitoring" [icon]="monIcon" secondaryLabel="(12/16)">\n                Tab content 2\n            </cds-tab>\n            <cds-tab\n                heading="Activity"\n                title="Activity"\n                [icon]="actIcon"\n                secondaryLabel="(0/7)"\n                [disabled]="true">\n                Tab content 3\n            </cds-tab>\n            <cds-tab heading="Settings" title="Settings" [icon]="settingsIcon" secondaryLabel="(4/12)">\n                Tab content 4\n            </cds-tab>\n        </cds-tabs>\n    `\n})',...CdsTabsTabIcons.parameters?.docs?.source}}},Dismissable.parameters={...Dismissable.parameters,docs:{...Dismissable.parameters?.docs,source:{originalSource:'args => ({\n  props: {\n    ...args,\n    renderedTabs: [{\n      heading: "Dashboard",\n      content: "Tab Content 1"\n    }, {\n      heading: "Monitoring",\n      content: "Tab Content 2"\n    }, {\n      heading: "Activity",\n      content: "Tab Content 3"\n    }, {\n      heading: "Settings",\n      content: "Tab Content 4",\n      disabled: true\n    }],\n    onTabClose(this: any, tabIndex: number) {\n      this.renderedTabs = this.renderedTabs.filter((_: unknown, i: number) => i !== tabIndex);\n    }\n  },\n  template: `\n        <cds-tabs\n            [type]="type"\n            [dismissable]="true"\n            (tabClose)="onTabClose($event)">\n            <cds-tab\n                *ngFor="let tab of renderedTabs"\n                [heading]="tab.heading"\n                [disabled]="tab.disabled">\n                {{ tab.content }}\n            </cds-tab>\n        </cds-tabs>\n    `\n})',...Dismissable.parameters?.docs?.source}}};const __namedExportsOrder=["CdsTabsRegular","CdsTabsVertical","CdsTabsIconTabs","CdsTabsIconOnly","CdsTabsTabIcons","Dismissable"]}}]);