@infineon/infineon-design-system-stencil 37.3.1--canary.1962.a3e58a46a5617bfd44309875b6808fe14db685dd.0 → 37.3.1--canary.1968.7518b0843a681b10239a782e4dbea8f48e872513.0

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

@@ -1 +0,0 @@
-{"version":3,"names":["tagCss","IfxTagStyle0","Tag","componentDidLoad","isNestedInIfxComponent","this","el","framework","detectFramework","trackComponent","render","h","key","class","icon","href"],"sources":["src/components/tag/tag.scss?tag=ifx-tag&encapsulation=shadow","src/components/tag/tag.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: inline-flex;\n}\n\n.container {\n  display: inline-flex;\n  align-items: center;\n  padding: tokens.$ifxSpace50 tokens.$ifxSpace200;\n  border: 1px solid tokens.$ifxColorEngineering300;\n  border-radius: tokens.$ifxBorderRadiusRound;\n  background-color: tokens.$ifxColorBaseWhite;\n  gap: tokens.$ifxSpace100;\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n\n  &:hover {\n    cursor: pointer;\n    border-color: tokens.$ifxColorEngineering400;\n  }\n\n  &:active,\n  &.active {\n    border-color: tokens.$ifxColorBaseBlack;\n  }\n\n  &:focus:not(:active, .active) {\n    outline: none;\n    border-color: tokens.$ifxColorBaseBlack;\n  }\n\n  .label-wrapper {\n    text-decoration: none;\n\n    .label {\n      margin: 0;\n      font-weight: tokens.$ifxFontWeightRegular;\n      font-size: tokens.$ifxFontSizeM;\n      line-height: 20px;\n      color: tokens.$ifxColorBaseBlack;\n    }\n  }\n}","import { Component, Prop, h, Element } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking'; \nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n  tag: 'ifx-tag',\n  styleUrl: 'tag.scss',\n  shadow: true\n})\nexport class Tag {\n  @Element() el: HTMLElement;\n  @Prop() icon: string;\n\n  componentDidLoad() { \n    if(!isNestedInIfxComponent(this.el)) { \n      const framework = detectFramework();\n      trackComponent('ifx-tag', framework)\n    }\n  }\n\n  render() {\n    return (\n      <div aria-label=\"a tag\" class=\"container\">\n        {this.icon && (\n          <ifx-icon icon={this.icon}></ifx-icon>)}\n        <a href=\"javascript:void(null);\" class=\"label-wrapper\" >\n          <p class=\"label\">\n            <slot />\n          </p>\n        </a>\n      </div>\n\n    );\n  }\n}"],"mappings":"iIAAA,MAAMA,EAAS,4lBACf,MAAAC,EAAeD,E,MCSFE,EAAG,M,yBAId,gBAAAC,GACE,IAAIC,EAAuBC,KAAKC,IAAK,CACnC,MAAMC,EAAYC,IAClBC,EAAe,UAAWF,E,EAI9B,MAAAG,GACE,OACEC,EAAA,OAAAC,IAAA,wDAAgB,QAAQC,MAAM,aAC3BR,KAAKS,MACJH,EAAA,YAAAC,IAAA,2CAAUE,KAAMT,KAAKS,OACvBH,EAAA,KAAAC,IAAA,2CAAGG,KAAK,yBAAyBF,MAAM,iBACrCF,EAAA,KAAAC,IAAA,2CAAGC,MAAM,SACPF,EAAA,QAAAC,IAAA,+C","ignoreList":[]}

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

@@ -1 +0,0 @@
-{"version":3,"names":["infineonIconStencilCss","IfxIconStyle0","InfineonIconStencil","constructor","hostRef","this","icon","updateIcon","newIcon","internalIcon","setIcon","convertStringToHtml","htmlString","div","document","createElement","innerHTML","firstChild","convertHtmlToObject","htmlElement","pathToObject","Array","from","attributes","name","value","reduce","acc","current","convertPathsToVnode","htmlPath","svgPaths","parentPath","parentPathToVnode","h","push","paths","querySelectorAll","pathLength","length","i","objToVnode","getSVG","svgPath","ifxIcon","width","getAttribute","height","fill","viewBox","class","xmlns","constructIcon","SVG","console","error","consoleError","emit","toCamelCase","str","replace","_","chr","toUpperCase","m","toLowerCase","iconName","getIcon","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 {\n  display: inline-flex;\n  justify-content: center;\n\n  &:empty {\n    display: none;\n  }\n}","import { Component, Prop, h, Host, Event, EventEmitter, Watch, State, Element } from '@stencil/core';\nimport { getIcon } from '@infineon/infineon-icons'\nimport { trackComponent } from '../../global/utils/tracking'; \nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n\n@Component({\n  tag: 'ifx-icon',\n  styleUrl: './infineonIconStencil.scss'\n})\n\nexport class InfineonIconStencil {\n  @Element() el: HTMLElement;\n  @Prop({ mutable: true }) icon: string = \"\"\n  @Prop({ mutable: true }) ifxIcon: any;\n  @State() internalIcon: string;\n  @Event() consoleError: EventEmitter<boolean>;\n\n   @Watch('icon')\n    updateIcon(newIcon: string) { \n      this.internalIcon = newIcon;\n      this.setIcon()\n    }\n\n  convertStringToHtml(htmlString) { \n    const div = document.createElement('div')\n    div.innerHTML = htmlString\n    return div.firstChild\n  }\n\n  convertHtmlToObject(htmlElement) { \n    let pathToObject = Array\n      .from(htmlElement.attributes, ({ name, value }) => ({ name, value }))\n      .reduce((acc, current) => {\n        acc[current.name] = current.value\n        return acc\n      }, {})\n\n    return pathToObject\n  }\n\n  convertPathsToVnode(htmlPath) { \n    let svgPaths = []\n    const parentPath = this.convertHtmlToObject(htmlPath);\n    const parentPathToVnode = h(\"path\", parentPath);\n    svgPaths.push(parentPathToVnode)\n    if(htmlPath.firstChild) { \n      const paths = htmlPath.querySelectorAll('path');\n      const pathLength = htmlPath.querySelectorAll('path').length;\n      for(let i = 0; i < pathLength; i++) { \n        let pathToObject = this.convertHtmlToObject(paths[i])\n        let objToVnode = h(\"path\", pathToObject)\n        svgPaths.push(objToVnode)\n      }      \n    }\n    return svgPaths\n  }\n\n  getSVG(svgPath) {\n    const htmlPath = this.convertStringToHtml(this.ifxIcon) as SVGElement;\n    const width = htmlPath.getAttribute('width');\n    const height = htmlPath.getAttribute('height');\n    const fill = htmlPath.getAttribute('fill');\n    const viewBox = htmlPath.getAttribute('viewBox');\n    \n    return <svg class=\"inline-svg\" width={width} height={height} xmlns=\"http://www.w3.org/2000/svg\" fill={fill} viewBox={viewBox}>{...svgPath}</svg>\n  }\n\n  constructIcon() {\n    if(this.ifxIcon) {\n      const htmlPath = this.convertStringToHtml(this.ifxIcon)\n      const svgPath = this.convertPathsToVnode(htmlPath)\n      const SVG = this.getSVG(svgPath)\n      return SVG;\n    } else if(this.icon !== \"\") {\n      console.error('Icon not found!')\n      this.consoleError.emit(true)\n      return;\n    }  else { \n      return;\n    }\n  }\n\nsetIcon() { \n  const toCamelCase = str =>\n    str\n      .replace(/[-_]+(.)/g, (_, chr) => chr.toUpperCase()) // handle - and _ to uppercase\n      .replace(/^(.)/, (m) => m.toLowerCase()); // ensure first letter is lowercase\n\n  const iconName = toCamelCase(this.internalIcon);\n  this.ifxIcon = getIcon(iconName);\n}\n\n isInsideAgGrid(el: HTMLElement): boolean {\n  let current = el;\n  while (current) {\n    if (current.className?.toLowerCase().startsWith('ag-')) {\n      return true;\n    }\n    current = current.parentElement;\n  }\n  return false;\n}\n\n   isInsideChoices(el: HTMLElement): boolean {\n    let current = el;\n    while (current) {\n      if (current.className?.toLowerCase().startsWith('choices__')) {\n        return true;\n      }\n      current = current.parentElement;\n    }\n    return false;\n  }\n\n  componentWillLoad() {\n    this.internalIcon = this.icon;\n    this.setIcon()\n  }\n\n  componentDidLoad() { \n    if(!isNestedInIfxComponent(this.el)) { \n      if(!this.isInsideAgGrid(this.el) && !this.isInsideChoices(this.el)) { \n        const framework = detectFramework();\n        trackComponent('ifx-icon', framework)\n      }\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n      {this.constructIcon()}\n      </Host>\n    );\n  }\n}"],"mappings":"mLAAA,MAAMA,EAAyB,mFAC/B,MAAAC,EAAeD,E,MCWFE,EAAmB,MALhC,WAAAC,CAAAC,G,qDAO2BC,KAAAC,KAAe,E,CAMtC,UAAAC,CAAWC,GACTH,KAAKI,aAAeD,EACpBH,KAAKK,S,CAGT,mBAAAC,CAAoBC,GAClB,MAAMC,EAAMC,SAASC,cAAc,OACnCF,EAAIG,UAAYJ,EAChB,OAAOC,EAAII,U,CAGb,mBAAAC,CAAoBC,GAClB,IAAIC,EAAeC,MAChBC,KAAKH,EAAYI,YAAY,EAAGC,OAAMC,YAAO,CAAQD,OAAMC,YAC3DC,QAAO,CAACC,EAAKC,KACZD,EAAIC,EAAQJ,MAAQI,EAAQH,MAC5B,OAAOE,CAAG,GACT,IAEL,OAAOP,C,CAGT,mBAAAS,CAAoBC,GAClB,IAAIC,EAAW,GACf,MAAMC,EAAa3B,KAAKa,oBAAoBY,GAC5C,MAAMG,EAAoBC,EAAE,OAAQF,GACpCD,EAASI,KAAKF,GACd,GAAGH,EAASb,WAAY,CACtB,MAAMmB,EAAQN,EAASO,iBAAiB,QACxC,MAAMC,EAAaR,EAASO,iBAAiB,QAAQE,OACrD,IAAI,IAAIC,EAAI,EAAGA,EAAIF,EAAYE,IAAK,CAClC,IAAIpB,EAAef,KAAKa,oBAAoBkB,EAAMI,IAClD,IAAIC,EAAaP,EAAE,OAAQd,GAC3BW,EAASI,KAAKM,E,EAGlB,OAAOV,C,CAGT,MAAAW,CAAOC,GACL,MAAMb,EAAWzB,KAAKM,oBAAoBN,KAAKuC,SAC/C,MAAMC,EAAQf,EAASgB,aAAa,SACpC,MAAMC,EAASjB,EAASgB,aAAa,UACrC,MAAME,EAAOlB,EAASgB,aAAa,QACnC,MAAMG,EAAUnB,EAASgB,aAAa,WAEtC,OAAOZ,EAAA,OAAKgB,MAAM,aAAaL,MAAOA,EAAOE,OAAQA,EAAQI,MAAM,6BAA6BH,KAAMA,EAAMC,QAASA,MAAaN,E,CAGpI,aAAAS,GACE,GAAG/C,KAAKuC,QAAS,CACf,MAAMd,EAAWzB,KAAKM,oBAAoBN,KAAKuC,SAC/C,MAAMD,EAAUtC,KAAKwB,oBAAoBC,GACzC,MAAMuB,EAAMhD,KAAKqC,OAAOC,GACxB,OAAOU,C,MACF,GAAGhD,KAAKC,OAAS,GAAI,CAC1BgD,QAAQC,MAAM,mBACdlD,KAAKmD,aAAaC,KAAK,MACvB,M,KACM,CACN,M,EAIN,OAAA/C,GACE,MAAMgD,EAAcC,GAClBA,EACGC,QAAQ,aAAa,CAACC,EAAGC,IAAQA,EAAIC,gBACrCH,QAAQ,QAASI,GAAMA,EAAEC,gBAE9B,MAAMC,EAAWR,EAAYrD,KAAKI,cAClCJ,KAAKuC,QAAUuB,EAAQD,E,CAGxB,cAAAE,CAAeC,G,MACd,IAAIzC,EAAUyC,EACd,MAAOzC,EAAS,CACd,IAAI0C,EAAA1C,EAAQ2C,aAAS,MAAAD,SAAA,SAAAA,EAAEL,cAAcO,WAAW,OAAQ,CACtD,OAAO,I,CAET5C,EAAUA,EAAQ6C,a,CAEpB,OAAO,K,CAGN,eAAAC,CAAgBL,G,MACf,IAAIzC,EAAUyC,EACd,MAAOzC,EAAS,CACd,IAAI0C,EAAA1C,EAAQ2C,aAAS,MAAAD,SAAA,SAAAA,EAAEL,cAAcO,WAAW,aAAc,CAC5D,OAAO,I,CAET5C,EAAUA,EAAQ6C,a,CAEpB,OAAO,K,CAGT,iBAAAE,GACEtE,KAAKI,aAAeJ,KAAKC,KACzBD,KAAKK,S,CAGP,gBAAAkE,GACE,IAAIC,EAAuBxE,KAAKgE,IAAK,CACnC,IAAIhE,KAAK+D,eAAe/D,KAAKgE,MAAQhE,KAAKqE,gBAAgBrE,KAAKgE,IAAK,CAClE,MAAMS,EAAYC,IAClBC,EAAe,WAAYF,E,GAKjC,MAAAG,GACE,OACE/C,EAACgD,EAAI,CAAAC,IAAA,4CACJ9E,KAAK+C,gB","ignoreList":[]}

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

