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

package/dist/infineon-design-system-stencil/p-a356a82d.entry.js

@@ -0,0 +1,2 @@
+import{r as o,h as e,g as i,c as t}from"./p-b7a462e5.js";const a=':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 n=a;const c=class{constructor(e){o(this,e);this.autoCollapse=false}async onItemOpen(o){if(this.autoCollapse){const e=Array.from(this.el.querySelectorAll("ifx-accordion-item"));for(const i of e){const e=i;if(e!==o.target&&await e.open){e.open=false}}}}render(){return e("div",{key:"663e6aac2f3002d3898856b854dbfd96d9519a68",class:"accordion-wrapper"},e("slot",{key:"0f54044bc1e0d2860ccd3096ee2711eb0a1cb927"}))}static get delegatesFocus(){return true}get el(){return i(this)}};c.style=n;const s=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}.accordion-item{border-radius:3px;overflow:hidden;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;max-height:0;overflow:hidden;transition:max-height 0.3s ease-in-out;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=s;const d=class{constructor(e){o(this,e);this.ifxOpen=t(this,"ifxOpen",7);this.ifxClose=t(this,"ifxClose",7);this.open=false;this.AriaLevel=3;this.internalOpen=false}componentWillLoad(){this.internalOpen=this.open}componentDidLoad(){this.openAccordionItem()}componentDidUpdate(){this.openAccordionItem()}openChanged(o){this.internalOpen=o}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.internalOpen){this.contentEl.style.maxHeight=`${this.contentEl.scrollHeight}px`}else{this.contentEl.style.maxHeight="0"}}handleSlotChange(o){const e=o.target;const i=e.assignedNodes();if(i.length>0){i.forEach((o=>{const e=new MutationObserver(((o,e)=>{for(let e of o){if(e.type==="childList"){if(this.internalOpen){this.openAccordionItem()}}}}));e.observe(o,{attributes:true,childList:true,subtree:true})}))}if(this.internalOpen){this.openAccordionItem()}}handleKeydown(o){const e=o.composedPath();if(!e.includes(this.titleEl)){return}switch(o.key){case"Enter":case" ":o.preventDefault();this.toggleOpen();break}}render(){return e("div",{key:"7d6ed35b5c84e3dbfe0cc42f74408ab4655a61d2",class:`accordion-item ${this.internalOpen?"open":""}`},e("div",{key:"19350af96518b086d24cfb653ba8c41ce9a8d4e8",role:"button","aria-expanded":this.internalOpen,"aria-controls":"accordion-content",class:"accordion-title",onClick:()=>this.toggleOpen(),tabindex:"0",ref:o=>this.titleEl=o},e("span",{key:"56d40596ed604a5c24274dbde190802dd000e801","aria-hidden":"true",role:"heading","aria-level":String(this.AriaLevel),class:"accordion-icon"},e("ifx-icon",{key:"c93ace2e23cc1b9d5e50f8ea3e6a4e3b6c65e811",icon:"chevron-down-16"})),e("span",{key:"9ac2410b6c4e9f9918ec7ca7370470c744a2cf6b",id:"accordion-caption",class:"accordion-caption"},this.caption)),e("div",{key:"a8a9058e232dcaae9aaa0ebf43a4f3fba958136a",id:"accordion-content",class:"accordion-content",ref:o=>this.contentEl=o,role:"region","aria-labelledby":"accordion-caption"},e("div",{key:"81c6d61ccae983dae7ffeff557fa7e51fd10ab77",class:"inner-content"},e("slot",{key:"54ddfcf9375576b2118822057f17ddd765e2ca47",onSlotchange:o=>this.handleSlotChange(o)}))))}get el(){return i(this)}static get watchers(){return{open:["openChanged"]}}};d.style=r;export{c as ifx_accordion,d as ifx_accordion_item};
+//# sourceMappingURL=p-a356a82d.entry.js.map

package/dist/infineon-design-system-stencil/p-a356a82d.entry.js.map

@@ -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","componentDidUpdate","openChanged","newValue","toggleOpen","ifxOpen","emit","isOpen","ifxClose","isClosed","contentEl","style","maxHeight","scrollHeight","handleSlotChange","e","slotElement","nodes","assignedNodes","length","forEach","node","observer","MutationObserver","mutationsList","_","mutation","type","observe","attributes","childList","subtree","handleKeydown","ev","path","composedPath","includes","titleEl","preventDefault","role","onClick","tabindex","ref","String","icon","id","caption","onSlotchange"],"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  overflow: hidden;\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  max-height: 0;\n  overflow: hidden;\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\n\n  componentWillLoad() {\n    this.internalOpen = this.open;\n  }\n\n  componentDidLoad() {\n    this.openAccordionItem()\n  }\n\n  componentDidUpdate() {\n    this.openAccordionItem()\n  }\n\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.internalOpen) {\n      this.contentEl.style.maxHeight = `${this.contentEl.scrollHeight}px`;\n    } else {\n      this.contentEl.style.maxHeight = '0';\n    }\n  }\n\n  handleSlotChange(e) {\n    const slotElement = e.target;\n    const nodes = slotElement.assignedNodes();\n    \n    if(nodes.length > 0) {\n      nodes.forEach(node => {\n        const observer = new MutationObserver((mutationsList, _) => {\n          for(let mutation of mutationsList) {\n            if (mutation.type === 'childList') {\n              if (this.internalOpen) {\n                this.openAccordionItem();\n              }\n            }\n          }\n        });\n        observer.observe(node, { attributes: true, childList: true, subtree: true });\n      });\n    }\n\n    if (this.internalOpen) {\n      this.openAccordionItem();\n    }\n  }\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 onSlotchange={(e) => this.handleSlotChange(e)} />\n          </div>\n        </div>\n      </div>\n    );\n  }\n}"],"mappings":"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","ignoreList":[]}

