carbon-components-angular
Version:
Next generation components
1 lines • 8.67 kB
JavaScript
"use strict";(self.webpackChunkcarbon_components_angular=self.webpackChunkcarbon_components_angular||[]).push([[4731],{"./src/grid/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{iK:()=>_column_directive__WEBPACK_IMPORTED_MODULE_4__.i,lj:()=>_grid_directive__WEBPACK_IMPORTED_MODULE_1__.l,vZ:()=>_row_directive__WEBPACK_IMPORTED_MODULE_3__.v,zE:()=>_grid_module__WEBPACK_IMPORTED_MODULE_0__.z});var _grid_module__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./src/grid/grid.module.ts"),_grid_directive__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./src/grid/grid.directive.ts"),_row_directive__WEBPACK_IMPORTED_MODULE_3__=(__webpack_require__("./src/grid/grid.service.ts"),__webpack_require__("./src/grid/row.directive.ts")),_column_directive__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./src/grid/column.directive.ts")},"./src/icon/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{ar:()=>icon_directive.a,QX:()=>icon_module.QX,C6:()=>icon_service.C6});var icon_directive=__webpack_require__("./src/icon/icon.directive.ts"),icon_module=__webpack_require__("./src/icon/icon.module.ts"),icon_service=__webpack_require__("./src/icon/icon.service.ts")},"./src/icon/icon.stories.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{AllIcon:()=>AllIcon,AllPictograms:()=>AllPictograms,Basic:()=>Basic,RootElement:()=>RootElement,__namedExportsOrder:()=>__namedExportsOrder,default:()=>icon_stories});var dist=__webpack_require__("./node_modules/@storybook/angular/dist/index.mjs"),icon=__webpack_require__("./src/icon/index.ts"),grid=__webpack_require__("./src/grid/index.ts"),tslib_es6=__webpack_require__("./node_modules/tslib/tslib.es6.js"),core=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs"),es=__webpack_require__("./node_modules/@carbon/icons/es/index.js");let IconDemo=class IconDemo{constructor(iconService){this.iconService=iconService}ngOnInit(){this.iconService.register(es.Accessibility16)}};IconDemo.ctorParameters=()=>[{type:icon.C6}],IconDemo=(0,tslib_es6.gn)([(0,core.Component)({selector:"app-demo-icon",template:"\n\t\t\x3c!-- this just sets up the environment for the demo --\x3e\n\t"})],IconDemo);let ManyIconDemo=class ManyIconDemo{constructor(iconService){this.iconService=iconService,this.groupedIcons=[]}ngOnInit(){const iconMap=new Map;for(const descriptor of Object.values(es))this.iconService.register(descriptor),"object"==typeof descriptor&&descriptor&&(iconMap.has(descriptor.name)||iconMap.set(descriptor.name,[]),iconMap.get(descriptor.name).push(descriptor));setTimeout((()=>{this.groupedIcons=Array.from(iconMap.values())}),1e3)}};ManyIconDemo.ctorParameters=()=>[{type:icon.C6}],ManyIconDemo=(0,tslib_es6.gn)([(0,core.Component)({selector:"app-demo-many-icon",template:'\n\t\t<table>\n\t\t\t<tr *ngFor="let group of groupedIcons">\n\t\t\t\t<td *ngFor="let icon of group">\n\t\t\t\t\t<svg [cdsIcon]="icon.name" [size]="icon.size"></svg>\n\t\t\t\t\t<div>name: <code>{{icon.name}}</code></div>\n\t\t\t\t\t<div>size: <code>{{icon.size}}</code></div>\n\t\t\t\t</td>\n\t\t\t</tr>\n\t\t</table>\n\t',styles:["\n\t\t\ttd {\n\t\t\t\twhite-space: nowrap;\n\t\t\t\tpadding: 10px 0;\n\t\t\t}\n\t\t"]})],ManyIconDemo);var pictograms_es=__webpack_require__("./node_modules/@carbon/pictograms/es/index.js");let ManyPictogramsDemo=class ManyPictogramsDemo{constructor(iconService){this.iconService=iconService,this.groupedIcons=[]}ngOnInit(){const iconMap=new Map;for(const descriptor of Object.values(pictograms_es))this.iconService.register(descriptor),"object"==typeof descriptor&&descriptor&&(iconMap.has(descriptor.name)||iconMap.set(descriptor.name,descriptor));setTimeout((()=>{this.groupedIcons=Array.from(iconMap.values())}),1e3)}};ManyPictogramsDemo.ctorParameters=()=>[{type:icon.C6}],ManyPictogramsDemo=(0,tslib_es6.gn)([(0,core.Component)({selector:"app-demo-many-pictograms",template:'\n\t\t<div cdsGrid>\n\t\t\t<div cdsRow>\n\t\t\t\t<div cdsCol [columnNumbers]="{\'xl\': 4, \'lg\': 4, \'md\': 4, \'sm\': 2}" *ngFor="let icon of groupedIcons" class="pictogram">\n\t\t\t\t\t<svg [cdsIcon]="icon.name" size="64"></svg>\n\t\t\t\t\t<div>name: <code>{{icon.name}}</code></div>\n\t\t\t\t\t<div>size: <code>64</code></div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t',styles:["\n\t\t\t.pictogram {\n\t\t\t\tpadding: 1rem 0;\n\t\t\t}\n\t\t"]})],ManyPictogramsDemo);const icon_stories={title:"Components/Icon",decorators:[(0,dist.moduleMetadata)({declarations:[IconDemo,ManyIconDemo,ManyPictogramsDemo],imports:[icon.QX,grid.zE]})],component:icon.ar},Basic=(args=>({props:args,template:'\n \x3c!-- app-* components are for demo purposes only.\n You can create your own implementation by using the component source found at:\n https://github.com/IBM/carbon-components-angular/tree/master/src/icon/stories/icon-demo.component.ts --\x3e\n <app-demo-icon></app-demo-icon>\n <svg cdsIcon="accessibility" size="16" title="Hello!"></svg>\n '})).bind({}),RootElement=(args=>({props:args,template:'\n \x3c!--\n app-* components are for demo purposes only.\n You can create your own implementation by using the component source found at:\n https://github.com/IBM/carbon-components-angular/tree/master/src/icon/stories/many-icons-demo.component.ts\n --\x3e\n <app-demo-icon></app-demo-icon>\n <div cdsIcon="accessibility" size="16"></div>\n '})).bind({});RootElement.storyName="Non-svg root element";const AllIcon=(args=>({props:args,template:"\n \x3c!--\n app-* components are for demo purposes only.\n You can create your own implementation by using the component source as an example.\n --\x3e\n <app-demo-many-icon></app-demo-many-icon>\n "})).bind({}),AllPictograms=(args=>({props:args,template:"\n \x3c!--\n app-* components are for demo purposes only.\n You can create your own implementation by using the component source found at:\n https://github.com/IBM/carbon-components-angular/tree/master/src/icon/stories/pictograms-demo.component.ts\n --\x3e\n <app-demo-many-pictograms></app-demo-many-pictograms>\n "})).bind({});Basic.parameters={...Basic.parameters,docs:{...Basic.parameters?.docs,source:{originalSource:'args => ({\n props: args,\n template: `\n \x3c!-- app-* components are for demo purposes only.\n You can create your own implementation by using the component source found at:\n https://github.com/IBM/carbon-components-angular/tree/master/src/icon/stories/icon-demo.component.ts --\x3e\n <app-demo-icon></app-demo-icon>\n <svg cdsIcon="accessibility" size="16" title="Hello!"></svg>\n `\n})',...Basic.parameters?.docs?.source}}},RootElement.parameters={...RootElement.parameters,docs:{...RootElement.parameters?.docs,source:{originalSource:'args => ({\n props: args,\n template: `\n \x3c!--\n app-* components are for demo purposes only.\n You can create your own implementation by using the component source found at:\n https://github.com/IBM/carbon-components-angular/tree/master/src/icon/stories/many-icons-demo.component.ts\n --\x3e\n <app-demo-icon></app-demo-icon>\n <div cdsIcon="accessibility" size="16"></div>\n `\n})',...RootElement.parameters?.docs?.source}}},AllIcon.parameters={...AllIcon.parameters,docs:{...AllIcon.parameters?.docs,source:{originalSource:"args => ({\n props: args,\n template: `\n \x3c!--\n app-* components are for demo purposes only.\n You can create your own implementation by using the component source as an example.\n --\x3e\n <app-demo-many-icon></app-demo-many-icon>\n `\n})",...AllIcon.parameters?.docs?.source}}},AllPictograms.parameters={...AllPictograms.parameters,docs:{...AllPictograms.parameters?.docs,source:{originalSource:"args => ({\n props: args,\n template: `\n \x3c!--\n app-* components are for demo purposes only.\n You can create your own implementation by using the component source found at:\n https://github.com/IBM/carbon-components-angular/tree/master/src/icon/stories/pictograms-demo.component.ts\n --\x3e\n <app-demo-many-pictograms></app-demo-many-pictograms>\n `\n})",...AllPictograms.parameters?.docs?.source}}};const __namedExportsOrder=["Basic","RootElement","AllIcon","AllPictograms"]}}]);