@@ -1,2 +0,0 @@
-import{r as e,c as i,h as t,g as s}from"./p-b7a462e5.js";import{d as a,t as n}from"./p-ee75a0aa.js";import{i as l}from"./p-1ecafb97.js";const r=':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:1px solid #BFBBBB;border-radius:9999px;background:#FFFFFF;cursor:pointer;transition:border 100ms ease;font:400 0.875rem/1.25rem "Source Sans 3"}.chip__wrapper:hover,.chip__wrapper:focus-visible{outline:none;border:1px solid #575352}.chip__wrapper:focus{border:1px solid #0A8276}.chip__wrapper.chip__wrapper--small{padding:4px 12px}.chip__wrapper.chip__wrapper--large{padding:8px 16px}.chip__wrapper.chip__wrapper--opened{border:1px solid #0A8276}.chip__wrapper.chip__wrapper--opened .wrapper__open-button{transform:rotate(-180deg)}.chip__wrapper.chip__wrapper--selected{outline:3px solid #0A8276;outline-offset:-3px;color:#0A8276}.chip__wrapper.chip__wrapper--selected:hover,.chip__wrapper.chip__wrapper--selected:focus-visible{outline:3px solid #08665C;color:#08665C}.wrapper__label{display:inline-flex;align-items:center;gap:4px;font:400 0.875rem/1.25rem "Source Sans 3"}.wrapper__label .label__selected-options{font:600 0.875rem/1.25rem "Source Sans 3"}.wrapper__open-button{display:flex;align-items:center;transition:all 300ms ease}.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 c=r;const h=class{constructor(t){e(this,t);this.ifxChange=i(this,"ifxChange",7);this.placeholder="";this.size="large";this.value=undefined;this.variant="single";this.readOnly=false;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 s=this.chip.shadowRoot.querySelector(".chip__dropdown");if(!i.includes(s)&&!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 s=t.shadowRoot.querySelector(".chip-item");if(s){setTimeout((()=>{s.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==="small"?"small":"large",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)}componentDidLoad(){if(!l(this.chip)){const e=a();n("ifx-chip",e)}}render(){return t("div",{key:"1ac8fb4f36bd02e589585e8e7f9657e97f60e713",class:"chip"},t("div",{key:"85031ad9a54186bc8bdadb358b039dcec15465c1",class:`chip__wrapper chip__wrapper--${this.size==="small"?"small":"large"}\n                  chip__wrapper--${this.variant==="multi"?"multi":"single"}\n                  ${this.opened&&!this.readOnly?"chip__wrapper--opened":""}\n                  ${this.selectedOptions.length?"chip__wrapper--selected":""}`,tabIndex:0,onClick:!this.readOnly?()=>{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},t("div",{key:"0390665c57f6a2aad890aceb6eb20afed0f2825e",class:"wrapper__label"},this.selectedOptions.length===0&&`${this.placeholder}`,this.selectedOptions.length!==0&&(this.variant==="multi"||this.readOnly)&&this.placeholder!==""&&`${this.placeholder}:`,this.selectedOptions.length!==0&&t("div",{key:"2922031c5faf54a1ab771da855f5f5226b0d34fe",class:"label__selected-options"},this.getSelectedOptions()),this.selectedOptions.length>2&&this.variant==="multi"&&t("ifx-indicator",{key:"782f71e7b167df4f05e1e104df25486b775a6472",variant:"number",number:this.selectedOptions.length-2})),!this.readOnly&&(this.variant!=="multi"||this.variant==="multi"&&this.selectedOptions.length===0)&&t("div",{key:"b7c705fd4c32332cd9543c1a3e9dd8a7cb67fe6c",class:"wrapper__open-button"},t("ifx-icon",{key:1,icon:`chevron-down-16`})),this.variant!=="multi"&&this.readOnly!==false&&this.selectedOptions.length>0&&t("div",{key:"65eaafbd360fde1d7e4897cfbb5651e5536df7ff",class:"wrapper__unselect-button",onClick:e=>{this.handleUnselectButtonClick(e)}},t("ifx-icon",{key:2,icon:`cross16`})),this.selectedOptions.length>=1&&this.variant==="multi"&&t("div",{key:"a9433191735a211b526cd4ef7baa03c8a25effef",class:"wrapper__unselect-button",onClick:e=>{this.handleUnselectButtonClick(e)}},t("ifx-icon",{key:2,icon:`cross16`}))),this.opened&&!this.readOnly&&t("div",{key:"276469e96069f51373ce8204d6c4dc37a17248a4",id:"dropdown",role:"listbox",class:"chip__dropdown"},t("slot",{key:"489965f58d0b5e7a0c2f93299852879982df0b21"})))}get chip(){return s(this)}static get watchers(){return{value:["handleValueChange"],readOnly:["handleReadOnlyChange"]}}};h.style=c;const o=':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 p=o;const d=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:"7ceff18d0a41b419a188d925fd854cc97d7a9ecd",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:"d2f717951d288aa0863081e54cabf7edd1c6f7e6",checked:this.selected,tabIndex:-1,size:"s"}),t("div",{key:"fff335d9009c93863012f6a4307ed4322413c4f7",class:"chip-item__label"}," ",t("slot",{key:"a093e9caf2eecba28c58674dde3f788be1f5849b"})," "),t("div",{key:"ea76c6b3d0bdd2a687acfbe323ebd9e6d6034a40",class:"chip-item__selected-indicator"},t("ifx-icon",{key:"5d0ae125cb1ea0297d81d773c9981bd13f0c5759",icon:"check-16"}," ")))}get chipItem(){return s(this)}static get watchers(){return{selected:["validateSelected"]}}};d.style=p;const f='@charset "UTF-8";: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)}.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}a{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) a{background-color:#EEEDED}li:active:not(.active) a{background-color:#575352;color:#fff}li.active{background-color:#0A8276}li.active a{color:#fff}li:hover{cursor:pointer}li a{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 (min-width: 400px){li:first-child,li.active-sibling,li.active,li.active+li,li:last-child{display:inline-flex !important;flex-direction:row}li:first-child:nth-last-child(n+8)~li{display:none}li:first-child:nth-last-child(n+8)~li.active-sibling:before{content:"…";font-size:13px;display:inline-block;margin-right:6px}li:first-child:nth-last-child(n+8)~li.active+li:after{content:"…";font-size:13px;display:inline-block;margin-left:6px}li:first-child:nth-last-child(n+8)~li:nth-last-child(-n+5){display:inline-flex;flex-direction:row}li:first-child:nth-last-child(n+8)~li:nth-last-child(5):before{content:"…";font-size:13px;display:inline-block;margin-right:6px}li:first-child:nth-last-child(n+8)~li:nth-child(-n+2):before,li:first-child:nth-last-child(n+8)~li:nth-child(-n+2):after,li:first-child:nth-last-child(n+8)~li:nth-last-child(-n+2):before,li:first-child:nth-last-child(n+8)~li:nth-last-child(-n+2):after,li:first-child:nth-last-child(n+8)~li.active-sibling:nth-last-child(-n+4):before,li:first-child:nth-last-child(n+8)~li.active-sibling:nth-last-child(-n+4):after{display:none !important}li:first-child:nth-last-child(n+8).active~li:nth-last-child(-n+5),li:first-child:nth-last-child(n+8)~li.active~li:nth-last-child(-n+5){display:none}li:first-child:nth-last-child(n+8).active~li:nth-last-child(-n+5):before,li:first-child:nth-last-child(n+8)~li.active~li:nth-last-child(-n+5):before{display:none}li:first-child:nth-last-child(n+8).active~li:nth-child(-n+5),li:first-child:nth-last-child(n+8)~li.active~li:nth-child(-n+5){display:inline-flex !important;flex-direction:row}li:first-child:nth-last-child(n+8).active~li:nth-child(-n+4):after,li:first-child:nth-last-child(n+8)~li.active~li:nth-child(-n+4):after{display:none}li:first-child:nth-last-child(n+8).active~li:nth-child(5):after,li:first-child:nth-last-child(n+8)~li.active~li:nth-child(5):after{content:"…";font-size:13px;display:inline-block;margin-left:6px}li:first-child:nth-last-child(n+8).active:before,li:first-child:nth-last-child(n+8).active:after,li:first-child:nth-last-child(n+8)~li.active:before,li:first-child:nth-last-child(n+8)~li.active:after{display:none}}';const b=f;const m=class{constructor(t){e(this,t);this.ifxPageChange=i(this,"ifxPageChange",7);this.currentPage=1;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)}}setItemsPerPage(e){var i,t;const s=((i=e.detail)===null||i===void 0?void 0:i.value)||((t=e.detail)===null||t===void 0?void 0:t.label);const a=parseInt(s)||10;if(a===this.internalItemsPerPage){return}this.internalItemsPerPage=a;this.internalPage=1;this.calculateNumberOfPages();this.updateVisiblePages();this.handleEventEmission()}componentDidLoad(){if(!l(this.el)){const e=a();n("ifx-pagination",e)}this.initPagination()}updateVisiblePages(){const e=2;const i=this.numberOfPages.length;const t=this.internalPage;let s=[];if(i<=5){s=[...this.numberOfPages]}else{s.push(1);if(t>e+1)s.push("...");let a=Math.max(2,t-e);let n=Math.min(i-1,t+e);if(t<=e+1)n=e*2+1;if(t>=i-e)a=i-e*2;for(let e=a;e<=n;e++)s.push(e);if(t<i-e)s.push("...");s.push(i)}this.visiblePages=[...new Set(s)]}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.calculateNumberOfPages();this.filterOptionsArray();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:"98a19f3a734e2ea13f5b7c18b5cbe38a4e30e1a8",class:"container"},t("div",{key:"bb5745952e8b98b7f1b489d93bd56d74701de792",class:"items__per-page-wrapper"},t("div",{key:"d9f2bd45ead71dc624697818c5e3f9e271b5e8e2",class:"items__per-page-label"},"Results per Page"),t("div",{key:"19e43c55fb617b4186f36899b759cb064ea3cd27",class:"items__per-page-field"},t("ifx-select",{key:"f9c7cb8d4db27762b3f6d5f3fe84274e8dc4d2c9",placeholder:"false","show-search":"false",value:undefined,disabled:false,error:false,size:"s",options:this.filteredItemsPerPage,"placeholder-value":"Select"}))),t("div",{key:"2b8022566d5d8e7de1627ae690715f316c0841bc",class:"items__total-wrapper"},t("div",{key:"ef6a95e53726f8da1a63f51e5201fb798deaf7ea",class:"pagination"},t("ifx-icon-button",{key:"2c0444ac7f6a400dc4df80b11cdb310bf97b08b6",class:"prev",icon:"arrow-left-16",onClick:()=>this.changePage(this.internalPage-1)}),t("ol",{key:"c6a00e46eafe0b57f3bc974973e7b251472fc8f2"},this.visiblePages.map(((e,i)=>typeof e==="number"?t("li",{key:`page-${e}`,class:{[this.CLASS_ACTIVE]:e===this.internalPage},"data-page":e},t("a",{href:"javascript:void(0)"},e)):t("li",{class:"ellipsis",key:`ellipsis-${i}`},t("span",null,"..."))))),t("ifx-icon-button",{key:"b716e5a25d49c14759debd206342224f45d47d2d",class:"next",icon:"arrow-right-16",onClick:()=>this.changePage(this.internalPage+1)}))))}get el(){return s(this)}};m.style=b;export{h as ifx_chip,d as ifx_chip_item,m as ifx_pagination};
-//# sourceMappingURL=p-36a21172.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["chipCss","IfxChipStyle0","Chip","constructor","hostRef","this","placeholder","size","value","undefined","variant","readOnly","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","number","icon","e","id","chipItemCss","IfxChipItemStyle0","ChipItem","updateItemSelection","parentElement","validateSelected","oldValue","emitIfxChipItemSelectEvent","getItemLabel","innerText","toggleItemSelection","ifxChipItemSelect","handleItemClick","handleItemKeyDown","handleSelectedState","onKeyDown","checked","paginationCss","IfxPaginationStyle0","Pagination","currentPage","internalPage","internalItemsPerPage","numberOfPages","total","filteredItemsPerPage","visiblePages","CLASS_DISABLED","CLASS_ACTIVE","handlePageClick","li","currentTarget","page","parseInt","dataset","isNaN","changePage","setItemsPerPage","selectedValue","_a","_b","newItemsPerPage","calculateNumberOfPages","updateVisiblePages","handleEventEmission","el","initPagination","buffer","totalPages","current","pages","push","start","Math","max","end","min","i","Set","ceil","_","filterOptionsArray","items","itemsPerPage","JSON","parse","componentWillUpdate","prevInternalPage","componentDidUpdate","ifxPageChange","pagination","updateButtons","prev","next","disabled","classList","toggle","removeEventListener","addEventListener","newPage","options","href"],"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\";\n@use \"../../global/font.scss\";\n\n:host {\n    display: inline-block;\n}\n\n.chip {\n    position: relative;\n}\n\n.chip__wrapper {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: tokens.$ifxSpace100;\n\n    box-sizing: border-box;\n    border: 1px solid tokens.$ifxColorEngineering300;\n    border-radius: tokens.$ifxBorderRadiusRound;\n    \n    background: tokens.$ifxColorBaseWhite;\n    \n    cursor: pointer;  \n    \n    transition: border 100ms ease;\n\n    font: tokens.$ifxBodyBody04;\n    \n    &:hover, &:focus-visible {\n        outline: none;\n        border: 1px solid tokens.$ifxColorEngineering500;\n    }\n\n    &:focus {\n        border: 1px solid tokens.$ifxColorOcean500;\n    }\n    \n    &.chip__wrapper--small {\n        padding: tokens.$ifxSpace50 tokens.$ifxSpace150;\n    }\n    \n    &.chip__wrapper--large {\n        padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\n    }\n    \n    &.chip__wrapper--opened {\n        border: 1px solid tokens.$ifxColorOcean500;\n        \n        .wrapper__open-button {\n            transform: rotate(-180deg);\n        }\n    }\n    \n    &.chip__wrapper--selected {\n        outline: 3px solid tokens.$ifxColorOcean500;\n        outline-offset: -3px;\n        \n        color: tokens.$ifxColorOcean500;\n        \n        &:hover, &:focus-visible {\n            outline: 3px solid tokens.$ifxColorOcean600;\n            \n            color: tokens.$ifxColorOcean600;\n        }\n    }\n}\n\n.wrapper__label {\n    display: inline-flex;\n    align-items: center;\n    gap: tokens.$ifxSpace50;\n\n    font: tokens.$ifxBodyBody04;\n    \n    .label__selected-options {\n        font: tokens.$ifxBodyBodySemibold04;\n    }\n}\n\n.wrapper__open-button {\n    display:flex;\n    align-items: center;\n    \n    transition: all 300ms ease;\n}\n\n.wrapper__unselect-button {\n    display:flex;\n    align-items: center;\n}\n\n.chip__dropdown {\n    position: absolute;\n    z-index: 1;\n\n    box-shadow: 0px 6px 9px 0px #1D1D1D1A;\n    border: 1px solid tokens.$ifxColorEngineering200;\n    border-radius: tokens.$ifxBorderRadius12;\n    padding: tokens.$ifxSpace100 0;\n\n    min-width: 222px;\n    \n    background-color: tokens.$ifxColorBaseWhite;\n}\n","import { h, Component, Element, Event, EventEmitter, Listen, Prop, State, Watch } from '@stencil/core';\nimport { ChipItemSelectEvent } from './interfaces';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n  tag: 'ifx-chip',\n  styleUrl: 'chip.scss',\n  shadow: true\n})\nexport class Chip {\n  @Element() chip: HTMLIfxChipElement;\n\n  @Event() ifxChange: EventEmitter<{ previousSelection: Array<ChipItemSelectEvent>, currentSelection: Array<ChipItemSelectEvent>, name: string }>;\n  @Prop() placeholder: string = '';\n  @Prop() size: 'small' | 'large' = 'large';\n  @Prop({ mutable: true }) value: Array<string> | string = undefined;\n  @Prop() variant: 'single' | 'multi' = 'single';\n  @Prop() readOnly: boolean = false;\n  @Prop() ariaLabel: string | null;\n\n  @State() opened: boolean = false;\n  @State() selectedOptions: Array<ChipItemSelectEvent> = [];\n\n  @Watch('value')\n  handleValueChange(newValue: Array<string> | string) {\n    this.syncSelectedOptionsWithProp(newValue);\n  }\n\n  @Watch('readOnly')\n  handleReadOnlyChange(newValue: boolean) {\n    if (newValue) {\n      this.opened = false;\n    }\n  }\n\n  @Listen('mousedown', { target: 'document' })\n  closeDropdownOnOutsideClick(event: MouseEvent) {\n    const path = event.composedPath();\n    const chipWrapper: HTMLElement = this.chip.shadowRoot.querySelector('.chip__wrapper');\n    const chipDropdown: HTMLElement = this.chip.shadowRoot.querySelector('.chip__dropdown');\n    if (!path.includes(chipDropdown) && !path.includes(chipWrapper) && this.opened) {\n      this.toggleDropdownMenu();\n    }\n  }\n\n  @Listen('keydown')\n  handleKeyDown(event: KeyboardEvent) {\n    // override behavior of all keys except Tab. Users should be able to tab out of the component.\n    if (event.code !== 'Tab') {\n      event.preventDefault(); \n    }\n\n    if ((event.target as HTMLElement).tagName === 'IFX-CHIP') {\n      this.handleWrapperKeyDown(event);\n    } else if ((event.target as HTMLElement).tagName === 'IFX-CHIP-ITEM') {\n      this.handleDropdownKeyDown(event);\n    }\n  }\n\n  @Listen('ifxChipItemSelect')\n  updateSelectedOptions(event: CustomEvent<ChipItemSelectEvent>) {\n    const eventDetail: ChipItemSelectEvent = event.detail;\n    const previousSelection: Array<ChipItemSelectEvent> = [...this.selectedOptions];\n\n    if (this.variant !== 'multi') {\n      if (eventDetail.selected) {\n        this.opened = false;\n        const chipItems: NodeList = this.getChipItems();\n        chipItems.forEach((chipItem: HTMLIfxChipItemElement) => {\n          if (chipItem.selected && chipItem !== event.target) {\n            chipItem.chipState = {\n              ...chipItem.chipState,\n              emitIfxChipItemSelect: false,\n            };\n            chipItem.selected = false;\n          }\n        });\n        this.selectedOptions = [eventDetail];\n      } else {\n        this.selectedOptions = [];\n      }\n      this.value = this.selectedOptions[0] ? this.selectedOptions[0].value : undefined;\n    } else {\n      if (eventDetail.selected) {\n        // Prevent duplicate entries\n        if (!this.selectedOptions.find(option => option.value === eventDetail.value)) {\n          this.selectedOptions = [...this.selectedOptions, eventDetail];\n        }\n      } else {\n        this.selectedOptions = this.selectedOptions.filter((option) => option.value !== eventDetail.value);\n      }\n      this.value = this.selectedOptions.map((option) => option.value);\n    }\n\n    if (eventDetail.emitIfxChange) {\n      this.ifxChange.emit({\n        previousSelection: previousSelection,\n        currentSelection: this.selectedOptions,\n        name: this.placeholder\n      });\n    }\n  }\n\n  getChipItems(): NodeList {\n    return this.chip.querySelectorAll('ifx-chip-item');\n  }\n\n  getSelectedOptions(): string {\n    if (this.variant !== 'multi') {\n      return this.selectedOptions.map(option => option.label).join('');\n    }\n    return this.selectedOptions.slice(0, 2).map(option => option.label).join(', ');\n  }\n\n  toggleDropdownMenu() {\n    if (this.readOnly) return;\n    this.opened = !this.opened;\n  }\n\n  /**\n   * Focuses the chip item at the specified index.\n   * @param index the index of the chip item to focus. -1 will focus the last chip item.\n   */\n  focusChipItemAt(index: number = 0) {\n    this.opened = true;\n    const chipItems: NodeList = this.getChipItems();\n    let item: HTMLIfxChipItemElement;\n    \n    if (index === -1) {\n      item = chipItems.item(chipItems.length - 1) as HTMLIfxChipItemElement;\n    } else if (index >= 0 && index < chipItems.length) {\n      item = chipItems.item(index) as HTMLIfxChipItemElement;\n    } else {\n      console.error(`Invalid index: ${index}`);\n      return;\n    }\n\n    const shadowItem = item.shadowRoot.querySelector('.chip-item') as HTMLDivElement;\n    if (shadowItem) {\n      // Delay needed for the shadow item to be rendered.\n      setTimeout(() => {\n        shadowItem.focus();\n      }, 1);\n    }\n  }\n\n  focusChip() {\n    const chipWrapper: HTMLElement = this.chip.shadowRoot.querySelector('.chip__wrapper');\n    chipWrapper.focus();\n  }\n\n  handleUnselectButtonClick(event: MouseEvent) {\n    event.stopPropagation();\n    this.opened = false;\n\n    let itemGotUnselected = false;\n    const chipItems: NodeList = this.getChipItems();\n    chipItems.forEach((chipItem: HTMLIfxChipItemElement) => {\n      if (chipItem.selected) {\n        itemGotUnselected = true;\n        chipItem.chipState = {\n          ...chipItem.chipState,\n          emitIfxChipItemSelect: false,\n        }\n        chipItem.selected = false;\n      }\n    });\n\n    /* Emit event only if at least one item was unselected. */\n    if (itemGotUnselected) {\n      const previousSelection: Array<ChipItemSelectEvent> = this.selectedOptions;\n      this.selectedOptions = [];\n      this.value = [];\n      this.ifxChange.emit({\n        previousSelection: previousSelection,\n        currentSelection: [],\n        name: this.placeholder\n      });\n    }\n  }\n\n  handleWrapperClick() {\n    if (!this.readOnly) {\n      this.toggleDropdownMenu();\n    }\n  }\n\n  handleWrapperKeyDown(event: KeyboardEvent) {\n    // Keymap oriented at https://www.w3.org/WAI/ARIA/apg/patterns/combobox/#keyboard_interaction\n    if (this.readOnly) return;\n\n    if (!this.opened) {\n      switch (event.code) {\n        case 'Space':\n        case 'Enter':\n        case 'ArrowDown':\n          this.focusChipItemAt(0);\n          break;\n        case 'ArrowUp':\n          this.focusChipItemAt(-1);\n          break;\n      }\n    } else {\n      switch (event.code) {\n        case 'Escape':\n          this.opened = false;\n          this.focusChip();\n          break;\n      }\n    }\n  }\n\n  handleDropdownKeyDown(event: KeyboardEvent) {\n    let chipitems = this.getChipItems();\n\n    let targetIndex = Array.from(chipitems).indexOf(event.target as HTMLIfxChipItemElement);\n    if (targetIndex === -1) {\n      console.error('Target not found in chip items');\n      return;\n    }\n\n    switch (event.code) {\n      case 'ArrowDown':\n        if (targetIndex === chipitems.length - 1) break;\n        this.focusChipItemAt(targetIndex + 1);\n        break;\n      case 'ArrowUp':\n        if (targetIndex === 0) break;\n        this.focusChipItemAt( targetIndex - 1);\n        break;\n      case 'Escape':\n        this.opened = false;\n        this.focusChip();\n        break;\n      case 'Space':\n        // selection is handled by the chip-item component\n        if (this.variant === 'single') {\n          // only close dropdown if single select\n          this.opened = false;\n          this.focusChip();\n        }\n        break;\n      case 'Enter':\n        // selection is handled by the chip-item component\n        this.opened = false;\n        this.focusChip();\n        break;\n      }\n    }\n\n  syncChipState() {\n    const chipItems: NodeList = this.getChipItems();\n    let key: number = 0;\n    chipItems.forEach((chipItem: HTMLIfxChipItemElement) => {\n      chipItem.chipState = {\n        emitIfxChipItemSelect: true,\n        size: (this.size === 'small' ? 'small' : 'large'),\n        variant: (this.variant === 'multi' ? 'multi' : 'single'),\n        key: key++\n      };\n    });\n  }\n\n  syncSelectedOptionsWithProp(newValue: Array<string> | string) {\n    // Clear old selected options\n    this.selectedOptions = [];\n\n    const generateKey = (() => {\n      let count = 0;\n      return () => count++;\n    })();\n\n    if (Array.isArray(newValue)) {\n      this.selectedOptions = newValue.map(value => ({\n        value,\n        label: value,\n        selected: true,\n        key: generateKey(),\n        emitIfxChange: true\n      }));\n    } else if (typeof newValue === 'string') {\n      this.selectedOptions = [{\n        value: newValue,\n        label: newValue,\n        selected: true,\n        key: generateKey(),\n        emitIfxChange: true\n      }];\n    }\n\n    this.syncChipState();\n  }\n\n  componentWillLoad() {\n    this.syncSelectedOptionsWithProp(this.value);\n  }\n\n  componentDidLoad() { \n    if(!isNestedInIfxComponent(this.chip)) { \n      const framework = detectFramework();\n      trackComponent('ifx-chip', framework)\n    }\n  }\n\n  render() {\n    return (\n      <div class='chip'>\n        <div class={`chip__wrapper chip__wrapper--${this.size === 'small' ? 'small' : 'large'}\n                  chip__wrapper--${this.variant === 'multi' ? 'multi' : 'single'}\n                  ${this.opened && !this.readOnly ? 'chip__wrapper--opened' : ''}\n                  ${this.selectedOptions.length ? 'chip__wrapper--selected' : ''}`}\n          tabIndex={0}\n          onClick={!this.readOnly ? () => { this.handleWrapperClick() } : undefined}\n          role='combobox'\n          aria-label={this.ariaLabel}\n          aria-value={this.getSelectedOptions()}\n          aria-haspopup={!this.readOnly ? 'listbox' : undefined}\n          aria-expanded={!this.readOnly ? this.opened.toString() : undefined}\n          aria-controls={!this.readOnly ? 'dropdown' : undefined}\n          aria-readonly={this.readOnly ? 'true' : undefined}\n          aria-multiselectable={this.variant === 'multi' ? 'true' : undefined}\n          >\n\n          <div class='wrapper__label'>\n            {\n              (this.selectedOptions.length === 0) && `${this.placeholder}`\n            }\n\n            {\n              (this.selectedOptions.length !== 0 && (this.variant === 'multi' || this.readOnly) && this.placeholder !== '') &&\n              `${this.placeholder}:`\n            }\n\n            {\n              (this.selectedOptions.length !== 0) &&\n              <div class='label__selected-options'>\n                {this.getSelectedOptions()}\n              </div>\n            }\n\n            {\n              (this.selectedOptions.length > 2 && this.variant === 'multi') &&\n              <ifx-indicator variant='number' number={this.selectedOptions.length - 2}></ifx-indicator>\n            }\n          </div>\n\n          {\n            !this.readOnly && (this.variant !== 'multi' || (this.variant === 'multi' && this.selectedOptions.length === 0)) &&\n            <div class='wrapper__open-button'>\n              <ifx-icon key={1} icon={`chevron-down-16`} />\n            </div>\n          }\n\n\n          { \n            (this.variant !== 'multi' && this.readOnly !== false && this.selectedOptions.length > 0) &&\n            <div class='wrapper__unselect-button' onClick={(e) => { this.handleUnselectButtonClick(e) }}>\n              <ifx-icon key={2} icon={`cross16`} />\n            </div>\n          }\n\n          {\n            ((this.selectedOptions.length >= 1) && this.variant === 'multi') &&\n            <div class='wrapper__unselect-button' onClick={(e) => { this.handleUnselectButtonClick(e) }}>\n              <ifx-icon key={2} icon={`cross16`} />\n            </div>\n          }\n\n        </div>\n\n        {\n          this.opened && !this.readOnly &&\n          <div id='dropdown' role='listbox' class='chip__dropdown'>\n            <slot />\n          </div>\n        }\n      </div>\n    );\n  }\n}\n","@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n.chip-item {\n    display: flex;\n    align-items: center;\n    gap: tokens.$ifxSpace100;\n    \n    padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\n    \n    user-select: none;\n    \n    transition: all 100ms ease;\n    transition-property: background, color;\n    \n    &:hover {\n        cursor: pointer;\n        \n        background-color: tokens.$ifxColorEngineering200;\n    }\n    \n    &:active {\n        background-color: tokens.$ifxColorEngineering300;\n    }\n\n    &:focus {\n        outline: 2px solid tokens.$ifxColorOcean500;\n    }\n    \n    &.chip-item--large {\n        font: tokens.$ifxBodyBody03;\n    }\n    \n    &.chip-item--small {\n        font: tokens.$ifxBodyBody04;\n    }\n\n    &.chip-item--selected {\n        color: tokens.$ifxColorOcean500;\n\n        .chip-item__selected-indicator {\n            display: block;\n        }\n    }\n}\n\n.chip-item__selected-indicator {\n    display: none;\n    \n    margin-left: auto;\n}\n\n","import { h,\n    Component,\n    Element,\n    Event,\n    EventEmitter, \n    Listen,\n    Prop, \n    Watch } from '@stencil/core';\nimport { ChipItemSelectEvent, ChipState } from '../interfaces';\n\n@Component({\ntag: 'ifx-chip-item',\nstyleUrl: 'chip-item.scss',\nshadow: true\n})\n\nexport class ChipItem {\n@Element() chipItem: HTMLIfxChipItemElement;\n\n@Event({ composed: false }) ifxChipItemSelect: EventEmitter<ChipItemSelectEvent>;\n\n@Prop() value: string = undefined;\n@Prop() chipState: ChipState = { emitIfxChipItemSelect: true, variant: 'multi', size: 'large' }; \n@Prop({ mutable: true, reflect: true }) selected: boolean = false;\n\n@Listen('ifxChipItemSelect', { target: 'body' })\nupdateItemSelection(event: CustomEvent<ChipItemSelectEvent>) {\n   if (this.chipState.variant === 'single') {\n       const target = event.target as HTMLIfxChipItemElement;\n       /* Also making sure chip items are from the same group (parent) while unselecting. */\n       if (this.chipItem !== target && this.chipItem.parentElement === target.parentElement) {\n           this.selected = false;\n       }\n   }\n} \n\n@Watch('selected')\nvalidateSelected(newValue: boolean, oldValue: boolean) {\n   if (newValue !== oldValue) {\n       /* Do not emit if ChipState does not allow. */\n       if (this.chipState.emitIfxChipItemSelect){\n           this.emitIfxChipItemSelectEvent();\n       } else {\n           this.chipState.emitIfxChipItemSelect = true;\n       }\n   }\n} \n\ngetItemLabel(): string {\n   return this.chipItem.innerText as string;\n}\n\ntoggleItemSelection() {\n   this.selected = !this.selected;\n}\n   \n\nemitIfxChipItemSelectEvent(emitIfxChange: boolean = true) {\n   this.ifxChipItemSelect.emit({ emitIfxChange: emitIfxChange,\n                           key: this.chipState.key,\n                           label: this.getItemLabel(), \n                           selected: this.selected, \n                           value: this.value });\n}\n\nhandleItemClick() {\n   this.toggleItemSelection();\n}\n\nhandleItemKeyDown(event: KeyboardEvent) {\n   if (event.code === 'Enter' || event.code === 'Space') {\n       this.toggleItemSelection();\n   }\n}\n\nhandleSelectedState() {\n   if (this.selected) {\n       this.emitIfxChipItemSelectEvent(false);\n   }\n}\n\n\ncomponentWillLoad() {\n   /* Propogating the selected state to the Chip (Parent) component if it is set. */\n   this.handleSelectedState();\n}\n\nrender() {\n   return (\n       <div class={`chip-item chip-item--${this.chipState.size} \n                    chip-item--${(this.selected && this.chipState.variant) === 'single' ? 'selected' : ''}`} \n           tabIndex={0}\n           onClick={() => {this.handleItemClick()}}\n           onKeyDown={(e) => {this.handleItemKeyDown(e)}}\n           role=\"option\"\n           aria-selected={this.selected.toString()}>    \n           {/* Checkbox; renders only in 'multi' variant. */}\n           { \n               this.chipState.variant === 'multi' &&\n               <ifx-checkbox checked={this.selected}\n                   tabIndex={-1} \n                   size='s'>\n               </ifx-checkbox>\n           }\n\n           <div class='chip-item__label'> <slot /> </div>\n\n           {/* Selected indicator only visible in 'single' variant. */}\n           <div class='chip-item__selected-indicator'> \n               <ifx-icon icon='check-16'> </ifx-icon> \n           </div>\n\n       </div>\n   );\n}\n}","@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: inline-flex;\n}\n\n.container {\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  gap: 32px;\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n\n\n  & .items__per-page-wrapper {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n\n    & .items__per-page-label {\n      color: #1D1D1D;\n      font-size: 14px;\n      font-style: normal;\n      font-weight: 600;\n      line-height: 20px;\n    }\n\n    & .items__per-page-field {\n      display: flex;\n      flex-direction: column;\n      align-items: flex-start;\n\n      & ifx-select {\n        width: 92px;\n      }\n    }\n  }\n\n  & .items__total-wrapper {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    gap: 12px;\n\n    & .items__total-button {\n      display: flex;\n      width: 40px;\n      height: 40px;\n      justify-content: center;\n      align-items: center;\n      border-radius: 100px;\n      border: 1px solid #BFBBBB;\n      background: #FFF;\n    }\n\n    & .page__numbers-wrapper {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      gap: 12px;\n\n      & .page__number-item {\n        display: flex;\n        padding: 6px;\n        flex-direction: column;\n        justify-content: center;\n        align-items: center;\n        gap: 10px;\n        border-radius: 100px;\n\n        &.active {\n          background-color: #0A8276;\n\n          & span {\n            color: #fff;\n          }\n        }\n\n        &:hover {\n          cursor: pointer;\n        }\n\n        &:hover:not(.active) {\n          background-color: #ddd;\n\n        }\n\n        &:active:not(.active) {\n          background-color: #575352;\n        }\n\n        & span {\n          display: flex;\n          width: 16px;\n          height: 16px;\n          flex-direction: column;\n          justify-content: center;\n          color: #1D1D1D;\n          text-align: center;\n          font-size: 13px;\n          font-style: normal;\n          font-weight: 400;\n          line-height: 20px;\n        }\n      }\n    }\n  }\n}\n\n\n.pagination {\n  display: flex;\n\n  & ifx-icon-button:first-of-type {\n    margin-right: 12px;\n  }\n\n  & ifx-icon-button:last-of-type {\n    margin-left: 12px;\n  }\n}\n\na {\n  padding: 8px;\n  border-radius: 100px;\n}\n\nol {\n  list-style-type: none;\n  padding: 0;\n  margin: 0;\n  display: inline-flex;\n  align-items: center;\n  gap: 12px;\n}\n\nli {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  border-radius: 100px;\n\n  &:hover:not(.active) {\n    & a {\n      background-color: #EEEDED;\n    }\n  }\n\n  &:active:not(.active) {\n    & a {\n      background-color: #575352;\n      color: #fff;\n    }\n  }\n\n  &.active {\n    background-color: #0A8276;\n\n    & a {\n      color: #fff;\n    }\n  }\n\n  &:hover {\n    cursor: pointer;\n  }\n\n  & a {\n    text-decoration: none;\n    display: flex;\n    width: 16px;\n    height: 16px;\n    flex-direction: column;\n    justify-content: center;\n    color: #1D1D1D;\n    text-align: center;\n    font-size: 13px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 20px;\n    align-items: center;\n  }\n}\n\n.prev,\n.next {\n  &.disabled {\n    cursor: default;\n\n    &:hover {\n      cursor: default;\n      text-decoration: none;\n    }\n  }\n}\n\n.prev {\n  margin-right: 2.5px;\n}\n\n.next {\n  margin-left: 2.5px;\n}\n\n\n@mixin ellipsis($before: true) {\n  content: \"\\2026\";\n  font-size: 13px;\n  display: inline-block;\n\n  @if($before) {\n    margin-right: 6px;\n  }\n\n  @else {\n    margin-left: 6px;\n  }\n}\n\n\n// @media(max-width:460px) {\n//   li {\n\n//     &:first-child,\n//     &.active,\n//     &.active-sibling:nth-last-child(2), // Show second to last child if the last one is active\n//     &:last-child {\n//       //display: inline-block !important;\n//       display: inline-flex !important;\n//       flex-direction: row;\n//     }\n\n//     $how-many-on-ends: 3; // 1,2,3,...,10 || 1,...,8,9,10\n//     // There are >= 5 pages\n//     &:first-child:nth-last-child(n+6) {\n\n//       &~li {\n//         // Start out with all siblings hidden\n//         display: none;\n\n//         // Show the last children in the list by default\n//         &:nth-last-child(-n+#{$how-many-on-ends}) {\n//           //display: inline-block;\n//           display: inline-flex;\n//           flex-direction: row;\n\n//         }\n\n//         // The child at the beginning of the last group shows ellipsis for the group\n//         &:nth-last-child(#{$how-many-on-ends}) {\n//           &:before {\n//             @include ellipsis(true);\n//           }\n//         }\n\n//         // The very beginning elements do not need to show ellipsis\n//         // The very end elements do not need to show ellipsis\n//       }\n\n\n//       &.active,\n//        &~li.active {\n\n//          // Show ellipsis before and after the active element\n//          &:before {\n//            @include ellipsis(true);\n//          }\n//          &:after {\n//            @include ellipsis(false);\n//          }\n\n\n//          // If the active element is in the first or last group, don't show ellipsis (siblings will take care of it)\n//          &:nth-child(-n+#{$how-many-on-ends - 1}),\n//          &:nth-last-child(-n+#{$how-many-on-ends - 1}) {\n//            &:before, &:after {\n//              display: none;\n//            }\n//          }\n\n//          // Hide the last group if \"active\" comes before them\n//          &~li:nth-last-child(-n+#{$how-many-on-ends}) {\n//            display: none;\n//          }\n\n//          // Show the first group together if \"active\" comes before them\n//          &~li:nth-child(-n+#{$how-many-on-ends}) {\n//            //display: inline-block;\n//            display: inline-flex;\n//            flex-direction: row;\n//          }\n\n//          // If \"active\" is before the last member in the group, don't show ellipsis\n//          &~li:nth-child(-n+#{$how-many-on-ends - 1}) {\n//             &:after {\n//               display: none;\n//             }\n//          }\n\n\n//         // The child at the end of the first group shows ellipsis for the group\n//         &~li:nth-child(#{$how-many-on-ends}) {\n//           &:after {\n//             @include ellipsis(false);\n//           }\n//         }\n//       }\n//     }\n//   }\n// }\n\n@media (min-width: 400px) {\n  li {\n\n    &:first-child,\n    &.active-sibling,\n    &.active,\n    &.active+li,\n    &:last-child {\n      //display: inline-block!important;\n      display: inline-flex !important;\n      flex-direction: row;\n    }\n\n    // There are >= 7 pages\n    &:first-child:nth-last-child(n+8) {\n      $how-many-on-ends: 5; // 1,2,3,4,5,...,10 || 1,...6,7,8,9,10\n\n      &~li {\n        // Start out with all siblings hidden\n        display: none;\n\n        // Show ellipsis before the previous one\n        &.active-sibling:before {\n          @include ellipsis(true);\n        }\n\n        // Show ellipsis after the next one\n        &.active+li:after {\n          @include ellipsis(false);\n        }\n\n        // Show the last children in the list by default\n        &:nth-last-child(-n+#{$how-many-on-ends}) {\n          //display: inline-block;\n          display: inline-flex;\n          flex-direction: row;\n        }\n\n        // The child at the beginning of the last group shows ellipsis for the group\n        &:nth-last-child(#{$how-many-on-ends}) {\n          &:before {\n            @include ellipsis(true);\n          }\n        }\n\n        // The very beginning elements do not need to show ellipsis\n        &:nth-child(-n+#{$how-many-on-ends - 3}),\n        // The very end elements do not need to show ellipsis\n        &:nth-last-child(-n+#{$how-many-on-ends - 3}),\n        // Even if it's a sibling to \"active\"\n        &.active-sibling:nth-last-child(-n+#{$how-many-on-ends - 1}) {\n\n          &:before,\n          &:after {\n            display: none !important;\n          }\n        }\n      }\n\n      &.active,\n      &~li.active {\n\n        // Hide the last group if \"active\" comes before them\n        &~li:nth-last-child(-n+#{$how-many-on-ends}) {\n          display: none;\n\n          // If there is overlap, the element will show, but hide it's ellipsis\n          &:before {\n            display: none;\n          }\n        }\n\n        // Show the first group together if \"active\" comes before them\n        &~li:nth-child(-n+#{$how-many-on-ends}) {\n          //display: inline-block;\n          display: inline-flex !important;\n          flex-direction: row;\n        }\n\n        // If \"active\" is before the last member in the group, don't show ellipsis\n        &~li:nth-child(-n+#{$how-many-on-ends - 1}) {\n          &:after {\n            display: none;\n          }\n        }\n\n\n        // The child at the end of the first group shows ellipsis for the group\n        &~li:nth-child(#{$how-many-on-ends}) {\n          &:after {\n            @include ellipsis(false);\n          }\n        }\n\n        // \"active\" should never show ellipsis\n        &:before,\n        &:after {\n          display: none;\n        }\n      }\n    }\n  }\n}","import { Component, h, Element, Event, EventEmitter, Prop, State, Listen } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n  tag: 'ifx-pagination',\n  styleUrl: 'pagination.scss',\n  shadow: true\n})\nexport class Pagination {\n  @Element() el: HTMLElement;\n  @Event() ifxPageChange: EventEmitter;\n  @Prop() currentPage: number = 1;\n  @State() internalPage: number = 1;\n  @State() internalItemsPerPage: number = 10;\n  @State() numberOfPages: number[] = [];\n  @Prop() total: number = 1;\n  @Prop() itemsPerPage: any[] | string;\n  @State() filteredItemsPerPage: any[] = [];\n  @State() visiblePages: (number | string)[] = [];\n\n  private CLASS_DISABLED = \"disabled\";\n  private CLASS_ACTIVE = \"active\";\n  private prevInternalPage: number;\n\n    @Listen('ifxSelect')\n    setItemsPerPage(e: CustomEvent) {\n      const selectedValue = e.detail?.value || e.detail?.label; \n      const newItemsPerPage = parseInt(selectedValue) || 10;\n\n      if (newItemsPerPage === this.internalItemsPerPage) {\n        return;\n      }\n\n      this.internalItemsPerPage = newItemsPerPage;\n      this.internalPage = 1; \n      this.calculateNumberOfPages();\n      this.updateVisiblePages();\n      this.handleEventEmission();\n    }\n\n  componentDidLoad() {\n    if(!isNestedInIfxComponent(this.el)) { \n      const framework = detectFramework();\n      trackComponent('ifx-pagination', framework)\n    }\n    this.initPagination();\n  }\n\n  updateVisiblePages() {\n    const buffer = 2;\n    const totalPages = this.numberOfPages.length;\n    const current = this.internalPage;\n    let pages: (number | string)[] = [];\n  \n    if (totalPages <= 5) {\n      pages = [...this.numberOfPages];\n    } else {\n      pages.push(1);\n  \n      if (current > buffer + 1) pages.push('...');\n  \n      let start = Math.max(2, current - buffer);\n      let end = Math.min(totalPages - 1, current + buffer);\n  \n      if (current <= buffer + 1) end = buffer * 2 + 1;\n      if (current >= totalPages - buffer) start = totalPages - buffer * 2;\n  \n      for (let i = start; i <= end; i++) pages.push(i);\n  \n      if (current < totalPages - buffer) pages.push('...');\n      pages.push(totalPages);\n    }\n  \n    this.visiblePages = [...new Set(pages)];\n  }\n\n  calculateNumberOfPages() {\n    const totalPages = Math.ceil(this.total / this.internalItemsPerPage);\n    this.numberOfPages = Array.from({ length: totalPages }, (_, i) => i + 1);\n    this.internalPage = Math.max(1, Math.min(this.currentPage, totalPages));\n  }\n\n  filterOptionsArray() { \n    const items = typeof this.itemsPerPage === 'string' ? \n      JSON.parse(this.itemsPerPage) : this.itemsPerPage;\n    this.filteredItemsPerPage = items.map(item => ({\n      ...item,\n      label: item.label || item.value\n    }));\n  }\n\n  componentWillLoad() {\n    this.calculateNumberOfPages();\n    this.filterOptionsArray();\n    this.updateVisiblePages();\n  }\n\n  componentWillUpdate() { \n     if (this.prevInternalPage !== this.internalPage) {\n      this.updateVisiblePages();\n      this.prevInternalPage = this.internalPage;\n    }\n  }\n\n  componentDidUpdate() {\n    this.initPagination();\n  }\n\n  handleEventEmission() {\n    this.ifxPageChange.emit({\n      currentPage: this.internalPage,\n      totalPages: this.numberOfPages.length,\n      itemsPerPage: this.internalItemsPerPage\n    });\n  }\n\n  initPagination() {\n    const pagination = this.el.shadowRoot.querySelector('.pagination');\n    if (!pagination) return;\n\n    const updateButtons = () => {\n      const prev = pagination.querySelector<HTMLButtonElement>('.prev');\n      const next = pagination.querySelector<HTMLButtonElement>('.next');\n      if (prev) {\n        prev.disabled = this.internalPage === 1;\n        prev.classList.toggle(this.CLASS_DISABLED, this.internalPage === 1);\n      }\n      if (next) {\n        next.disabled = this.internalPage === this.numberOfPages.length;\n        next.classList.toggle(this.CLASS_DISABLED, this.internalPage === this.numberOfPages.length);\n      }\n    };\n\n    pagination.querySelectorAll('li').forEach(li => {\n      li.removeEventListener('click', this.handlePageClick);\n      li.addEventListener('click', this.handlePageClick);\n    });\n\n    updateButtons();\n  }\n\n  private handlePageClick = (e: Event) => {\n    const li = e.currentTarget as HTMLLIElement;\n    const page = parseInt(li.dataset.page);\n    if (!isNaN(page)) this.changePage(page);\n  };\n\n  changePage(newPage: number) {\n    newPage = Math.max(1, Math.min(newPage, this.numberOfPages.length));\n    if (newPage === this.internalPage) return;\n    \n    this.internalPage = newPage;\n    this.handleEventEmission();\n    this.initPagination();\n  }\n\n  render() {\n    return (\n      <div class=\"container\">\n        <div class=\"items__per-page-wrapper\">\n          <div class=\"items__per-page-label\">Results per Page</div>\n          <div class=\"items__per-page-field\">\n            <ifx-select\n              placeholder='false'\n              show-search='false'\n              value={undefined}\n              disabled={false}\n              error={false}\n              size=\"s\"\n              options={this.filteredItemsPerPage}\n              placeholder-value=\"Select\"\n            ></ifx-select>\n          </div>\n        </div>\n        \n        <div class=\"items__total-wrapper\">\n          <div class=\"pagination\">\n            <ifx-icon-button\n              class=\"prev\"\n              icon=\"arrow-left-16\"\n              onClick={() => this.changePage(this.internalPage - 1)}\n            ></ifx-icon-button>\n            \n            <ol>\n            {this.visiblePages.map((page, i) => typeof page === 'number' ? (\n              <li \n                key={`page-${page}`}\n                class={{ [this.CLASS_ACTIVE]: page === this.internalPage }}\n                data-page={page}\n              >\n                <a href=\"javascript:void(0)\">{page}</a>\n              </li>\n            ) : (\n              <li class=\"ellipsis\" key={`ellipsis-${i}`}>\n                <span>...</span>\n              </li>\n            ))}\n            </ol>\n            \n            <ifx-icon-button\n              class=\"next\"\n              icon=\"arrow-right-16\"\n              onClick={() => this.changePage(this.internalPage + 1)}\n            ></ifx-icon-button>\n          </div>\n        </div>\n      </div>\n    );\n  }\n}"],"mappings":"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","ignoreList":[]}

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

