carbon-components-angular/docs/storybook/skeleton-skeleton-stories.ab75213a.iframe.bundle.js

Next generation components

"use strict";(self.webpackChunkcarbon_components_angular=self.webpackChunkcarbon_components_angular||[]).push([[7869],{"./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)},"./node_modules/@storybook/angular/dist/client/argsToTemplate.js":(__unused_webpack_module,exports)=>{Object.defineProperty(exports,"__esModule",{value:!0}),exports.argsToTemplate=void 0,exports.argsToTemplate=function argsToTemplate(args,options={}){const includeSet=options.include?new Set(options.include):null,excludeSet=options.exclude?new Set(options.exclude):null;return Object.entries(args).filter((([key])=>void 0!==args[key])).filter((([key])=>includeSet?includeSet.has(key):!excludeSet||!excludeSet.has(key))).map((([key,value])=>"function"==typeof value?`(${key})="${key}($event)"`:`[${key}]="${key}"`)).join(" ")}},"./node_modules/@storybook/angular/dist/client/decorators.js":(__unused_webpack_module,exports,__webpack_require__)=>{Object.defineProperty(exports,"__esModule",{value:!0}),exports.componentWrapperDecorator=exports.applicationConfig=exports.moduleMetadata=void 0;const ComputesTemplateFromComponent_1=__webpack_require__("./node_modules/@storybook/angular/dist/client/angular-beta/ComputesTemplateFromComponent.js"),NgComponentAnalyzer_1=__webpack_require__("./node_modules/@storybook/angular/dist/client/angular-beta/utils/NgComponentAnalyzer.js");exports.moduleMetadata=metadata=>storyFn=>{const story=storyFn(),storyMetadata=story.moduleMetadata||{};return metadata=metadata||{},{...story,moduleMetadata:{declarations:[...metadata.declarations||[],...storyMetadata.declarations||[]],entryComponents:[...metadata.entryComponents||[],...storyMetadata.entryComponents||[]],imports:[...metadata.imports||[],...storyMetadata.imports||[]],schemas:[...metadata.schemas||[],...storyMetadata.schemas||[]],providers:[...metadata.providers||[],...storyMetadata.providers||[]]}}},exports.applicationConfig=function applicationConfig(config){return storyFn=>{const story=storyFn(),storyConfig=story.applicationConfig;return{...story,applicationConfig:storyConfig||config?{...config,...storyConfig,providers:[...config?.providers||[],...storyConfig?.providers||[]]}:void 0}}};exports.componentWrapperDecorator=(element,props)=>(storyFn,storyContext)=>{const story=storyFn(),currentProps="function"==typeof props?props(storyContext):props,template=(0,NgComponentAnalyzer_1.isComponent)(element)?(0,ComputesTemplateFromComponent_1.computesTemplateFromComponent)(element,currentProps??{},story.template):element(story.template);return{...story,template,...currentProps||story.props?{props:{...currentProps,...story.props}}:{}}}},"./node_modules/@storybook/angular/dist/client/index.js":function(__unused_webpack_module,exports,__webpack_require__){var __createBinding=this&&this.__createBinding||(Object.create?function(o,m,k,k2){void 0===k2&&(k2=k);var desc=Object.getOwnPropertyDescriptor(m,k);desc&&!("get"in desc?!m.__esModule:desc.writable||desc.configurable)||(desc={enumerable:!0,get:function(){return m[k]}}),Object.defineProperty(o,k2,desc)}:function(o,m,k,k2){void 0===k2&&(k2=k),o[k2]=m[k]}),__exportStar=this&&this.__exportStar||function(m,exports){for(var p in m)"default"===p||Object.prototype.hasOwnProperty.call(exports,p)||__createBinding(exports,m,p)};Object.defineProperty(exports,"__esModule",{value:!0}),exports.argsToTemplate=exports.applicationConfig=exports.componentWrapperDecorator=exports.moduleMetadata=void 0,__webpack_require__("./node_modules/@storybook/angular/dist/client/globals.js"),__exportStar(__webpack_require__("./node_modules/@storybook/angular/dist/client/public-api.js"),exports),__exportStar(__webpack_require__("./node_modules/@storybook/angular/dist/client/public-types.js"),exports);var decorators_1=__webpack_require__("./node_modules/@storybook/angular/dist/client/decorators.js");Object.defineProperty(exports,"moduleMetadata",{enumerable:!0,get:function(){return decorators_1.moduleMetadata}}),Object.defineProperty(exports,"componentWrapperDecorator",{enumerable:!0,get:function(){return decorators_1.componentWrapperDecorator}}),Object.defineProperty(exports,"applicationConfig",{enumerable:!0,get:function(){return decorators_1.applicationConfig}});var argsToTemplate_1=__webpack_require__("./node_modules/@storybook/angular/dist/client/argsToTemplate.js");Object.defineProperty(exports,"argsToTemplate",{enumerable:!0,get:function(){return argsToTemplate_1.argsToTemplate}})},"./node_modules/@storybook/angular/dist/client/public-api.js":function(__unused_webpack_module,exports,__webpack_require__){var __createBinding=this&&this.__createBinding||(Object.create?function(o,m,k,k2){void 0===k2&&(k2=k);var desc=Object.getOwnPropertyDescriptor(m,k);desc&&!("get"in desc?!m.__esModule:desc.writable||desc.configurable)||(desc={enumerable:!0,get:function(){return m[k]}}),Object.defineProperty(o,k2,desc)}:function(o,m,k,k2){void 0===k2&&(k2=k),o[k2]=m[k]}),__exportStar=this&&this.__exportStar||function(m,exports){for(var p in m)"default"===p||Object.prototype.hasOwnProperty.call(exports,p)||__createBinding(exports,m,p)},__importDefault=this&&this.__importDefault||function(mod){return mod&&mod.__esModule?mod:{default:mod}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.raw=exports.forceReRender=exports.configure=exports.storiesOf=void 0;const preview_api_1=__webpack_require__("@storybook/preview-api"),render_1=__webpack_require__("./node_modules/@storybook/angular/dist/client/render.js"),decorateStory_1=__importDefault(__webpack_require__("./node_modules/@storybook/angular/dist/client/decorateStory.js"));__exportStar(__webpack_require__("./node_modules/@storybook/angular/dist/client/public-types.js"),exports);const api=(0,preview_api_1.start)(render_1.renderToCanvas,{decorateStory:decorateStory_1.default,render:render_1.render});exports.storiesOf=(kind,m)=>api.clientApi.storiesOf(kind,m).addParameters({renderer:"angular"});exports.configure=(...args)=>api.configure("angular",...args),exports.forceReRender=api.forceReRender,exports.raw=api.clientApi.raw},"./node_modules/@storybook/angular/dist/client/public-types.js":(__unused_webpack_module,exports)=>{Object.defineProperty(exports,"__esModule",{value:!0})},"./node_modules/@storybook/angular/dist/index.mjs":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{var _client_index__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/@storybook/angular/dist/client/index.js");__webpack_require__.o(_client_index__WEBPACK_IMPORTED_MODULE_0__,"applicationConfig")&&__webpack_require__.d(__webpack_exports__,{applicationConfig:function(){return _client_index__WEBPACK_IMPORTED_MODULE_0__.applicationConfig}}),__webpack_require__.o(_client_index__WEBPACK_IMPORTED_MODULE_0__,"componentWrapperDecorator")&&__webpack_require__.d(__webpack_exports__,{componentWrapperDecorator:function(){return _client_index__WEBPACK_IMPORTED_MODULE_0__.componentWrapperDecorator}}),__webpack_require__.o(_client_index__WEBPACK_IMPORTED_MODULE_0__,"moduleMetadata")&&__webpack_require__.d(__webpack_exports__,{moduleMetadata:function(){return _client_index__WEBPACK_IMPORTED_MODULE_0__.moduleMetadata}})},"./src/skeleton/skeleton.stories.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{AICombined:()=>AICombined,AIHeadingAndParagraph:()=>AIHeadingAndParagraph,AIIcon:()=>AIIcon,AIText:()=>AIText,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/skeleton/index.ts");const __WEBPACK_DEFAULT_EXPORT__={title:"Components/Skeleton",decorators:[(0,_storybook_angular__WEBPACK_IMPORTED_MODULE_0__.moduleMetadata)({imports:[___WEBPACK_IMPORTED_MODULE_1__.mL]})],args:{lines:5,minLineWidth:100,maxLineWidth:300},component:___WEBPACK_IMPORTED_MODULE_1__.uK},Basic=(args=>({props:args,template:'\n    <cds-skeleton-text\n        [lines]="lines"\n        [ai]="ai"\n        [minLineWidth]="minLineWidth"\n        [maxLineWidth]="maxLineWidth">\n    </cds-skeleton-text>\n    '})).bind({}),AIText=(args=>({props:args,template:'\n    <cds-skeleton-text\n        [ai]="ai"\n        [lines]="lines"\n        [minLineWidth]="minLineWidth"\n        [maxLineWidth]="maxLineWidth">\n    </cds-skeleton-text>\n    '})).bind({});AIText.args={ai:!0,lines:5,minLineWidth:100,maxLineWidth:300};const AIHeadingAndParagraph=(args=>({props:args,template:'\n    <cds-skeleton-text\n        [ai]="ai"\n        [heading]="heading"\n        [lines]="1"\n        [minLineWidth]="minLineWidth"\n        [maxLineWidth]="maxLineWidth">\n    </cds-skeleton-text>\n    <cds-skeleton-text\n        [ai]="ai"\n        [lines]="lines"\n        [minLineWidth]="minLineWidth"\n        [maxLineWidth]="maxLineWidth">\n    </cds-skeleton-text>\n    '})).bind({});AIHeadingAndParagraph.args={ai:!0,heading:!0,lines:5,minLineWidth:100,maxLineWidth:300};const AIIcon=(args=>({props:args,template:'\n    <div class="skeleton-ai-icon-row">\n        <div class="skeleton-ai-icon--margin">\n            <cds-skeleton-icon [ai]="ai"></cds-skeleton-icon>\n        </div>\n        <div class="skeleton-ai-icon--sized">\n            <cds-skeleton-icon [ai]="ai"></cds-skeleton-icon>\n        </div>\n    </div>\n    ',styles:["\n        .skeleton-ai-icon-row {\n            display: flex;\n            align-items: flex-start;\n            gap: 2rem;\n        }\n        .skeleton-ai-icon--margin {\n            margin: 3rem;\n        }\n        .skeleton-ai-icon--sized {\n            width: 24px;\n            height: 24px;\n            margin: 3rem;\n        }\n        .skeleton-ai-icon--sized .cds--icon--skeleton {\n            width: 100%;\n            height: 100%;\n        }\n    "]})).bind({});AIIcon.args={ai:!0};const AICombined=(()=>({template:'\n    <div class="skeleton-ai-combined">\n        <div class="skeleton-ai-combined__icon">\n            <cds-skeleton-icon [ai]="true"></cds-skeleton-icon>\n        </div>\n        <div class="skeleton-ai-combined__body">\n            <div class="skeleton-ai-combined__placeholder">\n                <cds-skeleton-placeholder [ai]="true"></cds-skeleton-placeholder>\n            </div>\n            <cds-skeleton-text [ai]="true" [lines]="1" [heading]="true"></cds-skeleton-text>\n            <cds-skeleton-text [ai]="true" [lines]="3"></cds-skeleton-text>\n        </div>\n    </div>\n    ',styles:["\n        .skeleton-ai-combined {\n            display: flex;\n            gap: 1rem;\n            max-width: 28rem;\n        }\n        .skeleton-ai-combined__icon .cds--icon--skeleton {\n            width: 32px;\n            height: 32px;\n        }\n        .skeleton-ai-combined__placeholder {\n            width: 100%;\n            height: 120px;\n            margin-bottom: 1rem;\n        }\n    "]})).bind({});Basic.parameters={...Basic.parameters,docs:{...Basic.parameters?.docs,source:{originalSource:'args => ({\n  props: args,\n  template: `\n    <cds-skeleton-text\n        [lines]="lines"\n        [ai]="ai"\n        [minLineWidth]="minLineWidth"\n        [maxLineWidth]="maxLineWidth">\n    </cds-skeleton-text>\n    `\n})',...Basic.parameters?.docs?.source}}},AIText.parameters={...AIText.parameters,docs:{...AIText.parameters?.docs,source:{originalSource:'args => ({\n  props: args,\n  template: `\n    <cds-skeleton-text\n        [ai]="ai"\n        [lines]="lines"\n        [minLineWidth]="minLineWidth"\n        [maxLineWidth]="maxLineWidth">\n    </cds-skeleton-text>\n    `\n})',...AIText.parameters?.docs?.source}}},AIHeadingAndParagraph.parameters={...AIHeadingAndParagraph.parameters,docs:{...AIHeadingAndParagraph.parameters?.docs,source:{originalSource:'args => ({\n  props: args,\n  template: `\n    <cds-skeleton-text\n        [ai]="ai"\n        [heading]="heading"\n        [lines]="1"\n        [minLineWidth]="minLineWidth"\n        [maxLineWidth]="maxLineWidth">\n    </cds-skeleton-text>\n    <cds-skeleton-text\n        [ai]="ai"\n        [lines]="lines"\n        [minLineWidth]="minLineWidth"\n        [maxLineWidth]="maxLineWidth">\n    </cds-skeleton-text>\n    `\n})',...AIHeadingAndParagraph.parameters?.docs?.source}}},AIIcon.parameters={...AIIcon.parameters,docs:{...AIIcon.parameters?.docs,source:{originalSource:'args => ({\n  props: args,\n  template: `\n    <div class="skeleton-ai-icon-row">\n        <div class="skeleton-ai-icon--margin">\n            <cds-skeleton-icon [ai]="ai"></cds-skeleton-icon>\n        </div>\n        <div class="skeleton-ai-icon--sized">\n            <cds-skeleton-icon [ai]="ai"></cds-skeleton-icon>\n        </div>\n    </div>\n    `,\n  styles: [`\n        .skeleton-ai-icon-row {\n            display: flex;\n            align-items: flex-start;\n            gap: 2rem;\n        }\n        .skeleton-ai-icon--margin {\n            margin: 3rem;\n        }\n        .skeleton-ai-icon--sized {\n            width: 24px;\n            height: 24px;\n            margin: 3rem;\n        }\n        .skeleton-ai-icon--sized .cds--icon--skeleton {\n            width: 100%;\n            height: 100%;\n        }\n    `]\n})',...AIIcon.parameters?.docs?.source}}},AICombined.parameters={...AICombined.parameters,docs:{...AICombined.parameters?.docs,source:{originalSource:'() => ({\n  template: `\n    <div class="skeleton-ai-combined">\n        <div class="skeleton-ai-combined__icon">\n            <cds-skeleton-icon [ai]="true"></cds-skeleton-icon>\n        </div>\n        <div class="skeleton-ai-combined__body">\n            <div class="skeleton-ai-combined__placeholder">\n                <cds-skeleton-placeholder [ai]="true"></cds-skeleton-placeholder>\n            </div>\n            <cds-skeleton-text [ai]="true" [lines]="1" [heading]="true"></cds-skeleton-text>\n            <cds-skeleton-text [ai]="true" [lines]="3"></cds-skeleton-text>\n        </div>\n    </div>\n    `,\n  styles: [`\n        .skeleton-ai-combined {\n            display: flex;\n            gap: 1rem;\n            max-width: 28rem;\n        }\n        .skeleton-ai-combined__icon .cds--icon--skeleton {\n            width: 32px;\n            height: 32px;\n        }\n        .skeleton-ai-combined__placeholder {\n            width: 100%;\n            height: 120px;\n            margin-bottom: 1rem;\n        }\n    `]\n})',...AICombined.parameters?.docs?.source}}};const __namedExportsOrder=["Basic","AIText","AIHeadingAndParagraph","AIIcon","AICombined"]}}]);