carbon-components-angular/docs/storybook/context-menu-context-menu-stories.eb5edb41.iframe.bundle.js

Next generation components

"use strict";(self.webpackChunkcarbon_components_angular=self.webpackChunkcarbon_components_angular||[]).push([[2722],{"./src/context-menu/context-menu.stories.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Basic:()=>Basic,__namedExportsOrder:()=>__namedExportsOrder,default:()=>__WEBPACK_DEFAULT_EXPORT__});var _storybook_angular__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/@storybook/angular/dist/index.mjs"),___WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./src/context-menu/index.ts");const __WEBPACK_DEFAULT_EXPORT__={title:"Components/Context Menu",decorators:[(0,_storybook_angular__WEBPACK_IMPORTED_MODULE_0__.moduleMetadata)({imports:[___WEBPACK_IMPORTED_MODULE_1__.vI]})],args:{position:{top:0,left:0},open:!0,checkboxGroupValue:["a","b"],radioGroupValue:"one"},argTypes:{onRadioChange:{action:"Radio menu change!"},onCheckboxChange:{action:"Radio menu change!"}},component:___WEBPACK_IMPORTED_MODULE_1__.GI,subcomponents:{ContextMenuDividerComponent:___WEBPACK_IMPORTED_MODULE_1__.uh,ContextMenuItemComponent:___WEBPACK_IMPORTED_MODULE_1__.qX,ContextMenuGroupComponent:___WEBPACK_IMPORTED_MODULE_1__.Zp},parameters:{docs:{story:{height:"25rem"}}}},Basic=(args=>({props:args,template:'\n        <cds-context-menu [open]="open" [position]="position">\n            <cds-context-menu-item label="Cut" info="⌘X"></cds-context-menu-item>\n            <cds-context-menu-item label="Option with icon" icon="calendar"></cds-context-menu-item>\n            <cds-context-menu-divider></cds-context-menu-divider>\n            <cds-context-menu-item type="checkbox" label="Enable magic"></cds-context-menu-item>\n            <cds-context-menu-divider></cds-context-menu-divider>\n            <cds-context-menu-group label="Selection group">\n                <cds-context-menu-item type="checkbox" label="Blue"></cds-context-menu-item>\n                <cds-context-menu-item type="checkbox" label="Red" [checked]="true"></cds-context-menu-item>\n                <cds-context-menu-item type="checkbox" label="Black"></cds-context-menu-item>\n                <cds-context-menu-item type="checkbox" label="Green"></cds-context-menu-item>\n            </cds-context-menu-group>\n            <cds-context-menu-divider></cds-context-menu-divider>\n            <cds-context-menu-item label="Radio flyout">\n                <cds-context-menu>\n                    <cds-context-menu-group\n                        type="radio"\n                        [value]="radioGroupValue"\n                        (valueChange)="onRadioChange($event)">\n                        <cds-context-menu-item type="radio" label="Radio one" value="one"></cds-context-menu-item>\n                        <cds-context-menu-item type="radio" label="Radio two" value="two"></cds-context-menu-item>\n                        <cds-context-menu-item type="radio" label="Radio three" value="three"></cds-context-menu-item>\n                        <cds-context-menu-item type="radio" label="Radio four" value="four"></cds-context-menu-item>\n                    </cds-context-menu-group>\n                </cds-context-menu>\n            </cds-context-menu-item>\n            <cds-context-menu-item label="Checkbox flyout">\n                <cds-context-menu>\n                    <cds-context-menu-group\n                        type="checkbox"\n                        [value]="checkboxGroupValue"\n                        (valueChange)="onCheckboxChange($event)">\n                        <cds-context-menu-item type="checkbox" label="Selectable item a" value="a"></cds-context-menu-item>\n                        <cds-context-menu-item type="checkbox" label="Selectable item b" value="b"></cds-context-menu-item>\n                        <cds-context-menu-item type="checkbox" label="Selectable item c" value="c"></cds-context-menu-item>\n                        <cds-context-menu-item type="checkbox" label="Selectable item d" value="d"></cds-context-menu-item>\n                    </cds-context-menu-group>\n                </cds-context-menu>\n            </cds-context-menu-item>\n        </cds-context-menu>\n    '})).bind({});Basic.parameters={...Basic.parameters,docs:{...Basic.parameters?.docs,source:{originalSource:'args => ({\n  props: args,\n  template: `\n        <cds-context-menu [open]="open" [position]="position">\n            <cds-context-menu-item label="Cut" info="⌘X"></cds-context-menu-item>\n            <cds-context-menu-item label="Option with icon" icon="calendar"></cds-context-menu-item>\n            <cds-context-menu-divider></cds-context-menu-divider>\n            <cds-context-menu-item type="checkbox" label="Enable magic"></cds-context-menu-item>\n            <cds-context-menu-divider></cds-context-menu-divider>\n            <cds-context-menu-group label="Selection group">\n                <cds-context-menu-item type="checkbox" label="Blue"></cds-context-menu-item>\n                <cds-context-menu-item type="checkbox" label="Red" [checked]="true"></cds-context-menu-item>\n                <cds-context-menu-item type="checkbox" label="Black"></cds-context-menu-item>\n                <cds-context-menu-item type="checkbox" label="Green"></cds-context-menu-item>\n            </cds-context-menu-group>\n            <cds-context-menu-divider></cds-context-menu-divider>\n            <cds-context-menu-item label="Radio flyout">\n                <cds-context-menu>\n                    <cds-context-menu-group\n                        type="radio"\n                        [value]="radioGroupValue"\n                        (valueChange)="onRadioChange($event)">\n                        <cds-context-menu-item type="radio" label="Radio one" value="one"></cds-context-menu-item>\n                        <cds-context-menu-item type="radio" label="Radio two" value="two"></cds-context-menu-item>\n                        <cds-context-menu-item type="radio" label="Radio three" value="three"></cds-context-menu-item>\n                        <cds-context-menu-item type="radio" label="Radio four" value="four"></cds-context-menu-item>\n                    </cds-context-menu-group>\n                </cds-context-menu>\n            </cds-context-menu-item>\n            <cds-context-menu-item label="Checkbox flyout">\n                <cds-context-menu>\n                    <cds-context-menu-group\n                        type="checkbox"\n                        [value]="checkboxGroupValue"\n                        (valueChange)="onCheckboxChange($event)">\n                        <cds-context-menu-item type="checkbox" label="Selectable item a" value="a"></cds-context-menu-item>\n                        <cds-context-menu-item type="checkbox" label="Selectable item b" value="b"></cds-context-menu-item>\n                        <cds-context-menu-item type="checkbox" label="Selectable item c" value="c"></cds-context-menu-item>\n                        <cds-context-menu-item type="checkbox" label="Selectable item d" value="d"></cds-context-menu-item>\n                    </cds-context-menu-group>\n                </cds-context-menu>\n            </cds-context-menu-item>\n        </cds-context-menu>\n    `\n})',...Basic.parameters?.docs?.source}}};const __namedExportsOrder=["Basic"]}}]);