carbon-components-angular
Version:
Next generation components
1 lines • 18.3 kB
JavaScript
;(self.webpackChunkcarbon_components_angular=self.webpackChunkcarbon_components_angular||[]).push([[6115],{"./src/layer/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{A:()=>LayerDirective,D:()=>LayerModule});var tslib_es6=__webpack_require__("./node_modules/tslib/tslib.es6.js"),core=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs");let LayerDirective=class LayerDirective{set ibmLayer(level){this.cdsLayer=level}set cdsLayer(level){"number"==typeof level&&(this._passedLevel=level,this.layer=level)}get cdsLayer(){return this._passedLevel}set layer(level){"number"==typeof level&&(this._level=Math.max(0,Math.min(level,2)),this.layerChildren&&this.layerChildren.forEach((layer=>{layer!==this&&(layer.layer="number"==typeof layer._passedLevel?layer._passedLevel:this.layer+1)})))}get layer(){return this._level}get layerOneClass(){return 0===this.layer}get layerTwoClass(){return 1===this.layer}get layerThreeClass(){return 2===this.layer}ngAfterContentInit(){"number"!=typeof this.cdsLayer&&(this.layer=1)}};LayerDirective.propDecorators={ibmLayer:[{type:core.Input}],cdsLayer:[{type:core.Input}],layerOneClass:[{type:core.HostBinding,args:["class.cds--layer-one"]}],layerTwoClass:[{type:core.HostBinding,args:["class.cds--layer-two"]}],layerThreeClass:[{type:core.HostBinding,args:["class.cds--layer-three"]}],layerChildren:[{type:core.ContentChildren,args:[LayerDirective,{descendants:!1}]}]},LayerDirective=(0,tslib_es6.gn)([(0,core.Directive)({selector:"[cdsLayer], [ibmLayer]",exportAs:"layer"})],LayerDirective);var common=__webpack_require__("./node_modules/@angular/common/fesm2020/common.mjs");let LayerModule=class LayerModule{};LayerModule=(0,tslib_es6.gn)([(0,core.NgModule)({declarations:[LayerDirective],exports:[LayerDirective],imports:[common.CommonModule]})],LayerModule)},"./src/theme/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{E:()=>ThemeDirective,O:()=>ThemeModule});var tslib_es6=__webpack_require__("./node_modules/tslib/tslib.es6.js"),core=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs"),src_layer=__webpack_require__("./src/layer/index.ts");let ThemeDirective=class ThemeDirective{constructor(){this.cdsTheme="white",this.layerClass=!0}set ibmTheme(type){this.cdsTheme=type}get whiteThemeClass(){return"white"===this.cdsTheme||!this.cdsTheme}get g10ThemeClass(){return"g10"===this.cdsTheme}get g90ThemeClass(){return"g90"===this.cdsTheme}get g100ThemeClass(){return"g100"===this.cdsTheme}ngAfterContentChecked(){this.layerChildren.toArray().forEach((layer=>{"number"!=typeof layer.cdsLayer&&(layer.cdsLayer=1)}))}};ThemeDirective.propDecorators={ibmTheme:[{type:core.Input}],cdsTheme:[{type:core.Input}],layerChildren:[{type:core.ContentChildren,args:[src_layer.A,{descendants:!1}]}],whiteThemeClass:[{type:core.HostBinding,args:["class.cds--white"]}],g10ThemeClass:[{type:core.HostBinding,args:["class.cds--g10"]}],g90ThemeClass:[{type:core.HostBinding,args:["class.cds--g90"]}],g100ThemeClass:[{type:core.HostBinding,args:["class.cds--g100"]}],layerClass:[{type:core.HostBinding,args:["class.cds--layer-one"]}]},ThemeDirective=(0,tslib_es6.gn)([(0,core.Directive)({selector:"[cdsTheme], [ibmTheme]",exportAs:"theme"})],ThemeDirective);var common=__webpack_require__("./node_modules/@angular/common/fesm2020/common.mjs");let ThemeModule=class ThemeModule{};ThemeModule=(0,tslib_es6.gn)([(0,core.NgModule)({declarations:[ThemeDirective],exports:[ThemeDirective],imports:[common.CommonModule,src_layer.D]})],ThemeModule)},"./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/theme/theme.stories.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Basic:()=>Basic,WithLayer:()=>WithLayer,__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/theme/index.ts");const __WEBPACK_DEFAULT_EXPORT__={title:"Components/Theme",decorators:[(0,_storybook_angular__WEBPACK_IMPORTED_MODULE_0__.moduleMetadata)({imports:[___WEBPACK_IMPORTED_MODULE_1__.O]})],component:___WEBPACK_IMPORTED_MODULE_1__.E},Basic=(args=>({props:args,template:'\n <div cdsTheme>\n <div class="theme-section">\n <p>White theme</p>\n </div>\n </div>\n <div cdsTheme="g10">\n <div class="theme-section">\n <p>G10 theme</p>\n </div>\n </div>\n <div cdsTheme="g90">\n <div class="theme-section">\n <p>G90 theme</p>\n </div>\n </div>\n <div cdsTheme="g100">\n <div class="theme-section">\n <p>G100 theme</p>\n </div>\n </div>\n ',styles:["\n .theme-section {\n padding: 1rem;\n background: var(--cds-background);\n color: var(--cds-text-primary);\n }\n "]})).bind({}),WithLayer=(args=>({props:args,template:'\n <div cdsTheme>\n <article class="theme-layer-example">\n <header class="theme-layer-header">White theme</header>\n <div class="theme-with-layer">Layer one</div>\n <div cdsLayer>\n <div class="theme-with-layer">Layer two</div>\n <div cdsLayer>\n <div class="theme-with-layer">Layer three</div>\n </div>\n </div>\n </article>\n </div>\n <div cdsTheme="g10">\n <article class="theme-layer-example">\n <header class="theme-layer-header">G10 theme</header>\n <div class="theme-with-layer">Layer one</div>\n <div cdsLayer>\n <div class="theme-with-layer">Layer two</div>\n <div cdsLayer>\n <div class="theme-with-layer">Layer three</div>\n </div>\n </div>\n </article>\n </div>\n <div cdsTheme="g90">\n <article class="theme-layer-example">\n <header class="theme-layer-header">G90 theme</header>\n <div class="theme-with-layer">Layer one</div>\n <div cdsLayer>\n <div class="theme-with-layer">Layer two</div>\n <div cdsLayer>\n <div class="theme-with-layer">Layer three</div>\n </div>\n </div>\n </article>\n </div>\n <div cdsTheme="g100">\n <article class="theme-layer-example">\n <header class="theme-layer-header">G100 theme</header>\n <div class="theme-with-layer">Layer one</div>\n <div cdsLayer>\n <div class="theme-with-layer">Layer two</div>\n <div cdsLayer>\n <div class="theme-with-layer">Layer three</div>\n </div>\n </div>\n </article>\n </div>\n ',styles:["\n .theme-layer-example {\n padding: 1rem;\n background: var(--cds-background);\n color: var(--cds-text-primary);\n }\n .theme-layer-header {\n margin-bottom: 1rem;\n }\n .theme-with-layer {\n padding: 1rem;\n background: var(--cds-layer);\n color: var(--cds-text-primary);\n }\n "]})).bind({});Basic.parameters={...Basic.parameters,docs:{...Basic.parameters?.docs,source:{originalSource:'args => ({\n props: args,\n template: `\n <div cdsTheme>\n <div class="theme-section">\n <p>White theme</p>\n </div>\n </div>\n <div cdsTheme="g10">\n <div class="theme-section">\n <p>G10 theme</p>\n </div>\n </div>\n <div cdsTheme="g90">\n <div class="theme-section">\n <p>G90 theme</p>\n </div>\n </div>\n <div cdsTheme="g100">\n <div class="theme-section">\n <p>G100 theme</p>\n </div>\n </div>\n `,\n styles: [`\n .theme-section {\n padding: 1rem;\n background: var(--cds-background);\n color: var(--cds-text-primary);\n }\n `]\n})',...Basic.parameters?.docs?.source}}},WithLayer.parameters={...WithLayer.parameters,docs:{...WithLayer.parameters?.docs,source:{originalSource:'args => ({\n props: args,\n template: `\n <div cdsTheme>\n <article class="theme-layer-example">\n <header class="theme-layer-header">White theme</header>\n <div class="theme-with-layer">Layer one</div>\n <div cdsLayer>\n <div class="theme-with-layer">Layer two</div>\n <div cdsLayer>\n <div class="theme-with-layer">Layer three</div>\n </div>\n </div>\n </article>\n </div>\n <div cdsTheme="g10">\n <article class="theme-layer-example">\n <header class="theme-layer-header">G10 theme</header>\n <div class="theme-with-layer">Layer one</div>\n <div cdsLayer>\n <div class="theme-with-layer">Layer two</div>\n <div cdsLayer>\n <div class="theme-with-layer">Layer three</div>\n </div>\n </div>\n </article>\n </div>\n <div cdsTheme="g90">\n <article class="theme-layer-example">\n <header class="theme-layer-header">G90 theme</header>\n <div class="theme-with-layer">Layer one</div>\n <div cdsLayer>\n <div class="theme-with-layer">Layer two</div>\n <div cdsLayer>\n <div class="theme-with-layer">Layer three</div>\n </div>\n </div>\n </article>\n </div>\n <div cdsTheme="g100">\n <article class="theme-layer-example">\n <header class="theme-layer-header">G100 theme</header>\n <div class="theme-with-layer">Layer one</div>\n <div cdsLayer>\n <div class="theme-with-layer">Layer two</div>\n <div cdsLayer>\n <div class="theme-with-layer">Layer three</div>\n </div>\n </div>\n </article>\n </div>\n `,\n styles: [`\n .theme-layer-example {\n padding: 1rem;\n background: var(--cds-background);\n color: var(--cds-text-primary);\n }\n .theme-layer-header {\n margin-bottom: 1rem;\n }\n .theme-with-layer {\n padding: 1rem;\n background: var(--cds-layer);\n color: var(--cds-text-primary);\n }\n `]\n})',...WithLayer.parameters?.docs?.source}}};const __namedExportsOrder=["Basic","WithLayer"]}}]);