@@ -1 +0,0 @@
-{"version":3,"names":["linkCss","IfxLinkStyle0","Link","constructor","hostRef","this","href","undefined","target","variant","disabled","internalHref","internalTarget","internalVariant","setInternalStates","trim","toLowerCase","componentWillRender","handleKeyDown","event","preventDefault","key","componentDidLoad","isNestedInIfxComponent","el","framework","detectFramework","trackComponent","render","h","role","ariaLabel","download","class","linkClassNames","getSizeClass","small","size","medium","large","extraLarge","getVariantClass","bold","title","underlined","menu","classNames"],"sources":["src/components/link/link.scss?tag=ifx-link&encapsulation=shadow","src/components/link/link.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: inline-flex;\n}\n\n.link {\n  display: inline-flex;\n  align-items: center;\n  font-weight: 400;\n  font-size: tokens.$ifxFontSizeM;\n  text-decoration: none;\n  color: tokens.$ifxColorOcean500;\n  gap: tokens.$ifxSpace100;\n  line-height: 1.6;\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n\n  &:hover { \n    cursor: pointer;\n  }\n\n  &:focus {\n    outline-width: 2px;\n    outline-style: solid;\n    outline-color: #0A8276;\n    outline-offset: 4px;\n    border-radius: 3px;\n  }\n\n  &.bold {\n    font-weight: tokens.$ifxFontWeightSemibold;\n\n    &:hover {\n      text-decoration: underline;\n    }\n\n    &:active {\n      color: #08665C;\n      font-style: normal;\n      font-weight: 600;\n      text-decoration: underline;\n    }\n\n  }\n\n  &.underlined {\n    text-decoration: underline;\n    text-decoration-color: tokens.$ifxColorOcean500;\n    color: #1D1D1D;\n    text-underline-offset: 8px;\n    \n    &:hover {\n      color: tokens.$ifxColorOcean500;;\n    }\n    \n    &:active {\n      color: #0A8276;\n    }\n\n    &:disabled,\n    &.disabled {\n      text-decoration-color: tokens.$ifxColorEngineering300;\n    }\n  }\n\n  &.title {\n    text-decoration: none;\n    font-weight: tokens.$ifxFontWeightSemibold;\n    color: #1D1D1D;\n\n    &:hover {\n      color: tokens.$ifxColorOcean500;\n    }\n\n    &:active {\n      color: #08665C;\n    }\n  }\n\n  &.menu {\n    font-weight: 400;\n    font-style: normal;\n    line-height: 26px;\n    color: #1D1D1D;\n\n    &:hover {\n      color: tokens.$ifxColorOcean500;\n    }\n\n    &:active {\n      color: #08665C;\n    }\n  }\n\n  &.small {\n    font-size: tokens.$ifxFontSizeS;\n  }\n\n  &.medium {\n    font-size: tokens.$ifxFontSizeM;\n  }\n\n  &.large {\n    font-size: tokens.$ifxFontSizeL;\n  }\n\n  &.extraLarge {\n    font-size: tokens.$ifxFontSizeXl;\n  }\n\n  &.underline {\n    text-decoration: underline;\n  }\n\n  &:disabled,\n  &.disabled {\n    color: tokens.$ifxColorEngineering300;\n    cursor: default;\n    pointer-events:  none;\n  }\n\n}","import { Component, Prop, h, State, Element } from \"@stencil/core\";\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\nimport classNames from 'classnames';\n \n@Component({\n  tag: 'ifx-link',\n  styleUrl: 'link.scss',\n  shadow: true\n})\n\nexport class Link {\n  @Element() el;\n  @Prop() href: string = undefined;\n  @Prop() target: string = '_self';\n  @Prop() variant: string = 'bold';\n  @Prop() size: string;\n  @Prop() disabled: boolean = false;\n  @Prop() download: string;\n  @Prop() ariaLabel: string | null;\n  @State() internalHref: string ='';\n  @State() internalTarget: string = '';\n  @State() internalVariant: string = '';\n\n  setInternalStates() {\n    if(this.href){\n      this.internalHref = this.href.trim();\n    }else{\n      this.internalHref = undefined;\n    }\n    this.internalTarget = this.target.trim();\n    this.internalVariant = this.variant.trim().toLowerCase();\n  }\n\n  componentWillRender(){\n    this.setInternalStates();\n  }\n\n  handleKeyDown(event: KeyboardEvent) {\n    if (this.disabled) {\n      event.preventDefault();\n    } else if (event.key === 'Enter') {\n      event.preventDefault();\n    }\n  }\n\n  componentDidLoad() { \n    if(!isNestedInIfxComponent(this.el)) { \n      const framework = detectFramework();\n      trackComponent('ifx-link', framework)\n    }\n  }\n\n  render() {\n    return (\n      <a\n        role=\"link\"\n        aria-label={this.ariaLabel}\n        aria-disabled={this.disabled || !this.internalHref}\n        href={this.disabled ? undefined : this.internalHref}\n        download={this.download}\n        target={this.internalTarget}\n        class={this.linkClassNames()}>\n        <slot></slot>\n      </a>)\n  }\n\n  getSizeClass() {\n    const small = this.size === 's' ? 'small' : null;\n    const medium = this.size === 'm' ? 'medium' : null;\n    const large = this.size === 'l' ? 'large' : null;\n    const extraLarge = this.size === 'xl' ? 'extraLarge' : null;\n\n    if (small) {\n      return small;\n    } else if (medium) {\n      return medium;\n    } else if (large) {\n      return large;\n    } else if (extraLarge && this.internalVariant === 'underlined') {\n      return 'large';\n    } else if (extraLarge && this.internalVariant !== 'underlined') {\n      return extraLarge;\n    } else return \"\";\n  }\n\n  getVariantClass() {\n    const bold = this.internalVariant === 'bold' ? 'bold' : null;\n    const title = this.internalVariant === 'title' ? 'title' : null;\n    const underlined = this.internalVariant === 'underlined' ? 'underlined' : null;\n    const menu = this.internalVariant === 'menu' ? 'menu' : null;\n\n    if (bold) {\n      return bold\n    } else if (title) {\n      return title;\n    } else if (underlined) {\n      return underlined;\n    } else if (menu) {\n      return menu;\n    } else return bold;\n  }\n\n  linkClassNames() {\n    return classNames(\n      'link',\n      'primary',\n      this.getVariantClass(),\n      this.getSizeClass(),\n      this.disabled ? 'disabled' : '',\n    );\n  }\n}"],"mappings":"qKAAA,MAAMA,EAAU,6zCAChB,MAAAC,EAAeD,E,MCWFE,EAAI,MANjB,WAAAC,CAAAC,G,UAQUC,KAAAC,KAAeC,UACfF,KAAAG,OAAiB,QACjBH,KAAAI,QAAkB,OAElBJ,KAAAK,SAAoB,MAGnBL,KAAAM,aAAsB,GACtBN,KAAAO,eAAyB,GACzBP,KAAAQ,gBAA0B,E,CAEnC,iBAAAC,GACE,GAAGT,KAAKC,KAAK,CACXD,KAAKM,aAAeN,KAAKC,KAAKS,M,KAC3B,CACHV,KAAKM,aAAeJ,S,CAEtBF,KAAKO,eAAiBP,KAAKG,OAAOO,OAClCV,KAAKQ,gBAAkBR,KAAKI,QAAQM,OAAOC,a,CAG7C,mBAAAC,GACEZ,KAAKS,mB,CAGP,aAAAI,CAAcC,GACZ,GAAId,KAAKK,SAAU,CACjBS,EAAMC,gB,MACD,GAAID,EAAME,MAAQ,QAAS,CAChCF,EAAMC,gB,EAIV,gBAAAE,GACE,IAAIC,EAAuBlB,KAAKmB,IAAK,CACnC,MAAMC,EAAYC,IAClBC,EAAe,WAAYF,E,EAI/B,MAAAG,GACE,OACEC,EAAA,KAAAR,IAAA,2CACES,KAAK,OAAM,aACCzB,KAAK0B,UAAS,gBACX1B,KAAKK,WAAaL,KAAKM,aACtCL,KAAMD,KAAKK,SAAWH,UAAYF,KAAKM,aACvCqB,SAAU3B,KAAK2B,SACfxB,OAAQH,KAAKO,eACbqB,MAAO5B,KAAK6B,kBACZL,EAAA,QAAAR,IAAA,6C,CAIN,YAAAc,GACE,MAAMC,EAAQ/B,KAAKgC,OAAS,IAAM,QAAU,KAC5C,MAAMC,EAASjC,KAAKgC,OAAS,IAAM,SAAW,KAC9C,MAAME,EAAQlC,KAAKgC,OAAS,IAAM,QAAU,KAC5C,MAAMG,EAAanC,KAAKgC,OAAS,KAAO,aAAe,KAEvD,GAAID,EAAO,CACT,OAAOA,C,MACF,GAAIE,EAAQ,CACjB,OAAOA,C,MACF,GAAIC,EAAO,CAChB,OAAOA,C,MACF,GAAIC,GAAcnC,KAAKQ,kBAAoB,aAAc,CAC9D,MAAO,O,MACF,GAAI2B,GAAcnC,KAAKQ,kBAAoB,aAAc,CAC9D,OAAO2B,C,MACF,MAAO,E,CAGhB,eAAAC,GACE,MAAMC,EAAOrC,KAAKQ,kBAAoB,OAAS,OAAS,KACxD,MAAM8B,EAAQtC,KAAKQ,kBAAoB,QAAU,QAAU,KAC3D,MAAM+B,EAAavC,KAAKQ,kBAAoB,aAAe,aAAe,KAC1E,MAAMgC,EAAOxC,KAAKQ,kBAAoB,OAAS,OAAS,KAExD,GAAI6B,EAAM,CACR,OAAOA,C,MACF,GAAIC,EAAO,CAChB,OAAOA,C,MACF,GAAIC,EAAY,CACrB,OAAOA,C,MACF,GAAIC,EAAM,CACf,OAAOA,C,MACF,OAAOH,C,CAGhB,cAAAR,GACE,OAAOY,EACL,OACA,UACAzC,KAAKoC,kBACLpC,KAAK8B,eACL9B,KAAKK,SAAW,WAAa,G","ignoreList":[]}

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

