carbon-components-angular/docs/storybook/tabs-tabs-approaches-header-group-stories.3eeb0edd.iframe.bundle.js

Next generation components

"use strict";(self.webpackChunkcarbon_components_angular=self.webpackChunkcarbon_components_angular||[]).push([[3987],{"./src/tabs/tabs-approaches-header-group.stories.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Dismissable:()=>Dismissable,HeaderGroupIconOnly:()=>HeaderGroupIconOnly,HeaderGroupIconTabs:()=>HeaderGroupIconTabs,HeaderGroupRegular:()=>HeaderGroupRegular,HeaderGroupTabHeaderIcons:()=>HeaderGroupTabHeaderIcons,HeaderGroupVertical:()=>HeaderGroupVertical,HeaderGroupVerticalTabHeaderIcons:()=>HeaderGroupVerticalTabHeaderIcons,__namedExportsOrder:()=>__namedExportsOrder,default:()=>__WEBPACK_DEFAULT_EXPORT__});var tslib__WEBPACK_IMPORTED_MODULE_7__=__webpack_require__("./node_modules/tslib/tslib.es6.js"),_angular_core__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs"),_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"),_tab_component__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./src/tabs/tab.component.ts"),_stories__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("./src/tabs/stories/index.ts");let StoryDismissableTabHeaderGroupComponent=class StoryDismissableTabHeaderGroupComponent{constructor(cdr){this.cdr=cdr,this.panesReady=!1,this.type="line",this.followFocus=!0,this.cacheActive=!0,this.isNavigation=!1,this.fullWidth=!1,this.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}]}ngAfterViewInit(){this.paneQueryChangesSub=this.paneQuery.changes.subscribe((()=>this.scheduleRefreshPanesReady())),this.scheduleRefreshPanesReady()}ngOnDestroy(){this.paneQueryChangesSub?.unsubscribe()}paneAt(index){return this.paneQuery.get(index)}onTabClose(tabIndex){this.renderedTabs=this.renderedTabs.filter(((_,i)=>i!==tabIndex)),this.scheduleRefreshPanesReady()}scheduleRefreshPanesReady(){queueMicrotask((()=>{const ready=!!this.paneQuery&&this.paneQuery.length===this.renderedTabs.length&&this.renderedTabs.length>0;ready!==this.panesReady&&(this.panesReady=ready,this.cdr.detectChanges())}))}};StoryDismissableTabHeaderGroupComponent.ctorParameters=()=>[{type:_angular_core__WEBPACK_IMPORTED_MODULE_6__.ChangeDetectorRef}],StoryDismissableTabHeaderGroupComponent.propDecorators={type:[{type:_angular_core__WEBPACK_IMPORTED_MODULE_6__.Input}],followFocus:[{type:_angular_core__WEBPACK_IMPORTED_MODULE_6__.Input}],cacheActive:[{type:_angular_core__WEBPACK_IMPORTED_MODULE_6__.Input}],isNavigation:[{type:_angular_core__WEBPACK_IMPORTED_MODULE_6__.Input}],fullWidth:[{type:_angular_core__WEBPACK_IMPORTED_MODULE_6__.Input}],paneQuery:[{type:_angular_core__WEBPACK_IMPORTED_MODULE_6__.ViewChildren,args:[_tab_component__WEBPACK_IMPORTED_MODULE_4__.O]}]},StoryDismissableTabHeaderGroupComponent=(0,tslib__WEBPACK_IMPORTED_MODULE_7__.gn)([(0,_angular_core__WEBPACK_IMPORTED_MODULE_6__.Component)({selector:"story-dismissable-tab-header-group",template:'\n        <cds-tab-header-group\n            *ngIf="panesReady"\n            style="order: 0"\n            [type]="type"\n            [followFocus]="followFocus"\n            [cacheActive]="cacheActive"\n            [isNavigation]="isNavigation"\n            [fullWidth]="fullWidth"\n            [dismissable]="true"\n            (tabClose)="onTabClose($event)">\n            <cds-tab-header\n                *ngFor="let tab of renderedTabs; let i = index"\n                [paneReference]="paneAt(i)"\n                [disabled]="tab.disabled">\n                {{ tab.heading }}\n            </cds-tab-header>\n        </cds-tab-header-group>\n        <cds-tab *ngFor="let tab of renderedTabs">{{ tab.content }}</cds-tab>\n    '})],StoryDismissableTabHeaderGroupComponent);const __WEBPACK_DEFAULT_EXPORT__={title:"Components/Tabs/Tab header (Fine-grained)",decorators:[(0,_storybook_angular__WEBPACK_IMPORTED_MODULE_0__.moduleMetadata)({imports:[_stories__WEBPACK_IMPORTED_MODULE_5__.A,_icon_icon_module__WEBPACK_IMPORTED_MODULE_2__.QX,_grid_grid_module__WEBPACK_IMPORTED_MODULE_1__.z,___WEBPACK_IMPORTED_MODULE_3__.P4],declarations:[StoryDismissableTabHeaderGroupComponent]})],parameters:{docs:{description:{component:"Fine-grained composition: `cds-tab-header-group` / `cds-tab-header-group-vertical`\nwith `[paneReference]` and sibling `cds-tab` panes."}}}},HeaderGroupRegular=(args=>({props:args,template:'\n        <cds-tab-header-group\n            [type]="type"\n            [followFocus]="followFocus"\n            [cacheActive]="cacheActive"\n            [isNavigation]="isNavigation"\n            [fullWidth]="fullWidth">\n            <cds-tab-header [paneReference]="pane1">Dashboard</cds-tab-header>\n            <cds-tab-header [paneReference]="pane2">Monitoring</cds-tab-header>\n            <cds-tab-header [paneReference]="pane3" [disabled]="true">Activity</cds-tab-header>\n            <cds-tab-header [paneReference]="pane4">Analyze</cds-tab-header>\n        </cds-tab-header-group>\n\n        <cds-tab #pane1>Tab content 1</cds-tab>\n        <cds-tab #pane2>Tab content 2</cds-tab>\n        <cds-tab #pane3>Tab content 3</cds-tab>\n        <cds-tab #pane4>Tab content 4</cds-tab>\n    '})).bind({});HeaderGroupRegular.storyName="Regular",HeaderGroupRegular.args={followFocus:!0,cacheActive:!0,isNavigation:!1,type:"line",fullWidth:!1},HeaderGroupRegular.argTypes={type:{options:["line","contained"],control:"radio"}};const HeaderGroupVertical=(args=>({props:args,template:'\n        <cds-tabs-vertical-grouped [height]="height">\n            <cds-tab-header-group-vertical\n                [followFocus]="followFocus"\n                [cacheActive]="cacheActive"\n                [isNavigation]="isNavigation">\n                <cds-tab-header [paneReference]="vp1">Dashboard</cds-tab-header>\n                <cds-tab-header [paneReference]="vp2">Monitoring</cds-tab-header>\n                <cds-tab-header [paneReference]="vp3" [disabled]="true">Activity</cds-tab-header>\n                <cds-tab-header [paneReference]="vp4">Analyze</cds-tab-header>\n            </cds-tab-header-group-vertical>\n\n            <cds-tab #vp1>Tab content 1</cds-tab>\n            <cds-tab #vp2>Tab content 2</cds-tab>\n            <cds-tab #vp3>Tab content 3</cds-tab>\n            <cds-tab #vp4>Tab content 4</cds-tab>\n        </cds-tabs-vertical-grouped>\n    '})).bind({});HeaderGroupVertical.storyName="Vertical",HeaderGroupVertical.args={followFocus:!0,cacheActive:!0,isNavigation:!1,height:"320px"},HeaderGroupVertical.argTypes={height:{control:"text"}};const HeaderGroupIconTabs=(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-tab-header-group\n            [type]="type"\n            [followFocus]="followFocus"\n            [cacheActive]="cacheActive"\n            [isNavigation]="isNavigation">\n            <cds-tab-header [paneReference]="ip1" [icon]="ip1Icon" title="Dashboard">Dashboard</cds-tab-header>\n            <cds-tab-header [paneReference]="ip2" [icon]="ip2Icon" title="Monitoring">Monitoring</cds-tab-header>\n            <cds-tab-header [paneReference]="ip3" [icon]="ip3Icon" title="Activity" [disabled]="true">Activity</cds-tab-header>\n            <cds-tab-header [paneReference]="ip4" [icon]="ip4Icon" title="Settings">Settings</cds-tab-header>\n        </cds-tab-header-group>\n\n        <cds-tab #ip1>Tab content 1</cds-tab>\n        <cds-tab #ip2>Tab content 2</cds-tab>\n        <cds-tab #ip3>Tab content 3</cds-tab>\n        <cds-tab #ip4>Tab content 4</cds-tab>\n    '})).bind({});HeaderGroupIconTabs.storyName="Icon tabs",HeaderGroupIconTabs.args={...HeaderGroupRegular.args},HeaderGroupIconTabs.argTypes={...HeaderGroupRegular.argTypes};const HeaderGroupIconOnly=(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-tab-header-group\n            [type]="type"\n            [iconSize]="iconSize"\n            [followFocus]="followFocus"\n            [cacheActive]="cacheActive"\n            [isNavigation]="isNavigation">\n            <cds-tab-header\n                [paneReference]="io1"\n                [icon]="ioSave"\n                [iconOnly]="true"\n                [iconSize]="iconSize"\n                iconLabel="Save"\n                [disabled]="true">\n            </cds-tab-header>\n            <cds-tab-header\n                [paneReference]="io2"\n                [icon]="ioSearch"\n                [iconOnly]="true"\n                [iconSize]="iconSize"\n                iconLabel="Search">\n            </cds-tab-header>\n            <cds-tab-header\n                [paneReference]="io3"\n                [icon]="ioInfo"\n                [iconOnly]="true"\n                [iconSize]="iconSize"\n                iconLabel="Info"\n                [badgeIndicator]="true">\n            </cds-tab-header>\n            <cds-tab-header\n                [paneReference]="io4"\n                [icon]="ioDoc"\n                [iconOnly]="true"\n                [iconSize]="iconSize"\n                iconLabel="Document">\n            </cds-tab-header>\n        </cds-tab-header-group>\n\n        <cds-tab #io1>Tab content 1</cds-tab>\n        <cds-tab #io2>Tab content 2</cds-tab>\n        <cds-tab #io3>Tab content 3</cds-tab>\n        <cds-tab #io4>Tab content 4</cds-tab>\n    '})).bind({});HeaderGroupIconOnly.storyName="Icon only",HeaderGroupIconOnly.args={...HeaderGroupRegular.args,iconSize:"default"},HeaderGroupIconOnly.argTypes={...HeaderGroupRegular.argTypes,iconSize:{options:["default","lg"],control:"radio"}};const HeaderGroupTabHeaderIcons=(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-tab-header-group\n            type="contained"\n            [followFocus]="followFocus"\n            [cacheActive]="cacheActive"\n            [dismissable]="dismissable"\n            [isNavigation]="isNavigation">\n            <cds-tab-header\n                [paneReference]="ch1"\n                [icon]="dashIcon"\n                secondaryLabel="(21/25)">\n                Dashboard\n            </cds-tab-header>\n            <cds-tab-header\n                [paneReference]="ch2"\n                [icon]="monIcon"\n                secondaryLabel="(12/16)">\n                Monitoring\n            </cds-tab-header>\n            <cds-tab-header\n                [paneReference]="ch3"\n                [icon]="actIcon"\n                secondaryLabel="(0/7)"\n                [disabled]="true">\n                Activity\n            </cds-tab-header>\n            <cds-tab-header\n                [paneReference]="ch4"\n                [icon]="settingsIcon"\n                secondaryLabel="(4/12)">\n                Settings\n            </cds-tab-header>\n        </cds-tab-header-group>\n\n        <cds-tab #ch1>Tab content 1</cds-tab>\n        <cds-tab #ch2>Tab content 2</cds-tab>\n        <cds-tab #ch3>Tab content 3</cds-tab>\n        <cds-tab #ch4>Tab content 4</cds-tab>\n    '})).bind({});HeaderGroupTabHeaderIcons.storyName="Tab header + icons",HeaderGroupTabHeaderIcons.args={followFocus:!0,cacheActive:!0,isNavigation:!1,dismissable:!1};const HeaderGroupVerticalTabHeaderIcons=(args=>({props:args,template:'\n        <ng-template #vDashIcon><svg cdsIcon="dashboard" size="16"></svg></ng-template>\n        <ng-template #vMonIcon><svg cdsIcon="cloud--monitoring" size="16"></svg></ng-template>\n        <ng-template #vActIcon><svg cdsIcon="activity" size="16"></svg></ng-template>\n        <ng-template #vSettingsIcon><svg cdsIcon="settings" size="16"></svg></ng-template>\n\n        <cds-tabs-vertical-grouped [height]="height">\n            <cds-tab-header-group-vertical\n                [followFocus]="followFocus"\n                [cacheActive]="cacheActive"\n                [isNavigation]="isNavigation">\n                <cds-tab-header\n                    [paneReference]="cv1"\n                    [icon]="vDashIcon"\n                    secondaryLabel="(21/25)">\n                    Dashboard\n                </cds-tab-header>\n                <cds-tab-header\n                    [paneReference]="cv2"\n                    [icon]="vMonIcon"\n                    secondaryLabel="(12/16)">\n                    Monitoring\n                </cds-tab-header>\n                <cds-tab-header\n                    [paneReference]="cv3"\n                    [icon]="vActIcon"\n                    secondaryLabel="(0/7)"\n                    [disabled]="true">\n                    Activity\n                </cds-tab-header>\n                <cds-tab-header\n                    [paneReference]="cv4"\n                    [icon]="vSettingsIcon"\n                    secondaryLabel="(4/12)">\n                    Settings\n                </cds-tab-header>\n            </cds-tab-header-group-vertical>\n\n            <cds-tab #cv1>Tab content 1</cds-tab>\n            <cds-tab #cv2>Tab content 2</cds-tab>\n            <cds-tab #cv3>Tab content 3</cds-tab>\n            <cds-tab #cv4>Tab content 4</cds-tab>\n        </cds-tabs-vertical-grouped>\n    '})).bind({});HeaderGroupVerticalTabHeaderIcons.storyName="Vertical + tab-header + icons",HeaderGroupVerticalTabHeaderIcons.args={followFocus:!0,cacheActive:!0,isNavigation:!1,height:"320px"},HeaderGroupVerticalTabHeaderIcons.argTypes={height:{control:"text"}};const Dismissable=(args=>({props:args,template:'\n        <story-dismissable-tab-header-group\n            [type]="type"\n            [followFocus]="followFocus"\n            [cacheActive]="cacheActive"\n            [isNavigation]="isNavigation"\n            [fullWidth]="fullWidth">\n        </story-dismissable-tab-header-group>\n    '})).bind({});Dismissable.storyName="Dismissable",Dismissable.args={followFocus:!0,cacheActive:!0,isNavigation:!1,type:"line",fullWidth:!1},Dismissable.argTypes={type:{options:["line","contained"],control:"radio"}},HeaderGroupRegular.parameters={...HeaderGroupRegular.parameters,docs:{...HeaderGroupRegular.parameters?.docs,source:{originalSource:'args => ({\n  props: args,\n  template: `\n        <cds-tab-header-group\n            [type]="type"\n            [followFocus]="followFocus"\n            [cacheActive]="cacheActive"\n            [isNavigation]="isNavigation"\n            [fullWidth]="fullWidth">\n            <cds-tab-header [paneReference]="pane1">Dashboard</cds-tab-header>\n            <cds-tab-header [paneReference]="pane2">Monitoring</cds-tab-header>\n            <cds-tab-header [paneReference]="pane3" [disabled]="true">Activity</cds-tab-header>\n            <cds-tab-header [paneReference]="pane4">Analyze</cds-tab-header>\n        </cds-tab-header-group>\n\n        <cds-tab #pane1>Tab content 1</cds-tab>\n        <cds-tab #pane2>Tab content 2</cds-tab>\n        <cds-tab #pane3>Tab content 3</cds-tab>\n        <cds-tab #pane4>Tab content 4</cds-tab>\n    `\n})',...HeaderGroupRegular.parameters?.docs?.source}}},HeaderGroupVertical.parameters={...HeaderGroupVertical.parameters,docs:{...HeaderGroupVertical.parameters?.docs,source:{originalSource:'args => ({\n  props: args,\n  template: `\n        <cds-tabs-vertical-grouped [height]="height">\n            <cds-tab-header-group-vertical\n                [followFocus]="followFocus"\n                [cacheActive]="cacheActive"\n                [isNavigation]="isNavigation">\n                <cds-tab-header [paneReference]="vp1">Dashboard</cds-tab-header>\n                <cds-tab-header [paneReference]="vp2">Monitoring</cds-tab-header>\n                <cds-tab-header [paneReference]="vp3" [disabled]="true">Activity</cds-tab-header>\n                <cds-tab-header [paneReference]="vp4">Analyze</cds-tab-header>\n            </cds-tab-header-group-vertical>\n\n            <cds-tab #vp1>Tab content 1</cds-tab>\n            <cds-tab #vp2>Tab content 2</cds-tab>\n            <cds-tab #vp3>Tab content 3</cds-tab>\n            <cds-tab #vp4>Tab content 4</cds-tab>\n        </cds-tabs-vertical-grouped>\n    `\n})',...HeaderGroupVertical.parameters?.docs?.source}}},HeaderGroupIconTabs.parameters={...HeaderGroupIconTabs.parameters,docs:{...HeaderGroupIconTabs.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-tab-header-group\n            [type]="type"\n            [followFocus]="followFocus"\n            [cacheActive]="cacheActive"\n            [isNavigation]="isNavigation">\n            <cds-tab-header [paneReference]="ip1" [icon]="ip1Icon" title="Dashboard">Dashboard</cds-tab-header>\n            <cds-tab-header [paneReference]="ip2" [icon]="ip2Icon" title="Monitoring">Monitoring</cds-tab-header>\n            <cds-tab-header [paneReference]="ip3" [icon]="ip3Icon" title="Activity" [disabled]="true">Activity</cds-tab-header>\n            <cds-tab-header [paneReference]="ip4" [icon]="ip4Icon" title="Settings">Settings</cds-tab-header>\n        </cds-tab-header-group>\n\n        <cds-tab #ip1>Tab content 1</cds-tab>\n        <cds-tab #ip2>Tab content 2</cds-tab>\n        <cds-tab #ip3>Tab content 3</cds-tab>\n        <cds-tab #ip4>Tab content 4</cds-tab>\n    `\n})',...HeaderGroupIconTabs.parameters?.docs?.source}}},HeaderGroupIconOnly.parameters={...HeaderGroupIconOnly.parameters,docs:{...HeaderGroupIconOnly.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-tab-header-group\n            [type]="type"\n            [iconSize]="iconSize"\n            [followFocus]="followFocus"\n            [cacheActive]="cacheActive"\n            [isNavigation]="isNavigation">\n            <cds-tab-header\n                [paneReference]="io1"\n                [icon]="ioSave"\n                [iconOnly]="true"\n                [iconSize]="iconSize"\n                iconLabel="Save"\n                [disabled]="true">\n            </cds-tab-header>\n            <cds-tab-header\n                [paneReference]="io2"\n                [icon]="ioSearch"\n                [iconOnly]="true"\n                [iconSize]="iconSize"\n                iconLabel="Search">\n            </cds-tab-header>\n            <cds-tab-header\n                [paneReference]="io3"\n                [icon]="ioInfo"\n                [iconOnly]="true"\n                [iconSize]="iconSize"\n                iconLabel="Info"\n                [badgeIndicator]="true">\n            </cds-tab-header>\n            <cds-tab-header\n                [paneReference]="io4"\n                [icon]="ioDoc"\n                [iconOnly]="true"\n                [iconSize]="iconSize"\n                iconLabel="Document">\n            </cds-tab-header>\n        </cds-tab-header-group>\n\n        <cds-tab #io1>Tab content 1</cds-tab>\n        <cds-tab #io2>Tab content 2</cds-tab>\n        <cds-tab #io3>Tab content 3</cds-tab>\n        <cds-tab #io4>Tab content 4</cds-tab>\n    `\n})',...HeaderGroupIconOnly.parameters?.docs?.source}}},HeaderGroupTabHeaderIcons.parameters={...HeaderGroupTabHeaderIcons.parameters,docs:{...HeaderGroupTabHeaderIcons.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-tab-header-group\n            type="contained"\n            [followFocus]="followFocus"\n            [cacheActive]="cacheActive"\n            [dismissable]="dismissable"\n            [isNavigation]="isNavigation">\n            <cds-tab-header\n                [paneReference]="ch1"\n                [icon]="dashIcon"\n                secondaryLabel="(21/25)">\n                Dashboard\n            </cds-tab-header>\n            <cds-tab-header\n                [paneReference]="ch2"\n                [icon]="monIcon"\n                secondaryLabel="(12/16)">\n                Monitoring\n            </cds-tab-header>\n            <cds-tab-header\n                [paneReference]="ch3"\n                [icon]="actIcon"\n                secondaryLabel="(0/7)"\n                [disabled]="true">\n                Activity\n            </cds-tab-header>\n            <cds-tab-header\n                [paneReference]="ch4"\n                [icon]="settingsIcon"\n                secondaryLabel="(4/12)">\n                Settings\n            </cds-tab-header>\n        </cds-tab-header-group>\n\n        <cds-tab #ch1>Tab content 1</cds-tab>\n        <cds-tab #ch2>Tab content 2</cds-tab>\n        <cds-tab #ch3>Tab content 3</cds-tab>\n        <cds-tab #ch4>Tab content 4</cds-tab>\n    `\n})',...HeaderGroupTabHeaderIcons.parameters?.docs?.source}}},HeaderGroupVerticalTabHeaderIcons.parameters={...HeaderGroupVerticalTabHeaderIcons.parameters,docs:{...HeaderGroupVerticalTabHeaderIcons.parameters?.docs,source:{originalSource:'args => ({\n  props: args,\n  template: `\n        <ng-template #vDashIcon><svg cdsIcon="dashboard" size="16"></svg></ng-template>\n        <ng-template #vMonIcon><svg cdsIcon="cloud--monitoring" size="16"></svg></ng-template>\n        <ng-template #vActIcon><svg cdsIcon="activity" size="16"></svg></ng-template>\n        <ng-template #vSettingsIcon><svg cdsIcon="settings" size="16"></svg></ng-template>\n\n        <cds-tabs-vertical-grouped [height]="height">\n            <cds-tab-header-group-vertical\n                [followFocus]="followFocus"\n                [cacheActive]="cacheActive"\n                [isNavigation]="isNavigation">\n                <cds-tab-header\n                    [paneReference]="cv1"\n                    [icon]="vDashIcon"\n                    secondaryLabel="(21/25)">\n                    Dashboard\n                </cds-tab-header>\n                <cds-tab-header\n                    [paneReference]="cv2"\n                    [icon]="vMonIcon"\n                    secondaryLabel="(12/16)">\n                    Monitoring\n                </cds-tab-header>\n                <cds-tab-header\n                    [paneReference]="cv3"\n                    [icon]="vActIcon"\n                    secondaryLabel="(0/7)"\n                    [disabled]="true">\n                    Activity\n                </cds-tab-header>\n                <cds-tab-header\n                    [paneReference]="cv4"\n                    [icon]="vSettingsIcon"\n                    secondaryLabel="(4/12)">\n                    Settings\n                </cds-tab-header>\n            </cds-tab-header-group-vertical>\n\n            <cds-tab #cv1>Tab content 1</cds-tab>\n            <cds-tab #cv2>Tab content 2</cds-tab>\n            <cds-tab #cv3>Tab content 3</cds-tab>\n            <cds-tab #cv4>Tab content 4</cds-tab>\n        </cds-tabs-vertical-grouped>\n    `\n})',...HeaderGroupVerticalTabHeaderIcons.parameters?.docs?.source}}},Dismissable.parameters={...Dismissable.parameters,docs:{...Dismissable.parameters?.docs,source:{originalSource:'args => ({\n  props: args,\n  template: `\n        <story-dismissable-tab-header-group\n            [type]="type"\n            [followFocus]="followFocus"\n            [cacheActive]="cacheActive"\n            [isNavigation]="isNavigation"\n            [fullWidth]="fullWidth">\n        </story-dismissable-tab-header-group>\n    `\n})',...Dismissable.parameters?.docs?.source}}};const __namedExportsOrder=["HeaderGroupRegular","HeaderGroupVertical","HeaderGroupIconTabs","HeaderGroupIconOnly","HeaderGroupTabHeaderIcons","HeaderGroupVerticalTabHeaderIcons","Dismissable"]}}]);