package/dist/infineon-design-system-stencil/{p-54a2b0d7.entry.js → p-aaf08082.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,h as i,g as a}from"./p-b7a462e5.js";import{i as t}from"./p-1e2705c8.js";const n='.container{display:flex;flex-direction:column;gap:10px}.alert__wrapper{margin-bottom:40px}.snippet__wrapper{display:flex;flex-direction:column;gap:5px;position:sticky;top:0;left:0;z-index:99;background-color:white}.html-wrapper{background:rgb(38, 38, 38);padding:20px;color:white;font-family:monospace}.html-wrapper button{position:absolute;right:0px;bottom:0px;background:rgba(0, 0, 0, 0.85);color:#C9CDCF;border:0 none;padding:4px 10px;font-size:0.75rem;font-family:"Nunito Sans";font-weight:700;border-top:1px solid rgba(255, 255, 255, 0.1);border-left:1px solid rgba(255, 255, 255, 0.1);margin-left:-1px;border-radius:4px 0 0 0;cursor:pointer}.html-wrapper .component-name{color:#A8FF60}.html-wrapper .attribute-name{color:rgb(150, 203, 254)}.html-wrapper .attribute-value{color:rgb(180, 116, 221)}.preview__container{box-sizing:border-box;display:flex;align-items:center;padding:2px;flex-wrap:wrap;gap:4px}.preview__container .no-results{width:100%;text-align:center}.preview__container .preview__container-item{display:flex;justify-content:center;align-items:center;border:1px solid #f1f1f1;padding:2px;width:50px;height:50px;position:relative}.preview__container .preview__container-item:active{border-color:#378375}.preview__container .preview__container-item:hover{cursor:pointer}.preview__container .preview__container-item.copied::after{z-index:50;content:"copied!";position:absolute;top:0;left:50px;background-color:#000;color:white;padding:3px;border-radius:4px}';const o=n;const c=class{constructor(i){e(this,i);this.iconsArray=[];this.isCopied=false;this.copiedIcon=null;this.htmlTag='<ifx-icon icon="calendar-16"></ifx-icon>';this.iconName=`""`;this.searchTerm=""}handleCopiedText(){this.isCopied=true;setTimeout((()=>{this.isCopied=false}),2e3)}copyIconText(e){this.htmlTag=`<ifx-icon icon="${e}"></ifx-icon>`;this.iconName=`"${e}"`;this.copiedIcon=e}copyHtmlString(){const e=`<ifx-icon icon=${this.iconName}></ifx-icon>`;navigator.clipboard.writeText(e);this.handleCopiedText()}get filteredIcons(){const e=this.searchTerm.toLowerCase().trim();if(!e)return this.iconsArray;return this.iconsArray.filter((i=>i.toLowerCase().includes(e)))}getIconIndex(e){return this.iconsArray.indexOf(e)}handleIconFilter(){const e=this.el.shadowRoot.querySelector("#search__field");e.addEventListener("ifxInput",(e=>{this.searchTerm=e.detail}))}componentWillLoad(){this.iconsArray=Object.keys(t)}componentDidLoad(){this.handleIconFilter()}render(){return i("div",{key:"7b9c4b5b3212cdae77e4522bd573939b1bc32e62",class:"container"},i("div",{key:"8e4047341dd331f402a2ce249b6bd68b7fe398d5",class:"alert__wrapper"},i("ifx-notification",{key:"42e17eefa571360711ea0aca45d57dae6a5b70a6",icon:"c-check-16",variant:"neutral","link-text":"Figma icon library","link-href":"https://www.figma.com/design/yWwaLoqsWLWygDxXfvdym9/Infineon-DDS-%7C-UI-icon-library?node-id=13284-1289&p=f&t=SD6EdmXaSufsjPCv-0","link-target":"_blank"},"You can also find the UI icons in Figma for use in mockups.")),i("div",{key:"ecd1f37f5edb25b913157626ba674f10c2a00026",class:"snippet__wrapper"},i("div",{key:"58f5fd04a7fef398ba47d71c23c74515c5461337",class:"search__wrapper"},i("ifx-search-field",{key:"76802675d5c01562a0f7d69f8d3bd3df15c2944b",id:"search__field",size:"m","show-delete-icon":"true",value:"",autocomplete:"on",placeholder:"Search icon"})),i("div",{key:"2160ef2e64b86140232aa6566db2f153d724b107",class:"html-wrapper"},i("span",{key:"810aa571906d82fbe93d631322bec4ed08b956d4",class:"html-tag"},"<"),i("span",{key:"2aeeb86927938a7b2a3d9f5fb2ef57f0aa925eaa",class:"component-name"},"ifx-icon"),i("span",{key:"de18997563df168af3e976b1ad81d205cd2a850a",class:"attribute-name"}," icon"),"=",i("span",{key:"a93dfbec210940b2d9b2c1dd349a727e5f7185ce",class:"attribute-value"},this.iconName),i("span",{key:"b2900ea9e7099ab4fcb890d6df05cab4d6109c55",class:"html-tag"},">"),i("span",{key:"fee18bd1c39103e29ec84bc115b1719c11a66849",class:"html-tag"},"</"),i("span",{key:"57c6db27a4156d0ad50c20d691138817db80ba18",class:"component-name"},"ifx-icon"),i("span",{key:"395b55e085cb49a133beaca0bf79338662c0905b",class:"html-tag"},">"),i("button",{key:"a6c81538ec62f435c06460e8822aa1784ec06138",onClick:()=>this.copyHtmlString()},this.isCopied?"Copied":"Copy"))),i("div",{key:"dcac1dacdfc1f4d0cdeeabbe908b2b71bc79334e",class:"preview__container"},this.filteredIcons.map((e=>i("div",{key:e,class:`preview__container-item ${this.isCopied&&this.copiedIcon===e?"copied":""}`,onClick:()=>this.copyIconText(e)},i("ifx-icon",{icon:e})))),this.filteredIcons.length===0&&i("div",{key:"128cee79fdfa10ea937e704b1a48ae83485c0c1f",class:"no-results"},'No icons found matching "',this.searchTerm,'"')))}get el(){return a(this)}};c.style=o;export{c as ifx_icons_preview};
-//# sourceMappingURL=p-54a2b0d7.entry.js.map
+import{r as e,h as i,g as a}from"./p-b7a462e5.js";import{i as t}from"./p-4d96fed0.js";const n='.container{display:flex;flex-direction:column;gap:10px}.alert__wrapper{margin-bottom:40px}.snippet__wrapper{display:flex;flex-direction:column;gap:5px;position:sticky;top:0;left:0;z-index:99;background-color:white}.html-wrapper{background:rgb(38, 38, 38);padding:20px;color:white;font-family:monospace}.html-wrapper button{position:absolute;right:0px;bottom:0px;background:rgba(0, 0, 0, 0.85);color:#C9CDCF;border:0 none;padding:4px 10px;font-size:0.75rem;font-family:"Nunito Sans";font-weight:700;border-top:1px solid rgba(255, 255, 255, 0.1);border-left:1px solid rgba(255, 255, 255, 0.1);margin-left:-1px;border-radius:4px 0 0 0;cursor:pointer}.html-wrapper .component-name{color:#A8FF60}.html-wrapper .attribute-name{color:rgb(150, 203, 254)}.html-wrapper .attribute-value{color:rgb(180, 116, 221)}.preview__container{box-sizing:border-box;display:flex;align-items:center;padding:2px;flex-wrap:wrap;gap:4px}.preview__container .no-results{width:100%;text-align:center}.preview__container .preview__container-item{display:flex;justify-content:center;align-items:center;border:1px solid #f1f1f1;padding:2px;width:50px;height:50px;position:relative}.preview__container .preview__container-item:active{border-color:#378375}.preview__container .preview__container-item:hover{cursor:pointer}.preview__container .preview__container-item.copied::after{z-index:50;content:"copied!";position:absolute;top:0;left:50px;background-color:#000;color:white;padding:3px;border-radius:4px}';const o=n;const c=class{constructor(i){e(this,i);this.iconsArray=[];this.isCopied=false;this.copiedIcon=null;this.htmlTag='<ifx-icon icon="calendar-16"></ifx-icon>';this.iconName=`""`;this.searchTerm=""}handleCopiedText(){this.isCopied=true;setTimeout((()=>{this.isCopied=false}),2e3)}copyIconText(e){this.htmlTag=`<ifx-icon icon="${e}"></ifx-icon>`;this.iconName=`"${e}"`;this.copiedIcon=e}copyHtmlString(){const e=`<ifx-icon icon=${this.iconName}></ifx-icon>`;navigator.clipboard.writeText(e);this.handleCopiedText()}get filteredIcons(){const e=this.searchTerm.toLowerCase().trim();if(!e)return this.iconsArray;return this.iconsArray.filter((i=>i.toLowerCase().includes(e)))}getIconIndex(e){return this.iconsArray.indexOf(e)}handleIconFilter(){const e=this.el.shadowRoot.querySelector("#search__field");e.addEventListener("ifxInput",(e=>{this.searchTerm=e.detail}))}componentWillLoad(){this.iconsArray=Object.keys(t)}componentDidLoad(){this.handleIconFilter()}render(){return i("div",{key:"7b9c4b5b3212cdae77e4522bd573939b1bc32e62",class:"container"},i("div",{key:"8e4047341dd331f402a2ce249b6bd68b7fe398d5",class:"alert__wrapper"},i("ifx-notification",{key:"42e17eefa571360711ea0aca45d57dae6a5b70a6",icon:"c-check-16",variant:"neutral","link-text":"Figma icon library","link-href":"https://www.figma.com/design/yWwaLoqsWLWygDxXfvdym9/Infineon-DDS-%7C-UI-icon-library?node-id=13284-1289&p=f&t=SD6EdmXaSufsjPCv-0","link-target":"_blank"},"You can also find the UI icons in Figma for use in mockups.")),i("div",{key:"ecd1f37f5edb25b913157626ba674f10c2a00026",class:"snippet__wrapper"},i("div",{key:"58f5fd04a7fef398ba47d71c23c74515c5461337",class:"search__wrapper"},i("ifx-search-field",{key:"76802675d5c01562a0f7d69f8d3bd3df15c2944b",id:"search__field",size:"m","show-delete-icon":"true",value:"",autocomplete:"on",placeholder:"Search icon"})),i("div",{key:"2160ef2e64b86140232aa6566db2f153d724b107",class:"html-wrapper"},i("span",{key:"810aa571906d82fbe93d631322bec4ed08b956d4",class:"html-tag"},"<"),i("span",{key:"2aeeb86927938a7b2a3d9f5fb2ef57f0aa925eaa",class:"component-name"},"ifx-icon"),i("span",{key:"de18997563df168af3e976b1ad81d205cd2a850a",class:"attribute-name"}," icon"),"=",i("span",{key:"a93dfbec210940b2d9b2c1dd349a727e5f7185ce",class:"attribute-value"},this.iconName),i("span",{key:"b2900ea9e7099ab4fcb890d6df05cab4d6109c55",class:"html-tag"},">"),i("span",{key:"fee18bd1c39103e29ec84bc115b1719c11a66849",class:"html-tag"},"</"),i("span",{key:"57c6db27a4156d0ad50c20d691138817db80ba18",class:"component-name"},"ifx-icon"),i("span",{key:"395b55e085cb49a133beaca0bf79338662c0905b",class:"html-tag"},">"),i("button",{key:"a6c81538ec62f435c06460e8822aa1784ec06138",onClick:()=>this.copyHtmlString()},this.isCopied?"Copied":"Copy"))),i("div",{key:"dcac1dacdfc1f4d0cdeeabbe908b2b71bc79334e",class:"preview__container"},this.filteredIcons.map((e=>i("div",{key:e,class:`preview__container-item ${this.isCopied&&this.copiedIcon===e?"copied":""}`,onClick:()=>this.copyIconText(e)},i("ifx-icon",{icon:e})))),this.filteredIcons.length===0&&i("div",{key:"128cee79fdfa10ea937e704b1a48ae83485c0c1f",class:"no-results"},'No icons found matching "',this.searchTerm,'"')))}get el(){return a(this)}};c.style=o;export{c as ifx_icons_preview};
+//# sourceMappingURL=p-aaf08082.entry.js.map

