carbon-components-angular/docs/storybook/tiles-tiles-stories.caaccfb8.iframe.bundle.js

Next generation components

"use strict";(self.webpackChunkcarbon_components_angular=self.webpackChunkcarbon_components_angular||[]).push([[3280],{"./src/skeleton/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{mL:()=>SkeletonModule,uK:()=>SkeletonPlaceholder});var tslib_es6=__webpack_require__("./node_modules/tslib/tslib.es6.js"),core=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs");let SkeletonIcon=class SkeletonIcon{constructor(){this.ai=!1}};SkeletonIcon.propDecorators={ai:[{type:core.Input}]},SkeletonIcon=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-skeleton-icon, ibm-skeleton-icon",template:'\n\t\t<div\n\t\t\tclass="cds--icon--skeleton"\n\t\t\t[class.cds--skeleton__icon--ai]="ai">\n\t\t</div>'})],SkeletonIcon);let SkeletonPlaceholder=class SkeletonPlaceholder{constructor(){this.ai=!1}};SkeletonPlaceholder.propDecorators={ai:[{type:core.Input}]},SkeletonPlaceholder=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-skeleton-placeholder, ibm-skeleton-placeholder",template:'\n\t\t<div\n\t\t\tclass="cds--skeleton__placeholder"\n\t\t\t[class.cds--skeleton__placeholder--ai]="ai">\n\t\t</div>'})],SkeletonPlaceholder);let SkeletonText=class SkeletonText{constructor(){this.lines=5,this.minLineWidth=100,this.maxLineWidth=300,this.heading=!1,this.ai=!1}getRandomInt(min,max){return""+(Math.floor(Math.random()*(max-min+1)+min)+"px")}ngOnChanges(){this.lineWidths=Array.from(Array(this.lines).keys()).map((num=>this.getRandomInt(this.minLineWidth,this.maxLineWidth)))}};SkeletonText.propDecorators={lines:[{type:core.Input}],minLineWidth:[{type:core.Input}],maxLineWidth:[{type:core.Input}],heading:[{type:core.Input}],ai:[{type:core.Input}]},SkeletonText=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-skeleton-text, ibm-skeleton-text",template:'\n\t\t<p\n\t\t\t*ngFor="let width of lineWidths"\n\t\t\tclass="cds--skeleton__text"\n\t\t\t[ngClass]="{\n\t\t\t\t\'cds--skeleton__heading\': heading,\n\t\t\t\t\'cds--skeleton__text--ai\': ai\n\t\t\t}"\n\t\t\t[style.width]="width">\n\t\t</p>\n\t'})],SkeletonText);var common=__webpack_require__("./node_modules/@angular/common/fesm2020/common.mjs");let SkeletonModule=class SkeletonModule{};SkeletonModule=(0,tslib_es6.gn)([(0,core.NgModule)({declarations:[SkeletonIcon,SkeletonPlaceholder,SkeletonText],exports:[SkeletonIcon,SkeletonPlaceholder,SkeletonText],imports:[common.CommonModule]})],SkeletonModule)},"./src/tiles/tiles.stories.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Basic:()=>Basic,Skeleton:()=>Skeleton,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"),_skeleton__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./src/skeleton/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"),_button__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("./src/button/index.ts"),_icon__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__("./src/icon/index.ts"),_storybook_ai_label_story_shared__WEBPACK_IMPORTED_MODULE_7__=__webpack_require__("./src/storybook/ai-label-story-shared.ts");const __WEBPACK_DEFAULT_EXPORT__={title:"Components/Tiles",decorators:[(0,_storybook_angular__WEBPACK_IMPORTED_MODULE_0__.moduleMetadata)({imports:[___WEBPACK_IMPORTED_MODULE_3__.i$,_layer__WEBPACK_IMPORTED_MODULE_1__.D,_skeleton__WEBPACK_IMPORTED_MODULE_2__.mL,_ai_label__WEBPACK_IMPORTED_MODULE_4__.uV,_button__WEBPACK_IMPORTED_MODULE_5__.hJ,_icon__WEBPACK_IMPORTED_MODULE_6__.QX]})],component:___WEBPACK_IMPORTED_MODULE_3__.n9},Basic=(args=>({props:args,template:"\n        <cds-tile>\n            Tile content goes here...\n        </cds-tile>\n    "})).bind({}),WithLayers=(args=>({props:args,template:"\n        <cds-tile>\n            First layer\n        </cds-tile>\n        <div cdsLayer>\n            <cds-tile>\n                Second layer\n            </cds-tile>\n            <div cdsLayer>\n                <cds-tile>Third layer</cds-tile>\n            </div>\n        </div>\n    "})).bind({}),Skeleton=(args=>({props:args,template:'\n        <cds-tile>\n            <div class="skeleton-placeholder">\n                <cds-skeleton-placeholder></cds-skeleton-placeholder>\n            </div>\n            <div class="skeleton-text">\n                <cds-skeleton-text [lines]="3"></cds-skeleton-text>\n            </div>\n        </cds-tile>\n    ',styles:["\n        .skeleton-placeholder {\n            margin-bottom: 10px;\n        }\n    "]})).bind({}),withAILabel=()=>({styles:_storybook_ai_label_story_shared__WEBPACK_IMPORTED_MODULE_7__.J6,template:'\n        <cds-tile [decorator]="decoratorTpl">\n            Tile with AI label\n        </cds-tile>\n        <ng-template #decoratorTpl>\n            <cds-ai-label\n                class="ai-label-container"\n                kind="default"\n                size="mini"\n                [autoAlign]="true"\n                [align]="\'bottom-end\'"\n                aiText="AI"\n                ariaLabel="Show information">\n                '+_storybook_ai_label_story_shared__WEBPACK_IMPORTED_MODULE_7__.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-tile>\n            Tile content goes here...\n        </cds-tile>\n    `\n})",...Basic.parameters?.docs?.source}}},WithLayers.parameters={...WithLayers.parameters,docs:{...WithLayers.parameters?.docs,source:{originalSource:"args => ({\n  props: args,\n  template: `\n        <cds-tile>\n            First layer\n        </cds-tile>\n        <div cdsLayer>\n            <cds-tile>\n                Second layer\n            </cds-tile>\n            <div cdsLayer>\n                <cds-tile>Third layer</cds-tile>\n            </div>\n        </div>\n    `\n})",...WithLayers.parameters?.docs?.source}}},Skeleton.parameters={...Skeleton.parameters,docs:{...Skeleton.parameters?.docs,source:{originalSource:'args => ({\n  props: args,\n  template: `\n        <cds-tile>\n            <div class="skeleton-placeholder">\n                <cds-skeleton-placeholder></cds-skeleton-placeholder>\n            </div>\n            <div class="skeleton-text">\n                <cds-skeleton-text [lines]="3"></cds-skeleton-text>\n            </div>\n        </cds-tile>\n    `,\n  styles: [`\n        .skeleton-placeholder {\n            margin-bottom: 10px;\n        }\n    `]\n})',...Skeleton.parameters?.docs?.source}}},withAILabel.parameters={...withAILabel.parameters,docs:{...withAILabel.parameters?.docs,source:{originalSource:'() => ({\n  styles: AI_LABEL_STORY_STYLES,\n  template: `\n        <cds-tile [decorator]="decoratorTpl">\n            Tile with AI label\n        </cds-tile>\n        <ng-template #decoratorTpl>\n            <cds-ai-label\n                class="ai-label-container"\n                kind="default"\n                size="mini"\n                [autoAlign]="true"\n                [align]="\'bottom-end\'"\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","WithLayers","Skeleton","withAILabel"]}}]);