carbon-components-angular/docs/storybook/tiles-expandable-tile-stories.8cf36eef.iframe.bundle.js

Next generation components

"use strict";(self.webpackChunkcarbon_components_angular=self.webpackChunkcarbon_components_angular||[]).push([[3402],{"./src/tiles/expandable-tile.stories.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Basic:()=>Basic,Interactive:()=>Interactive,WithLayers:()=>WithLayers,__namedExportsOrder:()=>__namedExportsOrder,default:()=>__WEBPACK_DEFAULT_EXPORT__,withAILabel:()=>withAILabel});var _storybook_angular__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/@storybook/angular/dist/index.mjs"),_layer__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./src/layer/index.ts"),_button__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./src/button/index.ts"),___WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./src/tiles/index.ts"),_ai_label__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./src/ai-label/index.ts"),_icon__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("./src/icon/index.ts"),_storybook_ai_label_story_shared__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__("./src/storybook/ai-label-story-shared.ts");const __WEBPACK_DEFAULT_EXPORT__={title:"Components/Tiles/Expandable",decorators:[(0,_storybook_angular__WEBPACK_IMPORTED_MODULE_0__.moduleMetadata)({imports:[_button__WEBPACK_IMPORTED_MODULE_2__.hJ,_layer__WEBPACK_IMPORTED_MODULE_1__.D,___WEBPACK_IMPORTED_MODULE_3__.i$,_ai_label__WEBPACK_IMPORTED_MODULE_4__.uV,_icon__WEBPACK_IMPORTED_MODULE_5__.QX]})],component:___WEBPACK_IMPORTED_MODULE_3__.wN},Basic=(args=>({props:args,template:'\n        <cds-expandable-tile>\n            <span cdsAboveFold style="height: 200px">Above the fold content here</span>\n            <span cdsBelowFold style="height: 400px">Below the fold content here</span>\n        </cds-expandable-tile>\n    '})).bind({}),Interactive=(args=>({props:args,template:'\n        <cds-expandable-tile [interactive]="true">\n            <span cdsAboveFold style="height: 200px">\n                Above the fold content\n                <button ibmButton>Click me!</button>\n            </span>\n            <span cdsBelowFold style="height: 400px">\n                Below the fold content here\n                <button ibmButton>No me!</button>\n            </span>\n        </cds-expandable-tile>\n    '})).bind({}),WithLayers=(args=>({props:args,template:'\n        <cds-expandable-tile>\n            <span cdsAboveFold style="height: 200px">\n                First Layer, above the fold content here\n            </span>\n            <span cdsBelowFold style="height: 400px">\n                First Layer, below the fold content here\n            </span>\n        </cds-expandable-tile>\n        <div cdsLayer>\n            <cds-expandable-tile>\n                <span cdsAboveFold style="height: 200px">\n                    Second layer, above the fold content here\n                </span>\n                <span cdsBelowFold style="height: 400px">\n                    Second layer, below the fold content here\n                </span>\n            </cds-expandable-tile>\n            <div cdsLayer>\n                <cds-expandable-tile>\n                    <span cdsAboveFold style="height: 200px">\n                        Third layer, above the fold content here\n                    </span>\n                    <span cdsBelowFold style="height: 400px">\n                        Third layer, below the fold content here\n                    </span>\n                </cds-expandable-tile>\n            </div>\n        </div>\n    '})).bind({});WithLayers.parameters={controls:{disable:!0}};const withAILabel=()=>({styles:_storybook_ai_label_story_shared__WEBPACK_IMPORTED_MODULE_6__.J6,template:'\n        <cds-expandable-tile [decorator]="decoratorTpl" [interactive]="true">\n            <div cdsAboveFold style="height: 200px">Above the fold</div>\n            <div cdsBelowFold style="height: 200px">Below the fold</div>\n        </cds-expandable-tile>\n        <ng-template #decoratorTpl>\n            <cds-ai-label\n                class="ai-label-container"\n                kind="default"\n                size="mini"\n                [align]="\'bottom-end\'"\n                [autoAlign]="true"\n                aiText="AI"\n                ariaLabel="Show information">\n                '+_storybook_ai_label_story_shared__WEBPACK_IMPORTED_MODULE_6__.Ag+"\n            </cds-ai-label>\n        </ng-template>\n    "});Basic.parameters={...Basic.parameters,docs:{...Basic.parameters?.docs,source:{originalSource:'args => ({\n  props: args,\n  template: `\n        <cds-expandable-tile>\n            <span cdsAboveFold style="height: 200px">Above the fold content here</span>\n            <span cdsBelowFold style="height: 400px">Below the fold content here</span>\n        </cds-expandable-tile>\n    `\n})',...Basic.parameters?.docs?.source}}},Interactive.parameters={...Interactive.parameters,docs:{...Interactive.parameters?.docs,source:{originalSource:'args => ({\n  props: args,\n  template: `\n        <cds-expandable-tile [interactive]="true">\n            <span cdsAboveFold style="height: 200px">\n                Above the fold content\n                <button ibmButton>Click me!</button>\n            </span>\n            <span cdsBelowFold style="height: 400px">\n                Below the fold content here\n                <button ibmButton>No me!</button>\n            </span>\n        </cds-expandable-tile>\n    `\n})',...Interactive.parameters?.docs?.source}}},WithLayers.parameters={...WithLayers.parameters,docs:{...WithLayers.parameters?.docs,source:{originalSource:'args => ({\n  props: args,\n  template: `\n        <cds-expandable-tile>\n            <span cdsAboveFold style="height: 200px">\n                First Layer, above the fold content here\n            </span>\n            <span cdsBelowFold style="height: 400px">\n                First Layer, below the fold content here\n            </span>\n        </cds-expandable-tile>\n        <div cdsLayer>\n            <cds-expandable-tile>\n                <span cdsAboveFold style="height: 200px">\n                    Second layer, above the fold content here\n                </span>\n                <span cdsBelowFold style="height: 400px">\n                    Second layer, below the fold content here\n                </span>\n            </cds-expandable-tile>\n            <div cdsLayer>\n                <cds-expandable-tile>\n                    <span cdsAboveFold style="height: 200px">\n                        Third layer, above the fold content here\n                    </span>\n                    <span cdsBelowFold style="height: 400px">\n                        Third layer, below the fold content here\n                    </span>\n                </cds-expandable-tile>\n            </div>\n        </div>\n    `\n})',...WithLayers.parameters?.docs?.source}}},withAILabel.parameters={...withAILabel.parameters,docs:{...withAILabel.parameters?.docs,source:{originalSource:'() => ({\n  styles: AI_LABEL_STORY_STYLES,\n  template: `\n        <cds-expandable-tile [decorator]="decoratorTpl" [interactive]="true">\n            <div cdsAboveFold style="height: 200px">Above the fold</div>\n            <div cdsBelowFold style="height: 200px">Below the fold</div>\n        </cds-expandable-tile>\n        <ng-template #decoratorTpl>\n            <cds-ai-label\n                class="ai-label-container"\n                kind="default"\n                size="mini"\n                [align]="\'bottom-end\'"\n                [autoAlign]="true"\n                aiText="AI"\n                ariaLabel="Show information">\n                ` + AI_LABEL_INNER + `\n            </cds-ai-label>\n        </ng-template>\n    `\n})',...withAILabel.parameters?.docs?.source}}};const __namedExportsOrder=["Basic","Interactive","WithLayers","withAILabel"]}}]);