package/dist/infineon-design-system-stencil/p-baea374a.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as t,h as i,g as r}from"./p-b7a462e5.js";const s=".react__template-wrapper{display:flex;width:300px;height:200px;border-radius:3px;border:1px solid #ccc}.react__template-wrapper.hide{display:none}.react__template-wrapper:hover{cursor:pointer}.template__page-wrapper{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}.template__page-wrapper .repository__url{text-decoration:none}.input__fields-wrapper{display:flex;flex-direction:column;gap:10px}.details__wrapper{display:flex;flex-direction:column;gap:10px}.selection__buttons-wrapper{display:flex;gap:10px;padding-top:10px;align-items:center}.selection__buttons-wrapper .vue__label{color:#ccc}.selection__buttons-wrapper label:not(.vue__label):hover{cursor:pointer}.selection__buttons-wrapper .selection__input{display:flex;align-items:center;gap:5px}.selection__buttons-wrapper .selection__input input{margin:0;height:20px;width:20px}.selection__buttons-wrapper .selection__input input:hover:not(.vue__input){cursor:pointer}.image__wrapper img{position:relative;width:300px;height:100%;border-radius:3px;object-fit:contain;transition:transform 0.2s}.image__wrapper img:hover{transform:scale(2);top:50px;z-index:100}";const a=s;const o=class{constructor(i){e(this,i);this.toggleTemplates=t(this,"toggleTemplates",7);this.fieldError=t(this,"fieldError",7);this.repoDetails={name:"",desc:"",framework:""};this.showDetails=false;this.isTemplatePage=false;this.isLoading=true;this.clientId="Ov23lixmXiNTTNb6V5W6";this.redirectUri="https://infineon.github.io/infineon-design-system-stencil/?path=/docs/dds-templates--development";this.scope="repo workflow";this.state="template123"}authUser(){const e=`https://github.com/login/oauth/authorize?`+`client_id=${this.clientId}&`+`redirect_uri=${this.redirectUri}&`+`scope=${this.scope}&`+`state=${this.state}`;window.open(e,"_blank")}componentDidLoad(){const e=new URL(window.location.href);const t=e.searchParams.get("code");const{templateName:i}=this.getLocalStorageValues();if(t&&this.name===i){this.isTemplatePage=true;this.toggleTemplates.emit("details");this.getUserToken(t)}}getLocalStorageValues(){const e=localStorage.getItem("repo_name");const t=localStorage.getItem("repo_desc");const i=localStorage.getItem("repo_framework");const r=localStorage.getItem("selectedTemplate");return{repoName:e,repoDesc:t,repoFramework:i,templateName:r}}async getUserToken(e){const{repoName:t,repoDesc:i,repoFramework:r,templateName:s}=this.getLocalStorageValues();fetch(`https://ddstemplate-srv.cfapps.eu10-004.hana.ondemand.com/token/${e}/${t}/${i}/${r}/${s}`).then((e=>{if(e.ok){return e.text()}else{return e.text().then((e=>{throw new Error(e)}))}})).then((e=>{if(e){this.isLoading=false;this.repoUrl=e;localStorage.clear()}})).catch((e=>{this.repoError=e.message;console.error("Error:",e.message)}))}handleUserInput(e,t){if(t==="name"){this.repoDetails=Object.assign(Object.assign({},this.repoDetails),{name:e.target.value})}else if(t==="desc"){this.repoDetails=Object.assign(Object.assign({},this.repoDetails),{desc:e.target.value})}else if(t==="framework"){this.repoDetails=Object.assign(Object.assign({},this.repoDetails),{framework:e.target.value})}}submitUserData(){if(this.repoDetails.name&&this.repoDetails.desc&&this.repoDetails.framework){localStorage.setItem("repo_name",this.repoDetails.name);localStorage.setItem("repo_desc",this.repoDetails.desc);localStorage.setItem("repo_framework",this.repoDetails.framework);localStorage.setItem("selectedTemplate",this.name);this.fieldError.emit(false);this.authUser()}else{this.fieldError.emit("All fields are mandatory")}}togglePadding(e){let t=this.el.parentElement;if(t){const i=t.getRootNode();if(i instanceof ShadowRoot){t=i.host.parentElement}else{t=t.parentElement}if(e==="remove"){t.parentElement.style.padding="0px"}else if(e==="add"){t.parentElement.style.padding="4rem 20px"}}}handleCurrentTemplate(e){if(e&&!this.showDetails){this.togglePadding("remove");const t=e.currentTarget;this.toggleTemplates.emit(t);this.showDetails=true}}async toggleTemplate(e){const t=this.el.shadowRoot.querySelector(".react__template-wrapper");if(t){if(!t.classList.contains("hide")&&e){if(t!==e){t.classList.add("hide")}}else{if(this.showDetails){this.showDetails=false}this.togglePadding("add");t.classList.remove("hide")}}}render(){return i("div",{key:"993f20bb1a7970d938d09ea001ee77b777d2a817"},this.isTemplatePage?i("div",{class:"template__page-wrapper"},!this.repoUrl&&!this.repoError&&i("div",null,i("h3",null,"Your repository is getting ready.."),i("p",null,"This will only take a minute.")),this.isLoading&&!this.repoError&&i("div",null,i("ifx-spinner",{variant:"default",size:"s"})),this.repoUrl&&i("ifx-link",{href:this.repoUrl,target:"_parent",size:"m",variant:"underlined"},"Your repository"),this.repoError&&i("div",null,this.repoError)):i("div",{class:"react__template-container"},i("div",{class:"react__template-wrapper",onClick:e=>this.handleCurrentTemplate(e)},i("div",{class:"image__wrapper"},i("img",{src:this.thumbnail}))),this.showDetails&&i("div",{class:"details__wrapper"},i("div",{class:"selection__buttons-wrapper"},i("div",{class:"selection__input"},i("input",{type:"radio",id:"react",name:"chosen_framework",value:"react",onInput:e=>this.handleUserInput(e,"framework")}),i("label",{htmlFor:"react"},"React")),i("div",{class:"selection__input vue"},i("input",{class:"vue__input",disabled:true,type:"radio",id:"vue",name:"chosen_framework",value:"vue",onInput:e=>this.handleUserInput(e,"framework")}),i("label",{class:"vue__label",htmlFor:"vue"},"Vue")," (Soon)")),i("div",{class:"input__fields-wrapper"},i("ifx-text-field",{required:true,onInput:e=>this.handleUserInput(e,"name"),size:"m",icon:"c-info-16",placeholder:"Your repository name"},"Repository Name"),i("ifx-text-field",{required:true,size:"m",icon:"c-info-16",onInput:e=>this.handleUserInput(e,"desc"),placeholder:"Your repository description"},"Repository Description"),i("ifx-button",{fullWidth:true,onClick:()=>this.submitUserData(),variant:"primary"},"Generate template")))))}get el(){return r(this)}};o.style=a;export{o as ifx_template};
+//# sourceMappingURL=p-baea374a.entry.js.map