@@ -1 +0,0 @@
-{"version":3,"names":["iconButtonCss","IfxIconButtonStyle0","IconButton","constructor","hostRef","this","target","shape","handleClick","event","disabled","stopImmediatePropagation","updateIcon","newIcon","internalIcon","setFocus","focusableElement","focus","componentWillLoad","icon","componentDidLoad","isNestedInIfxComponent","el","framework","detectFramework","trackComponent","render","h","Host","key","ariaLabel","href","ref","class","getClassNames","undefined","rel","type","getVariantClass","variant","getSizeClass","size","classNames"],"sources":["src/components/icon-button/icon-button.scss?tag=ifx-icon-button&encapsulation=shadow","src/components/icon-button/icon-button.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host {\n  display: inline-flex;\n}\n\n.btn {\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-height: tokens.$ifxSize500;\n  padding: 8px;\n  gap: tokens.$ifxSpace100;\n  color: tokens.$ifxColorBaseWhite;\n  flex-direction: row;\n  font-weight: tokens.$ifxFontWeightSemibold;\n  border-radius: tokens.$ifxBorderRadius12;\n  line-height: tokens.$ifxLineHeightM;\n  outline: none;\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n  text-decoration: none;\n  user-select: none;\n  border: 1px solid rgba(0, 0, 0, 0);\n  font-size: tokens.$ifxFontSizeM;\n  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;\n}\n\n.btn:not(.disabled) {\n  cursor: pointer;\n}\n\n.btn-primary {\n  color: tokens.$ifxColorBaseWhite;\n  background-color: tokens.$ifxColorOcean500;\n\n  &:disabled,\n  &.disabled {\n    background-color: tokens.$ifxColorEngineering300;\n    color: tokens.$ifxColorBaseWhite;\n    pointer-events: none;\n\n  }\n}\n\n\n.btn-secondary {\n  color: tokens.$ifxColorOcean500;\n  background-color: tokens.$ifxColorBaseWhite;\n  border-color: tokens.$ifxColorOcean500;\n\n  &:disabled,\n  &.disabled {\n    background-color: tokens.$ifxColorBaseWhite;\n    border: 1px solid tokens.$ifxColorEngineering300;\n    color: tokens.$ifxColorEngineering300;\n    pointer-events: none;\n\n  }\n}\n\n.btn-tertiary {\n  background-color: transparent;\n  color: tokens.$ifxColorBaseBlack;\n\n  &:disabled,\n  &.disabled {\n    color: tokens.$ifxColorEngineering300;\n    pointer-events: none;\n  }\n}\n\n\n.btn {\n\n  &.icon-button {\n    min-width: initial;\n    min-height: initial;\n    width: tokens.$ifxSize500;\n    height: tokens.$ifxSize500;\n    padding: 0;\n    justify-content: center;\n\n    &.btn-round {\n      border-radius: 100px;\n    }\n\n    &.btn-square {\n      border-radius: tokens.$ifxBorderRadius12;\n    }\n\n    &.btn-s {\n      width: tokens.$ifxSize400;\n      height: tokens.$ifxSize400;\n      padding: 8px;\n    }\n\n\n    &.btn-l {\n      width: tokens.$ifxSize600;\n      height: tokens.$ifxSize600;\n      padding: 8px;\n    }\n  }\n\n  &.btn-primary:not(:disabled, .disabled) {\n    &:focus:not(:active, .active) {\n      outline: none;\n      box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean500;\n    }\n\n    &:hover {\n      background-color: tokens.$ifxColorOcean600;\n      border-color: tokens.$ifxColorOcean600;\n    }\n\n    &:active,\n    &.active {\n      background-color: tokens.$ifxColorOcean700;\n      border-color: tokens.$ifxColorOcean700;\n    }\n  }\n\n\n  &.btn-secondary:not(:disabled, .disabled) {\n    &:focus:not(:active, .active) {\n      outline: none;\n      box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean500;\n    }\n\n    &:hover {\n      background-color: tokens.$ifxColorOcean600;\n      border-color: tokens.$ifxColorOcean600;\n      color: tokens.$ifxColorBaseWhite;\n    }\n\n    &:active,\n    &.active {\n      background-color: tokens.$ifxColorOcean700;\n      border-color: tokens.$ifxColorOcean700;\n    }\n  }\n\n  &.btn-tertiary:not(:disabled, .disabled) {\n    &:focus:not(:active, .active) {\n      outline: none;\n      color: tokens.$ifxColorBaseBlack;\n      box-shadow: 0 0 0 0px tokens.$ifxColorBaseWhite, 0 0 0 2px tokens.$ifxColorOcean500;\n    }\n\n    &:hover {\n      color: tokens.$ifxColorOcean500;\n    }\n\n    &:active,\n    &.active {\n      color: tokens.$ifxColorOcean600;\n    }\n  }\n}","import { Component, Prop, h, Host, Method, Element, Listen, Watch, State } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking'; \nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\nimport classNames from 'classnames';\n\n@Component({\n  tag: 'ifx-icon-button',\n  styleUrl: 'icon-button.scss',\n  shadow: true,\n})\n\nexport class IconButton {\n  @Prop() variant: 'primary' | 'secondary' | 'tertiary';\n  @Prop() size: string;\n  @Prop() disabled: boolean;\n  @Prop() icon: string;\n  @Prop() href: string;\n  @Prop() target: string = '_self';\n  @Prop() shape: string = 'round';\n  @Prop() ariaLabel: string | null;\n  @State() internalIcon: string;\n  @Element() el;\n\n  private focusableElement: HTMLElement;\n  \n  @Listen('click', { capture: true })\n  handleClick(event: Event) {\n    if (this.disabled) {\n      event.stopImmediatePropagation();\n    }\n  }\n\n  @Watch('icon')\n  updateIcon(newIcon: string) { \n    this.internalIcon = newIcon;\n  }\n\n  @Method()\n  async setFocus() {\n    this.focusableElement.focus();\n  }\n\n  componentWillLoad() {\n    if (this.shape === '') {\n      this.shape = 'round';\n    }\n    this.internalIcon = this.icon;\n  }\n\n  componentDidLoad() { \n    if(!isNestedInIfxComponent(this.el)) { \n      const framework = detectFramework();\n      trackComponent('ifx-icon-button', framework)\n    }\n  }\n\n  render() {\n    return (\n      <Host \n        aria-disabled={this.disabled}\n        aria-label={this.ariaLabel}> \n        {this.href ? (\n          <a\n            ref={(el) => (this.focusableElement = el)}\n            class={this.getClassNames()}\n            href={!this.disabled ? this.href : undefined} \n            target={this.target}\n            rel={this.target === '_blank' ? 'noopener noreferrer' : undefined}\n          >\n            <ifx-icon icon={this.internalIcon}></ifx-icon>\n          </a>\n        ) : (\n          <button\n            class={this.getClassNames()}\n            type=\"button\"\n            disabled={this.disabled}\n          >\n            <ifx-icon icon={this.internalIcon}></ifx-icon>\n          </button>\n        )}\n      </Host>\n    );\n  }\n\n  getVariantClass() {\n    return `${this.variant}` === \"secondary\"\n      ? `secondary`\n      : `${this.variant}` === 'tertiary'\n        ? `tertiary`\n        : `primary`;\n  }\n\n  getSizeClass() {\n    if (`${this.size}` === \"xs\") {\n      return \"xs\"\n    }\n    else if (`${this.size}` === \"s\") {\n      return \"s\"\n    }\n    else if (`${this.size}` === \"l\") {\n      return \"l\"\n    }\n    else return \"\";\n  }\n\n  getClassNames() {\n    return classNames(\n      'btn icon-button',\n      `btn-${this.shape}`,\n      this.size && `btn-${this.getSizeClass()}`,\n      `btn-${this.getVariantClass()}`,\n      this.disabled ? 'disabled' : ''\n    );\n  }\n}"],"mappings":"4KAAA,MAAMA,EAAgB,y4EACtB,MAAAC,EAAeD,E,MCWFE,EAAU,MANvB,WAAAC,CAAAC,G,UAYUC,KAAAC,OAAiB,QACjBD,KAAAE,MAAgB,O,CAQxB,WAAAC,CAAYC,GACV,GAAIJ,KAAKK,SAAU,CACjBD,EAAME,0B,EAKV,UAAAC,CAAWC,GACTR,KAAKS,aAAeD,C,CAItB,cAAME,GACJV,KAAKW,iBAAiBC,O,CAGxB,iBAAAC,GACE,GAAIb,KAAKE,QAAU,GAAI,CACrBF,KAAKE,MAAQ,O,CAEfF,KAAKS,aAAeT,KAAKc,I,CAG3B,gBAAAC,GACE,IAAIC,EAAuBhB,KAAKiB,IAAK,CACnC,MAAMC,EAAYC,IAClBC,EAAe,kBAAmBF,E,EAItC,MAAAG,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2DACYxB,KAAKK,SAAQ,aAChBL,KAAKyB,WAChBzB,KAAK0B,KACJJ,EAAA,KACEK,IAAMV,GAAQjB,KAAKW,iBAAmBM,EACtCW,MAAO5B,KAAK6B,gBACZH,MAAO1B,KAAKK,SAAWL,KAAK0B,KAAOI,UACnC7B,OAAQD,KAAKC,OACb8B,IAAK/B,KAAKC,SAAW,SAAW,sBAAwB6B,WAExDR,EAAA,YAAUR,KAAMd,KAAKS,gBAGvBa,EAAA,UACEM,MAAO5B,KAAK6B,gBACZG,KAAK,SACL3B,SAAUL,KAAKK,UAEfiB,EAAA,YAAUR,KAAMd,KAAKS,gB,CAO/B,eAAAwB,GACE,MAAO,GAAGjC,KAAKkC,YAAc,YACzB,YACA,GAAGlC,KAAKkC,YAAc,WACpB,WACA,S,CAGR,YAAAC,GACE,GAAI,GAAGnC,KAAKoC,SAAW,KAAM,CAC3B,MAAO,I,MAEJ,GAAI,GAAGpC,KAAKoC,SAAW,IAAK,CAC/B,MAAO,G,MAEJ,GAAI,GAAGpC,KAAKoC,SAAW,IAAK,CAC/B,MAAO,G,MAEJ,MAAO,E,CAGd,aAAAP,GACE,OAAOQ,EACL,kBACA,OAAOrC,KAAKE,QACZF,KAAKoC,MAAQ,OAAOpC,KAAKmC,iBACzB,OAAOnC,KAAKiC,oBACZjC,KAAKK,SAAW,WAAa,G","ignoreList":[]}

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

@@ -1 +0,0 @@
-{"version":3,"names":["switchCss","IfxSwitchStyle0","Switch","constructor","hostRef","this","checked","name","disabled","internalChecked","isChecked","componentWillLoad","toggleLabelGap","slot","el","shadowRoot","querySelector","container","assignedNodes","length","classList","add","remove","componentDidLoad","isNestedInIfxComponent","framework","detectFramework","trackComponent","valueChanged","newValue","oldValue","toggleSwitch","value","undefined","internals","setFormValue","ifxChange","emit","handleKeyDown","event","key","formResetCallback","render","h","class","role","onClick","onKeyDown","tabindex","type","hidden","htmlFor","onSlotchange"],"sources":["src/components/switch/switch.scss?tag=ifx-switch&encapsulation=shadow","src/components/switch/switch.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n/* switch.css */\n:host {\n  display: inline-block;\n  user-select: none;\n}\n\n.container {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  &.gap {\n    gap: tokens.$ifxSpace200;\n  }\n}\n\n\n.switch__checkbox-container {\n  padding: tokens.$ifxSpace50;\n  display: flex;\n  align-items: center;\n  position: relative;\n  // Subtracting padding size from both height and width\n  width: (tokens.$ifxSpace500)-8px;\n  height: 16px;\n  background-color: tokens.$ifxColorBaseWhite;\n  border: 1px solid tokens.$ifxColorEngineering500;\n  border-radius: 20px;\n  cursor: pointer;\n  transition: background-color 0.3s ease;\n  outline: none;\n\n  &:focus {\n    outline: 4px solid tokens.$ifxColorOcean500;\n    outline-offset: 2px;\n  }\n\n  &:focus:not(:focus-visible) {\n    outline: none;\n  }\n\n  &:focus-visible {\n    outline: 2px solid tokens.$ifxColorOcean500;\n    outline-offset: 2px;\n  }\n\n  &.disabled {\n    cursor: default;\n    border-color: tokens.$ifxColorEngineering300;\n  }\n\n\n}\n\n\n.switch__label-wrapper {\n\n  & label { \n    &:hover { \n      cursor: pointer;\n    }\n  }\n\n  &.disabled {\n    color: tokens.$ifxColorEngineering300;\n  }\n}\n\n\n.switch__checkbox-wrapper {\n\n  .switch {\n    // position: absolute;\n    width: tokens.$ifxSpace200;\n    height: tokens.$ifxSpace200;\n    background-color: tokens.$ifxColorEngineering500;\n    border-radius: 50%;\n    transition: transform 0.3s ease, background-color 0.3s ease;\n\n    &.disabled {\n      background-color: tokens.$ifxColorEngineering300;\n      border-color: tokens.$ifxColorEngineering300;\n      cursor: default;\n    }\n  }\n\n  .switch.checked {\n    transform: translateX(16px);\n    background-color: tokens.$ifxColorBaseWhite;\n\n    &.disabled {\n      cursor: default;\n    }\n\n  }\n\n}\n\n.switch__checkbox-container:hover .toggle-switch {\n  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);\n}\n\n\n\n.switch__checkbox-container.checked {\n  background-color: tokens.$ifxColorOcean500;\n  border-color: tokens.$ifxColorOcean500;\n\n  &.disabled {\n    background-color: tokens.$ifxColorEngineering300;\n    border-color: tokens.$ifxColorEngineering300;\n    cursor: default;\n  }\n}","import { AttachInternals, Method } from '@stencil/core';\nimport { Component, Prop, State, Watch, h, Event, EventEmitter, Element } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking'; \nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n  tag: 'ifx-switch',\n  styleUrl: 'switch.scss',\n  shadow: true,\n  formAssociated: true\n})\nexport class Switch {\n  @Prop() checked: boolean = false;\n  @Prop() name: string = '';\n  @Prop() disabled: boolean = false;\n  @Prop() value: string;\n  @State() internalChecked: boolean = false;\n\n  @AttachInternals() internals: ElementInternals;\n\n  @Element() el: HTMLIfxSwitchElement;\n\n  @Event({ eventName: 'ifxChange' }) ifxChange: EventEmitter<boolean>;\n\n  @Method()\n  async isChecked(): Promise<boolean> {\n    return this.internalChecked;\n  }\n\n  componentWillLoad() {\n    this.internalChecked = this.checked;\n  }\n  \n\n  toggleLabelGap() {\n    const slot = this.el.shadowRoot.querySelector('slot');\n    const container = this.el.shadowRoot.querySelector('.container');\n    if (slot.assignedNodes().length) {\n      container.classList.add('gap')\n    } else { \n      container.classList.remove('gap')\n    }\n  }\n  \n  componentDidLoad() {\n    if(!isNestedInIfxComponent(this.el)) { \n      const framework = detectFramework();\n      trackComponent('ifx-switch', framework)\n    }\n    this.toggleLabelGap();\n  }\n    \n  @Watch('checked')\n  valueChanged(newValue: boolean, oldValue: boolean) {\n    if (newValue !== oldValue) {\n      this.internalChecked = newValue;\n    }\n  }\n\n  toggleSwitch() {\n    if (this.disabled) return;\n    this.internalChecked = !this.internalChecked;\n\n    if (this.internalChecked) {\n      if (this.value !== undefined) {\n        this.internals.setFormValue(this.value);\n      } else {\n        this.internals.setFormValue(\"on\")\n      }\n    } else {\n      this.internals.setFormValue(null)\n    }\n\n    this.ifxChange.emit(this.internalChecked);\n  }\n\n  handleKeyDown(event: KeyboardEvent) {\n    if (this.disabled) return;\n    // If the pressed key is either 'Enter' or 'Space' \n    if (event.key === 'Enter' || event.key === ' ') {\n      this.toggleSwitch();\n    }\n  }\n\n  /**\n   * Callback for form association.\n   * Called whenever the form is reset.\n   */\n  formResetCallback() {\n    this.internals.setFormValue(null);\n  }\n\n  render() {\n    return (\n      <div\n        class=\"container\"\n        role=\"switch\"\n        aria-checked={this.internalChecked ? 'true' : 'false'}\n        aria-label={this.name}\n        onClick={() => this.toggleSwitch()}\n        onKeyDown={(event) => this.handleKeyDown(event)}\n        >\n        {/* Checkbox */}\n        <div \n          class={`switch__checkbox-container ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}`}\n          tabindex=\"0\"\n        >\n          <div class=\"switch__checkbox-wrapper\">\n            <input type=\"checkbox\" hidden\n              name={this.name}\n              disabled={this.disabled}\n              checked={this.internalChecked}\n              value={`${this.value}`} />\n            <div class={`switch ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}`} />\n          </div>\n        </div >\n\n        {/* Label */}\n        <div class={`switch__label-wrapper ${this.disabled ? 'disabled' : ''}`} >\n          <label htmlFor=\"switch\">\n            <slot onSlotchange={() => this.toggleLabelGap()} />\n          </label>\n        </div>\n      </div>\n    )\n\n  }\n}\n"],"mappings":"wIAAA,MAAMA,EAAY,sgDAClB,MAAAC,EAAeD,E,MCWFE,EAAM,MANnB,WAAAC,CAAAC,G,+MAOUC,KAAAC,QAAmB,MACnBD,KAAAE,KAAe,GACfF,KAAAG,SAAoB,MAEnBH,KAAAI,gBAA2B,K,CASpC,eAAMC,GACJ,OAAOL,KAAKI,e,CAGd,iBAAAE,GACEN,KAAKI,gBAAkBJ,KAAKC,O,CAI9B,cAAAM,GACE,MAAMC,EAAOR,KAAKS,GAAGC,WAAWC,cAAc,QAC9C,MAAMC,EAAYZ,KAAKS,GAAGC,WAAWC,cAAc,cACnD,GAAIH,EAAKK,gBAAgBC,OAAQ,CAC/BF,EAAUG,UAAUC,IAAI,M,KACnB,CACLJ,EAAUG,UAAUE,OAAO,M,EAI/B,gBAAAC,GACE,IAAIC,EAAuBnB,KAAKS,IAAK,CACnC,MAAMW,EAAYC,IAClBC,EAAe,aAAcF,E,CAE/BpB,KAAKO,gB,CAIP,YAAAgB,CAAaC,EAAmBC,GAC9B,GAAID,IAAaC,EAAU,CACzBzB,KAAKI,gBAAkBoB,C,EAI3B,YAAAE,GACE,GAAI1B,KAAKG,SAAU,OACnBH,KAAKI,iBAAmBJ,KAAKI,gBAE7B,GAAIJ,KAAKI,gBAAiB,CACxB,GAAIJ,KAAK2B,QAAUC,UAAW,CAC5B5B,KAAK6B,UAAUC,aAAa9B,KAAK2B,M,KAC5B,CACL3B,KAAK6B,UAAUC,aAAa,K,MAEzB,CACL9B,KAAK6B,UAAUC,aAAa,K,CAG9B9B,KAAK+B,UAAUC,KAAKhC,KAAKI,gB,CAG3B,aAAA6B,CAAcC,GACZ,GAAIlC,KAAKG,SAAU,OAEnB,GAAI+B,EAAMC,MAAQ,SAAWD,EAAMC,MAAQ,IAAK,CAC9CnC,KAAK0B,c,EAQT,iBAAAU,GACEpC,KAAK6B,UAAUC,aAAa,K,CAG9B,MAAAO,GACE,OACEC,EAAA,OAAAH,IAAA,2CACEI,MAAM,YACNC,KAAK,SAAQ,eACCxC,KAAKI,gBAAkB,OAAS,QAAO,aACzCJ,KAAKE,KACjBuC,QAAS,IAAMzC,KAAK0B,eACpBgB,UAAYR,GAAUlC,KAAKiC,cAAcC,IAGzCI,EAAA,OAAAH,IAAA,2CACEI,MAAO,8BAA8BvC,KAAKI,gBAAkB,UAAY,MAAMJ,KAAKG,SAAW,WAAa,KAC3GwC,SAAS,KAETL,EAAA,OAAAH,IAAA,2CAAKI,MAAM,4BACTD,EAAA,SAAAH,IAAA,2CAAOS,KAAK,WAAWC,OAAM,KAC3B3C,KAAMF,KAAKE,KACXC,SAAUH,KAAKG,SACfF,QAASD,KAAKI,gBACduB,MAAO,GAAG3B,KAAK2B,UACjBW,EAAA,OAAAH,IAAA,2CAAKI,MAAO,UAAUvC,KAAKI,gBAAkB,UAAY,MAAMJ,KAAKG,SAAW,WAAa,SAKhGmC,EAAA,OAAAH,IAAA,2CAAKI,MAAO,yBAAyBvC,KAAKG,SAAW,WAAa,MAChEmC,EAAA,SAAAH,IAAA,2CAAOW,QAAQ,UACbR,EAAA,QAAAH,IAAA,2CAAMY,aAAc,IAAM/C,KAAKO,qB","ignoreList":[]}

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

