@infineon/infineon-design-system-stencil 35.2.1--canary.1923.85f4a97bda6510f44b7c7e47e8cd9b8183844346.0 → 35.2.1--canary.1915.36639a15386e1d21092f01b66809b4485e01ce54.0

package/dist/infineon-design-system-stencil/{p-54a2b0d7.entry.js → p-9b988c11.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-73d38850.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-9b988c11.entry.js.map

package/dist/infineon-design-system-stencil/{p-edd379d7.entry.js → p-cd9f2911.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,c as s,h as n,a as e}from"./p-b7a462e5.js";import{g as o}from"./p-1e2705c8.js";const i="ifx-icon{display:inline-flex;justify-content:center}ifx-icon:empty{display:none}";const c=i;const r=class{constructor(n){t(this,n);this.consoleError=s(this,"consoleError",7);this.icon=""}updateIcon(t){this.internalIcon=t;this.setIcon()}convertStringToHtml(t){const s=document.createElement("div");s.innerHTML=t;return s.firstChild}convertHtmlToObject(t){let s=Array.from(t.attributes,(({name:t,value:s})=>({name:t,value:s}))).reduce(((t,s)=>{t[s.name]=s.value;return t}),{});return s}convertPathsToVnode(t){let s=[];const e=this.convertHtmlToObject(t);const o=n("path",e);s.push(o);if(t.firstChild){const e=t.querySelectorAll("path");const o=t.querySelectorAll("path").length;for(let t=0;t<o;t++){let o=this.convertHtmlToObject(e[t]);let i=n("path",o);s.push(i)}}return s}getSVG(t){const s=this.convertStringToHtml(this.ifxIcon);const e=s.getAttribute("width");const o=s.getAttribute("height");const i=s.getAttribute("fill");const c=s.getAttribute("viewBox");return n("svg",{class:"inline-svg",width:e,height:o,xmlns:"http://www.w3.org/2000/svg",fill:i,viewBox:c},...t)}constructIcon(){if(this.ifxIcon){const t=this.convertStringToHtml(this.ifxIcon);const s=this.convertPathsToVnode(t);const n=this.getSVG(s);return n}else if(this.icon!==""){console.error("Icon not found!");this.consoleError.emit(true);return}else{return}}setIcon(){const t=t=>t.toLowerCase().replace(/[^a-zA-Z0-9]+(.)/g,((t,s)=>s));this.ifxIcon=o(t(this.internalIcon))}componentWillLoad(){this.internalIcon=this.icon;this.setIcon()}render(){return n(e,{key:"7f6ff1ecf4d36c72ce33b220b21e9f140e87f430"},this.constructIcon())}static get watchers(){return{icon:["updateIcon"]}}};r.style=c;export{r as ifx_icon};
-//# sourceMappingURL=p-edd379d7.entry.js.map
+import{r as t,c as s,h as n,a as e}from"./p-b7a462e5.js";import{g as o}from"./p-73d38850.js";const i="ifx-icon{display:inline-flex;justify-content:center}ifx-icon:empty{display:none}";const c=i;const r=class{constructor(n){t(this,n);this.consoleError=s(this,"consoleError",7);this.icon=""}updateIcon(t){this.internalIcon=t;this.setIcon()}convertStringToHtml(t){const s=document.createElement("div");s.innerHTML=t;return s.firstChild}convertHtmlToObject(t){let s=Array.from(t.attributes,(({name:t,value:s})=>({name:t,value:s}))).reduce(((t,s)=>{t[s.name]=s.value;return t}),{});return s}convertPathsToVnode(t){let s=[];const e=this.convertHtmlToObject(t);const o=n("path",e);s.push(o);if(t.firstChild){const e=t.querySelectorAll("path");const o=t.querySelectorAll("path").length;for(let t=0;t<o;t++){let o=this.convertHtmlToObject(e[t]);let i=n("path",o);s.push(i)}}return s}getSVG(t){const s=this.convertStringToHtml(this.ifxIcon);const e=s.getAttribute("width");const o=s.getAttribute("height");const i=s.getAttribute("fill");const c=s.getAttribute("viewBox");return n("svg",{class:"inline-svg",width:e,height:o,xmlns:"http://www.w3.org/2000/svg",fill:i,viewBox:c},...t)}constructIcon(){if(this.ifxIcon){const t=this.convertStringToHtml(this.ifxIcon);const s=this.convertPathsToVnode(t);const n=this.getSVG(s);return n}else if(this.icon!==""){console.error("Icon not found!");this.consoleError.emit(true);return}else{return}}setIcon(){const t=t=>t.replace(/[-_]+(.)/g,((t,s)=>s.toUpperCase())).replace(/^(.)/,(t=>t.toLowerCase()));const s=t(this.internalIcon);this.ifxIcon=o(s)}componentWillLoad(){this.internalIcon=this.icon;this.setIcon()}render(){return n(e,{key:"28a16b1fa9ecc7e956d9012e18e0d7ca71d839b2"},this.constructIcon())}static get watchers(){return{icon:["updateIcon"]}}};r.style=c;export{r as ifx_icon};
+//# sourceMappingURL=p-cd9f2911.entry.js.map

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

@@ -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","toCamelCase","str","replace","_","chr","toUpperCase","m","toLowerCase","iconName","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\nsetIcon() { \n  const toCamelCase = str =>\n    str\n      .replace(/[-_]+(.)/g, (_, chr) => chr.toUpperCase()) // handle - and _ to uppercase\n      .replace(/^(.)/, (m) => m.toLowerCase()); // ensure first letter is lowercase\n\n  const iconName = toCamelCase(this.internalIcon);\n  this.ifxIcon = getIcon(iconName);\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,EAIN,OAAA/C,GACE,MAAMgD,EAAcC,GAClBA,EACGC,QAAQ,aAAa,CAACC,EAAGC,IAAQA,EAAIC,gBACrCH,QAAQ,QAASI,GAAMA,EAAEC,gBAE9B,MAAMC,EAAWR,EAAYrD,KAAKI,cAClCJ,KAAKuC,QAAUuB,EAAQD,E,CAGvB,iBAAAE,GACE/D,KAAKI,aAAeJ,KAAKC,KACzBD,KAAKK,S,CAGP,MAAA2D,GACE,OACEnC,EAACoC,EAAI,CAAAC,IAAA,4CACJlE,KAAK+C,gB","ignoreList":[]}

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

@@ -0,0 +1,2 @@
+import{r as e,c as i,h as t,g as s}from"./p-b7a462e5.js";const a=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}:host{position:relative}.sidebar__nav-item:focus,.sidebar__nav-item.header__section:focus{outline:none}.sidebar__nav-item:focus .sidebar__nav-item-icon-wrapper,.sidebar__nav-item.header__section:focus .sidebar__nav-item-icon-wrapper{color:#08665C}.sidebar__nav-item:focus .sidebar__nav-item-label,.sidebar__nav-item.header__section:focus .sidebar__nav-item-label{outline:none;color:#08665C}.sidebar__nav-item:focus .sidebar__nav-item-indicator .item__arrow-wrapper ifx-icon,.sidebar__nav-item.header__section:focus .sidebar__nav-item-indicator .item__arrow-wrapper ifx-icon{color:#08665C}.sidebar__nav-item:hover,.sidebar__nav-item.header__section:hover{outline:none}.sidebar__nav-item:hover .sidebar__nav-item-icon-wrapper,.sidebar__nav-item.header__section:hover .sidebar__nav-item-icon-wrapper{color:#08665C}.sidebar__nav-item:hover .sidebar__nav-item-label,.sidebar__nav-item.header__section:hover .sidebar__nav-item-label{outline:none;color:#08665C}.sidebar__nav-item:hover .sidebar__nav-item-indicator .item__arrow-wrapper ifx-icon,.sidebar__nav-item.header__section:hover .sidebar__nav-item-indicator .item__arrow-wrapper ifx-icon{color:#08665C}.sidebar__nav-item{display:flex;flex-direction:row;align-items:center;width:100%;padding:8px 0px;gap:4px;flex:none;order:0;flex-grow:0;text-decoration:none;color:#1D1D1D;cursor:pointer;font-family:var(--ifx-font-family)}.sidebar__nav-item.extra-padding__bottom{padding:8px 0px 16px 0px}.sidebar__nav-item.active{color:#0A8276}.sidebar__nav-item.active-section::before{content:"";position:absolute;left:-32px;height:40px;width:2px;background:#0A8276}.sidebar__nav-item.open{padding:8px 0px}.sidebar__nav-item.open .sidebar__nav-item-label{font-size:16px;font-style:normal;font-weight:400;line-height:24px}.sidebar__nav-item.open .sidebar__nav-item-indicator .item__arrow-wrapper ifx-icon{transform:rotate(-180deg)}.sidebar__nav-item.header__section{box-sizing:padding-box;border-top:1px solid #EEEDED;padding:16px 0px;display:-webkit-flex;-webkit-line-clamp:1;-webkit-box-orient:horizontal;overflow:hidden;text-overflow:ellipsis}.sidebar__nav-item.header__section.no-top-border{border-top:none}.sidebar__nav-item.header__section.active-section::before{content:"";position:absolute;left:-32px;height:40px;width:2px;background:#0A8276}.sidebar__nav-item.header__section.open{padding:16px 0px 8px 0px}.sidebar__nav-item.header__section.open .sidebar__nav-item-indicator .item__arrow-wrapper ifx-icon{transform:rotate(-180deg)}.sidebar__nav-item.header__section .sidebar__nav-item-label{color:#1D1D1D;font-family:Source Sans 3;font-size:16px;font-style:normal;font-weight:600;line-height:24px}.sidebar__nav-item.submenu__item{padding:4px 0px}.sidebar__nav-item.submenu__item.extra-padding__bottom{padding:4px 0px 16px 0px}.sidebar__nav-item .sidebar__nav-item-icon-wrapper{display:flex;width:24px;height:24px;justify-content:center;align-items:center;gap:8px;flex-shrink:0}.sidebar__nav-item .sidebar__nav-item-icon-wrapper.noIcon{display:none}.sidebar__nav-item .sidebar__nav-item-icon-wrapper ifx-icon{width:16px;height:16px}.sidebar__nav-item .sidebar__nav-item-label{font-style:normal;font-weight:400;font-size:1rem;line-height:1.5rem;display:flex;align-items:center;flex:none;order:1;flex-grow:1;cursor:pointer}.sidebar__nav-item .sidebar__nav-item-indicator{display:flex;flex-direction:row;justify-content:center;align-items:center;padding:0px 4px;flex:none;order:2;flex-grow:0}.expandable__submenu{display:none;list-style-type:none;flex-direction:column;padding:0;margin:0;padding-left:40px}.expandable__submenu.open{display:flex}.header__section+.expandable__submenu{padding-left:0}';const n=a;const r=class{constructor(t){e(this,t);this.ifxSidebarMenu=i(this,"ifxSidebarMenu",7);this.ifxSidebarNavigationItem=i(this,"ifxSidebarNavigationItem",7);this.ifxSidebarActionItem=i(this,"ifxSidebarActionItem",7);this.icon="";this.showIcon=true;this.showIconWrapper=false;this.href="";this.internalHref="";this.target="_self";this.isExpandable=false;this.isNested=true;this.isSubMenuItem=false;this.active=false;this.isActionItem=false;this.internalActiveState=false}handleActiveChange(e,i){if(this.isActionItem){this.internalActiveState=false;return}this.internalActiveState=e;if(e!==i){let i=this.getNavItem(this.el.shadowRoot);if(!this.isExpandable&&!e){this.handleClassList(i,"remove","active")}if(!this.isExpandable&&e){this.handleClassList(i,"add","active")}}}handleConsoleError(e){if(e.detail){this.showIcon=false}else{this.showIcon=true}}handleEventEmission(){this.ifxSidebarMenu.emit(this.el)}handleClassList(e,i,t){e.classList[i](t);if(i==="contains"){return e.classList.contains(t)}}getExpandableMenu(){const e=this.el.shadowRoot.querySelector(".expandable__submenu");return e}getNavItem(e){return e===null||e===void 0?void 0:e.querySelector(".sidebar__nav-item")}getSidebarMenuItems(e=this.el){const i=e.querySelectorAll("ifx-sidebar-item");if(i.length===0){return e.shadowRoot.querySelectorAll("ifx-sidebar-item")}return i}getSidebarMenuItem(){const e=this.el.shadowRoot.querySelector(".sidebar__nav-item");return e}toggleSubmenu(){if(this.isExpandable){const e=this.getSidebarMenuItem();const i=this.getExpandableMenu();this.handleClassList(i,"toggle","open");this.handleClassList(e,"toggle","open");this.handleEventEmission()}else{if(this.isActionItem){this.ifxSidebarActionItem.emit(this.el);return}else{this.handleActiveChange(true,this.internalActiveState);this.ifxSidebarNavigationItem.emit(this.el)}if(this.handleItemClick){this.handleItemClick(this.el)}}}handleExpandableMenu(e){const i=this.getExpandableMenu();e.forEach((e=>{const t=document.createElement("li");t.appendChild(e);i.appendChild(t)}))}parentElementIsSidebar(){const e=this.el.parentElement;if(e.tagName.toUpperCase()==="IFX-SIDEBAR"){return true}else return false}checkIfMenuItemIsNested(){const e=this.parentElementIsSidebar();if(e){this.isNested=false}}checkIfMenuItemIsSubMenu(){const e=this.el.parentElement;const i=this.getNavItem(e.shadowRoot);if(e.tagName.toUpperCase()==="IFX-SIDEBAR-ITEM"&&!this.handleClassList(i,"contains","header__section")){this.isSubMenuItem=true}else{this.isSubMenuItem=false}}isActive(e){const i=e.getAttribute("active");const t=i==="true";return t}getParentSection(e){let i=e.parentElement;while(i&&i.tagName.toUpperCase()!=="IFX-SIDEBAR"){if(i.tagName.toUpperCase()==="IFX-SIDEBAR-ITEM"){return i}i=i.parentElement}return null}handleBorderIndicatorDisplacement(e){const i=(e,t)=>{const s=this.isActive(e);if(s){const e=this.handleClassList(t,"contains","open");const i=this.getActiveItemSection();if(!e){this.handleClassList(i,"add","active-section")}else{this.handleClassList(i,"remove","active-section")}}const a=this.getSidebarMenuItems(e);a.forEach((e=>i(e,t)))};const t=this.getSidebarMenuItems();t.forEach((t=>i(t,e)))}setHref(){if(this.href.toLowerCase().trim()===""){this.internalHref=undefined}else this.internalHref=this.href}getActiveItemSection(){const e=this.parentElementIsSidebar();if(e){const e=this.getNavItem(this.el.shadowRoot);return e}else{const e=this.getNavItem(this.el.shadowRoot);return e}}async setActiveClasses(){const e=this.getNavItem(this.el.shadowRoot);this.handleClassList(e,"add","active")}async expandMenu(e){const i=this.getSidebarMenuItem();const t=this.getExpandableMenu();this.handleClassList(t,"add","open");this.handleClassList(i,"add","open");if(e){this.handleClassList(t,"remove","active-section");this.handleClassList(i,"remove","active-section")}}async isItemExpandable(){return this.isExpandable}handleActiveState(){if(this.internalActiveState){this.setActiveClasses()}}handleKeyDown(e){if(e.key==="Enter"){this.toggleSubmenu()}}componentDidLoad(){this.handleActiveState();if(this.isExpandable){const e=this.getSidebarMenuItems();this.handleExpandableMenu(e)}}componentWillLoad(){this.internalActiveState=this.active;this.checkIfMenuItemIsNested();this.checkIfMenuItemIsSubMenu();this.setHref();const e=this.getSidebarMenuItems();if(e.length!==0){this.isExpandable=true}else{this.isExpandable=false}}componentWillUpdate(){if(this.active&&!this.internalActiveState){this.internalActiveState=this.active;this.ifxSidebarNavigationItem.emit(this.el)}}render(){return t("div",{key:"7e0a398a47baab334837a55eb79cfd999c2fe99f"},t("a",{key:"d188e679861320c3c0d38e89dbc4bd503f120d24",tabIndex:1,onKeyDown:e=>this.handleKeyDown(e),href:this.internalHref,onClick:()=>this.toggleSubmenu(),target:this.target,class:`sidebar__nav-item ${!this.isNested&&this.isExpandable?"header__section":""} ${this.isSubMenuItem?"submenu__item":""}`},this.icon&&t("div",{key:"4098174f3c52fd51466d78f9d7816f358b6002ed",class:`sidebar__nav-item-icon-wrapper ${!this.showIcon?"noIcon":""}`},t("ifx-icon",{key:"2248af3dc70c08a46c874e14ee88724e6eefbcd1",icon:this.icon})),t("div",{key:"4e5ec198e85e975d38acb5b111f6d2d3892438d9",class:"sidebar__nav-item-label"},t("slot",{key:"9fc8c5a800d790b82c341d8fd78b822dcd90c1e0"})),(this.isExpandable||!isNaN(this.numberIndicator))&&t("div",{key:"870741b1ced893333e08cef620ac28bf19a6e8c0",class:"sidebar__nav-item-indicator"},this.isExpandable&&t("span",{key:"c08832e75d3ca68a891e4446b40f4b7cfbde30c6",class:"item__arrow-wrapper"},t("ifx-icon",{key:"a773892abff98167a8f452aab4ddbea6700521c9",icon:"chevron-down-16"})),!isNaN(this.numberIndicator)&&!this.isExpandable&&!this.isNested&&t("span",{key:"940f81e8d2cc81d792b72a76e5862b3df3a1803c",class:"item__number-indicator"},t("ifx-indicator",{key:"490c7c99c6fac419eceb233ade7e5d9a711d2fbf",variant:"number",number:this.numberIndicator})))),this.isExpandable&&t("ul",{key:"e810e46353df2fc6924e9d4e7e41690da7e1c72f",class:"expandable__submenu"}))}get el(){return s(this)}static get watchers(){return{active:["handleActiveChange"]}}};r.style=n;export{r as ifx_sidebar_item};
+//# sourceMappingURL=p-ebf0ee06.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["sidebarItemCss","IfxSidebarItemStyle0","SidebarItem","constructor","hostRef","this","icon","showIcon","showIconWrapper","href","internalHref","target","isExpandable","isNested","isSubMenuItem","active","isActionItem","internalActiveState","handleActiveChange","newValue","oldValue","labelElement","getNavItem","el","shadowRoot","handleClassList","handleConsoleError","event","detail","handleEventEmission","ifxSidebarMenu","emit","type","className","classList","contains","getExpandableMenu","expandableSubmenu","querySelector","getSidebarMenuItems","sidebarItems","querySelectorAll","length","getSidebarMenuItem","sidebarItem","toggleSubmenu","menuItem","expandableMenu","ifxSidebarActionItem","ifxSidebarNavigationItem","handleItemClick","handleExpandableMenu","sidebarExpandableMenu","forEach","li","document","createElement","appendChild","parentElementIsSidebar","parentElement","tagName","toUpperCase","checkIfMenuItemIsNested","parentIsSidebar","checkIfMenuItemIsSubMenu","navItem","isActive","iteratedComponent","activeAttributeValue","getAttribute","getParentSection","handleBorderIndicatorDisplacement","handleItem","item","isOpen","activeMenuItemSection","getActiveItemSection","children","child","topLevelItems","setHref","toLowerCase","trim","undefined","setActiveClasses","activeMenuItem","expandMenu","ac","isItemExpandable","handleActiveState","handleKeyDown","key","componentDidLoad","componentWillLoad","componentWillUpdate","render","h","tabIndex","onKeyDown","onClick","class","isNaN","numberIndicator","variant","number"],"sources":["src/components/navigation/sidebar/sidebar-item.scss?tag=ifx-sidebar-item&encapsulation=shadow","src/components/navigation/sidebar/sidebar-item.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n:host {\n  position: relative;\n}\n\n.sidebar__nav-item,\n.sidebar__nav-item.header__section {\n  &:focus {\n    outline: none;\n\n    & .sidebar__nav-item-icon-wrapper {\n      color: tokens.$ifxColorOcean600;\n    }\n\n    & .sidebar__nav-item-label {\n      outline: none;\n      color: tokens.$ifxColorOcean600;\n    }\n\n    & .sidebar__nav-item-indicator {\n      & .item__arrow-wrapper {\n        & ifx-icon {\n          color: tokens.$ifxColorOcean600;\n        }\n      }\n    }\n  }\n\n  &:hover {\n    outline: none;\n\n    & .sidebar__nav-item-icon-wrapper {\n      color: tokens.$ifxColorOcean600;\n    }\n\n    & .sidebar__nav-item-label {\n      outline: none;\n      color: tokens.$ifxColorOcean600;\n    }\n\n    & .sidebar__nav-item-indicator {\n      & .item__arrow-wrapper {\n        & ifx-icon {\n          color: tokens.$ifxColorOcean600;\n        }\n      }\n    }\n  }\n}\n\n.sidebar__nav-item {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  width: 100%;\n  padding: 8px 0px;\n  gap: 4px;\n  flex: none;\n  order: 0;\n  flex-grow: 0;\n  text-decoration: none;\n  color: tokens.$ifxColorBaseBlack;\n  cursor: pointer;\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n\n  &.extra-padding__bottom {\n    padding: 8px 0px 16px 0px;\n  }\n\n  &.active {\n    color: tokens.$ifxColorOcean500;\n  }\n\n  &.active-section {\n    &::before {\n      content: \"\";\n      position: absolute;\n      left: -32px;\n      height: 40px;\n      width: 2px;\n      background: tokens.$ifxColorOcean500;\n    }\n  }\n\n\n  &.open {\n    padding: 8px 0px;\n\n    & .sidebar__nav-item-label {\n      font-size: 16px;\n      font-style: normal;\n      font-weight: 400;\n      line-height: 24px;\n    }\n\n    & .sidebar__nav-item-indicator {\n      & .item__arrow-wrapper {\n        & ifx-icon {\n          transform: rotate(-180deg);\n        }\n      }\n    }\n  }\n\n  &.header__section {\n    box-sizing: padding-box;\n    border-top: 1px solid tokens.$ifxColorEngineering200;\n    padding: 16px 0px;\n    display: -webkit-flex;\n    -webkit-line-clamp: 1;\n    -webkit-box-orient: horizontal;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    \n    &.no-top-border {\n      border-top: none;\n    }\n\n    &.active-section {\n      &::before {\n        content: \"\";\n        position: absolute;\n        left: -32px;\n        height: 40px;\n        width: 2px;\n        background: tokens.$ifxColorOcean500;\n      }\n    }\n\n    &.open {\n      \n      padding: 16px 0px 8px 0px;\n\n      & .sidebar__nav-item-indicator {\n        & .item__arrow-wrapper {\n          & ifx-icon {\n            transform: rotate(-180deg);\n          }\n        }\n      }\n    }\n\n    & .sidebar__nav-item-label {\n      color: tokens.$ifxColorBaseBlack;\n      font-family: Source Sans 3;\n      font-size: 16px;\n      font-style: normal;\n      font-weight: 600;\n      line-height: 24px;\n    }\n  }\n\n  &.submenu__item {\n    padding: 4px 0px;\n    \n    &.extra-padding__bottom {\n      padding: 4px 0px 16px 0px;\n    }\n  }\n\n  & .sidebar__nav-item-icon-wrapper {\n    display: flex;\n    width: tokens.$ifxSize300;\n    height: tokens.$ifxSize300;\n    justify-content: center;\n    align-items: center;\n    gap: tokens.$ifxSpace100;\n    flex-shrink: 0;\n\n    &.noIcon {\n      display: none;\n    }\n\n    & ifx-icon {\n      width: tokens.$ifxSize200;\n      height: tokens.$ifxSize200;\n    }\n  }\n\n  & .sidebar__nav-item-label {\n    font-style: normal;\n    font-weight: 400;\n    font-size: tokens.$ifxFontSizeM;\n    line-height: tokens.$ifxLineHeightM;\n    display: flex;\n    align-items: center;\n    flex: none;\n    order: 1;\n    flex-grow: 1;\n    cursor: pointer;\n  }\n\n  & .sidebar__nav-item-indicator {\n    display: flex;\n    flex-direction: row;\n    justify-content: center;\n    align-items: center;\n    padding: 0px 4px;\n    flex: none;\n    order: 2;\n    flex-grow: 0;\n  }\n}\n\n.expandable__submenu {\n  display: none;\n  list-style-type: none;\n  flex-direction: column;\n  padding: 0;\n  margin: 0;\n  padding-left: 40px;\n\n  &.open {\n    display: flex;\n  }\n}\n\n.header__section + .expandable__submenu{\n  padding-left: 0;\n}\n","import { Component, h, Prop, Element, State, Listen, Watch, Event, EventEmitter, Method } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-sidebar-item',\n  styleUrl: 'sidebar-item.scss',\n  shadow: true\n})\nexport class SidebarItem {\n  @Element() el;\n  @Prop() icon: string = \"\"\n  @State() showIcon: boolean = true;\n  @State() showIconWrapper: boolean = false;\n  @Prop() href: string = \"\";\n  @State() internalHref: string = \"\";\n  @Prop() target: string = \"_self\";\n  @State() isExpandable: boolean = false;\n  @State() isNested: boolean = true;\n  @State() isSubMenuItem: boolean = false;\n  @Prop() numberIndicator: number;\n  @Prop() active: boolean = false; // set to true manually or by clicking on a navigation item\n  @Prop() isActionItem: boolean = false; // if an item is an action item, it can not become active\n\n  @State() internalActiveState: boolean = false;\n\n  @Event({ bubbles: true, composed: true }) ifxSidebarMenu: EventEmitter;\n  @Event({ bubbles: true, composed: true }) ifxSidebarNavigationItem: EventEmitter;\n  @Event({ bubbles: true, composed: true }) ifxSidebarActionItem: EventEmitter;\n\n  @Prop() handleItemClick: (item: HTMLElement) => void;\n\n\n  @Watch('active')\n  handleActiveChange(newValue: boolean, oldValue: boolean) {\n    // If the item is an action item, ignore the active prop\n    if (this.isActionItem) {\n      this.internalActiveState = false;\n      return;\n    }\n    this.internalActiveState = newValue;\n    if (newValue !== oldValue) {\n      let labelElement = this.getNavItem(this.el.shadowRoot)\n      if (!this.isExpandable && !newValue) {\n        this.handleClassList(labelElement, 'remove', 'active');\n      }\n      if (!this.isExpandable && newValue) {\n        this.handleClassList(labelElement, 'add', 'active');\n      }\n    }\n  }\n\n\n\n  @Listen('consoleError')\n  handleConsoleError(event: CustomEvent<boolean>) {\n    if (event.detail) {\n      this.showIcon = false;\n    } else {\n      this.showIcon = true;\n    }\n  }\n\n  handleEventEmission() {\n    // Get the active item section\n    this.ifxSidebarMenu.emit(this.el)\n  }\n\n  handleClassList(el, type, className) {\n    el.classList[type](className)\n    if (type === 'contains') {\n      return el.classList.contains(className)\n    }\n  }\n\n  getExpandableMenu() {\n    const expandableSubmenu = this.el.shadowRoot.querySelector('.expandable__submenu')\n    return expandableSubmenu\n  }\n\n  getNavItem(el) {\n    return el?.querySelector('.sidebar__nav-item')\n  }\n\n\n\n  getSidebarMenuItems(el = this.el) {\n    const sidebarItems = el.querySelectorAll('ifx-sidebar-item');\n    if (sidebarItems.length === 0) {\n      return el.shadowRoot.querySelectorAll('ifx-sidebar-item');\n    }\n    return sidebarItems;\n  }\n\n  getSidebarMenuItem() {\n    const sidebarItem = this.el.shadowRoot.querySelector('.sidebar__nav-item')\n    return sidebarItem;\n  }\n\n\n  toggleSubmenu() {\n    if (this.isExpandable) {\n      const menuItem = this.getSidebarMenuItem();\n      const expandableMenu = this.getExpandableMenu();\n      this.handleClassList(expandableMenu, 'toggle', 'open');\n      this.handleClassList(menuItem, 'toggle', 'open');\n      // Emit an event with the current component\n      this.handleEventEmission();\n    } else {\n      // If the sidebar item is not expandable, it's a leaf item without a submenu.\n      // Emit an event to the parent `ifx-sidebar` component to notify it that a leaf item has been clicked.\n      if (this.isActionItem) { //its an action item that eg opens an overlay etc and should not influence the active state of the item\n        this.ifxSidebarActionItem.emit(this.el); // emit new event if isActionItem is true\n        return;\n      } else { //its a navigation item which becomes active after clicking it\n        this.handleActiveChange(true, this.internalActiveState)\n        this.ifxSidebarNavigationItem.emit(this.el);\n      }\n      // If the sidebar item is selectable (not expandable), then call the handler function with the current element.\n      if (this.handleItemClick) {\n        this.handleItemClick(this.el);\n      }\n    }\n    // // Emit an event with the current component\n    // this.handleEventEmission();\n  }\n\n\n\n  handleExpandableMenu(sidebarItems) {\n    const sidebarExpandableMenu = this.getExpandableMenu();\n    sidebarItems.forEach((el: HTMLElement) => {\n      const li = document.createElement('li')\n      li.appendChild(el)\n      sidebarExpandableMenu.appendChild(li)\n    })\n  }\n\n  parentElementIsSidebar() {\n    const parentElement = this.el.parentElement;\n    if (parentElement.tagName.toUpperCase() === 'IFX-SIDEBAR') {\n      return true;\n    } else return false;\n  }\n\n  checkIfMenuItemIsNested() {\n    const parentIsSidebar = this.parentElementIsSidebar()\n    if (parentIsSidebar) {\n      this.isNested = false;\n    }\n  }\n\n  checkIfMenuItemIsSubMenu() {\n    const parentElement = this.el.parentElement;\n    const navItem = this.getNavItem(parentElement.shadowRoot);\n    if(parentElement.tagName.toUpperCase() === 'IFX-SIDEBAR-ITEM' && !this.handleClassList(navItem, 'contains', 'header__section')) {\n      this.isSubMenuItem = true;\n    }else {\n      this.isSubMenuItem = false;\n    }\n  }\n\n  isActive(iteratedComponent) {\n    const activeAttributeValue = iteratedComponent.getAttribute('active');\n    const isActive = activeAttributeValue === 'true';\n    return isActive\n  }\n\n  getParentSection(el: HTMLElement) {\n    let parentElement = el.parentElement;\n\n    while (parentElement && parentElement.tagName.toUpperCase() !== 'IFX-SIDEBAR') {\n      if (parentElement.tagName.toUpperCase() === 'IFX-SIDEBAR-ITEM') {\n        return parentElement;\n      }\n      parentElement = parentElement.parentElement;\n    }\n\n    return null;\n  }\n\n\n\n  handleBorderIndicatorDisplacement(menuItem) {\n    // Recursive function to handle each item\n    const handleItem = (item, menuItem) => {\n      const isActive = this.isActive(item);\n      if (isActive) {\n        const isOpen = this.handleClassList(menuItem, 'contains', 'open');\n        const activeMenuItemSection = this.getActiveItemSection();\n        if (!isOpen) {\n          this.handleClassList(activeMenuItemSection, 'add', 'active-section');\n        } else {\n          this.handleClassList(activeMenuItemSection, 'remove', 'active-section');\n        }\n      }\n\n      // Process each child item\n      const children = this.getSidebarMenuItems(item);\n      children.forEach((child) => handleItem(child, menuItem));\n    }\n\n    // Start with the top-level items\n    const topLevelItems = this.getSidebarMenuItems();\n    topLevelItems.forEach((item) => handleItem(item, menuItem));\n  }\n\n\n  setHref() {\n    if (this.href.toLowerCase().trim() === \"\") {\n      this.internalHref = undefined;\n    } else this.internalHref = this.href;\n  }\n\n  getActiveItemSection() {\n    const parentIsSidebar = this.parentElementIsSidebar()\n    if (parentIsSidebar) {\n      const labelElement = this.getNavItem(this.el.shadowRoot)\n      return labelElement;\n    } else {\n      const labelElement = this.getNavItem(this.el.shadowRoot)\n      return labelElement;\n    }\n  }\n\n  @Method()\n  async setActiveClasses() {\n    const activeMenuItem = this.getNavItem(this.el.shadowRoot)\n    this.handleClassList(activeMenuItem, 'add', 'active')\n  }\n\n  @Method()\n  async expandMenu(ac: boolean){\n      const menuItem = this.getSidebarMenuItem();\n      const expandableMenu = this.getExpandableMenu();\n      this.handleClassList(expandableMenu, 'add', 'open');\n      this.handleClassList(menuItem, 'add', 'open');\n      if(ac){\n        this.handleClassList(expandableMenu, 'remove', 'active-section')\n        this.handleClassList(menuItem, 'remove', 'active-section')\n      }\n  }\n  \n  @Method()\n  async isItemExpandable(){\n    return this.isExpandable;\n  }\n\n  handleActiveState() {\n    if (this.internalActiveState) {\n      this.setActiveClasses()\n    }\n  }\n\n  handleKeyDown(event: KeyboardEvent) {\n    if (event.key === 'Enter') {\n      this.toggleSubmenu()\n    }\n  }\n\n  componentDidLoad() {\n    this.handleActiveState();\n    if (this.isExpandable) {\n      const sidebarItems = this.getSidebarMenuItems();\n      this.handleExpandableMenu(sidebarItems)\n    }\n  }\n  \n  componentWillLoad() {\n    this.internalActiveState = this.active;\n    this.checkIfMenuItemIsNested();\n    this.checkIfMenuItemIsSubMenu();\n    this.setHref()\n    const sidebarItems = this.getSidebarMenuItems();\n    if (sidebarItems.length !== 0) {\n      this.isExpandable = true;\n    } else {\n      this.isExpandable = false;\n    }\n  }\n\n  componentWillUpdate() {\n    // If the active prop has been set to true and the internalActiveState has not been set to true yet\n    if (this.active && !this.internalActiveState) {\n      // Set the internal active state to true\n      this.internalActiveState = this.active;\n\n      // Emit the event to notify the parent Sidebar\n      this.ifxSidebarNavigationItem.emit(this.el);\n    }\n  }\n\n\n  render() {\n    return (\n      <div>\n        <a tabIndex={1} onKeyDown={(event) => this.handleKeyDown(event)} href={this.internalHref} onClick={() => this.toggleSubmenu()} target={this.target} class={`sidebar__nav-item ${!this.isNested && this.isExpandable ? 'header__section' : \"\"} ${this.isSubMenuItem ? 'submenu__item' : \"\"}`}>\n          {this.icon &&\n            <div class={`sidebar__nav-item-icon-wrapper ${!this.showIcon ? 'noIcon' : \"\"}`}>\n              <ifx-icon icon={this.icon}></ifx-icon>\n            </div>}\n          <div class=\"sidebar__nav-item-label\">\n            <slot />\n          </div>\n          {\n          (this.isExpandable || !isNaN(this.numberIndicator)) &&\n            <div class=\"sidebar__nav-item-indicator\">\n              {this.isExpandable &&\n                <span class='item__arrow-wrapper'>\n                  <ifx-icon icon=\"chevron-down-16\" />\n                </span>\n              }\n\n              {!isNaN(this.numberIndicator) && !this.isExpandable && !this.isNested &&\n                <span class='item__number-indicator'>\n                  <ifx-indicator variant='number' number={this.numberIndicator}></ifx-indicator>\n                </span>}\n\n            </div>\n          }\n        </a>\n        {this.isExpandable && <ul class='expandable__submenu'></ul>}\n\n      </div>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,2 @@
+import{r as t,c as r,h as o,g as e}from"./p-b7a462e5.js";const i=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}:host{display:inline-flex;--_ifx-fallback-display:none !important}._ifx-radiobutton-fallback{display:var(--_ifx-fallback-display);position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;border:0 !important}.radioButton__container{box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:center;padding:0px;gap:8px;cursor:pointer;font-family:var(--ifx-font-family)}.radioButton__container.m .radioButton__wrapper{width:24px;height:24px}.radioButton__container .radioButton__wrapper{width:20px;height:20px;position:relative;display:block;border-radius:50%;background-color:#FFFFFF;border:1px solid #575352}.radioButton__container .radioButton__wrapper:focus{outline:none}.radioButton__container .radioButton__wrapper:focus::before{content:"";position:absolute;width:calc(100% + 4px);height:calc(100% + 4px);top:50%;left:50%;transform:translate(-50%, -50%);border:2px solid #0A8276;border-radius:50%}.radioButton__container .radioButton__wrapper .radioButton__wrapper-mark{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);background-color:#0A8276;border-radius:50%;display:flex;justify-content:center;align-items:center;border-color:transparent}.radioButton__container .radioButton__wrapper:hover{background-color:#EEEDED}.radioButton__container .radioButton__wrapper.disabled{background-color:#BFBBBB;border-color:#BFBBBB}.radioButton__container .radioButton__wrapper.disabled.error:hover,.radioButton__container .radioButton__wrapper.disabled.error:focus-visible{border-color:#CD002F}.radioButton__container .radioButton__wrapper.checked{border-color:#0A8276}.radioButton__container .radioButton__wrapper.checked::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:10px;height:10px;background-color:#0A8276;border-radius:50%}.radioButton__container .radioButton__wrapper.checked.disabled::after{background-color:#BFBBBB}.radioButton__container .radioButton__wrapper.checked:hover{border-color:#08665C}.radioButton__container .radioButton__wrapper.checked:hover .radioButton__wrapper-mark{background-color:#08665C}.radioButton__container .radioButton__wrapper.checked.disabled{background-color:#FFFFFF;border-color:#BFBBBB}.radioButton__container .radioButton__wrapper.checked.disabled.disabled::after{background-color:#BFBBBB}.radioButton__container .radioButton__wrapper.checked.disabled .radioButton__wrapper-mark{background-color:#BFBBBB}.radioButton__container .radioButton__wrapper.checked.error::after{border-color:#CD002F;background-color:#CD002F}.radioButton__container .radioButton__wrapper.error:not(.disabled){border-color:#CD002F}.radioButton__container .radioButton__wrapper.error:not(.disabled):hover,.radioButton__container .radioButton__wrapper.error:not(.disabled):focus-visible{border-color:#CD002F}.radioButton__container .label{display:flex;align-items:center;height:20px;font-style:normal;font-weight:400;font-size:0.875rem;line-height:1.25rem;color:#1D1D1D;flex:none;order:1;flex-grow:0}.radioButton__container .label.label-m{height:24px;font-size:1rem;line-height:1.5rem}.radioButton__container .label.disabled{color:#BFBBBB}.radioButton__container .label:hover{cursor:pointer}';const a=i;const n=class{constructor(o){t(this,o);this.ifxChange=r(this,"ifxChange",7);this.ifxError=r(this,"ifxError",7);this.disabled=false;this.error=false;this.size="s";this.internalChecked=false;this.hasSlot=false}componentWillLoad(){this.fallbackInput=document.createElement("input");this.fallbackInput.type="radio";this.fallbackInput.hidden=true;this.fallbackInput.className="_ifx-radiobutton-fallback";this.fallbackInput.style.cssText=`\n      display: none !important;\n      position: absolute !important;\n      opacity: 0 !important;\n      pointer-events: none !important;\n      width: 0 !important;\n      height: 0 !important;\n    `;this.fallbackInput.setAttribute("aria-hidden","true");this.fallbackInput.tabIndex=-1;this.el.appendChild(this.fallbackInput);if("attachInternals"in HTMLElement.prototype){try{this.internals=this.el.attachInternals()}catch(t){console.warn("ElementInternals not supported")}}this.internalChecked=this.checked||false;this.hasSlot=!!this.el.querySelector("[slot]")||this.el.innerHTML.trim()!==""}handleCheckedChange(t){this.internalChecked=t}updateFormValue(){var t;if((t=this.internals)===null||t===void 0?void 0:t.setFormValue){this.internals.setFormValue(this.internalChecked?this.value:null)}this.fallbackInput.checked=this.internalChecked;this.fallbackInput.name=this.name;this.fallbackInput.value=this.value;this.fallbackInput.disabled=this.disabled}errorChanged(t,r){if(t!==r){this.ifxError.emit(t)}}handleRadioButtonClick(t){if(this.disabled){t.stopPropagation();return}this.inputElement.click();this.internalChecked=this.inputElement.checked;this.checked=this.internalChecked;this.ifxChange.emit(this.internalChecked);const r=new CustomEvent("change",{bubbles:true,composed:true,detail:{checked:this.internalChecked}});this.el.dispatchEvent(r)}handleKeyDown(t){if([" ","Enter"].includes(t.key)){t.preventDefault();this.handleRadioButtonClick(new PointerEvent("click"))}}handleExternalChange(t){const r=t.target;if(r===this.el||r.tagName.toLowerCase()!=="ifx-radio-button")return;if(r.getAttribute("name")===this.name){this.internalChecked=false}}render(){return o("div",{key:"95e83d8c2acc9e2816eafa572c15d23a62ad8397",role:"radio","aria-checked":String(this.internalChecked),"aria-disabled":String(this.disabled),class:`radioButton__container ${this.size} ${this.disabled?"disabled":""}`,onClick:t=>this.handleRadioButtonClick(t),tabindex:this.disabled?-1:0},o("div",{key:"0f069aee0c34e4a412febc8bce0f6146526533f4",class:`radioButton__wrapper \n            ${this.internalChecked?"checked":""} \n            ${this.disabled?"disabled":""} \n            ${this.error?"error":""}`},this.internalChecked&&o("div",{key:"5bfb321964a7f772f1deb9aad645944f9f465d82",class:"radioButton__wrapper-mark"})),this.hasSlot&&o("div",{key:"52b233fdf2725ce78448d1c535dfaa539b417d12",class:`label ${this.size==="m"?"label-m":""} ${this.disabled?"disabled":""}`},o("slot",{key:"c0890ab3ce5a7a7a0e851a68865e0f8567b3d80c"})),o("input",{key:"494e9271029854250e5f767352a65a93021dbee9",type:"radio",hidden:true,ref:t=>this.inputElement=t,name:this.name,value:this.value,checked:this.internalChecked,disabled:this.disabled,onClick:t=>t.stopPropagation()}))}static get formAssociated(){return true}get el(){return e(this)}static get watchers(){return{checked:["handleCheckedChange"],internalChecked:["updateFormValue"],error:["errorChanged"]}}};n.style=a;export{n as ifx_radio_button};
+//# sourceMappingURL=p-f338fb85.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["radioButtonCss","IfxRadioButtonStyle0","RadioButton","constructor","hostRef","this","disabled","error","size","internalChecked","hasSlot","componentWillLoad","fallbackInput","document","createElement","type","hidden","className","style","cssText","setAttribute","tabIndex","el","appendChild","HTMLElement","prototype","internals","attachInternals","e","console","warn","checked","querySelector","innerHTML","trim","handleCheckedChange","newValue","updateFormValue","_a","setFormValue","value","name","errorChanged","oldValue","ifxError","emit","handleRadioButtonClick","event","stopPropagation","inputElement","click","ifxChange","changeEvent","CustomEvent","bubbles","composed","detail","dispatchEvent","handleKeyDown","ev","includes","key","preventDefault","PointerEvent","handleExternalChange","target","tagName","toLowerCase","getAttribute","render","h","role","String","class","onClick","tabindex","ref"],"sources":["src/components/radio-button/radio-button.scss?tag=ifx-radio-button&encapsulation=shadow","src/components/radio-button/radio-button.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n    display: inline-flex;\n    --_ifx-fallback-display: none !important;\n}\n\n._ifx-radiobutton-fallback {\n    display: var(--_ifx-fallback-display);\n    position: absolute !important;\n    width: 1px !important;\n    height: 1px !important;\n    padding: 0 !important;\n    margin: -1px !important;\n    overflow: hidden !important;\n    clip: rect(0,0,0,0) !important;\n    border: 0 !important;\n  }\n\n.radioButton__container {\n    box-sizing: border-box;\n    display: inline-flex;\n    flex-direction: row;\n    align-items: center;\n    padding: 0px;\n    gap: tokens.$ifxSpace100;\n    cursor: pointer;\n    font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n\n    &.m .radioButton__wrapper {\n        width: tokens.$ifxSize300;\n        height: tokens.$ifxSize300;\n    }\n\n    .radioButton__wrapper {\n        width: tokens.$ifxSize250;\n        height: tokens.$ifxSize250;\n        position: relative;\n        display: block;\n        border-radius: 50%;\n        background-color: tokens.$ifxColorBaseWhite;\n        border: 1px solid #575352;\n\n        &:focus {\n            outline: none;\n\n            &::before {\n                content: '';\n                position: absolute;\n                width: calc(100% + 4px);\n                height: calc(100% + 4px);\n                top: 50%;\n                left: 50%;\n                transform: translate(-50%, -50%);\n                border: 2px solid tokens.$ifxColorOcean500;\n                border-radius: 50%;\n            }\n        }\n\n        .radioButton__wrapper-mark {\n            position: absolute;\n            top: 50%;\n            left: 50%;\n            transform: translate(-50%, -50%);\n            background-color: #0A8276;\n            border-radius: 50%;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            border-color: tokens.$ifxColorBaseTransparent;\n        }\n\n        &:hover {\n            background-color: tokens.$ifxColorEngineering200;\n        }\n\n        &.disabled {\n            background-color: #BFBBBB;\n            border-color: #BFBBBB;\n\n            &.error {\n\n                &:hover,\n                &:focus-visible {\n                    border-color: #CD002F;\n                }\n            }\n        }\n\n        &.checked {\n            border-color: #0A8276;\n\n            &::after {\n                content: \"\";\n                position: absolute;\n                top: 50%;\n                left: 50%;\n                transform: translate(-50%, -50%);\n                width: 10px;\n                height: 10px;\n                background-color: #0A8276;\n                border-radius: 50%;\n            }\n\n            &.disabled::after {\n                background-color: #BFBBBB;\n            }\n\n\n            &:hover {\n                border-color: tokens.$ifxColorOcean600;\n\n                & .radioButton__wrapper-mark {\n                    background-color: tokens.$ifxColorOcean600;\n                }\n            }\n\n            &.disabled {\n                background-color: tokens.$ifxColorBaseWhite;\n                border-color: #BFBBBB;\n\n                &.disabled::after {\n                    background-color: #BFBBBB;\n                }\n\n                & .radioButton__wrapper-mark {\n                    background-color: #BFBBBB;\n                }\n            }\n            &.error::after {\n                border-color: #CD002F;\n                background-color: #CD002F;\n            }\n        }\n\n        &.error:not(.disabled) {\n            border-color: #CD002F;\n\n            &:hover,\n            &:focus-visible {\n                border-color: #CD002F;\n            }\n        }\n    }\n\n    .label {\n        display: flex;\n        align-items: center;\n        height: tokens.$ifxSize250;\n        font-style: normal;\n        font-weight: 400;\n        font-size: tokens.$ifxFontSizeS;\n        line-height: tokens.$ifxLineHeightS;\n        color: tokens.$ifxColorBaseBlack;\n        flex: none;\n        order: 1;\n        flex-grow: 0;\n\n        &.label-m {\n            height: tokens.$ifxSize300;\n            font-size: tokens.$ifxFontSizeM;\n            line-height: tokens.$ifxLineHeightM;\n        }\n\n        &.disabled {\n            color: #BFBBBB;\n        }\n\n\n\n        &:hover {\n            cursor: pointer;\n        }\n    }\n}\n\n","import { Component, h, Prop, Element, State, Event, EventEmitter, Listen, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-radio-button',\n  styleUrl: 'radio-button.scss',\n  shadow: true,\n  formAssociated: true\n})\nexport class RadioButton {\n  @Element() el: HTMLElement;\n  @Prop() disabled: boolean = false;\n  @Prop() value: string;\n  @Prop() error: boolean = false;\n  @Prop({ reflect: true }) size: \"s\" | \"m\" = \"s\";\n  @Prop({ reflect: true }) name: string;\n  @Prop({ mutable: true }) checked: boolean;\n  @State() internalChecked: boolean = false;\n  @State() hasSlot: boolean = false;\n\n  private inputElement: HTMLInputElement;\n  private internals: ElementInternals;\n  private fallbackInput: HTMLInputElement;\n\n  @Event({ eventName: 'ifxChange' }) ifxChange: EventEmitter;\n  @Event({ eventName: 'ifxError' }) ifxError: EventEmitter;\n\n  componentWillLoad() {\n    // Fallback for form association\n    this.fallbackInput = document.createElement('input');\n    this.fallbackInput.type = 'radio';\n    this.fallbackInput.hidden = true;\n    this.fallbackInput.className = '_ifx-radiobutton-fallback';\n    this.fallbackInput.style.cssText = `\n      display: none !important;\n      position: absolute !important;\n      opacity: 0 !important;\n      pointer-events: none !important;\n      width: 0 !important;\n      height: 0 !important;\n    `;\n    this.fallbackInput.setAttribute('aria-hidden', 'true');\n    this.fallbackInput.tabIndex = -1;\n    this.el.appendChild(this.fallbackInput);\n\n    // Initialize ElementInternals if supported\n    if ('attachInternals' in HTMLElement.prototype) {\n      try {\n        this.internals = this.el.attachInternals();\n      } catch (e) {\n        console.warn('ElementInternals not supported');\n      }\n    }\n\n    // Initial state\n    this.internalChecked = this.checked || false;\n    this.hasSlot = !!this.el.querySelector('[slot]') || this.el.innerHTML.trim() !== '';\n  }\n\n  @Watch('checked')\n  handleCheckedChange(newValue: boolean) {\n    this.internalChecked = newValue;\n  }\n\n  @Watch('internalChecked')\n  updateFormValue() {\n    // Update both ElementInternals and fallback input\n    if (this.internals?.setFormValue) {\n      this.internals.setFormValue(this.internalChecked ? this.value : null);\n    }\n    this.fallbackInput.checked = this.internalChecked;\n    this.fallbackInput.name = this.name;\n    this.fallbackInput.value = this.value;\n    this.fallbackInput.disabled = this.disabled;\n  }\n\n  @Watch('error')\n    errorChanged(newValue: boolean, oldValue: boolean) {\n      if (newValue !== oldValue) {\n        this.ifxError.emit(newValue);\n      }\n    }\n\n  handleRadioButtonClick(event: Event) {\n    if (this.disabled) {\n      event.stopPropagation();\n      return;\n    }\n\n    this.inputElement.click();\n    this.internalChecked = this.inputElement.checked;\n    this.checked = this.internalChecked;\n    this.ifxChange.emit(this.internalChecked);\n\n    const changeEvent = new CustomEvent('change', {\n      bubbles: true,\n      composed: true,\n      detail: { checked: this.internalChecked }\n    });\n    this.el.dispatchEvent(changeEvent);\n  }\n\n  @Listen('keydown')\n  handleKeyDown(ev: KeyboardEvent) {\n    if ([' ', 'Enter'].includes(ev.key)) {\n      ev.preventDefault();\n      this.handleRadioButtonClick(new PointerEvent('click'));\n    }\n  }\n\n  @Listen('change', { target: 'document' })\n  handleExternalChange(event: Event) {\n    const target = event.target as HTMLElement;\n    if (target === this.el || target.tagName.toLowerCase() !== 'ifx-radio-button') return;\n    \n    if (target.getAttribute('name') === this.name) {\n      this.internalChecked = false;\n    }\n  }\n\n  render() {\n    return (\n      <div\n        role=\"radio\"\n        aria-checked={String(this.internalChecked)}\n        aria-disabled={String(this.disabled)}\n        class={`radioButton__container ${this.size} ${this.disabled ? 'disabled' : ''}`}\n        onClick={(e) => this.handleRadioButtonClick(e)}\n        tabindex={this.disabled ? -1 : 0}\n      >\n        <div\n          class={`radioButton__wrapper \n            ${this.internalChecked ? 'checked' : ''} \n            ${this.disabled ? 'disabled' : ''} \n            ${this.error ? 'error' : ''}`}\n        >\n          {this.internalChecked && <div class=\"radioButton__wrapper-mark\"></div>}\n        </div>\n\n        {this.hasSlot && (\n          <div class={`label ${this.size === \"m\" ? \"label-m\" : \"\"} ${this.disabled ? 'disabled' : ''}`}>\n            <slot />\n          </div>\n        )}\n\n        <input\n          type=\"radio\"\n          hidden\n          ref={el => this.inputElement = el}\n          name={this.name}\n          value={this.value}\n          checked={this.internalChecked}\n          disabled={this.disabled}\n          onClick={(e) => e.stopPropagation()}\n        />\n      </div>\n    );\n  }\n}"],"mappings":"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","ignoreList":[]}

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

@@ -7,7 +7,6 @@ export declare class IfxModal {
     opened?: boolean;
     showModal: boolean;
     caption: string;
-    captionAriaLabel: string | null;
     closeOnOverlayClick: boolean;
     ifxOpen: EventEmitter;
     ifxClose: EventEmitter;
@@ -16,7 +15,6 @@ export declare class IfxModal {
     alertIcon: string;
     okButtonLabel: string;
     cancelButtonLabel: string;
-    closeButtonAriaLabel: string | null;
     hostElement: HTMLElement;
     slotButtonsPresent: boolean;
     showCloseButton: boolean;

package/dist/types/components/modal/modal.stories.d.ts

@@ -5,8 +5,6 @@ declare const _default: {
         opened: boolean;
         cancelButtonLabel: string;
         okButtonLabel: string;
-        closeButtonAriaLabel: string;
-        captionAriaLabel: string;
     };
     argTypes: {
         caption: {
@@ -123,32 +121,6 @@ declare const _default: {
                 };
             };
         };
-        closeButtonAriaLabel: {
-            control: string;
-            description: string;
-            table: {
-                category: string;
-                defaultValue: {
-                    summary: string;
-                };
-                type: {
-                    summary: string;
-                };
-            };
-        };
-        captionAriaLabel: {
-            control: string;
-            description: string;
-            table: {
-                category: string;
-                defaultValue: {
-                    summary: string;
-                };
-                type: {
-                    summary: string;
-                };
-            };
-        };
         ifxOpen: {
             action: string;
             description: string;

package/dist/types/components/navigation/navbar/navbar-item.d.ts

@@ -48,6 +48,5 @@ export declare class NavbarItem {
     handleLabelWrapper(): void;
     handleItemGap(): void;
     removeEmptyItem(): void;
-    handleKeyDown(event: KeyboardEvent): void;
     render(): any;
 }

package/dist/types/components.d.ts

@@ -288,8 +288,6 @@ export namespace Components {
         "alertIcon": string;
         "cancelButtonLabel": string;
         "caption": string;
-        "captionAriaLabel": string | null;
-        "closeButtonAriaLabel": string | null;
         "closeOnOverlayClick": boolean;
         "okButtonLabel": string;
         "opened"?: boolean;
@@ -2202,8 +2200,6 @@ declare namespace LocalJSX {
         "alertIcon"?: string;
         "cancelButtonLabel"?: string;
         "caption"?: string;
-        "captionAriaLabel"?: string | null;
-        "closeButtonAriaLabel"?: string | null;
         "closeOnOverlayClick"?: boolean;
         "okButtonLabel"?: string;
         "onIfxClose"?: (event: IfxModalCustomEvent<any>) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@infineon/infineon-design-system-stencil",
-  "version": "35.2.1--canary.1923.85f4a97bda6510f44b7c7e47e8cd9b8183844346.0",
+  "version": "35.2.1--canary.1915.36639a15386e1d21092f01b66809b4485e01ce54.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",