@infineon/infineon-design-system-stencil 35.3.0--canary.1921.6cb0ad58d7bcdabf5ce7bd69b53b66521fe50a8d.0 → 35.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (109) hide show
  1. package/dist/cjs/{icons-31ab853f.js → icons-2cd72a7d.js} +401 -401
  2. package/dist/cjs/{icons-31ab853f.js.map → icons-2cd72a7d.js.map} +1 -1
  3. package/dist/cjs/ifx-accordion_2.cjs.entry.js +25 -25
  4. package/dist/cjs/ifx-accordion_2.cjs.entry.js.map +1 -1
  5. package/dist/cjs/ifx-icon.cjs.entry.js +7 -4
  6. package/dist/cjs/ifx-icon.cjs.entry.js.map +1 -1
  7. package/dist/cjs/ifx-icons-preview.cjs.entry.js +1 -1
  8. package/dist/collection/components/accordion/accordionItem.css +4 -0
  9. package/dist/collection/components/accordion/accordionItem.js +24 -24
  10. package/dist/collection/components/accordion/accordionItem.js.map +1 -1
  11. package/dist/collection/components/icon/infineonIconStencil.js +6 -3
  12. package/dist/collection/components/icon/infineonIconStencil.js.map +1 -1
  13. package/dist/components/ifx-accordion-item.js +1 -1
  14. package/dist/components/ifx-alert.js +1 -1
  15. package/dist/components/ifx-breadcrumb-item-label.js +1 -1
  16. package/dist/components/ifx-checkbox-group.js +1 -1
  17. package/dist/components/ifx-checkbox.js +1 -1
  18. package/dist/components/ifx-chip-item.js +1 -1
  19. package/dist/components/ifx-chip.js +1 -1
  20. package/dist/components/ifx-date-picker.js +1 -1
  21. package/dist/components/ifx-dropdown-item.js +1 -1
  22. package/dist/components/ifx-dropdown-trigger-button.js +1 -1
  23. package/dist/components/ifx-faq.js +2 -2
  24. package/dist/components/ifx-file-upload.js +2 -2
  25. package/dist/components/ifx-filter-accordion.js +1 -1
  26. package/dist/components/ifx-filter-bar.js +1 -1
  27. package/dist/components/ifx-filter-search.js +2 -2
  28. package/dist/components/ifx-icon-button.js +1 -1
  29. package/dist/components/ifx-icon.js +1 -1
  30. package/dist/components/ifx-icons-preview.js +3 -3
  31. package/dist/components/ifx-list-entry.js +2 -2
  32. package/dist/components/ifx-list.js +1 -1
  33. package/dist/components/ifx-modal.js +2 -2
  34. package/dist/components/ifx-multiselect.js +1 -1
  35. package/dist/components/ifx-navbar-item.js +1 -1
  36. package/dist/components/ifx-navbar.js +1 -1
  37. package/dist/components/ifx-notification.js +1 -1
  38. package/dist/components/ifx-overview-table.js +1 -1
  39. package/dist/components/ifx-pagination.js +1 -1
  40. package/dist/components/ifx-radio-button-group.js +1 -1
  41. package/dist/components/ifx-search-bar.js +2 -2
  42. package/dist/components/ifx-search-field.js +1 -1
  43. package/dist/components/ifx-segment.js +1 -1
  44. package/dist/components/ifx-segmented-control.js +1 -1
  45. package/dist/components/ifx-select.js +1 -1
  46. package/dist/components/ifx-set-filter.js +5 -5
  47. package/dist/components/ifx-sidebar-item.js +1 -1
  48. package/dist/components/ifx-slider.js +1 -1
  49. package/dist/components/ifx-step.js +1 -1
  50. package/dist/components/ifx-table.js +7 -7
  51. package/dist/components/ifx-tabs.js +1 -1
  52. package/dist/components/ifx-tag.js +1 -1
  53. package/dist/components/ifx-template.js +1 -1
  54. package/dist/components/ifx-templates-ui.js +5 -5
  55. package/dist/components/ifx-text-field.js +1 -1
  56. package/dist/components/ifx-tooltip.js +1 -1
  57. package/dist/components/ifx-tree-view-item.js +2 -2
  58. package/dist/components/{p-9aa64d29.js → p-12e75dad.js} +407 -404
  59. package/dist/components/p-12e75dad.js.map +1 -0
  60. package/dist/components/{p-f9edbcf3.js → p-1d3c54d6.js} +3 -3
  61. package/dist/components/{p-f9edbcf3.js.map → p-1d3c54d6.js.map} +1 -1
  62. package/dist/components/{p-04049ea6.js → p-20d6a006.js} +2 -2
  63. package/dist/components/{p-04049ea6.js.map → p-20d6a006.js.map} +1 -1
  64. package/dist/components/{p-a5788f03.js → p-2a500ed7.js} +3 -3
  65. package/dist/components/{p-a5788f03.js.map → p-2a500ed7.js.map} +1 -1
  66. package/dist/components/p-4cf462ca.js +119 -0
  67. package/dist/components/p-4cf462ca.js.map +1 -0
  68. package/dist/components/{p-adba7a0a.js → p-6c0ec65a.js} +2 -2
  69. package/dist/components/{p-adba7a0a.js.map → p-6c0ec65a.js.map} +1 -1
  70. package/dist/components/{p-c0cbd87d.js → p-8b5129e0.js} +2 -2
  71. package/dist/components/{p-c0cbd87d.js.map → p-8b5129e0.js.map} +1 -1
  72. package/dist/components/{p-167888ae.js → p-954808e0.js} +4 -4
  73. package/dist/components/{p-167888ae.js.map → p-954808e0.js.map} +1 -1
  74. package/dist/components/{p-683180dc.js → p-b22e6b22.js} +2 -2
  75. package/dist/components/{p-683180dc.js.map → p-b22e6b22.js.map} +1 -1
  76. package/dist/components/{p-439f73d9.js → p-b6b0d09b.js} +2 -2
  77. package/dist/components/{p-439f73d9.js.map → p-b6b0d09b.js.map} +1 -1
  78. package/dist/components/{p-8be9bf0f.js → p-c6dfc658.js} +2 -2
  79. package/dist/components/{p-8be9bf0f.js.map → p-c6dfc658.js.map} +1 -1
  80. package/dist/components/{p-146fb9c8.js → p-de94e49a.js} +3 -3
  81. package/dist/components/{p-146fb9c8.js.map → p-de94e49a.js.map} +1 -1
  82. package/dist/components/{p-9b0e0f3a.js → p-f0693b44.js} +2 -2
  83. package/dist/components/{p-9b0e0f3a.js.map → p-f0693b44.js.map} +1 -1
  84. package/dist/components/{p-ebea4e5c.js → p-f2f58eb1.js} +2 -2
  85. package/dist/components/{p-ebea4e5c.js.map → p-f2f58eb1.js.map} +1 -1
  86. package/dist/esm/{icons-845f859e.js → icons-75858876.js} +401 -401
  87. package/dist/esm/{icons-845f859e.js.map → icons-75858876.js.map} +1 -1
  88. package/dist/esm/ifx-accordion_2.entry.js +25 -25
  89. package/dist/esm/ifx-accordion_2.entry.js.map +1 -1
  90. package/dist/esm/ifx-icon.entry.js +7 -4
  91. package/dist/esm/ifx-icon.entry.js.map +1 -1
  92. package/dist/esm/ifx-icons-preview.entry.js +1 -1
  93. package/dist/infineon-design-system-stencil/infineon-design-system-stencil.esm.js +1 -1
  94. package/dist/infineon-design-system-stencil/{p-1e2705c8.js → p-4d96fed0.js} +2 -2
  95. package/dist/infineon-design-system-stencil/{p-1e2705c8.js.map → p-4d96fed0.js.map} +1 -1
  96. package/dist/infineon-design-system-stencil/{p-edd379d7.entry.js → p-74bee1c8.entry.js} +2 -2
  97. package/dist/infineon-design-system-stencil/p-74bee1c8.entry.js.map +1 -0
  98. package/dist/infineon-design-system-stencil/p-a356a82d.entry.js +2 -0
  99. package/dist/infineon-design-system-stencil/p-a356a82d.entry.js.map +1 -0
  100. package/dist/infineon-design-system-stencil/{p-54a2b0d7.entry.js → p-aaf08082.entry.js} +2 -2
  101. package/dist/types/components/accordion/accordionItem.d.ts +1 -2
  102. package/package.json +2 -2
  103. package/dist/components/p-4231b505.js +0 -119
  104. package/dist/components/p-4231b505.js.map +0 -1
  105. package/dist/components/p-9aa64d29.js.map +0 -1
  106. package/dist/infineon-design-system-stencil/p-0d3e5a0d.entry.js +0 -2
  107. package/dist/infineon-design-system-stencil/p-0d3e5a0d.entry.js.map +0 -1
  108. package/dist/infineon-design-system-stencil/p-edd379d7.entry.js.map +0 -1
  109. /package/dist/infineon-design-system-stencil/{p-54a2b0d7.entry.js.map → p-aaf08082.entry.js.map} +0 -0