package/dist/infineon-design-system-stencil/p-baea374a.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["templateCss","IfxTemplateStyle0","Template","constructor","hostRef","this","repoDetails","name","desc","framework","showDetails","isTemplatePage","isLoading","clientId","redirectUri","scope","state","authUser","authorizationUrl","window","open","componentDidLoad","url","URL","location","href","code","searchParams","get","templateName","getLocalStorageValues","toggleTemplates","emit","getUserToken","repoName","localStorage","getItem","repoDesc","repoFramework","authCode","fetch","then","response","ok","text","errorMessage","Error","data","repoUrl","clear","catch","error","repoError","message","console","handleUserInput","e","type","Object","assign","target","value","submitUserData","setItem","fieldError","togglePadding","action","parent","el","parentElement","rootNode","getRootNode","ShadowRoot","host","style","padding","handleCurrentTemplate","targetTemplate","currentTarget","toggleTemplate","currTemp","templateWrapper","shadowRoot","querySelector","classList","contains","add","remove","render","h","key","class","variant","size","onClick","src","thumbnail","id","onInput","htmlFor","disabled","required","icon","placeholder","fullWidth"],"sources":["src/components/templates/template/template.scss?tag=ifx-template&encapsulation=shadow","src/components/templates/template/template.tsx"],"sourcesContent":["\n.react__template-wrapper { \n  display: flex;\n  width: 300px;\n  height: 200px;\n  border-radius: 3px;\n  border: 1px solid #ccc;\n\n  &.hide { \n    display: none;\n  }\n  \n  &:hover { \n    cursor: pointer;\n  }\n}\n\n.template__page-wrapper {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  text-align: center;\n\n  & .repository__url { \n    text-decoration: none;\n  }\n}\n\n.input__fields-wrapper { \n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n\n}\n\n.details__wrapper { \n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n\n.selection__buttons-wrapper { \n  display: flex;\n  gap: 10px;\n  padding-top: 10px;\n  align-items: center;\n  & .vue__label { \n    color: #ccc;\n  }\n\n  & label:not(.vue__label) { \n    &:hover { \n      cursor: pointer;\n    }\n  }\n\n  & .selection__input { \n    display: flex;\n    align-items: center;\n    gap: 5px;\n    & input { \n      margin: 0;\n      height: 20px;\n      width: 20px;\n      &:hover:not(.vue__input) { \n        cursor: pointer;\n      }\n    }\n  }\n}\n\n.image__wrapper { \n  img { \n    position: relative;\n    width: 300px;\n    height: 100%;\n    border-radius: 3px;\n    object-fit: contain;\n    transition: transform .2s;\n    &:hover { \n      transform: scale(2);\n      top: 50px;\n      z-index: 100;\n    }\n  }\n}","import { Component, h, Element, State, Prop, Event, EventEmitter, Method } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-template',\n  styleUrl: 'template.scss',\n  shadow: true,\n})\nexport class Template {\n  @Element() el: HTMLElement;\n  @State() repoDetails: { name: string, desc: string, framework: string } = { name: \"\", desc: \"\", framework: \"\" };\n  @State() repoUrl: string;\n  @State() showDetails: boolean = false;\n  @State() isTemplatePage: boolean = false;\n  @State() isLoading: boolean = true;\n  @State() repoError: string;\n  @Prop() name: string;\n  @Event() toggleTemplates: EventEmitter;\n  @Event() fieldError: EventEmitter;\n  @Prop() thumbnail: string;\n  \n  private clientId = 'Ov23lixmXiNTTNb6V5W6'\n  private redirectUri = 'https://infineon.github.io/infineon-design-system-stencil/?path=/docs/dds-templates--development';\n  private scope = 'repo workflow'\n  private state = 'template123'\n\n  authUser() { \n    const authorizationUrl = `https://github.com/login/oauth/authorize?` +\n      `client_id=${this.clientId}&` +\n      `redirect_uri=${this.redirectUri}&` +\n      `scope=${this.scope}&` +\n      `state=${this.state}`;\n    \n      window.open(authorizationUrl, '_blank'); \n  }\n\n  componentDidLoad() { \n    const url = new URL(window.location.href);\n    const code = url.searchParams.get('code');\n    const { templateName } = this.getLocalStorageValues()\n    if(code && this.name === templateName) { \n      this.isTemplatePage = true;\n      this.toggleTemplates.emit('details')\n      this.getUserToken(code)\n    } \n  }\n\n  getLocalStorageValues() { \n    const repoName = localStorage.getItem('repo_name');\n    const repoDesc = localStorage.getItem('repo_desc');\n    const repoFramework = localStorage.getItem('repo_framework');\n    const templateName = localStorage.getItem('selectedTemplate');\n    return { repoName, repoDesc, repoFramework, templateName }\n  }\n\n  async getUserToken(authCode) {\n    const { repoName, repoDesc, repoFramework, templateName } = this.getLocalStorageValues();\n\n    fetch(`https://ddstemplate-srv.cfapps.eu10-004.hana.ondemand.com/token/${authCode}/${repoName}/${repoDesc}/${repoFramework}/${templateName}`)\n    .then(response => {\n      if (response.ok) {\n        return response.text();\n      } else {\n        return response.text().then(errorMessage => {\n          throw new Error(errorMessage);\n        });\n      }\n    })\n    .then(data => { \n      if(data) { \n        this.isLoading = false;\n        this.repoUrl = data;\n        localStorage.clear();\n      } \n    })\n    .catch(error => {\n      this.repoError = error.message;\n      console.error('Error:', error.message)\n    });\n  }\n\n  handleUserInput(e, type) { \n    if (type === 'name') {\n      this.repoDetails = { ...this.repoDetails, name: e.target.value };\n    } else if (type === 'desc') {\n      this.repoDetails = { ...this.repoDetails, desc: e.target.value };\n    } else if(type === 'framework') { \n      this.repoDetails = { ...this.repoDetails, framework: e.target.value };\n    }\n  }\n\n  submitUserData() { \n    if(this.repoDetails.name && this.repoDetails.desc && this.repoDetails.framework) { \n      localStorage.setItem('repo_name', this.repoDetails.name);\n      localStorage.setItem('repo_desc', this.repoDetails.desc);\n      localStorage.setItem('repo_framework', this.repoDetails.framework);\n      localStorage.setItem('selectedTemplate', this.name);\n      this.fieldError.emit(false)\n      this.authUser()\n    } else { \n      this.fieldError.emit('All fields are mandatory')\n    }\n  }\n\n  togglePadding(action) { \n    let parent = this.el.parentElement;\n    if (parent) {\n      const rootNode = parent.getRootNode();\n      if (rootNode instanceof ShadowRoot) {\n        parent = rootNode.host.parentElement;\n      } else {\n        parent = parent.parentElement;\n      }\n      if(action === 'remove') { \n        parent.parentElement.style.padding = '0px';\n      } else if(action === 'add') { \n        parent.parentElement.style.padding = '4rem 20px';\n      }\n    }\n  }\n\n  handleCurrentTemplate(e) { \n    if(e && !this.showDetails) { \n      this.togglePadding('remove')\n      const targetTemplate = e.currentTarget;\n      this.toggleTemplates.emit(targetTemplate)\n      this.showDetails = true;\n    } \n  }\n\n  @Method()\n  async toggleTemplate(currTemp) { \n    const templateWrapper = this.el.shadowRoot.querySelector('.react__template-wrapper');\n    if(templateWrapper) { \n      if(!templateWrapper.classList.contains('hide') && currTemp ) { \n        if(templateWrapper !== currTemp) {\n          templateWrapper.classList.add('hide')\n        }\n      } else { \n        if(this.showDetails) { \n          this.showDetails = false;\n        }\n        this.togglePadding('add')\n        templateWrapper.classList.remove('hide')\n      }\n    }\n  }\n\n \n  render() {\n      return (\n        <div>\n          {this.isTemplatePage \n          ? \n          <div class=\"template__page-wrapper\">\n            {!this.repoUrl && !this.repoError && \n            <div>\n              <h3>Your repository is getting ready..</h3>\n              <p>This will only take a minute.</p>\n            </div>}\n            {this.isLoading && !this.repoError && <div><ifx-spinner variant='default' size='s' /></div>}\n            {this.repoUrl && <ifx-link href={this.repoUrl} target=\"_parent\" size=\"m\" variant=\"underlined\">Your repository</ifx-link>}\n            {this.repoError && <div>{this.repoError}</div>}\n          </div> \n          : \n          <div class=\"react__template-container\">\n              <div class=\"react__template-wrapper\" onClick={(e) => this.handleCurrentTemplate(e)}>\n                <div class=\"image__wrapper\">\n                  <img src={this.thumbnail} />\n                </div>\n              </div>\n            {this.showDetails && \n            <div class=\"details__wrapper\">\n              <div class=\"selection__buttons-wrapper\">\n                <div class=\"selection__input\">\n                  <input type=\"radio\" id=\"react\" name=\"chosen_framework\" value=\"react\" onInput={(e) => this.handleUserInput(e, 'framework')}  />\n                  <label htmlFor=\"react\">React</label>\n                </div>\n                <div class=\"selection__input vue\">\n                  <input class=\"vue__input\" disabled type=\"radio\" id=\"vue\" name=\"chosen_framework\" value=\"vue\" onInput={(e) => this.handleUserInput(e, 'framework')}/>\n                  <label class=\"vue__label\" htmlFor=\"vue\">Vue</label> (Soon)\n                </div>\n              </div>\n           \n\n              <div class=\"input__fields-wrapper\">\n                <ifx-text-field required={true} onInput={(e) => this.handleUserInput(e, 'name')} size=\"m\" icon=\"c-info-16\" placeholder=\"Your repository name\">Repository Name</ifx-text-field>\n\n                <ifx-text-field required={true} size=\"m\" icon=\"c-info-16\" onInput={(e) => this.handleUserInput(e, 'desc')} placeholder=\"Your repository description\">Repository Description</ifx-text-field>\n\n                <ifx-button fullWidth={true} onClick={() => this.submitUserData()} variant='primary'>Generate template</ifx-button>\n              </div>\n              \n            </div>}\n          </div>}\n        </div>\n      );\n  }\n}"],"mappings":"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","ignoreList":[]}

