@infineon/infineon-design-system-stencil 39.4.4--canary.1723.b2cb04cb46890b174f47cfd446a0e20dc3cee6fc.0 → 39.4.4-canary.0

package/dist/infineon-design-system-stencil/{p-2813423a.entry.js → p-210b1849.entry.js}

@@ -1,2 +1,2 @@
-import{r as a,c as r,h as s,a as e}from"./p-PqnYwNKt.js";import{d as i,t}from"./p-DcmcuUOA.js";import{i as h}from"./p-Bw2fh5LT.js";const o=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}:host{width:100%;display:flex}.search-bar{box-sizing:border-box;height:40px;background-color:#FFFFFF;display:flex;flex-direction:row;align-items:center;width:100%;font-family:var(--ifx-font-family)}.search-bar.closed{display:flex;width:auto;justify-content:flex-start}.search-bar .search-bar-wrapper{display:flex;align-items:center;gap:16px;width:100%}.search-bar .search-bar-wrapper a{text-decoration:none;font-size:1rem;font-style:normal;font-weight:600;line-height:1.5rem;color:#0A8276;cursor:pointer}.search-bar .search-bar-wrapper a:focus{outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276}.search-bar .search-bar-wrapper ifx-search-field{width:100%}.search-bar .search-bar__icon-wrapper{display:none;flex-direction:row;align-items:center}.search-bar .search-bar__icon-wrapper ifx-icon:hover{cursor:pointer}.search-bar.closed .search-bar__icon-wrapper{display:flex}.search-bar.closed .search-bar-wrapper{display:none}';const c=class{constructor(s){a(this,s);this.ifxInput=r(this,"ifxInput",7);this.ifxOpen=r(this,"ifxOpen",7);this.isOpen=true;this.disabled=false;this.autocomplete="on";this.handleCloseButton=()=>{this.internalState=!this.internalState;this.ifxOpen.emit(this.internalState)};this.handleFocus=()=>{this.internalState=true}}async onNavbarMobile(){this.ifxOpen.emit(false);this.internalState=false}handlePropChange(){this.internalState=this.isOpen}setInitialState(){this.internalState=this.isOpen}componentWillLoad(){this.setInitialState();this.ifxOpen.emit(this.internalState)}async componentDidLoad(){if(!h(this.el)){const a=i();t("ifx-search-bar",await a)}}handleInput(a){this.value=a.detail}render(){return s("div",{key:"79e53af4741984e201a7c62711236c8091538b7d",role:"search","aria-label":"a search field for user input","aria-value":this.value,"aria-disabled":this.disabled,class:`search-bar ${this.internalState?"open":"closed"}`},this.internalState?s("div",{class:"search-bar-wrapper"},s("ifx-search-field",{autocomplete:this.autocomplete,disabled:this.disabled,value:this.value,maxlength:this.maxlength,onIfxInput:this.handleInput.bind(this)},s("ifx-icon",{icon:"search-16",slot:"search-icon"})),s("a",{"aria-label":"Close button",href:"javascript:void(0)",onClick:this.handleCloseButton},"Close")):s("div",{class:"search-bar_icon-wrapper",onClick:this.handleCloseButton},s("ifx-icon",{icon:"search-16"})))}get el(){return e(this)}static get watchers(){return{isOpen:["handlePropChange"]}}};c.style=o;export{c as ifx_search_bar};
-//# sourceMappingURL=p-2813423a.entry.js.map
+import{r as a,c as r,h as s,a as e}from"./p-PqnYwNKt.js";import{d as i,t}from"./p-DcmcuUOA.js";import{i as h}from"./p-Bw2fh5LT.js";const o=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}:host{width:100%;display:flex}.search-bar{box-sizing:border-box;height:40px;background-color:#FFFFFF;display:flex;flex-direction:row;align-items:center;width:100%;font-family:var(--ifx-font-family)}.search-bar.closed{display:flex;width:auto;justify-content:flex-start}.search-bar .search-bar-wrapper{display:flex;align-items:center;gap:16px;width:100%}.search-bar .search-bar-wrapper a{text-decoration:none;font-size:1rem;font-style:normal;font-weight:600;line-height:1.5rem;color:#0A8276;cursor:pointer}.search-bar .search-bar-wrapper a:focus{outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276}.search-bar .search-bar-wrapper ifx-search-field{width:100%}.search-bar .search-bar__icon-wrapper{display:none;flex-direction:row;align-items:center}.search-bar .search-bar__icon-wrapper ifx-icon:hover{cursor:pointer}.search-bar.closed .search-bar__icon-wrapper{display:flex}.search-bar.closed .search-bar-wrapper{display:none}';const c=class{constructor(s){a(this,s);this.ifxInput=r(this,"ifxInput",7);this.ifxOpen=r(this,"ifxOpen",7);this.isOpen=true;this.disabled=false;this.autocomplete="on";this.handleCloseButton=()=>{this.internalState=!this.internalState;this.ifxOpen.emit(this.internalState)};this.handleFocus=()=>{this.internalState=true}}async onNavbarMobile(){this.ifxOpen.emit(false);this.internalState=false}handlePropChange(){this.internalState=this.isOpen}setInitialState(){this.internalState=this.isOpen}componentWillLoad(){this.setInitialState();this.ifxOpen.emit(this.internalState)}async componentDidLoad(){if(!h(this.el)){const a=i();t("ifx-search-bar",await a)}}handleInput(a){this.value=a.detail}render(){return s("div",{key:"3c4c2a5448190651f3b9e41f2712598758abcec9",role:"search","aria-label":"a search field for user input","aria-value":this.value,"aria-disabled":this.disabled,class:`search-bar ${this.internalState?"open":"closed"}`},this.internalState?s("div",{class:"search-bar-wrapper"},s("ifx-search-field",{autocomplete:this.autocomplete,disabled:this.disabled,value:this.value,maxlength:this.maxlength,onIfxInput:this.handleInput.bind(this)},s("ifx-icon",{icon:"search-16",slot:"search-icon"})),s("a",{"aria-label":"Close button",href:"javascript:void(0)",onClick:this.handleCloseButton},"Close")):s("div",{class:"search-bar_icon-wrapper",onClick:this.handleCloseButton},s("ifx-icon",{icon:"search-16"})))}get el(){return e(this)}static get watchers(){return{isOpen:["handlePropChange"]}}};c.style=o;export{c as ifx_search_bar};
+//# sourceMappingURL=p-210b1849.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["searchBarCss","SearchBar","constructor","hostRef","this","isOpen","disabled","autocomplete","handleCloseButton","internalState","ifxOpen","emit","handleFocus","onNavbarMobile","handlePropChange","setInitialState","componentWillLoad","componentDidLoad","isNestedInIfxComponent","el","framework","detectFramework","trackComponent","handleInput","event","value","detail","render","h","key","role","class","maxlength","onIfxInput","bind","icon","slot","href","onClick"],"sources":["src/components/search-bar/search-bar.scss?tag=ifx-search-bar&encapsulation=shadow","src/components/search-bar/search-bar.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n@use \"../../global/font.scss\";\r\n\r\n:host {\r\n  width: 100%; //revert\r\n  display: flex;\r\n}\r\n\r\n.search-bar {\r\n  box-sizing: border-box;\r\n  height: tokens.$ifxSize500;\r\n  background-color: tokens.$ifxColorBaseWhite;\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  width: 100%;\r\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\r\n\r\n\r\n\r\n  &.closed {\r\n    display: flex;\r\n    width: auto;\r\n    justify-content: flex-start;\r\n  }\r\n\r\n  & .search-bar-wrapper {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: tokens.$ifxSpace200;\r\n    width: 100%;\r\n\r\n    & a {\r\n      \r\n      text-decoration: none;\r\n      font-size: tokens.$ifxFontSizeM;\r\n      font-style: normal;\r\n      font-weight: tokens.$ifxFontWeightSemibold;\r\n      line-height: tokens.$ifxLineHeightM;\r\n      color: tokens.$ifxColorOcean500;\r\n      cursor: pointer;\r\n      &:focus{\r\n    outline: none;\r\n      box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean500;\r\n    }\r\n\r\n  }\r\n    & ifx-search-field {\r\n      width: 100%;\r\n    }\r\n  }\r\n\r\n  .search-bar__icon-wrapper {\r\n    display: none;\r\n    flex-direction: row;\r\n    align-items: center;\r\n\r\n    & ifx-icon:hover {\r\n      cursor: pointer;\r\n    }\r\n  }\r\n\r\n  &.closed {\r\n    .search-bar__icon-wrapper {\r\n      display: flex;\r\n    }\r\n\r\n    .search-bar-wrapper {\r\n      display: none;\r\n    }\r\n  }\r\n}","import { Component, h, Prop, Event, EventEmitter, State, Watch, Element, Method } from '@stencil/core';\r\nimport { trackComponent } from '../../global/utils/tracking'; \r\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\r\nimport { detectFramework } from '../../global/utils/framework-detection';\r\n\r\n@Component({\r\n  tag: 'ifx-search-bar',\r\n  styleUrl: 'search-bar.scss',\r\n  shadow: true,\r\n})\r\nexport class SearchBar {\r\n  @Prop() isOpen: boolean = true;\r\n  @Prop() disabled: boolean = false;\r\n  @State() internalState: boolean;\r\n  @Prop({ mutable: true }) value: string;\r\n  @Prop() maxlength?: number;\r\n  @Event() ifxInput: EventEmitter;\r\n  @Event() ifxOpen: EventEmitter;\r\n   @Prop() autocomplete: string = \"on\";\r\n  @Element() el;\r\n\r\n  @Method()\r\n  async onNavbarMobile() {\r\n    this.ifxOpen.emit(false)\r\n    this.internalState = false;\r\n  }\r\n\r\n  @Watch('isOpen')\r\n  handlePropChange() {\r\n    this.internalState = this.isOpen;\r\n  }\r\n\r\n  handleCloseButton = () => {\r\n    this.internalState = !this.internalState;\r\n    this.ifxOpen.emit(this.internalState)\r\n  }\r\n\r\n  setInitialState() {\r\n    this.internalState = this.isOpen;\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.setInitialState();\r\n    this.ifxOpen.emit(this.internalState)\r\n  }\r\n\r\n  async componentDidLoad() { \r\n    if(!isNestedInIfxComponent(this.el)) { \r\n      const framework = detectFramework();\r\n      trackComponent('ifx-search-bar', await framework)\r\n    }\r\n  }\r\n\r\n  handleInput(event: CustomEvent) {\r\n    this.value = event.detail;\r\n  }\r\n\r\n  handleFocus = () => {\r\n    this.internalState = true;\r\n  }\r\n\r\n\r\n  render() {\r\n    return (\r\n      <div role=\"search\" aria-label=\"a search field for user input\" aria-value={this.value} aria-disabled={this.disabled} class={`search-bar ${this.internalState ? 'open' : 'closed'}`}>\r\n        {this.internalState ? (\r\n          <div class=\"search-bar-wrapper\">\r\n            <ifx-search-field autocomplete={this.autocomplete} disabled={this.disabled} value={this.value} maxlength={this.maxlength} onIfxInput={this.handleInput.bind(this)}>\r\n              <ifx-icon icon=\"search-16\" slot=\"search-icon\"></ifx-icon>\r\n            </ifx-search-field>\r\n\r\n            <a aria-label=\"Close button\" href='javascript:void(0)' onClick={this.handleCloseButton}>Close</a>\r\n          </div>\r\n        ) : (\r\n          <div class=\"search-bar_icon-wrapper\"\r\n          onClick={this.handleCloseButton}>\r\n            <ifx-icon icon=\"search-16\"></ifx-icon>\r\n          </div>\r\n        )}\r\n        </div>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"mIAAA,MAAMA,EAAe,o+B,MCURC,EAAS,MALtB,WAAAC,CAAAC,G,8EAMUC,KAAMC,OAAY,KAClBD,KAAQE,SAAY,MAMnBF,KAAYG,aAAW,KAchCH,KAAiBI,kBAAG,KAClBJ,KAAKK,eAAiBL,KAAKK,cAC3BL,KAAKM,QAAQC,KAAKP,KAAKK,cAAc,EAuBvCL,KAAWQ,YAAG,KACZR,KAAKK,cAAgB,IAAI,CAwB5B,CA5DC,oBAAMI,GACJT,KAAKM,QAAQC,KAAK,OAClBP,KAAKK,cAAgB,K,CAIvB,gBAAAK,GACEV,KAAKK,cAAgBL,KAAKC,M,CAQ5B,eAAAU,GACEX,KAAKK,cAAgBL,KAAKC,M,CAG5B,iBAAAW,GACEZ,KAAKW,kBACLX,KAAKM,QAAQC,KAAKP,KAAKK,c,CAGzB,sBAAMQ,GACJ,IAAIC,EAAuBd,KAAKe,IAAK,CACnC,MAAMC,EAAYC,IAClBC,EAAe,uBAAwBF,E,EAI3C,WAAAG,CAAYC,GACVpB,KAAKqB,MAAQD,EAAME,M,CAQrB,MAAAC,GACE,OACEC,EAAK,OAAAC,IAAA,2CAAAC,KAAK,SAAQ,aAAY,gCAA4C,aAAA1B,KAAKqB,MAAK,gBAAiBrB,KAAKE,SAAUyB,MAAO,cAAc3B,KAAKK,cAAgB,OAAS,YACpKL,KAAKK,cACJmB,EAAK,OAAAG,MAAM,sBACTH,EAAA,oBAAkBrB,aAAcH,KAAKG,aAAcD,SAAUF,KAAKE,SAAUmB,MAAOrB,KAAKqB,MAAOO,UAAW5B,KAAK4B,UAAWC,WAAY7B,KAAKmB,YAAYW,KAAK9B,OAC1JwB,EAAU,YAAAO,KAAK,YAAYC,KAAK,iBAGlCR,EAAc,iCAAeS,KAAK,qBAAqBC,QAASlC,KAAKI,mBAA4B,UAGnGoB,EAAA,OAAKG,MAAM,0BACXO,QAASlC,KAAKI,mBACZoB,EAAU,YAAAO,KAAK,e","ignoreList":[]}

package/dist/infineon-design-system-stencil/{p-8a58c2be.entry.js → p-228e8272.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,c as s,h as i,d as e,a as n}from"./p-PqnYwNKt.js";import{g as o}from"./p-CmdmgBUp.js";import{d as r,t as c}from"./p-DcmcuUOA.js";import{i as h}from"./p-Bw2fh5LT.js";const a="ifx-icon{display:inline-flex;justify-content:center}ifx-icon:empty{display:none}";const l=class{constructor(i){t(this,i);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 n=i("path",e);s.push(n);if(t.firstChild){const e=t.querySelectorAll("path");const n=t.querySelectorAll("path").length;for(let t=0;t<n;t++){let n=this.convertHtmlToObject(e[t]);let o=i("path",n);s.push(o)}}return s}getSVG(t){const s=this.convertStringToHtml(this.ifxIcon);const e=s.getAttribute("width");const n=s.getAttribute("height");const o=s.getAttribute("fill");const r=s.getAttribute("viewBox");return i("svg",{class:"inline-svg",width:e,height:n,xmlns:"http://www.w3.org/2000/svg",fill:o,viewBox:r},...t)}constructIcon(){if(this.ifxIcon){const t=this.convertStringToHtml(this.ifxIcon);const s=this.convertPathsToVnode(t);const i=this.getSVG(s);return i}else if(this.icon!==""){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)}isInsideAgGrid(t){var s;let i=t;while(i){if((s=i.className)===null||s===void 0?void 0:s.toLowerCase().startsWith("ag-")){return true}i=i.parentElement}return false}isInsideChoices(t){var s;let i=t;while(i){if((s=i.className)===null||s===void 0?void 0:s.toLowerCase().startsWith("choices__")){return true}i=i.parentElement}return false}componentWillLoad(){this.internalIcon=this.icon;this.setIcon()}async componentDidLoad(){if(!h(this.el)){if(!this.isInsideAgGrid(this.el)&&!this.isInsideChoices(this.el)){const t=r();c("ifx-icon",await t)}}}render(){return i(e,{key:"e5cab8793c55383813b83e97038545526070d0a7"},this.constructIcon())}get el(){return n(this)}static get watchers(){return{icon:["updateIcon"]}}};l.style=a;export{l as ifx_icon};
-//# sourceMappingURL=p-8a58c2be.entry.js.map
+import{r as t,c as s,h as i,d as e,a as n}from"./p-PqnYwNKt.js";import{g as o}from"./p-CmdmgBUp.js";import{d as r,t as c}from"./p-DcmcuUOA.js";import{i as h}from"./p-Bw2fh5LT.js";const a="ifx-icon{display:inline-flex;justify-content:center}ifx-icon:empty{display:none}";const l=class{constructor(i){t(this,i);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 n=i("path",e);s.push(n);if(t.firstChild){const e=t.querySelectorAll("path");const n=t.querySelectorAll("path").length;for(let t=0;t<n;t++){let n=this.convertHtmlToObject(e[t]);let o=i("path",n);s.push(o)}}return s}getSVG(t){const s=this.convertStringToHtml(this.ifxIcon);const e=s.getAttribute("width");const n=s.getAttribute("height");const o=s.getAttribute("fill");const r=s.getAttribute("viewBox");return i("svg",{class:"inline-svg",width:e,height:n,xmlns:"http://www.w3.org/2000/svg",fill:o,viewBox:r},...t)}constructIcon(){if(this.ifxIcon){const t=this.convertStringToHtml(this.ifxIcon);const s=this.convertPathsToVnode(t);const i=this.getSVG(s);return i}else if(this.icon!==""){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)}isInsideAgGrid(t){var s;let i=t;while(i){if((s=i.className)===null||s===void 0?void 0:s.toLowerCase().startsWith("ag-")){return true}i=i.parentElement}return false}isInsideChoices(t){var s;let i=t;while(i){if((s=i.className)===null||s===void 0?void 0:s.toLowerCase().startsWith("choices__")){return true}i=i.parentElement}return false}componentWillLoad(){this.internalIcon=this.icon;this.setIcon()}async componentDidLoad(){if(!h(this.el)){if(!this.isInsideAgGrid(this.el)&&!this.isInsideChoices(this.el)){const t=r();c("ifx-icon",await t)}}}render(){return i(e,{key:"a1e7e069aeae0646c83f65b30aa43ba9454cec52"},this.constructIcon())}get el(){return n(this)}static get watchers(){return{icon:["updateIcon"]}}};l.style=a;export{l as ifx_icon};
+//# sourceMappingURL=p-228e8272.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["infineonIconStencilCss","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","consoleError","emit","toCamelCase","str","replace","_","chr","toUpperCase","m","toLowerCase","iconName","getIcon","isInsideAgGrid","el","_a","className","startsWith","parentElement","isInsideChoices","componentWillLoad","componentDidLoad","isNestedInIfxComponent","framework","detectFramework","trackComponent","render","Host","key"],"sources":["src/components/icon/infineonIconStencil.scss?tag=ifx-icon","src/components/icon/infineonIconStencil.tsx"],"sourcesContent":["ifx-icon {\r\n  display: inline-flex;\r\n  justify-content: center;\r\n\r\n  &:empty {\r\n    display: none;\r\n  }\r\n}","import { Component, Prop, h, Host, Event, EventEmitter, Watch, State, Element } from '@stencil/core';\r\nimport { getIcon } from '@infineon/infineon-icons'\r\nimport { trackComponent } from '../../global/utils/tracking'; \r\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\r\nimport { detectFramework } from '../../global/utils/framework-detection';\r\n\r\n@Component({\r\n  tag: 'ifx-icon',\r\n  styleUrl: './infineonIconStencil.scss'\r\n})\r\n\r\nexport class InfineonIconStencil {\r\n  @Element() el: HTMLElement;\r\n  @Prop({ mutable: true }) icon: string = \"\"\r\n  @Prop({ mutable: true }) ifxIcon: any;\r\n  @State() internalIcon: string;\r\n  @Event() consoleError: EventEmitter<boolean>;\r\n\r\n   @Watch('icon')\r\n    updateIcon(newIcon: string) { \r\n      this.internalIcon = newIcon;\r\n      this.setIcon()\r\n    }\r\n\r\n  convertStringToHtml(htmlString) { \r\n    const div = document.createElement('div')\r\n    div.innerHTML = htmlString\r\n    return div.firstChild\r\n  }\r\n\r\n  convertHtmlToObject(htmlElement) { \r\n    let pathToObject = Array\r\n      .from(htmlElement.attributes, ({ name, value }) => ({ name, value }))\r\n      .reduce((acc, current) => {\r\n        acc[current.name] = current.value\r\n        return acc\r\n      }, {})\r\n\r\n    return pathToObject\r\n  }\r\n\r\n  convertPathsToVnode(htmlPath) { \r\n    let svgPaths = []\r\n    const parentPath = this.convertHtmlToObject(htmlPath);\r\n    const parentPathToVnode = h(\"path\", parentPath);\r\n    svgPaths.push(parentPathToVnode)\r\n    if(htmlPath.firstChild) { \r\n      const paths = htmlPath.querySelectorAll('path');\r\n      const pathLength = htmlPath.querySelectorAll('path').length;\r\n      for(let i = 0; i < pathLength; i++) { \r\n        let pathToObject = this.convertHtmlToObject(paths[i])\r\n        let objToVnode = h(\"path\", pathToObject)\r\n        svgPaths.push(objToVnode)\r\n      }      \r\n    }\r\n    return svgPaths\r\n  }\r\n\r\n  getSVG(svgPath) {\r\n    const htmlPath = this.convertStringToHtml(this.ifxIcon) as SVGElement;\r\n    const width = htmlPath.getAttribute('width');\r\n    const height = htmlPath.getAttribute('height');\r\n    const fill = htmlPath.getAttribute('fill');\r\n    const viewBox = htmlPath.getAttribute('viewBox');\r\n    \r\n    return <svg class=\"inline-svg\" width={width} height={height} xmlns=\"http://www.w3.org/2000/svg\" fill={fill} viewBox={viewBox}>{...svgPath}</svg>\r\n  }\r\n\r\n  constructIcon() {\r\n    if(this.ifxIcon) {\r\n      const htmlPath = this.convertStringToHtml(this.ifxIcon)\r\n      const svgPath = this.convertPathsToVnode(htmlPath)\r\n      const SVG = this.getSVG(svgPath)\r\n      return SVG;\r\n    } else if(this.icon !== \"\") {\r\n       this.consoleError.emit(true)\r\n      return;\r\n    }  else { \r\n      return;\r\n    }\r\n  }\r\n\r\nsetIcon() { \r\n  const toCamelCase = str =>\r\n    str\r\n      .replace(/[-_]+(.)/g, (_, chr) => chr.toUpperCase()) // handle - and _ to uppercase\r\n      .replace(/^(.)/, (m) => m.toLowerCase()); // ensure first letter is lowercase\r\n\r\n  const iconName = toCamelCase(this.internalIcon);\r\n  this.ifxIcon = getIcon(iconName);\r\n}\r\n\r\n isInsideAgGrid(el: HTMLElement): boolean {\r\n  let current = el;\r\n  while (current) {\r\n    if (current.className?.toLowerCase().startsWith('ag-')) {\r\n      return true;\r\n    }\r\n    current = current.parentElement;\r\n  }\r\n  return false;\r\n}\r\n\r\n   isInsideChoices(el: HTMLElement): boolean {\r\n    let current = el;\r\n    while (current) {\r\n      if (current.className?.toLowerCase().startsWith('choices__')) {\r\n        return true;\r\n      }\r\n      current = current.parentElement;\r\n    }\r\n    return false;\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.internalIcon = this.icon;\r\n    this.setIcon()\r\n  }\r\n\r\n  async componentDidLoad() { \r\n    if(!isNestedInIfxComponent(this.el)) { \r\n      if(!this.isInsideAgGrid(this.el) && !this.isInsideChoices(this.el)) { \r\n        const framework = detectFramework();\r\n        trackComponent('ifx-icon', await framework)\r\n      }\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n      {this.constructIcon()}\r\n      </Host>\r\n    );\r\n  }\r\n}"],"mappings":"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","ignoreList":[]}

package/dist/infineon-design-system-stencil/{p-dbc6ae20.entry.js → p-252e292d.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,h as o}from"./p-PqnYwNKt.js";const r=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}:host{pointer-events:none}.card-overline{font-size:1rem;font-weight:400;color:#575352;padding-bottom:4px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;word-break:break-all}';const t=class{constructor(o){e(this,o)}render(){return o("div",{key:"181762fa666e11ebc4d8c11430f878494d6ff378",class:"card-overline"},o("slot",{key:"bbbc7a81dca17cef1ea809f9f87e9a010e5f212d"}))}};t.style=r;export{t as ifx_card_overline};
-//# sourceMappingURL=p-dbc6ae20.entry.js.map
+import{r as e,h as o}from"./p-PqnYwNKt.js";const r=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}:host{pointer-events:none}.card-overline{font-size:1rem;font-weight:400;color:#575352;padding-bottom:4px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;word-break:break-all}';const t=class{constructor(o){e(this,o)}render(){return o("div",{key:"e707ef390549c1d7ee1035a8b6630466a296b78b",class:"card-overline"},o("slot",{key:"3d7f0d857315b739162bf1989fe2035b90599049"}))}};t.style=r;export{t as ifx_card_overline};
+//# sourceMappingURL=p-252e292d.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["cardOverlineCss","CardOverline","render","h","key","class"],"sources":["src/components/card/card-overline/card-overline.scss?tag=ifx-card-overline&encapsulation=shadow","src/components/card/card-overline/card-overline.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n@use \"../../../global/font.scss\";\r\n\r\n:host {\r\n  pointer-events: none;\r\n}\r\n\r\n.card-overline {\r\n  font-size: tokens.$ifxFontSizeM;\r\n  font-weight: tokens.$ifxFontWeightRegular;\r\n  color: tokens.$ifxColorEngineering500;\r\n  padding-bottom: 4px;\r\n\r\n  display: -webkit-box;\r\n  -webkit-line-clamp: 1;\r\n  -webkit-box-orient: vertical;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n\r\n  word-break: break-all;\r\n\r\n}","import { Component, h } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'ifx-card-overline',\r\n  styleUrl: 'card-overline.scss',\r\n  shadow: true,\r\n})\r\n\r\nexport class CardOverline {\r\n\r\n  render() {\r\n    return (\r\n      <div class=\"card-overline\">\r\n        <slot />\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"2CAAA,MAAMA,EAAkB,0S,MCQXC,EAAY,M,yBAEvB,MAAAC,GACE,OACEC,EAAA,OAAAC,IAAA,2CAAKC,MAAM,iBACTF,EAAQ,QAAAC,IAAA,6C","ignoreList":[]}

package/dist/infineon-design-system-stencil/{p-bd8c6834.entry.js → p-27a7a852.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,c as t,h as o,d as i,a as n}from"./p-PqnYwNKt.js";import{d as a,t as s}from"./p-DcmcuUOA.js";import{i as r}from"./p-Bw2fh5LT.js";function c(e,t,o,i=20,n=0){const a=[];if(n>=i){return a}const s=e=>{const a=e.assignedNodes().filter((e=>e.nodeType===1));if(a.length>0){const e=a[0].parentElement;return c(e,t,o,i,n+1)}return[]};const r=Array.from(e.children||[]);for(const e of r){if(t(e)){continue}if(o(e)){a.push(e)}if(e.shadowRoot!=null){a.push(...c(e.shadowRoot,t,o,i,n+1))}else if(e.tagName==="SLOT"){a.push(...s(e))}else{a.push(...c(e,t,o,i,n+1))}}return a}function d(e){return e.hasAttribute("hidden")||e.hasAttribute("aria-hidden")&&e.getAttribute("aria-hidden")!=="false"||e.style.display===`none`||e.style.opacity===`0`||e.style.visibility===`hidden`||e.style.visibility===`collapse`}function l(e){return e.hasAttribute("disabled")||e.hasAttribute("aria-disabled")&&e.getAttribute("aria-disabled")!=="false"}function h(e){if(e.getAttribute("tabindex")==="-1"||d(e)||l(e)){return false}return e.hasAttribute("tabindex")||(e instanceof HTMLAnchorElement||e instanceof HTMLAreaElement)&&e.hasAttribute("href")||e instanceof HTMLButtonElement||e instanceof HTMLInputElement||e instanceof HTMLTextAreaElement||e instanceof HTMLSelectElement||e instanceof HTMLIFrameElement}function f(e,t,o){const i=e.animate(t,Object.assign(Object.assign({},o),{fill:"both"}));i.addEventListener("finish",(()=>{i.commitStyles();i.cancel()}));return i}const b={easing:"cubic-bezier(0.390, 0.575, 0.565, 1.000)"};const m={fadeIn:[Object.assign(Object.assign({offset:0},b),{opacity:0}),Object.assign(Object.assign({offset:1},b),{opacity:1})],fadeOut:[Object.assign(Object.assign({offset:0},b),{opacity:1}),Object.assign(Object.assign({offset:1},b),{opacity:0})]};const u=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}:host{display:block}.modal-container{display:none;justify-content:center;align-items:center;position:fixed;top:0;left:0;width:100%;height:100%;z-index:1060;overflow-y:auto;font-family:var(--ifx-font-family)}.modal-container.open{display:flex}.modal-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#1D1D1D;opacity:0.5;z-index:0}.modal-content-container{position:absolute;display:flex;justify-content:center;width:90%;min-height:218px;background-color:#fff;border-radius:0;box-shadow:0 2px 10px rgba(0, 0, 0, 0.1);box-sizing:border-box;align-items:stretch}.modal-content-container.no-overflow{overflow:hidden}.modal-content-container.no-overflow .modal-body{overflow-y:auto}@media screen and (min-width: 768px){.modal-content-container{width:540px;min-height:132px}.modal-content-container.m,.modal-content-container.l,.modal-content-container.s{width:90%}}@media screen and (min-width: 1024px){.modal-content-container.s{width:47vw}.modal-content-container.m{width:63vw}.modal-content-container.l{width:80%}}.modal-content{display:flex;flex-direction:column;width:100%;max-height:90vh}.modal-icon-container{display:flex;align-items:center;justify-content:center;width:32px;background-color:#0A8276;align-self:stretch}.modal-icon-container.danger{background-color:#CD002F}.modal-icon-container ifx-icon{color:#FFFFFF}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:24px;min-height:76px;max-height:105px;box-sizing:border-box;border-radius:1px 1px 0px 0px;border-bottom:1px solid #EEEDED}.modal-caption{max-height:56px;display:-webkit-box;overflow:hidden;white-space:pre-wrap;word-wrap:break-word;-webkit-line-clamp:2;-webkit-box-orient:vertical}.modal-header h2{margin:0;font-weight:600;font-size:1.25rem;line-height:28px}.modal-header button{background:none;border:none;font-size:1.5em;padding:0;cursor:pointer}.modal-close-button{align-self:flex-start;margin-right:-8px}.modal-body{padding:16px 24px;min-height:56px;box-sizing:border-box;flex:1}.modal-footer.buttons-present ::slotted(*){display:flex;justify-content:flex-end;gap:16px;padding:16px 24px 32px 16px}.modal-border{display:flex;align-items:center;justify-content:center;width:100%;font-size:1.5em;flex-grow:1}.modal-border.primary{background-color:#0A8276}.modal-border.secondary{background-color:#575352}.modal-border.danger{background-color:#CD002F}.modal-border.success{background-color:#4CA460}.modal-border.warning{background-color:#E16B25}.modal-border.orange{background-color:#E16B25}.modal-border.ocean{background-color:#0A8276}.modal-border.grey{background-color:#575352}.modal-border.grey-200{background-color:#EEEDED}.modal-border.red{background-color:#CD002F}.modal-border.green{background-color:#4CA460}.modal-border.berry{background-color:#9C216E}';const p=class{constructor(o){e(this,o);this.ifxOpen=t(this,"ifxOpen",7);this.ifxClose=t(this,"ifxClose",7);this.opened=false;this.showModal=this.opened||false;this.caption="Modal Title";this.closeOnOverlayClick=true;this.variant="default";this.size="s";this.alertIcon="";this.okButtonLabel="OK";this.cancelButtonLabel="Cancel";this.slotButtonsPresent=false;this.showCloseButton=true;this.focusableElements=[];this.handleResize=()=>{clearTimeout(this.resizeTimeout);this.resizeTimeout=setTimeout((()=>{if(this.showModal){this.handleComponentOverflow()}}),100)};this.handleTopFocus=()=>{this.attemptFocus(this.getLastFocusableElement())};this.handleBottomFocus=()=>{this.attemptFocus(this.getFirstFocusableElement())};this.handleKeypress=e=>{if(!this.showModal){return}if(e.key==="Escape"){this.doBeforeClose("ESCAPE_KEY")}}}async componentDidLoad(){if(!r(this.hostElement)){const e=a();s("ifx-modal",await e)}this.focusableElements=c(this.hostElement.shadowRoot,(e=>d(e)||e.matches("[data-focus-trap-edge]")),h);window.addEventListener("resize",this.handleResize)}disconnectedCallback(){window.removeEventListener("resize",this.handleResize)}componentWillRender(){if(this.showModal){this.handleComponentOverflow()}}async handleComponentOverflow(){const e=this.hostElement.shadowRoot.querySelector(".modal-content-container");if(this.showModal&&await this.isModalContentContainerHeightReachedViewport()){e.classList.add("no-overflow")}else if(e===null||e===void 0?void 0:e.classList.contains("no-overflow")){e===null||e===void 0?void 0:e.classList.remove("no-overflow")}}getFirstFocusableElement(){return this.focusableElements[0]}getLastFocusableElement(){return this.focusableElements[this.focusableElements.length-1]}attemptFocus(e){if(e==null){setTimeout((()=>{this.closeButton.focus()}));return}setTimeout((()=>{e.focus()}),0)}open(){this.showModal=true;try{const e=f(this.modalContainer,m.fadeIn,{duration:200});e.addEventListener("finish",(()=>{setTimeout((()=>{var e,t;(e=this.getLastFocusableElement())===null||e===void 0?void 0:e.focus();(t=this.getLastFocusableElement())===null||t===void 0?void 0:t.blur()}),0);this.ifxOpen.emit()}));this.hostElement.addEventListener("keydown",this.handleKeypress)}catch(e){this.ifxOpen.emit()}}close(){try{const e=f(this.modalContainer,m.fadeOut,{duration:200});e.addEventListener("finish",(()=>{this.showModal=false;this.ifxClose.emit()}));this.hostElement.removeEventListener("keydown",this.handleKeypress)}catch(e){this.showModal=false;this.ifxClose.emit()}}doBeforeClose(e){const t=[];t.push(e);const o=t.some((e=>e.defaultPrevented));if(!o){this.opened=false}}openedChanged(e){if(e===true){this.open()}else{this.close()}}handleOverlayClick(){if(this.closeOnOverlayClick){this.doBeforeClose("BACKDROP")}}handleContentUpdate(e){const t=e.target;const o=t.assignedNodes();if(o.length>0){o.forEach((e=>{if(e.observer){e.observer.disconnect();delete e.observer}const t=new MutationObserver(((e,t)=>{for(let t of e){if(t.type==="childList"){if(this.showModal){this.handleComponentOverflow()}}}}));t.observe(e,{attributes:true,childList:true,subtree:true});e.observer=t}))}}handleButtonsSlotChange(e){var t;if(((t=e.currentTarget.assignedElements()[0])===null||t===void 0?void 0:t.childElementCount)>0){this.slotButtonsPresent=true}else{this.slotButtonsPresent=false}}isModalContentContainerHeightReachedViewport(){return new Promise((e=>{setTimeout((()=>{const t=this.hostElement.shadowRoot.querySelector(".modal-content");const o=t.offsetHeight;const i=window.innerHeight;const n=3;e(o+n>=i*.9)}),100)}))}render(){const e=this.variant!=="default";return o(i,{key:"8927c0356e8b8987acf9310b559c1568c6de4f37"},o("div",{key:"df0f8b0be2953a4974ca739120c7b7495c52fc1f",ref:e=>this.modalContainer=e,class:`modal-container ${this.showModal?"open":""}`},o("div",{key:"8e6d35ddf390200573b38c6b2057bdf382838428",class:"modal-overlay",onClick:()=>this.handleOverlayClick()}),o("div",{key:"324587e244e5519f7e0d755cbf1b43b1ca998ce7","data-focus-trap-edge":true,onFocus:this.handleTopFocus,tabindex:"0"}),o("div",{key:"11cb80157d6ae5e0c57b786c0a295722b6c94d85",class:`modal-content-container ${this.size}`,role:"dialog","aria-modal":"true","aria-label":this.captionAriaLabel},e?o("div",{class:`modal-icon-container ${this.variant==="alert-brand"?"":"danger"}`},this.alertIcon?o("ifx-icon",{icon:this.alertIcon}):null):null,o("div",{key:"ec6865df02bd71ac1b8513e147bf48bab522479b",class:"modal-content"},o("div",{key:"c9591304fc6ee447a60d16eea4c5017903397691",class:"modal-header"},o("h2",{key:"de9241b726711243ca5101ce3e49250f743c994b",class:"modal-caption"},this.caption),this.showCloseButton&&o("ifx-icon-button",{key:"561e1f6783efc4f54f422856cc4cb36c89503529",class:"modal-close-button",ref:e=>this.closeButton=e,icon:"cross-16",variant:"tertiary",onClick:()=>this.doBeforeClose("CLOSE_BUTTON")})),o("div",{key:"12788241b957ea98433872238c15a8d2ad9c13f6",class:"modal-body"},o("slot",{key:"1dab9a551e1dbe7e90334869282ef0c6597104a7",name:"content",onSlotchange:e=>this.handleContentUpdate(e)})),o("div",{key:"215c3be2970c6191a97a878d8fb97d5c8a2a40e6",class:`modal-footer ${this.slotButtonsPresent?"buttons-present":""}`},o("slot",{key:"221bf1f5442baa42a6e098505baa32b5aa343ba0",name:"buttons",onSlotchange:e=>this.handleButtonsSlotChange(e)})))),o("div",{key:"516f850b612376cde60c4cff6f7e04927bda5e7e","data-focus-trap-edge":true,onFocus:this.handleBottomFocus,tabindex:"0"})))}get hostElement(){return n(this)}static get watchers(){return{opened:["openedChanged"]}}};p.style=u;export{p as ifx_modal};
-//# sourceMappingURL=p-bd8c6834.entry.js.map
+import{r as e,c as t,h as o,d as i,a as n}from"./p-PqnYwNKt.js";import{d as a,t as s}from"./p-DcmcuUOA.js";import{i as d}from"./p-Bw2fh5LT.js";function r(e,t,o,i=20,n=0){const a=[];if(n>=i){return a}const s=e=>{const a=e.assignedNodes().filter((e=>e.nodeType===1));if(a.length>0){const e=a[0].parentElement;return r(e,t,o,i,n+1)}return[]};const d=Array.from(e.children||[]);for(const e of d){if(t(e)){continue}if(o(e)){a.push(e)}if(e.shadowRoot!=null){a.push(...r(e.shadowRoot,t,o,i,n+1))}else if(e.tagName==="SLOT"){a.push(...s(e))}else{a.push(...r(e,t,o,i,n+1))}}return a}function c(e){return e.hasAttribute("hidden")||e.hasAttribute("aria-hidden")&&e.getAttribute("aria-hidden")!=="false"||e.style.display===`none`||e.style.opacity===`0`||e.style.visibility===`hidden`||e.style.visibility===`collapse`}function l(e){return e.hasAttribute("disabled")||e.hasAttribute("aria-disabled")&&e.getAttribute("aria-disabled")!=="false"}function h(e){if(e.getAttribute("tabindex")==="-1"||c(e)||l(e)){return false}return e.hasAttribute("tabindex")||(e instanceof HTMLAnchorElement||e instanceof HTMLAreaElement)&&e.hasAttribute("href")||e instanceof HTMLButtonElement||e instanceof HTMLInputElement||e instanceof HTMLTextAreaElement||e instanceof HTMLSelectElement||e instanceof HTMLIFrameElement}function f(e,t,o){const i=e.animate(t,Object.assign(Object.assign({},o),{fill:"both"}));i.addEventListener("finish",(()=>{i.commitStyles();i.cancel()}));return i}const b={easing:"cubic-bezier(0.390, 0.575, 0.565, 1.000)"};const m={fadeIn:[Object.assign(Object.assign({offset:0},b),{opacity:0}),Object.assign(Object.assign({offset:1},b),{opacity:1})],fadeOut:[Object.assign(Object.assign({offset:0},b),{opacity:1}),Object.assign(Object.assign({offset:1},b),{opacity:0})]};const u=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}:host{display:block}.modal-container{display:none;justify-content:center;align-items:center;position:fixed;top:0;left:0;width:100%;height:100%;z-index:1060;overflow-y:auto;font-family:var(--ifx-font-family)}.modal-container.open{display:flex}.modal-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#1D1D1D;opacity:0.5;z-index:0}.modal-content-container{position:absolute;display:flex;justify-content:center;width:90%;min-height:218px;background-color:#fff;border-radius:0;box-shadow:0 2px 10px rgba(0, 0, 0, 0.1);box-sizing:border-box;align-items:stretch}.modal-content-container.no-overflow{overflow:hidden}.modal-content-container.no-overflow .modal-body{overflow-y:auto}@media screen and (min-width: 768px){.modal-content-container{width:540px;min-height:132px}.modal-content-container.m,.modal-content-container.l,.modal-content-container.s{width:90%}}@media screen and (min-width: 1024px){.modal-content-container.s{width:47vw}.modal-content-container.m{width:63vw}.modal-content-container.l{width:80%}}.modal-content{display:flex;flex-direction:column;width:100%;max-height:90vh}.modal-icon-container{display:flex;align-items:center;justify-content:center;width:32px;background-color:#0A8276;align-self:stretch}.modal-icon-container.danger{background-color:#CD002F}.modal-icon-container ifx-icon{color:#FFFFFF}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:24px;min-height:76px;max-height:105px;box-sizing:border-box;border-radius:1px 1px 0px 0px;border-bottom:1px solid #EEEDED}.modal-caption{max-height:56px;display:-webkit-box;overflow:hidden;white-space:pre-wrap;word-wrap:break-word;-webkit-line-clamp:2;-webkit-box-orient:vertical}.modal-header h2{margin:0;font-weight:600;font-size:1.25rem;line-height:28px}.modal-header button{background:none;border:none;font-size:1.5em;padding:0;cursor:pointer}.modal-close-button{align-self:flex-start;margin-right:-8px}.modal-body{padding:16px 24px;min-height:56px;box-sizing:border-box;flex:1}.modal-footer.buttons-present ::slotted(*){display:flex;justify-content:flex-end;gap:16px;padding:16px 24px 32px 16px}.modal-border{display:flex;align-items:center;justify-content:center;width:100%;font-size:1.5em;flex-grow:1}.modal-border.primary{background-color:#0A8276}.modal-border.secondary{background-color:#575352}.modal-border.danger{background-color:#CD002F}.modal-border.success{background-color:#4CA460}.modal-border.warning{background-color:#E16B25}.modal-border.orange{background-color:#E16B25}.modal-border.ocean{background-color:#0A8276}.modal-border.grey{background-color:#575352}.modal-border.grey-200{background-color:#EEEDED}.modal-border.red{background-color:#CD002F}.modal-border.green{background-color:#4CA460}.modal-border.berry{background-color:#9C216E}';const p=class{constructor(o){e(this,o);this.ifxOpen=t(this,"ifxOpen",7);this.ifxClose=t(this,"ifxClose",7);this.opened=false;this.showModal=this.opened||false;this.caption="Modal Title";this.closeOnOverlayClick=true;this.variant="default";this.size="s";this.alertIcon="";this.okButtonLabel="OK";this.cancelButtonLabel="Cancel";this.slotButtonsPresent=false;this.showCloseButton=true;this.focusableElements=[];this.handleResize=()=>{clearTimeout(this.resizeTimeout);this.resizeTimeout=setTimeout((()=>{if(this.showModal){this.handleComponentOverflow()}}),100)};this.handleTopFocus=()=>{this.attemptFocus(this.getLastFocusableElement())};this.handleBottomFocus=()=>{this.attemptFocus(this.getFirstFocusableElement())};this.handleKeypress=e=>{if(!this.showModal){return}if(e.key==="Escape"){this.doBeforeClose("ESCAPE_KEY")}}}async componentDidLoad(){if(!d(this.hostElement)){const e=a();s("ifx-modal",await e)}this.focusableElements=r(this.hostElement.shadowRoot,(e=>c(e)||e.matches("[data-focus-trap-edge]")),h);window.addEventListener("resize",this.handleResize)}disconnectedCallback(){window.removeEventListener("resize",this.handleResize)}componentWillRender(){if(this.showModal){this.handleComponentOverflow()}}async handleComponentOverflow(){const e=this.hostElement.shadowRoot.querySelector(".modal-content-container");if(this.showModal&&await this.isModalContentContainerHeightReachedViewport()){e.classList.add("no-overflow")}else if(e===null||e===void 0?void 0:e.classList.contains("no-overflow")){e===null||e===void 0?void 0:e.classList.remove("no-overflow")}}getFirstFocusableElement(){return this.focusableElements[0]}getLastFocusableElement(){return this.focusableElements[this.focusableElements.length-1]}attemptFocus(e){if(e==null){setTimeout((()=>{this.closeButton.focus()}));return}setTimeout((()=>{e.focus()}),0)}open(){this.showModal=true;try{const e=f(this.modalContainer,m.fadeIn,{duration:200});e.addEventListener("finish",(()=>{setTimeout((()=>{var e,t;(e=this.getLastFocusableElement())===null||e===void 0?void 0:e.focus();(t=this.getLastFocusableElement())===null||t===void 0?void 0:t.blur()}),0);this.ifxOpen.emit()}));this.hostElement.addEventListener("keydown",this.handleKeypress)}catch(e){this.ifxOpen.emit()}}close(){try{const e=f(this.modalContainer,m.fadeOut,{duration:200});e.addEventListener("finish",(()=>{this.showModal=false;this.ifxClose.emit()}));this.hostElement.removeEventListener("keydown",this.handleKeypress)}catch(e){this.showModal=false;this.ifxClose.emit()}}doBeforeClose(e){const t=[];t.push(e);const o=t.some((e=>e.defaultPrevented));if(!o){this.opened=false}}openedChanged(e){if(e===true){this.open()}else{this.close()}}handleOverlayClick(){if(this.closeOnOverlayClick){this.doBeforeClose("BACKDROP")}}handleContentUpdate(e){const t=e.target;const o=t.assignedNodes();if(o.length>0){o.forEach((e=>{if(e.observer){e.observer.disconnect();delete e.observer}const t=new MutationObserver(((e,t)=>{for(let t of e){if(t.type==="childList"){if(this.showModal){this.handleComponentOverflow()}}}}));t.observe(e,{attributes:true,childList:true,subtree:true});e.observer=t}))}}handleButtonsSlotChange(e){var t;if(((t=e.currentTarget.assignedElements()[0])===null||t===void 0?void 0:t.childElementCount)>0){this.slotButtonsPresent=true}else{this.slotButtonsPresent=false}}isModalContentContainerHeightReachedViewport(){return new Promise((e=>{setTimeout((()=>{const t=this.hostElement.shadowRoot.querySelector(".modal-content");const o=t.offsetHeight;const i=window.innerHeight;const n=3;e(o+n>=i*.9)}),100)}))}render(){const e=this.variant!=="default";return o(i,{key:"6bbf2c70a6bec5646ac9e0dd0d407647d8a8bfe0"},o("div",{key:"ad9073f6168097d55b950cb1f998b65445af2528",ref:e=>this.modalContainer=e,class:`modal-container ${this.showModal?"open":""}`},o("div",{key:"98bef6177dcc0ebcd4fd2d6afb4dde487bd6da0c",class:"modal-overlay",onClick:()=>this.handleOverlayClick()}),o("div",{key:"107156697de5fe6a6777da70918891cb8a32744f","data-focus-trap-edge":true,onFocus:this.handleTopFocus,tabindex:"0"}),o("div",{key:"56252e01d98d2d99cd38bbabe66cdc7be5c3cd3f",class:`modal-content-container ${this.size}`,role:"dialog","aria-modal":"true","aria-label":this.captionAriaLabel},e?o("div",{class:`modal-icon-container ${this.variant==="alert-brand"?"":"danger"}`},this.alertIcon?o("ifx-icon",{icon:this.alertIcon}):null):null,o("div",{key:"3865db58ca34df99500d2c5d3e03070e7dc0bcbf",class:"modal-content"},o("div",{key:"81ea4d6edd35c84e903bfcaaebf5a51293e24412",class:"modal-header"},o("h2",{key:"efd86cf75acb7c8631e009714d987d4e92b00460",class:"modal-caption"},this.caption),this.showCloseButton&&o("ifx-icon-button",{key:"219502e33c5d4ae07b3f35295b60a717a3eef45e",class:"modal-close-button",ref:e=>this.closeButton=e,icon:"cross-16",variant:"tertiary",onClick:()=>this.doBeforeClose("CLOSE_BUTTON")})),o("div",{key:"e00b53e5f2759232d7c0c5aae77e6254708814a4",class:"modal-body"},o("slot",{key:"64b8b62f167181641116084d91ec29d3a84c9e78",name:"content",onSlotchange:e=>this.handleContentUpdate(e)})),o("div",{key:"1b7a3d6dd7ae33cab61b3b01a6ee0f83f19fa891",class:`modal-footer ${this.slotButtonsPresent?"buttons-present":""}`},o("slot",{key:"41a45a714c573e2b122ecced7fd258d80a74e7d6",name:"buttons",onSlotchange:e=>this.handleButtonsSlotChange(e)})))),o("div",{key:"eec4ae5bed38dbe5390afd80291a6c31d6bc62bd","data-focus-trap-edge":true,onFocus:this.handleBottomFocus,tabindex:"0"})))}get hostElement(){return n(this)}static get watchers(){return{opened:["openedChanged"]}}};p.style=u;export{p as ifx_modal};
+//# sourceMappingURL=p-27a7a852.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["queryShadowRoot","root","skipNode","isMatch","maxDepth","depth","matches","traverseSlot","$slot","assignedNodes","filter","node","nodeType","length","$slotParent","parentElement","children","Array","from","$child","push","shadowRoot","tagName","isHidden","$elem","hasAttribute","getAttribute","style","display","opacity","visibility","isDisabled","isFocusable","HTMLAnchorElement","HTMLAreaElement","HTMLButtonElement","HTMLInputElement","HTMLTextAreaElement","HTMLSelectElement","HTMLIFrameElement","animationTo","element","keyframes","options","animated","animate","Object","assign","fill","addEventListener","commitStyles","cancel","keyframeDefaults","easing","KEYFRAMES","fadeIn","offset","fadeOut","modalCss","IfxModal","constructor","hostRef","this","opened","showModal","caption","closeOnOverlayClick","variant","size","alertIcon","okButtonLabel","cancelButtonLabel","slotButtonsPresent","showCloseButton","focusableElements","handleResize","clearTimeout","resizeTimeout","setTimeout","handleComponentOverflow","handleTopFocus","attemptFocus","getLastFocusableElement","handleBottomFocus","getFirstFocusableElement","handleKeypress","event","key","doBeforeClose","componentDidLoad","isNestedInIfxComponent","hostElement","framework","detectFramework","trackComponent","el","window","disconnectedCallback","removeEventListener","componentWillRender","modalContentContainer","querySelector","isModalContentContainerHeightReachedViewport","classList","add","contains","remove","closeButton","focus","open","anim","modalContainer","duration","_a","_b","blur","ifxOpen","emit","err","close","ifxClose","trigger","triggers","prevented","some","defaultPrevented","openedChanged","newValue","handleOverlayClick","handleContentUpdate","e","slotElement","target","nodes","forEach","observer","disconnect","MutationObserver","mutationsList","_","mutation","type","observe","attributes","childList","subtree","handleButtonsSlotChange","currentTarget","assignedElements","childElementCount","Promise","resolve","modalContent","modalContentHeight","offsetHeight","viewportHeight","innerHeight","extraMarginForEdgeBrowser","render","isAlertVariant","h","Host","ref","class","onClick","onFocus","tabindex","role","captionAriaLabel","icon","name","onSlotchange"],"sources":["src/global/utils/focus-trap.ts","src/global/utils/animation.ts","src/components/modal/modal.scss?tag=ifx-modal&encapsulation=shadow","src/components/modal/modal.tsx"],"sourcesContent":["/**\r\n * Copy/pasted from https://github.com/andreasbm/focus-trap\r\n */\r\n\r\n/**\r\n * Traverses the slots of the open shadowroots and returns all children matching the query.\r\n * We need to traverse each child-depth one at a time because if an element should be skipped\r\n * (for example because it is hidden) we need to skip all of it's children. If we use querySelectorAll(\"*\")\r\n * the information of whether the children is within a hidden parent is lost.\r\n * @param {ShadowRoot | HTMLElement} root\r\n * @param skipNode\r\n * @param isMatch\r\n * @param {number} maxDepth\r\n * @param {number} depth\r\n * @returns {HTMLElement[]}\r\n */\r\nexport function queryShadowRoot(\r\n  root: ShadowRoot | HTMLElement,\r\n  skipNode: ($elem: HTMLElement) => boolean,\r\n  isMatch: ($elem: HTMLElement) => boolean,\r\n  maxDepth: number = 20,\r\n  depth: number = 0\r\n): HTMLElement[] {\r\n  const matches: HTMLElement[] = [];\r\n\r\n  // If the depth is above the max depth, abort the searching here.\r\n  if (depth >= maxDepth) {\r\n    return matches;\r\n  }\r\n\r\n  // Traverses a slot element\r\n  const traverseSlot = ($slot: HTMLSlotElement) => {\r\n    // Only check nodes that are of the type Node.ELEMENT_NODE\r\n    // Read more here https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType\r\n    const assignedNodes = $slot\r\n      .assignedNodes()\r\n      .filter((node) => node.nodeType === 1);\r\n    if (assignedNodes.length > 0) {\r\n      const $slotParent = assignedNodes[0].parentElement!;\r\n      return queryShadowRoot(\r\n        $slotParent,\r\n        skipNode,\r\n        isMatch,\r\n        maxDepth,\r\n        depth + 1\r\n      );\r\n    }\r\n\r\n    return [];\r\n  };\r\n\r\n  // Go through each child and continue the traversing if necessary\r\n  // Even though the typing says that children can't be undefined, Edge 15 sometimes gives an undefined value.\r\n  // Therefore we fallback to an empty array if it is undefined.\r\n  const children = Array.from(root.children || []) as HTMLElement[];\r\n  for (const $child of children) {\r\n    // Check if the element and its descendants should be skipped\r\n    if (skipNode($child)) {\r\n      // console.log('-- SKIP', $child);\r\n      continue;\r\n    }\r\n\r\n    // console.log('$child', $child);\r\n\r\n    // If the element matches we always add it\r\n    if (isMatch($child)) {\r\n      matches.push($child);\r\n    }\r\n\r\n    if ($child.shadowRoot != null) {\r\n      // If the element has a shadow root we need to traverse it\r\n      matches.push(\r\n        ...queryShadowRoot(\r\n          $child.shadowRoot,\r\n          skipNode,\r\n          isMatch,\r\n          maxDepth,\r\n          depth + 1\r\n        )\r\n      );\r\n    } else if ($child.tagName === 'SLOT') {\r\n      // If the child is a slot we need to traverse each assigned node\r\n      matches.push(...traverseSlot($child as HTMLSlotElement));\r\n    } else {\r\n      // Traverse the children of the element\r\n      matches.push(\r\n        ...queryShadowRoot($child, skipNode, isMatch, maxDepth, depth + 1)\r\n      );\r\n    }\r\n  }\r\n\r\n  return matches;\r\n}\r\n\r\n/**\r\n * Returns whether the element is hidden.\r\n * @param $elem\r\n */\r\nexport function isHidden($elem: HTMLElement): boolean {\r\n  return (\r\n    $elem.hasAttribute('hidden') ||\r\n    ($elem.hasAttribute('aria-hidden') &&\r\n      $elem.getAttribute('aria-hidden') !== 'false') ||\r\n    // A quick and dirty way to check whether the element is hidden.\r\n    // For a more fine-grained check we could use \"window.getComputedStyle\" but we don't because of bad performance.\r\n    // If the element has visibility set to \"hidden\" or \"collapse\", display set to \"none\" or opacity set to \"0\" through CSS\r\n    // we won't be able to catch it here. We accept it due to the huge performance benefits.\r\n    $elem.style.display === `none` ||\r\n    $elem.style.opacity === `0` ||\r\n    $elem.style.visibility === `hidden` ||\r\n    $elem.style.visibility === `collapse`\r\n  );\r\n\r\n  // If offsetParent is null we can assume that the element is hidden\r\n  // https://stackoverflow.com/questions/306305/what-would-make-offsetparent-null\r\n  // || $elem.offsetParent == null;\r\n}\r\n\r\n/**\r\n * Returns whether the element is disabled.\r\n * @param $elem\r\n */\r\nexport function isDisabled($elem: HTMLElement): boolean {\r\n  return (\r\n    $elem.hasAttribute('disabled') ||\r\n    ($elem.hasAttribute('aria-disabled') &&\r\n      $elem.getAttribute('aria-disabled') !== 'false')\r\n  );\r\n}\r\n\r\n/**\r\n * Determines whether an element is focusable.\r\n * Read more here: https://stackoverflow.com/questions/1599660/which-html-elements-can-receive-focus/1600194#1600194\r\n * Or here: https://stackoverflow.com/questions/18261595/how-to-check-if-a-dom-element-is-focusable\r\n * @param $elem\r\n */\r\nexport function isFocusable($elem: HTMLElement): boolean {\r\n  // Discard elements that are removed from the tab order.\r\n  if (\r\n    $elem.getAttribute('tabindex') === '-1' ||\r\n    isHidden($elem) ||\r\n    isDisabled($elem)\r\n  ) {\r\n    return false;\r\n  }\r\n\r\n  return (\r\n    // At this point we know that the element can have focus (eg. won't be -1) if the tabindex attribute exists\r\n    $elem.hasAttribute('tabindex') ||\r\n    // Anchor tags or area tags with a href set\r\n    (($elem instanceof HTMLAnchorElement || $elem instanceof HTMLAreaElement) &&\r\n      $elem.hasAttribute('href')) ||\r\n    // Form elements which are not disabled\r\n    $elem instanceof HTMLButtonElement ||\r\n    $elem instanceof HTMLInputElement ||\r\n    $elem instanceof HTMLTextAreaElement ||\r\n    $elem instanceof HTMLSelectElement ||\r\n    // IFrames\r\n    $elem instanceof HTMLIFrameElement\r\n  );\r\n}","export function animationTo(\r\n  element: HTMLElement,\r\n  keyframes: Keyframe | Keyframe[],\r\n  options?: KeyframeAnimationOptions\r\n) {\r\n  const animated = element.animate(keyframes, { ...options, fill: 'both' });\r\n  animated.addEventListener('finish', () => {\r\n    // @ts-ignore\r\n    animated.commitStyles();\r\n    animated.cancel();\r\n  });\r\n\r\n  return animated;\r\n}\r\n\r\nconst keyframeDefaults = {\r\n  easing: 'cubic-bezier(0.390, 0.575, 0.565, 1.000)',\r\n};\r\n\r\nexport const KEYFRAMES = {\r\n  fadeIn: [\r\n    {\r\n      offset: 0,\r\n      ...keyframeDefaults,\r\n      opacity: 0,\r\n    },\r\n    {\r\n      offset: 1,\r\n      ...keyframeDefaults,\r\n      opacity: 1,\r\n    },\r\n  ],\r\n  fadeOut: [\r\n    {\r\n      offset: 0,\r\n      ...keyframeDefaults,\r\n      opacity: 1,\r\n    },\r\n    {\r\n      offset: 1,\r\n      ...keyframeDefaults,\r\n      opacity: 0,\r\n    },\r\n  ],\r\n};","@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n@use \"../../global/font.scss\";\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n.modal-container {\r\n  display: none;\r\n  justify-content: center;\r\n  align-items: center;\r\n  position: fixed;\r\n  top: 0;\r\n  left: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  z-index: 1060;\r\n  overflow-y: auto;\r\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\r\n\r\n\r\n\r\n}\r\n\r\n.modal-container.open {\r\n  display: flex;\r\n}\r\n\r\n.modal-overlay {\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  background-color: tokens.$ifxColorBaseBlack;\r\n  opacity: 0.5;\r\n  z-index: 0;\r\n}\r\n\r\n.modal-content-container {\r\n  position: absolute;\r\n  display: flex;\r\n  justify-content: center;\r\n  width: 90%;\r\n  min-height: 218px;\r\n  background-color: #fff;\r\n  border-radius: tokens.$ifxBorderRadiusNone;\r\n  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\r\n  \r\n  //overflow: hidden;\r\n\r\n  box-sizing: border-box;\r\n  align-items: stretch;\r\n}\r\n\r\n.modal-content-container {\r\n  &.no-overflow { \r\n    overflow: hidden;\r\n    & .modal-body { \r\n      overflow-y: auto;\r\n    }\r\n  }\r\n}\r\n\r\n/* Add desktop size here */\r\n@media screen and (min-width: 768px) {\r\n  .modal-content-container {\r\n    width: 540px;\r\n    min-height: 132px;\r\n\r\n    &.m,\r\n    &.l,\r\n    &.s {\r\n      width: 90%;\r\n    }\r\n  }\r\n}\r\n\r\n@media screen and (min-width: 1024px) {\r\n  .modal-content-container {\r\n\r\n    &.s {\r\n      width: 47vw;\r\n    }\r\n\r\n    &.m {\r\n      width: 63vw;\r\n    }\r\n\r\n    &.l {\r\n      width: 80%;\r\n    }\r\n  }\r\n}\r\n\r\n.modal-content {\r\n  display: flex;\r\n  flex-direction: column;\r\n  width: 100%;\r\n  max-height: 90vh;\r\n}\r\n\r\n.modal-icon-container {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: 32px;\r\n  background-color: tokens.$ifxColorOcean500;\r\n  align-self: stretch;\r\n\r\n  &.danger {\r\n    background-color: tokens.$ifxColorRed500;\r\n  }\r\n\r\n  & ifx-icon {\r\n    color: tokens.$ifxColorBaseWhite;\r\n  }\r\n}\r\n\r\n.modal-header {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n  padding: 24px;\r\n  min-height: 76px;\r\n  max-height: 105px;\r\n  box-sizing: border-box;\r\n  border-radius: 1px 1px 0px 0px;\r\n  border-bottom: 1px solid tokens.$ifxColorEngineering200;\r\n}\r\n\r\n.modal-caption {\r\n  max-height: 56px;\r\n  display: -webkit-box;\r\n  overflow: hidden;\r\n  white-space: pre-wrap;\r\n  word-wrap: break-word;\r\n  -webkit-line-clamp: 2;\r\n  -webkit-box-orient: vertical; \r\n}\r\n\r\n.modal-header h2 {\r\n  margin: 0;\r\n  font-weight: tokens.$ifxFontWeightSemibold;\r\n  font-size: tokens.$ifxFontSizeXl;\r\n  line-height: 28px;\r\n}\r\n\r\n.modal-header button {\r\n  background: none;\r\n  border: none;\r\n  font-size: 1.5em;\r\n  padding: 0;\r\n  cursor: pointer;\r\n}\r\n\r\n.modal-close-button {\r\n  align-self: flex-start;\r\n  margin-right: -8px;\r\n}\r\n\r\n.modal-body {\r\n  padding: 16px 24px;\r\n  min-height: 56px;\r\n  box-sizing: border-box;\r\n  flex: 1;\r\n  \r\n  //overflow-y: auto;\r\n}\r\n\r\n.modal-footer.buttons-present ::slotted(*){\r\n  display: flex;\r\n  justify-content: flex-end;\r\n  gap: 16px;\r\n  padding: 16px 24px 32px 16px\r\n}\r\n\r\n.modal-border {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: 100%;\r\n  font-size: 1.5em;\r\n  flex-grow: 1;\r\n\r\n  &.primary {\r\n    background-color: tokens.$ifxColorOcean500;\r\n  }\r\n\r\n  &.secondary {\r\n    background-color: tokens.$ifxColorEngineering500;\r\n  }\r\n\r\n  &.danger {\r\n    background-color: tokens.$ifxColorRed500;\r\n  }\r\n\r\n  &.success {\r\n    background-color: tokens.$ifxColorGreen500;\r\n  }\r\n\r\n  &.warning {\r\n    background-color: tokens.$ifxColorOrange500;\r\n  }\r\n\r\n  &.orange {\r\n    background-color: tokens.$ifxColorOrange500;\r\n  }\r\n\r\n  &.ocean {\r\n    background-color: tokens.$ifxColorOcean500;\r\n  }\r\n\r\n  &.grey {\r\n    background-color: tokens.$ifxColorEngineering500;\r\n  }\r\n\r\n  &.grey-200 {\r\n    background-color: tokens.$ifxColorEngineering200;\r\n  }\r\n\r\n  &.red {\r\n    background-color: tokens.$ifxColorRed500;\r\n  }\r\n\r\n  &.green {\r\n    background-color: tokens.$ifxColorGreen500;\r\n  }\r\n\r\n  &.berry {\r\n    background-color: tokens.$ifxColorBerry500;\r\n  }\r\n}","import { Component, Prop, Element, State, Event, Host, EventEmitter, h, Watch } from '@stencil/core';\r\nimport { trackComponent } from '../../global/utils/tracking';\r\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\r\nimport { detectFramework } from '../../global/utils/framework-detection';\r\nimport { queryShadowRoot, isHidden, isFocusable } from '../../global/utils/focus-trap';\r\nimport { animationTo, KEYFRAMES } from '../../global/utils/animation';\r\n \r\ntype CloseEventTrigger = 'CLOSE_BUTTON' | 'ESCAPE_KEY' | 'BACKDROP';\r\n\r\nexport interface BeforeCloseEventDetail {\r\n  trigger: CloseEventTrigger;\r\n}\r\n@Component({\r\n  tag: 'ifx-modal',\r\n  styleUrl: 'modal.scss',\r\n  shadow: true\r\n})\r\nexport class IfxModal {\r\n  @Prop({ reflect: true, mutable: true }) opened?: boolean = false;\r\n  @State() showModal: boolean = this.opened || false;\r\n\r\n  @Prop() caption: string = 'Modal Title';\r\n  @Prop() captionAriaLabel: string | null;\r\n\r\n  @Prop() closeOnOverlayClick: boolean = true;\r\n\r\n  @Event() ifxOpen: EventEmitter;\r\n  @Event() ifxClose: EventEmitter;\r\n\r\n  @Prop() variant: 'default' | 'alert-brand' | 'alert-danger' = 'default';\r\n\r\n  @Prop() size: 's' | 'm' | 'l' = 's';\r\n\r\n  @Prop() alertIcon: string = '';\r\n  @Prop() okButtonLabel: string = 'OK';\r\n  @Prop() cancelButtonLabel: string = 'Cancel';\r\n  @Prop() closeButtonAriaLabel: string | null;\r\n\r\n  @Element() hostElement: HTMLElement;\r\n\r\n  @State() slotButtonsPresent: boolean = false;\r\n\r\n  @Prop() showCloseButton: boolean = true;\r\n\r\n  private modalContainer: HTMLElement;\r\n  private focusableElements: HTMLElement[] = [];\r\n  private closeButton: HTMLButtonElement | HTMLIfxIconButtonElement;\r\n  private resizeTimeout: ReturnType<typeof setTimeout>;\r\n\r\n  handleResize = () => {\r\n  clearTimeout(this.resizeTimeout);\r\n  this.resizeTimeout = setTimeout(() => {\r\n    if (this.showModal) {\r\n      this.handleComponentOverflow();\r\n    }\r\n  }, 100);\r\n};\r\n\r\n  async componentDidLoad() {\r\n    if(!isNestedInIfxComponent(this.hostElement)) { \r\n      const framework = detectFramework();\r\n      trackComponent('ifx-modal', await framework)\r\n    }\r\n    // Query all focusable elements and store them in `focusableElements`.\r\n    // Needed for the \"focus trap\" functionality.\r\n    this.focusableElements = queryShadowRoot(\r\n      this.hostElement.shadowRoot,\r\n      (el) => isHidden(el) || el.matches('[data-focus-trap-edge]'),\r\n      isFocusable\r\n    );\r\n    window.addEventListener('resize', this.handleResize);\r\n  }\r\n\r\n  disconnectedCallback() {\r\n  window.removeEventListener('resize', this.handleResize);\r\n}\r\n\r\n  componentWillRender() { \r\n    if(this.showModal) { \r\n      this.handleComponentOverflow();\r\n    }\r\n  }\r\n\r\n  async handleComponentOverflow() { \r\n    const modalContentContainer = this.hostElement.shadowRoot.querySelector('.modal-content-container');\r\n    if (this.showModal && await this.isModalContentContainerHeightReachedViewport()) {\r\n      modalContentContainer.classList.add('no-overflow')\r\n    } else if (modalContentContainer?.classList.contains('no-overflow')) {\r\n      modalContentContainer?.classList.remove('no-overflow')\r\n    }\r\n  }\r\n\r\n  getFirstFocusableElement(): HTMLElement | null {\r\n    return this.focusableElements[0];\r\n  }\r\n\r\n  getLastFocusableElement(): HTMLElement | null {\r\n    return this.focusableElements[this.focusableElements.length - 1];\r\n  }\r\n\r\n  handleTopFocus = () => {\r\n    this.attemptFocus(this.getLastFocusableElement());\r\n  };\r\n\r\n  handleBottomFocus = () => {\r\n    this.attemptFocus(this.getFirstFocusableElement());\r\n  };\r\n\r\n  attemptFocus(element: HTMLElement | null) {\r\n    if (element == null) {\r\n      setTimeout(() => { //wait until DOM is fully loaded\r\n        this.closeButton.focus();\r\n      },);\r\n      return;\r\n    }\r\n\r\n    setTimeout(() => { //wait until DOM is fully loaded\r\n      element.focus();\r\n    }, 0);\r\n  }\r\n\r\n  open() {\r\n    this.showModal = true;\r\n    try {\r\n      const anim = animationTo(this.modalContainer, KEYFRAMES.fadeIn, {\r\n        duration: 200,\r\n      });\r\n      anim.addEventListener('finish', () => {\r\n        // Setting focus on last item and removing immediately\r\n        // so, on tab press first element is focused\r\n        setTimeout(() => {\r\n          this.getLastFocusableElement()?.focus();\r\n          this.getLastFocusableElement()?.blur();\r\n        }, 0);\r\n\r\n        this.ifxOpen.emit();\r\n      });\r\n\r\n      this.hostElement.addEventListener('keydown', this.handleKeypress);\r\n    } catch (err) {\r\n      this.ifxOpen.emit();\r\n    }\r\n  }\r\n\r\n  close() {\r\n    try {\r\n      const anim = animationTo(this.modalContainer, KEYFRAMES.fadeOut, {\r\n        duration: 200,\r\n      });\r\n      anim.addEventListener('finish', () => {\r\n        this.showModal = false;\r\n        this.ifxClose.emit();\r\n      });\r\n      this.hostElement.removeEventListener('keydown', this.handleKeypress);\r\n    } catch (err) {\r\n      this.showModal = false;\r\n      this.ifxClose.emit();\r\n    }\r\n  }\r\n\r\n  handleKeypress = (event: KeyboardEvent) => {\r\n    if (!this.showModal) {\r\n      return;\r\n    }\r\n    if (event.key === 'Escape') {\r\n      this.doBeforeClose('ESCAPE_KEY');\r\n    }\r\n  };\r\n\r\n  doBeforeClose(trigger: CloseEventTrigger) {\r\n    const triggers = [];\r\n    triggers.push(trigger);\r\n    const prevented = triggers.some((event) => event.defaultPrevented);\r\n    if (!prevented) {\r\n      this.opened = false;\r\n    }\r\n  }\r\n\r\n  @Watch('opened')\r\n  openedChanged(newValue) {\r\n    if (newValue === true) {\r\n      this.open();\r\n    } else {\r\n      this.close()\r\n    }\r\n  }\r\n\r\n  handleOverlayClick() {\r\n    if (this.closeOnOverlayClick) {\r\n      this.doBeforeClose('BACKDROP')\r\n    }\r\n  }\r\n\r\n  handleContentUpdate(e) {\r\n    const slotElement = e.target;\r\n    const nodes = slotElement.assignedNodes();\r\n    if (nodes.length > 0) {\r\n      nodes.forEach(node => {\r\n        if (node.observer) {\r\n          node.observer.disconnect();\r\n          delete node.observer;\r\n        }\r\n        const observer = new MutationObserver((mutationsList, _) => {\r\n          for (let mutation of mutationsList) {\r\n            if (mutation.type === 'childList') {\r\n              if (this.showModal) {\r\n                this.handleComponentOverflow();\r\n              }\r\n            }\r\n          }\r\n        });\r\n        observer.observe(node, { attributes: true, childList: true, subtree: true });\r\n        node.observer = observer;\r\n      });\r\n    }\r\n  }\r\n\r\n  handleButtonsSlotChange(e) {\r\n    if (e.currentTarget.assignedElements()[0]?.childElementCount > 0) {\r\n      this.slotButtonsPresent = true;\r\n    } else {\r\n      this.slotButtonsPresent = false;\r\n    }\r\n  }\r\n\r\n isModalContentContainerHeightReachedViewport() {\r\n  //Adding timeout for proper height detection on Edge browser\r\n  return new Promise(resolve => {\r\n    setTimeout(() => {\r\n      const modalContent = this.hostElement.shadowRoot.querySelector('.modal-content') as HTMLElement;\r\n      const modalContentHeight = modalContent.offsetHeight;\r\n      const viewportHeight = window.innerHeight;\r\n      const extraMarginForEdgeBrowser = 3;\r\n      resolve(modalContentHeight + extraMarginForEdgeBrowser >= viewportHeight * 0.9);\r\n    }, 100);\r\n  });\r\n}\r\n\r\n\r\n  render() {\r\n    const isAlertVariant = this.variant !== 'default';\r\n    return (\r\n      <Host>\r\n        <div\r\n          ref={(el) => (this.modalContainer = el)}\r\n          class={`modal-container ${this.showModal ? 'open' : ''}`}\r\n        >\r\n          <div\r\n            class=\"modal-overlay\"\r\n            onClick={() => this.handleOverlayClick()}\r\n          ></div>\r\n          <div\r\n            data-focus-trap-edge\r\n            onFocus={this.handleTopFocus}\r\n            tabindex=\"0\"\r\n          ></div>\r\n          <div\r\n            class={`modal-content-container ${this.size}`}\r\n            role=\"dialog\"\r\n            aria-modal=\"true\"\r\n            aria-label={this.captionAriaLabel}>\r\n            {isAlertVariant ? (\r\n              <div class={`modal-icon-container ${this.variant === 'alert-brand' ? '' : 'danger'}`}>\r\n                {this.alertIcon ? <ifx-icon icon={this.alertIcon} /> : null}\r\n              </div>\r\n            ) : null}\r\n            <div class=\"modal-content\">\r\n              <div class=\"modal-header\">\r\n                <h2 class=\"modal-caption\">{this.caption}</h2>\r\n                {\r\n                  this.showCloseButton &&\r\n                  <ifx-icon-button class='modal-close-button' ref={(el) => (this.closeButton = el)} icon=\"cross-16\" variant=\"tertiary\" onClick={() => this.doBeforeClose('CLOSE_BUTTON')}>\r\n                  </ifx-icon-button>\r\n                }\r\n              </div>\r\n              <div class=\"modal-body\">\r\n                <slot name=\"content\" onSlotchange={(e) => this.handleContentUpdate(e)} />\r\n              </div>\r\n              <div class={`modal-footer ${this.slotButtonsPresent ? 'buttons-present' : ''}`}>\r\n                <slot name=\"buttons\" onSlotchange={(e) => this.handleButtonsSlotChange(e)}>\r\n                </slot>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div\r\n            data-focus-trap-edge\r\n            onFocus={this.handleBottomFocus}\r\n            tabindex=\"0\"\r\n          ></div>\r\n        </div>\r\n      </Host>\r\n\r\n    );\r\n  }\r\n}"],"mappings":"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","ignoreList":[]}