@@ -1,2 +0,0 @@
1
- import{r as i,h as o,g as t,c as e}from"./p-b7a462e5.js";const n=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}:host{display:block}.accordion-wrapper{display:flex;flex-direction:column;gap:8px;font-family:var(--ifx-font-family)}';const s=n;const a=class{constructor(o){i(this,o);this.autoCollapse=false}async onItemOpen(i){if(this.autoCollapse){const o=Array.from(this.el.querySelectorAll("ifx-accordion-item"));for(const t of o){const o=t;if(o!==i.target&&await o.open){o.open=false}}}}render(){return o("div",{key:"663e6aac2f3002d3898856b854dbfd96d9519a68",class:"accordion-wrapper"},o("slot",{key:"0f54044bc1e0d2860ccd3096ee2711eb0a1cb927"}))}static get delegatesFocus(){return true}get el(){return t(this)}};a.style=s;const c=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}.accordion-item{border-radius:3px;transition:all 0.3s;font-family:var(--ifx-font-family)}.accordion-title:focus{outline:none}.accordion-title:focus::after{content:"";display:block;position:absolute;top:-4px;bottom:-4px;left:-4px;right:-4px;border-radius:5px;border:2px solid #0A8276;box-sizing:border-box}.accordion-title:hover{border:1px solid #EEEDED;color:#08665C}.accordion-title{display:flex;align-items:center;position:relative;padding:12px 16px;gap:12px;color:#0A8276;background-color:#FFFFFF;border:1px solid #EEEDED;cursor:pointer;margin:4px}.accordion-caption{font-weight:600;font-size:1.125rem}.accordion-content{gap:8px;line-height:24px;font-size:1rem;font-weight:400}.inner-content{background-color:#FFFFFF;padding:24px;word-wrap:break-word;overflow-wrap:anywhere;align-self:stretch;}.accordion-icon{font-weight:bold;display:flex;transition:transform 0.3s}.accordion-icon:hover{color:#08665C}.accordion-item.open .accordion-icon{transform:rotate(-180deg)}';const r=c;const d=class{constructor(o){i(this,o);this.ifxOpen=e(this,"ifxOpen",7);this.ifxClose=e(this,"ifxClose",7);this.open=false;this.AriaLevel=3;this.internalOpen=false}componentWillLoad(){this.internalOpen=this.open}componentDidLoad(){this.openAccordionItem();this.contentEl=this.el.shadowRoot.querySelector("#accordion-content");if(this.contentEl){this.attachResizeObserver()}}componentDidUpdate(){this.openAccordionItem()}openChanged(i){this.internalOpen=i}toggleOpen(){this.internalOpen=!this.internalOpen;this.open=this.internalOpen;if(this.internalOpen){this.ifxOpen.emit({isOpen:this.internalOpen})}else{this.ifxClose.emit({isClosed:!this.internalOpen})}}openAccordionItem(){if(this.contentEl){if(this.internalOpen){this.contentEl.style.height="auto";const i=this.contentEl.scrollHeight;this.contentEl.style.height=`${i}px`;this.contentEl.style.overflow="visible"}else{this.contentEl.style.height="0";this.contentEl.style.overflow="hidden"}}}attachResizeObserver(){const i=this.el.shadowRoot.querySelector(".inner-content");if(i){this.resizeObserver=new ResizeObserver((()=>{if(this.internalOpen){this.openAccordionItem()}}));this.resizeObserver.observe(i)}}handleKeydown(i){const o=i.composedPath();if(!o.includes(this.titleEl)){return}switch(i.key){case"Enter":case" ":i.preventDefault();this.toggleOpen();break}}render(){return o("div",{key:"6f314f7ff18566be1de5fb8c169405df296ba346",class:`accordion-item ${this.internalOpen?"open":""}`},o("div",{key:"0c20697cd02a7af28f481c7104a6b100ad478081",role:"button","aria-expanded":this.internalOpen,"aria-controls":"accordion-content",class:"accordion-title",onClick:()=>this.toggleOpen(),tabindex:"0",ref:i=>this.titleEl=i},o("span",{key:"d41d3016e5f967f361dea497486673d786ba3d83","aria-hidden":"true",role:"heading","aria-level":String(this.AriaLevel),class:"accordion-icon"},o("ifx-icon",{key:"27308dfb2a2cd73303705521a41f706482cb8da3",icon:"chevron-down-16"})),o("span",{key:"c71749876b23310d9d9037552dcb4800f3b16d13",id:"accordion-caption",class:"accordion-caption"},this.caption)),o("div",{key:"23d3f2ee657ff35edd3d341e883aadb6d1858c79",id:"accordion-content",class:"accordion-content",ref:i=>this.contentEl=i,role:"region","aria-labelledby":"accordion-caption"},o("div",{key:"3716d880d2c26471e515ba60a0b1227758130a09",class:"inner-content"},o("slot",{key:"0ae80ac1d41934a1e3a84e3d3a8bdc97b5cf1e2c"}))))}get el(){return t(this)}static get watchers(){return{open:["openChanged"]}}};d.style=r;export{a as ifx_accordion,d as ifx_accordion_item};
2
- //# sourceMappingURL=p-0d3e5a0d.entry.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["accordionCss","IfxAccordionStyle0","Accordion","constructor","hostRef","this","autoCollapse","onItemOpen","event","items","Array","from","el","querySelectorAll","item","itemElement","target","open","render","h","key","class","accordionItemCss","IfxAccordionItemStyle0","IfxAccordionItem","AriaLevel","internalOpen","componentWillLoad","componentDidLoad","openAccordionItem","contentEl","shadowRoot","querySelector","attachResizeObserver","componentDidUpdate","openChanged","newValue","toggleOpen","ifxOpen","emit","isOpen","ifxClose","isClosed","style","height","updatedHeight","scrollHeight","overflow","innerContentEl","resizeObserver","ResizeObserver","observe","handleKeydown","ev","path","composedPath","includes","titleEl","preventDefault","role","onClick","tabindex","ref","String","icon","id","caption"],"sources":["src/components/accordion/accordion.scss?tag=ifx-accordion&encapsulation=shadow","src/components/accordion/accordion.tsx","src/components/accordion/accordionItem.scss?tag=ifx-accordion-item&encapsulation=shadow","src/components/accordion/accordionItem.tsx"],"sourcesContent":["// ifxAccordion.scss\n@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n display: block;\n}\n\n.accordion-wrapper {\n display: flex;\n flex-direction: column;\n gap: tokens.$ifxSpace100;\n font-family: var(--ifx-font-family) // tokens.$ifxFontFamilyBody;\n}","//ifxAccordion.tsx\nimport { Component, h, Listen, Element, Prop } from '@stencil/core';\n\n@Component({\n tag: 'ifx-accordion',\n styleUrl: 'accordion.scss',\n shadow: { delegatesFocus: true },\n})\nexport class Accordion {\n @Element() el: HTMLElement;\n @Prop() autoCollapse: boolean = false;\n\n\n @Listen('ifxOpen')\n async onItemOpen(event: CustomEvent) {\n if (this.autoCollapse) {\n const items = Array.from(this.el.querySelectorAll('ifx-accordion-item'));\n for (const item of items) {\n const itemElement = item as HTMLIfxAccordionItemElement;\n if (itemElement !== event.target && (await itemElement.open)) {\n itemElement.open = false;\n }\n }\n }\n }\n\n render() {\n return (\n <div class=\"accordion-wrapper\">\n <slot />\n </div>\n );\n }\n}\n","// ifxAccordionItem.scss\n@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n\n.accordion-item {\n border-radius: 3px;\n transition: all 0.3s;\n font-family: var(--ifx-font-family) // tokens.$ifxFontFamilyBody;\n\n}\n\n.accordion-title:focus {\n outline: none;\n}\n\n// workaround to add corner radius to outline\n.accordion-title:focus::after {\n content: '';\n display: block;\n position: absolute;\n top: -4px;\n bottom: -4px;\n left: -4px;\n right: -4px;\n border-radius: 5px;\n border: 2px solid tokens.$ifxColorOcean500;\n box-sizing: border-box;\n}\n\n.accordion-title:hover {\n border: 1px solid tokens.$ifxColorEngineering200;\n color: tokens.$ifxColorOcean600;\n}\n\n.accordion-title {\n display: flex;\n align-items: center;\n position: relative;\n padding: tokens.$ifxSpace150 tokens.$ifxSpace200;\n gap: tokens.$ifxSpace150;\n color: tokens.$ifxColorOcean500;\n background-color: tokens.$ifxColorBaseWhite;\n border: 1px solid tokens.$ifxColorEngineering200;\n cursor: pointer;\n margin: 4px;\n}\n\n.accordion-caption {\n font-weight: tokens.$ifxFontWeightSemibold;\n font-size: tokens.$ifxFontSizeL;\n}\n\n.accordion-content {\n gap: tokens.$ifxSpace100;\n //transition: max-height 0.3s ease-in-out;\n line-height: 24px;\n font-size: tokens.$ifxFontSizeM;\n font-weight: 400;\n}\n\n.inner-content {\n background-color: tokens.$ifxColorBaseWhite;\n padding: tokens.$ifxSpace300;\n // white-space: pre-wrap;\n /* wraps text at spaces and within words */\n word-wrap: break-word;\n /* breaks text within a word if necessary */\n overflow-wrap: anywhere;\n align-self: stretch;\n\n /* breaks text at arbitrary points when needed */\n}\n\n.accordion-icon {\n font-weight: bold;\n display: flex;\n transition: transform 0.3s;\n\n &:hover {\n color: tokens.$ifxColorOcean600;\n\n }\n}\n\n\n\n.accordion-item.open .accordion-icon {\n transform: rotate(-180deg);\n}","//ifxAccordionItem\nimport { Component, Prop, h, State, Event, EventEmitter, Watch, Listen, Element } from '@stencil/core';\n\n@Component({\n tag: 'ifx-accordion-item',\n styleUrl: 'accordionItem.scss',\n shadow: true,\n})\nexport class IfxAccordionItem {\n @Element() el;\n @Prop() caption: string;\n @Prop({\n mutable: true,\n }) open: boolean = false;\n @Prop() AriaLevel = 3;\n @State() internalOpen: boolean = false;\n @Event() ifxOpen: EventEmitter;\n @Event() ifxClose: EventEmitter;\n private contentEl!: HTMLElement;\n private titleEl!: HTMLElement;\n private resizeObserver!: ResizeObserver;\n\n componentWillLoad() {\n this.internalOpen = this.open;\n }\n\n componentDidLoad() {\n this.openAccordionItem()\n\n this.contentEl = this.el.shadowRoot.querySelector('#accordion-content');\n if (this.contentEl) {\n this.attachResizeObserver();\n }\n }\n\n componentDidUpdate() {\n this.openAccordionItem()\n }\n\n @Watch('open')\n openChanged(newValue: boolean) {\n this.internalOpen = newValue;\n }\n\n toggleOpen() {\n this.internalOpen = !this.internalOpen;\n this.open = this.internalOpen;\n\n if (this.internalOpen) {\n this.ifxOpen.emit({ isOpen: this.internalOpen });\n } else {\n this.ifxClose.emit({ isClosed: !this.internalOpen });\n }\n }\n\n openAccordionItem() {\n if (this.contentEl) {\n if (this.internalOpen) {\n this.contentEl.style.height = 'auto'; \n const updatedHeight = this.contentEl.scrollHeight; \n this.contentEl.style.height = `${updatedHeight}px`; \n this.contentEl.style.overflow = 'visible';\n } else {\n this.contentEl.style.height = '0';\n this.contentEl.style.overflow = 'hidden';\n }\n }\n }\n\n attachResizeObserver() { \n const innerContentEl = this.el.shadowRoot.querySelector('.inner-content');\n\n if (innerContentEl) {\n this.resizeObserver = new ResizeObserver(() => {\n if (this.internalOpen) {\n this.openAccordionItem();\n }\n });\n\n this.resizeObserver.observe(innerContentEl); \n }\n }\n\n @Listen('keydown')\n handleKeydown(ev: KeyboardEvent) {\n const path = ev.composedPath();\n\n if(!path.includes(this.titleEl)) { \n return;\n }\n\n switch (ev.key) {\n case 'Enter': // fallthrough\n case ' ': // space\n ev.preventDefault();\n this.toggleOpen();\n break;\n }\n }\n\n\n render() {\n return (\n <div class={`accordion-item ${this.internalOpen ? 'open' : ''}`}>\n <div role=\"button\" aria-expanded={this.internalOpen} aria-controls=\"accordion-content\" class=\"accordion-title\" onClick={() => this.toggleOpen()} tabindex='0' ref={(el) => (this.titleEl = el as HTMLElement)}>\n <span aria-hidden=\"true\" role=\"heading\" aria-level={String(this.AriaLevel) as string} class=\"accordion-icon\">\n <ifx-icon icon=\"chevron-down-16\"/>\n </span>\n <span id=\"accordion-caption\" class=\"accordion-caption\">{this.caption}</span>\n </div>\n <div id=\"accordion-content\" class=\"accordion-content\" ref={(el) => (this.contentEl = el as HTMLElement)} role=\"region\" aria-labelledby=\"accordion-caption\">\n <div class=\"inner-content\">\n <slot />\n </div>\n </div>\n </div>\n );\n }\n}"],"mappings":"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","ignoreList":[]}
@@ -1 +0,0 @@
1
- {"version":3,"names":["infineonIconStencilCss","IfxIconStyle0","InfineonIconStencil","constructor","hostRef","this","icon","updateIcon","newIcon","internalIcon","setIcon","convertStringToHtml","htmlString","div","document","createElement","innerHTML","firstChild","convertHtmlToObject","htmlElement","pathToObject","Array","from","attributes","name","value","reduce","acc","current","convertPathsToVnode","htmlPath","svgPaths","parentPath","parentPathToVnode","h","push","paths","querySelectorAll","pathLength","length","i","objToVnode","getSVG","svgPath","ifxIcon","width","getAttribute","height","fill","viewBox","class","xmlns","constructIcon","SVG","console","error","consoleError","emit","removeHyphen","str","toLowerCase","replace","_m","chr","getIcon","componentWillLoad","render","Host","key"],"sources":["src/components/icon/infineonIconStencil.scss?tag=ifx-icon","src/components/icon/infineonIconStencil.tsx"],"sourcesContent":["ifx-icon {\n display: inline-flex;\n justify-content: center;\n\n &:empty {\n display: none;\n }\n}","import { Component, Prop, h, Host, Event, EventEmitter, Watch, State } from '@stencil/core';\nimport { getIcon } from '@infineon/infineon-icons'\n \n\n\n@Component({\n tag: 'ifx-icon',\n styleUrl: './infineonIconStencil.scss'\n})\n\nexport class InfineonIconStencil {\n @Prop({ mutable: true }) icon: string = \"\"\n @Prop({ mutable: true }) ifxIcon: any;\n @State() internalIcon: string;\n @Event() consoleError: EventEmitter<boolean>;\n\n @Watch('icon')\n updateIcon(newIcon: string) { \n this.internalIcon = newIcon;\n this.setIcon()\n }\n\n convertStringToHtml(htmlString) { \n const div = document.createElement('div')\n div.innerHTML = htmlString\n return div.firstChild\n }\n\n convertHtmlToObject(htmlElement) { \n let pathToObject = Array\n .from(htmlElement.attributes, ({ name, value }) => ({ name, value }))\n .reduce((acc, current) => {\n acc[current.name] = current.value\n return acc\n }, {})\n\n return pathToObject\n }\n\n convertPathsToVnode(htmlPath) { \n let svgPaths = []\n const parentPath = this.convertHtmlToObject(htmlPath);\n const parentPathToVnode = h(\"path\", parentPath);\n svgPaths.push(parentPathToVnode)\n if(htmlPath.firstChild) { \n const paths = htmlPath.querySelectorAll('path');\n const pathLength = htmlPath.querySelectorAll('path').length;\n for(let i = 0; i < pathLength; i++) { \n let pathToObject = this.convertHtmlToObject(paths[i])\n let objToVnode = h(\"path\", pathToObject)\n svgPaths.push(objToVnode)\n } \n }\n return svgPaths\n }\n\n getSVG(svgPath) {\n const htmlPath = this.convertStringToHtml(this.ifxIcon) as SVGElement;\n const width = htmlPath.getAttribute('width');\n const height = htmlPath.getAttribute('height');\n const fill = htmlPath.getAttribute('fill');\n const viewBox = htmlPath.getAttribute('viewBox');\n \n return <svg class=\"inline-svg\" width={width} height={height} xmlns=\"http://www.w3.org/2000/svg\" fill={fill} viewBox={viewBox}>{...svgPath}</svg>\n }\n\n constructIcon() {\n if(this.ifxIcon) {\n const htmlPath = this.convertStringToHtml(this.ifxIcon)\n const svgPath = this.convertPathsToVnode(htmlPath)\n const SVG = this.getSVG(svgPath)\n return SVG;\n } else if(this.icon !== \"\") {\n console.error('Icon not found!')\n this.consoleError.emit(true)\n return;\n } else { \n return;\n }\n }\n\n setIcon() { \n const removeHyphen = (str) => str.toLowerCase().replace(/[^a-zA-Z0-9]+(.)/g, (_m, chr) => chr);\n this.ifxIcon = getIcon(removeHyphen(this.internalIcon));\n }\n\n componentWillLoad() {\n this.internalIcon = this.icon;\n this.setIcon()\n }\n\n render() {\n return (\n <Host>\n {this.constructIcon()}\n </Host>\n );\n }\n}"],"mappings":"6FAAA,MAAMA,EAAyB,mFAC/B,MAAAC,EAAeD,E,MCSFE,EAAmB,MALhC,WAAAC,CAAAC,G,qDAM2BC,KAAAC,KAAe,E,CAMtC,UAAAC,CAAWC,GACTH,KAAKI,aAAeD,EACpBH,KAAKK,S,CAGT,mBAAAC,CAAoBC,GAClB,MAAMC,EAAMC,SAASC,cAAc,OACnCF,EAAIG,UAAYJ,EAChB,OAAOC,EAAII,U,CAGb,mBAAAC,CAAoBC,GAClB,IAAIC,EAAeC,MAChBC,KAAKH,EAAYI,YAAY,EAAGC,OAAMC,YAAO,CAAQD,OAAMC,YAC3DC,QAAO,CAACC,EAAKC,KACZD,EAAIC,EAAQJ,MAAQI,EAAQH,MAC5B,OAAOE,CAAG,GACT,IAEL,OAAOP,C,CAGT,mBAAAS,CAAoBC,GAClB,IAAIC,EAAW,GACf,MAAMC,EAAa3B,KAAKa,oBAAoBY,GAC5C,MAAMG,EAAoBC,EAAE,OAAQF,GACpCD,EAASI,KAAKF,GACd,GAAGH,EAASb,WAAY,CACtB,MAAMmB,EAAQN,EAASO,iBAAiB,QACxC,MAAMC,EAAaR,EAASO,iBAAiB,QAAQE,OACrD,IAAI,IAAIC,EAAI,EAAGA,EAAIF,EAAYE,IAAK,CAClC,IAAIpB,EAAef,KAAKa,oBAAoBkB,EAAMI,IAClD,IAAIC,EAAaP,EAAE,OAAQd,GAC3BW,EAASI,KAAKM,E,EAGlB,OAAOV,C,CAGT,MAAAW,CAAOC,GACL,MAAMb,EAAWzB,KAAKM,oBAAoBN,KAAKuC,SAC/C,MAAMC,EAAQf,EAASgB,aAAa,SACpC,MAAMC,EAASjB,EAASgB,aAAa,UACrC,MAAME,EAAOlB,EAASgB,aAAa,QACnC,MAAMG,EAAUnB,EAASgB,aAAa,WAEtC,OAAOZ,EAAA,OAAKgB,MAAM,aAAaL,MAAOA,EAAOE,OAAQA,EAAQI,MAAM,6BAA6BH,KAAMA,EAAMC,QAASA,MAAaN,E,CAGpI,aAAAS,GACE,GAAG/C,KAAKuC,QAAS,CACf,MAAMd,EAAWzB,KAAKM,oBAAoBN,KAAKuC,SAC/C,MAAMD,EAAUtC,KAAKwB,oBAAoBC,GACzC,MAAMuB,EAAMhD,KAAKqC,OAAOC,GACxB,OAAOU,C,MACF,GAAGhD,KAAKC,OAAS,GAAI,CAC1BgD,QAAQC,MAAM,mBACdlD,KAAKmD,aAAaC,KAAK,MACvB,M,KACM,CACN,M,EAIJ,OAAA/C,GACE,MAAMgD,EAAgBC,GAAQA,EAAIC,cAAcC,QAAQ,qBAAqB,CAACC,EAAIC,IAAQA,IAC1F1D,KAAKuC,QAAUoB,EAAQN,EAAarD,KAAKI,c,CAG3C,iBAAAwD,GACE5D,KAAKI,aAAeJ,KAAKC,KACzBD,KAAKK,S,CAGP,MAAAwD,GACE,OACEhC,EAACiC,EAAI,CAAAC,IAAA,4CACJ/D,KAAK+C,gB","ignoreList":[]}