@@ -1 +0,0 @@
-{"version":3,"names":["datePickerCss","IfxDatePickerStyle0","DatePicker","constructor","hostRef","this","inputId","datePickerId","size","error","success","disabled","type","required","autocomplete","getDate","e","inputValue","target","value","selectedDate","Date","day","month","getMonth","year","getFullYear","internals","setFormValue","hours","getHours","minutes","getMinutes","ifxDate","emit","input","el","shadowRoot","querySelector","classList","add","toISOString","substring","handleInputFocusOnIconClick","focus","getBrowser","navigator","userAgent","indexOf","setFireFoxClasses","browser","contains","remove","componentDidLoad","isNestedInIfxComponent","framework","detectFramework","trackComponent","componentWillUpdate","formResetCallback","render","h","key","class","htmlFor","_a","label","trim","undefined","ariaLabel","max","min","onChange","role","onClick","icon","_b","caption"],"sources":["src/components/date-picker/date-picker.scss?tag=ifx-date-picker&encapsulation=shadow","src/components/date-picker/date-picker.tsx"],"sourcesContent":["@use '~@infineon/design-system-tokens/dist/tokens';\n\n.date__picker-container {\n  display: flex;\n  flex-direction: column;\n\n  & .label__wrapper {\n    color: tokens.$ifxColorBaseBlack;\n    font: tokens.$ifxBodyBody03;\n\n    & .asterisk { \n      display: none;\n      &.required {\n        display: inline;\n        margin-left: 4px;\n        \n        &.error {\n          color: #CD002F;\n        }\n      }\n    }\n\n  }\n\n  &.disabled {\n    .label__wrapper {\n      color: tokens.$ifxColorEngineering500;\n    }\n  }\n\n  &.error {\n    .caption__wrapper {\n      color: tokens.$ifxColorRed500;\n    }\n  }\n\n  &.disabled {\n    .caption__wrapper {\n      color: tokens.$ifxColorEngineering500;\n    }\n  }\n\n  & .caption__wrapper {\n    margin-top: tokens.$ifxSpace50;\n    color: tokens.$ifxColorBaseBlack;\n    font: tokens.$ifxBodyBody05;\n  }\n}\n\n.date__picker-input {\n  font-family: 'Source Sans 3';\n  outline: none;\n  width: 100%;\n  cursor: pointer;\n  border-radius: 1px;\n  border: 1px solid tokens.$ifxColorEngineering400;\n  height: 100%;\n\n  &.firefox__classes {\n    padding: 8px 16px;\n    color: tokens.$ifxColorEngineering400;\n    font-size: 16px;\n    text-transform: uppercase;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 24px;\n    cursor: pointer;\n  }\n\n  &:focus:not(.error, .success) {\n    border-color: tokens.$ifxColorOcean500;\n  }\n\n  &:hover:not(:disabled, :focus, .error, .success) {\n    border-color: tokens.$ifxColorEngineering500;\n  }\n\n  &:disabled {\n    border-color: tokens.$ifxColorEngineering500;\n    background-color: tokens.$ifxColorEngineering200;\n  }\n\n  &.error {\n    border-color: tokens.$ifxColorRed500;\n  }\n\n  &.success:not(.error) {\n    border-color: tokens.$ifxColorGreen500;\n  }\n\n  &::-webkit-datetime-edit-text {\n    color: tokens.$ifxColorEngineering400;\n    font-size: 16px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 24px;\n  }\n\n  &.has-value::-webkit-datetime-edit-text {\n    color: tokens.$ifxColorBaseBlack;\n  }\n\n  &.has-value::-webkit-datetime-edit {\n    color: tokens.$ifxColorBaseBlack;\n  }\n}\n\n::-webkit-datetime-edit {\n  color: tokens.$ifxColorEngineering400;\n  font-size: 16px;\n  text-transform: uppercase;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 24px;\n}\n\n::-webkit-datetime-edit-fields-wrapper {\n  padding: 8px 16px;\n  padding-bottom: 9px;\n  transform: translateY(1px);\n}\n\n::-webkit-inner-spin-button {\n  display: none;\n}\n\n::-webkit-calendar-picker-indicator {\n  position: absolute;\n  right: 15px;\n  font-size: 19px;\n  cursor: pointer;\n  border-radius: 1px;\n  &:focus-within {\n    outline: 2px solid tokens.$ifxColorOcean500;\n    outline-offset: 2px;\n  }\n}\n\n.input__wrapper {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  align-self: stretch;\n  background: tokens.$ifxColorBaseWhite;\n  position: relative;\n  &.large {\n    height: 40px;\n  }\n\n  &.small {\n    height: 36px;\n  }\n\n  &.disabled {\n    & .icon__wrapper {\n      background-color: tokens.$ifxColorEngineering200;\n    }\n  }\n}\n\n.icon__wrapper {\n  position: absolute;\n  right: 17px;\n  padding: 2px;\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  pointer-events: none;\n  z-index: 100;\n  background-color: tokens.$ifxColorBaseWhite;\n  line-height: 16px;\n\n  & ifx-icon {\n    vertical-align: middle;\n  }\n}\n","import { AttachInternals } from '@stencil/core';\nimport { Component, Prop, h, Element, Event, EventEmitter } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n \n@Component({\n  tag: 'ifx-date-picker',\n  styleUrl: 'date-picker.scss',\n  shadow: true,\n  formAssociated: true,\n})\n\nexport class DatePicker {\n  private inputId: string = `ifx-date-picker-${++datePickerId}`;\n\n  @Element() el: HTMLElement;\n  @Prop() size: string = 's';\n  @Prop() error: boolean = false;\n  @Prop() success: boolean = false;\n  @Prop() disabled: boolean = false;\n  @Prop() ariaLabel: string | null;\n  @Prop() value: string;\n  @Prop() type: string = 'date'\n  @Prop() max: string;\n  @Prop() min: string;\n  @Prop() required: boolean = false;\n  @Prop() label: string;\n  @Prop() caption: string;\n  @Prop() autocomplete: string = 'on';\n\n  @AttachInternals() internals: ElementInternals;\n\n  @Event() ifxDate: EventEmitter;\n\n  getDate(e) { \n    const inputValue = e.target.value;\n    const selectedDate = new Date(inputValue);\n    const day = selectedDate.getDate();\n    const month = selectedDate.getMonth() + 1; \n    const year = selectedDate.getFullYear();\n\n \n      \n    if (!inputValue) {\n      this.internals.setFormValue(null);\n\n      if(this.type === 'datetime-local') { \n        const hours = selectedDate.getHours();\n        const minutes = selectedDate.getMinutes();\n        this.ifxDate.emit({day, month, year, hours, minutes});\n      } else { \n        this.ifxDate.emit({day, month, year});\n      }\n      return;\n    }\n\n    const input = this.el.shadowRoot.querySelector('.date__picker-input') as HTMLInputElement;\n    input.classList.add('has-value');\n\n    this.internals.setFormValue(selectedDate.toISOString().substring(0,10))\n    if(this.type === 'datetime-local') { \n      const hours = selectedDate.getHours();\n      const minutes = selectedDate.getMinutes();\n      this.ifxDate.emit({day, month, year, hours, minutes});\n    } else { \n      this.ifxDate.emit({day, month, year})\n    }\n  }\n\n  handleInputFocusOnIconClick() { \n    const input = this.el.shadowRoot.querySelector('.date__picker-input') as HTMLInputElement;\n    if(input) { \n      input.focus()\n    }\n  }\n\n getBrowser() {\n    if( navigator.userAgent.indexOf(\"Chrome\") != -1 ) {\n      return \"Chrome\";\n    } else if( navigator.userAgent.indexOf(\"Opera\") != -1 ) {\n      return \"Opera\";\n    } else if( navigator.userAgent.indexOf(\"MSIE\") != -1 ) {\n      return \"IE\";\n    } else if( navigator.userAgent.indexOf(\"Firefox\") != -1 ) {\n      return \"Firefox\";\n    } else {\n      return \"unknown\";\n    }\n  }\n\n  setFireFoxClasses() { \n    const browser = this.getBrowser()\n    const input = this.el.shadowRoot.querySelector('.date__picker-input');\n\n    if(browser === 'Firefox') { \n      input.classList.add('firefox__classes')\n    } else if(input.classList.contains('firefox__classes')) { \n      input.classList.remove('firefox__classes')\n    }\n  }\n\n  componentDidLoad() { \n    if(!isNestedInIfxComponent(this.el)) { \n      const framework = detectFramework();\n      trackComponent('ifx-date-picker', framework)\n    }\n    this.setFireFoxClasses()\n  }\n\n  componentWillUpdate() { \n    if (this.value) {\n      this.getDate({ target: { value: this.value } });\n    }\n  }\n\n  formResetCallback() {\n    this.internals.setFormValue(null);\n  }\n\n  render() {\n    return (\n      <div class={`date__picker-container ${this.error ? 'error' : ''} ${this.disabled ? 'disabled': ''}`}>\n\n        <label class='label__wrapper' htmlFor={ this.inputId }>\n          { this.label?.trim() }\n          <span class={`asterisk ${this.required ? 'required' : \"\"} ${this.error ? 'error' : \"\"}`}>*</span>\n        </label>\n\n        <div class={`input__wrapper ${this.size === 'l' ? 'large' : 'small'} ${this.disabled ? 'disabled' : ''}`}>\n          <input\n          type={this.type}\n          autocomplete={this.autocomplete}\n          class={`date__picker-input ${this.error ? 'error' : \"\"} ${this.success ? \"success\" : \"\"}`}\n          disabled={this.disabled ? true : undefined}\n          aria-invalid={this.error ? true : undefined}\n          aria-label={this.ariaLabel}\n          max={this.max}\n          min={this.min}\n          value={this.value}\n          required={this.required}\n          onChange={(e) => this.getDate(e)} />\n          <div class=\"icon__wrapper\" role=\"button\" onClick={() => this.handleInputFocusOnIconClick()}>\n            <ifx-icon icon='calendar16' aria-hidden=\"true\"></ifx-icon>\n          </div>\n        </div>\n\n        { this.caption?.trim() && (\n            <div class='caption__wrapper'>\n              { this.caption.trim() }\n            </div> \n          )}\n      </div>\n    )\n  }\n}\n\nlet datePickerId = 0;"],"mappings":"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","ignoreList":[]}

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

@@ -1 +0,0 @@
-{"version":3,"names":["textareaCss","IfxTextareaStyle0","TextArea","constructor","hostRef","this","inputId","textareaId","disabled","error","readOnly","resize","wrap","fullWidth","reset","resetTextarea","handleComponentWidth","textareaWrapper","el","shadowRoot","querySelector","isFullWidth","toLowerCase","classList","add","contains","remove","componentDidRender","formResetCallback","internals","setFormValue","handleOnInput","e","value","target","ifxInput","emit","setValidity","componentWillLoad","componentDidLoad","isNestedInIfxComponent","framework","detectFramework","trackComponent","render","h","Host","key","class","htmlFor","_a","label","trim","id","style","name","cols","rows","maxlength","readonly","placeholder","onInput","_b","caption"],"sources":["src/components/textarea/textarea.scss?tag=ifx-textarea&encapsulation=shadow","src/components/textarea/textarea.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n}\n\n.wrapper__label {\n    color: tokens.$ifxColorBaseBlack;\n    font: tokens.$ifxBodyBody03;\n}\n:host(.wrapper--disabled) .wrapper__label {\n    color: tokens.$ifxColorEngineering500;\n}\n\n.wrapper__textarea {\n    width: 100%;\n    &.fullWidth { \n        width: 100%;\n        & textarea { \n            width: 100%;\n            box-sizing: border-box; \n        }\n    }\n}\n\n.wrapper__textarea textarea {\n    border: 1px solid tokens.$ifxColorEngineering400;\n    border-radius: tokens.$ifxSpace12;\n    padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\n    \n    background-color: tokens.$ifxColorBaseWhite;\n    color: tokens.$ifxColorBaseBlack;\n    font: tokens.$ifxBodyBody03;\n    \n    transition: all 100ms ease;\n    transition-property: border-color;\n\n    &:hover {\n        border: 1px solid tokens.$ifxColorEngineering500;\n    }\n    \n    &:focus-within {\n        outline: none;\n        border: 1px solid tokens.$ifxColorOcean500;\n    }\n}\n\n:host(.wrapper--error) .wrapper__textarea textarea {\n    border: 1px solid tokens.$ifxColorRed500;\n}\n:host(.wrapper--disabled) .wrapper__textarea textarea {\n    border: 1px solid tokens.$ifxColorEngineering500;\n\n    background-color: tokens.$ifxColorEngineering200;\n}\n\n.wrapper__caption {\n    color: tokens.$ifxColorBaseBlack;\n    font: tokens.$ifxBodyBody05;\n}\n:host(.wrapper--error) .wrapper__caption {\n    color: tokens.$ifxColorRed500;\n}\n:host(.wrapper--disabled) .wrapper__caption {\n    color: tokens.$ifxColorEngineering500;\n}","import { h, AttachInternals, Component, Event, EventEmitter, Host, Method, Prop, Element } from \"@stencil/core\"\nimport { trackComponent } from '../../global/utils/tracking'; \nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n\tformAssociated: true,\n\tshadow: true,\n\tstyleUrl: 'textarea.scss',\n\ttag: 'ifx-textarea'\n})\n\nexport class TextArea {\n\n\tprivate inputId: string = `ifx-textarea-${++textareaId}`;\n\n\t@AttachInternals() internals: ElementInternals;\n\n\t@Event() ifxInput: EventEmitter<String>;\n\t@Element() el;\n\t@Prop() caption: string;\n\t@Prop() cols: number;\n\t@Prop() disabled: boolean = false;\n\t@Prop() error: boolean = false;\n\t@Prop() label: string;\n\t@Prop() maxlength: number;\n\t@Prop() name: string;\n\t@Prop() placeholder: string;\n\t@Prop() readOnly: boolean = false;\n\t@Prop() resize: 'both' | 'horizontal' | 'vertical' | 'none' = 'both';\n\t@Prop() rows: number;\n\t@Prop({ mutable: true }) value: string;\n\t@Prop() wrap: 'hard' | 'soft' | 'off' = 'soft';\n\t@Prop({ reflect: true }) fullWidth: string = \"false\";\n\n\t@Method()\n\tasync reset() {\n\t\tthis.resetTextarea();\n\t}\n\n\thandleComponentWidth() {\n\t\tconst textareaWrapper = this.el.shadowRoot.querySelector('.wrapper__textarea')\n\t\tconst isFullWidth = this.fullWidth.toLowerCase() === \"true\";\n\t\t\n    if (isFullWidth) {\n\t\t\ttextareaWrapper.classList.add('fullWidth')\n    } else if(textareaWrapper.classList.contains('fullWidth')) {\n\t\t\ttextareaWrapper.classList.remove('fullWidth');\n    }\n  }\n\n\tcomponentDidRender() {\n    this.handleComponentWidth()\n  }\n\t\n\tformResetCallback(): void {\n\t\tthis.resetTextarea();\n\t\tthis.internals.setFormValue(\"\");\n\t}\n\t\n\thandleOnInput(e: InputEvent): void {\n\t\tthis.value = (e.target as HTMLTextAreaElement).value;\n\t\tthis.internals.setFormValue(this.value);\n\t\tthis.ifxInput.emit(this.value);\n\t}\n\n\tresetTextarea() {\n\t\tthis.value = '';\n\t\tthis.internals.setValidity({});\n\t\tthis.internals.setFormValue('');\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.internals.setFormValue(this.value);\n\t}\n\n\tcomponentDidLoad() { \n\t\tif(!isNestedInIfxComponent(this.el)) { \n\t\t\tconst framework = detectFramework();\n\t\t\ttrackComponent('ifx-textarea', framework)\n\t\t}\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={`wrapper--${this.error ? 'error' : ''} wrapper--${this.disabled ? 'disabled': ''}`}>\n\t\t\t\t<label class='wrapper__label' htmlFor={ this.inputId }>\n\t\t\t\t\t{ this.label?.trim() }\n\t\t\t\t</label>\n\n\t\t\t\t<div class='wrapper__textarea'>\n\t\t\t\t\t<textarea\n\t\t\t\t\t\taria-label='a textarea'\n\t\t\t\t\t\taria-value={ this.value }\n\t\t\t\t\t\taria-disabled={ this.disabled }\n\t\t\t\t\t\tid={ this.inputId }\n\t\t\t\t\t\tstyle={ {resize: this.resize} }\n\t\t\t\t\t\tname={ this.name ? this.name : this.inputId}\n\t\t\t\t\t\tcols={ this.cols }\n\t\t\t\t\t\trows={ this.rows }\n\t\t\t\t\t\tmaxlength={ this.maxlength }\n\t\t\t\t\t\twrap={ this.wrap }\n\t\t\t\t\t\tdisabled={ this.disabled }\n\t\t\t\t\t\treadonly={ this.readOnly }\n\t\t\t\t\t\tplaceholder={ this.placeholder }\n\t\t\t\t\t\tvalue={ this.value }\n\t\t\t\t\t\tonInput={ (e) => this.handleOnInput(e) }\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\n\t\t\t\t{ this.caption?.trim() && (\n\t\t\t\t\t<div class='wrapper__caption'>\n\t\t\t\t\t\t{ this.caption.trim() }\n\t\t\t\t\t</div> \n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n}\n\nlet textareaId = 0;"],"mappings":"0IAAA,MAAMA,EAAc,glCACpB,MAAAC,EAAeD,E,MCWFE,EAAQ,MAPrB,WAAAC,CAAAC,G,6MASSC,KAAAC,QAAkB,kBAAkBC,IAQpCF,KAAAG,SAAoB,MACpBH,KAAAI,MAAiB,MAKjBJ,KAAAK,SAAoB,MACpBL,KAAAM,OAAsD,OAGtDN,KAAAO,KAAgC,OACfP,KAAAQ,UAAoB,O,CAG7C,WAAMC,GACLT,KAAKU,e,CAGN,oBAAAC,GACC,MAAMC,EAAkBZ,KAAKa,GAAGC,WAAWC,cAAc,sBACzD,MAAMC,EAAchB,KAAKQ,UAAUS,gBAAkB,OAEnD,GAAID,EAAa,CAClBJ,EAAgBM,UAAUC,IAAI,Y,MACtB,GAAGP,EAAgBM,UAAUE,SAAS,aAAc,CAC5DR,EAAgBM,UAAUG,OAAO,Y,EAInC,kBAAAC,GACGtB,KAAKW,sB,CAGR,iBAAAY,GACCvB,KAAKU,gBACLV,KAAKwB,UAAUC,aAAa,G,CAG7B,aAAAC,CAAcC,GACb3B,KAAK4B,MAASD,EAAEE,OAA+BD,MAC/C5B,KAAKwB,UAAUC,aAAazB,KAAK4B,OACjC5B,KAAK8B,SAASC,KAAK/B,KAAK4B,M,CAGzB,aAAAlB,GACCV,KAAK4B,MAAQ,GACb5B,KAAKwB,UAAUQ,YAAY,IAC3BhC,KAAKwB,UAAUC,aAAa,G,CAG7B,iBAAAQ,GACCjC,KAAKwB,UAAUC,aAAazB,KAAK4B,M,CAGlC,gBAAAM,GACC,IAAIC,EAAuBnC,KAAKa,IAAK,CACpC,MAAMuB,EAAYC,IAClBC,EAAe,eAAgBF,E,EAIjC,MAAAG,G,QACC,OACCC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAO,YAAY3C,KAAKI,MAAQ,QAAU,eAAeJ,KAAKG,SAAW,WAAY,MAC1FqC,EAAA,SAAAE,IAAA,2CAAOC,MAAM,iBAAiBC,QAAU5C,KAAKC,UAC1C4C,EAAA7C,KAAK8C,SAAK,MAAAD,SAAA,SAAAA,EAAEE,QAGfP,EAAA,OAAAE,IAAA,2CAAKC,MAAM,qBACVH,EAAA,YAAAE,IAAA,wDACY,aAAY,aACV1C,KAAK4B,MAAK,gBACP5B,KAAKG,SACrB6C,GAAKhD,KAAKC,QACVgD,MAAQ,CAAC3C,OAAQN,KAAKM,QACtB4C,KAAOlD,KAAKkD,KAAOlD,KAAKkD,KAAOlD,KAAKC,QACpCkD,KAAOnD,KAAKmD,KACZC,KAAOpD,KAAKoD,KACZC,UAAYrD,KAAKqD,UACjB9C,KAAOP,KAAKO,KACZJ,SAAWH,KAAKG,SAChBmD,SAAWtD,KAAKK,SAChBkD,YAAcvD,KAAKuD,YACnB3B,MAAQ5B,KAAK4B,MACb4B,QAAW7B,GAAM3B,KAAK0B,cAAcC,QAIpC8B,EAAAzD,KAAK0D,WAAO,MAAAD,SAAA,SAAAA,EAAEV,SACfP,EAAA,OAAAE,IAAA,2CAAKC,MAAM,oBACR3C,KAAK0D,QAAQX,Q,mEAQrB,IAAI7C,EAAa,E","ignoreList":[]}

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