package/dist/types/components/accordion/accordionItem.d.ts

@@ -9,14 +9,13 @@ export declare class IfxAccordionItem {
     ifxClose: EventEmitter;
     private contentEl;
     private titleEl;
-    private resizeObserver;
     componentWillLoad(): void;
     componentDidLoad(): void;
     componentDidUpdate(): void;
     openChanged(newValue: boolean): void;
     toggleOpen(): void;
     openAccordionItem(): void;
-    attachResizeObserver(): void;
+    handleSlotChange(e: any): void;
     handleKeydown(ev: KeyboardEvent): void;
     render(): any;
 }

package/dist/types/components/alert/alert.d.ts

@@ -1,4 +1,11 @@
 import { EventEmitter } from '../../stencil-public-runtime';
+declare global {
+    interface Window {
+        btntConfig?: any;
+        btntQueue?: any;
+        btnt?: any;
+    }
+}
 export declare class Alert {
     variant: 'primary' | 'success' | 'danger' | 'warning' | 'info';
     icon: string;
@@ -17,5 +24,6 @@ export declare class Alert {
     renderCloseButton(): any;
     generateUniqueId(prefix?: string): string;
     componentWillLoad(): void;
+    initalizeTracking(): void;
     render(): any;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@infineon/infineon-design-system-stencil",
-  "version": "35.3.0--canary.1921.6cb0ad58d7bcdabf5ce7bd69b53b66521fe50a8d.0",
+  "version": "35.3.1--canary.1904.89fbd2e9743557b79eb5aa75e6ace692b295799c.0",
   "private": false,
   "description": "Infineon design system Stencil web components",
   "homepage": "https://infineon.github.io/infineon-design-system-stencil",
@@ -39,7 +39,7 @@
   },
   "dependencies": {
     "@infineon/design-system-tokens": "5.0.0",
-    "@infineon/infineon-icons": "^4.0.0",
+    "@infineon/infineon-icons": "4.4.1",
     "@popperjs/core": "^2.11.8",
     "@stencil/angular-output-target": "^0.9.0",
     "@stencil/core": "4.27.2",

package/dist/cjs/ifx-icon.cjs.entry.js

@@ -1,94 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-7f4df11a.js');
-const icons = require('./icons-31ab853f.js');
-
-const infineonIconStencilCss = "ifx-icon{display:inline-flex;justify-content:center}ifx-icon:empty{display:none}";
-const IfxIconStyle0 = infineonIconStencilCss;
-
-const InfineonIconStencil = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.consoleError = index.createEvent(this, "consoleError", 7);
-        this.icon = "";
-    }
-    updateIcon(newIcon) {
-        this.internalIcon = newIcon;
-        this.setIcon();
-    }
-    convertStringToHtml(htmlString) {
-        const div = document.createElement('div');
-        div.innerHTML = htmlString;
-        return div.firstChild;
-    }
-    convertHtmlToObject(htmlElement) {
-        let pathToObject = Array
-            .from(htmlElement.attributes, ({ name, value }) => ({ name, value }))
-            .reduce((acc, current) => {
-            acc[current.name] = current.value;
-            return acc;
-        }, {});
-        return pathToObject;
-    }
-    convertPathsToVnode(htmlPath) {
-        let svgPaths = [];
-        const parentPath = this.convertHtmlToObject(htmlPath);
-        const parentPathToVnode = index.h("path", parentPath);
-        svgPaths.push(parentPathToVnode);
-        if (htmlPath.firstChild) {
-            const paths = htmlPath.querySelectorAll('path');
-            const pathLength = htmlPath.querySelectorAll('path').length;
-            for (let i = 0; i < pathLength; i++) {
-                let pathToObject = this.convertHtmlToObject(paths[i]);
-                let objToVnode = index.h("path", pathToObject);
-                svgPaths.push(objToVnode);
-            }
-        }
-        return svgPaths;
-    }
-    getSVG(svgPath) {
-        const htmlPath = this.convertStringToHtml(this.ifxIcon);
-        const width = htmlPath.getAttribute('width');
-        const height = htmlPath.getAttribute('height');
-        const fill = htmlPath.getAttribute('fill');
-        const viewBox = htmlPath.getAttribute('viewBox');
-        return index.h("svg", { class: "inline-svg", width: width, height: height, xmlns: "http://www.w3.org/2000/svg", fill: fill, viewBox: viewBox }, ...svgPath);
-    }
-    constructIcon() {
-        if (this.ifxIcon) {
-            const htmlPath = this.convertStringToHtml(this.ifxIcon);
-            const svgPath = this.convertPathsToVnode(htmlPath);
-            const SVG = this.getSVG(svgPath);
-            return SVG;
-        }
-        else if (this.icon !== "") {
-            console.error('Icon not found!');
-            this.consoleError.emit(true);
-            return;
-        }
-        else {
-            return;
-        }
-    }
-    setIcon() {
-        const removeHyphen = (str) => str.toLowerCase().replace(/[^a-zA-Z0-9]+(.)/g, (_m, chr) => chr);
-        this.ifxIcon = icons.getIcon(removeHyphen(this.internalIcon));
-    }
-    componentWillLoad() {
-        this.internalIcon = this.icon;
-        this.setIcon();
-    }
-    render() {
-        return (index.h(index.Host, { key: '7f6ff1ecf4d36c72ce33b220b21e9f140e87f430' }, this.constructIcon()));
-    }
-    static get watchers() { return {
-        "icon": ["updateIcon"]
-    }; }
-};
-InfineonIconStencil.style = IfxIconStyle0;
-
-exports.ifx_icon = InfineonIconStencil;
-
-//# sourceMappingURL=ifx-icon.cjs.entry.js.map