package/dist/infineon-design-system-stencil/{p-39561a49.entry.js → p-2d3e3eea.entry.js}

@@ -1,2 +1,2 @@
-import{r as i,h as n,a as e}from"./p-PqnYwNKt.js";import{d as t,t as r}from"./p-DcmcuUOA.js";import{i as a}from"./p-Bw2fh5LT.js";const o=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}:host{display:inline-flex}.indicator__container .dot__wrapper{display:flex;width:8px;height:8px;justify-content:center;align-items:center;flex-shrink:0;border-radius:50%;background-color:#0A8276}.indicator__container .number__container{height:16px;display:inline-flex;padding:0;min-width:16px;justify-content:center;align-items:center;border-radius:100px;background-color:#0A8276}.indicator__container .number__container .number__wrapper{padding:0 4px;color:#FFFFFF;text-align:center;font-size:0.875rem;font-style:normal;font-weight:600;line-height:16px}.indicator__container .number__container.inverted{background-color:#FFFFFF}.indicator__container .number__container.inverted .number__wrapper{color:#0A8276}';const s=class{constructor(n){i(this,n);this.inverted=false;this.variant="number";this.number=0}handleNumber(){this.filteredNumber=!isNaN(this.number)&&this.number>99?"99+":this.number}componentWillLoad(){this.handleNumber()}async componentDidLoad(){if(!a(this.el)){const i=t();r("ifx-indicator",await i)}}componentWillUpdate(){this.handleNumber()}render(){return n("div",{key:"35211d70a31d9bf69b84614694d4669877c8a6d9","aria-label":this.ariaLabel,class:"indicator__container"},this.variant==="number"&&n("div",{key:"888f42cb6ad70bb973b62468734bae7abf73f3d9",class:`number__container ${this.inverted?"inverted":""}`},n("div",{key:"4578b32ca5e7b7747eb7ae729e9732d06da3fcbc",class:"number__wrapper"},this.filteredNumber)),this.variant==="dot"&&n("div",{key:"2b3cd2500d4d64bbb27131201ca2d56f720209a0",class:"dot__wrapper"}))}get el(){return e(this)}};s.style=o;export{s as ifx_indicator};
-//# sourceMappingURL=p-39561a49.entry.js.map
+import{r as i,h as n,a as e}from"./p-PqnYwNKt.js";import{d as t,t as r}from"./p-DcmcuUOA.js";import{i as a}from"./p-Bw2fh5LT.js";const o=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}:host{display:inline-flex}.indicator__container .dot__wrapper{display:flex;width:8px;height:8px;justify-content:center;align-items:center;flex-shrink:0;border-radius:50%;background-color:#0A8276}.indicator__container .number__container{height:16px;display:inline-flex;padding:0;min-width:16px;justify-content:center;align-items:center;border-radius:100px;background-color:#0A8276}.indicator__container .number__container .number__wrapper{padding:0 4px;color:#FFFFFF;text-align:center;font-size:0.875rem;font-style:normal;font-weight:600;line-height:16px}.indicator__container .number__container.inverted{background-color:#FFFFFF}.indicator__container .number__container.inverted .number__wrapper{color:#0A8276}';const s=class{constructor(n){i(this,n);this.inverted=false;this.variant="number";this.number=0}handleNumber(){this.filteredNumber=!isNaN(this.number)&&this.number>99?"99+":this.number}componentWillLoad(){this.handleNumber()}async componentDidLoad(){if(!a(this.el)){const i=t();r("ifx-indicator",await i)}}componentWillUpdate(){this.handleNumber()}render(){return n("div",{key:"6bb6533b5cb81151a3133951e79bf3296b976d4a","aria-label":this.ariaLabel,class:"indicator__container"},this.variant==="number"&&n("div",{key:"bb5dbd9fa7bb3c70dcd8f0a8c257e65e26b74ff9",class:`number__container ${this.inverted?"inverted":""}`},n("div",{key:"500dd5cef6c3adb0d7b6a1404a8102fb1d25e969",class:"number__wrapper"},this.filteredNumber)),this.variant==="dot"&&n("div",{key:"9671fb9b2522f02c3c3b98727335045827d4f759",class:"dot__wrapper"}))}get el(){return e(this)}};s.style=o;export{s as ifx_indicator};
+//# sourceMappingURL=p-2d3e3eea.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["indicatorCss","Indicator","constructor","hostRef","this","inverted","variant","number","handleNumber","filteredNumber","isNaN","componentWillLoad","componentDidLoad","isNestedInIfxComponent","el","framework","detectFramework","trackComponent","componentWillUpdate","render","h","key","ariaLabel","class"],"sources":["src/components/indicator/indicator.scss?tag=ifx-indicator&encapsulation=shadow","src/components/indicator/indicator.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n@use \"../../global/font.scss\";\r\n\r\n:host {\r\n  display: inline-flex;\r\n}\r\n\r\n.indicator__container { \r\n  & .dot__wrapper { \r\n  display: flex;\r\n  width: 8px;\r\n  height: 8px;\r\n  justify-content: center;\r\n  align-items: center;\r\n  flex-shrink: 0;\r\n  border-radius: 50%;\r\n  background-color: tokens.$ifxColorOcean500;\r\n  }\r\n\r\n  & .number__container {\r\n  height: 16px;\r\n  display: inline-flex;\r\n  padding: 0; \r\n  min-width: 16px; \r\n  justify-content: center;\r\n  align-items: center;\r\n  border-radius: 100px;\r\n  background-color: tokens.$ifxColorOcean500;\r\n\r\n    & .number__wrapper {\r\n      padding: 0 4px;\r\n      color: tokens.$ifxColorBaseWhite;\r\n      text-align: center;\r\n      font-size: tokens.$ifxFontSizeS;\r\n      font-style: normal;\r\n      font-weight: tokens.$ifxFontWeightSemibold;\r\n      line-height: 16px;\r\n    }\r\n\r\n    &.inverted {\r\n      background-color: tokens.$ifxColorBaseWhite;\r\n\r\n      & .number__wrapper {\r\n        color: tokens.$ifxColorOcean500;\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\n\r\n","import { Component, h, Prop, Element, State } from '@stencil/core';\r\nimport { trackComponent } from '../../global/utils/tracking'; \r\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\r\nimport { detectFramework } from '../../global/utils/framework-detection';\r\n\r\n@Component({\r\n  tag: 'ifx-indicator',\r\n  styleUrl: 'indicator.scss',\r\n  shadow: true\r\n})\r\nexport class Indicator {\r\n  @Element() el;\r\n  @State() filteredNumber: string | number;\r\n  @Prop() inverted: boolean = false;\r\n  @Prop() ariaLabel: string | null;\r\n  @Prop() variant: string = 'number'\r\n  @Prop() number: number = 0;\r\n\r\n  handleNumber() {\r\n    this.filteredNumber = !isNaN(this.number) && this.number > 99 ? '99+' : this.number;\r\n  }\r\n\r\n  componentWillLoad() { \r\n    this.handleNumber()\r\n  }\r\n\r\n  async componentDidLoad() { \r\n    if(!isNestedInIfxComponent(this.el)) { \r\n      const framework = detectFramework();\r\n      trackComponent('ifx-indicator', await framework)\r\n    }\r\n  }\r\n\r\n  componentWillUpdate() {\r\n    this.handleNumber()\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div aria-label={this.ariaLabel} class='indicator__container'>\r\n       {this.variant === 'number' && \r\n       <div class={`number__container ${this.inverted ? 'inverted' : \"\"}`}>\r\n          <div class=\"number__wrapper\">\r\n            {this.filteredNumber}\r\n          </div> \r\n       </div>}\r\n       {this.variant === 'dot' && <div class=\"dot__wrapper\"></div>}\r\n      </div>\r\n    );\r\n  }\r\n}"],"mappings":"iIAAA,MAAMA,EAAe,swB,MCURC,EAAS,MALtB,WAAAC,CAAAC,G,UAQUC,KAAQC,SAAY,MAEpBD,KAAOE,QAAW,SAClBF,KAAMG,OAAW,CAkC1B,CAhCC,YAAAC,GACEJ,KAAKK,gBAAkBC,MAAMN,KAAKG,SAAWH,KAAKG,OAAS,GAAK,MAAQH,KAAKG,M,CAG/E,iBAAAI,GACEP,KAAKI,c,CAGP,sBAAMI,GACJ,IAAIC,EAAuBT,KAAKU,IAAK,CACnC,MAAMC,EAAYC,IAClBC,EAAe,sBAAuBF,E,EAI1C,mBAAAG,GACEd,KAAKI,c,CAGP,MAAAW,GACE,OACEC,EAAA,OAAAC,IAAA,wDAAiBjB,KAAKkB,UAAWC,MAAM,wBACrCnB,KAAKE,UAAY,UAClBc,EAAA,OAAAC,IAAA,2CAAKE,MAAO,qBAAqBnB,KAAKC,SAAW,WAAa,MAC3De,EAAK,OAAAC,IAAA,2CAAAE,MAAM,mBACRnB,KAAKK,iBAGVL,KAAKE,UAAY,OAASc,EAAA,OAAAC,IAAA,2CAAKE,MAAM,iB","ignoreList":[]}

package/dist/infineon-design-system-stencil/{p-4da5a2a5.entry.js → p-30af152b.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,c as i,h as t,a}from"./p-PqnYwNKt.js";import{d as r,t as s}from"./p-DcmcuUOA.js";import{i as n}from"./p-Bw2fh5LT.js";const l=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}:host{display:inline-block}.chip{position:relative}.chip__wrapper{display:inline-flex;align-items:center;justify-content:center;gap:8px;box-sizing:border-box;border-radius:9999px;background:#FFFFFF;cursor:pointer;transition:border 100ms ease;font:400 0.875rem/1.25rem "Source Sans 3"}.chip__wrapper .icon__wrapper{display:flex}.chip__wrapper.outlined,.chip__wrapper.filled-dark,.chip__wrapper.filled-light{outline:2px solid transparent}.chip__wrapper.outlined:focus-visible,.chip__wrapper.filled-dark:focus-visible,.chip__wrapper.filled-light:focus-visible{outline:2px solid #0A8276;outline-offset:2px}.chip__wrapper.outlined.chip__wrapper--opened .wrapper__open-button,.chip__wrapper.filled-dark.chip__wrapper--opened .wrapper__open-button,.chip__wrapper.filled-light.chip__wrapper--opened .wrapper__open-button{transform:rotate(-180deg)}.chip__wrapper.outlined.chip__wrapper--selected .wrapper__label .label__selected-options,.chip__wrapper.filled-dark.chip__wrapper--selected .wrapper__label .label__selected-options,.chip__wrapper.filled-light.chip__wrapper--selected .wrapper__label .label__selected-options{font:400 0.875rem/1.25rem "Source Sans 3"}.chip__wrapper.filled-dark.chip__wrapper--selected:not(.read-only),.chip__wrapper.filled-light.chip__wrapper--selected:not(.read-only){background-color:#0A8276;color:white}.chip__wrapper.filled-dark.chip__wrapper--selected:not(.read-only):hover,.chip__wrapper.filled-light.chip__wrapper--selected:not(.read-only):hover{background-color:#08665C}.chip__wrapper.filled-dark.chip__wrapper--selected:not(.read-only):hover.disabled,.chip__wrapper.filled-light.chip__wrapper--selected:not(.read-only):hover.disabled{background-color:#0A8276}.chip__wrapper.outlined{border:1px solid #8D8786}.chip__wrapper.outlined:hover:not(.read-only){border-color:#575352;background-color:#F7F7F7}.chip__wrapper.outlined:active:not(.read-only){border-color:#575352;background-color:#BFBBBB}.chip__wrapper.outlined.chip__wrapper--opened{border:1px solid #0A8276}.chip__wrapper.outlined.chip__wrapper--selected{outline:3px solid #0A8276;border:1px solid transparent;background-color:white}.chip__wrapper.outlined.chip__wrapper--selected:focus-visible{outline-offset:0px}.chip__wrapper.outlined.chip__wrapper--selected:hover:not(.read-only){outline-color:#08665C}.chip__wrapper.outlined.chip__wrapper--selected.read-only{outline:none;border:1px solid black}.chip__wrapper.outlined.disabled{outline:none;color:#BFBBBB;border:1px solid #BFBBBB}.chip__wrapper.outlined.disabled:hover{outline:none;border-color:#BFBBBB;background-color:white}.chip__wrapper.outlined.read-only{border:1px solid black}.chip__wrapper.outlined.read-only:focus-visible{outline:2px solid #0A8276;outline-offset:2px}.chip__wrapper.filled-dark{background-color:#3C3A39;color:white}.chip__wrapper.filled-dark:hover:not(.chip__wrapper--selected,.disabled,.read-only){background-color:#575352}.chip__wrapper.filled-dark:active:not(.chip__wrapper--selected,.disabled,.read-only){background-color:#8D8786;color:black}.chip__wrapper.filled-dark.disabled{outline:none;color:#BFBBBB}.chip__wrapper.filled-dark.disabled:hover:not(.chip__wrapper--selected){background-color:#3C3A39}.chip__wrapper.filled-dark.chip__wrapper--selected.read-only{border:1px solid #8D8786}.chip__wrapper.filled-dark.read-only{border:1px solid #8D8786}.chip__wrapper.filled-light{background-color:#EEEDED}.chip__wrapper.filled-light:hover:not(.read-only){background-color:#BFBBBB}.chip__wrapper.filled-light:active:not(.read-only){background-color:#8D8786}.chip__wrapper.filled-light.disabled{outline:none;color:#BFBBBB}.chip__wrapper.filled-light.disabled:hover:not(.chip__wrapper--selected){background-color:#EEEDED}.chip__wrapper.filled-light.chip__wrapper--selected.read-only{border:1px solid black}.chip__wrapper.filled-light.read-only{border:1px solid black}.chip__wrapper.chip__wrapper--small{padding:4px 8px;height:24px}.chip__wrapper.chip__wrapper--medium{padding:4px 12px;height:28px}.chip__wrapper.chip__wrapper--large{padding:8px 12px;height:36px}.wrapper__label{display:inline-flex;align-items:center;gap:4px}.wrapper__label .label__selected-options{font:600 0.875rem/1.25rem "Source Sans 3"}.wrapper__open-button{display:flex;align-items:center}.wrapper__unselect-button{display:flex;align-items:center}.chip__dropdown{position:absolute;z-index:1;box-shadow:0px 6px 9px 0px rgba(29, 29, 29, 0.1019607843);border:1px solid #EEEDED;border-radius:1px;padding:8px 0;min-width:222px;background-color:#FFFFFF}';const o=class{constructor(t){e(this,t);this.ifxChange=i(this,"ifxChange",7);this.placeholder="";this.size="medium";this.value=undefined;this.variant="single";this.theme="outlined";this.readOnly=false;this.disabled=false;this.icon="";this.opened=false;this.selectedOptions=[]}handleValueChange(e){this.syncSelectedOptionsWithProp(e)}handleReadOnlyChange(e){if(e){this.opened=false}}closeDropdownOnOutsideClick(e){const i=e.composedPath();const t=this.chip.shadowRoot.querySelector(".chip__wrapper");const a=this.chip.shadowRoot.querySelector(".chip__dropdown");if(!i.includes(a)&&!i.includes(t)&&this.opened){this.toggleDropdownMenu()}}handleKeyDown(e){if(e.code!=="Tab"){e.preventDefault()}if(e.target.tagName==="IFX-CHIP"){this.handleWrapperKeyDown(e)}else if(e.target.tagName==="IFX-CHIP-ITEM"){this.handleDropdownKeyDown(e)}}updateSelectedOptions(e){const i=e.detail;const t=[...this.selectedOptions];if(this.variant!=="multi"){if(i.selected){this.opened=false;const t=this.getChipItems();t.forEach((i=>{if(i.selected&&i!==e.target){i.chipState=Object.assign(Object.assign({},i.chipState),{emitIfxChipItemSelect:false});i.selected=false}}));this.selectedOptions=[i]}else{this.selectedOptions=[]}this.value=this.selectedOptions[0]?this.selectedOptions[0].value:undefined}else{if(i.selected){if(!this.selectedOptions.find((e=>e.value===i.value))){this.selectedOptions=[...this.selectedOptions,i]}}else{this.selectedOptions=this.selectedOptions.filter((e=>e.value!==i.value))}this.value=this.selectedOptions.map((e=>e.value))}if(i.emitIfxChange){this.ifxChange.emit({previousSelection:t,currentSelection:this.selectedOptions,name:this.placeholder})}}getChipItems(){return this.chip.querySelectorAll("ifx-chip-item")}getSelectedOptions(){if(this.variant!=="multi"){return this.selectedOptions.map((e=>e.label)).join("")}return this.selectedOptions.slice(0,2).map((e=>e.label)).join(", ")}toggleDropdownMenu(){if(this.readOnly)return;this.opened=!this.opened}focusChipItemAt(e=0){this.opened=true;const i=this.getChipItems();let t;if(e===-1){t=i.item(i.length-1)}else if(e>=0&&e<i.length){t=i.item(e)}else{console.error(`Invalid index: ${e}`);return}const a=t.shadowRoot.querySelector(".chip-item");if(a){setTimeout((()=>{a.focus()}),1)}}focusChip(){const e=this.chip.shadowRoot.querySelector(".chip__wrapper");e.focus()}handleUnselectButtonClick(e){e.stopPropagation();this.opened=false;let i=false;const t=this.getChipItems();t.forEach((e=>{if(e.selected){i=true;e.chipState=Object.assign(Object.assign({},e.chipState),{emitIfxChipItemSelect:false});e.selected=false}}));if(i){const e=this.selectedOptions;this.selectedOptions=[];this.value=[];this.ifxChange.emit({previousSelection:e,currentSelection:[],name:this.placeholder})}}handleWrapperClick(){if(!this.readOnly){this.toggleDropdownMenu()}}handleWrapperKeyDown(e){if(this.readOnly)return;if(!this.opened){switch(e.code){case"Space":case"Enter":case"ArrowDown":this.focusChipItemAt(0);break;case"ArrowUp":this.focusChipItemAt(-1);break}}else{switch(e.code){case"Escape":this.opened=false;this.focusChip();break}}}handleDropdownKeyDown(e){let i=this.getChipItems();let t=Array.from(i).indexOf(e.target);if(t===-1){console.error("Target not found in chip items");return}switch(e.code){case"ArrowDown":if(t===i.length-1)break;this.focusChipItemAt(t+1);break;case"ArrowUp":if(t===0)break;this.focusChipItemAt(t-1);break;case"Escape":this.opened=false;this.focusChip();break;case"Space":if(this.variant==="single"){this.opened=false;this.focusChip()}break;case"Enter":this.opened=false;this.focusChip();break}}syncChipState(){const e=this.getChipItems();let i=0;e.forEach((e=>{e.chipState={emitIfxChipItemSelect:true,size:this.size?this.size:"medium",variant:this.variant==="multi"?"multi":"single",key:i++}}))}syncSelectedOptionsWithProp(e){this.selectedOptions=[];const i=(()=>{let e=0;return()=>e++})();if(Array.isArray(e)){this.selectedOptions=e.map((e=>({value:e,label:e,selected:true,key:i(),emitIfxChange:true})))}else if(typeof e==="string"){this.selectedOptions=[{value:e,label:e,selected:true,key:i(),emitIfxChange:true}]}this.syncChipState()}componentWillLoad(){this.syncSelectedOptionsWithProp(this.value)}async componentDidLoad(){if(!n(this.chip)){const e=r();s("ifx-chip",await e)}}render(){return t("div",{key:"cd16644a94a1e31cea0b2cbbe39394d4a05a5a5b",class:"chip"},t("div",{key:"951decf38e88ff684f283a09f6bc513ca4a2c704",class:`chip__wrapper chip__wrapper--${this.size?this.size:"medium"}\n                  chip__wrapper--${this.variant==="multi"?"multi":"single"}\n                  ${this.opened&&!this.readOnly?"chip__wrapper--opened":""}\n                  ${this.selectedOptions.length?"chip__wrapper--selected":""}\n                  ${this.theme?this.theme:"outlined"}\n                  ${this.disabled?"disabled":""}\n                  ${this.readOnly?"read-only":""}`,tabIndex:0,onClick:!this.readOnly&&!this.disabled?()=>{this.handleWrapperClick()}:undefined,role:"combobox","aria-label":this.ariaLabel,"aria-value":this.getSelectedOptions(),"aria-haspopup":!this.readOnly?"listbox":undefined,"aria-expanded":!this.readOnly?this.opened.toString():undefined,"aria-controls":!this.readOnly?"dropdown":undefined,"aria-readonly":this.readOnly?"true":undefined,"aria-multiselectable":this.variant==="multi"?"true":undefined},this.icon&&t("div",{key:"cd8ab00ddfde3ba1dcdb7a82f963df1b81e4b5d5",class:"icon__wrapper"},t("ifx-icon",{key:"b14f92a609f24bc0b4617bb2b0d8262c52f11fab",icon:this.icon})),t("div",{key:"7ac3305d90985ddf45eb4df3cc22f9de89bf60de",class:"wrapper__label"},this.selectedOptions.length===0&&`${this.placeholder}`,this.selectedOptions.length!==0&&this.variant==="multi"&&this.placeholder!==""&&`${this.placeholder}:`,this.selectedOptions.length!==0&&t("div",{key:"e7c907adafd7e1601a4cbd05e1a7b415e1da05b6",class:"label__selected-options"},this.getSelectedOptions()),this.selectedOptions.length>2&&this.variant==="multi"&&t("ifx-indicator",{key:"4520777b0d729d95d57d87d5a32a95fcf44e0d84",variant:"number",inverted:this.theme==="outlined"?false:true,number:this.selectedOptions.length-2})),!this.readOnly&&(this.variant!=="multi"||this.variant==="multi"&&this.selectedOptions.length===0)&&t("div",{key:"ade24c6456b5443be577a4c0bd61d1b2dba68c91",class:"wrapper__open-button"},t("ifx-icon",{key:1,icon:`chevron-down-16`})),this.selectedOptions.length>=1&&this.variant==="multi"&&t("div",{key:"8b1937382b467ca305493896aaf065c10f7a01e8",class:"wrapper__unselect-button",onClick:!this.readOnly&&!this.disabled?e=>{this.handleUnselectButtonClick(e)}:undefined},t("ifx-icon",{key:2,icon:`cross16`}))),this.opened&&!this.readOnly&&t("div",{key:"073b6641d2320716a6d4b1149e72b61fa9b47dd8",id:"dropdown",role:"listbox",class:"chip__dropdown"},t("slot",{key:"55587cb1d438b11f0682c3b1d596a5dfb1d251d0"})))}get chip(){return a(this)}static get watchers(){return{value:["handleValueChange"],readOnly:["handleReadOnlyChange"]}}};o.style=l;const p=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}.chip-item{display:flex;align-items:center;gap:8px;padding:8px 16px;user-select:none;transition:all 100ms ease;transition-property:background, color}.chip-item:hover{cursor:pointer;background-color:#EEEDED}.chip-item:active{background-color:#BFBBBB}.chip-item:focus{outline:2px solid #0A8276}.chip-item.chip-item--large{font:400 1rem/1.5rem "Source Sans 3"}.chip-item.chip-item--small{font:400 0.875rem/1.25rem "Source Sans 3"}.chip-item.chip-item--selected{color:#0A8276}.chip-item.chip-item--selected .chip-item__selected-indicator{display:block}.chip-item__selected-indicator{display:none;margin-left:auto}';const c=class{constructor(t){e(this,t);this.ifxChipItemSelect=i(this,"ifxChipItemSelect",5);this.value=undefined;this.chipState={emitIfxChipItemSelect:true,variant:"multi",size:"large"};this.selected=false}updateItemSelection(e){if(this.chipState.variant==="single"){const i=e.target;if(this.chipItem!==i&&this.chipItem.parentElement===i.parentElement){this.selected=false}}}validateSelected(e,i){if(e!==i){if(this.chipState.emitIfxChipItemSelect){this.emitIfxChipItemSelectEvent()}else{this.chipState.emitIfxChipItemSelect=true}}}getItemLabel(){return this.chipItem.innerText}toggleItemSelection(){this.selected=!this.selected}emitIfxChipItemSelectEvent(e=true){this.ifxChipItemSelect.emit({emitIfxChange:e,key:this.chipState.key,label:this.getItemLabel(),selected:this.selected,value:this.value})}handleItemClick(){this.toggleItemSelection()}handleItemKeyDown(e){if(e.code==="Enter"||e.code==="Space"){this.toggleItemSelection()}}handleSelectedState(){if(this.selected){this.emitIfxChipItemSelectEvent(false)}}componentWillLoad(){this.handleSelectedState()}render(){return t("div",{key:"4d5ace01c02658ed46fbf42c36138a06c3d46049",class:`chip-item chip-item--${this.chipState.size} \n                    chip-item--${(this.selected&&this.chipState.variant)==="single"?"selected":""}`,tabIndex:0,onClick:()=>{this.handleItemClick()},onKeyDown:e=>{this.handleItemKeyDown(e)},role:"option","aria-selected":this.selected.toString()},this.chipState.variant==="multi"&&t("ifx-checkbox",{key:"bf1af2aaf0944351eb33ace8c704bbb4973951d6",checked:this.selected,tabIndex:-1,size:"s"}),t("div",{key:"50347975f1554b7a02ef2bde34750b361daad549",class:"chip-item__label"}," ",t("slot",{key:"9667dd32c70e5f4a7946499f828883efb10caff2"})," "),t("div",{key:"f2fcab283b717837bc8b6c09b6b3c6c72675e40c",class:"chip-item__selected-indicator"},t("ifx-icon",{key:"84e489e9a638f2165c436b10bea8d826ae6db11c",icon:"check-16"}," ")))}get chipItem(){return a(this)}static get watchers(){return{selected:["validateSelected"]}}};c.style=p;const h=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}:host{display:inline-flex}.container{display:inline-flex;justify-content:center;align-items:center;gap:32px;font-family:var(--ifx-font-family);flex-wrap:wrap}.container .items__per-page-wrapper{display:flex;align-items:center;gap:16px}.container .items__per-page-wrapper .items__per-page-label{color:#1D1D1D;font-size:14px;font-style:normal;font-weight:600;line-height:20px}.container .items__per-page-wrapper .items__per-page-field{display:flex;flex-direction:column;align-items:flex-start}.container .items__per-page-wrapper .items__per-page-field ifx-select{width:92px}.container .items__total-wrapper{display:flex;justify-content:center;align-items:center;gap:12px}.container .items__total-wrapper .items__total-button{display:flex;width:40px;height:40px;justify-content:center;align-items:center;border-radius:100px;border:1px solid #BFBBBB;background:#FFF}.container .items__total-wrapper .page__numbers-wrapper{display:flex;justify-content:center;align-items:center;gap:12px}.container .items__total-wrapper .page__numbers-wrapper .page__number-item{display:flex;padding:6px;flex-direction:column;justify-content:center;align-items:center;gap:10px;border-radius:100px}.container .items__total-wrapper .page__numbers-wrapper .page__number-item.active{background-color:#0A8276}.container .items__total-wrapper .page__numbers-wrapper .page__number-item.active span{color:#fff}.container .items__total-wrapper .page__numbers-wrapper .page__number-item:hover{cursor:pointer}.container .items__total-wrapper .page__numbers-wrapper .page__number-item:hover:not(.active){background-color:#ddd}.container .items__total-wrapper .page__numbers-wrapper .page__number-item:active:not(.active){background-color:#575352}.container .items__total-wrapper .page__numbers-wrapper .page__number-item span{display:flex;width:16px;height:16px;flex-direction:column;justify-content:center;color:#1D1D1D;text-align:center;font-size:13px;font-style:normal;font-weight:400;line-height:20px}.pagination{display:flex}.pagination ifx-icon-button:first-of-type{margin-right:12px}.pagination ifx-icon-button:last-of-type{margin-left:12px}.page__button{padding:8px;border-radius:100px}ol{list-style-type:none;padding:0;margin:0;display:inline-flex;align-items:center;gap:12px}li{display:flex;flex-direction:column;justify-content:center;align-items:center;border-radius:100px}li:hover:not(.active) page__button{background-color:#EEEDED}li:active:not(.active) .page__button{background-color:#575352;color:#fff}li.active{background-color:#0A8276}li.active .page__button{color:#fff}li:hover{cursor:pointer}li .page__button{text-decoration:none;display:flex;width:16px;height:16px;flex-direction:column;justify-content:center;color:#1D1D1D;text-align:center;font-size:13px;font-style:normal;font-weight:400;line-height:20px;align-items:center}.prev.disabled,.next.disabled{cursor:default}.prev.disabled:hover,.next.disabled:hover{cursor:default;text-decoration:none}.prev{margin-right:2.5px}.next{margin-left:2.5px}@media (max-width: 768px){.container{gap:16px;justify-content:left}.container .items__total-wrapper .pagination ol{gap:12px}}@media (max-width: 374px){.pagination .ellipsis+.active{margin-left:8px}.pagination .active+.ellipsis{margin-left:8px}}';const d=class{constructor(t){e(this,t);this.ifxPageChange=i(this,"ifxPageChange",7);this.ifxItemsPerPageChange=i(this,"ifxItemsPerPageChange",7);this.currentPage=1;this.showItemsPerPage=true;this.internalPage=1;this.internalItemsPerPage=10;this.numberOfPages=[];this.total=1;this.filteredItemsPerPage=[];this.visiblePages=[];this.CLASS_DISABLED="disabled";this.CLASS_ACTIVE="active";this.handlePageClick=e=>{const i=e.currentTarget;const t=parseInt(i.dataset.page);if(!isNaN(t))this.changePage(t)};this.handleResize=()=>{clearTimeout(this.resizeTimeout);this.resizeTimeout=setTimeout((()=>{this.updateVisiblePages()}),100)}}watchTotalHandler(){this.calculateNumberOfPages();this.updateVisiblePages()}currentPageWatcher(e){this.internalPage=Math.max(1,Math.min(e,this.numberOfPages.length));this.calculateNumberOfPages();this.updateVisiblePages()}setItemsPerPage(e){var i,t;const a=((i=e.detail)===null||i===void 0?void 0:i.value)||((t=e.detail)===null||t===void 0?void 0:t.label);const r=parseInt(a)||10;if(r===this.internalItemsPerPage){return}this.internalItemsPerPage=r;this.internalPage=1;this.calculateNumberOfPages();this.updateVisiblePages();this.handleEventEmission()}emitItemsPerPage(e){this.ifxItemsPerPageChange.emit(e.detail.label)}async componentDidLoad(){if(this.showItemsPerPage){const e=this.el.shadowRoot.querySelector("#itemsPerPageSelect");if(e){e.addEventListener("ifxSelect",(e=>this.emitItemsPerPage(e)))}}window.addEventListener("resize",this.handleResize);if(!n(this.el)){const e=r();s("ifx-pagination",await e)}this.initPagination()}disconnectedCallback(){if(this.showItemsPerPage){const e=this.el.shadowRoot.querySelector("#itemsPerPageSelect");if(e){e.removeEventListener("ifxSelect",(e=>this.emitItemsPerPage(e)))}}window.removeEventListener("resize",this.handleResize);if(this.resizeTimeout){clearTimeout(this.resizeTimeout)}}updateVisiblePages(){const e=window.innerWidth<375;const i=this.numberOfPages.length;const t=this.internalPage;let a=[];if(e){if(i<=5){a=[...this.numberOfPages]}else{a.push(1);if(t<=2){a.push(2,3,"...",i)}else if(t>=i-1){a.push("...",i-2,i-1,i)}else{a.push("...",t,"...",i)}}}else{const e=2;if(i<=7){a=[...this.numberOfPages]}else{a.push(1);let r=Math.max(2,t-e);let s=Math.min(i-1,t+e);if(t<=4){r=2;s=Math.min(i-1,5)}else if(t>=i-3){r=Math.max(2,i-4);s=i-1}else{r=t-1;s=t+1}if(r>2){a.push("...")}for(let e=r;e<=s;e++){a.push(e)}if(s<i-1){a.push("...")}a.push(i)}}this.visiblePages=a}calculateNumberOfPages(){const e=Math.ceil(this.total/this.internalItemsPerPage);this.numberOfPages=Array.from({length:e},((e,i)=>i+1));this.internalPage=Math.max(1,Math.min(this.currentPage,e))}filterOptionsArray(){const e=typeof this.itemsPerPage==="string"?JSON.parse(this.itemsPerPage):this.itemsPerPage;this.filteredItemsPerPage=e.map((e=>Object.assign(Object.assign({},e),{label:e.label||e.value})))}componentWillLoad(){this.filterOptionsArray();const e=this.filteredItemsPerPage.find((e=>e.selected));if(e){this.internalItemsPerPage=Number(e.value)}else if(this.filteredItemsPerPage.length>0){this.internalItemsPerPage=Number(this.filteredItemsPerPage[0].value)}this.calculateNumberOfPages();this.internalPage=Math.max(1,Math.min(this.currentPage,this.numberOfPages.length));this.updateVisiblePages()}componentWillUpdate(){if(this.prevInternalPage!==this.internalPage){this.updateVisiblePages();this.prevInternalPage=this.internalPage}}componentDidUpdate(){this.initPagination()}handleEventEmission(){this.ifxPageChange.emit({currentPage:this.internalPage,totalPages:this.numberOfPages.length,itemsPerPage:this.internalItemsPerPage})}initPagination(){const e=this.el.shadowRoot.querySelector(".pagination");if(!e)return;const i=()=>{const i=e.querySelector(".prev");const t=e.querySelector(".next");if(i){i.disabled=this.internalPage===1;i.classList.toggle(this.CLASS_DISABLED,this.internalPage===1)}if(t){t.disabled=this.internalPage===this.numberOfPages.length;t.classList.toggle(this.CLASS_DISABLED,this.internalPage===this.numberOfPages.length)}};e.querySelectorAll("li").forEach((e=>{e.removeEventListener("click",this.handlePageClick);e.addEventListener("click",this.handlePageClick)}));i()}changePage(e){e=Math.max(1,Math.min(e,this.numberOfPages.length));if(e===this.internalPage)return;this.internalPage=e;this.handleEventEmission();this.initPagination()}render(){return t("div",{key:"9a4b41bb714202dcc144f626b9a2096480852ad6",class:"container"},this.showItemsPerPage&&t("div",{key:"9e829381e98967180e89bf8f8988c67bbb998814",class:"items__per-page-wrapper"},t("div",{key:"be5d328337c18096cd1363f3c7c0c060693fe525",class:"items__per-page-label"},"Results per Page"),t("div",{key:"37f663194a695059779305e0723321c26f55d191",class:"items__per-page-field"},t("ifx-select",{key:"916cc188fd2f7d86243db5955f091e188defbacc",id:"itemsPerPageSelect",placeholder:"false","show-search":"false",value:undefined,disabled:false,error:false,size:"s",options:this.filteredItemsPerPage,"placeholder-value":"Select"}))),t("div",{key:"f6531ac8c0710f53ff375e8ee4fa19bb47be5cef",class:"items__total-wrapper"},t("div",{key:"4edaf3f1bc17c3423c2b39473a0f5ddc959278d6",class:"pagination"},t("ifx-icon-button",{key:"7341fced786739f5970cfc9940381b2b2901de63",class:"prev",icon:"arrow-left-16","aria-label":"Previous Page",onClick:()=>this.changePage(this.internalPage-1),variant:"secondary"}),t("ol",{key:"b7af29f3b08ee99b3c880c7af51b4d491630e55c"},this.visiblePages.map(((e,i)=>typeof e==="number"?t("li",{key:`page-${e}`,class:{[this.CLASS_ACTIVE]:e===this.internalPage},"data-page":e},t("span",{class:"page__button",role:"button",tabindex:"0","aria-current":e===this.internalPage?"page":undefined,"aria-label":`Page ${e}`,onClick:()=>this.changePage(e),onKeyDown:i=>(i.key==="Enter"||i.key===" ")&&this.changePage(e)},e)):t("li",{class:"ellipsis",key:`ellipsis-${i}`},t("span",{"aria-hidden":"true"},"..."))))),t("ifx-icon-button",{key:"5bdcefa2773fb49f8d7c4190a48fe5a98f6e0442",class:"next",icon:"arrow-right-16","aria-label":"Next Page",onClick:()=>this.changePage(this.internalPage+1),variant:"secondary"}))))}get el(){return a(this)}static get watchers(){return{total:["watchTotalHandler"],currentPage:["currentPageWatcher"]}}};d.style=h;export{o as ifx_chip,c as ifx_chip_item,d as ifx_pagination};
-//# sourceMappingURL=p-4da5a2a5.entry.js.map
+import{r as e,c as i,h as t,a}from"./p-PqnYwNKt.js";import{d as r,t as s}from"./p-DcmcuUOA.js";import{i as n}from"./p-Bw2fh5LT.js";const l=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}:host{display:inline-block}.chip{position:relative}.chip__wrapper{display:inline-flex;align-items:center;justify-content:center;gap:8px;box-sizing:border-box;border-radius:9999px;background:#FFFFFF;cursor:pointer;transition:border 100ms ease;font:400 0.875rem/1.25rem "Source Sans 3"}.chip__wrapper .icon__wrapper{display:flex}.chip__wrapper.outlined,.chip__wrapper.filled-dark,.chip__wrapper.filled-light{outline:2px solid transparent}.chip__wrapper.outlined:focus-visible,.chip__wrapper.filled-dark:focus-visible,.chip__wrapper.filled-light:focus-visible{outline:2px solid #0A8276;outline-offset:2px}.chip__wrapper.outlined.chip__wrapper--opened .wrapper__open-button,.chip__wrapper.filled-dark.chip__wrapper--opened .wrapper__open-button,.chip__wrapper.filled-light.chip__wrapper--opened .wrapper__open-button{transform:rotate(-180deg)}.chip__wrapper.outlined.chip__wrapper--selected .wrapper__label .label__selected-options,.chip__wrapper.filled-dark.chip__wrapper--selected .wrapper__label .label__selected-options,.chip__wrapper.filled-light.chip__wrapper--selected .wrapper__label .label__selected-options{font:400 0.875rem/1.25rem "Source Sans 3"}.chip__wrapper.filled-dark.chip__wrapper--selected:not(.read-only),.chip__wrapper.filled-light.chip__wrapper--selected:not(.read-only){background-color:#0A8276;color:white}.chip__wrapper.filled-dark.chip__wrapper--selected:not(.read-only):hover,.chip__wrapper.filled-light.chip__wrapper--selected:not(.read-only):hover{background-color:#08665C}.chip__wrapper.filled-dark.chip__wrapper--selected:not(.read-only):hover.disabled,.chip__wrapper.filled-light.chip__wrapper--selected:not(.read-only):hover.disabled{background-color:#0A8276}.chip__wrapper.outlined{border:1px solid #8D8786}.chip__wrapper.outlined:hover:not(.read-only){border-color:#575352;background-color:#F7F7F7}.chip__wrapper.outlined:active:not(.read-only){border-color:#575352;background-color:#BFBBBB}.chip__wrapper.outlined.chip__wrapper--opened{border:1px solid #0A8276}.chip__wrapper.outlined.chip__wrapper--selected{outline:3px solid #0A8276;border:1px solid transparent;background-color:white}.chip__wrapper.outlined.chip__wrapper--selected:focus-visible{outline-offset:0px}.chip__wrapper.outlined.chip__wrapper--selected:hover:not(.read-only){outline-color:#08665C}.chip__wrapper.outlined.chip__wrapper--selected.read-only{outline:none;border:1px solid black}.chip__wrapper.outlined.disabled{outline:none;color:#BFBBBB;border:1px solid #BFBBBB}.chip__wrapper.outlined.disabled:hover{outline:none;border-color:#BFBBBB;background-color:white}.chip__wrapper.outlined.read-only{border:1px solid black}.chip__wrapper.outlined.read-only:focus-visible{outline:2px solid #0A8276;outline-offset:2px}.chip__wrapper.filled-dark{background-color:#3C3A39;color:white}.chip__wrapper.filled-dark:hover:not(.chip__wrapper--selected,.disabled,.read-only){background-color:#575352}.chip__wrapper.filled-dark:active:not(.chip__wrapper--selected,.disabled,.read-only){background-color:#8D8786;color:black}.chip__wrapper.filled-dark.disabled{outline:none;color:#BFBBBB}.chip__wrapper.filled-dark.disabled:hover:not(.chip__wrapper--selected){background-color:#3C3A39}.chip__wrapper.filled-dark.chip__wrapper--selected.read-only{border:1px solid #8D8786}.chip__wrapper.filled-dark.read-only{border:1px solid #8D8786}.chip__wrapper.filled-light{background-color:#EEEDED}.chip__wrapper.filled-light:hover:not(.read-only){background-color:#BFBBBB}.chip__wrapper.filled-light:active:not(.read-only){background-color:#8D8786}.chip__wrapper.filled-light.disabled{outline:none;color:#BFBBBB}.chip__wrapper.filled-light.disabled:hover:not(.chip__wrapper--selected){background-color:#EEEDED}.chip__wrapper.filled-light.chip__wrapper--selected.read-only{border:1px solid black}.chip__wrapper.filled-light.read-only{border:1px solid black}.chip__wrapper.chip__wrapper--small{padding:4px 8px;height:24px}.chip__wrapper.chip__wrapper--medium{padding:4px 12px;height:28px}.chip__wrapper.chip__wrapper--large{padding:8px 12px;height:36px}.wrapper__label{display:inline-flex;align-items:center;gap:4px}.wrapper__label .label__selected-options{font:600 0.875rem/1.25rem "Source Sans 3"}.wrapper__open-button{display:flex;align-items:center}.wrapper__unselect-button{display:flex;align-items:center}.chip__dropdown{position:absolute;z-index:1;box-shadow:0px 6px 9px 0px rgba(29, 29, 29, 0.1019607843);border:1px solid #EEEDED;border-radius:1px;padding:8px 0;min-width:222px;background-color:#FFFFFF}';const o=class{constructor(t){e(this,t);this.ifxChange=i(this,"ifxChange",7);this.placeholder="";this.size="medium";this.value=undefined;this.variant="single";this.theme="outlined";this.readOnly=false;this.disabled=false;this.icon="";this.opened=false;this.selectedOptions=[]}handleValueChange(e){this.syncSelectedOptionsWithProp(e)}handleReadOnlyChange(e){if(e){this.opened=false}}closeDropdownOnOutsideClick(e){const i=e.composedPath();const t=this.chip.shadowRoot.querySelector(".chip__wrapper");const a=this.chip.shadowRoot.querySelector(".chip__dropdown");if(!i.includes(a)&&!i.includes(t)&&this.opened){this.toggleDropdownMenu()}}handleKeyDown(e){if(e.code!=="Tab"){e.preventDefault()}if(e.target.tagName==="IFX-CHIP"){this.handleWrapperKeyDown(e)}else if(e.target.tagName==="IFX-CHIP-ITEM"){this.handleDropdownKeyDown(e)}}updateSelectedOptions(e){const i=e.detail;const t=[...this.selectedOptions];if(this.variant!=="multi"){if(i.selected){this.opened=false;const t=this.getChipItems();t.forEach((i=>{if(i.selected&&i!==e.target){i.chipState=Object.assign(Object.assign({},i.chipState),{emitIfxChipItemSelect:false});i.selected=false}}));this.selectedOptions=[i]}else{this.selectedOptions=[]}this.value=this.selectedOptions[0]?this.selectedOptions[0].value:undefined}else{if(i.selected){if(!this.selectedOptions.find((e=>e.value===i.value))){this.selectedOptions=[...this.selectedOptions,i]}}else{this.selectedOptions=this.selectedOptions.filter((e=>e.value!==i.value))}this.value=this.selectedOptions.map((e=>e.value))}if(i.emitIfxChange){this.ifxChange.emit({previousSelection:t,currentSelection:this.selectedOptions,name:this.placeholder})}}getChipItems(){return this.chip.querySelectorAll("ifx-chip-item")}getSelectedOptions(){if(this.variant!=="multi"){return this.selectedOptions.map((e=>e.label)).join("")}return this.selectedOptions.slice(0,2).map((e=>e.label)).join(", ")}toggleDropdownMenu(){if(this.readOnly)return;this.opened=!this.opened}focusChipItemAt(e=0){this.opened=true;const i=this.getChipItems();let t;if(e===-1){t=i.item(i.length-1)}else if(e>=0&&e<i.length){t=i.item(e)}else{console.error(`Invalid index: ${e}`);return}const a=t.shadowRoot.querySelector(".chip-item");if(a){setTimeout((()=>{a.focus()}),1)}}focusChip(){const e=this.chip.shadowRoot.querySelector(".chip__wrapper");e.focus()}handleUnselectButtonClick(e){e.stopPropagation();this.opened=false;let i=false;const t=this.getChipItems();t.forEach((e=>{if(e.selected){i=true;e.chipState=Object.assign(Object.assign({},e.chipState),{emitIfxChipItemSelect:false});e.selected=false}}));if(i){const e=this.selectedOptions;this.selectedOptions=[];this.value=[];this.ifxChange.emit({previousSelection:e,currentSelection:[],name:this.placeholder})}}handleWrapperClick(){if(!this.readOnly){this.toggleDropdownMenu()}}handleWrapperKeyDown(e){if(this.readOnly)return;if(!this.opened){switch(e.code){case"Space":case"Enter":case"ArrowDown":this.focusChipItemAt(0);break;case"ArrowUp":this.focusChipItemAt(-1);break}}else{switch(e.code){case"Escape":this.opened=false;this.focusChip();break}}}handleDropdownKeyDown(e){let i=this.getChipItems();let t=Array.from(i).indexOf(e.target);if(t===-1){console.error("Target not found in chip items");return}switch(e.code){case"ArrowDown":if(t===i.length-1)break;this.focusChipItemAt(t+1);break;case"ArrowUp":if(t===0)break;this.focusChipItemAt(t-1);break;case"Escape":this.opened=false;this.focusChip();break;case"Space":if(this.variant==="single"){this.opened=false;this.focusChip()}break;case"Enter":this.opened=false;this.focusChip();break}}syncChipState(){const e=this.getChipItems();let i=0;e.forEach((e=>{e.chipState={emitIfxChipItemSelect:true,size:this.size?this.size:"medium",variant:this.variant==="multi"?"multi":"single",key:i++}}))}syncSelectedOptionsWithProp(e){this.selectedOptions=[];const i=(()=>{let e=0;return()=>e++})();if(Array.isArray(e)){this.selectedOptions=e.map((e=>({value:e,label:e,selected:true,key:i(),emitIfxChange:true})))}else if(typeof e==="string"){this.selectedOptions=[{value:e,label:e,selected:true,key:i(),emitIfxChange:true}]}this.syncChipState()}componentWillLoad(){this.syncSelectedOptionsWithProp(this.value)}async componentDidLoad(){if(!n(this.chip)){const e=r();s("ifx-chip",await e)}}render(){return t("div",{key:"7d09fa1bb6292dcaabffecf990abc7aa891895aa",class:"chip"},t("div",{key:"564c97208bb9b0173576a9e4f39c4b983f1062e0",class:`chip__wrapper chip__wrapper--${this.size?this.size:"medium"}\n                  chip__wrapper--${this.variant==="multi"?"multi":"single"}\n                  ${this.opened&&!this.readOnly?"chip__wrapper--opened":""}\n                  ${this.selectedOptions.length?"chip__wrapper--selected":""}\n                  ${this.theme?this.theme:"outlined"}\n                  ${this.disabled?"disabled":""}\n                  ${this.readOnly?"read-only":""}`,tabIndex:0,onClick:!this.readOnly&&!this.disabled?()=>{this.handleWrapperClick()}:undefined,role:"combobox","aria-label":this.ariaLabel,"aria-value":this.getSelectedOptions(),"aria-haspopup":!this.readOnly?"listbox":undefined,"aria-expanded":!this.readOnly?this.opened.toString():undefined,"aria-controls":!this.readOnly?"dropdown":undefined,"aria-readonly":this.readOnly?"true":undefined,"aria-multiselectable":this.variant==="multi"?"true":undefined},this.icon&&t("div",{key:"88fb92751635c158dba1fae00c768e8553b42fa4",class:"icon__wrapper"},t("ifx-icon",{key:"12e163b1c6c7916653e66e0ebabe5142ad0ec0da",icon:this.icon})),t("div",{key:"af6687d4b75fa5321747dafbb56be79e36bf4b16",class:"wrapper__label"},this.selectedOptions.length===0&&`${this.placeholder}`,this.selectedOptions.length!==0&&this.variant==="multi"&&this.placeholder!==""&&`${this.placeholder}:`,this.selectedOptions.length!==0&&t("div",{key:"aedd029de20cb3a0321a69dda6aa64bde0ed364a",class:"label__selected-options"},this.getSelectedOptions()),this.selectedOptions.length>2&&this.variant==="multi"&&t("ifx-indicator",{key:"cc2bbfa2415a03e655b13d24275bb92cbc4f2b3a",variant:"number",inverted:this.theme==="outlined"?false:true,number:this.selectedOptions.length-2})),!this.readOnly&&(this.variant!=="multi"||this.variant==="multi"&&this.selectedOptions.length===0)&&t("div",{key:"cb8a825f3465b0e66bd98a95639649fd82ff2e00",class:"wrapper__open-button"},t("ifx-icon",{key:1,icon:`chevron-down-16`})),this.selectedOptions.length>=1&&this.variant==="multi"&&t("div",{key:"43774f6eb2e8c8b6418c64f43f8334e926e9c174",class:"wrapper__unselect-button",onClick:!this.readOnly&&!this.disabled?e=>{this.handleUnselectButtonClick(e)}:undefined},t("ifx-icon",{key:2,icon:`cross16`}))),this.opened&&!this.readOnly&&t("div",{key:"60a7abc36fc1659a7ae6382cdb69d0c312c93016",id:"dropdown",role:"listbox",class:"chip__dropdown"},t("slot",{key:"2cd17e0b7e73bd5257a5721a8d3597873ea73d06"})))}get chip(){return a(this)}static get watchers(){return{value:["handleValueChange"],readOnly:["handleReadOnlyChange"]}}};o.style=l;const p=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}.chip-item{display:flex;align-items:center;gap:8px;padding:8px 16px;user-select:none;transition:all 100ms ease;transition-property:background, color}.chip-item:hover{cursor:pointer;background-color:#EEEDED}.chip-item:active{background-color:#BFBBBB}.chip-item:focus{outline:2px solid #0A8276}.chip-item.chip-item--large{font:400 1rem/1.5rem "Source Sans 3"}.chip-item.chip-item--small{font:400 0.875rem/1.25rem "Source Sans 3"}.chip-item.chip-item--selected{color:#0A8276}.chip-item.chip-item--selected .chip-item__selected-indicator{display:block}.chip-item__selected-indicator{display:none;margin-left:auto}';const c=class{constructor(t){e(this,t);this.ifxChipItemSelect=i(this,"ifxChipItemSelect",5);this.value=undefined;this.chipState={emitIfxChipItemSelect:true,variant:"multi",size:"large"};this.selected=false}updateItemSelection(e){if(this.chipState.variant==="single"){const i=e.target;if(this.chipItem!==i&&this.chipItem.parentElement===i.parentElement){this.selected=false}}}validateSelected(e,i){if(e!==i){if(this.chipState.emitIfxChipItemSelect){this.emitIfxChipItemSelectEvent()}else{this.chipState.emitIfxChipItemSelect=true}}}getItemLabel(){return this.chipItem.innerText}toggleItemSelection(){this.selected=!this.selected}emitIfxChipItemSelectEvent(e=true){this.ifxChipItemSelect.emit({emitIfxChange:e,key:this.chipState.key,label:this.getItemLabel(),selected:this.selected,value:this.value})}handleItemClick(){this.toggleItemSelection()}handleItemKeyDown(e){if(e.code==="Enter"||e.code==="Space"){this.toggleItemSelection()}}handleSelectedState(){if(this.selected){this.emitIfxChipItemSelectEvent(false)}}componentWillLoad(){this.handleSelectedState()}render(){return t("div",{key:"74bd25551e6ac6bb2ff4d53ffd38120c8941cbcb",class:`chip-item chip-item--${this.chipState.size} \n                    chip-item--${(this.selected&&this.chipState.variant)==="single"?"selected":""}`,tabIndex:0,onClick:()=>{this.handleItemClick()},onKeyDown:e=>{this.handleItemKeyDown(e)},role:"option","aria-selected":this.selected.toString()},this.chipState.variant==="multi"&&t("ifx-checkbox",{key:"e830188223a4a73ccf10bc72af789bb7ea11cc02",checked:this.selected,tabIndex:-1,size:"s"}),t("div",{key:"9c1727d6a29a63102c7e1c2b58c9157e94de6bc3",class:"chip-item__label"}," ",t("slot",{key:"45baf75c97c6f4103d8c1ade78e9fafe105c13e9"})," "),t("div",{key:"265869ea8579f7db834523f3f3c43fee935d1649",class:"chip-item__selected-indicator"},t("ifx-icon",{key:"39fd063f3b5fb6ef3ca146108067b68c33e71697",icon:"check-16"}," ")))}get chipItem(){return a(this)}static get watchers(){return{selected:["validateSelected"]}}};c.style=p;const h=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}:host{display:inline-flex}.container{display:inline-flex;justify-content:center;align-items:center;gap:32px;font-family:var(--ifx-font-family);flex-wrap:wrap}.container .items__per-page-wrapper{display:flex;align-items:center;gap:16px}.container .items__per-page-wrapper .items__per-page-label{color:#1D1D1D;font-size:14px;font-style:normal;font-weight:600;line-height:20px}.container .items__per-page-wrapper .items__per-page-field{display:flex;flex-direction:column;align-items:flex-start}.container .items__per-page-wrapper .items__per-page-field ifx-select{width:92px}.container .items__total-wrapper{display:flex;justify-content:center;align-items:center;gap:12px}.container .items__total-wrapper .items__total-button{display:flex;width:40px;height:40px;justify-content:center;align-items:center;border-radius:100px;border:1px solid #BFBBBB;background:#FFF}.container .items__total-wrapper .page__numbers-wrapper{display:flex;justify-content:center;align-items:center;gap:12px}.container .items__total-wrapper .page__numbers-wrapper .page__number-item{display:flex;padding:6px;flex-direction:column;justify-content:center;align-items:center;gap:10px;border-radius:100px}.container .items__total-wrapper .page__numbers-wrapper .page__number-item.active{background-color:#0A8276}.container .items__total-wrapper .page__numbers-wrapper .page__number-item.active span{color:#fff}.container .items__total-wrapper .page__numbers-wrapper .page__number-item:hover{cursor:pointer}.container .items__total-wrapper .page__numbers-wrapper .page__number-item:hover:not(.active){background-color:#ddd}.container .items__total-wrapper .page__numbers-wrapper .page__number-item:active:not(.active){background-color:#575352}.container .items__total-wrapper .page__numbers-wrapper .page__number-item span{display:flex;width:16px;height:16px;flex-direction:column;justify-content:center;color:#1D1D1D;text-align:center;font-size:13px;font-style:normal;font-weight:400;line-height:20px}.pagination{display:flex}.pagination ifx-icon-button:first-of-type{margin-right:12px}.pagination ifx-icon-button:last-of-type{margin-left:12px}.page__button{padding:8px;border-radius:100px}ol{list-style-type:none;padding:0;margin:0;display:inline-flex;align-items:center;gap:12px}li{display:flex;flex-direction:column;justify-content:center;align-items:center;border-radius:100px}li:hover:not(.active) page__button{background-color:#EEEDED}li:active:not(.active) .page__button{background-color:#575352;color:#fff}li.active{background-color:#0A8276}li.active .page__button{color:#fff}li:hover{cursor:pointer}li .page__button{text-decoration:none;display:flex;width:16px;height:16px;flex-direction:column;justify-content:center;color:#1D1D1D;text-align:center;font-size:13px;font-style:normal;font-weight:400;line-height:20px;align-items:center}.prev.disabled,.next.disabled{cursor:default}.prev.disabled:hover,.next.disabled:hover{cursor:default;text-decoration:none}.prev{margin-right:2.5px}.next{margin-left:2.5px}@media (max-width: 768px){.container{gap:16px;justify-content:left}.container .items__total-wrapper .pagination ol{gap:12px}}@media (max-width: 374px){.pagination .ellipsis+.active{margin-left:8px}.pagination .active+.ellipsis{margin-left:8px}}';const d=class{constructor(t){e(this,t);this.ifxPageChange=i(this,"ifxPageChange",7);this.ifxItemsPerPageChange=i(this,"ifxItemsPerPageChange",7);this.currentPage=1;this.showItemsPerPage=true;this.internalPage=1;this.internalItemsPerPage=10;this.numberOfPages=[];this.total=1;this.filteredItemsPerPage=[];this.visiblePages=[];this.CLASS_DISABLED="disabled";this.CLASS_ACTIVE="active";this.handlePageClick=e=>{const i=e.currentTarget;const t=parseInt(i.dataset.page);if(!isNaN(t))this.changePage(t)};this.handleResize=()=>{clearTimeout(this.resizeTimeout);this.resizeTimeout=setTimeout((()=>{this.updateVisiblePages()}),100)}}watchTotalHandler(){this.calculateNumberOfPages();this.updateVisiblePages()}currentPageWatcher(e){this.internalPage=Math.max(1,Math.min(e,this.numberOfPages.length));this.calculateNumberOfPages();this.updateVisiblePages()}setItemsPerPage(e){var i,t;const a=((i=e.detail)===null||i===void 0?void 0:i.value)||((t=e.detail)===null||t===void 0?void 0:t.label);const r=parseInt(a)||10;if(r===this.internalItemsPerPage){return}this.internalItemsPerPage=r;this.internalPage=1;this.calculateNumberOfPages();this.updateVisiblePages();this.handleEventEmission()}emitItemsPerPage(e){this.ifxItemsPerPageChange.emit(e.detail.label)}async componentDidLoad(){if(this.showItemsPerPage){const e=this.el.shadowRoot.querySelector("#itemsPerPageSelect");if(e){e.addEventListener("ifxSelect",(e=>this.emitItemsPerPage(e)))}}window.addEventListener("resize",this.handleResize);if(!n(this.el)){const e=r();s("ifx-pagination",await e)}this.initPagination()}disconnectedCallback(){if(this.showItemsPerPage){const e=this.el.shadowRoot.querySelector("#itemsPerPageSelect");if(e){e.removeEventListener("ifxSelect",(e=>this.emitItemsPerPage(e)))}}window.removeEventListener("resize",this.handleResize);if(this.resizeTimeout){clearTimeout(this.resizeTimeout)}}updateVisiblePages(){const e=window.innerWidth<375;const i=this.numberOfPages.length;const t=this.internalPage;let a=[];if(e){if(i<=5){a=[...this.numberOfPages]}else{a.push(1);if(t<=2){a.push(2,3,"...",i)}else if(t>=i-1){a.push("...",i-2,i-1,i)}else{a.push("...",t,"...",i)}}}else{const e=2;if(i<=7){a=[...this.numberOfPages]}else{a.push(1);let r=Math.max(2,t-e);let s=Math.min(i-1,t+e);if(t<=4){r=2;s=Math.min(i-1,5)}else if(t>=i-3){r=Math.max(2,i-4);s=i-1}else{r=t-1;s=t+1}if(r>2){a.push("...")}for(let e=r;e<=s;e++){a.push(e)}if(s<i-1){a.push("...")}a.push(i)}}this.visiblePages=a}calculateNumberOfPages(){const e=Math.ceil(this.total/this.internalItemsPerPage);this.numberOfPages=Array.from({length:e},((e,i)=>i+1));this.internalPage=Math.max(1,Math.min(this.currentPage,e))}filterOptionsArray(){const e=typeof this.itemsPerPage==="string"?JSON.parse(this.itemsPerPage):this.itemsPerPage;this.filteredItemsPerPage=e.map((e=>Object.assign(Object.assign({},e),{label:e.label||e.value})))}componentWillLoad(){this.filterOptionsArray();const e=this.filteredItemsPerPage.find((e=>e.selected));if(e){this.internalItemsPerPage=Number(e.value)}else if(this.filteredItemsPerPage.length>0){this.internalItemsPerPage=Number(this.filteredItemsPerPage[0].value)}this.calculateNumberOfPages();this.internalPage=Math.max(1,Math.min(this.currentPage,this.numberOfPages.length));this.updateVisiblePages()}componentWillUpdate(){if(this.prevInternalPage!==this.internalPage){this.updateVisiblePages();this.prevInternalPage=this.internalPage}}componentDidUpdate(){this.initPagination()}handleEventEmission(){this.ifxPageChange.emit({currentPage:this.internalPage,totalPages:this.numberOfPages.length,itemsPerPage:this.internalItemsPerPage})}initPagination(){const e=this.el.shadowRoot.querySelector(".pagination");if(!e)return;const i=()=>{const i=e.querySelector(".prev");const t=e.querySelector(".next");if(i){i.disabled=this.internalPage===1;i.classList.toggle(this.CLASS_DISABLED,this.internalPage===1)}if(t){t.disabled=this.internalPage===this.numberOfPages.length;t.classList.toggle(this.CLASS_DISABLED,this.internalPage===this.numberOfPages.length)}};e.querySelectorAll("li").forEach((e=>{e.removeEventListener("click",this.handlePageClick);e.addEventListener("click",this.handlePageClick)}));i()}changePage(e){e=Math.max(1,Math.min(e,this.numberOfPages.length));if(e===this.internalPage)return;this.internalPage=e;this.handleEventEmission();this.initPagination()}render(){return t("div",{key:"11d342b11b38051ffd0b1e08e0696b1e3ef4e3c5",class:"container"},this.showItemsPerPage&&t("div",{key:"e2bedb6b48ac138ec8ff9640363d5d01a3195b33",class:"items__per-page-wrapper"},t("div",{key:"506874c6bfeeacab1203cc5403639d91b2bf93a2",class:"items__per-page-label"},"Results per Page"),t("div",{key:"8d0fafee79171e56b4672d4fd4c4cd2049ebd614",class:"items__per-page-field"},t("ifx-select",{key:"650869a3583ef25e5b78dcafb9efaf1760c6101c",id:"itemsPerPageSelect",placeholder:"false","show-search":"false",value:undefined,disabled:false,error:false,size:"s",options:this.filteredItemsPerPage,"placeholder-value":"Select"}))),t("div",{key:"230aea64459ffa9c32a6e974eacf174bb9631c6b",class:"items__total-wrapper"},t("div",{key:"ec6765efbffeec485d4c3400541a72f96cf3436a",class:"pagination"},t("ifx-icon-button",{key:"ab52e4afbebcf6e1bb8ba51a85de505fcaa1cf45",class:"prev",icon:"arrow-left-16","aria-label":"Previous Page",onClick:()=>this.changePage(this.internalPage-1),variant:"secondary"}),t("ol",{key:"ecda1907072a09082fa25dac33608f0a3819d5e9"},this.visiblePages.map(((e,i)=>typeof e==="number"?t("li",{key:`page-${e}`,class:{[this.CLASS_ACTIVE]:e===this.internalPage},"data-page":e},t("span",{class:"page__button",role:"button",tabindex:"0","aria-current":e===this.internalPage?"page":undefined,"aria-label":`Page ${e}`,onClick:()=>this.changePage(e),onKeyDown:i=>(i.key==="Enter"||i.key===" ")&&this.changePage(e)},e)):t("li",{class:"ellipsis",key:`ellipsis-${i}`},t("span",{"aria-hidden":"true"},"..."))))),t("ifx-icon-button",{key:"fd46bf3e767ebed96da040f53ad872bfb16d885c",class:"next",icon:"arrow-right-16","aria-label":"Next Page",onClick:()=>this.changePage(this.internalPage+1),variant:"secondary"}))))}get el(){return a(this)}static get watchers(){return{total:["watchTotalHandler"],currentPage:["currentPageWatcher"]}}};d.style=h;export{o as ifx_chip,c as ifx_chip_item,d as ifx_pagination};
+//# sourceMappingURL=p-30af152b.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["chipCss","Chip","constructor","hostRef","this","placeholder","size","value","undefined","variant","theme","readOnly","disabled","icon","opened","selectedOptions","handleValueChange","newValue","syncSelectedOptionsWithProp","handleReadOnlyChange","closeDropdownOnOutsideClick","event","path","composedPath","chipWrapper","chip","shadowRoot","querySelector","chipDropdown","includes","toggleDropdownMenu","handleKeyDown","code","preventDefault","target","tagName","handleWrapperKeyDown","handleDropdownKeyDown","updateSelectedOptions","eventDetail","detail","previousSelection","selected","chipItems","getChipItems","forEach","chipItem","chipState","Object","assign","emitIfxChipItemSelect","find","option","filter","map","emitIfxChange","ifxChange","emit","currentSelection","name","querySelectorAll","getSelectedOptions","label","join","slice","focusChipItemAt","index","item","length","console","error","shadowItem","setTimeout","focus","focusChip","handleUnselectButtonClick","stopPropagation","itemGotUnselected","handleWrapperClick","chipitems","targetIndex","Array","from","indexOf","syncChipState","key","generateKey","count","isArray","componentWillLoad","componentDidLoad","isNestedInIfxComponent","framework","detectFramework","trackComponent","render","h","class","tabIndex","onClick","role","ariaLabel","toString","inverted","number","e","id","chipItemCss","ChipItem","updateItemSelection","parentElement","validateSelected","oldValue","emitIfxChipItemSelectEvent","getItemLabel","innerText","toggleItemSelection","ifxChipItemSelect","handleItemClick","handleItemKeyDown","handleSelectedState","onKeyDown","checked","paginationCss","Pagination","currentPage","showItemsPerPage","internalPage","internalItemsPerPage","numberOfPages","total","filteredItemsPerPage","visiblePages","CLASS_DISABLED","CLASS_ACTIVE","handlePageClick","li","currentTarget","page","parseInt","dataset","isNaN","changePage","handleResize","clearTimeout","resizeTimeout","updateVisiblePages","watchTotalHandler","calculateNumberOfPages","currentPageWatcher","newVal","Math","max","min","setItemsPerPage","selectedValue","_a","_b","newItemsPerPage","handleEventEmission","emitItemsPerPage","ifxItemsPerPageChange","select","el","addEventListener","window","initPagination","disconnectedCallback","removeEventListener","isMobile","innerWidth","totalPages","current","pages","push","buffer","start","end","i","ceil","_","filterOptionsArray","items","itemsPerPage","JSON","parse","selectedOption","Number","componentWillUpdate","prevInternalPage","componentDidUpdate","ifxPageChange","pagination","updateButtons","prev","next","classList","toggle","newPage","options","tabindex"],"sources":["src/components/chip/chip.scss?tag=ifx-chip&encapsulation=shadow","src/components/chip/chip.tsx","src/components/chip/chip-item/chip-item.scss?tag=ifx-chip-item&encapsulation=shadow","src/components/chip/chip-item/chip-item.tsx","src/components/pagination/pagination.scss?tag=ifx-pagination&encapsulation=shadow","src/components/pagination/pagination.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n@use \"../../global/font.scss\";\r\n\r\n:host {\r\n    display: inline-block;\r\n}\r\n\r\n.chip {\r\n    position: relative;\r\n}\r\n\r\n.chip__wrapper {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    gap: tokens.$ifxSpace100;\r\n    box-sizing: border-box;\r\n    border-radius: tokens.$ifxBorderRadiusRound;\r\n    background: tokens.$ifxColorBaseWhite;\r\n    cursor: pointer;  \r\n    transition: border 100ms ease;\r\n    font: tokens.$ifxBodyBody04;\r\n\r\n    & .icon__wrapper { \r\n        display: flex;\r\n    }\r\n\r\n    &.outlined, &.filled-dark, &.filled-light { \r\n        outline: 2px solid transparent;\r\n        &:focus-visible {\r\n            outline: 2px solid tokens.$ifxColorOcean500;\r\n            outline-offset: 2px;\r\n        }\r\n        \r\n        &.chip__wrapper--opened {\r\n         .wrapper__open-button {\r\n            transform: rotate(-180deg);\r\n         }\r\n        }\r\n\r\n        &.chip__wrapper--selected {\r\n        .wrapper__label {\r\n            .label__selected-options {\r\n                font: tokens.$ifxBodyBody04;\r\n            }\r\n        }\r\n      }\r\n    }\r\n\r\n    &.filled-dark, &.filled-light { \r\n        &.chip__wrapper--selected:not(.read-only) {\r\n        background-color: tokens.$ifxColorOcean500;\r\n        color: white;\r\n         &:hover { \r\n            background-color: tokens.$ifxColorOcean600;\r\n         }\r\n\r\n         &:hover.disabled { \r\n            background-color: tokens.$ifxColorOcean500;\r\n         }\r\n      }\r\n    }\r\n    \r\n    &.outlined { \r\n        border: 1px solid tokens.$ifxColorEngineering400;\r\n        &:hover:not(.read-only) {\r\n            border-color: tokens.$ifxColorEngineering500;\r\n            background-color: tokens.$ifxColorEngineering100;\r\n        }\r\n\r\n        &:active:not(.read-only) { \r\n            border-color: tokens.$ifxColorEngineering500;\r\n            background-color: tokens.$ifxColorEngineering300;\r\n        }\r\n\r\n        &.chip__wrapper--opened {\r\n            border: 1px solid tokens.$ifxColorOcean500;\r\n        }\r\n\r\n        &.chip__wrapper--selected {\r\n        outline: 3px solid tokens.$ifxColorOcean500;\r\n        border: 1px solid transparent;\r\n        background-color: white;\r\n\r\n        &:focus-visible {\r\n            outline-offset: 0px;\r\n        }\r\n         &:hover:not(.read-only) { \r\n            outline-color: tokens.$ifxColorOcean600;\r\n         }\r\n\r\n         &.read-only { \r\n            outline: none;\r\n            border: 1px solid black;\r\n         }\r\n      }\r\n\r\n      &.disabled { \r\n        outline: none;\r\n        color: tokens.$ifxColorEngineering300;\r\n        border: 1px solid tokens.$ifxColorEngineering300;\r\n        &:hover { \r\n            outline: none;\r\n            border-color: tokens.$ifxColorEngineering300;\r\n            background-color: white;\r\n        }\r\n      }\r\n\r\n      &.read-only { \r\n        border: 1px solid black;\r\n        &:focus-visible { \r\n            outline: 2px solid tokens.$ifxColorOcean500;\r\n            outline-offset: 2px;\r\n        }\r\n      }\r\n    }\r\n\r\n    &.filled-dark { \r\n        background-color: tokens.$ifxColorEngineering600;\r\n        color: white;\r\n\r\n        &:hover:not(.chip__wrapper--selected, .disabled, .read-only) { \r\n        background-color: tokens.$ifxColorEngineering500;\r\n        }\r\n\r\n        &:active:not(.chip__wrapper--selected, .disabled, .read-only) { \r\n            background-color: tokens.$ifxColorEngineering400;\r\n            color: black;\r\n        }\r\n\r\n      &.disabled { \r\n        outline: none;\r\n        color: tokens.$ifxColorEngineering300;\r\n        &:hover:not(.chip__wrapper--selected) { \r\n        background-color: tokens.$ifxColorEngineering600;\r\n        }\r\n      }\r\n\r\n      &.chip__wrapper--selected { \r\n        &.read-only { \r\n            border: 1px solid tokens.$ifxColorEngineering400;\r\n         }\r\n      }\r\n\r\n      &.read-only { \r\n        border: 1px solid tokens.$ifxColorEngineering400;\r\n      }\r\n    }\r\n\r\n    &.filled-light { \r\n        background-color: tokens.$ifxColorEngineering200;\r\n\r\n        &:hover:not(.read-only) { \r\n        background-color: tokens.$ifxColorEngineering300;\r\n        }\r\n\r\n        &:active:not(.read-only) { \r\n            background-color: tokens.$ifxColorEngineering400;\r\n        }\r\n\r\n      &.disabled { \r\n        outline: none;\r\n        color: tokens.$ifxColorEngineering300;\r\n        &:hover:not(.chip__wrapper--selected) { \r\n        background-color: tokens.$ifxColorEngineering200;\r\n        }\r\n      }\r\n\r\n      &.chip__wrapper--selected { \r\n        &.read-only { \r\n            border: 1px solid black;\r\n         }\r\n      }\r\n\r\n      &.read-only { \r\n        border: 1px solid black;\r\n      }\r\n    }\r\n    \r\n    &.chip__wrapper--small {\r\n        padding: tokens.$ifxSpace50 tokens.$ifxSpace100;\r\n        height: tokens.$ifxSize300;\r\n    }\r\n\r\n    &.chip__wrapper--medium {\r\n        padding: tokens.$ifxSpace50 tokens.$ifxSpace150;\r\n        height: tokens.$ifxSize350;\r\n    }\r\n    \r\n    &.chip__wrapper--large {\r\n        padding: tokens.$ifxSpace100 tokens.$ifxSpace150;\r\n        height: tokens.$ifxSize450;\r\n    }\r\n}\r\n\r\n.wrapper__label {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: tokens.$ifxSpace50;\r\n\r\n    .label__selected-options {\r\n        font: tokens.$ifxBodyBodySemibold04;\r\n    }\r\n}\r\n\r\n.wrapper__open-button {\r\n    display:flex;\r\n    align-items: center;\r\n}\r\n\r\n.wrapper__unselect-button {\r\n    display:flex;\r\n    align-items: center;\r\n}\r\n\r\n.chip__dropdown {\r\n    position: absolute;\r\n    z-index: 1;\r\n    box-shadow: 0px 6px 9px 0px #1D1D1D1A;\r\n    border: 1px solid tokens.$ifxColorEngineering200;\r\n    border-radius: tokens.$ifxBorderRadius12;\r\n    padding: tokens.$ifxSpace100 0;\r\n    min-width: 222px;\r\n    background-color: tokens.$ifxColorBaseWhite;\r\n}\r\n","import { h, Component, Element, Event, EventEmitter, Listen, Prop, State, Watch } from '@stencil/core';\r\nimport { ChipItemSelectEvent } from './interfaces';\r\nimport { trackComponent } from '../../global/utils/tracking';\r\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\r\nimport { detectFramework } from '../../global/utils/framework-detection';\r\n\r\n@Component({\r\n  tag: 'ifx-chip',\r\n  styleUrl: 'chip.scss',\r\n  shadow: true\r\n})\r\nexport class Chip {\r\n  @Element() chip: HTMLIfxChipElement;\r\n\r\n  @Event() ifxChange: EventEmitter<{ previousSelection: Array<ChipItemSelectEvent>, currentSelection: Array<ChipItemSelectEvent>, name: string }>;\r\n  @Prop() placeholder: string = '';\r\n  @Prop() size: 'small' | 'medium' | 'large' = 'medium';\r\n  @Prop({ mutable: true }) value: Array<string> | string = undefined;\r\n  @Prop() variant: 'single' | 'multi' = 'single';\r\n  @Prop() theme: 'outlined' | 'filled-light' | 'filled-dark' = 'outlined';\r\n  @Prop() readOnly: boolean = false;\r\n  @Prop() ariaLabel: string | null;\r\n  @Prop() disabled: boolean = false;\r\n  @Prop() icon: string = \"\";\r\n\r\n  @State() opened: boolean = false;\r\n  @State() selectedOptions: Array<ChipItemSelectEvent> = [];\r\n\r\n  @Watch('value')\r\n  handleValueChange(newValue: Array<string> | string) {\r\n    this.syncSelectedOptionsWithProp(newValue);\r\n  }\r\n\r\n  @Watch('readOnly')\r\n  handleReadOnlyChange(newValue: boolean) {\r\n    if (newValue) {\r\n      this.opened = false;\r\n    }\r\n  }\r\n\r\n  @Listen('mousedown', { target: 'document' })\r\n  closeDropdownOnOutsideClick(event: MouseEvent) {\r\n    const path = event.composedPath();\r\n    const chipWrapper: HTMLElement = this.chip.shadowRoot.querySelector('.chip__wrapper');\r\n    const chipDropdown: HTMLElement = this.chip.shadowRoot.querySelector('.chip__dropdown');\r\n    if (!path.includes(chipDropdown) && !path.includes(chipWrapper) && this.opened) {\r\n      this.toggleDropdownMenu();\r\n    }\r\n  }\r\n\r\n  @Listen('keydown')\r\n  handleKeyDown(event: KeyboardEvent) {\r\n    // override behavior of all keys except Tab. Users should be able to tab out of the component.\r\n    if (event.code !== 'Tab') {\r\n      event.preventDefault(); \r\n    }\r\n\r\n    if ((event.target as HTMLElement).tagName === 'IFX-CHIP') {\r\n      this.handleWrapperKeyDown(event);\r\n    } else if ((event.target as HTMLElement).tagName === 'IFX-CHIP-ITEM') {\r\n      this.handleDropdownKeyDown(event);\r\n    }\r\n  }\r\n\r\n  @Listen('ifxChipItemSelect')\r\n  updateSelectedOptions(event: CustomEvent<ChipItemSelectEvent>) {\r\n    const eventDetail: ChipItemSelectEvent = event.detail;\r\n    const previousSelection: Array<ChipItemSelectEvent> = [...this.selectedOptions];\r\n\r\n    if (this.variant !== 'multi') {\r\n      if (eventDetail.selected) {\r\n        this.opened = false;\r\n        const chipItems: NodeList = this.getChipItems();\r\n        chipItems.forEach((chipItem: HTMLIfxChipItemElement) => {\r\n          if (chipItem.selected && chipItem !== event.target) {\r\n            chipItem.chipState = {\r\n              ...chipItem.chipState,\r\n              emitIfxChipItemSelect: false,\r\n            };\r\n            chipItem.selected = false;\r\n          }\r\n        });\r\n        this.selectedOptions = [eventDetail];\r\n      } else {\r\n        this.selectedOptions = [];\r\n      }\r\n      this.value = this.selectedOptions[0] ? this.selectedOptions[0].value : undefined;\r\n    } else {\r\n      if (eventDetail.selected) {\r\n        // Prevent duplicate entries\r\n        if (!this.selectedOptions.find(option => option.value === eventDetail.value)) {\r\n          this.selectedOptions = [...this.selectedOptions, eventDetail];\r\n        }\r\n      } else {\r\n        this.selectedOptions = this.selectedOptions.filter((option) => option.value !== eventDetail.value);\r\n      }\r\n      this.value = this.selectedOptions.map((option) => option.value);\r\n    }\r\n\r\n    if (eventDetail.emitIfxChange) {\r\n      this.ifxChange.emit({\r\n        previousSelection: previousSelection,\r\n        currentSelection: this.selectedOptions,\r\n        name: this.placeholder\r\n      });\r\n    }\r\n  }\r\n\r\n  getChipItems(): NodeList {\r\n    return this.chip.querySelectorAll('ifx-chip-item');\r\n  }\r\n\r\n  getSelectedOptions(): string {\r\n    if (this.variant !== 'multi') {\r\n      return this.selectedOptions.map(option => option.label).join('');\r\n    }\r\n    return this.selectedOptions.slice(0, 2).map(option => option.label).join(', ');\r\n  }\r\n\r\n  toggleDropdownMenu() {\r\n    if (this.readOnly) return;\r\n    this.opened = !this.opened;\r\n  }\r\n\r\n  /**\r\n   * Focuses the chip item at the specified index.\r\n   * @param index the index of the chip item to focus. -1 will focus the last chip item.\r\n   */\r\n  focusChipItemAt(index: number = 0) {\r\n    this.opened = true;\r\n    const chipItems: NodeList = this.getChipItems();\r\n    let item: HTMLIfxChipItemElement;\r\n    \r\n    if (index === -1) {\r\n      item = chipItems.item(chipItems.length - 1) as HTMLIfxChipItemElement;\r\n    } else if (index >= 0 && index < chipItems.length) {\r\n      item = chipItems.item(index) as HTMLIfxChipItemElement;\r\n    } else {\r\n      console.error(`Invalid index: ${index}`);\r\n      return;\r\n    }\r\n\r\n    const shadowItem = item.shadowRoot.querySelector('.chip-item') as HTMLDivElement;\r\n    if (shadowItem) {\r\n      // Delay needed for the shadow item to be rendered.\r\n      setTimeout(() => {\r\n        shadowItem.focus();\r\n      }, 1);\r\n    }\r\n  }\r\n\r\n  focusChip() {\r\n    const chipWrapper: HTMLElement = this.chip.shadowRoot.querySelector('.chip__wrapper');\r\n    chipWrapper.focus();\r\n  }\r\n\r\n  handleUnselectButtonClick(event: MouseEvent) {\r\n    event.stopPropagation();\r\n    this.opened = false;\r\n\r\n    let itemGotUnselected = false;\r\n    const chipItems: NodeList = this.getChipItems();\r\n    chipItems.forEach((chipItem: HTMLIfxChipItemElement) => {\r\n      if (chipItem.selected) {\r\n        itemGotUnselected = true;\r\n        chipItem.chipState = {\r\n          ...chipItem.chipState,\r\n          emitIfxChipItemSelect: false,\r\n        }\r\n        chipItem.selected = false;\r\n      }\r\n    });\r\n\r\n    /* Emit event only if at least one item was unselected. */\r\n    if (itemGotUnselected) {\r\n      const previousSelection: Array<ChipItemSelectEvent> = this.selectedOptions;\r\n      this.selectedOptions = [];\r\n      this.value = [];\r\n      this.ifxChange.emit({\r\n        previousSelection: previousSelection,\r\n        currentSelection: [],\r\n        name: this.placeholder\r\n      });\r\n    }\r\n  }\r\n\r\n  handleWrapperClick() {\r\n    if (!this.readOnly) {\r\n      this.toggleDropdownMenu();\r\n    }\r\n  }\r\n\r\n  handleWrapperKeyDown(event: KeyboardEvent) {\r\n    // Keymap oriented at https://www.w3.org/WAI/ARIA/apg/patterns/combobox/#keyboard_interaction\r\n    if (this.readOnly) return;\r\n\r\n    if (!this.opened) {\r\n      switch (event.code) {\r\n        case 'Space':\r\n        case 'Enter':\r\n        case 'ArrowDown':\r\n          this.focusChipItemAt(0);\r\n          break;\r\n        case 'ArrowUp':\r\n          this.focusChipItemAt(-1);\r\n          break;\r\n      }\r\n    } else {\r\n      switch (event.code) {\r\n        case 'Escape':\r\n          this.opened = false;\r\n          this.focusChip();\r\n          break;\r\n      }\r\n    }\r\n  }\r\n\r\n  handleDropdownKeyDown(event: KeyboardEvent) {\r\n    let chipitems = this.getChipItems();\r\n\r\n    let targetIndex = Array.from(chipitems).indexOf(event.target as HTMLIfxChipItemElement);\r\n    if (targetIndex === -1) {\r\n      console.error('Target not found in chip items');\r\n      return;\r\n    }\r\n\r\n    switch (event.code) {\r\n      case 'ArrowDown':\r\n        if (targetIndex === chipitems.length - 1) break;\r\n        this.focusChipItemAt(targetIndex + 1);\r\n        break;\r\n      case 'ArrowUp':\r\n        if (targetIndex === 0) break;\r\n        this.focusChipItemAt( targetIndex - 1);\r\n        break;\r\n      case 'Escape':\r\n        this.opened = false;\r\n        this.focusChip();\r\n        break;\r\n      case 'Space':\r\n        // selection is handled by the chip-item component\r\n        if (this.variant === 'single') {\r\n          // only close dropdown if single select\r\n          this.opened = false;\r\n          this.focusChip();\r\n        }\r\n        break;\r\n      case 'Enter':\r\n        // selection is handled by the chip-item component\r\n        this.opened = false;\r\n        this.focusChip();\r\n        break;\r\n      }\r\n    }\r\n\r\n  syncChipState() {\r\n    const chipItems: NodeList = this.getChipItems();\r\n    let key: number = 0;\r\n    chipItems.forEach((chipItem: HTMLIfxChipItemElement) => {\r\n      chipItem.chipState = {\r\n        emitIfxChipItemSelect: true,\r\n        size: this.size ? this.size : 'medium',\r\n        variant: (this.variant === 'multi' ? 'multi' : 'single'),\r\n        key: key++\r\n      };\r\n    });\r\n  }\r\n\r\n  syncSelectedOptionsWithProp(newValue: Array<string> | string) {\r\n    // Clear old selected options\r\n    this.selectedOptions = [];\r\n\r\n    const generateKey = (() => {\r\n      let count = 0;\r\n      return () => count++;\r\n    })();\r\n\r\n    if (Array.isArray(newValue)) {\r\n      this.selectedOptions = newValue.map(value => ({\r\n        value,\r\n        label: value,\r\n        selected: true,\r\n        key: generateKey(),\r\n        emitIfxChange: true\r\n      }));\r\n    } else if (typeof newValue === 'string') {\r\n      this.selectedOptions = [{\r\n        value: newValue,\r\n        label: newValue,\r\n        selected: true,\r\n        key: generateKey(),\r\n        emitIfxChange: true\r\n      }];\r\n    }\r\n\r\n    this.syncChipState();\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.syncSelectedOptionsWithProp(this.value);\r\n  }\r\n\r\n  async componentDidLoad() { \r\n    if(!isNestedInIfxComponent(this.chip)) { \r\n      const framework = detectFramework();\r\n      trackComponent('ifx-chip', await framework)\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div class='chip'>\r\n        <div class={`chip__wrapper chip__wrapper--${this.size ? this.size : 'medium'}\r\n                  chip__wrapper--${this.variant === 'multi' ? 'multi' : 'single'}\r\n                  ${this.opened && !this.readOnly ? 'chip__wrapper--opened' : ''}\r\n                  ${this.selectedOptions.length ? 'chip__wrapper--selected' : ''}\r\n                  ${this.theme ? this.theme : 'outlined'}\r\n                  ${this.disabled ? 'disabled' : \"\"}\r\n                  ${this.readOnly ? 'read-only' : \"\"}`}\r\n          tabIndex={0}\r\n          onClick={!this.readOnly && !this.disabled ? () => { this.handleWrapperClick() } : undefined}\r\n          role='combobox'\r\n          aria-label={this.ariaLabel}\r\n          aria-value={this.getSelectedOptions()}\r\n          aria-haspopup={!this.readOnly ? 'listbox' : undefined}\r\n          aria-expanded={!this.readOnly ? this.opened.toString() : undefined}\r\n          aria-controls={!this.readOnly ? 'dropdown' : undefined}\r\n          aria-readonly={this.readOnly ? 'true' : undefined}\r\n          aria-multiselectable={this.variant === 'multi' ? 'true' : undefined}\r\n          >\r\n          \r\n          {this.icon && \r\n          <div class=\"icon__wrapper\">\r\n            <ifx-icon icon={this.icon}></ifx-icon>\r\n          </div>}\r\n\r\n          <div class='wrapper__label'>\r\n            {\r\n              (this.selectedOptions.length === 0) && `${this.placeholder}`\r\n            }\r\n\r\n            {\r\n              (this.selectedOptions.length !== 0 && (this.variant === 'multi') && this.placeholder !== '') &&\r\n              `${this.placeholder}:`\r\n            }\r\n\r\n            {\r\n              (this.selectedOptions.length !== 0) &&\r\n              <div class='label__selected-options'>\r\n                {this.getSelectedOptions()}\r\n              </div>\r\n            }\r\n\r\n            {\r\n              (this.selectedOptions.length > 2 && this.variant === 'multi') &&\r\n              <ifx-indicator variant='number' inverted={this.theme === 'outlined' ? false : true} number={this.selectedOptions.length - 2}></ifx-indicator>\r\n            }\r\n          </div>\r\n\r\n          {\r\n            !this.readOnly && (this.variant !== 'multi' || (this.variant === 'multi' && this.selectedOptions.length === 0)) &&\r\n            <div class='wrapper__open-button'>\r\n              <ifx-icon key={1} icon={`chevron-down-16`} />\r\n            </div>\r\n          }\r\n\r\n          {\r\n            ((this.selectedOptions.length >= 1) && this.variant === 'multi') &&\r\n            <div class='wrapper__unselect-button' onClick={!this.readOnly && !this.disabled ? (e) => { this.handleUnselectButtonClick(e) } : undefined}>\r\n              <ifx-icon key={2} icon={`cross16`} />\r\n            </div>\r\n          }\r\n\r\n        </div>\r\n\r\n        {\r\n          this.opened && !this.readOnly &&\r\n          <div id='dropdown' role='listbox' class='chip__dropdown'>\r\n            <slot />\r\n          </div>\r\n        }\r\n      </div>\r\n    );\r\n  }\r\n}\r\n","@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n@use \"../../../global/font.scss\";\r\n\r\n.chip-item {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: tokens.$ifxSpace100;\r\n    \r\n    padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\r\n    \r\n    user-select: none;\r\n    \r\n    transition: all 100ms ease;\r\n    transition-property: background, color;\r\n    \r\n    &:hover {\r\n        cursor: pointer;\r\n        \r\n        background-color: tokens.$ifxColorEngineering200;\r\n    }\r\n    \r\n    &:active {\r\n        background-color: tokens.$ifxColorEngineering300;\r\n    }\r\n\r\n    &:focus {\r\n        outline: 2px solid tokens.$ifxColorOcean500;\r\n    }\r\n    \r\n    &.chip-item--large {\r\n        font: tokens.$ifxBodyBody03;\r\n    }\r\n    \r\n    &.chip-item--small {\r\n        font: tokens.$ifxBodyBody04;\r\n    }\r\n\r\n    &.chip-item--selected {\r\n        color: tokens.$ifxColorOcean500;\r\n\r\n        .chip-item__selected-indicator {\r\n            display: block;\r\n        }\r\n    }\r\n}\r\n\r\n.chip-item__selected-indicator {\r\n    display: none;\r\n    \r\n    margin-left: auto;\r\n}\r\n\r\n","import { h,\r\n    Component,\r\n    Element,\r\n    Event,\r\n    EventEmitter, \r\n    Listen,\r\n    Prop, \r\n    Watch } from '@stencil/core';\r\nimport { ChipItemSelectEvent, ChipState } from '../interfaces';\r\n\r\n@Component({\r\ntag: 'ifx-chip-item',\r\nstyleUrl: 'chip-item.scss',\r\nshadow: true\r\n})\r\n\r\nexport class ChipItem {\r\n@Element() chipItem: HTMLIfxChipItemElement;\r\n\r\n@Event({ composed: false }) ifxChipItemSelect: EventEmitter<ChipItemSelectEvent>;\r\n\r\n@Prop() value: string = undefined;\r\n@Prop() chipState: ChipState = { emitIfxChipItemSelect: true, variant: 'multi', size: 'large' }; \r\n@Prop({ mutable: true, reflect: true }) selected: boolean = false;\r\n\r\n@Listen('ifxChipItemSelect', { target: 'body' })\r\nupdateItemSelection(event: CustomEvent<ChipItemSelectEvent>) {\r\n   if (this.chipState.variant === 'single') {\r\n       const target = event.target as HTMLIfxChipItemElement;\r\n       /* Also making sure chip items are from the same group (parent) while unselecting. */\r\n       if (this.chipItem !== target && this.chipItem.parentElement === target.parentElement) {\r\n           this.selected = false;\r\n       }\r\n   }\r\n} \r\n\r\n@Watch('selected')\r\nvalidateSelected(newValue: boolean, oldValue: boolean) {\r\n   if (newValue !== oldValue) {\r\n       /* Do not emit if ChipState does not allow. */\r\n       if (this.chipState.emitIfxChipItemSelect){\r\n           this.emitIfxChipItemSelectEvent();\r\n       } else {\r\n           this.chipState.emitIfxChipItemSelect = true;\r\n       }\r\n   }\r\n} \r\n\r\ngetItemLabel(): string {\r\n   return this.chipItem.innerText as string;\r\n}\r\n\r\ntoggleItemSelection() {\r\n   this.selected = !this.selected;\r\n}\r\n   \r\n\r\nemitIfxChipItemSelectEvent(emitIfxChange: boolean = true) {\r\n   this.ifxChipItemSelect.emit({ emitIfxChange: emitIfxChange,\r\n                           key: this.chipState.key,\r\n                           label: this.getItemLabel(), \r\n                           selected: this.selected, \r\n                           value: this.value });\r\n}\r\n\r\nhandleItemClick() {\r\n   this.toggleItemSelection();\r\n}\r\n\r\nhandleItemKeyDown(event: KeyboardEvent) {\r\n   if (event.code === 'Enter' || event.code === 'Space') {\r\n       this.toggleItemSelection();\r\n   }\r\n}\r\n\r\nhandleSelectedState() {\r\n   if (this.selected) {\r\n       this.emitIfxChipItemSelectEvent(false);\r\n   }\r\n}\r\n\r\n\r\ncomponentWillLoad() {\r\n   /* Propogating the selected state to the Chip (Parent) component if it is set. */\r\n   this.handleSelectedState();\r\n}\r\n\r\nrender() {\r\n   return (\r\n       <div class={`chip-item chip-item--${this.chipState.size} \r\n                    chip-item--${(this.selected && this.chipState.variant) === 'single' ? 'selected' : ''}`} \r\n           tabIndex={0}\r\n           onClick={() => {this.handleItemClick()}}\r\n           onKeyDown={(e) => {this.handleItemKeyDown(e)}}\r\n           role=\"option\"\r\n           aria-selected={this.selected.toString()}>    \r\n           {/* Checkbox; renders only in 'multi' variant. */}\r\n           { \r\n               this.chipState.variant === 'multi' &&\r\n               <ifx-checkbox checked={this.selected}\r\n                   tabIndex={-1} \r\n                   size='s'>\r\n               </ifx-checkbox>\r\n           }\r\n\r\n           <div class='chip-item__label'> <slot /> </div>\r\n\r\n           {/* Selected indicator only visible in 'single' variant. */}\r\n           <div class='chip-item__selected-indicator'> \r\n               <ifx-icon icon='check-16'> </ifx-icon> \r\n           </div>\r\n\r\n       </div>\r\n   );\r\n}\r\n}","@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n@use \"../../global/font.scss\";\r\n\r\n:host {\r\n  display: inline-flex;\r\n}\r\n\r\n.container {\r\n  display: inline-flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: 32px;\r\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\r\n  flex-wrap: wrap;\r\n\r\n  & .items__per-page-wrapper {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 16px;\r\n\r\n    & .items__per-page-label {\r\n      color: #1D1D1D;\r\n      font-size: 14px;\r\n      font-style: normal;\r\n      font-weight: 600;\r\n      line-height: 20px;\r\n    }\r\n\r\n    & .items__per-page-field {\r\n      display: flex;\r\n      flex-direction: column;\r\n      align-items: flex-start;\r\n\r\n      & ifx-select {\r\n        width: 92px;\r\n      }\r\n    }\r\n  }\r\n\r\n  & .items__total-wrapper {\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    gap: 12px;\r\n\r\n    & .items__total-button {\r\n      display: flex;\r\n      width: 40px;\r\n      height: 40px;\r\n      justify-content: center;\r\n      align-items: center;\r\n      border-radius: 100px;\r\n      border: 1px solid #BFBBBB;\r\n      background: #FFF;\r\n    }\r\n\r\n    & .page__numbers-wrapper {\r\n      display: flex;\r\n      justify-content: center;\r\n      align-items: center;\r\n      gap: 12px;\r\n\r\n      & .page__number-item {\r\n        display: flex;\r\n        padding: 6px;\r\n        flex-direction: column;\r\n        justify-content: center;\r\n        align-items: center;\r\n        gap: 10px;\r\n        border-radius: 100px;\r\n\r\n        &.active {\r\n          background-color: #0A8276;\r\n\r\n          & span {\r\n            color: #fff;\r\n          }\r\n        }\r\n\r\n        &:hover {\r\n          cursor: pointer;\r\n        }\r\n\r\n        &:hover:not(.active) {\r\n          background-color: #ddd;\r\n\r\n        }\r\n\r\n        &:active:not(.active) {\r\n          background-color: #575352;\r\n        }\r\n\r\n        & span {\r\n          display: flex;\r\n          width: 16px;\r\n          height: 16px;\r\n          flex-direction: column;\r\n          justify-content: center;\r\n          color: #1D1D1D;\r\n          text-align: center;\r\n          font-size: 13px;\r\n          font-style: normal;\r\n          font-weight: 400;\r\n          line-height: 20px;\r\n        }\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\n\r\n.pagination {\r\n  display: flex;\r\n\r\n  & ifx-icon-button:first-of-type {\r\n    margin-right: 12px;\r\n  }\r\n\r\n  & ifx-icon-button:last-of-type {\r\n    margin-left: 12px;\r\n  }\r\n}\r\n\r\n.page__button {\r\n  padding: 8px;\r\n  border-radius: 100px;\r\n}\r\n\r\nol {\r\n  list-style-type: none;\r\n  padding: 0;\r\n  margin: 0;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 12px;\r\n}\r\n\r\nli {\r\n  display: flex;\r\n  flex-direction: column;\r\n  justify-content: center;\r\n  align-items: center;\r\n  border-radius: 100px;\r\n\r\n  &:hover:not(.active) {\r\n    & page__button {\r\n      background-color: #EEEDED;\r\n    }\r\n  }\r\n\r\n  &:active:not(.active) {\r\n    & .page__button {\r\n      background-color: #575352;\r\n      color: #fff;\r\n    }\r\n  }\r\n\r\n  &.active {\r\n    background-color: #0A8276;\r\n\r\n    & .page__button {\r\n      color: #fff;\r\n    }\r\n  }\r\n\r\n  &:hover {\r\n    cursor: pointer;\r\n  }\r\n\r\n  & .page__button {\r\n    text-decoration: none;\r\n    display: flex;\r\n    width: 16px;\r\n    height: 16px;\r\n    flex-direction: column;\r\n    justify-content: center;\r\n    color: #1D1D1D;\r\n    text-align: center;\r\n    font-size: 13px;\r\n    font-style: normal;\r\n    font-weight: 400;\r\n    line-height: 20px;\r\n    align-items: center;\r\n  }\r\n}\r\n\r\n.prev,\r\n.next {\r\n  &.disabled {\r\n    cursor: default;\r\n\r\n    &:hover {\r\n      cursor: default;\r\n      text-decoration: none;\r\n    }\r\n  }\r\n}\r\n\r\n.prev {\r\n  margin-right: 2.5px;\r\n}\r\n\r\n.next {\r\n  margin-left: 2.5px;\r\n}\r\n\r\n@media (max-width: tokens.$ifxBreakpointM) {\r\n  .container {\r\n    gap: tokens.$ifxSpace200;\r\n    justify-content: left;\r\n\r\n    .items__total-wrapper {\r\n      .pagination {\r\n        ol {\r\n          gap: tokens.$ifxSpace150;\r\n        }\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\n@media (max-width: 374px) {\r\n  .pagination {\r\n    .ellipsis + .active {\r\n      margin-left: tokens.$ifxSpace100;\r\n    }\r\n\r\n    .active + .ellipsis {\r\n      margin-left: tokens.$ifxSpace100;\r\n    }\r\n  }\r\n}\r\n","import { Component, h, Element, Event, EventEmitter, Prop, State, Listen, Watch } from '@stencil/core';\r\nimport { trackComponent } from '../../global/utils/tracking';\r\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\r\nimport { detectFramework } from '../../global/utils/framework-detection';\r\n\r\n@Component({\r\n  tag: 'ifx-pagination',\r\n  styleUrl: 'pagination.scss',\r\n  shadow: true\r\n})\r\nexport class Pagination {\r\n  @Element() el: HTMLElement;\r\n  @Event() ifxPageChange: EventEmitter;\r\n  @Event() ifxItemsPerPageChange: EventEmitter;\r\n  @Prop() currentPage: number = 1;\r\n  @Prop() showItemsPerPage: boolean = true;\r\n  @State() internalPage: number = 1;\r\n  @State() internalItemsPerPage: number = 10;\r\n  @State() numberOfPages: number[] = [];\r\n  @Prop() total: number = 1;\r\n  @Prop() itemsPerPage: any[] | string;\r\n  @State() filteredItemsPerPage: any[] = [];\r\n  @State() visiblePages: (number | string)[] = [];\r\n\r\n  private CLASS_DISABLED = \"disabled\";\r\n  private CLASS_ACTIVE = \"active\";\r\n  private prevInternalPage: number;\r\n\r\n  @Watch('total')\r\n  watchTotalHandler() {\r\n    this.calculateNumberOfPages();\r\n    this.updateVisiblePages();\r\n  }\r\n\r\n  @Watch('currentPage')\r\n  currentPageWatcher(newVal: number) {\r\n    this.internalPage = Math.max(1, Math.min(newVal, this.numberOfPages.length));\r\n    this.calculateNumberOfPages();\r\n    this.updateVisiblePages();\r\n  }\r\n\r\n    @Listen('ifxSelect')\r\n    setItemsPerPage(e: CustomEvent) {\r\n      const selectedValue = e.detail?.value || e.detail?.label;\r\n      const newItemsPerPage = parseInt(selectedValue) || 10;\r\n\r\n      if (newItemsPerPage === this.internalItemsPerPage) {\r\n        return;\r\n      }\r\n\r\n      this.internalItemsPerPage = newItemsPerPage;\r\n      this.internalPage = 1;\r\n      this.calculateNumberOfPages();\r\n      this.updateVisiblePages();\r\n      this.handleEventEmission();\r\n    }\r\n\r\n    emitItemsPerPage(e) {\r\n      this.ifxItemsPerPageChange.emit((e as any).detail.label)\r\n    }\r\n\r\n  async componentDidLoad() {\r\n    if (this.showItemsPerPage) {\r\n      const select = this.el.shadowRoot.querySelector('#itemsPerPageSelect');\r\n      if(select) {\r\n        select.addEventListener('ifxSelect', (e) => this.emitItemsPerPage(e))\r\n      }\r\n    }\r\n\r\n    // Add resize listener to update pagination on screen size changes\r\n    window.addEventListener('resize', this.handleResize);\r\n\r\n    if(!isNestedInIfxComponent(this.el)) {\r\n      const framework = detectFramework();\r\n      trackComponent('ifx-pagination', await framework)\r\n    }\r\n    this.initPagination();\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    if (this.showItemsPerPage) {\r\n      const select = this.el.shadowRoot.querySelector('#itemsPerPageSelect');\r\n      if (select) {\r\n        select.removeEventListener('ifxSelect', (e) => this.emitItemsPerPage(e));\r\n      }\r\n    }\r\n\r\n    // Remove resize listener\r\n    window.removeEventListener('resize', this.handleResize);\r\n\r\n    // Clear any pending resize timeout\r\n    if (this.resizeTimeout) {\r\n      clearTimeout(this.resizeTimeout);\r\n    }\r\n  }\r\n\r\n  updateVisiblePages() {\r\n    // Check if screen is mobile (< 375px)\r\n    const isMobile = window.innerWidth < 375;\r\n    const totalPages = this.numberOfPages.length;\r\n    const current = this.internalPage;\r\n    let pages: (number | string)[] = [];\r\n\r\n    if (isMobile) {\r\n      // Mobile logic: maximum 5 elements\r\n      if (totalPages <= 5) {\r\n        pages = [...this.numberOfPages];\r\n      } else {\r\n        // Always show first page\r\n        pages.push(1);\r\n\r\n        if (current <= 2) {\r\n          // Show: 1 2 3 … 10 (for pages 1 and 2)\r\n          pages.push(2, 3, '...', totalPages);\r\n        } else if (current >= totalPages - 1) {\r\n          // Show: 1 … 23 24 25 (for last 2 pages only)\r\n          pages.push('...', totalPages - 2, totalPages - 1, totalPages);\r\n        } else {\r\n          // Show: 1 … 5 … 10 (for middle pages, including page 3 and third-to-last page)\r\n          pages.push('...', current, '...', totalPages);\r\n        }\r\n      }\r\n    } else {\r\n      // Desktop logic: maximum 7 elements\r\n      const buffer = 2;\r\n\r\n      if (totalPages <= 7) {\r\n        pages = [...this.numberOfPages];\r\n      } else {\r\n        // Always show first page\r\n        pages.push(1);\r\n\r\n        // Determine the range around current page\r\n        let start = Math.max(2, current - buffer);\r\n        let end = Math.min(totalPages - 1, current + buffer);\r\n\r\n        // Adjust range to ensure we show enough pages\r\n        // If we're close to the beginning, extend the end\r\n        if (current <= 4) {\r\n          start = 2;\r\n          end = Math.min(totalPages - 1, 5);\r\n        }\r\n        // If we're close to the end, extend the start\r\n        else if (current >= totalPages - 3) {\r\n          start = Math.max(2, totalPages - 4);\r\n          end = totalPages - 1;\r\n        }\r\n        // For middle pages, show current +/- 1\r\n        else {\r\n          start = current - 1;\r\n          end = current + 1;\r\n        }\r\n\r\n        // Add ellipsis before the range if there's a gap\r\n        if (start > 2) {\r\n          pages.push('...');\r\n        }\r\n\r\n        // Add the range of pages\r\n        for (let i = start; i <= end; i++) {\r\n          pages.push(i);\r\n        }\r\n\r\n        // Add ellipsis after the range if there's a gap\r\n        if (end < totalPages - 1) {\r\n          pages.push('...');\r\n        }\r\n\r\n        // Always show last page\r\n        pages.push(totalPages);\r\n      }\r\n    }\r\n\r\n    this.visiblePages = pages;\r\n  }\r\n\r\n  calculateNumberOfPages() {\r\n    const totalPages = Math.ceil(this.total / this.internalItemsPerPage);\r\n    this.numberOfPages = Array.from({ length: totalPages }, (_, i) => i + 1);\r\n    this.internalPage = Math.max(1, Math.min(this.currentPage, totalPages));\r\n  }\r\n\r\n  filterOptionsArray() {\r\n    const items = typeof this.itemsPerPage === 'string' ?\r\n      JSON.parse(this.itemsPerPage) : this.itemsPerPage;\r\n    this.filteredItemsPerPage = items.map(item => ({\r\n      ...item,\r\n      label: item.label || item.value\r\n    }));\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.filterOptionsArray();\r\n\r\n    const selectedOption = this.filteredItemsPerPage.find(option => option.selected);\r\n    if (selectedOption) {\r\n      this.internalItemsPerPage = Number(selectedOption.value);\r\n    } else if (this.filteredItemsPerPage.length > 0) {\r\n      this.internalItemsPerPage = Number(this.filteredItemsPerPage[0].value);\r\n    }\r\n\r\n    this.calculateNumberOfPages();\r\n    this.internalPage = Math.max(1, Math.min(this.currentPage, this.numberOfPages.length));\r\n    this.updateVisiblePages();\r\n  }\r\n\r\n  componentWillUpdate() {\r\n     if (this.prevInternalPage !== this.internalPage) {\r\n      this.updateVisiblePages();\r\n      this.prevInternalPage = this.internalPage;\r\n    }\r\n  }\r\n\r\n  componentDidUpdate() {\r\n    this.initPagination();\r\n  }\r\n\r\n  handleEventEmission() {\r\n    this.ifxPageChange.emit({\r\n      currentPage: this.internalPage,\r\n      totalPages: this.numberOfPages.length,\r\n      itemsPerPage: this.internalItemsPerPage\r\n    });\r\n  }\r\n\r\n  initPagination() {\r\n    const pagination = this.el.shadowRoot.querySelector('.pagination');\r\n    if (!pagination) return;\r\n\r\n    const updateButtons = () => {\r\n      const prev = pagination.querySelector<HTMLButtonElement>('.prev');\r\n      const next = pagination.querySelector<HTMLButtonElement>('.next');\r\n      if (prev) {\r\n        prev.disabled = this.internalPage === 1;\r\n        prev.classList.toggle(this.CLASS_DISABLED, this.internalPage === 1);\r\n      }\r\n      if (next) {\r\n        next.disabled = this.internalPage === this.numberOfPages.length;\r\n        next.classList.toggle(this.CLASS_DISABLED, this.internalPage === this.numberOfPages.length);\r\n      }\r\n    };\r\n\r\n    pagination.querySelectorAll('li').forEach(li => {\r\n      li.removeEventListener('click', this.handlePageClick);\r\n      li.addEventListener('click', this.handlePageClick);\r\n    });\r\n\r\n    updateButtons();\r\n  }\r\n\r\n  private handlePageClick = (e: Event) => {\r\n    const li = e.currentTarget as HTMLLIElement;\r\n    const page = parseInt(li.dataset.page);\r\n    if (!isNaN(page)) this.changePage(page);\r\n  };\r\n\r\n  private handleResize = () => {\r\n    // Debounce resize events to prevent excessive calls\r\n    clearTimeout(this.resizeTimeout);\r\n    this.resizeTimeout = setTimeout(() => {\r\n      this.updateVisiblePages();\r\n    }, 100);\r\n  };\r\n\r\n  private resizeTimeout: any;\r\n\r\n  changePage(newPage: number) {\r\n    newPage = Math.max(1, Math.min(newPage, this.numberOfPages.length));\r\n    if (newPage === this.internalPage) return;\r\n\r\n    this.internalPage = newPage;\r\n    this.handleEventEmission();\r\n    this.initPagination();\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div class=\"container\">\r\n        {this.showItemsPerPage && (\r\n          <div class=\"items__per-page-wrapper\">\r\n            <div class=\"items__per-page-label\">Results per Page</div>\r\n            <div class=\"items__per-page-field\">\r\n              <ifx-select\r\n                id='itemsPerPageSelect'\r\n                placeholder='false'\r\n                show-search='false'\r\n                value={undefined}\r\n                disabled={false}\r\n                error={false}\r\n                size=\"s\"\r\n                options={this.filteredItemsPerPage}\r\n                placeholder-value=\"Select\"\r\n              ></ifx-select>\r\n            </div>\r\n          </div>\r\n        )}\r\n\r\n        <div class=\"items__total-wrapper\">\r\n          <div class=\"pagination\">\r\n            <ifx-icon-button\r\n              class=\"prev\"\r\n              icon=\"arrow-left-16\"\r\n              aria-label='Previous Page'\r\n              onClick={() => this.changePage(this.internalPage - 1)}\r\n              variant=\"secondary\"\r\n            ></ifx-icon-button>\r\n\r\n            <ol>\r\n            {this.visiblePages.map((page, i) => typeof page === 'number' ? (\r\n              <li\r\n                key={`page-${page}`}\r\n                class={{ [this.CLASS_ACTIVE]: page === this.internalPage }}\r\n                data-page={page}\r\n              >\r\n                <span \r\n                  class='page__button'\r\n                  role=\"button\"\r\n                  tabindex=\"0\"\r\n                  aria-current={page === this.internalPage ? \"page\" : undefined}\r\n                  aria-label={`Page ${page}`}\r\n                  onClick={() => this.changePage(page)}\r\n                  onKeyDown={(e) => (e.key === 'Enter' || e.key === ' ') && this.changePage(page)}\r\n                >\r\n                  {page}\r\n                </span>\r\n              </li>\r\n            ) : (\r\n              <li class=\"ellipsis\" key={`ellipsis-${i}`}>\r\n                <span aria-hidden=\"true\">...</span>\r\n              </li>\r\n            ))}\r\n            </ol>\r\n\r\n            <ifx-icon-button\r\n              class=\"next\"\r\n              icon=\"arrow-right-16\"\r\n              aria-label='Next Page'\r\n              onClick={() => this.changePage(this.internalPage + 1)}\r\n              variant=\"secondary\"\r\n            ></ifx-icon-button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,2 @@
+import{r,h as e,a}from"./p-PqnYwNKt.js";const o=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}.container{display:flex;align-items:center;gap:20px;flex-wrap:wrap;text-decoration:none;color:#1D1D1D;padding:0px 24px 24px 24px;word-wrap:break-word;overflow-wrap:anywhere;}.container:hover{cursor:initial}';const n=class{constructor(e){r(this,e)}render(){return e("div",{key:"c2ad16092f513de6ea485ab418fcf2e62b276859",class:"container"},e("slot",{key:"e4a80833b3a1de998967120d85fcab706926e3ec"}))}get el(){return a(this)}};n.style=o;export{n as ifx_card_links};
+//# sourceMappingURL=p-356425ec.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["cardLinksCss","CardLinks","render","h","key","class"],"sources":["src/components/card/card-links/card-links.scss?tag=ifx-card-links&encapsulation=shadow","src/components/card/card-links/card-links.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n@use \"../../../global/font.scss\";\r\n\r\n.container {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: tokens.$ifxSpace250;\r\n  flex-wrap: wrap;\r\n  text-decoration: none;\r\n  color: tokens.$ifxColorBaseBlack;\r\n  padding: 0px 24px 24px 24px;\r\n\r\n  /* wraps text at spaces and within words */\r\n  word-wrap: break-word;\r\n  /* breaks text within a word if necessary */\r\n  overflow-wrap: anywhere;\r\n  /* breaks text at arbitrary points when needed */\r\n\r\n  &:hover {\r\n    cursor: initial;\r\n  }\r\n}","import { Component, h, Element } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'ifx-card-links',\r\n  styleUrl: 'card-links.scss',\r\n  shadow: true,\r\n})\r\n\r\nexport class CardLinks {\r\n  @Element() el;\r\n\r\n  render() {\r\n    return (\r\n      <div class='container'>\r\n        <slot />\r\n      </div>\r\n    )\r\n  }\r\n}\r\n"],"mappings":"wCAAA,MAAMA,EAAe,8Q,MCQRC,EAAS,M,yBAGpB,MAAAC,GACE,OACEC,EAAA,OAAAC,IAAA,2CAAKC,MAAM,aACTF,EAAQ,QAAAC,IAAA,6C","ignoreList":[]}