@@ -1 +0,0 @@
-{"version":3,"names":["searchBarCss","IfxSearchBarStyle0","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","class","maxlength","onIfxInput","bind","icon","slot","tabindex","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\";\n@use \"../../global/font.scss\";\n\n:host {\n  width: 100%; //revert\n  display: flex;\n}\n\n.search-bar {\n  box-sizing: border-box;\n  height: tokens.$ifxSize500;\n  background-color: tokens.$ifxColorBaseWhite;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  width: 100%;\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n\n  &.closed {\n    display: flex;\n    width: auto;\n    justify-content: flex-start;\n  }\n\n  & .search-bar-wrapper {\n    display: flex;\n    align-items: center;\n    gap: tokens.$ifxSpace200;\n    width: 100%;\n\n    & a {\n      text-decoration: none;\n      font-size: tokens.$ifxFontSizeM;\n      font-style: normal;\n      font-weight: tokens.$ifxFontWeightSemibold;\n      line-height: tokens.$ifxLineHeightM;\n      color: tokens.$ifxColorOcean500;\n      cursor: pointer;\n    }\n\n    & ifx-search-field {\n      width: 100%;\n    }\n  }\n\n  .search-bar__icon-wrapper {\n    display: none;\n    flex-direction: row;\n    align-items: center;\n\n    & ifx-icon:hover {\n      cursor: pointer;\n    }\n  }\n\n  &.closed {\n    .search-bar__icon-wrapper {\n      display: flex;\n    }\n\n    .search-bar-wrapper {\n      display: none;\n    }\n  }\n}","import { Component, h, Prop, Event, EventEmitter, State, Watch, Element, Method } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking'; \nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n  tag: 'ifx-search-bar',\n  styleUrl: 'search-bar.scss',\n  shadow: true,\n})\nexport class SearchBar {\n  @Prop() isOpen: boolean = true;\n  @Prop() disabled: boolean = false;\n  @State() internalState: boolean;\n  @Prop({ mutable: true }) value: string;\n  @Prop() maxlength?: number;\n  @Event() ifxInput: EventEmitter;\n  @Event() ifxOpen: EventEmitter;\n   @Prop() autocomplete: string = \"on\";\n  @Element() el;\n\n  @Method()\n  async onNavbarMobile() {\n    this.ifxOpen.emit(false)\n    this.internalState = false;\n  }\n\n  @Watch('isOpen')\n  handlePropChange() {\n    this.internalState = this.isOpen;\n  }\n\n  handleCloseButton = () => {\n    this.internalState = !this.internalState;\n    this.ifxOpen.emit(this.internalState)\n  }\n\n  setInitialState() {\n    this.internalState = this.isOpen;\n  }\n\n  componentWillLoad() {\n    this.setInitialState();\n    this.ifxOpen.emit(this.internalState)\n  }\n\n  componentDidLoad() { \n    if(!isNestedInIfxComponent(this.el)) { \n      const framework = detectFramework();\n      trackComponent('ifx-search-bar', framework)\n    }\n  }\n\n  handleInput(event: CustomEvent) {\n    this.value = event.detail;\n  }\n\n  handleFocus = () => {\n    this.internalState = true;\n  }\n\n\n  render() {\n    return (\n      <div aria-label='a search bar' aria-disabled={this.disabled} class={`search-bar ${this.internalState ? 'open' : 'closed'}`}>\n        {this.internalState ? (\n          <div class=\"search-bar-wrapper\">\n            <ifx-search-field autocomplete={this.autocomplete} disabled={this.disabled} value={this.value} maxlength={this.maxlength} onIfxInput={this.handleInput.bind(this)}>\n              <ifx-icon icon=\"search-16\" slot=\"search-icon\"></ifx-icon>\n            </ifx-search-field>\n\n            <a tabindex=\"-1\" href='javascript:void(0)' onClick={this.handleCloseButton}>Close</a>\n          </div>\n        ) : (\n          <div class=\"search-bar__icon-wrapper\" onClick={this.handleCloseButton}>\n            <ifx-icon icon=\"search-16\"></ifx-icon>\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"],"mappings":"mIAAA,MAAMA,EAAe,+3BACrB,MAAAC,EAAeD,E,MCSFE,EAAS,MALtB,WAAAC,CAAAC,G,8EAMUC,KAAAC,OAAkB,KAClBD,KAAAE,SAAoB,MAMnBF,KAAAG,aAAuB,KAchCH,KAAAI,kBAAoB,KAClBJ,KAAKK,eAAiBL,KAAKK,cAC3BL,KAAKM,QAAQC,KAAKP,KAAKK,cAAc,EAuBvCL,KAAAQ,YAAc,KACZR,KAAKK,cAAgB,IAAI,C,CApC3B,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,gBAAAQ,GACE,IAAIC,EAAuBd,KAAKe,IAAK,CACnC,MAAMC,EAAYC,IAClBC,EAAe,iBAAkBF,E,EAIrC,WAAAG,CAAYC,GACVpB,KAAKqB,MAAQD,EAAME,M,CAQrB,MAAAC,GACE,OACEC,EAAA,OAAAC,IAAA,wDAAgB,eAAc,gBAAgBzB,KAAKE,SAAUwB,MAAO,cAAc1B,KAAKK,cAAgB,OAAS,YAC7GL,KAAKK,cACJmB,EAAA,OAAKE,MAAM,sBACTF,EAAA,oBAAkBrB,aAAcH,KAAKG,aAAcD,SAAUF,KAAKE,SAAUmB,MAAOrB,KAAKqB,MAAOM,UAAW3B,KAAK2B,UAAWC,WAAY5B,KAAKmB,YAAYU,KAAK7B,OAC1JwB,EAAA,YAAUM,KAAK,YAAYC,KAAK,iBAGlCP,EAAA,KAAGQ,SAAS,KAAKC,KAAK,qBAAqBC,QAASlC,KAAKI,mBAAiB,UAG5EoB,EAAA,OAAKE,MAAM,2BAA2BQ,QAASlC,KAAKI,mBAClDoB,EAAA,YAAUM,KAAK,e","ignoreList":[]}

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

@@ -1 +0,0 @@
-{"version":3,"names":["searchFieldCss","IfxSearchFieldStyle0","SearchField","constructor","hostRef","this","value","insideDropdown","showDeleteIcon","showDeleteIconInternalState","disabled","size","isFocused","placeholder","autocomplete","maxlength","handleInput","query","inputElement","ifxInput","emit","handleDelete","handleOutsideClick","event","path","composedPath","includes","valueWatcher","newValue","focusInput","focus","componentDidLoad","isNestedInIfxComponent","el","framework","detectFramework","trackComponent","componentWillUpdate","render","h","key","class","getWrapperClassNames","tabindex","onFocus","onClick","icon","ref","type","onInput","getSizeClass","classNames"],"sources":["src/components/search-field/search-field.scss?tag=ifx-search-field&encapsulation=shadow","src/components/search-field/search-field.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: flex;\n}\n\n.search-field {\n  box-sizing: border-box;\n  background-color: tokens.$ifxColorBaseWhite;\n  width: 100%;\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n\n\n  .search-field__wrapper {\n    box-sizing: border-box;\n    height: tokens.$ifxSize500;\n    display: flex;\n    align-items: center;\n    border: 1px solid #8D8786;\n    border-radius: tokens.$ifxBorderRadius12;\n    padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\n    gap: tokens.$ifxSpace150;\n    flex: none;\n    order: 0;\n    align-self: stretch;\n    flex-grow: 0;\n    position: relative;\n    width: 100%;\n    outline: none;\n    color: tokens.$ifxColorEngineering400;\n\n    &.focused {\n      border: 1px solid tokens.$ifxColorOcean500;\n\n      & ifx-icon {\n        color: tokens.$ifxColorEngineering500;\n      }\n    }\n\n    &.search-field__wrapper-s {\n      height: 36px;\n    }\n\n\n    &:hover:not(.focused, :focus) {\n      border: 1px solid #3C3A39;\n    }\n\n    &:focus {\n      outline: none;\n      border: 1px solid #0A8276;\n    }\n\n\n    .delete-icon {\n      right: 12px;\n      cursor: pointer;\n    }\n\n    input[type='text'] {\n      font-style: normal;\n      font-weight: 400;\n      font-size: 16px;\n      //line-height: 24px;\n      color: #8D8786;\n      border: none;\n      width: 100%;\n      outline: none;\n      //height: 100%;\n      height: 16px;\n\n      &:focus {\n        outline: none;\n        color: #1d1d1d;\n      }\n\n      &:disabled {\n        background-color: #EEEDED;\n      }\n    }\n\n    &:has(input[disabled]) {\n      background-color: #EEEDED;\n    }\n  }\n}","import { Component, EventEmitter, h, Event, Prop, Watch, State, Listen, Element } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking'; \nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\nimport classNames from 'classnames';\n\n@Component({\n  tag: 'ifx-search-field',\n  styleUrl: 'search-field.scss',\n  shadow: true\n})\n\n\nexport class SearchField {\n  @Element() el;\n  private inputElement: HTMLInputElement;\n  @Prop({ mutable: true }) value: string = '';\n\n  @Event() ifxInput: EventEmitter<String>;\n  @State() insideDropdown: boolean = false;\n\n  @Prop() showDeleteIcon: boolean = false;\n  @State() showDeleteIconInternalState: boolean = false;\n  @Prop() disabled: boolean = false;\n  @Prop() size: string = 'l';\n  @State() isFocused: boolean = false;\n  @Prop() placeholder: string = \"Search...\";\n  @Prop() autocomplete: string = \"on\";\n  @Prop() maxlength?: number = null;  \n\n  @Listen('mousedown', { target: 'document' })\n  handleOutsideClick(event: MouseEvent) {\n    const path = event.composedPath();\n    if (!path.includes(this.inputElement)) {\n      this.isFocused = false;\n    }\n  }\n\n  @Watch('value')\n  valueWatcher(newValue: string) {\n    if (newValue !== this.inputElement.value) {\n      this.inputElement.value = newValue;\n    }\n  }\n\n\n  handleInput = () => {\n    const query = this.inputElement.value;\n    this.value = query; // update the value property when input changes\n    this.ifxInput.emit(this.value);\n  };\n\n  handleDelete = () => {\n    this.inputElement.value = '';\n    this.value = \"\";\n    this.ifxInput.emit(this.value);\n  }\n\n  focusInput() {\n    this.inputElement.focus();\n    this.isFocused = true;\n  }\n\n  componentDidLoad() { \n    if(!isNestedInIfxComponent(this.el)) { \n      const framework = detectFramework();\n      trackComponent('ifx-search-field', framework)\n    }\n  }\n  \n  componentWillUpdate() {\n    if (this.value !== \"\") {\n      this.showDeleteIconInternalState = true;\n    } else this.showDeleteIconInternalState = false;\n  }\n\n  render() {\n    return (\n      <div aria-label=\"a search field for user input\" aria-disabled={this.disabled} aria-value={this.value} class='search-field'>\n        <div class={this.getWrapperClassNames()}\n          tabindex={1}\n          onFocus={() => this.focusInput()}\n          onClick={() => this.focusInput()}\n        >\n          <ifx-icon icon=\"search-16\" class=\"search-icon\"></ifx-icon>\n          <input\n            ref={(el) => (this.inputElement = el)}\n            type=\"text\"\n            autocomplete={this.autocomplete}\n            onInput={() => this.handleInput()}\n            placeholder={this.placeholder}\n            disabled={this.disabled}\n            maxlength={this.maxlength}\n            value={this.value} // bind the value property to input element\n          />\n          {this.showDeleteIcon && this.showDeleteIconInternalState ? (\n            <ifx-icon icon=\"cRemove16\" class=\"delete-icon\" onClick={this.handleDelete}>\n            </ifx-icon>\n          ) : null}\n        </div>\n      </div>\n    );\n  }\n\n  getSizeClass() {\n    return `${this.size}` === \"s\"\n      ? \"search-field__wrapper-s\"\n      : \"\";\n  }\n\n\n  getWrapperClassNames() {\n    return classNames(\n      `search-field__wrapper`,\n      `search-field__wrapper ${this.getSizeClass()}`,\n      `${this.isFocused ? 'focused' : \"\"}`\n    );\n  }\n}"],"mappings":"4KAAA,MAAMA,EAAiB,m0CACvB,MAAAC,EAAeD,E,MCYFE,EAAW,MAPxB,WAAAC,CAAAC,G,6CAU2BC,KAAAC,MAAgB,GAGhCD,KAAAE,eAA0B,MAE3BF,KAAAG,eAA0B,MACzBH,KAAAI,4BAAuC,MACxCJ,KAAAK,SAAoB,MACpBL,KAAAM,KAAe,IACdN,KAAAO,UAAqB,MACtBP,KAAAQ,YAAsB,YACtBR,KAAAS,aAAuB,KACvBT,KAAAU,UAAqB,KAkB7BV,KAAAW,YAAc,KACZ,MAAMC,EAAQZ,KAAKa,aAAaZ,MAChCD,KAAKC,MAAQW,EACbZ,KAAKc,SAASC,KAAKf,KAAKC,MAAM,EAGhCD,KAAAgB,aAAe,KACbhB,KAAKa,aAAaZ,MAAQ,GAC1BD,KAAKC,MAAQ,GACbD,KAAKc,SAASC,KAAKf,KAAKC,MAAM,C,CAxBhC,kBAAAgB,CAAmBC,GACjB,MAAMC,EAAOD,EAAME,eACnB,IAAKD,EAAKE,SAASrB,KAAKa,cAAe,CACrCb,KAAKO,UAAY,K,EAKrB,YAAAe,CAAaC,GACX,GAAIA,IAAavB,KAAKa,aAAaZ,MAAO,CACxCD,KAAKa,aAAaZ,MAAQsB,C,EAiB9B,UAAAC,GACExB,KAAKa,aAAaY,QAClBzB,KAAKO,UAAY,I,CAGnB,gBAAAmB,GACE,IAAIC,EAAuB3B,KAAK4B,IAAK,CACnC,MAAMC,EAAYC,IAClBC,EAAe,mBAAoBF,E,EAIvC,mBAAAG,GACE,GAAIhC,KAAKC,QAAU,GAAI,CACrBD,KAAKI,4BAA8B,I,MAC9BJ,KAAKI,4BAA8B,K,CAG5C,MAAA6B,GACE,OACEC,EAAA,OAAAC,IAAA,wDAAgB,gCAA+B,gBAAgBnC,KAAKK,SAAQ,aAAcL,KAAKC,MAAOmC,MAAM,gBAC1GF,EAAA,OAAAC,IAAA,2CAAKC,MAAOpC,KAAKqC,uBACfC,SAAU,EACVC,QAAS,IAAMvC,KAAKwB,aACpBgB,QAAS,IAAMxC,KAAKwB,cAEpBU,EAAA,YAAAC,IAAA,2CAAUM,KAAK,YAAYL,MAAM,gBACjCF,EAAA,SAAAC,IAAA,2CACEO,IAAMd,GAAQ5B,KAAKa,aAAee,EAClCe,KAAK,OACLlC,aAAcT,KAAKS,aACnBmC,QAAS,IAAM5C,KAAKW,cACpBH,YAAaR,KAAKQ,YAClBH,SAAUL,KAAKK,SACfK,UAAWV,KAAKU,UAChBT,MAAOD,KAAKC,QAEbD,KAAKG,gBAAkBH,KAAKI,4BAC3B8B,EAAA,YAAUO,KAAK,YAAYL,MAAM,cAAcI,QAASxC,KAAKgB,eAE3D,M,CAMZ,YAAA6B,GACE,MAAO,GAAG7C,KAAKM,SAAW,IACtB,0BACA,E,CAIN,oBAAA+B,GACE,OAAOS,EACL,wBACA,yBAAyB9C,KAAK6C,iBAC9B,GAAG7C,KAAKO,UAAY,UAAY,K","ignoreList":[]}

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

@@ -1,2 +0,0 @@
-import{r as e,c as a,h as t,g as s}from"./p-b7a462e5.js";import{d as i,t as l}from"./p-ee75a0aa.js";import{i as r}from"./p-1ecafb97.js";const o=':host{display:block}.tree-view{font-family:var(--ifx-font-family, sans-serif);font-size:14px;color:var(--ifx-color-text, #1a1a1a);display:flex;flex-wrap:wrap;flex-direction:column;overflow-x:auto;overflow-y:hidden}.tree-view__label{font:600 1.125rem/1.625rem "Source Sans 3";margin-bottom:8px}';const n=o;const d=class{constructor(t){e(this,t);this.ifxTreeViewExpandAllChange=a(this,"ifxTreeViewExpandAllChange",7);this.ifxTreeViewDisableAllChange=a(this,"ifxTreeViewDisableAllChange",7);this.disableAllItems=false;this.expandAllItems=false;this.handleSlotRef=e=>{if(e){if(this.disableAllItems){e.setAttribute("data-disable-all-items","true")}else{e.removeAttribute("data-disable-all-items")}if(this.expandAllItems){e.setAttribute("data-expand-all-items","true")}else{e.removeAttribute("data-expand-all-items")}}}}handleExpandAllItemsChange(e){this.ifxTreeViewExpandAllChange.emit(e)}handleDisableAllItemsChange(e){this.ifxTreeViewDisableAllChange.emit(e)}componentDidLoad(){if(!r(this.el)){const e=i();l("ifx-tree-view",e)}}render(){return t("div",{key:"e4d29cb89c55645d37778ab486af7e2908110e0c",class:`tree-view ${this.disableAllItems?" tree-view--disabled":""}`,role:"tree","aria-label":this.ariaLabel},this.label&&this.label.trim()!==""&&t("div",{key:"27e98feeac5cc4bf328a16cbe2b7bff4901c364c",class:"tree-view__label"},this.label),t("slot",{key:"0ddc9bca33f3b3ea10dc5d76b78583aeb159593a",ref:this.handleSlotRef}))}get el(){return s(this)}static get watchers(){return{expandAllItems:["handleExpandAllItemsChange"],disableAllItems:["handleDisableAllItemsChange"]}}};d.style=n;export{d as ifx_tree_view};
-//# sourceMappingURL=p-6443b13f.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["treeViewCss","IfxTreeViewStyle0","TreeView","constructor","hostRef","this","disableAllItems","expandAllItems","handleSlotRef","el","setAttribute","removeAttribute","handleExpandAllItemsChange","newValue","ifxTreeViewExpandAllChange","emit","handleDisableAllItemsChange","ifxTreeViewDisableAllChange","componentDidLoad","isNestedInIfxComponent","framework","detectFramework","trackComponent","render","h","key","class","role","ariaLabel","label","trim","ref"],"sources":["src/components/tree-view/tree-view.scss?tag=ifx-tree-view&encapsulation=shadow","src/components/tree-view/tree-view.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host {\n  display: block;\n}\n\n.tree-view {\n  font-family: var(--ifx-font-family, sans-serif);\n  font-size: 14px;\n  color: var(--ifx-color-text, #1a1a1a);\n\n  display: flex;\n  flex-wrap: wrap;\n  flex-direction: column;\n  overflow-x: auto;\n  overflow-y: hidden;\n\n  &__label {\n    font: tokens.$ifxHeadingHeading06;\n    margin-bottom: tokens.$ifxSpace100;\n  }\n}\n","import { Component, h, Prop, Event, EventEmitter, Watch, Element } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n  tag: 'ifx-tree-view',\n  styleUrl: 'tree-view.scss',\n  shadow: true,\n})\nexport class TreeView {\n  @Element() el: HTMLElement;\n  @Prop() label?: string;\n  @Prop() disableAllItems: boolean = false;\n  @Prop() expandAllItems: boolean = false;\n  @Prop() ariaLabel: string | null;\n\n  @Event() ifxTreeViewExpandAllChange: EventEmitter<boolean>;\n  @Event() ifxTreeViewDisableAllChange: EventEmitter<boolean>;\n\n  @Watch('expandAllItems')\n  handleExpandAllItemsChange(newValue: boolean) {\n    this.ifxTreeViewExpandAllChange.emit(newValue);\n  }\n\n  @Watch('disableAllItems')\n  handleDisableAllItemsChange(newValue: boolean) {\n    this.ifxTreeViewDisableAllChange.emit(newValue);\n  }\n\n  private handleSlotRef = (el: HTMLSlotElement | null) => {\n    if (el) {\n      if (this.disableAllItems) {\n        el.setAttribute('data-disable-all-items', 'true');\n      } else {\n        el.removeAttribute('data-disable-all-items');\n      }\n      if (this.expandAllItems) {\n        el.setAttribute('data-expand-all-items', 'true');\n      } else {\n        el.removeAttribute('data-expand-all-items');\n      }\n    }\n  };\n\n  componentDidLoad() { \n    if(!isNestedInIfxComponent(this.el)) { \n      const framework = detectFramework();\n      trackComponent('ifx-tree-view', framework)\n    }\n  }\n\n  render() {\n    return (\n      <div\n        class={`tree-view ${this.disableAllItems ? ' tree-view--disabled' : ''}`}\n        role=\"tree\"\n        aria-label={this.ariaLabel}\n      >\n        {this.label && this.label.trim() !== '' && <div class=\"tree-view__label\">{this.label}</div>}\n        <slot ref={this.handleSlotRef}></slot>\n      </div>\n    );\n  }\n}\n"],"mappings":"wIAAA,MAAMA,EAAc,wSACpB,MAAAC,EAAeD,E,MCSFE,EAAQ,MALrB,WAAAC,CAAAC,G,0JAQUC,KAAAC,gBAA2B,MAC3BD,KAAAE,eAA0B,MAgB1BF,KAAAG,cAAiBC,IACvB,GAAIA,EAAI,CACN,GAAIJ,KAAKC,gBAAiB,CACxBG,EAAGC,aAAa,yBAA0B,O,KACrC,CACLD,EAAGE,gBAAgB,yB,CAErB,GAAIN,KAAKE,eAAgB,CACvBE,EAAGC,aAAa,wBAAyB,O,KACpC,CACLD,EAAGE,gBAAgB,wB,IAnBzB,0BAAAC,CAA2BC,GACzBR,KAAKS,2BAA2BC,KAAKF,E,CAIvC,2BAAAG,CAA4BH,GAC1BR,KAAKY,4BAA4BF,KAAKF,E,CAkBxC,gBAAAK,GACE,IAAIC,EAAuBd,KAAKI,IAAK,CACnC,MAAMW,EAAYC,IAClBC,EAAe,gBAAiBF,E,EAIpC,MAAAG,GACE,OACEC,EAAA,OAAAC,IAAA,2CACEC,MAAO,aAAarB,KAAKC,gBAAkB,uBAAyB,KACpEqB,KAAK,OAAM,aACCtB,KAAKuB,WAEhBvB,KAAKwB,OAASxB,KAAKwB,MAAMC,SAAW,IAAMN,EAAA,OAAAC,IAAA,2CAAKC,MAAM,oBAAoBrB,KAAKwB,OAC/EL,EAAA,QAAAC,IAAA,2CAAMM,IAAK1B,KAAKG,gB","ignoreList":[]}

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