package/dist/cjs/ifx-icon.cjs.entry.js.map

@@ -1 +0,0 @@
-{"file":"ifx-icon.entry.cjs.js","mappings":"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","names":["h","getIcon","Host"],"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}"],"version":3}

package/dist/components/p-4231b505.js

@@ -1,119 +0,0 @@
-import { p as proxyCustomElement, H, c as createEvent, h } from './p-f8e6a4ef.js';
-import { d as defineCustomElement$1 } from './p-9aa64d29.js';
-
-const accordionItemCss = ":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 IfxAccordionItemStyle0 = accordionItemCss;
-
-const IfxAccordionItem = /*@__PURE__*/ proxyCustomElement(class IfxAccordionItem extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.ifxOpen = createEvent(this, "ifxOpen", 7);
-        this.ifxClose = createEvent(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(newValue) {
-        this.internalOpen = newValue;
-    }
-    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 updatedHeight = this.contentEl.scrollHeight;
-                this.contentEl.style.height = `${updatedHeight}px`;
-                this.contentEl.style.overflow = 'visible';
-            }
-            else {
-                this.contentEl.style.height = '0';
-                this.contentEl.style.overflow = 'hidden';
-            }
-        }
-    }
-    attachResizeObserver() {
-        const innerContentEl = this.el.shadowRoot.querySelector('.inner-content');
-        if (innerContentEl) {
-            this.resizeObserver = new ResizeObserver(() => {
-                if (this.internalOpen) {
-                    this.openAccordionItem();
-                }
-            });
-            this.resizeObserver.observe(innerContentEl);
-        }
-    }
-    handleKeydown(ev) {
-        const path = ev.composedPath();
-        if (!path.includes(this.titleEl)) {
-            return;
-        }
-        switch (ev.key) {
-            case 'Enter': // fallthrough
-            case ' ': // space
-                ev.preventDefault();
-                this.toggleOpen();
-                break;
-        }
-    }
-    render() {
-        return (h("div", { key: '6f314f7ff18566be1de5fb8c169405df296ba346', class: `accordion-item ${this.internalOpen ? 'open' : ''}` }, h("div", { key: '0c20697cd02a7af28f481c7104a6b100ad478081', role: "button", "aria-expanded": this.internalOpen, "aria-controls": "accordion-content", class: "accordion-title", onClick: () => this.toggleOpen(), tabindex: '0', ref: (el) => (this.titleEl = el) }, h("span", { key: 'd41d3016e5f967f361dea497486673d786ba3d83', "aria-hidden": "true", role: "heading", "aria-level": String(this.AriaLevel), class: "accordion-icon" }, h("ifx-icon", { key: '27308dfb2a2cd73303705521a41f706482cb8da3', icon: "chevron-down-16" })), h("span", { key: 'c71749876b23310d9d9037552dcb4800f3b16d13', id: "accordion-caption", class: "accordion-caption" }, this.caption)), h("div", { key: '23d3f2ee657ff35edd3d341e883aadb6d1858c79', id: "accordion-content", class: "accordion-content", ref: (el) => (this.contentEl = el), role: "region", "aria-labelledby": "accordion-caption" }, h("div", { key: '3716d880d2c26471e515ba60a0b1227758130a09', class: "inner-content" }, h("slot", { key: '0ae80ac1d41934a1e3a84e3d3a8bdc97b5cf1e2c' })))));
-    }
-    get el() { return this; }
-    static get watchers() { return {
-        "open": ["openChanged"]
-    }; }
-    static get style() { return IfxAccordionItemStyle0; }
-}, [1, "ifx-accordion-item", {
-        "caption": [1],
-        "open": [1028],
-        "AriaLevel": [2, "aria-level"],
-        "internalOpen": [32]
-    }, [[0, "keydown", "handleKeydown"]], {
-        "open": ["openChanged"]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["ifx-accordion-item", "ifx-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "ifx-accordion-item":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, IfxAccordionItem);
-            }
-            break;
-        case "ifx-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-
-export { IfxAccordionItem as I, defineCustomElement as d };
-
-//# sourceMappingURL=p-4231b505.js.map

package/dist/components/p-4231b505.js.map

@@ -1 +0,0 @@
-{"file":"p-4231b505.js","mappings":"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","names":[],"sources":["src/components/accordion/accordionItem.scss?tag=ifx-accordion-item&encapsulation=shadow","src/components/accordion/accordionItem.tsx"],"sourcesContent":["// 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}"],"version":3}