@@ -1,2 +0,0 @@
-import{r as t,h as o,g as i}from"./p-b7a462e5.js";import{d as a,t as r}from"./p-ee75a0aa.js";import{i as e}from"./p-1ecafb97.js";const n=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}.radio-button-group-container{display:flex;flex-direction:column}.radio-button-group{display:flex;font-family:var(--ifx-font-family);gap:8px}.radio-button-group.horizontal{flex-direction:row;column-gap:12px}.radio-button-group.vertical{flex-direction:column;row-gap:12px}.group-label{font:400 0.75rem/1rem "Source Sans 3";margin-bottom:8px;text-align:left;text-underline-position:from-font;text-decoration-skip-ink:none}.caption{margin-top:8px;align-self:flex-start;display:flex;width:100%;column-gap:8px;justify-content:space-between;align-items:center}.caption.default{color:#1D1D1D}.caption.error{color:#CD002F}.caption-text{font:400 0.75rem/1rem "Source Sans 3";flex:1;text-align:left;text-underline-position:from-font;text-decoration-skip-ink:none}.caption-icon{flex:0;display:flex}';const s=n;const c=class{constructor(o){t(this,o);this.errorStates=new Map;this.alignment="vertical";this.groupLabelText="Group Label Text";this.hasErrors=false;this.handleSlotChange=()=>{this.initializeState()}}handleRadioButtonError(t){const o=t.target;if(o.tagName==="ifx-radio-button"){this.errorStates.set(o,t.detail);this.updateHasErrors()}}async setGroupError(t){const o=Array.from(this.el.querySelectorAll("ifx-radio-button"));o.forEach((o=>{o.error=t}))}componentWillLoad(){this.initializeState()}componentDidLoad(){if(!e(this.el)){const t=a();r("ifx-radio-button-group",t)}}initializeState(){this.errorStates.clear();const t=Array.from(this.el.querySelectorAll("ifx-radio-button"));t.forEach((t=>{if(!this.errorStates.has(t)){this.errorStates.set(t,t.error||false)}}));this.updateHasErrors()}updateHasErrors(){this.hasErrors=Array.from(this.errorStates.values()).some((t=>t))}render(){return o("div",{key:"5afb3bffc5b5521746ce4c5e870d1a4318f356b4",class:"radio-button-group-container"},this.showGroupLabel?o("div",{class:"group-label"},this.groupLabelText," *"):"",o("div",{key:"eda425f6a519859ad6035d85e140707e58320a25",class:`radio-button-group ${this.alignment} ${this.size}`},o("slot",{key:"1765676d85f6e0d0422c702b2f26005b2c18b192",onSlotchange:this.handleSlotChange})),this.showCaption?o("div",{class:`caption ${this.hasErrors?"error":"default"}`},this.showCaptionIcon?o("div",{class:"caption-icon"},o("ifx-icon",{icon:"c-info-16"})):"",o("div",{class:"caption-text"},this.captionText)):"")}static get formAssociated(){return true}get el(){return i(this)}};c.style=s;export{c as ifx_radio_button_group};
-//# sourceMappingURL=p-72b4c7af.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["radioButtonGroupCss","IfxRadioButtonGroupStyle0","RadioButtonGroup","constructor","hostRef","this","errorStates","Map","alignment","groupLabelText","hasErrors","handleSlotChange","initializeState","handleRadioButtonError","event","radioButton","target","tagName","set","detail","updateHasErrors","setGroupError","error","radioButtons","Array","from","el","querySelectorAll","forEach","componentWillLoad","componentDidLoad","isNestedInIfxComponent","framework","detectFramework","trackComponent","clear","has","values","some","render","h","key","class","showGroupLabel","size","onSlotchange","showCaption","showCaptionIcon","icon","captionText"],"sources":["src/components/radio-button-group/radio-button-group.scss?tag=ifx-radio-button-group&encapsulation=shadow","src/components/radio-button-group/radio-button-group.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n.radio-button-group-container {\n    display: flex;\n    flex-direction: column;\n}\n\n.radio-button-group {\n    display: flex;\n    font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n    gap: tokens.$ifxSpace100;\n\n    &.horizontal {\n        flex-direction: row;\n        column-gap: tokens.$ifxSpace150;\n    }\n\n    &.vertical {\n        flex-direction: column;\n        row-gap: tokens.$ifxSpace150;\n    }\n}\n\n.group-label {\n    font: tokens.$ifxBodyBody05;\n    margin-bottom: tokens.$ifxSpace100;\n    text-align: left;\n    text-underline-position: from-font;\n    text-decoration-skip-ink: none;\n}\n\n.caption {\n    margin-top: tokens.$ifxSpace100;\n    align-self: flex-start;\n    display: flex;\n    width: 100%;\n    column-gap: tokens.$ifxSpace100;\n    justify-content: space-between;\n    align-items: center;\n\n    &.default {\n        color: tokens.$ifxColorBaseBlack;\n    }\n\n    &.error {\n        color: tokens.$ifxColorRed500;\n    }\n}\n\n.caption-text {\n    font: tokens.$ifxBodyBody05;\n    flex: 1;\n    text-align: left;\n    text-underline-position: from-font;\n    text-decoration-skip-ink: none;\n}\n\n.caption-icon {\n    flex:0;\n    display: flex;\n}","import { Component, State, Prop, h, Element, Listen, Method } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n    tag: 'ifx-radio-button-group',\n    styleUrl: 'radio-button-group.scss',\n    shadow: true,\n    formAssociated: true\n})\n\nexport class RadioButtonGroup {\n    private errorStates: Map<HTMLElement, boolean> = new Map();\n\n    @Element() el: HTMLElement;\n    @Prop() alignment: 'horizontal' | 'vertical' = 'vertical';\n    @Prop() size: string;\n    @Prop() showGroupLabel: boolean;\n    @Prop() groupLabelText: string = 'Group Label Text';\n    @Prop() showCaption: boolean;\n    @Prop() captionText: string;\n    @Prop() showCaptionIcon: boolean;\n    @State() hasErrors: boolean = false;\n    \n    @Listen('ifxError')\n    handleRadioButtonError(event: CustomEvent) {\n        const radioButton = event.target as HTMLElement;\n        if (radioButton.tagName === 'ifx-radio-button') {\n            this.errorStates.set(radioButton, event.detail);\n            this.updateHasErrors();\n        }\n    }\n\n     // Method to set the error state of all radio-butttons in the group\n      @Method()\n      async setGroupError(error: boolean) {\n        const radioButtons = Array.from(this.el.querySelectorAll('ifx-radio-button'));\n        radioButtons.forEach((radioButton) => {\n          (radioButton as any).error = error;\n        });\n      }\n\n    componentWillLoad() {\n        this.initializeState();\n    }\n\n    componentDidLoad() { \n        if(!isNestedInIfxComponent(this.el)) { \n            const framework = detectFramework();\n            trackComponent('ifx-radio-button-group', framework)\n        }\n    }\n\n    handleSlotChange = () => {\n        this.initializeState();\n    };\n\n    private initializeState() {\n        this.errorStates.clear();\n        const radioButtons = Array.from(this.el.querySelectorAll('ifx-radio-button'));\n        radioButtons.forEach((radioButton) => {\n            if (!this.errorStates.has(radioButton)) {\n                this.errorStates.set(radioButton, (radioButton as any).error || false);\n            }\n        });\n        this.updateHasErrors();\n    }\n\n    private updateHasErrors() {\n        this.hasErrors = Array.from(this.errorStates.values()).some((error) => error);\n    }\n\n    render() {\n        return (\n            <div class='radio-button-group-container'>\n                {this.showGroupLabel ? <div class='group-label'>{this.groupLabelText} *</div> : ''}\n                <div class={`radio-button-group ${this.alignment} ${this.size}`}>\n                    <slot onSlotchange={this.handleSlotChange} ></slot>\n                </div>\n                {this.showCaption ? (\n                    <div class={`caption ${this.hasErrors ? 'error' : 'default'}`}>\n                        {this.showCaptionIcon ? <div class='caption-icon'><ifx-icon icon=\"c-info-16\">\n                        </ifx-icon></div> : ''}\n                        <div class='caption-text'>{this.captionText}</div>\n                    </div>) : ''}\n            </div>\n        );\n    }\n}"],"mappings":"iIAAA,MAAMA,EAAsB,m1BAC5B,MAAAC,EAAeD,E,MCWFE,EAAgB,MAP7B,WAAAC,CAAAC,G,UAQYC,KAAAC,YAAyC,IAAIC,IAG7CF,KAAAG,UAAuC,WAGvCH,KAAAI,eAAyB,mBAIxBJ,KAAAK,UAAqB,MA+B9BL,KAAAM,iBAAmB,KACfN,KAAKO,iBAAiB,C,CA7B1B,sBAAAC,CAAuBC,GACnB,MAAMC,EAAcD,EAAME,OAC1B,GAAID,EAAYE,UAAY,mBAAoB,CAC5CZ,KAAKC,YAAYY,IAAIH,EAAaD,EAAMK,QACxCd,KAAKe,iB,EAMX,mBAAMC,CAAcC,GAClB,MAAMC,EAAeC,MAAMC,KAAKpB,KAAKqB,GAAGC,iBAAiB,qBACzDJ,EAAaK,SAASb,IACnBA,EAAoBO,MAAQA,CAAK,G,CAIxC,iBAAAO,GACIxB,KAAKO,iB,CAGT,gBAAAkB,GACI,IAAIC,EAAuB1B,KAAKqB,IAAK,CACjC,MAAMM,EAAYC,IAClBC,EAAe,yBAA0BF,E,EAQzC,eAAApB,GACJP,KAAKC,YAAY6B,QACjB,MAAMZ,EAAeC,MAAMC,KAAKpB,KAAKqB,GAAGC,iBAAiB,qBACzDJ,EAAaK,SAASb,IAClB,IAAKV,KAAKC,YAAY8B,IAAIrB,GAAc,CACpCV,KAAKC,YAAYY,IAAIH,EAAcA,EAAoBO,OAAS,M,KAGxEjB,KAAKe,iB,CAGD,eAAAA,GACJf,KAAKK,UAAYc,MAAMC,KAAKpB,KAAKC,YAAY+B,UAAUC,MAAMhB,GAAUA,G,CAG3E,MAAAiB,GACI,OACIC,EAAA,OAAAC,IAAA,2CAAKC,MAAM,gCACNrC,KAAKsC,eAAiBH,EAAA,OAAKE,MAAM,eAAerC,KAAKI,eAAc,MAAY,GAChF+B,EAAA,OAAAC,IAAA,2CAAKC,MAAO,sBAAsBrC,KAAKG,aAAaH,KAAKuC,QACrDJ,EAAA,QAAAC,IAAA,2CAAMI,aAAcxC,KAAKM,oBAE5BN,KAAKyC,YACFN,EAAA,OAAKE,MAAO,WAAWrC,KAAKK,UAAY,QAAU,aAC7CL,KAAK0C,gBAAkBP,EAAA,OAAKE,MAAM,gBAAeF,EAAA,YAAUQ,KAAK,eAC7C,GACpBR,EAAA,OAAKE,MAAM,gBAAgBrC,KAAK4C,cAC1B,G","ignoreList":[]}

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

@@ -1,2 +0,0 @@
-import{r as e,h as a,g as i}from"./p-b7a462e5.js";import{d as o,t}from"./p-ee75a0aa.js";import{i as r}from"./p-1ecafb97.js";const s=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}:host{display:inline-flex}.badge__container{display:inline-flex;justify-content:center;align-items:center;padding:4px 8px;gap:8px;border:1px solid #EEEDED;background-color:#EEEDED;border-radius:100px;font-family:var(--ifx-font-family);font-size:0.875rem;line-height:1.25rem;font-weight:400;color:#1D1D1D}';const n=s;const f=class{constructor(a){e(this,a)}componentDidLoad(){if(!r(this.el)){const e=o();t("ifx-badge",e)}}render(){return a("div",{key:"047c02190f5e251bada583ca9d33d74b1bf49282",class:"badge__container"},a("slot",{key:"1dbeb7f434fb60301957e842b9499929e1ec56ab"}))}get el(){return i(this)}};f.style=n;export{f as ifx_badge};
-//# sourceMappingURL=p-7761c8c4.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["badgeCss","IfxBadgeStyle0","Badge","componentDidLoad","isNestedInIfxComponent","this","el","framework","detectFramework","trackComponent","render","h","key","class"],"sources":["src/components/badge/badge.scss?tag=ifx-badge&encapsulation=shadow","src/components/badge/badge.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: inline-flex;\n}\n\n.badge__container {\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  padding: 4px 8px;\n  gap: tokens.$ifxSpace100;\n  border: 1px solid tokens.$ifxColorEngineering200;\n  background-color: tokens.$ifxColorEngineering200;\n  border-radius: 100px;\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n  font-size: tokens.$ifxFontSizeS;\n  line-height: tokens.$ifxLineHeightS;\n  font-weight: 400;\n  color: tokens.$ifxColorBaseBlack;\n}","import { Component, h, Element } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n  tag: 'ifx-badge',\n  styleUrl: 'badge.scss',\n  shadow: true\n})\nexport class Badge {\n  @Element() el: HTMLElement;\n\n   componentDidLoad() { \n    if(!isNestedInIfxComponent(this.el)) { \n      const framework = detectFramework();\n      trackComponent('ifx-badge', framework)\n    }\n  }\n\n  render() {\n    return (\n      <div class=\"badge__container\">\n        <slot />\n      </div>\n    );\n  }\n}"],"mappings":"4HAAA,MAAMA,EAAW,gXACjB,MAAAC,EAAeD,E,MCSFE,EAAK,M,yBAGf,gBAAAC,GACC,IAAIC,EAAuBC,KAAKC,IAAK,CACnC,MAAMC,EAAYC,IAClBC,EAAe,YAAaF,E,EAIhC,MAAAG,GACE,OACEC,EAAA,OAAAC,IAAA,2CAAKC,MAAM,oBACTF,EAAA,QAAAC,IAAA,6C","ignoreList":[]}

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

@@ -1,2 +0,0 @@
-import{r as e,c as t,h as r,g as i}from"./p-b7a462e5.js";import{d as a,t as o}from"./p-ee75a0aa.js";import{i as s}from"./p-1ecafb97.js";const l=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}:host{display:block}.alert__info-wrapper{display:flex;padding:16px 24px;font-family:var(--ifx-font-family);box-shadow:0px 6px 9px 0px rgba(29, 29, 29, 0.1019607843)}.alert__info-wrapper .info__text-wrapper{display:flex;flex-direction:column;gap:8px;width:100%}.alert__info-wrapper .info__text-wrapper .info__headline-wrapper{display:-webkit-box;-webkit-line-clamp:1;line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.alert__info-wrapper .info__text-wrapper .info__headline-wrapper,.alert__info-wrapper .info__text-wrapper .info__description-wrapper{color:#1D1D1D;font-size:16px;font-style:normal;font-weight:600;line-height:24px}.alert__info-wrapper .info__text-wrapper .info__headline-wrapper ::slotted(p),.alert__info-wrapper .info__text-wrapper .info__description-wrapper ::slotted(p){padding:0;margin:0}.alert__info-wrapper .info__text-wrapper .info__description-wrapper{font-weight:400}.alert__info-wrapper .close-icon-wrapper{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start}.alert__info-wrapper .close-icon-wrapper button{all:unset;display:flex;align-items:center;justify-content:center;line-height:0;color:#1D1D1D;height:24px;width:24px}.alert__info-wrapper .close-icon-wrapper button:focus{outline:2px solid #0A8276;outline-offset:2px}.alert{display:flex;border:1px solid #0A8276;border-radius:1px;color:#1D1D1D;background-color:#FFFFFF;font-family:var(--ifx-font-family);box-shadow:0px 6px 9px 0px rgba(29, 29, 29, 0.1019607843)}.alert .close-icon-wrapper{display:flex;align-items:center;justify-content:center;min-width:40px}.alert .close-icon-wrapper button{all:unset;display:flex;align-items:center;justify-content:center;line-height:0;color:#1D1D1D;height:24px;width:24px}.alert .close-icon-wrapper button:focus{outline:2px solid #0A8276;outline-offset:2px}.alert .icon-wrapper{position:relative;min-width:48px;display:flex;justify-content:center;align-items:center;background-color:#0A8276}.alert .alert-text{font-size:16px;width:100%;padding:12px 0px 12px 12px;color:#1D1D1D;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;}.alert.primary{border:1px solid #0A8276}.alert.primary .icon-wrapper{background-color:#0A8276;color:#FFFFFF}.alert.success{border:1px solid #4CA460}.alert.success .icon-wrapper{background-color:#4CA460;color:#FFFFFF}.alert.danger{border:1px solid #CD002F}.alert.danger .icon-wrapper{background-color:#CD002F;color:#FFFFFF}.alert.warning{border:1px solid #E16B25}.alert.warning .icon-wrapper{background-color:#E16B25;color:#FFFFFF}.close-icon-wrapper ifx-icon:hover{cursor:pointer}';const n=l;const p=class{constructor(r){e(this,r);this.ifxClose=t(this,"ifxClose",7);this.variant="primary";this.closable=true;this.AriaLive="assertive";this.alertTypeDescription={primary:"Neutral alert",success:"Success Alert",danger:"Error Alert",warning:"Warning Alert",info:"Neutral alert"}}handleClose(){this.ifxClose.emit()}renderCloseButton(){return r("div",{class:"close-icon-wrapper"},r("button",{onClick:this.handleClose.bind(this),"aria-label":"Dismiss alert"},r("ifx-icon",{icon:"cross-16"})))}generateUniqueId(e="id"){return`${e}-${Math.random().toString(36).substring(2,9)}`}componentWillLoad(){if(!this.uniqueId){this.uniqueId=this.generateUniqueId("alert")}}componentDidLoad(){if(!s(this.el)){const e=a();o("ifx-alert",e)}}render(){return this.variant==="info"?r("div",{class:"alert__info-wrapper",role:"alert","aria-live":this.AriaLive,"aria-describedby":this.alertTypeDescription[this.variant],"aria-labelledby":"alert-text alert-description"},r("div",{class:"info__text-wrapper"},r("div",{class:"info__headline-wrapper"},r("slot",{name:"headline"})),r("div",{id:`alert-description-${this.uniqueId}`,class:"info__description-wrapper"},r("slot",{name:"desc"}))),this.closable?this.renderCloseButton():null):r("div",{class:`alert ${this.variant}`,role:"alert"},this.icon&&r("div",{class:"icon-wrapper"},r("ifx-icon",{icon:this.icon})),r("div",{class:"alert-text",id:`alert-text-${this.uniqueId}`},r("slot",null)),this.closable?this.renderCloseButton():null)}get el(){return i(this)}};p.style=n;const c=".react__template-wrapper{display:flex;width:300px;height:200px;border-radius:3px;border:1px solid #ccc}.react__template-wrapper.hide{display:none}.react__template-wrapper:hover{cursor:pointer}.template__page-wrapper{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}.template__page-wrapper .repository__url{text-decoration:none}.input__fields-wrapper{display:flex;flex-direction:column;gap:10px}.details__wrapper{display:flex;flex-direction:column;gap:10px}.selection__buttons-wrapper{display:flex;gap:10px;padding-top:10px;align-items:center}.selection__buttons-wrapper .vue__label{color:#ccc}.selection__buttons-wrapper label:not(.vue__label):hover{cursor:pointer}.selection__buttons-wrapper .selection__input{display:flex;align-items:center;gap:5px}.selection__buttons-wrapper .selection__input input{margin:0;height:20px;width:20px}.selection__buttons-wrapper .selection__input input:hover:not(.vue__input){cursor:pointer}.image__wrapper img{position:relative;width:300px;height:100%;border-radius:3px;object-fit:contain;transition:transform 0.2s}.image__wrapper img:hover{transform:scale(2);top:50px;z-index:100}";const d=c;const h=class{constructor(r){e(this,r);this.toggleTemplates=t(this,"toggleTemplates",7);this.fieldError=t(this,"fieldError",7);this.repoDetails={name:"",desc:"",framework:""};this.showDetails=false;this.isTemplatePage=false;this.isLoading=true;this.clientId="Ov23lixmXiNTTNb6V5W6";this.redirectUri="https://infineon.github.io/infineon-design-system-stencil/?path=/docs/dds-templates--development";this.scope="repo workflow";this.state="template123"}authUser(){const e=`https://github.com/login/oauth/authorize?`+`client_id=${this.clientId}&`+`redirect_uri=${this.redirectUri}&`+`scope=${this.scope}&`+`state=${this.state}`;window.open(e,"_blank")}componentDidLoad(){const e=new URL(window.location.href);const t=e.searchParams.get("code");const{templateName:r}=this.getLocalStorageValues();if(t&&this.name===r){this.isTemplatePage=true;this.toggleTemplates.emit("details");this.getUserToken(t)}}getLocalStorageValues(){const e=localStorage.getItem("repo_name");const t=localStorage.getItem("repo_desc");const r=localStorage.getItem("repo_framework");const i=localStorage.getItem("selectedTemplate");return{repoName:e,repoDesc:t,repoFramework:r,templateName:i}}async getUserToken(e){const{repoName:t,repoDesc:r,repoFramework:i,templateName:a}=this.getLocalStorageValues();fetch(`https://ddstemplate-srv.cfapps.eu10-004.hana.ondemand.com/token/${e}/${t}/${r}/${i}/${a}`).then((e=>{if(e.ok){return e.text()}else{return e.text().then((e=>{throw new Error(e)}))}})).then((e=>{if(e){this.isLoading=false;this.repoUrl=e;localStorage.clear()}})).catch((e=>{this.repoError=e.message;console.error("Error:",e.message)}))}handleUserInput(e,t){if(t==="name"){this.repoDetails=Object.assign(Object.assign({},this.repoDetails),{name:e.target.value})}else if(t==="desc"){this.repoDetails=Object.assign(Object.assign({},this.repoDetails),{desc:e.target.value})}else if(t==="framework"){this.repoDetails=Object.assign(Object.assign({},this.repoDetails),{framework:e.target.value})}}submitUserData(){if(this.repoDetails.name&&this.repoDetails.desc&&this.repoDetails.framework){localStorage.setItem("repo_name",this.repoDetails.name);localStorage.setItem("repo_desc",this.repoDetails.desc);localStorage.setItem("repo_framework",this.repoDetails.framework);localStorage.setItem("selectedTemplate",this.name);this.fieldError.emit(false);this.authUser()}else{this.fieldError.emit("All fields are mandatory")}}togglePadding(e){let t=this.el.parentElement;if(t){const r=t.getRootNode();if(r instanceof ShadowRoot){t=r.host.parentElement}else{t=t.parentElement}if(e==="remove"){t.parentElement.style.padding="0px"}else if(e==="add"){t.parentElement.style.padding="4rem 20px"}}}handleCurrentTemplate(e){if(e&&!this.showDetails){this.togglePadding("remove");const t=e.currentTarget;this.toggleTemplates.emit(t);this.showDetails=true}}async toggleTemplate(e){const t=this.el.shadowRoot.querySelector(".react__template-wrapper");if(t){if(!t.classList.contains("hide")&&e){if(t!==e){t.classList.add("hide")}}else{if(this.showDetails){this.showDetails=false}this.togglePadding("add");t.classList.remove("hide")}}}render(){return r("div",{key:"a6433871f9175e0616c40389d0a39a94797d67b3"},this.isTemplatePage?r("div",{class:"template__page-wrapper"},!this.repoUrl&&!this.repoError&&r("div",null,r("h3",null,"Your repository is getting ready.."),r("p",null,"This will only take a minute.")),this.isLoading&&!this.repoError&&r("div",null,r("ifx-spinner",{variant:"default",size:"s"})),this.repoUrl&&r("ifx-link",{href:this.repoUrl,target:"_parent",size:"m",variant:"underlined"},"Your repository"),this.repoError&&r("div",null,this.repoError)):r("div",{class:"react__template-container"},r("div",{class:"react__template-wrapper",onClick:e=>this.handleCurrentTemplate(e)},r("div",{class:"image__wrapper"},r("img",{src:this.thumbnail}))),this.showDetails&&r("div",{class:"details__wrapper"},r("div",{class:"selection__buttons-wrapper"},r("div",{class:"selection__input"},r("input",{type:"radio",id:"react",name:"chosen_framework",value:"react",onInput:e=>this.handleUserInput(e,"framework")}),r("label",{htmlFor:"react"},"React")),r("div",{class:"selection__input vue"},r("input",{class:"vue__input",disabled:true,type:"radio",id:"vue",name:"chosen_framework",value:"vue",onInput:e=>this.handleUserInput(e,"framework")}),r("label",{class:"vue__label",htmlFor:"vue"},"Vue")," (Soon)")),r("div",{class:"input__fields-wrapper"},r("ifx-text-field",{required:true,onInput:e=>this.handleUserInput(e,"name"),size:"m",icon:"c-info-16",placeholder:"Your repository name"},"Repository Name"),r("ifx-text-field",{required:true,size:"m",icon:"c-info-16",onInput:e=>this.handleUserInput(e,"desc"),placeholder:"Your repository description"},"Repository Description"),r("ifx-button",{fullWidth:true,onClick:()=>this.submitUserData(),variant:"primary"},"Generate template")))))}get el(){return i(this)}};h.style=d;export{p as ifx_alert,h as ifx_template};
-//# sourceMappingURL=p-7fe80204.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["alertCss","IfxAlertStyle0","Alert","constructor","hostRef","this","variant","closable","AriaLive","alertTypeDescription","primary","success","danger","warning","info","handleClose","ifxClose","emit","renderCloseButton","h","class","onClick","bind","icon","generateUniqueId","prefix","Math","random","toString","substring","componentWillLoad","uniqueId","componentDidLoad","isNestedInIfxComponent","el","framework","detectFramework","trackComponent","render","role","name","id","templateCss","IfxTemplateStyle0","Template","repoDetails","desc","showDetails","isTemplatePage","isLoading","clientId","redirectUri","scope","state","authUser","authorizationUrl","window","open","url","URL","location","href","code","searchParams","get","templateName","getLocalStorageValues","toggleTemplates","getUserToken","repoName","localStorage","getItem","repoDesc","repoFramework","authCode","fetch","then","response","ok","text","errorMessage","Error","data","repoUrl","clear","catch","error","repoError","message","console","handleUserInput","e","type","Object","assign","target","value","submitUserData","setItem","fieldError","togglePadding","action","parent","parentElement","rootNode","getRootNode","ShadowRoot","host","style","padding","handleCurrentTemplate","targetTemplate","currentTarget","toggleTemplate","currTemp","templateWrapper","shadowRoot","querySelector","classList","contains","add","remove","key","size","src","thumbnail","onInput","htmlFor","disabled","required","placeholder","fullWidth"],"sources":["src/components/alert/alert.scss?tag=ifx-alert&encapsulation=shadow","src/components/alert/alert.tsx","src/components/templates/template/template.scss?tag=ifx-template&encapsulation=shadow","src/components/templates/template/template.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: block;\n}\n\n.alert__info-wrapper {\n  display: flex;\n  padding: 16px 24px;\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n  box-shadow: 0px 6px 9px 0px #1D1D1D1A;\n\n  & .info__text-wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: tokens.$ifxSpace100;\n    width: 100%;\n\n    & .info__headline-wrapper {\n      display: -webkit-box;\n      -webkit-line-clamp: 1;\n      line-clamp: 1;\n      -webkit-box-orient: vertical;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    & .info__headline-wrapper,\n    .info__description-wrapper {\n      color: #1D1D1D;\n      font-size: 16px;\n      font-style: normal;\n      font-weight: 600;\n      line-height: 24px;\n\n      ::slotted(p) {\n        padding: 0;\n        margin: 0;\n      }\n    }\n\n    & .info__description-wrapper {\n      font-weight: 400;\n    }\n  }\n\n  & .close-icon-wrapper {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    justify-content: flex-start;\n    //min-width: tokens.$ifxSize500;\n\n    & button {\n      all: unset;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      line-height: 0;\n      color: tokens.$ifxColorBaseBlack;\n      height: tokens.$ifxSize300;\n      width: tokens.$ifxSize300;\n\n\n      &:focus {\n        outline: 2px solid tokens.$ifxColorOcean500;\n        outline-offset: 2px;\n      }\n    }\n  }\n}\n\n.alert {\n  display: flex;\n  border: 1px solid tokens.$ifxColorOcean500;\n  border-radius: tokens.$ifxBorderRadius12;\n  color: tokens.$ifxColorBaseBlack;\n  background-color: tokens.$ifxColorBaseWhite;\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n  box-shadow: 0px 6px 9px 0px #1D1D1D1A;\n\n\n  & .close-icon-wrapper {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-width: tokens.$ifxSize500;\n\n    & button {\n      all: unset;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      line-height: 0;\n      color: tokens.$ifxColorBaseBlack;\n      height: tokens.$ifxSize300;\n      width: tokens.$ifxSize300;\n\n      &:focus {\n        outline: 2px solid tokens.$ifxColorOcean500;\n        outline-offset: 2px;\n      }\n    }\n  }\n\n  & .icon-wrapper {\n    position: relative;\n    min-width: tokens.$ifxSize600;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    background-color: tokens.$ifxColorOcean500;\n  }\n\n  & .alert-text {\n    font-size: 16px;\n    width: 100%;\n    padding: 12px 0px 12px 12px;\n    color: tokens.$ifxColorBaseBlack;\n\n    white-space: pre-wrap;\n    /* wraps text at spaces and within words */\n    word-wrap: break-word;\n    /* breaks text within a word if necessary */\n    overflow-wrap: anywhere;\n    /* breaks text at arbitrary points when needed */\n  }\n\n  &.primary {\n    border: 1px solid tokens.$ifxColorOcean500;\n\n    & .icon-wrapper {\n      background-color: tokens.$ifxColorOcean500;\n      color: tokens.$ifxColorBaseWhite;\n    }\n  }\n\n  &.success {\n    border: 1px solid tokens.$ifxColorGreen500;\n\n    & .icon-wrapper {\n      background-color: tokens.$ifxColorGreen500;\n      color: tokens.$ifxColorBaseWhite;\n    }\n  }\n\n  &.danger {\n    border: 1px solid tokens.$ifxColorRed500;\n\n    & .icon-wrapper {\n      background-color: tokens.$ifxColorRed500;\n      color: tokens.$ifxColorBaseWhite;\n    }\n  }\n\n  &.warning {\n    border: 1px solid tokens.$ifxColorOrange500;\n\n    & .icon-wrapper {\n      background-color: tokens.$ifxColorOrange500;\n      color: tokens.$ifxColorBaseWhite;\n    }\n  }\n}\n\n.close-icon-wrapper {\n  & ifx-icon {\n    &:hover {\n      cursor: pointer;\n    }\n  }\n}","import { Component, Prop, h, Event, EventEmitter, State, Element } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n  tag: 'ifx-alert',\n  styleUrl: 'alert.scss',\n  shadow: true,\n})\nexport class Alert {\n  @Element() el: HTMLElement;\n  @Prop() variant: 'primary' | 'success' | 'danger' | 'warning' | 'info' = 'primary';\n  @Prop() icon: string;\n  @Event() ifxClose: EventEmitter;\n  @Prop() closable: boolean = true;\n  @Prop() AriaLive = 'assertive';\n  @State() uniqueId: string;\n\n  alertTypeDescription = {\n    \"primary\": 'Neutral alert',\n    \"success\": 'Success Alert',\n    \"danger\": 'Error Alert',\n    \"warning\": 'Warning Alert',\n    \"info\": 'Neutral alert',\n  };\n\n  handleClose() {\n    this.ifxClose.emit();\n  }\n\n  renderCloseButton() {\n    return (\n      <div class=\"close-icon-wrapper\">\n        <button onClick={this.handleClose.bind(this)} aria-label=\"Dismiss alert\">\n          <ifx-icon icon=\"cross-16\" />\n        </button>\n      </div>\n    );\n  }\n\n  generateUniqueId(prefix = 'id') {\n    return `${prefix}-${Math.random().toString(36).substring(2, 9)}`;\n  }\n\n  componentWillLoad() { \n    if (!this.uniqueId) {\n      this.uniqueId = this.generateUniqueId('alert');\n    }\n  }\n\n  componentDidLoad() { \n    if(!isNestedInIfxComponent(this.el)) {\n      const framework = detectFramework();\n      trackComponent('ifx-alert', framework);\n    }\n  }\n\n  render() {\n    return this.variant === 'info' ? (\n      <div class=\"alert__info-wrapper\" role=\"alert\" aria-live={this.AriaLive} aria-describedby={this.alertTypeDescription[this.variant]} aria-labelledby=\"alert-text alert-description\">\n        <div class=\"info__text-wrapper\">\n          <div class=\"info__headline-wrapper\">\n            <slot name=\"headline\" />\n          </div>\n          <div id={`alert-description-${this.uniqueId}`} class=\"info__description-wrapper\">\n            <slot name=\"desc\" />\n          </div>\n        </div>\n        {this.closable ? this.renderCloseButton() : null}\n      </div>\n    ) : (\n      <div class={`alert ${this.variant}`} role=\"alert\">\n        {this.icon && (\n          <div class=\"icon-wrapper\">\n            <ifx-icon icon={this.icon} />\n          </div>\n        )}\n        <div class=\"alert-text\" id={`alert-text-${this.uniqueId}`}>\n          <slot />\n        </div>\n        {this.closable ? this.renderCloseButton() : null}\n      </div>\n    );\n  }\n}\n","\n.react__template-wrapper { \n  display: flex;\n  width: 300px;\n  height: 200px;\n  border-radius: 3px;\n  border: 1px solid #ccc;\n\n  &.hide { \n    display: none;\n  }\n  \n  &:hover { \n    cursor: pointer;\n  }\n}\n\n.template__page-wrapper {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  text-align: center;\n\n  & .repository__url { \n    text-decoration: none;\n  }\n}\n\n.input__fields-wrapper { \n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n\n}\n\n.details__wrapper { \n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n\n.selection__buttons-wrapper { \n  display: flex;\n  gap: 10px;\n  padding-top: 10px;\n  align-items: center;\n  & .vue__label { \n    color: #ccc;\n  }\n\n  & label:not(.vue__label) { \n    &:hover { \n      cursor: pointer;\n    }\n  }\n\n  & .selection__input { \n    display: flex;\n    align-items: center;\n    gap: 5px;\n    & input { \n      margin: 0;\n      height: 20px;\n      width: 20px;\n      &:hover:not(.vue__input) { \n        cursor: pointer;\n      }\n    }\n  }\n}\n\n.image__wrapper { \n  img { \n    position: relative;\n    width: 300px;\n    height: 100%;\n    border-radius: 3px;\n    object-fit: contain;\n    transition: transform .2s;\n    &:hover { \n      transform: scale(2);\n      top: 50px;\n      z-index: 100;\n    }\n  }\n}","import { Component, h, Element, State, Prop, Event, EventEmitter, Method } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-template',\n  styleUrl: 'template.scss',\n  shadow: true,\n})\nexport class Template {\n  @Element() el: HTMLElement;\n  @State() repoDetails: { name: string, desc: string, framework: string } = { name: \"\", desc: \"\", framework: \"\" };\n  @State() repoUrl: string;\n  @State() showDetails: boolean = false;\n  @State() isTemplatePage: boolean = false;\n  @State() isLoading: boolean = true;\n  @State() repoError: string;\n  @Prop() name: string;\n  @Event() toggleTemplates: EventEmitter;\n  @Event() fieldError: EventEmitter;\n  @Prop() thumbnail: string;\n  \n  private clientId = 'Ov23lixmXiNTTNb6V5W6'\n  private redirectUri = 'https://infineon.github.io/infineon-design-system-stencil/?path=/docs/dds-templates--development';\n  private scope = 'repo workflow'\n  private state = 'template123'\n\n  authUser() { \n    const authorizationUrl = `https://github.com/login/oauth/authorize?` +\n      `client_id=${this.clientId}&` +\n      `redirect_uri=${this.redirectUri}&` +\n      `scope=${this.scope}&` +\n      `state=${this.state}`;\n    \n      window.open(authorizationUrl, '_blank'); \n  }\n\n  componentDidLoad() { \n    const url = new URL(window.location.href);\n    const code = url.searchParams.get('code');\n    const { templateName } = this.getLocalStorageValues()\n    if(code && this.name === templateName) { \n      this.isTemplatePage = true;\n      this.toggleTemplates.emit('details')\n      this.getUserToken(code)\n    } \n  }\n\n  getLocalStorageValues() { \n    const repoName = localStorage.getItem('repo_name');\n    const repoDesc = localStorage.getItem('repo_desc');\n    const repoFramework = localStorage.getItem('repo_framework');\n    const templateName = localStorage.getItem('selectedTemplate');\n    return { repoName, repoDesc, repoFramework, templateName }\n  }\n\n  async getUserToken(authCode) {\n    const { repoName, repoDesc, repoFramework, templateName } = this.getLocalStorageValues();\n\n    fetch(`https://ddstemplate-srv.cfapps.eu10-004.hana.ondemand.com/token/${authCode}/${repoName}/${repoDesc}/${repoFramework}/${templateName}`)\n    .then(response => {\n      if (response.ok) {\n        return response.text();\n      } else {\n        return response.text().then(errorMessage => {\n          throw new Error(errorMessage);\n        });\n      }\n    })\n    .then(data => { \n      if(data) { \n        this.isLoading = false;\n        this.repoUrl = data;\n        localStorage.clear();\n      } \n    })\n    .catch(error => {\n      this.repoError = error.message;\n      console.error('Error:', error.message)\n    });\n  }\n\n  handleUserInput(e, type) { \n    if (type === 'name') {\n      this.repoDetails = { ...this.repoDetails, name: e.target.value };\n    } else if (type === 'desc') {\n      this.repoDetails = { ...this.repoDetails, desc: e.target.value };\n    } else if(type === 'framework') { \n      this.repoDetails = { ...this.repoDetails, framework: e.target.value };\n    }\n  }\n\n  submitUserData() { \n    if(this.repoDetails.name && this.repoDetails.desc && this.repoDetails.framework) { \n      localStorage.setItem('repo_name', this.repoDetails.name);\n      localStorage.setItem('repo_desc', this.repoDetails.desc);\n      localStorage.setItem('repo_framework', this.repoDetails.framework);\n      localStorage.setItem('selectedTemplate', this.name);\n      this.fieldError.emit(false)\n      this.authUser()\n    } else { \n      this.fieldError.emit('All fields are mandatory')\n    }\n  }\n\n  togglePadding(action) { \n    let parent = this.el.parentElement;\n    if (parent) {\n      const rootNode = parent.getRootNode();\n      if (rootNode instanceof ShadowRoot) {\n        parent = rootNode.host.parentElement;\n      } else {\n        parent = parent.parentElement;\n      }\n      if(action === 'remove') { \n        parent.parentElement.style.padding = '0px';\n      } else if(action === 'add') { \n        parent.parentElement.style.padding = '4rem 20px';\n      }\n    }\n  }\n\n  handleCurrentTemplate(e) { \n    if(e && !this.showDetails) { \n      this.togglePadding('remove')\n      const targetTemplate = e.currentTarget;\n      this.toggleTemplates.emit(targetTemplate)\n      this.showDetails = true;\n    } \n  }\n\n  @Method()\n  async toggleTemplate(currTemp) { \n    const templateWrapper = this.el.shadowRoot.querySelector('.react__template-wrapper');\n    if(templateWrapper) { \n      if(!templateWrapper.classList.contains('hide') && currTemp ) { \n        if(templateWrapper !== currTemp) {\n          templateWrapper.classList.add('hide')\n        }\n      } else { \n        if(this.showDetails) { \n          this.showDetails = false;\n        }\n        this.togglePadding('add')\n        templateWrapper.classList.remove('hide')\n      }\n    }\n  }\n\n \n  render() {\n      return (\n        <div>\n          {this.isTemplatePage \n          ? \n          <div class=\"template__page-wrapper\">\n            {!this.repoUrl && !this.repoError && \n            <div>\n              <h3>Your repository is getting ready..</h3>\n              <p>This will only take a minute.</p>\n            </div>}\n            {this.isLoading && !this.repoError && <div><ifx-spinner variant='default' size='s' /></div>}\n            {this.repoUrl && <ifx-link href={this.repoUrl} target=\"_parent\" size=\"m\" variant=\"underlined\">Your repository</ifx-link>}\n            {this.repoError && <div>{this.repoError}</div>}\n          </div> \n          : \n          <div class=\"react__template-container\">\n              <div class=\"react__template-wrapper\" onClick={(e) => this.handleCurrentTemplate(e)}>\n                <div class=\"image__wrapper\">\n                  <img src={this.thumbnail} />\n                </div>\n              </div>\n            {this.showDetails && \n            <div class=\"details__wrapper\">\n              <div class=\"selection__buttons-wrapper\">\n                <div class=\"selection__input\">\n                  <input type=\"radio\" id=\"react\" name=\"chosen_framework\" value=\"react\" onInput={(e) => this.handleUserInput(e, 'framework')}  />\n                  <label htmlFor=\"react\">React</label>\n                </div>\n                <div class=\"selection__input vue\">\n                  <input class=\"vue__input\" disabled type=\"radio\" id=\"vue\" name=\"chosen_framework\" value=\"vue\" onInput={(e) => this.handleUserInput(e, 'framework')}/>\n                  <label class=\"vue__label\" htmlFor=\"vue\">Vue</label> (Soon)\n                </div>\n              </div>\n           \n\n              <div class=\"input__fields-wrapper\">\n                <ifx-text-field required={true} onInput={(e) => this.handleUserInput(e, 'name')} size=\"m\" icon=\"c-info-16\" placeholder=\"Your repository name\">Repository Name</ifx-text-field>\n\n                <ifx-text-field required={true} size=\"m\" icon=\"c-info-16\" onInput={(e) => this.handleUserInput(e, 'desc')} placeholder=\"Your repository description\">Repository Description</ifx-text-field>\n\n                <ifx-button fullWidth={true} onClick={() => this.submitUserData()} variant='primary'>Generate template</ifx-button>\n              </div>\n              \n            </div>}\n          </div>}\n        </div>\n      );\n  }\n}"],"mappings":"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","ignoreList":[]}