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

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

@@ -1 +0,0 @@
-{"version":3,"names":["notificationCss","Notification","constructor","hostRef","this","variant","linkTarget","componentDidLoad","isNestedInIfxComponent","el","framework","detectFramework","trackComponent","getClassName","render","h","Host","key","class","icon","linkText","linkHref","href","target"],"sources":["src/components/notification/notification.scss?tag=ifx-notification&encapsulation=shadow","src/components/notification/notification.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n@use \"../../global/font.scss\";\r\n\r\n.ifx-notification__wrapper {\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n\r\n  padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\r\n\r\n  background-color: tokens.$ifxColorBaseWhite;\r\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\r\n\r\n\r\n  color: tokens.$ifxColorBaseBlack;\r\n\r\n  border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorEngineering200;\r\n\r\n  &.ifx-notification__wrapper--success {\r\n    border-left: tokens.$ifxBorderWidth50 solid tokens.$ifxColorGreen500;\r\n\r\n    & .ifx-notification__icon {\r\n      color: tokens.$ifxColorGreen500;\r\n    }\r\n  }\r\n\r\n  &.ifx-notification__wrapper--locked {\r\n    border-left: tokens.$ifxBorderWidth50 solid tokens.$ifxColorOrange500;\r\n\r\n    & .ifx-notification__icon {\r\n      color: tokens.$ifxColorOrange500;\r\n    }\r\n  }\r\n\r\n  &.ifx-notification__wrapper--error {\r\n    border-left: tokens.$ifxBorderWidth50 solid tokens.$ifxColorRed500;\r\n\r\n    & .ifx-notification__icon {\r\n      color: tokens.$ifxColorRed500;\r\n    }\r\n  }\r\n\r\n  &.ifx-notification__wrapper--neutral{\r\n    border-left: tokens.$ifxBorderWidth50 solid tokens.$ifxColorOcean500;\r\n\r\n    & .ifx-notification__icon {\r\n      color: tokens.$ifxColorOcean500;\r\n    }\r\n  }\r\n\r\n  & .ifx-notification__icon {\r\n    margin-right: tokens.$ifxSpace100;\r\n    display: flex;\r\n    align-self: center;\r\n  }\r\n\r\n  & .ifx-notification__body {\r\n    display: flex;\r\n    flex-direction: row;\r\n    flex-grow: 1;\r\n    font-size: tokens.$ifxFontSizeS;\r\n\r\n    & .ifx-notification__slot {\r\n      flex-grow: 1;\r\n      display: inline-flex;\r\n      align-items: center;\r\n    }\r\n  }\r\n\r\n  & .ifx-notification__link {\r\n    font-size: tokens.$ifxFontSizeS;\r\n  }\r\n\r\n  @media (max-width: tokens.$ifxBreakpointXs) {\r\n    & .ifx-notification__icon {\r\n      align-self: flex-start;\r\n    }\r\n\r\n    & .ifx-notification__body {\r\n      flex-direction: column;\r\n    }\r\n\r\n    & .ifx-notification__link {\r\n      margin-top: tokens.$ifxSpace100;\r\n    }\r\n  }\r\n}","import { Component, h, Host, Prop, Element } from '@stencil/core';\r\nimport { trackComponent } from '../../global/utils/tracking';\r\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\r\nimport { detectFramework } from '../../global/utils/framework-detection';\r\nexport type NotificationVariant = 'success' | 'locked' | 'error' | 'neutral';\r\n\r\n@Component({\r\n  tag: 'ifx-notification',\r\n  styleUrl: 'notification.scss',\r\n  shadow: true\r\n})\r\nexport class Notification {\r\n  @Element() el;\r\n  @Prop() icon: string;\r\n  @Prop() variant: NotificationVariant = 'success';\r\n  @Prop() linkText: string; \r\n  @Prop() linkHref: string;\r\n  @Prop() linkTarget: string = '_blank';\r\n\r\n  async componentDidLoad() { \r\n    if(!isNestedInIfxComponent(this.el)) { \r\n      const framework = detectFramework();\r\n      trackComponent('ifx-notification', await framework)\r\n    }\r\n  }\r\n\r\n  private getClassName(): string {\r\n    switch (this.variant) {\r\n      case 'success':\r\n        return 'ifx-notification__wrapper--success';\r\n      case 'locked':\r\n        return 'ifx-notification__wrapper--locked';\r\n      case 'error':\r\n        return 'ifx-notification__wrapper--error';\r\n      case 'neutral':\r\n        return 'ifx-notification__wrapper--neutral';\r\n      default:\r\n        return 'ifx-notification__wrapper--success';\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <div class={\"ifx-notification__wrapper \" + this.getClassName()}>\r\n          <div class=\"ifx-notification__icon\">\r\n            <ifx-icon icon={this.icon}></ifx-icon>\r\n          </div>\r\n          <div class=\"ifx-notification__body\">\r\n            <div class=\"ifx-notification__slot\">\r\n              <slot/>\r\n            </div>\r\n            { this.linkText && this.linkHref && \r\n            <div class=\"ifx-notification__link\">\r\n              <ifx-link href={this.linkHref} target={this.linkTarget}>\r\n                {this.linkText}<ifx-icon icon=\"arrow-right-16\">\r\n              </ifx-icon>\r\n              </ifx-link>\r\n            </div>\r\n          }\r\n          </div>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}"],"mappings":"mIAAA,MAAMA,EAAkB,ooD,MCWXC,EAAY,MALzB,WAAAC,CAAAC,G,UAQUC,KAAOC,QAAwB,UAG/BD,KAAUE,WAAW,QAgD9B,CA9CC,sBAAMC,GACJ,IAAIC,EAAuBJ,KAAKK,IAAK,CACnC,MAAMC,EAAYC,IAClBC,EAAe,yBAA0BF,E,EAIrC,YAAAG,GACN,OAAQT,KAAKC,SACX,IAAK,UACH,MAAO,qCACT,IAAK,SACH,MAAO,oCACT,IAAK,QACH,MAAO,mCACT,IAAK,UACH,MAAO,qCACT,QACE,MAAO,qC,CAIb,MAAAS,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAO,6BAA+Bd,KAAKS,gBAC9CE,EAAK,OAAAE,IAAA,2CAAAC,MAAM,0BACTH,EAAA,YAAAE,IAAA,2CAAUE,KAAMf,KAAKe,QAEvBJ,EAAK,OAAAE,IAAA,2CAAAC,MAAM,0BACTH,EAAK,OAAAE,IAAA,2CAAAC,MAAM,0BACTH,EAAA,QAAAE,IAAA,8CAEAb,KAAKgB,UAAYhB,KAAKiB,UACxBN,EAAK,OAAAE,IAAA,2CAAAC,MAAM,0BACTH,EAAU,YAAAE,IAAA,2CAAAK,KAAMlB,KAAKiB,SAAUE,OAAQnB,KAAKE,YACzCF,KAAKgB,SAASL,EAAU,YAAAE,IAAA,2CAAAE,KAAK,uB","ignoreList":[]}

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

@@ -1 +0,0 @@
-{"version":3,"names":["accordionCss","Accordion","constructor","hostRef","this","autoCollapse","componentDidLoad","isNestedInIfxComponent","el","framework","detectFramework","trackComponent","onItemOpen","event","items","Array","from","querySelectorAll","item","itemElement","target","open","render","h","key","class","accordionItemCss","AccordionItem","AriaLevel","internalOpen","componentWillLoad","checkSlotContent","openAccordionItem","contentEl","shadowRoot","querySelector","attachResizeObserver","componentDidUpdate","openChanged","newValue","toggleOpen","ifxOpen","emit","isOpen","ifxClose","isClosed","style","height","scrollHeight","overflow","getInnerContentWrapper","innerContentEl","resizeObserver","ResizeObserver","observe","handleKeydown","ev","path","composedPath","includes","titleEl","preventDefault","slot","hasContent","assignedNodes","length","innerContent","classList","add","contains","remove","role","onClick","tabindex","ref","String","icon","id","caption"],"sources":["src/components/accordion/accordion.scss?tag=ifx-accordion&encapsulation=shadow","src/components/accordion/accordion.tsx","src/components/accordion/accordionItem.scss?tag=ifx-accordion-item&encapsulation=shadow","src/components/accordion/accordionItem.tsx"],"sourcesContent":["// ifxAccordion.scss\r\n@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n@use \"../../global/font.scss\";\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n.accordion-wrapper {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: tokens.$ifxSpace100;\r\n  font-family:  var(--ifx-font-family) // tokens.$ifxFontFamilyBody;\r\n}","import { Component, h, Listen, Element, Prop } from '@stencil/core';\r\nimport { trackComponent } from '../../global/utils/tracking';\r\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\r\nimport { detectFramework } from '../../global/utils/framework-detection';\r\n\r\n@Component({\r\n  tag: 'ifx-accordion',\r\n  styleUrl: 'accordion.scss',\r\n  shadow: { delegatesFocus: true },\r\n})\r\nexport class Accordion {\r\n  @Element() el: HTMLElement;\r\n  @Prop() autoCollapse: boolean = false;\r\n\r\n  async componentDidLoad() { \r\n    if(!isNestedInIfxComponent(this.el)) { \r\n      const framework = detectFramework();\r\n      trackComponent('ifx-accordion', await framework)\r\n    }\r\n  }\r\n\r\n  @Listen('ifxOpen')\r\n  async onItemOpen(event: CustomEvent) {\r\n    if (this.autoCollapse) {\r\n      const items = Array.from(this.el.querySelectorAll('ifx-accordion-item'));\r\n      for (const item of items) {\r\n        const itemElement = item as HTMLIfxAccordionItemElement;\r\n        if (itemElement !== event.target && (await itemElement.open)) {\r\n          itemElement.open = false;\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div class=\"accordion-wrapper\">\r\n        <slot />\r\n      </div>\r\n    );\r\n  }\r\n}\r\n","// ifxAccordionItem.scss\r\n@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n@use \"../../global/font.scss\";\r\n\r\n\r\n.accordion-item {\r\n  border-radius: 3px;\r\n  transition: all 0.3s;\r\n  font-family: var(--ifx-font-family) // tokens.$ifxFontFamilyBody;\r\n\r\n}\r\n\r\n.accordion-title:focus {\r\n  outline: none;\r\n}\r\n\r\n// workaround to add corner radius to outline\r\n.accordion-title:focus::after {\r\n  content: '';\r\n  display: block;\r\n  position: absolute;\r\n  top: -4px;\r\n  bottom: -4px;\r\n  left: -4px;\r\n  right: -4px;\r\n  border-radius: 5px;\r\n  border: 2px solid tokens.$ifxColorOcean500;\r\n  box-sizing: border-box;\r\n}\r\n\r\n.accordion-title:hover {\r\n  border: 1px solid tokens.$ifxColorEngineering200;\r\n  color: tokens.$ifxColorOcean600;\r\n}\r\n\r\n.accordion-title {\r\n  display: flex;\r\n  align-items: center;\r\n  position: relative;\r\n  padding: tokens.$ifxSpace150 tokens.$ifxSpace200;\r\n  gap: tokens.$ifxSpace150;\r\n  color: tokens.$ifxColorOcean500;\r\n  background-color: tokens.$ifxColorBaseWhite;\r\n  border: 1px solid tokens.$ifxColorEngineering200;\r\n  cursor: pointer;\r\n  margin: 4px 4px 0px;\r\n}\r\n\r\n.accordion-caption {\r\n  font-weight: tokens.$ifxFontWeightSemibold;\r\n  font-size: tokens.$ifxFontSizeL;\r\n}\r\n\r\n.accordion-content {\r\n  gap: tokens.$ifxSpace100;\r\n  overflow: hidden;\r\n  height: 0;\r\n  transition: height 0.3s ease;\r\n  line-height: 24px;\r\n  font-size: tokens.$ifxFontSizeM;\r\n  font-weight: 400;\r\n}\r\n\r\n.inner-content {\r\n  background-color: tokens.$ifxColorBaseWhite;\r\n  padding: tokens.$ifxSpace200;\r\n  word-wrap: break-word;\r\n  overflow-wrap: anywhere;\r\n  align-self: stretch;\r\n  margin: 0 4px 4px;\r\n  border: 1px solid transparent;\r\n  border-top: 1px solid transparent;\r\n}\r\n\r\n.accordion-icon {\r\n  font-weight: bold;\r\n  display: flex;\r\n  transition: transform 0.3s;\r\n\r\n  &:hover {\r\n    color: tokens.$ifxColorOcean600;\r\n\r\n  }\r\n}\r\n\r\n\r\n.accordion-item.open .accordion-content {\r\n  max-height: 1000px; // Arbitrary large value to allow content to expand\r\n}\r\n\r\n.accordion-item.open .accordion-icon {\r\n  transform: rotate(-180deg);\r\n}\r\n\r\n.accordion-item.open .inner-content {\r\n  border-color: tokens.$ifxColorEngineering200;\r\n  border-top-color: transparent;\r\n  transition: border-color 0s; \r\n}\r\n\r\n.accordion-item:not(.open) .inner-content {\r\n  transition: border-color 0s 0.3s; \r\n}\r\n\r\n.inner-content {\r\n  &.no-content { \r\n    border: none;\r\n    padding: 0;\r\n    margin: 0;\r\n  }\r\n}","//ifxAccordionItem\r\nimport { Component, Prop, h, State, Event, EventEmitter, Watch, Listen, Element } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'ifx-accordion-item',\r\n  styleUrl: 'accordionItem.scss',\r\n  shadow: true,\r\n})\r\nexport class AccordionItem {\r\n  @Element() el;\r\n  @Prop() caption: string;\r\n  @Prop({\r\n    mutable: true,\r\n  })\r\n  open: boolean = false;\r\n  @Prop() AriaLevel = 3;\r\n  @State() internalOpen: boolean = false;\r\n  @Event() ifxOpen: EventEmitter;\r\n  @Event() ifxClose: EventEmitter;\r\n  private contentEl!: HTMLElement;\r\n  private titleEl!: HTMLElement;\r\n  private resizeObserver!: ResizeObserver;\r\n\r\n  componentWillLoad() {\r\n    this.internalOpen = this.open;\r\n  }\r\n\r\n  componentDidLoad() {\r\n    this.checkSlotContent()\r\n    this.openAccordionItem();\r\n    this.contentEl = this.el.shadowRoot.querySelector('#accordion-content');\r\n    if (this.contentEl) {\r\n      this.attachResizeObserver();\r\n    }\r\n  }\r\n\r\n  componentDidUpdate() {\r\n    this.checkSlotContent()\r\n    this.openAccordionItem();\r\n  }\r\n\r\n  @Watch('open')\r\n  openChanged(newValue: boolean) {\r\n    this.internalOpen = newValue;\r\n  }\r\n\r\n  toggleOpen() {\r\n    this.internalOpen = !this.internalOpen;\r\n    this.open = this.internalOpen;\r\n\r\n    if (this.internalOpen) {\r\n      this.ifxOpen.emit({ isOpen: this.internalOpen });\r\n    } else {\r\n      this.ifxClose.emit({ isClosed: !this.internalOpen });\r\n    }\r\n  }\r\n\r\n  openAccordionItem() {\r\n    if (this.internalOpen) {\r\n      this.contentEl.style.height = `${this.contentEl.scrollHeight}px`;\r\n      this.contentEl.style.overflow = 'hidden';\r\n    } else {\r\n      this.contentEl.style.height = '0';\r\n      this.contentEl.style.overflow = 'hidden';\r\n    }\r\n  }\r\n\r\n  getInnerContentWrapper() {\r\n    const innerContentEl = this.el.shadowRoot.querySelector('.inner-content');\r\n    return innerContentEl;\r\n  }\r\n\r\n  attachResizeObserver() {\r\n    const innerContentEl = this.getInnerContentWrapper();\r\n\r\n    if (innerContentEl) {\r\n      this.resizeObserver = new ResizeObserver(() => {\r\n        if (this.internalOpen) {\r\n          this.openAccordionItem();\r\n        }\r\n      });\r\n\r\n      this.resizeObserver.observe(innerContentEl);\r\n    }\r\n  }\r\n\r\n  @Listen('keydown')\r\n  handleKeydown(ev: KeyboardEvent) {\r\n    const path = ev.composedPath();\r\n\r\n    if (!path.includes(this.titleEl)) {\r\n      return;\r\n    }\r\n\r\n    switch (ev.key) {\r\n      case 'Enter': // fallthrough\r\n      case ' ': // space\r\n        ev.preventDefault();\r\n        this.toggleOpen();\r\n        break;\r\n    }\r\n  }\r\n\r\n  checkSlotContent() {\r\n    const slot = this.el.shadowRoot.querySelector('slot') as HTMLSlotElement;\r\n    const hasContent = slot.assignedNodes().length > 0;\r\n    const innerContent = this.getInnerContentWrapper();\r\n    if (!hasContent) {\r\n      innerContent.classList.add('no-content');\r\n    } else if (innerContent.classList.contains('no-content')) {\r\n      innerContent.classList.remove('no-content');\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div class={`accordion-item ${this.internalOpen ? 'open' : ''}`}>\r\n        <div\r\n          role=\"button\"\r\n          aria-expanded={this.internalOpen}\r\n          aria-controls=\"accordion-content\"\r\n          class=\"accordion-title\"\r\n          onClick={() => this.toggleOpen()}\r\n          tabindex=\"0\"\r\n          ref={el => (this.titleEl = el as HTMLElement)}\r\n        >\r\n          <span aria-hidden=\"true\" role=\"heading\" aria-level={String(this.AriaLevel) as string} class=\"accordion-icon\">\r\n            <ifx-icon icon=\"chevron-down-16\" />\r\n          </span>\r\n          <span id=\"accordion-caption\" class=\"accordion-caption\">\r\n            {this.caption}\r\n          </span>\r\n        </div>\r\n        <div id=\"accordion-content\" class=\"accordion-content\" ref={el => (this.contentEl = el as HTMLElement)} role=\"region\" aria-labelledby=\"accordion-caption\">\r\n          <div class=\"inner-content\">\r\n            <slot />\r\n          </div>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,2 +0,0 @@
-import{r as e,h as i,a as t}from"./p-PqnYwNKt.js";const a=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}:host{pointer-events:none}.card__headline-wrapper{padding-bottom:16px}.card__headline-wrapper.withDesc{padding-bottom:8px}.card-headline{margin-top:0;padding-top:0;font-family:var(--ifx-font-family);font-weight:600;font-size:1.5rem;line-height:2rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.card-headline.horizontal{font-size:1.25rem;line-height:28px}';const o=class{constructor(i){e(this,i)}componentWillLoad(){var e;const i=this.el.closest("ifx-card");if(i){const t=(e=i.shadowRoot.querySelector(".card"))===null||e===void 0?void 0:e.className;if(t&&t.includes("horizontal")){this.direction="horizontal"}const a=i.querySelector("ifx-card-text");if(a){this.hasDesc=true}}}render(){return i("div",{key:"7b846b52f7e7670cddd83065b41b64a2de219474",class:`card__headline-wrapper ${this.hasDesc?"withDesc":""}`},i("div",{key:"048113ed2085a872f6aa31cc22fd721f3978752c",class:`card-headline ${this.direction}`},i("slot",{key:"8c82191f16af04d476a09a50b6208b01c109e41d"})))}get el(){return t(this)}};o.style=a;export{o as ifx_card_headline};
-//# sourceMappingURL=p-8872ee5c.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["cardHeadlineCss","CardHeadline","componentWillLoad","cardElement","this","el","closest","cardClass","_a","shadowRoot","querySelector","className","includes","direction","desc","hasDesc","render","h","key","class"],"sources":["src/components/card/card-headline/card-headline.scss?tag=ifx-card-headline&encapsulation=shadow","src/components/card/card-headline/card-headline.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n@use \"../../../global/font.scss\";\r\n\r\n:host {\r\n  pointer-events: none;\r\n}\r\n\r\n.card__headline-wrapper {\r\n  padding-bottom: 16px;\r\n\r\n  &.withDesc {\r\n    padding-bottom: 8px;\r\n  }\r\n}\r\n\r\n.card-headline {\r\n  margin-top: 0;\r\n  padding-top: 0;\r\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\r\n\r\n\r\n  font-weight: tokens.$ifxFontWeightSemibold;\r\n  font-size: tokens.$ifxFontSize3xl;\r\n  line-height: tokens.$ifxLineHeight3xl;\r\n  display: -webkit-box;\r\n  -webkit-line-clamp: 2;\r\n  -webkit-box-orient: vertical;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n\r\n  &.horizontal {\r\n    font-size: tokens.$ifxFontSizeXl;\r\n    line-height: 28px;\r\n  }\r\n\r\n}","import { Component, h, Element, State } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'ifx-card-headline',\r\n  styleUrl: 'card-headline.scss',\r\n  shadow: true,\r\n})\r\n\r\nexport class CardHeadline {\r\n  @Element() el;\r\n  @State() direction: string;\r\n  @State() hasDesc: boolean;\r\n\r\n  componentWillLoad() {\r\n    const cardElement = this.el.closest('ifx-card');\r\n\r\n    if (cardElement) {\r\n      const cardClass = cardElement.shadowRoot.querySelector('.card')?.className;\r\n\r\n      if (cardClass && cardClass.includes('horizontal')) {\r\n        this.direction = 'horizontal'\r\n      }\r\n\r\n      const desc = cardElement.querySelector('ifx-card-text');\r\n      if (desc) {\r\n        this.hasDesc = true;\r\n      }\r\n    }\r\n  }\r\n\r\n\r\n  render() {\r\n    return (\r\n      <div class={`card__headline-wrapper ${this.hasDesc ? 'withDesc' : \"\"}`}>\r\n        <div class={`card-headline ${this.direction}`}>\r\n          <slot />\r\n        </div>\r\n      </div>\r\n    )\r\n  }\r\n}\r\n"],"mappings":"kDAAA,MAAMA,EAAkB,ke,MCQXC,EAAY,M,yBAKvB,iBAAAC,G,MACE,MAAMC,EAAcC,KAAKC,GAAGC,QAAQ,YAEpC,GAAIH,EAAa,CACf,MAAMI,GAAYC,EAAAL,EAAYM,WAAWC,cAAc,YAAQ,MAAAF,SAAA,SAAAA,EAAEG,UAEjE,GAAIJ,GAAaA,EAAUK,SAAS,cAAe,CACjDR,KAAKS,UAAY,Y,CAGnB,MAAMC,EAAOX,EAAYO,cAAc,iBACvC,GAAII,EAAM,CACRV,KAAKW,QAAU,I,GAMrB,MAAAC,GACE,OACEC,EAAK,OAAAC,IAAA,2CAAAC,MAAO,0BAA0Bf,KAAKW,QAAU,WAAa,MAChEE,EAAA,OAAAC,IAAA,2CAAKC,MAAO,iBAAiBf,KAAKS,aAChCI,EAAQ,QAAAC,IAAA,8C","ignoreList":[]}

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

@@ -1 +0,0 @@
-{"version":3,"names":["CustomNoRowsOverlay","init","params","this","eGui","document","createElement","innerHTML","noRowsMessageFunc","getGui","refresh","_params","CustomLoadingOverlay","tableCss","Table","constructor","hostRef","columnDefs","rowData","rowHeight","tableHeight","variant","gridInitialized","componentWillLoad","uniqueKey","Math","floor","random","setColsAndRows","setGridOptions","gridOptions","headerHeight","defaultColDef","resizable","autoHeight","suppressCellFocus","enableCellTextSelection","suppressDragLeaveHidesColumns","suppressRowHoverHighlight","onFirstDataRendered","loadingOverlayComponent","noRowsOverlayComponent","noRowsOverlayComponentParams","Date","toLocaleTimeString","icons","sortAscending","sortDescending","sortUnSort","rowDragManaged","some","col","dndSource","animateRows","rows","cols","JSON","parse","err","console","error","Array","isArray","getRowData","getColData","api","sizeColumnsToFit","componentWillUpdate","gridApi","setGridOption","componentDidLoad","container","isNestedInIfxComponent","host","framework","detectFramework","trackComponent","createGrid","defaultMinWidth","getClassNames","classNames","getTableStyle","height","render","h","Host","key","id","class","style","ref","el"],"sources":["src/components/table-basic-version/customNoRowsOverlay.ts","src/components/table-basic-version/customLoadingOverlay.ts","src/components/table-basic-version/table.scss?tag=ifx-basic-table","src/components/table-basic-version/table.tsx"],"sourcesContent":["import { ICellRendererComp, ICellRendererParams } from 'ag-grid-community';\r\n\r\nexport class CustomNoRowsOverlay implements ICellRendererComp {\r\n  eGui!: HTMLElement;\r\n\r\n  init(params: ICellRendererParams & { noRowsMessageFunc: () => string }) {\r\n    this.eGui = document.createElement('div');\r\n    this.eGui.innerHTML = `\r\n            <div role=\"presentation\" class=\"ag-overlay-loading-center\" >\r\n               ${params.noRowsMessageFunc()}\r\n            </div>\r\n        `;\r\n  }\r\n\r\n  getGui() {\r\n    return this.eGui;\r\n  }\r\n\r\n  refresh(_params: ICellRendererParams): boolean {\r\n    return false;\r\n  }\r\n}","import { ICellRendererComp, ICellRendererParams } from 'ag-grid-community';\r\n\r\nexport class CustomLoadingOverlay implements ICellRendererComp {\r\n  eGui!: HTMLElement;\r\n\r\n  init(_params: ICellRendererParams & { loadingMessage: string }) {\r\n    this.eGui = document.createElement('div');\r\n    this.eGui.innerHTML = `<div class=\"ag-overlay-loading-center\" role=\"presentation\">\r\n<ifx-spinner></ifx-spinner>\r\n            </div>`;\r\n  }\r\n\r\n  getGui() {\r\n    return this.eGui;\r\n  }\r\n\r\n  refresh(_params: ICellRendererParams): boolean {\r\n    return false;\r\n  }\r\n}","@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n@use \"../../global/font.scss\";\r\n\r\n@import \"~ag-grid-community/styles/ag-grid.css\";\r\n// @import \"~ag-grid-community/styles/ag-theme-alpine.css\";\r\n\r\n// :host {\r\n//   --table-height: '200px';\r\n//   /* Default value */\r\n// } ag-ltr .ag-header-cell-resize\r\n\r\n.zebra {\r\n  & .ag-row-odd {\r\n    background-color: tokens.$ifxColorEngineering100!important;\r\n  }\r\n\r\n  & .ag-row {\r\n    border-bottom: none!important;\r\n  }\r\n}\r\n\r\n.ag-header-viewport {\r\n  background-color: tokens.$ifxColorEngineering200!important;\r\n}\r\n\r\n.table-wrapper {\r\n  overflow-x: auto;\r\n  width: 100%;\r\n}\r\n\r\n.table-wrapper .ag-root-wrapper-body {\r\n  height: auto !important;\r\n  min-height: 100px !important;\r\n  min-width: 100px;\r\n}\r\n\r\n.ifx-ag-grid {\r\n  display: grid;\r\n  height: 100%;\r\n  width: 100%;\r\n  min-width: 100px;\r\n  padding-bottom: tokens.$ifxSpace100;\r\n  overflow-x: auto;\r\n}\r\n\r\n\r\n.ifx-ag-grid .ag-header-cell::after {\r\n  outline: none !important;\r\n  border: none !important;\r\n  box-shadow: none !important;\r\n}\r\n\r\n.ifx-ag-grid .ag-header-cell:focus {\r\n  outline: none !important;\r\n}\r\n\r\n.ifx-ag-grid *:not(.ag-header-cell):focus {\r\n  outline: none;\r\n}\r\n\r\n.ifx-ag-grid .ag-header-cell:not(:last-child)::before {\r\n  content: '';\r\n  position: absolute;\r\n  right: 0;\r\n  top: calc(50% - 12px);\r\n  height: 24px;\r\n  width: 1px;\r\n  background-color: tokens.$ifxColorEngineering300;\r\n}\r\n\r\n.ag-overlay-loading-center {\r\n  border: none;\r\n  background: none;\r\n  border-radius: none;\r\n  box-shadow: none;\r\n}\r\n\r\n\r\n.ag-root-wrapper {\r\n  border: 1px solid tokens.$ifxColorEngineering200;\r\n}\r\n\r\n.ag-header {\r\n  background-color: tokens.$ifxColorEngineering100;\r\n  border-bottom: none;\r\n\r\n  &.ag-header-active {\r\n    outline: none !important;\r\n    border-color: #0A8276 !important;\r\n  }\r\n}\r\n\r\n.ag-header-cell {\r\n  padding-left: 16px;\r\n  padding-right: 16px;\r\n  gap: 4px;\r\n}\r\n\r\n\r\n.ag-header-cell-focus {\r\n  border: none !important;\r\n  outline: none !important;\r\n}\r\n\r\n.ag-header-cell-text {\r\n  font-size: 13px;\r\n  font-style: normal;\r\n  font-weight: 600;\r\n  line-height: 20px;\r\n  color: tokens.$ifxColorBaseBlack;\r\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\r\n\r\n\r\n\r\n}\r\n\r\n.ag-row-focus {\r\n  background-color: inherit !important;\r\n  /* Reset the hover color to the row's original color */\r\n}\r\n\r\n.ag-row-hover {\r\n  background-color: tokens.$ifxColorBaseWhite !important; //inherit !important;\r\n  /* Reset the hover color to the row's original color */\r\n}\r\n\r\n\r\n.ag-cell-focus {\r\n  border: none !important;\r\n  outline: none !important;\r\n  background-color: inherit !important;\r\n}\r\n\r\n\r\n\r\n.ag-row {\r\n  background-color: tokens.$ifxColorBaseWhite;\r\n  border-bottom: 1px solid tokens.$ifxColorEngineering200;\r\n  font-size: 13px;\r\n  font-style: normal;\r\n  font-weight: 400;\r\n  line-height: 20px;\r\n  z-index: 1; //ensure the stacking order when used inside js frameworks\r\n}\r\n\r\n.ag-row-odd {\r\n  background-color: tokens.$ifxColorBaseWhite;\r\n}\r\n\r\n.ag-cell {\r\n  display: flex;\r\n  padding-left: 16px;\r\n  padding-right: 16px;\r\n  white-space: pre-line;\r\n  min-height: 40px; \r\n  height: auto;\r\n}\r\n\r\n.ag-ltr .ag-sort-indicator-icon {\r\n  padding-left: 0px;\r\n  vertical-align: bottom;\r\n  line-height: 12px;\r\n}\r\n\r\n.unsort-icon-custom-color {\r\n  color: tokens.$ifxColorEngineering400;\r\n}\r\n\r\n// Mobile optimization for horizontal scrolling\r\n@media (max-width: tokens.$ifxBreakpointM) {\r\n  .table-wrapper {\r\n    overflow-x: auto;\r\n    -webkit-overflow-scrolling: touch;\r\n  }\r\n\r\n  .ifx-ag-grid {\r\n    min-width: 400px;\r\n  }\r\n\r\n  .ag-root-wrapper {\r\n    min-width: 100%;\r\n  }\r\n\r\n  .ag-header-cell,\r\n  .ag-cell {\r\n    min-width: 100px;\r\n    white-space: nowrap;\r\n  }\r\n\r\n  .table-wrapper {\r\n    margin-bottom: tokens.$ifxSpace200;\r\n  }\r\n}\r\n","import { Component, h, Element, Host, Prop, State } from '@stencil/core';\r\nimport { trackComponent } from '../../global/utils/tracking';\r\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\r\nimport { detectFramework } from '../../global/utils/framework-detection';\r\nimport { createGrid, FirstDataRenderedEvent, GridApi, GridOptions } from 'ag-grid-community';\r\nimport { CustomNoRowsOverlay } from './customNoRowsOverlay';\r\nimport { CustomLoadingOverlay } from './customLoadingOverlay';\r\nimport classNames from 'classnames';\r\n\r\n@Component({\r\n  tag: 'ifx-basic-table',\r\n  styleUrl: 'table.scss',\r\n  shadow: false // only works with shadowdom off because we are using an external library\r\n})\r\nexport class Table {\r\n  @State() gridOptions: GridOptions;\r\n  @Prop() cols: any[] | string;\r\n  @Prop() rows: any[] | string;\r\n  @State() columnDefs: any[] = [];\r\n  @State() rowData: any[] = [];\r\n  @Prop() rowHeight: string = 'default';\r\n  @Prop() tableHeight: string = 'auto';\r\n  @Prop() variant: string = 'default'\r\n  @State() uniqueKey: string;\r\n  @Element() host: HTMLElement;\r\n  \r\n  private container: HTMLDivElement;\r\n  private gridApi: GridApi; \r\n  private gridInitialized = false;\r\n\r\n  componentWillLoad() {\r\n    this.uniqueKey = `unique-${Math.floor(Math.random() * 1000000)}`;\r\n    this.setColsAndRows(); //needed?\r\n    this.setGridOptions();\r\n  }\r\n\r\n  setGridOptions() {\r\n    this.gridOptions = {\r\n      rowHeight: this.rowHeight === 'default' ? 40 : 32,\r\n      headerHeight: 40,\r\n      defaultColDef: {\r\n        resizable: true,\r\n        autoHeight: true,\r\n      },\r\n      suppressCellFocus: false,\r\n      enableCellTextSelection: true,\r\n      suppressDragLeaveHidesColumns: true,\r\n      suppressRowHoverHighlight: true,\r\n      onFirstDataRendered: this.onFirstDataRendered,\r\n      columnDefs: this.columnDefs,\r\n      rowData: this.rowData,\r\n      loadingOverlayComponent: CustomLoadingOverlay,\r\n      noRowsOverlayComponent: CustomNoRowsOverlay,\r\n      noRowsOverlayComponentParams: {\r\n        noRowsMessageFunc: () =>\r\n          'No rows found at: ' + new Date().toLocaleTimeString(),\r\n      },\r\n      icons: {\r\n        sortAscending: '<ifx-icon icon=\"arrow-triangle-up-16\"></ifx-icon>',\r\n        sortDescending: '<ifx-icon icon=\"arrow-triangle-down-16\"></ifx-icon>',\r\n        sortUnSort: '<a class=\"unsort-icon-custom-color\"><ifx-icon icon=\"arrow-triangle-vertikal-16\"></ifx-icon></a>',\r\n      },\r\n      rowDragManaged: this.columnDefs.some((col) => col.dndSource === true) ? true : false,\r\n      animateRows: this.columnDefs.some((col) => col.dndSource === true) ? true : false,\r\n    };\r\n  }\r\n\r\n  setColsAndRows() {\r\n    if (typeof this.rows === 'string' && typeof this.cols === 'string') {\r\n      try {\r\n        if(this.cols) {\r\n          this.columnDefs = JSON.parse(this.cols);\r\n        }\r\n        if(this.rows) {\r\n          this.rowData = JSON.parse(this.rows);\r\n        }\r\n      } catch (err) {\r\n        console.error('Failed to parse input:', err);\r\n      }\r\n    } else if ((Array.isArray(this.rows) || typeof this.rows === 'object') && (Array.isArray(this.cols) || typeof this.cols === 'object')) {\r\n      this.columnDefs = this.cols;\r\n      this.rowData = this.rows;\r\n    } else {\r\n      console.error('Unexpected value for cols and rows:', this.rows, this.cols);\r\n    }\r\n  }\r\n\r\n  getRowData() {\r\n    let rows: any[] = [];\r\n    if (typeof this.rows === 'string') {\r\n      try {\r\n        if(this.rows) {\r\n          rows = JSON.parse(this.rows);\r\n        }\r\n      } catch (err) {\r\n        console.error('Failed to parse input:', err);\r\n      }\r\n    } else if (Array.isArray(this.rows) || typeof this.rows === 'object') {\r\n      rows = this.rows;\r\n    } else {\r\n      console.error('Unexpected value for rows: ', this.rows);\r\n    }\r\n\r\n    return rows;\r\n  }\r\n\r\n  getColData() {\r\n    let cols: any[] = [];\r\n\r\n    if (typeof this.cols === 'string') {\r\n      try {\r\n        if(this.cols) { \r\n          cols = JSON.parse(this.cols);\r\n        }\r\n      } catch (err) {\r\n        console.error('Failed to parse input:', err);\r\n      }\r\n    } else if (Array.isArray(this.cols) || typeof this.cols === 'object') {\r\n      cols = this.cols;\r\n    } else {\r\n      console.error('Unexpected value for cols: ', this.cols);\r\n    }\r\n    return cols;\r\n  }\r\n\r\n  onFirstDataRendered(params: FirstDataRenderedEvent) {\r\n    params.api.sizeColumnsToFit();\r\n  }\r\n\r\n  componentWillUpdate() {\r\n    this.setColsAndRows();\r\n    this.gridOptions.columnDefs = this.columnDefs;\r\n    this.gridOptions.rowData = this.rowData;\r\n    if (this.gridApi) {\r\n      this.gridApi.setGridOption('rowData', this.rowData);\r\n      this.gridApi.setGridOption('columnDefs', this.columnDefs);\r\n    }\r\n  }\r\n\r\n  async componentDidLoad() {\r\n    if (this.container && !this.gridInitialized) {\r\n      if(!isNestedInIfxComponent(this.host)) { \r\n        const framework = detectFramework();\r\n        trackComponent('ifx-basic-table', await framework)\r\n      }\r\n      this.gridApi = createGrid(this.container, this.gridOptions);\r\n      if (this.gridApi) {\r\n        this.gridApi.sizeColumnsToFit({\r\n          defaultMinWidth: 100,\r\n        });\r\n        this.gridApi.setGridOption('columnDefs', this.getColData());\r\n        this.gridApi.setGridOption('rowData', this.getRowData());\r\n        this.gridInitialized = true; \r\n      }\r\n    }\r\n  }\r\n\r\n  getClassNames() {\r\n    return classNames(\r\n      this.tableHeight === 'auto' && 'table-wrapper ag-root-wrapper-body',\r\n      'table-wrapper',\r\n    );\r\n  }\r\n\r\n  getTableStyle() {\r\n    if (this.tableHeight !== 'auto') {\r\n      return {\r\n        height: this.tableHeight,\r\n      };\r\n    }\r\n    return {};\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <div id=\"table-wrapper\" class={this.getClassNames()}>\r\n          <div id={`ifxTable-${this.uniqueKey}`} class={`ifx-ag-grid ${this.variant === 'zebra' ? 'zebra' : \"\"}`} style={this.getTableStyle()} ref={(el) => (this.container = el)}></div>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"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","ignoreList":[]}

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

@@ -1 +0,0 @@
-{"version":3,"names":["sliderCss","IfxSlider","constructor","hostRef","this","min","max","step","disabled","showPercentage","type","internalValue","percentage","internalMinValue","internalMaxValue","valueChanged","newValue","updateValuePercent","minValueChanged","maxValueChanged","getRangeSliderWrapper","rangeSliderWrapper","el","shadowRoot","querySelector","handleInputChangeOfRangeSlider","event","target","parseFloat","maxInputRef","value","minInputRef","id","ifxChange","emit","minVal","maxVal","updateZIndexIfRangeSlider","handleOnMouseLeaveOfRangeSlider","sliderWrapper","insertBefore","calculatePercentageValue","num","den","String","toFixed","handleInputChange","roundToValidStep","relativeValue","remainder","minPercent","parentElement","style","setProperty","maxPercent","inputRef","targetId","zIndex","componentWillLoad","undefined","Math","minValueHandle","maxValueHandle","componentDidLoad","isNestedInIfxComponent","framework","detectFramework","trackComponent","render","h","key","class","leftText","leftIcon","icon","ref","onInput","ariaLabel","role","onMouseUp","rightIcon","rightText"],"sources":["src/components/slider/slider.scss?tag=ifx-slider&encapsulation=shadow","src/components/slider/slider.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n@use \"../../global/font.scss\";\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n.left-icon,\r\n.right-icon,\r\n.left-text,\r\n.right-text,\r\n.percentage-display {\r\n  font-size: tokens.$ifxFontSizeS;\r\n  color: tokens.$ifxColorEngineering500;\r\n  margin-left: tokens.$ifxSpace100;\r\n\r\n  &.disabled {\r\n    // Add the disabled state for the percentage display\r\n    color: tokens.$ifxColorEngineering300;\r\n  }\r\n}\r\n\r\n.left-icon,\r\n.left-text {\r\n  margin-right: tokens.$ifxSpace100;\r\n}\r\n\r\n.right-icon,\r\n.right-text,\r\n.percentage-display {\r\n  margin-left: tokens.$ifxSpace100;\r\n}\r\n\r\n\r\n.ifx-slider {\r\n  display: flex;\r\n  align-items: center;\r\n  padding: tokens.$ifxSpace25 tokens.$ifxSpace200;\r\n  border-radius: tokens.$ifxBorderRadiusRound;\r\n\r\n  input[type='range'] {\r\n    -webkit-appearance: none;\r\n    width: 100%;\r\n    height: 4px;\r\n    background: linear-gradient(to right, tokens.$ifxColorOcean500 0%, tokens.$ifxColorOcean500 var(--value-percent, 0%), tokens.$ifxColorEngineering200 var(--value-percent, 0%), tokens.$ifxColorEngineering200 100%);\r\n    outline: none;\r\n    cursor: pointer;\r\n    transition: 0.2s;\r\n\r\n    &:focus-visible {\r\n      outline: 2px solid tokens.$ifxColorOcean500;\r\n    outline-offset: 4px;}\r\n\r\n    &::-moz-range-thumb {\r\n      width: tokens.$ifxSize250;\r\n      height: tokens.$ifxSize250;\r\n      border-radius: 50%;\r\n      background: tokens.$ifxColorOcean500;\r\n      cursor: pointer;\r\n      box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);\r\n    }\r\n    \r\n\r\n    &:not(:disabled)::-webkit-slider-thumb {\r\n      -webkit-appearance: none;\r\n      width: 16px;\r\n      height: 16px;\r\n      background: tokens.$ifxColorOcean500;\r\n      border-radius: 50%;\r\n      cursor: pointer;\r\n      transition: box-shadow 0.2s;\r\n\r\n      &:hover {\r\n        background: tokens.$ifxColorOcean600;\r\n      }\r\n\r\n      &:active {\r\n        background: tokens.$ifxColorOcean700;\r\n      }\r\n    }\r\n  }\r\n\r\n  input[type='range']:disabled {\r\n    background: tokens.$ifxColorEngineering300;\r\n    cursor: default;\r\n  }\r\n\r\n  input[type='range']:disabled::-webkit-slider-thumb {\r\n    -webkit-appearance: none;\r\n    width: 16px;\r\n    height: 16px;\r\n    background: tokens.$ifxColorEngineering300;\r\n    border-radius: 50%;\r\n    cursor: default;\r\n  }\r\n  \r\n  & .range-slider__wrapper {\r\n    position: relative;\r\n    width: 100%;\r\n    height: 4px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    margin: 0px 2px;\r\n    \r\n    background: linear-gradient(to right, tokens.$ifxColorEngineering200 0%, tokens.$ifxColorEngineering200 var(--min-value-percent, 100%), tokens.$ifxColorOcean500 var(--min-value-percent, 100%), tokens.$ifxColorOcean500 var(--max-value-percent, 100%), tokens.$ifxColorEngineering200 var(--max-value-percent, 100%), tokens.$ifxColorEngineering200 100%);\r\n\r\n    &:has(input[type='range']:disabled) {\r\n      background: tokens.$ifxColorEngineering300;\r\n    }\r\n\r\n    \r\n    @mixin thumb() {\r\n      -webkit-appearance: none;\r\n      border: none; \r\n      pointer-events: auto;\r\n      cursor: pointer;\r\n      box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);\r\n    }\r\n    \r\n    @mixin track() {\r\n      -webkit-appearance: none;\r\n      border: none;\r\n      background: none; \r\n      width: 100%;\r\n    }\r\n\r\n    input[type='range'] {\r\n      position: absolute;\r\n      pointer-events: none; \r\n      background: none;\r\n      \r\n      &:focus-visible {\r\n      outline: 2px solid tokens.$ifxColorOcean500;\r\n      outline-offset: 4px;}\r\n\r\n      &::-webkit-slider-thumb { @include thumb; }\r\n      &::-moz-range-thumb { @include thumb; }\r\n      &::-ms-thumb { @include thumb; }\r\n\r\n      &::-webkit-slider-runnable-track { @include track; }\r\n      &::-moz-range-track { @include track; }\r\n    }\r\n  }\r\n  \r\n}\r\n","import { Component, h, Prop, Event, EventEmitter, State, Watch, Element } from '@stencil/core';\r\nimport { trackComponent } from '../../global/utils/tracking';  \r\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\r\nimport { detectFramework } from '../../global/utils/framework-detection';\r\n\r\n@Component({\r\n  tag: 'ifx-slider',\r\n  styleUrl: 'slider.scss',\r\n  shadow: true,\r\n})\r\nexport class IfxSlider {\r\n  @Prop() min: number = 0;\r\n  @Prop() max: number = 100;\r\n  @Prop() step: number = 1;\r\n  @Prop() value: number;\r\n  @Prop() minValueHandle: number;\r\n  @Prop() maxValueHandle: number;\r\n  @Prop() disabled: boolean = false;\r\n  @Prop() showPercentage: boolean = false;\r\n  @Prop() leftIcon: string;\r\n  @Prop() rightIcon: string;\r\n  @Prop() leftText: string;\r\n  @Prop() rightText: string;\r\n  @Prop() type: 'single' | 'double' = 'single';\r\n  @Prop() ariaLabel: string | null;\r\n  @State() internalValue: number = 0;\r\n  @State() percentage: number = 0;\r\n  @State() internalMinValue: number = 0;\r\n  @State() internalMaxValue: number = 100;\r\n  @Event() ifxChange: EventEmitter;\r\n\r\n  @Element() el;\r\n\r\n  private inputRef: HTMLInputElement;\r\n  private minInputRef: HTMLInputElement;\r\n  private maxInputRef: HTMLInputElement;\r\n                                             \r\n  @Watch('value')\r\n  valueChanged(newValue: number) {\r\n    this.internalValue = newValue;\r\n    this.updateValuePercent();\r\n  }\r\n\r\n  @Watch('minValueHandle')\r\n  minValueChanged(newValue: number) {\r\n    this.internalMinValue = newValue;\r\n    this.updateValuePercent();\r\n  }\r\n  \r\n  @Watch('maxValueHandle')\r\n  maxValueChanged(newValue: number) {\r\n    this.internalMaxValue = newValue;\r\n    this.updateValuePercent();\r\n  }\r\n\r\n  getRangeSliderWrapper() {\r\n    const rangeSliderWrapper = this.el.shadowRoot.querySelector('.range-slider__wrapper');\r\n    return rangeSliderWrapper;\r\n  }\r\n\r\n  handleInputChangeOfRangeSlider(event: Event) {\r\n    const target = event.target as HTMLInputElement;\r\n    if(parseFloat(this.maxInputRef.value) - parseFloat(this.minInputRef.value) <= 0) {\r\n      if(target.id === 'max-slider') {\r\n        this.maxInputRef.value = this.minInputRef.value;\r\n      }else{\r\n        this.minInputRef.value = this.maxInputRef.value;\r\n      }\r\n    }\r\n    if(target.id === 'max-slider') {\r\n      this.internalMaxValue = parseFloat(this.maxInputRef.value);\r\n    } else {\r\n      this.internalMinValue = parseFloat(this.minInputRef.value);\r\n    }\r\n    this.ifxChange.emit({minVal: this.internalMinValue, maxVal: this.internalMaxValue});\r\n    this.updateValuePercent();\r\n    this.updateZIndexIfRangeSlider(target.id)\r\n  }\r\n  \r\n  handleOnMouseLeaveOfRangeSlider(event: Event) {\r\n    const target = event.target as HTMLInputElement;\r\n    const sliderWrapper = this.getRangeSliderWrapper();\r\n    if(target.id === 'max-slider') {\r\n      sliderWrapper.insertBefore(this.maxInputRef, this.minInputRef);\r\n    } else {\r\n      sliderWrapper.insertBefore(this.minInputRef, this.maxInputRef);\r\n    }\r\n  }\r\n\r\n  calculatePercentageValue() {\r\n    const num = (this.internalValue - this.min) * 1.0;\r\n    const den = this.max - this.min;\r\n    this.percentage = +parseFloat(String((num/den)*100)).toFixed(2);\r\n  }\r\n\r\n  handleInputChange(event: Event) {\r\n    const target = event.target as HTMLInputElement;\r\n    this.internalValue = parseFloat(target.value);\r\n    this.ifxChange.emit(this.internalValue);\r\n    this.calculatePercentageValue();\r\n    this.updateValuePercent();\r\n  }\r\n\r\n  private roundToValidStep(value: number) {\r\n    const relativeValue = value - this.min;\r\n    const remainder = relativeValue % this.step;\r\n    if (remainder >= this.step / 2) {\r\n      return this.min + relativeValue + (this.step - remainder);\r\n    } else {\r\n      return this.min + relativeValue - remainder;\r\n    }\r\n  }\r\n\r\n  updateValuePercent() {\r\n    const den = this.max - this.min;\r\n    if(this.type === 'double'){\r\n      if (this.minInputRef) {\r\n        const num = (this.roundToValidStep(this.internalMinValue) - this.min) * 1.0;\r\n        const minPercent = (num/den) * 100;\r\n        this.minInputRef.parentElement.style.setProperty('--min-value-percent', `${minPercent}%`);\r\n      }\r\n\r\n      if (this.maxInputRef) {\r\n        const num = (this.roundToValidStep(this.internalMaxValue) - this.min) * 1.0;\r\n        const maxPercent = (num/den) * 100;\r\n        this.maxInputRef.parentElement.style.setProperty('--max-value-percent', `${maxPercent}%`);\r\n      }\r\n\r\n    } else {\r\n\r\n      if (this.inputRef) {\r\n        const num = (this.roundToValidStep(this.internalValue) - this.min) * 1.0;\r\n        const den = this.max - this.min;\r\n        const percentage = (num/den) * 100;\r\n        this.inputRef.style.setProperty('--value-percent', `${percentage}%`);\r\n      }\r\n\r\n    }\r\n  }  \r\n  \r\n  // Ensures that the last used slider thumb stays on top of the other thumb in order to handle correct overlapping \r\n  // if min and max thumbs take the same value.\r\n  updateZIndexIfRangeSlider(targetId: string = '') {\r\n    if (targetId === 'max-slider') {\r\n      this.minInputRef.style.zIndex = '1';\r\n      this.maxInputRef.style.zIndex = '2';\r\n    } else {\r\n      this.minInputRef.style.zIndex = '2';\r\n      this.maxInputRef.style.zIndex = '1';\r\n    }\r\n  }\r\n\r\n  componentWillLoad() {\r\n    if(this.value === undefined) {\r\n      this.internalValue = (this.max-this.min) / 2;\r\n    } else {\r\n      this.internalValue = Math.max(this.min, Math.min(this.max, this.value));\r\n    }\r\n\r\n    this.calculatePercentageValue();\r\n\r\n    if(this.minValueHandle !== undefined) this.internalMinValue = this.minValueHandle;\r\n    else this.internalMinValue = this.min;\r\n    if(this.maxValueHandle !== undefined) this.internalMaxValue = this.maxValueHandle;\r\n    else this.internalMaxValue = this.max;\r\n  }\r\n\r\n  async componentDidLoad() {\r\n    if(!isNestedInIfxComponent(this.el)) { \r\n      const framework = detectFramework();\r\n      trackComponent('ifx-slider', await framework)\r\n    }\r\n    this.updateValuePercent();\r\n  }\r\n\r\n\r\n  render() {\r\n    return (\r\n      <div class=\"ifx-slider\">\r\n        {this.leftText && (\r\n          <span class={`left-text`}>\r\n            {this.leftText}\r\n          </span>\r\n        )}\r\n        {this.leftIcon && (\r\n          <ifx-icon icon={this.leftIcon} class={`left-icon${this.disabled ? ' disabled' : ''}`} />\r\n        )}\r\n        {\r\n          (this.type !== 'double') ?\r\n            <input\r\n              type=\"range\"\r\n              min={this.min}\r\n              max={this.max}\r\n              step={this.step}\r\n              value={this.internalValue}\r\n              disabled={this.disabled}\r\n              ref={(el) => (this.inputRef = el as HTMLInputElement)}\r\n              onInput={(event) => this.handleInputChange(event)}\r\n              aria-label=\"Slider\"\r\n              aria-valuemin={this.min}\r\n              aria-valuemax={this.max}\r\n              aria-valuenow={this.internalValue}\r\n              aria-disabled={this.disabled ? \"true\" : \"false\"}\r\n              /> \r\n              :\r\n            <div class = 'range-slider__wrapper' aria-label={this.ariaLabel} role=\"group\">\r\n              <input \r\n                id='min-slider'\r\n                type='range'\r\n                min={this.min}\r\n                max={this.max}\r\n                step={this.step}\r\n                value={this.internalMinValue}\r\n                disabled={this.disabled}\r\n                ref={(el) => (this.minInputRef = el as HTMLInputElement)}\r\n                onInput={(event) => this.handleInputChangeOfRangeSlider(event)}\r\n                onMouseUp={(event) => this.handleOnMouseLeaveOfRangeSlider(event)}\r\n                aria-label=\"Minimum value slider\"\r\n                aria-valuemin={this.min}\r\n                aria-valuemax={this.max}\r\n                aria-valuenow={this.internalMinValue} aria-disabled={this.disabled ? \"true\" : \"false\"}\r\n              />\r\n              <input \r\n                id='max-slider'\r\n                type='range'\r\n                min={this.min}\r\n                max={this.max}\r\n                step={this.step}\r\n                value={this.internalMaxValue}\r\n                disabled={this.disabled}\r\n                ref={(el) => (this.maxInputRef = el as HTMLInputElement)}\r\n                onInput={(event) => this.handleInputChangeOfRangeSlider(event)}\r\n                onMouseUp={(event) => this.handleOnMouseLeaveOfRangeSlider(event)}\r\n                aria-label=\"Maximum value slider\"\r\n                aria-valuemin={this.min}\r\n                aria-valuemax={this.max}\r\n                aria-valuenow={this.internalMaxValue}\r\n                aria-disabled={this.disabled ? \"true\" : \"false\"}\r\n              />\r\n            </div>\r\n        }\r\n        {this.rightIcon && (\r\n          <ifx-icon icon={this.rightIcon} class={`right-icon${this.disabled ? ' disabled' : ''}`} />\r\n        )}\r\n        {this.rightText && (\r\n          <span class={`right-text${this.disabled ? ' disabled' : ''}`}>\r\n            {this.rightText}\r\n          </span>\r\n        )}\r\n\r\n        {this.showPercentage && (this.type !== \"double\") && (\r\n          <span\r\n            class={`percentage-display${this.disabled ? ' disabled' : ''}`}\r\n          >\r\n            {this.percentage}%\r\n          </span>\r\n        )}\r\n      </div>\r\n    );\r\n  }\r\n}"],"mappings":"wIAAA,MAAMA,EAAY,ojG,MCULC,EAAS,MALtB,WAAAC,CAAAC,G,+CAMUC,KAAGC,IAAW,EACdD,KAAGE,IAAW,IACdF,KAAIG,KAAW,EAIfH,KAAQI,SAAY,MACpBJ,KAAcK,eAAY,MAK1BL,KAAIM,KAAwB,SAE3BN,KAAaO,cAAW,EACxBP,KAAUQ,WAAW,EACrBR,KAAgBS,iBAAW,EAC3BT,KAAgBU,iBAAW,GAwOrC,CA9NC,YAAAC,CAAaC,GACXZ,KAAKO,cAAgBK,EACrBZ,KAAKa,oB,CAIP,eAAAC,CAAgBF,GACdZ,KAAKS,iBAAmBG,EACxBZ,KAAKa,oB,CAIP,eAAAE,CAAgBH,GACdZ,KAAKU,iBAAmBE,EACxBZ,KAAKa,oB,CAGP,qBAAAG,GACE,MAAMC,EAAqBjB,KAAKkB,GAAGC,WAAWC,cAAc,0BAC5D,OAAOH,C,CAGT,8BAAAI,CAA+BC,GAC7B,MAAMC,EAASD,EAAMC,OACrB,GAAGC,WAAWxB,KAAKyB,YAAYC,OAASF,WAAWxB,KAAK2B,YAAYD,QAAU,EAAG,CAC/E,GAAGH,EAAOK,KAAO,aAAc,CAC7B5B,KAAKyB,YAAYC,MAAQ1B,KAAK2B,YAAYD,K,KACvC,CACH1B,KAAK2B,YAAYD,MAAQ1B,KAAKyB,YAAYC,K,EAG9C,GAAGH,EAAOK,KAAO,aAAc,CAC7B5B,KAAKU,iBAAmBc,WAAWxB,KAAKyB,YAAYC,M,KAC/C,CACL1B,KAAKS,iBAAmBe,WAAWxB,KAAK2B,YAAYD,M,CAEtD1B,KAAK6B,UAAUC,KAAK,CAACC,OAAQ/B,KAAKS,iBAAkBuB,OAAQhC,KAAKU,mBACjEV,KAAKa,qBACLb,KAAKiC,0BAA0BV,EAAOK,G,CAGxC,+BAAAM,CAAgCZ,GAC9B,MAAMC,EAASD,EAAMC,OACrB,MAAMY,EAAgBnC,KAAKgB,wBAC3B,GAAGO,EAAOK,KAAO,aAAc,CAC7BO,EAAcC,aAAapC,KAAKyB,YAAazB,KAAK2B,Y,KAC7C,CACLQ,EAAcC,aAAapC,KAAK2B,YAAa3B,KAAKyB,Y,EAItD,wBAAAY,GACE,MAAMC,GAAOtC,KAAKO,cAAgBP,KAAKC,KAAO,EAC9C,MAAMsC,EAAMvC,KAAKE,IAAMF,KAAKC,IAC5BD,KAAKQ,YAAcgB,WAAWgB,OAAQF,EAAIC,EAAK,MAAME,QAAQ,E,CAG/D,iBAAAC,CAAkBpB,GAChB,MAAMC,EAASD,EAAMC,OACrBvB,KAAKO,cAAgBiB,WAAWD,EAAOG,OACvC1B,KAAK6B,UAAUC,KAAK9B,KAAKO,eACzBP,KAAKqC,2BACLrC,KAAKa,oB,CAGC,gBAAA8B,CAAiBjB,GACvB,MAAMkB,EAAgBlB,EAAQ1B,KAAKC,IACnC,MAAM4C,EAAYD,EAAgB5C,KAAKG,KACvC,GAAI0C,GAAa7C,KAAKG,KAAO,EAAG,CAC9B,OAAOH,KAAKC,IAAM2C,GAAiB5C,KAAKG,KAAO0C,E,KAC1C,CACL,OAAO7C,KAAKC,IAAM2C,EAAgBC,C,EAItC,kBAAAhC,GACE,MAAM0B,EAAMvC,KAAKE,IAAMF,KAAKC,IAC5B,GAAGD,KAAKM,OAAS,SAAS,CACxB,GAAIN,KAAK2B,YAAa,CACpB,MAAMW,GAAOtC,KAAK2C,iBAAiB3C,KAAKS,kBAAoBT,KAAKC,KAAO,EACxE,MAAM6C,EAAcR,EAAIC,EAAO,IAC/BvC,KAAK2B,YAAYoB,cAAcC,MAAMC,YAAY,sBAAuB,GAAGH,K,CAG7E,GAAI9C,KAAKyB,YAAa,CACpB,MAAMa,GAAOtC,KAAK2C,iBAAiB3C,KAAKU,kBAAoBV,KAAKC,KAAO,EACxE,MAAMiD,EAAcZ,EAAIC,EAAO,IAC/BvC,KAAKyB,YAAYsB,cAAcC,MAAMC,YAAY,sBAAuB,GAAGC,K,MAGxE,CAEL,GAAIlD,KAAKmD,SAAU,CACjB,MAAMb,GAAOtC,KAAK2C,iBAAiB3C,KAAKO,eAAiBP,KAAKC,KAAO,EACrE,MAAMsC,EAAMvC,KAAKE,IAAMF,KAAKC,IAC5B,MAAMO,EAAc8B,EAAIC,EAAO,IAC/BvC,KAAKmD,SAASH,MAAMC,YAAY,kBAAmB,GAAGzC,K,GAQ5D,yBAAAyB,CAA0BmB,EAAmB,IAC3C,GAAIA,IAAa,aAAc,CAC7BpD,KAAK2B,YAAYqB,MAAMK,OAAS,IAChCrD,KAAKyB,YAAYuB,MAAMK,OAAS,G,KAC3B,CACLrD,KAAK2B,YAAYqB,MAAMK,OAAS,IAChCrD,KAAKyB,YAAYuB,MAAMK,OAAS,G,EAIpC,iBAAAC,GACE,GAAGtD,KAAK0B,QAAU6B,UAAW,CAC3BvD,KAAKO,eAAiBP,KAAKE,IAAIF,KAAKC,KAAO,C,KACtC,CACLD,KAAKO,cAAgBiD,KAAKtD,IAAIF,KAAKC,IAAKuD,KAAKvD,IAAID,KAAKE,IAAKF,KAAK0B,O,CAGlE1B,KAAKqC,2BAEL,GAAGrC,KAAKyD,iBAAmBF,UAAWvD,KAAKS,iBAAmBT,KAAKyD,oBAC9DzD,KAAKS,iBAAmBT,KAAKC,IAClC,GAAGD,KAAK0D,iBAAmBH,UAAWvD,KAAKU,iBAAmBV,KAAK0D,oBAC9D1D,KAAKU,iBAAmBV,KAAKE,G,CAGpC,sBAAMyD,GACJ,IAAIC,EAAuB5D,KAAKkB,IAAK,CACnC,MAAM2C,EAAYC,IAClBC,EAAe,mBAAoBF,E,CAErC7D,KAAKa,oB,CAIP,MAAAmD,GACE,OACEC,EAAA,OAAAC,IAAA,2CAAKC,MAAM,cACRnE,KAAKoE,UACJH,EAAM,QAAAC,IAAA,2CAAAC,MAAO,aACVnE,KAAKoE,UAGTpE,KAAKqE,UACJJ,EAAA,YAAAC,IAAA,2CAAUI,KAAMtE,KAAKqE,SAAUF,MAAO,YAAYnE,KAAKI,SAAW,YAAc,OAG/EJ,KAAKM,OAAS,SACb2D,EAAA,SACE3D,KAAK,QACLL,IAAKD,KAAKC,IACVC,IAAKF,KAAKE,IACVC,KAAMH,KAAKG,KACXuB,MAAO1B,KAAKO,cACZH,SAAUJ,KAAKI,SACfmE,IAAMrD,GAAQlB,KAAKmD,SAAWjC,EAC9BsD,QAAUlD,GAAUtB,KAAK0C,kBAAkBpB,GAChC,sBAAQ,gBACJtB,KAAKC,IAAG,gBACRD,KAAKE,IAAG,gBACRF,KAAKO,cACL,gBAAAP,KAAKI,SAAW,OAAS,UAG1C6D,EAAK,OAAAE,MAAQ,wBAAoC,aAAAnE,KAAKyE,UAAWC,KAAK,SACpET,EACE,SAAArC,GAAG,aACHtB,KAAK,QACLL,IAAKD,KAAKC,IACVC,IAAKF,KAAKE,IACVC,KAAMH,KAAKG,KACXuB,MAAO1B,KAAKS,iBACZL,SAAUJ,KAAKI,SACfmE,IAAMrD,GAAQlB,KAAK2B,YAAcT,EACjCsD,QAAUlD,GAAUtB,KAAKqB,+BAA+BC,GACxDqD,UAAYrD,GAAUtB,KAAKkC,gCAAgCZ,GAAM,aACtD,uBAAsB,gBAClBtB,KAAKC,IAAG,gBACRD,KAAKE,IACL,gBAAAF,KAAKS,iBAAgB,gBAAiBT,KAAKI,SAAW,OAAS,UAEhF6D,EACE,SAAArC,GAAG,aACHtB,KAAK,QACLL,IAAKD,KAAKC,IACVC,IAAKF,KAAKE,IACVC,KAAMH,KAAKG,KACXuB,MAAO1B,KAAKU,iBACZN,SAAUJ,KAAKI,SACfmE,IAAMrD,GAAQlB,KAAKyB,YAAcP,EACjCsD,QAAUlD,GAAUtB,KAAKqB,+BAA+BC,GACxDqD,UAAYrD,GAAUtB,KAAKkC,gCAAgCZ,GAAM,aACtD,uBACI,gBAAAtB,KAAKC,IACL,gBAAAD,KAAKE,IAAG,gBACRF,KAAKU,iBAAgB,gBACrBV,KAAKI,SAAW,OAAS,WAI/CJ,KAAK4E,WACJX,EAAA,YAAAC,IAAA,2CAAUI,KAAMtE,KAAK4E,UAAWT,MAAO,aAAanE,KAAKI,SAAW,YAAc,OAEnFJ,KAAK6E,WACJZ,EAAA,QAAAC,IAAA,2CAAMC,MAAO,aAAanE,KAAKI,SAAW,YAAc,MACrDJ,KAAK6E,WAIT7E,KAAKK,gBAAmBL,KAAKM,OAAS,UACrC2D,EAAA,QAAAC,IAAA,2CACEC,MAAO,qBAAqBnE,KAAKI,SAAW,YAAc,MAEzDJ,KAAKQ,WAAU,K","ignoreList":[]}

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

@@ -1 +0,0 @@
-{"version":3,"names":["actionListItemCss","ActionListItem","constructor","hostRef","this","target","disabled","handleMainClick","event","preventDefault","stopPropagation","leadingElement","_a","host","shadowRoot","querySelector","trailingElement","_b","contains","ifxActionListItemClick","emit","value","href","component","window","open","location","handleLeadingClick","currentElement","isInteractiveElement","parentElement","handleTrailingClick","element","tagName","toUpperCase","interactiveInfineonComponents","includes","handleMainKeyDown","key","handleLeadingKeyDown","leadingSlot","assignedElements","firstInteractive","find","el","focus","click","handleTrailingKeyDown","trailingSlot","updateSlotElementsDisabledState","interactiveComponents","slots","querySelectorAll","forEach","slottedElement","toLowerCase","setElementDisabledState","componentTag","nestedElements","nestedElement","setAttribute","removeAttribute","onDisabledChange","hasSlotContent","slotName","slot","componentDidLoad","componentDidUpdate","render","isClickable","ariaLabel","itemAriaLabel","itemTitle","description","hasLeadingContent","hasTrailingContent","h","class","classNames","role","tabIndex","undefined","onClick","onKeyDown","name"],"sources":["src/components/action-list/action-list-item.scss?tag=ifx-action-list-item&encapsulation=shadow","src/components/action-list/action-list-item.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n@use \"../../global/font.scss\";\r\n\r\n.action-list-item {\r\n  display: flex;\r\n  align-items: center;\r\n  padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\r\n  background: tokens.$ifxColorBaseWhite;\r\n  transition: background-color 0.2s ease;\r\n  cursor: default;\r\n\r\n  &--clickable {\r\n    cursor: pointer;\r\n\r\n    &:hover:not(.action-list-item--disabled) {\r\n      background: tokens.$ifxColorEngineering100;\r\n    }\r\n\r\n    &:focus:not(.action-list-item--disabled) {\r\n      outline: none;\r\n      //outline: 2px solid tokens.$ifxColorOcean500;\r\n      //outline-offset: -2px;\r\n      background: tokens.$ifxColorEngineering100;\r\n    }\r\n\r\n    &:active:not(.action-list-item--disabled) {\r\n      background: tokens.$ifxColorEngineering200;\r\n    }\r\n  }\r\n\r\n  &--disabled {\r\n    // Apply disabled color to all slotted icons\r\n    ::slotted(ifx-icon) {\r\n      color: tokens.$ifxColorEngineering300;\r\n    }\r\n\r\n    // Also apply to nested icons within slotted elements\r\n    ::slotted(*) {\r\n      ifx-icon {\r\n        color: tokens.$ifxColorEngineering300;\r\n      }\r\n    }\r\n  }\r\n\r\n  &__leading {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    margin-right: tokens.$ifxSpace200;\r\n    flex-shrink: 0;\r\n  }\r\n\r\n  &__content {\r\n    flex: 1;\r\n    min-width: 0; // Allows text to truncate\r\n  }\r\n\r\n  &__title {\r\n    font-weight: tokens.$ifxFontWeightSemibold;\r\n    font-size: tokens.$ifxFontSizeM;\r\n    line-height: tokens.$ifxLineHeightM;\r\n    color: tokens.$ifxColorBaseBlack;\r\n\r\n    // Truncate long titles\r\n    white-space: nowrap;\r\n    overflow: hidden;\r\n    text-overflow: ellipsis;\r\n\r\n    // Disabled state\r\n    .action-list-item--disabled & {\r\n      color: tokens.$ifxColorEngineering300;\r\n    }\r\n  }\r\n\r\n  &__description {\r\n    font-size: tokens.$ifxFontSizeS;\r\n    line-height: tokens.$ifxLineHeightS;\r\n    color: tokens.$ifxColorEngineering500;\r\n    margin-top: tokens.$ifxSpace25;\r\n\r\n    // Disabled state\r\n    .action-list-item--disabled & {\r\n      color: tokens.$ifxColorEngineering300;\r\n    }\r\n  }\r\n\r\n  &__trailing {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    margin-left: tokens.$ifxSpace200;\r\n    flex-shrink: 0;\r\n    gap: 16px;\r\n  }\r\n}","import { Component, h, Prop, Element, Event, EventEmitter, Watch } from '@stencil/core';\r\nimport classNames from 'classnames';\r\n\r\nexport interface ActionListItemClickEvent {\r\n  value?: string;\r\n  href?: string;\r\n  target?: string;\r\n  component?: ActionListItem;\r\n}\r\n\r\n@Component({\r\n  tag: 'ifx-action-list-item',\r\n  styleUrl: 'action-list-item.scss',\r\n  shadow: true,\r\n})\r\nexport class ActionListItem {\r\n  @Element() host: HTMLElement;\r\n\r\n  /**\r\n   * The title text displayed in the item\r\n   */\r\n  @Prop() itemTitle: string;\r\n\r\n  /**\r\n   * The description text displayed below the title\r\n   */\r\n  @Prop() description?: string;\r\n\r\n  /**\r\n   * Value associated with this item\r\n   */\r\n  @Prop() value?: string;\r\n\r\n  /**\r\n   * URL to navigate to when item is clicked\r\n   */\r\n  @Prop() href?: string;\r\n\r\n  /**\r\n   * Target for the link navigation\r\n   * @default '_self'\r\n   */\r\n  @Prop() target: string = '_self';\r\n\r\n  /**\r\n   * Controls whether the item is disabled\r\n   * @default false\r\n   */\r\n  @Prop() disabled: boolean = false;\r\n\r\n  /**\r\n   * Aria label for accessibility support\r\n   */\r\n  @Prop() itemAriaLabel?: string;\r\n\r\n  /**\r\n   * Event emitted when the main item area is clicked\r\n   */\r\n  @Event() ifxActionListItemClick: EventEmitter<ActionListItemClickEvent>;\r\n\r\n  @Watch('disabled')\r\n  onDisabledChange() {\r\n    // Update interactive elements when disabled state changes\r\n    this.updateSlotElementsDisabledState();\r\n  }\r\n\r\n  private handleMainClick = (event: MouseEvent) => {\r\n    if (this.disabled) {\r\n      event.preventDefault();\r\n      event.stopPropagation();\r\n      return;\r\n    }\r\n\r\n    // Check if clicked element is inside leading or trailing areas\r\n    const leadingElement = this.host.shadowRoot?.querySelector('.action-list-item__leading');\r\n    const trailingElement = this.host.shadowRoot?.querySelector('.action-list-item__trailing');\r\n\r\n    if (leadingElement?.contains(event.target as Node) || trailingElement?.contains(event.target as Node)) {\r\n      return; // Don't trigger main click if clicking on leading/trailing areas\r\n    }\r\n\r\n    // Always emit main event when clicking on content area (text), regardless of interactive elements\r\n    this.ifxActionListItemClick.emit({\r\n      value: this.value,\r\n      href: this.href,\r\n      target: this.target,\r\n      component: this,\r\n    });\r\n\r\n    // If href is provided, automatically navigate (Link mode)\r\n    // If no href is provided, only the event is emitted (Event mode)\r\n    if (this.href) {\r\n      if (this.target === '_blank') {\r\n        window.open(this.href, this.target);\r\n      } else {\r\n        window.location.href = this.href;\r\n      }\r\n    }\r\n  };\r\n\r\n  private handleLeadingClick = (event: MouseEvent) => {\r\n    if (this.disabled) {\r\n      event.preventDefault();\r\n      event.stopPropagation();\r\n      return;\r\n    }\r\n\r\n    const target = event.target as HTMLElement;\r\n\r\n    // Check if the clicked element or any of its parents is an interactive component\r\n    let currentElement = target;\r\n    while (currentElement && currentElement !== this.host) {\r\n      if (this.isInteractiveElement(currentElement)) {\r\n        // Interactive element clicked - stop propagation to prevent main event\r\n        event.stopPropagation();\r\n        return;\r\n      }\r\n      currentElement = currentElement.parentElement;\r\n    }\r\n\r\n    // Non-interactive element clicked - trigger main action\r\n    event.stopPropagation();\r\n    this.ifxActionListItemClick.emit({\r\n      value: this.value,\r\n      href: this.href,\r\n      target: this.target,\r\n      component: this,\r\n    });\r\n\r\n    // If href is provided, automatically navigate\r\n    if (this.href) {\r\n      if (this.target === '_blank') {\r\n        window.open(this.href, this.target);\r\n      } else {\r\n        window.location.href = this.href;\r\n      }\r\n    }\r\n  };\r\n\r\n  private handleTrailingClick = (event: MouseEvent) => {\r\n    if (this.disabled) {\r\n      event.preventDefault();\r\n      event.stopPropagation();\r\n      return;\r\n    }\r\n\r\n    const target = event.target as HTMLElement;\r\n\r\n    // Check if the clicked element or any of its parents is an interactive component\r\n    let currentElement = target;\r\n    while (currentElement && currentElement !== this.host) {\r\n      if (this.isInteractiveElement(currentElement)) {\r\n        // Interactive element clicked - stop propagation to prevent main event\r\n        event.stopPropagation();\r\n        return;\r\n      }\r\n      currentElement = currentElement.parentElement;\r\n    }\r\n\r\n    // Non-interactive element clicked - trigger main action\r\n    event.stopPropagation();\r\n    this.ifxActionListItemClick.emit({\r\n      value: this.value,\r\n      href: this.href,\r\n      target: this.target,\r\n      component: this,\r\n    });\r\n\r\n    // If href is provided, automatically navigate\r\n    if (this.href) {\r\n      if (this.target === '_blank') {\r\n        window.open(this.href, this.target);\r\n      } else {\r\n        window.location.href = this.href;\r\n      }\r\n    }\r\n  };\r\n\r\n  private isInteractiveElement = (element: HTMLElement): boolean => {\r\n    // Get the tag name, handling both custom elements and standard HTML\r\n    const tagName = element.tagName.toUpperCase();\r\n\r\n    // List of Infineon components that should block main event\r\n    const interactiveInfineonComponents = [\r\n      'IFX-BUTTON',\r\n      'IFX-CHECKBOX',\r\n      'IFX-SWITCH'\r\n    ];\r\n\r\n    // Check if it's an interactive Infineon component\r\n    return interactiveInfineonComponents.includes(tagName);\r\n  };\r\n\r\n  private handleMainKeyDown = (event: KeyboardEvent) => {\r\n    if (this.disabled) return;\r\n\r\n    if (event.key === 'Enter' || event.key === ' ') {\r\n      event.preventDefault();\r\n\r\n      // Always trigger main action via keyboard, regardless of interactive elements\r\n      this.handleMainClick(event as any);\r\n    }\r\n  };\r\n\r\n  private handleLeadingKeyDown = (event: KeyboardEvent) => {\r\n    if (this.disabled) return;\r\n\r\n    if (event.key === 'Enter' || event.key === ' ') {\r\n      event.preventDefault();\r\n\r\n      const leadingSlot = this.host.shadowRoot?.querySelector('slot[name=\"leading\"]') as HTMLSlotElement;\r\n      const assignedElements = leadingSlot?.assignedElements() || [];\r\n\r\n      // Find first interactive element and activate it\r\n      const firstInteractive = assignedElements.find(el =>\r\n        this.isInteractiveElement(el as HTMLElement)\r\n      ) as HTMLElement;\r\n\r\n      if (firstInteractive) {\r\n        firstInteractive.focus();\r\n        firstInteractive.click();\r\n      }\r\n    }\r\n  };\r\n\r\n  private handleTrailingKeyDown = (event: KeyboardEvent) => {\r\n    if (this.disabled) return;\r\n\r\n    if (event.key === 'Enter' || event.key === ' ') {\r\n      event.preventDefault();\r\n\r\n      const trailingSlot = this.host.shadowRoot?.querySelector('slot[name=\"trailing\"]') as HTMLSlotElement;\r\n      const assignedElements = trailingSlot?.assignedElements() || [];\r\n\r\n      // Find first interactive element and activate it\r\n      const firstInteractive = assignedElements.find(el =>\r\n        this.isInteractiveElement(el as HTMLElement)\r\n      ) as HTMLElement;\r\n\r\n      if (firstInteractive) {\r\n        firstInteractive.focus();\r\n        firstInteractive.click();\r\n      }\r\n    }\r\n  };\r\n\r\n  private hasSlotContent(slotName: string): boolean {\r\n    const slot = this.host.querySelector(`[slot=\"${slotName}\"]`);\r\n    return !!slot;\r\n  }\r\n\r\n  componentDidLoad() {\r\n    // Apply disabled state to interactive elements in slots\r\n    this.updateSlotElementsDisabledState();\r\n  }\r\n\r\n  componentDidUpdate() {\r\n    // Apply disabled state to interactive elements in slots when disabled prop changes\r\n    this.updateSlotElementsDisabledState();\r\n  }\r\n\r\n  private updateSlotElementsDisabledState = () => {\r\n    // Only handle interactive components that should be disabled\r\n    const interactiveComponents = ['ifx-checkbox', 'ifx-switch', 'ifx-button'];\r\n\r\n    // Get all slotted elements\r\n    const slots = this.host.querySelectorAll('[slot]');\r\n\r\n    slots.forEach(slottedElement => {\r\n      // Check if the slotted element itself is an interactive component\r\n      if (interactiveComponents.includes(slottedElement.tagName.toLowerCase())) {\r\n        this.setElementDisabledState(slottedElement as HTMLElement);\r\n      }\r\n\r\n      // Also check for nested interactive components within the slotted element\r\n      interactiveComponents.forEach(componentTag => {\r\n        const nestedElements = slottedElement.querySelectorAll(componentTag);\r\n        nestedElements.forEach(nestedElement => {\r\n          this.setElementDisabledState(nestedElement as HTMLElement);\r\n        });\r\n      });\r\n    });\r\n  };\r\n\r\n  private setElementDisabledState = (element: HTMLElement) => {\r\n    if (this.disabled) {\r\n      element.setAttribute('disabled', 'true');\r\n    } else {\r\n      element.removeAttribute('disabled');\r\n    }\r\n  };  render() {\r\n    const isClickable = !this.disabled && (this.href || this.value);\r\n    const ariaLabel = this.itemAriaLabel || `${this.itemTitle}${this.description ? ` - ${this.description}` : ''}`;\r\n    const hasLeadingContent = this.hasSlotContent('leading');\r\n    const hasTrailingContent = this.hasSlotContent('trailing');\r\n\r\n    return (\r\n      <div\r\n        class={classNames(\r\n          'action-list-item',\r\n          this.disabled && 'action-list-item--disabled',\r\n          isClickable && 'action-list-item--clickable'\r\n        )}\r\n        role=\"listitem\"\r\n        tabIndex={isClickable ? 0 : -1}\r\n        aria-label={ariaLabel}\r\n        aria-disabled={this.disabled ? 'true' : undefined}\r\n        onClick={this.handleMainClick}\r\n        onKeyDown={this.handleMainKeyDown}\r\n      >\r\n        {/* Leading Item Container - only render if content exists */}\r\n        {hasLeadingContent && (\r\n          <div\r\n            class=\"action-list-item__leading\"\r\n            onClick={this.handleLeadingClick}\r\n            onKeyDown={this.handleLeadingKeyDown}\r\n          >\r\n            <slot name=\"leading\"></slot>\r\n          </div>\r\n        )}\r\n\r\n        {/* Text Container */}\r\n        <div class=\"action-list-item__content\">\r\n          <div class=\"action-list-item__title\">\r\n            {this.itemTitle}\r\n          </div>\r\n          {this.description && (\r\n            <div class=\"action-list-item__description\">\r\n              {this.description}\r\n            </div>\r\n          )}\r\n        </div>\r\n\r\n        {/* Trailing Item Container - only render if content exists */}\r\n        {hasTrailingContent && (\r\n          <div\r\n            class=\"action-list-item__trailing\"\r\n            onClick={this.handleTrailingClick}\r\n            onKeyDown={this.handleTrailingKeyDown}\r\n          >\r\n            <slot name=\"trailing\"></slot>\r\n          </div>\r\n        )}\r\n      </div>\r\n    );\r\n  }\r\n}"],"mappings":"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","ignoreList":[]}

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

@@ -1 +0,0 @@
-{"version":3,"names":["segmentCss","Segment","constructor","hostRef","this","selected","handleSegmentClick","segmentSelect","emit","segmentIndex","handleSegmentKeyDown","event","code","render","h","key","class","tabIndex","onClick","onKeyDown","e","icon"],"sources":["src/components/segmented-control/segment/segment.scss?tag=ifx-segment&encapsulation=shadow","src/components/segmented-control/segment/segment.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n@use \"../../../global/font.scss\";\r\n\r\n.segment {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    gap: tokens.$ifxSize100;\r\n    position: relative;\r\n\r\n    border: tokens.$ifxBorderRadius12 solid tokens.$ifxColorEngineering300;\r\n    border-radius: tokens.$ifxBorderRadius12;\r\n    padding: 0 tokens.$ifxSize100 0 tokens.$ifxSize100;\r\n    \r\n    height: 34px;\r\n\r\n    background-color: tokens.$ifxColorBaseWhite;\r\n\r\n    transition: all 100ms ease;\r\n    transition-property: color, background;\r\n    \r\n    font: tokens.$ifxBodyBodySemibold04;\r\n\r\n    &:focus-visible {\r\n        color: tokens.$ifxColorBaseWhite;\r\n        background-color: tokens.$ifxColorOcean500;\r\n    }\r\n\r\n    &:hover {         \r\n        color: tokens.$ifxColorBaseWhite;\r\n        background-color: tokens.$ifxColorOcean600;\r\n        \r\n        cursor: pointer;\r\n    }\r\n    \r\n    &:active {\r\n        background-color: tokens.$ifxColorOcean700;\r\n    }\r\n    \r\n    &.segment--selected {\r\n        color: tokens.$ifxColorBaseWhite;\r\n        \r\n        background-color: tokens.$ifxColorOcean500;\r\n    }\r\n\r\n    &.segment--small {\r\n        height: 30px;\r\n    }\r\n}\r\n\r\n.segment::after {\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n\r\n    width: 100%;\r\n    height: 100%;\r\n\r\n    outline: tokens.$ifxBorderRadius12 solid tokens.$ifxColorEngineering300;\r\n    border-radius: tokens.$ifxBorderRadius12;\r\n\r\n    content: '';\r\n}","import { h, Component, Event, EventEmitter, Prop } from \"@stencil/core\";\r\n\r\n@Component ({\r\n    tag: 'ifx-segment',\r\n    styleUrl: 'segment.scss',\r\n    shadow: true\r\n})\r\n\r\nexport class Segment {\r\n    @Event({ composed: false }) segmentSelect: EventEmitter<number>;\r\n\r\n    @Prop() icon: string;\r\n    @Prop() segmentIndex: number;\r\n    @Prop({ mutable: true }) selected: boolean = false;\r\n    @Prop() value!: string;\r\n\r\n    handleSegmentClick() {\r\n        if (this.selected) return;\r\n        this.selected = true;\r\n        this.segmentSelect.emit(this.segmentIndex);\r\n    }\r\n    \r\n    handleSegmentKeyDown(event: KeyboardEvent) {\r\n        if (event.code === 'Enter' || event.code === 'Space') {\r\n            if (this.selected) return;\r\n            this.selected = true;\r\n            this.segmentSelect.emit(this.segmentIndex);\r\n        }\r\n    }\r\n\r\n    render() {\r\n        return (\r\n            <div class={`segment ${this.selected ? 'segment--selected' : ''}`} \r\n                tabIndex={0}\r\n                onClick={() => {this.handleSegmentClick()}}\r\n                onKeyDown={(e) => {this.handleSegmentKeyDown(e)}}>\r\n                <ifx-icon icon={this.icon}></ifx-icon> <slot />\r\n            </div>\r\n        );\r\n    }\r\n}"],"mappings":"kDAAA,MAAMA,EAAa,uvB,MCQNC,EAAO,MANpB,WAAAC,CAAAC,G,uDAW6BC,KAAQC,SAAY,KA2BhD,CAxBG,kBAAAC,GACI,GAAIF,KAAKC,SAAU,OACnBD,KAAKC,SAAW,KAChBD,KAAKG,cAAcC,KAAKJ,KAAKK,a,CAGjC,oBAAAC,CAAqBC,GACjB,GAAIA,EAAMC,OAAS,SAAWD,EAAMC,OAAS,QAAS,CAClD,GAAIR,KAAKC,SAAU,OACnBD,KAAKC,SAAW,KAChBD,KAAKG,cAAcC,KAAKJ,KAAKK,a,EAIrC,MAAAI,GACI,OACIC,EAAA,OAAAC,IAAA,2CAAKC,MAAO,WAAWZ,KAAKC,SAAW,oBAAsB,KACzDY,SAAU,EACVC,QAAS,KAAOd,KAAKE,oBAAoB,EACzCa,UAAYC,IAAOhB,KAAKM,qBAAqBU,EAAE,GAC/CN,EAAA,YAAAC,IAAA,2CAAUM,KAAMjB,KAAKiB,OAAiB,IAACP,EAAQ,QAAAC,IAAA,6C","ignoreList":[]}

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

@@ -1 +0,0 @@
-{"version":3,"names":["breadcrumbItemCss","BreadcrumbItem","constructor","hostRef","this","isLastItem","hasDropdownMenu","handleOutsideClick","event","path","composedPath","includes","el","closeDropdownMenu","handleKeyDown","ev","key","toggleDropdownMenu","getDropdownMenu","dropdownMenu","shadowRoot","querySelector","menuWrapperEventReEmitter","emittedElement","detail","getMenuIconWrapper","handleClassList","type","className","classList","menuWrapper","isDropdownMenuOpen","contains","handleLastItem","breadcrumbItems","closest","querySelectorAll","length","generateUniqueId","prefix","Math","random","toString","substring","componentWillLoad","uniqueId","componentDidUpdate","componentWillRender","setHasDropdownMenuState","getIfxDropdownMenuComponent","componentDidLoad","iconMenuWrapper","isOpen","render","h","class","role","tabindex","onClick","name","id"],"sources":["src/components/breadcrumb/breadcrumb-item.scss?tag=ifx-breadcrumb-item&encapsulation=shadow","src/components/breadcrumb/breadcrumb-item.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n@use \"../../global/font.scss\";\r\n\r\n.breadcrumb-parent {\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  padding: 0px;\r\n  gap: tokens.$ifxSpace150;\r\n  min-height: tokens.$ifxSize300;\r\n  justify-content: center;\r\n\r\n  &:hover {\r\n    cursor: pointer;\r\n  }\r\n\r\n  & .breadcrumb-wrapper {\r\n    display: flex;\r\n    flex-direction: row;\r\n    align-items: center;\r\n    padding: 0px;\r\n    gap: tokens.$ifxSpace100;\r\n    position: relative;\r\n\r\n    & .dropdown-menu {\r\n      display: none;\r\n      position: absolute;\r\n      top: 20px;\r\n\r\n      &.open {\r\n        display: block;\r\n      }\r\n    }\r\n\r\n    & a {\r\n      text-decoration: none;\r\n      color: tokens.$ifxColorBaseBlack;\r\n      font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\r\n\r\n      font-style: normal;\r\n      font-weight: 400;\r\n      font-size: tokens.$ifxFontSizeS;\r\n      line-height: tokens.$ifxLineHeightS;\r\n      display: flex;\r\n      align-items: center;\r\n      color: tokens.$ifxColorBaseBlack;\r\n      flex-direction: column;\r\n      justify-content: center;\r\n      padding: 0px;\r\n      border-bottom: 1px solid #1D1D1D;\r\n    }\r\n  }\r\n\r\n  & .breadcrumb-divider {\r\n    width: 10px;\r\n    height: tokens.$ifxSize200;\r\n    color: tokens.$ifxColorEngineering200;\r\n    line-height: 13px;\r\n    font-size: tokens.$ifxFontSizeXl;\r\n\r\n    margin-right: 12px;\r\n  }\r\n}","import { Component, h, Element, State, Listen } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'ifx-breadcrumb-item',\r\n  styleUrl: 'breadcrumb-item.scss',\r\n  shadow: true,\r\n})\r\nexport class BreadcrumbItem {\r\n\r\n  @State() isLastItem: boolean = false;\r\n  @Element() el;\r\n  private emittedElement: HTMLElement;\r\n  @State() uniqueId: string;\r\n  @State() hasDropdownMenu: boolean = false;\r\n\r\n  @Listen('mousedown', { target: 'document' })\r\n  handleOutsideClick(event: MouseEvent) {\r\n    const path = event.composedPath();\r\n    if (!path.includes(this.el)) {\r\n      this.closeDropdownMenu();\r\n    }\r\n  }\r\n\r\n  @Listen('keydown')\r\n  handleKeyDown(ev: KeyboardEvent) {\r\n    if (ev.key === 'Enter' || ev.key === ' ') {\r\n      this.toggleDropdownMenu();\r\n    } else if (ev.key === 'Escape') {\r\n      this.closeDropdownMenu();\r\n    }\r\n  }\r\n\r\n  getDropdownMenu() {\r\n    const dropdownMenu = this.el.shadowRoot.querySelector('.dropdown-menu');\r\n    return dropdownMenu\r\n  }\r\n\r\n  @Listen('breadcrumbMenuIconWrapper')\r\n  menuWrapperEventReEmitter(event: CustomEvent<HTMLElement>) { \r\n    this.emittedElement = event.detail;\r\n  }\r\n\r\n  getMenuIconWrapper(): HTMLElement | undefined {\r\n    return this.emittedElement;\r\n  }\r\n\r\n  handleClassList(el, type, className) {\r\n    el.classList[type](className)\r\n  }\r\n\r\n  closeDropdownMenu() {\r\n    if(this.hasDropdownMenu) {\r\n      const dropdownMenu = this.getDropdownMenu()\r\n      const menuWrapper = this.getMenuIconWrapper()\r\n      this.handleClassList(dropdownMenu, 'remove', 'open')\r\n      this.handleClassList(menuWrapper, 'remove', 'show')\r\n    }\r\n  }\r\n\r\n  toggleDropdownMenu() { \r\n    if(this.hasDropdownMenu) {\r\n      const dropdownMenu = this.getDropdownMenu()\r\n      const menuWrapper = this.getMenuIconWrapper()\r\n      this.handleClassList(dropdownMenu, 'toggle', 'open')\r\n      this.handleClassList(menuWrapper, 'toggle', 'show')\r\n    }\r\n  }\r\n\r\n  isDropdownMenuOpen(): boolean {\r\n    const dropdownMenu = this.getDropdownMenu()\r\n    return this.hasDropdownMenu && dropdownMenu && dropdownMenu.classList.contains('open')\r\n  }\r\n\r\n  handleLastItem() { \r\n    const breadcrumbItems = this.el.closest('ifx-breadcrumb').querySelectorAll('ifx-breadcrumb-item')\r\n    if(this.el === breadcrumbItems[breadcrumbItems.length-1]) { \r\n      this.isLastItem = true;\r\n    } else this.isLastItem = false;\r\n  }\r\n\r\n  generateUniqueId(prefix = 'id') {\r\n    return `${prefix}-${Math.random().toString(36).substring(2, 9)}`;\r\n  }\r\n\r\n  componentWillLoad() { \r\n    if (!this.uniqueId) {\r\n      this.uniqueId = this.generateUniqueId('breadcrumb-dropdown');\r\n    }\r\n    this.handleLastItem()\r\n  }\r\n\r\n  componentDidUpdate() {\r\n    this.handleLastItem()\r\n  }\r\n\r\n  componentWillRender() { \r\n    this.setHasDropdownMenuState()\r\n  }\r\n\r\n  setHasDropdownMenuState() { \r\n    const dropdownMenu = this.getIfxDropdownMenuComponent();\r\n    if(dropdownMenu) {\r\n      this.hasDropdownMenu = !!dropdownMenu;\r\n    }\r\n  }\r\n\r\n  getIfxDropdownMenuComponent() { \r\n    const dropdownMenu = this.el.querySelector('ifx-dropdown-menu');\r\n    return dropdownMenu;\r\n  }\r\n\r\n  componentDidLoad() { \r\n    const dropdownMenu = this.getIfxDropdownMenuComponent();\r\n\r\n    if(!this.hasDropdownMenu) { \r\n      const iconMenuWrapper = this.getMenuIconWrapper();\r\n      this.handleClassList(iconMenuWrapper, 'toggle', 'hide');\r\n    } else { \r\n      dropdownMenu.isOpen = true;\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <li class='breadcrumb-parent' aria-current={`${this.isLastItem ? 'page' : \"\"}`}>\r\n       <li role=\"button\" tabindex={this.hasDropdownMenu ? 0 : -1} class=\"breadcrumb-wrapper\" onClick={() => this.toggleDropdownMenu()} aria-controls={this.uniqueId} aria-haspopup=\"menu\" aria-label=\"Toggle dropdown menu\">\r\n          <slot name='label'/>\r\n          <div id={this.uniqueId} class=\"dropdown-menu\" aria-expanded={this.isDropdownMenuOpen()} aria-label=\"Dropdown menu\">\r\n            <slot />\r\n          </div>\r\n        </li>\r\n        {!this.isLastItem && <span class=\"breadcrumb-divider\" aria-hidden=\"true\">/</span>}\r\n      </li>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"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","ignoreList":[]}

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

@@ -1 +0,0 @@
-{"version":3,"names":["contentSwitcherItemCss","ContentSwitcherItem","constructor","hostRef","this","selected","render","h","Host","key","class"],"sources":["src/components/content-switcher/content-switcher-item.scss?tag=ifx-content-switcher-item&encapsulation=shadow","src/components/content-switcher/content-switcher-item.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n\r\n.ifx-content-switcher-item {\r\n    all: unset;\r\n\r\n    height: tokens.$ifxSize450;\r\n    box-sizing: border-box;\r\n    border-radius: tokens.$ifxBorderRadiusRound;\r\n    border: 3px solid transparent; // avoid jumping around\r\n    padding: 7px tokens.$ifxSize250;\r\n\r\n    font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\r\n\r\n\r\n    font-weight: tokens.$ifxFontWeightSemibold;\r\n    font-size: tokens.$ifxSize175;\r\n    line-height: 20px;\r\n\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    gap: tokens.$ifxSpace100;\r\n    background-color: transparent;\r\n\r\n    &.selected {\r\n        color: tokens.$ifxColorOcean500;\r\n        background-color: tokens.$ifxColorBaseWhite;\r\n        border: 3px solid tokens.$ifxColorOcean500;\r\n    }\r\n\r\n    &:hover {\r\n        color: tokens.$ifxColorOcean600;\r\n        background-color: tokens.$ifxColorBaseWhite;\r\n        border: 3px solid tokens.$ifxColorOcean600;\r\n        cursor: pointer;\r\n    }\r\n\r\n    &:active {\r\n        color: tokens.$ifxColorOcean600;\r\n        background-color: tokens.$ifxColorBaseWhite;\r\n        border: 3px solid tokens.$ifxColorOcean700;\r\n    }\r\n\r\n    &:focus {\r\n        color: tokens.$ifxColorOcean600;\r\n        background-color: tokens.$ifxColorBaseWhite;\r\n        border: 3px solid tokens.$ifxColorOcean600;\r\n    }\r\n}\r\n","import { Component, h, Host, Prop } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'ifx-content-switcher-item',\r\n  styleUrl: './content-switcher-item.scss',\r\n  shadow: true,\r\n})\r\nexport class ContentSwitcherItem {\r\n  @Prop() selected: boolean = false;\r\n  @Prop() value: string;\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <button class={'ifx-content-switcher-item' + (this.selected ? ' selected' : '')}>\r\n          <slot></slot>\r\n        </button>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"kDAAA,MAAMA,EAAyB,mtB,MCOlBC,EAAmB,MALhC,WAAAC,CAAAC,G,UAMUC,KAAQC,SAAY,KAY7B,CATC,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,UAAAE,IAAA,2CAAQC,MAAO,6BAA+BN,KAAKC,SAAW,YAAc,KAC1EE,EAAa,QAAAE,IAAA,8C","ignoreList":[]}

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

@@ -1 +0,0 @@
-{"version":3,"names":["templatesUiCss","TemplatesUI","constructor","hostRef","this","tableTemplate","getAssetPath","wizardTemplate","toggleTemplate","currTemp","templates","el","shadowRoot","querySelector","querySelectorAll","forEach","template","handleError","e","alertWrapper","detail","classList","add","remove","filterTemplates","title","backBtn","closeAlert","render","h","key","class","onClick","shape","variant","icon","target","size","name","thumbnail"],"sources":["src/components/templates/templates-ui/templates-ui.scss?tag=ifx-templates-ui&encapsulation=shadow","src/components/templates/templates-ui/templates-ui.tsx"],"sourcesContent":["* { \r\n  padding: 0;\r\n  margin: 0;\r\n}\r\n\r\n.templates__container { \r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n\r\n  & .back__btn-wrapper { \r\n    display: none;\r\n    &.show { \r\n      display: flex;\r\n      justify-content: space-between;\r\n      width: 100%;\r\n    }\r\n\r\n    & .alert__wrapper { \r\n      display: none;\r\n\r\n      &.show { \r\n        display: block;\r\n      }\r\n    }\r\n  }\r\n\r\n  & .templates__wrapper { \r\n    display: flex;\r\n    padding: 20px 0px;\r\n    gap: 20px;\r\n    // justify-content: space-evenly;\r\n    flex-wrap: wrap;\r\n  }\r\n\r\n  & .templates__title { \r\n    &.hide { \r\n      display: none;\r\n    }\r\n  }\r\n}\r\n\r\n\r\n\r\n","import { Component, h, Listen, Element, getAssetPath } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'ifx-templates-ui',\r\n  styleUrl: 'templates-ui.scss',\r\n  shadow: true,\r\n  assetsDirs: ['assets']\r\n})\r\n\r\nexport class TemplatesUI {\r\n  @Element() el: HTMLElement;\r\n\r\n  private tableTemplate = getAssetPath(`https://raw.githubusercontent.com/Infineon/public-assets/refs/heads/main/table_template.png`);\r\n  private wizardTemplate = getAssetPath(`https://raw.githubusercontent.com/Infineon/public-assets/refs/heads/main/wizard_template.png`);\r\n\r\n\r\n  toggleTemplate(currTemp) { \r\n    const templates = this.el.shadowRoot.querySelector('.templates__wrapper').querySelectorAll('ifx-template');\r\n      templates.forEach((template) => { \r\n        template.toggleTemplate(currTemp)\r\n      })\r\n  }\r\n\r\n  @Listen('fieldError')\r\n  handleError(e) { \r\n    const alertWrapper = this.el.shadowRoot.querySelector('.alert__wrapper');\r\n    if(e.detail) { \r\n      alertWrapper.classList.add('show');\r\n    } else { \r\n      alertWrapper.classList.remove('show');\r\n    }\r\n  }\r\n\r\n  @Listen('toggleTemplates')\r\n  filterTemplates(e) {\r\n    const title = this.el.shadowRoot.querySelector('.templates__title');\r\n    const backBtn = this.el.shadowRoot.querySelector('.back__btn-wrapper');\r\n    if(e.detail) { \r\n      title.classList.add('hide');\r\n      if(e.detail !== 'details') { \r\n        backBtn.classList.add('show');\r\n      }\r\n      this.toggleTemplate(e.detail)\r\n    } else { \r\n      title.classList.remove('hide');\r\n      backBtn.classList.remove('show');\r\n      this.toggleTemplate(null)\r\n    }\r\n  }\r\n\r\n  closeAlert() { \r\n    const alertWrapper = this.el.shadowRoot.querySelector('.alert__wrapper');\r\n    alertWrapper.classList.remove('show');\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div class='templates__container'>\r\n        <div class=\"back__btn-wrapper\">\r\n          <ifx-icon-button onClick={() => this.filterTemplates(false)} shape=\"round\" variant=\"tertiary\" icon=\"arrow-left-16\" target=\"_blank\" size=\"m\" />\r\n          <div class=\"alert__wrapper\">\r\n            <ifx-alert onClick={() => this.closeAlert()} aria-live=\"assertive\" variant=\"danger\" icon=\"c-info-16\">All fields are mandatory</ifx-alert>\r\n          </div>\r\n        </div>\r\n        <h2 class=\"templates__title\">Choose your template</h2>\r\n        <div class=\"templates__wrapper\">\r\n          <ifx-template name='template-01' thumbnail={this.tableTemplate} />\r\n          <ifx-template name='template-02' thumbnail={this.wizardTemplate} />\r\n        </div>\r\n      </div>\r\n    )\r\n  }\r\n}\r\n"],"mappings":"yDAAA,MAAMA,EAAiB,0iB,MCSVC,EAAW,MAPxB,WAAAC,CAAAC,G,UAUUC,KAAAC,cAAgBC,EAAa,+FAC7BF,KAAAG,eAAiBD,EAAa,+FA2DvC,CAxDC,cAAAE,CAAeC,GACb,MAAMC,EAAYN,KAAKO,GAAGC,WAAWC,cAAc,uBAAuBC,iBAAiB,gBACzFJ,EAAUK,SAASC,IACjBA,EAASR,eAAeC,EAAS,G,CAKvC,WAAAQ,CAAYC,GACV,MAAMC,EAAef,KAAKO,GAAGC,WAAWC,cAAc,mBACtD,GAAGK,EAAEE,OAAQ,CACXD,EAAaE,UAAUC,IAAI,O,KACtB,CACLH,EAAaE,UAAUE,OAAO,O,EAKlC,eAAAC,CAAgBN,GACd,MAAMO,EAAQrB,KAAKO,GAAGC,WAAWC,cAAc,qBAC/C,MAAMa,EAAUtB,KAAKO,GAAGC,WAAWC,cAAc,sBACjD,GAAGK,EAAEE,OAAQ,CACXK,EAAMJ,UAAUC,IAAI,QACpB,GAAGJ,EAAEE,SAAW,UAAW,CACzBM,EAAQL,UAAUC,IAAI,O,CAExBlB,KAAKI,eAAeU,EAAEE,O,KACjB,CACLK,EAAMJ,UAAUE,OAAO,QACvBG,EAAQL,UAAUE,OAAO,QACzBnB,KAAKI,eAAe,K,EAIxB,UAAAmB,GACE,MAAMR,EAAef,KAAKO,GAAGC,WAAWC,cAAc,mBACtDM,EAAaE,UAAUE,OAAO,O,CAGhC,MAAAK,GACE,OACEC,EAAA,OAAAC,IAAA,2CAAKC,MAAM,wBACTF,EAAK,OAAAC,IAAA,2CAAAC,MAAM,qBACTF,EAAA,mBAAAC,IAAA,2CAAiBE,QAAS,IAAM5B,KAAKoB,gBAAgB,OAAQS,MAAM,QAAQC,QAAQ,WAAWC,KAAK,gBAAgBC,OAAO,SAASC,KAAK,MACxIR,EAAK,OAAAC,IAAA,2CAAAC,MAAM,kBACTF,EAAW,aAAAC,IAAA,2CAAAE,QAAS,IAAM5B,KAAKuB,aAAY,YAAY,YAAYO,QAAQ,SAASC,KAAK,aAAgD,8BAG7IN,EAAI,MAAAC,IAAA,2CAAAC,MAAM,oBAA4C,wBACtDF,EAAK,OAAAC,IAAA,2CAAAC,MAAM,sBACTF,EAAc,gBAAAC,IAAA,2CAAAQ,KAAK,cAAcC,UAAWnC,KAAKC,gBACjDwB,EAAA,gBAAAC,IAAA,2CAAcQ,KAAK,cAAcC,UAAWnC,KAAKG,kB","ignoreList":[]}

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

@@ -1 +0,0 @@
-{"version":3,"names":["navbarItemCss","NavbarProfile","constructor","hostRef","this","showLabel","href","imageUrl","target","alt","userName","internalHref","isMenuItem","hasChildNavItems","internalImageUrl","type","value","defaultProfileImage","handleOutsideClick","event","path","composedPath","itemMenu","getItemMenu","classList","contains","includes","el","closeItemMenu","componentWillLoad","setHref","setImage","sidebarItems","getNavbarItems","length","componentDidLoad","setProfileGap","navItems","appendNavItemToMenu","hideComponent","style","display","showComponent","handleClassList","className","querySelectorAll","getNavBarItem","navItem","shadowRoot","querySelector","relocateUsingSlot","forEach","item","setAttribute","isValidHttpUrl","string","url","URL","_","protocol","toLowerCase","trim","undefined","innerContentWrapper","labelWrapper","labelSlot","nodes","assignedNodes","menu","menuItem","toggleItemMenu","itemHasNestedItems","childNavItem","render","h","key","class","onClick","src","encodeURIComponent","onSlotchange","name"],"sources":["src/components/navigation/navbar/navbar-item.scss?tag=ifx-navbar-profile&encapsulation=shadow","src/components/navigation/navbar/navbar-profile.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n\r\n:host(.hidden) {\r\n  display: none;\r\n}\r\n\r\n.navbar__item {\r\n  position: relative;\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  padding: 0px 8px;\r\n  flex: none;\r\n  order: 0;\r\n  flex-grow: 0;\r\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\r\n\r\n\r\n  text-decoration: none;\r\n  font-weight: 400;\r\n  font-size: 16px;\r\n  color: tokens.$ifxColorBaseBlack;\r\n\r\n  \r\n\r\n  &.hide { \r\n    display: none;\r\n  }\r\n\r\n  &.isParent { \r\n    gap: 8px;\r\n  }\r\n\r\n  & .navItemIconWrapper { \r\n    transition: .3s;\r\n    display: flex;\r\n  }\r\n\r\n  &.open { \r\n    & .navItemIconWrapper { \r\n      transform: rotate(-180deg);\r\n      transition: .3s;\r\n    }\r\n  }\r\n\r\n  &:hover {\r\n    color: tokens.$ifxColorOcean500;\r\n    cursor: pointer;\r\n\r\n    & .username__tooltip { \r\n      display: block;\r\n    }\r\n\r\n    & .navbar__container-right-content-navigation-item-icon-wrapper { \r\n      & .initials__wrapper { \r\n        cursor: pointer;\r\n        background-color: tokens.$ifxColorOcean600;\r\n      }\r\n    }\r\n  }\r\n\r\n  &.remove {\r\n    display: none;\r\n  }\r\n\r\n  &.removeLabel {\r\n    & .label__wrapper {\r\n      display: none;\r\n    }\r\n  }\r\n\r\n  & .number__indicator-wrapper { \r\n    position: relative;\r\n    top: -11px;\r\n  }\r\n\r\n  & .navbar__container-right-content-navigation-item-icon-wrapper {\r\n    position: relative;\r\n    display: flex;\r\n    flex-direction: row;\r\n    justify-content: center;\r\n    align-items: center;\r\n    padding: 0px;\r\n    gap: 8px;\r\n    flex: none;\r\n    order: 0;\r\n    flex-grow: 0;\r\n\r\n \r\n    & .username__tooltip { \r\n      display: none;\r\n      position: absolute;\r\n      top: 35px;\r\n      right: 0;\r\n      text-wrap: nowrap;\r\n      padding: 1px 5px;\r\n      font-size: 13px;\r\n      font-family: \"Source Sans 3\";\r\n      background-color: black;\r\n      color: #fff;\r\n      z-index: 99;\r\n    }\r\n\r\n    &:hover { \r\n      & .username__tooltip { \r\n        display: block;\r\n      }\r\n    }\r\n\r\n    & .initials__wrapper { \r\n      display: flex;\r\n      width: 24px;\r\n      height: 24px;\r\n      justify-content: center;\r\n      align-items: center;\r\n      border-radius: 100%;\r\n      background-color: tokens.$ifxColorOcean500;\r\n\r\n\r\n      & .initials { \r\n        color: #FFF;\r\n        text-align: center;\r\n        font-family: \"Source Sans 3\";\r\n        font-size: 14px;\r\n        font-style: normal;\r\n        font-weight: 600;\r\n        line-height: 20px; \r\n\r\n        -webkit-touch-callout: none;\r\n        -webkit-user-select: none;\r\n        -khtml-user-select: none;\r\n        -moz-user-select: none;\r\n        -ms-user-select: none;\r\n        user-select: none;\r\n      \r\n      }\r\n    }\r\n\r\n    & img { \r\n      width: 24px; \r\n      height: 24px;\r\n      border-radius: 100%;\r\n    }\r\n\r\n    &.removeWrapper {\r\n      display: none;\r\n    }\r\n\r\n    &.hide {\r\n      display: none;\r\n    }\r\n  }\r\n}\r\n\r\n.container { \r\n  position: relative;\r\n  \r\n       &:focus{\r\n    outline: none;\r\n      box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean500;\r\n  }\r\n\r\n  & .sub__layer-back-button { \r\n    display: none;\r\n    &.show { \r\n      display: flex;\r\n      justify-content: flex-start;\r\n\r\n      & .back__button-wrapper { \r\n        display: flex;\r\n        align-items: center;\r\n        gap: tokens.$ifxSpace100;\r\n        padding: tokens.$ifxSpace100 0 tokens.$ifxSpace200 0;\r\n        color: tokens.$ifxColorOcean500;\r\n        font-size: 16px;\r\n        font-style: normal;\r\n        font-weight: 600;\r\n        line-height: 24px;\r\n\r\n        & span, & ifx-icon { \r\n          &:hover { \r\n            cursor: pointer;\r\n          }\r\n        }\r\n\r\n      }\r\n    }\r\n  }\r\n\r\n  &.hide { \r\n    display: none;\r\n  }\r\n\r\n  & .inner__content-wrapper { \r\n    position: relative;\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    gap: 8px;\r\n    &.no-gap { \r\n      gap: 0px;\r\n    }\r\n\r\n    & .navbar__container-right-content-navigation-item-icon-wrapper {\r\n      &.no-gap { \r\n        gap: 0px;\r\n      }\r\n    }\r\n\r\n    & .number__indicator-wrapper { \r\n      position: relative;\r\n      top: -11px;\r\n    }\r\n\r\n  }\r\n}\r\n\r\n.navbar-menu  {\r\n  position: absolute;\r\n  display: none;\r\n  list-style-type: none;\r\n  visibility: visible;\r\n  flex-direction: column;\r\n  width: 224px;\r\n  min-width: 224px;\r\n  background: tokens.$ifxColorBaseWhite;\r\n  box-shadow: 0px 6px 9px 0px #1d1d1d1a;\r\n  border: 1px solid tokens.$ifxColorEngineering200;\r\n  padding: 8px 0px;\r\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\r\n\r\n\r\n\r\n  &.open:not(.itemInMobileMenu) {\r\n    display: flex;\r\n  }\r\n\r\n  &.itemInMobileMenu { \r\n    display: none;\r\n  }\r\n\r\n  &.right { \r\n    left: 100%;\r\n    top: -40%;\r\n  }\r\n\r\n  &.left { \r\n    top: -40%;\r\n    right: 100%;\r\n  }\r\n\r\n  &.rightSideItemMenu { \r\n    left: initial;\r\n    right: 0px;\r\n  }\r\n}\r\n\r\n.navbar__item { \r\n    &.layer__item-parent { \r\n      color: tokens.$ifxColorBaseBlack;\r\n      font-size: 24px;\r\n      font-style: normal;\r\n      font-weight: 600;\r\n      line-height: 32px; \r\n      letter-spacing: -0.24px;\r\n      cursor: initial;\r\n\r\n      & .navbar__container-right-content-navigation-item-icon-wrapper { \r\n        & ifx-icon { \r\n          & svg { \r\n            width: 24px;\r\n            height: 24px;\r\n          }\r\n        }\r\n      }\r\n    }\r\n\r\n\r\n  &.sidebarMenuItem { \r\n    justify-content: space-between;\r\n    padding: 0;\r\n  }\r\n\r\n\r\n  &.menuItem {\r\n    text-decoration: none;\r\n    color: tokens.$ifxColorBaseBlack;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    padding: 8px 16px;\r\n    gap: 8px;\r\n    font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\r\n\r\n\r\n  \r\n    &.hide {\r\n      display: none;\r\n    }\r\n  \r\n    & .label__wrapper {\r\n      color: tokens.$ifxColorBaseBlack;\r\n      font-size: 16px;\r\n      font-style: normal;\r\n      font-weight: 400;\r\n      line-height: 24px;\r\n    }\r\n  \r\n    &:hover {\r\n      cursor: pointer;\r\n      background-color: tokens.$ifxColorEngineering200;\r\n    }\r\n  \r\n    &:active {\r\n      background-color: tokens.$ifxColorEngineering300;\r\n    }\r\n  }\r\n}\r\n\r\n.sub__layer-menu { \r\n  padding: 5px;\r\n  display: none;\r\n\r\n  &.remove__margin { \r\n    margin: 0;\r\n    padding: 0;\r\n  }\r\n \r\n  &.open { \r\n    display: block;\r\n  }\r\n}\r\n\r\n.navbar__item { \r\n  &.hide { \r\n    display: none;\r\n  }\r\n}\r\n\r\n.menuItemRightIconWrapper { \r\n  &.hide { \r\n    display: none;\r\n  }\r\n}\r\n\r\n.navItemIconWrapper { \r\n  &.hide { \r\n    display: none;\r\n  }\r\n}\r\n\r\n","import { Component, h, Element, Prop, State, Listen, Method } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: 'ifx-navbar-profile',\r\n  styleUrl: 'navbar-item.scss',\r\n  shadow: true,\r\n  assetsDirs: ['assets']\r\n})\r\n\r\nexport class NavbarProfile {\r\n\r\n  @Element() el;\r\n  @Prop() showLabel: boolean = true;\r\n  @Prop() href: string = \"\"\r\n  @Prop() imageUrl: string = \"\"\r\n  @Prop() target: string = \"_self\";\r\n  @Prop() alt: string = \"\"\r\n  @Prop() userName: string = \"\";\r\n  @State() internalHref: string = \"\"\r\n  @State() isMenuItem: boolean = false;\r\n  @State() hasChildNavItems: boolean = false;\r\n  @State() internalImageUrl: any = {type: \"\", value: \"\"}\r\n \r\n  private defaultProfileImage = `<svg width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n<rect width=\"48\" height=\"48\" fill=\"#0A8276\"/>\r\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M24 14C21.7909 14 20 15.7909 20 18C20 20.2091 21.7909 22 24 22C26.2091 22 28 20.2091 28 18C28 15.7909 26.2091 14 24 14ZM18 18C18 14.6863 20.6863 12 24 12C27.3137 12 30 14.6863 30 18C30 21.3137 27.3137 24 24 24C20.6863 24 18 21.3137 18 18ZM16.5869 28.3984C18.2683 27.0179 20.7466 26 24 26C27.2541 26 29.7324 27.0209 31.4134 28.4024C33.0562 29.7526 34 31.5119 34 33V35C34 35.5523 33.5523 36 33 36H15C14.4477 36 14 35.5523 14 35V33C14 31.5074 14.9433 29.7479 16.5869 28.3984ZM17.8561 29.9441C16.5187 31.0421 16 32.2826 16 33V34H32V33C32 32.2881 31.4818 31.0474 30.1436 29.9476C28.8436 28.8791 26.8219 28 24 28C21.1774 28 19.1557 28.8771 17.8561 29.9441Z\" fill=\"white\"/>\r\n</svg>`\r\n\r\n  @Listen('mousedown', { target: 'document' })\r\n  handleOutsideClick(event: MouseEvent) {\r\n    const path = event.composedPath();\r\n    const itemMenu = this.getItemMenu()\r\n    if(itemMenu) { \r\n      if(itemMenu.classList.contains('open')) { \r\n        if (!path.includes(this.el)) {\r\n          this.closeItemMenu();\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.setHref()\r\n    this.setImage()\r\n    const sidebarItems = this.getNavbarItems();\r\n    if (sidebarItems.length !== 0) {\r\n      this.hasChildNavItems = true;\r\n    } else {\r\n      this.hasChildNavItems = false;\r\n    }\r\n  }\r\n\r\n  componentDidLoad() { \r\n    this.setProfileGap()\r\n    if(this.hasChildNavItems) { \r\n      const navItems = this.getNavbarItems();\r\n      this.appendNavItemToMenu(navItems)\r\n    }\r\n  }\r\n\r\n  @Method()\r\n  async hideComponent() { \r\n    this.el.style.display = 'none';\r\n  }\r\n\r\n  @Method()\r\n  async showComponent() { \r\n    this.el.style.display = '';\r\n  }\r\n\r\n  handleClassList(el, type, className) {\r\n    el.classList[type](className)\r\n    if (type === 'contains') {\r\n      return el.classList.contains(className)\r\n    }\r\n  }\r\n\r\n  getNavbarItems() {\r\n    const navItems = this.el.querySelectorAll('ifx-navbar-item')\r\n    return navItems;\r\n  }\r\n  \r\n  getNavBarItem() { \r\n    const navItem = this.el.shadowRoot.querySelector('.navbar__item')\r\n    return navItem;\r\n  }\r\n\r\n  relocateUsingSlot(navItems) { \r\n    navItems.forEach(item => {\r\n     item.setAttribute('slot', 'first__layer')\r\n   })\r\n }\r\n\r\n  appendNavItemToMenu(navItems) { \r\n    this.relocateUsingSlot(navItems)\r\n  }\r\n\r\n  isValidHttpUrl(string) {\r\n    let url;\r\n    \r\n    try {\r\n      url = new URL(string);\r\n    } catch (_) {\r\n      return false;  \r\n    }\r\n  \r\n    return url.protocol === \"http:\" || url.protocol === \"https:\";\r\n  }\r\n\r\n  setImage() { \r\n    if (this.imageUrl.toLowerCase().trim() === \"\") {\r\n      this.internalImageUrl = {type: undefined, value: \"\"}\r\n    } else if(this.isValidHttpUrl(this.imageUrl)) {\r\n      this.internalImageUrl = { type: 'url', value: this.imageUrl}\r\n    } else { \r\n      this.internalImageUrl = { type: 'initials', value: this.imageUrl}\r\n    }\r\n  }\r\n\r\n  setHref() {\r\n    if (this.href.toLowerCase().trim() === \"\") {\r\n      this.internalHref = undefined;\r\n    } else this.internalHref = this.href;\r\n  }\r\n\r\n  setProfileGap() { \r\n    const innerContentWrapper = this.el.shadowRoot.querySelector('.inner__content-wrapper')\r\n    const labelWrapper = this.el.shadowRoot.querySelector('.label__wrapper')\r\n    const labelSlot = labelWrapper.querySelector('slot')\r\n    const nodes = labelSlot.assignedNodes();\r\n    if(!nodes.length) { \r\n      this.handleClassList(innerContentWrapper, 'add', 'no-gap')\r\n    } else { \r\n      this.handleClassList(innerContentWrapper, 'remove', 'no-gap')\r\n    }\r\n  }\r\n\r\n  getItemMenu() { \r\n    const menu = this.el.shadowRoot.querySelector('.navbar-menu');\r\n    return menu;\r\n  }\r\n\r\n  closeItemMenu() { \r\n    const itemMenu = this.getItemMenu()\r\n    const menuItem = this.getNavBarItem()\r\n    if(itemMenu) { \r\n      this.handleClassList(itemMenu, 'remove', 'open')\r\n      this.handleClassList(menuItem, 'remove', 'open')\r\n    }\r\n  }\r\n\r\n  toggleItemMenu() {\r\n    if(!this.internalHref) {     \r\n      if(this.isMenuItem && this.hasChildNavItems) { \r\n        const itemMenu = this.getItemMenu()\r\n        this.handleClassList(itemMenu, 'add', 'right')\r\n      }\r\n   \r\n      if(this.hasChildNavItems) { \r\n        const itemMenu = this.getItemMenu();\r\n        const menuItem = this.getNavBarItem()\r\n        this.handleClassList(itemMenu, 'toggle', 'open');\r\n        this.handleClassList(menuItem, 'toggle', 'open');\r\n      } \r\n    }\r\n  }\r\n\r\n  itemHasNestedItems() { \r\n    const childNavItem = this.el.shadowRoot.querySelector('ifx-navbar-item')\r\n    if(childNavItem) { \r\n      return true;\r\n    } else {\r\n      return false;\r\n    }\r\n  }\r\n\r\n\r\n  render() {\r\n    return (\r\n      <div class=\"container\">\r\n        <a href={this.internalHref} target={this.target} onClick={() => this.toggleItemMenu()} class=   {`navbar__item ${!this.showLabel ? 'removeLabel' : \"\"} ${this.hasChildNavItems ? 'isParent' : \"\"}`}>\r\n          <div class=\"inner__content-wrapper\">\r\n            <div class={`navbar__container-right-content-navigation-item-icon-wrapper`}>\r\n             {this.userName.trim() !== \"\" && <div class='username__tooltip'>{this.userName}</div>}\r\n\r\n             {this.internalImageUrl.type !== 'initials' && \r\n              <img src={ this.internalImageUrl.type === 'url' ? this.internalImageUrl.value : `data:image/svg+xml,${encodeURIComponent(this.defaultProfileImage)}`} alt={this.alt} />}\r\n\r\n              {this.internalImageUrl.type === 'initials' && \r\n              <div class=\"initials__wrapper\">\r\n                <span class=\"initials\">{this.internalImageUrl.value}</span>\r\n              </div>}\r\n              \r\n            </div>\r\n            <span class=\"label__wrapper\">\r\n              <slot onSlotchange={() => this.setProfileGap()} />\r\n            </span>\r\n          </div>\r\n          {/* {this.userName.trim() !== \"\" && <div class='username__tooltip'>{this.userName}</div>} */}\r\n        </a>\r\n        \r\n        {this.hasChildNavItems && <ul class='navbar-menu rightSideItemMenu'> <slot name=\"first__layer\" /> </ul>}\r\n      </div>\r\n    )\r\n  }\r\n}"],"mappings":"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","ignoreList":[]}

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

@@ -1,2 +0,0 @@
-import{r as e,h as i,a}from"./p-PqnYwNKt.js";import{i as t}from"./p-CmdmgBUp.js";const n='.container{display:flex;flex-direction:column;gap:10px}.alert__wrapper{margin-bottom:40px}.snippet__wrapper{display:flex;flex-direction:column;gap:5px;position:sticky;top:0;left:0;z-index:99;background-color:white}.html-wrapper{background:rgb(38, 38, 38);padding:20px;color:white;font-family:monospace}.html-wrapper button{position:absolute;right:0px;bottom:0px;background:rgba(0, 0, 0, 0.85);color:#C9CDCF;border:0 none;padding:4px 10px;font-size:0.75rem;font-family:"Nunito Sans";font-weight:700;border-top:1px solid rgba(255, 255, 255, 0.1);border-left:1px solid rgba(255, 255, 255, 0.1);margin-left:-1px;border-radius:4px 0 0 0;cursor:pointer}.html-wrapper .component-name{color:#A8FF60}.html-wrapper .attribute-name{color:rgb(150, 203, 254)}.html-wrapper .attribute-value{color:rgb(180, 116, 221)}.preview__container{box-sizing:border-box;display:flex;align-items:center;padding:2px;flex-wrap:wrap;gap:4px}.preview__container .no-results{width:100%;text-align:center}.preview__container .preview__container-item{display:flex;justify-content:center;align-items:center;border:1px solid #f1f1f1;padding:2px;width:50px;height:50px;position:relative}.preview__container .preview__container-item:active{border-color:#378375}.preview__container .preview__container-item:hover{cursor:pointer}.preview__container .preview__container-item.copied::after{z-index:50;content:"copied!";position:absolute;top:0;left:50px;background-color:#000;color:white;padding:3px;border-radius:4px}';const o=class{constructor(i){e(this,i);this.iconsArray=[];this.isCopied=false;this.copiedIcon=null;this.htmlTag='<ifx-icon icon="calendar-16"></ifx-icon>';this.iconName=`""`;this.searchTerm=""}handleCopiedText(){this.isCopied=true;setTimeout((()=>{this.isCopied=false}),2e3)}copyIconText(e){this.htmlTag=`<ifx-icon icon="${e}"></ifx-icon>`;this.iconName=`"${e}"`;this.copiedIcon=e}copyHtmlString(){const e=`<ifx-icon icon=${this.iconName}></ifx-icon>`;navigator.clipboard.writeText(e);this.handleCopiedText()}get filteredIcons(){const e=this.searchTerm.toLowerCase().trim();if(!e)return this.iconsArray;return this.iconsArray.filter((i=>i.toLowerCase().includes(e)))}getIconIndex(e){return this.iconsArray.indexOf(e)}handleIconFilter(){const e=this.el.shadowRoot.querySelector("#search__field");e.addEventListener("ifxInput",(e=>{this.searchTerm=e.detail}))}componentWillLoad(){this.iconsArray=Object.keys(t)}componentDidLoad(){this.handleIconFilter()}render(){return i("div",{key:"e666e3280c175252cb2ac5cde1169ea41bcb24d4",class:"container"},i("div",{key:"ac61e08dfaaa008b0637957af4ee656cf597fd41",class:"alert__wrapper"},i("ifx-notification",{key:"0d42e27cb1efe0e97765391071b197aa445d631e",icon:"c-check-16",variant:"neutral","link-text":"Figma icon library","link-href":"https://www.figma.com/design/yWwaLoqsWLWygDxXfvdym9/Infineon-DDS-%7C-UI-icon-library?node-id=13284-1289&p=f&t=SD6EdmXaSufsjPCv-0","link-target":"_blank"},"You can also find the UI icons in Figma for use in mockups.")),i("div",{key:"2618b897fa79c422a095dd9263332d28ebb4db75",class:"snippet__wrapper"},i("div",{key:"c75d8b81f0c3ff6c96565675112dbad049a8012a",class:"search__wrapper"},i("ifx-search-field",{key:"1081c41f8cdc5ad0470837599c9d172ff50b2c2c",id:"search__field",size:"m","show-delete-icon":"true",value:"",autocomplete:"on",placeholder:"Search icon"})),i("div",{key:"c9cc3a3aca0105fd296d2735644158bd1ec350ec",class:"html-wrapper"},i("span",{key:"fcaa0a2e86e4e5d0394d46af7239e8e284b9acf5",class:"html-tag"},"<"),i("span",{key:"16a3c1146793b366e875e36b1bb5b7e0495860ca",class:"component-name"},"ifx-icon"),i("span",{key:"7019361f770390a98f4bb1f1f4e028eb1a65c438",class:"attribute-name"}," icon"),"=",i("span",{key:"258e0b53956a9b280a49cbb74afb5b4816f048f6",class:"attribute-value"},this.iconName),i("span",{key:"c8d007dfd3e0261be88766463a5bf828a96ed7ae",class:"html-tag"},">"),i("span",{key:"891ca64df634ba0bcacf27fb5c4f7dc5dd39f0a2",class:"html-tag"},"</"),i("span",{key:"c605e35e086170d6cfe63634f1932fe8caf068f3",class:"component-name"},"ifx-icon"),i("span",{key:"9f3f6dd560bd4636368a1ad88daf01bf41b598fc",class:"html-tag"},">"),i("button",{key:"dbcb93abeb70b44f2d78e6221278b7da1845e18f",onClick:()=>this.copyHtmlString()},this.isCopied?"Copied":"Copy"))),i("div",{key:"c5e3d90f73296fa3d8fd65359945c4523a3e7e70",class:"preview__container"},this.filteredIcons.map((e=>i("div",{key:e,class:`preview__container-item ${this.isCopied&&this.copiedIcon===e?"copied":""}`,onClick:()=>this.copyIconText(e)},i("ifx-icon",{icon:e})))),this.filteredIcons.length===0&&i("div",{key:"4396ce4663eba4c06b11a72dd765df1a7bed84e0",class:"no-results"},'No icons found matching "',this.searchTerm,'"')))}get el(){return a(this)}};o.style=n;export{o as ifx_icons_preview};
-//# sourceMappingURL=p-9f51c51a.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["iconsPreviewCss","IconsPreview","constructor","hostRef","this","iconsArray","isCopied","copiedIcon","htmlTag","iconName","searchTerm","handleCopiedText","setTimeout","copyIconText","icon","copyHtmlString","copiedTag","navigator","clipboard","writeText","filteredIcons","term","toLowerCase","trim","filter","includes","getIconIndex","indexOf","handleIconFilter","searchField","el","shadowRoot","querySelector","addEventListener","e","detail","componentWillLoad","Object","keys","icons","componentDidLoad","render","h","key","class","variant","id","size","value","autocomplete","placeholder","onClick","map","length"],"sources":["src/components/icons-preview/icons-preview.scss?tag=ifx-icons-preview&encapsulation=shadow","src/components/icons-preview/icons-preview.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n\r\n.container {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 10px;\r\n}\r\n\r\n.alert__wrapper { \r\n  margin-bottom: 40px;\r\n}\r\n\r\n.snippet__wrapper { \r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 5px;\r\n  position: sticky;\r\n  top: 0;\r\n  left: 0;\r\n  z-index: 99;\r\n  background-color: white;\r\n}\r\n\r\n.html-wrapper {\r\n  background: rgb(38, 38, 38);\r\n  padding: 20px;\r\n  color: white;\r\n  font-family: monospace;\r\n\r\n  & button {\r\n    position: absolute;\r\n    right: 0px;\r\n    bottom: 0px;\r\n    background: rgba(0, 0, 0, 0.85);\r\n    color: #C9CDCF;\r\n    border: 0 none;\r\n    padding: 4px 10px;\r\n    font-size: tokens.$ifxFontSizeXs;\r\n    font-family: \"Nunito Sans\";\r\n    font-weight: 700;\r\n    border-top: 1px solid rgba(255, 255, 255, .1);\r\n    border-left: 1px solid rgba(255, 255, 255, .1);\r\n    margin-left: -1px;\r\n    border-radius: 4px 0 0 0;\r\n    cursor: pointer;\r\n  }\r\n\r\n  & .component-name {\r\n    color: #A8FF60;\r\n  }\r\n\r\n  & .attribute-name {\r\n    color: rgb(150, 203, 254);\r\n  }\r\n\r\n  & .attribute-value {\r\n    color: rgb(180, 116, 221);\r\n  }\r\n\r\n\r\n}\r\n\r\n.preview__container {\r\n  box-sizing: border-box;\r\n  display: flex;\r\n  align-items: center;\r\n  padding: 2px;\r\n  flex-wrap: wrap;\r\n  gap: 4px;\r\n\r\n  & .no-results { \r\n    width: 100%;\r\n    text-align: center;\r\n  }\r\n\r\n  & .preview__container-item {\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    border: 1px solid #f1f1f1;\r\n    padding: 2px;\r\n    width: 50px;\r\n    height: 50px;\r\n    position: relative;\r\n\r\n    &:active {\r\n      border-color: #378375;\r\n    }\r\n\r\n    &:hover {\r\n      cursor: pointer;\r\n    }\r\n\r\n    &.copied {\r\n      &::after {\r\n        z-index: 50;\r\n        content: 'copied!';\r\n        position: absolute;\r\n        top: 0;\r\n        left: 50px;\r\n        background-color: #000;\r\n        color: white;\r\n        padding: 3px;\r\n        border-radius: 4px;\r\n      }\r\n    }\r\n  }\r\n}","import { Component, h, Element, State } from \"@stencil/core\";\r\nimport { icons } from '@infineon/infineon-icons';\r\n\r\n@Component({\r\n  tag: 'ifx-icons-preview',\r\n  styleUrl: './icons-preview.scss',\r\n  shadow: true\r\n})\r\n\r\nexport class IconsPreview {\r\n  @State() iconsArray: string[] = [];\r\n  @State() isCopied: boolean = false;\r\n  @State() copiedIndex: number;\r\n  @State() copiedIcon: string | null = null;\r\n  @State() htmlTag: string = '<ifx-icon icon=\"calendar-16\"></ifx-icon>';\r\n  @State() iconName: string = `\"\"`;\r\n  @State() searchTerm: string = '';\r\n  @Element() el;\r\n\r\n  handleCopiedText() { \r\n    this.isCopied = true;\r\n    setTimeout(() => {\r\n      this.isCopied = false\r\n    }, 2000);\r\n  }\r\n\r\n   copyIconText(icon: string) { \r\n    this.htmlTag = `<ifx-icon icon=\"${icon}\"></ifx-icon>`;\r\n    this.iconName = `\"${icon}\"`;\r\n    this.copiedIcon = icon;\r\n  }\r\n\r\n  copyHtmlString() { \r\n    const copiedTag = `<ifx-icon icon=${this.iconName}></ifx-icon>`;\r\n    navigator.clipboard.writeText(copiedTag);\r\n    this.handleCopiedText()\r\n  }\r\n\r\n    get filteredIcons() {\r\n    const term = this.searchTerm.toLowerCase().trim();\r\n    if (!term) return this.iconsArray;\r\n    \r\n    return this.iconsArray.filter(icon => \r\n      icon.toLowerCase().includes(term)\r\n    );\r\n  }\r\n\r\n  getIconIndex(icon: string): number {\r\n    return this.iconsArray.indexOf(icon);\r\n  }\r\n\r\n  handleIconFilter() { \r\n    const searchField = this.el.shadowRoot.querySelector('#search__field');\r\n    searchField.addEventListener('ifxInput', (e) => { \r\n      this.searchTerm = e.detail;\r\n    })\r\n  }\r\n\r\n  componentWillLoad() { \r\n    this.iconsArray = Object.keys(icons);\r\n  }\r\n\r\n  componentDidLoad() { \r\n    this.handleIconFilter()\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div class='container'>\r\n        <div class=\"alert__wrapper\">\r\n            <ifx-notification \r\n              icon=\"c-check-16\" \r\n              variant=\"neutral\" \r\n              link-text=\"Figma icon library\" \r\n              link-href=\"https://www.figma.com/design/yWwaLoqsWLWygDxXfvdym9/Infineon-DDS-%7C-UI-icon-library?node-id=13284-1289&p=f&t=SD6EdmXaSufsjPCv-0\"\r\n              link-target=\"_blank\">\r\n              You can also find the UI icons in Figma for use in mockups.\r\n            </ifx-notification>\r\n        </div>\r\n        <div class=\"snippet__wrapper\">\r\n          <div class=\"search__wrapper\">\r\n            <ifx-search-field id=\"search__field\" size=\"m\" show-delete-icon=\"true\" value=\"\" autocomplete=\"on\" placeholder=\"Search icon\"></ifx-search-field>\r\n          </div>\r\n          <div class='html-wrapper'>\r\n            <span class=\"html-tag\">&lt;</span>\r\n            <span class=\"component-name\">ifx-icon</span>\r\n            <span class=\"attribute-name\"> icon</span>=<span class=\"attribute-value\">{this.iconName}</span>\r\n            <span class=\"html-tag\">&gt;</span>\r\n            <span class=\"html-tag\">&lt;/</span>\r\n            <span class=\"component-name\">ifx-icon</span>\r\n            <span class=\"html-tag\">&gt;</span>\r\n            <button onClick={() => this.copyHtmlString()}>{this.isCopied ? 'Copied' : 'Copy'}</button>\r\n          </div>\r\n        </div>\r\n        <div class=\"preview__container\">\r\n       {this.filteredIcons.map((icon) => (\r\n            <div \r\n              key={icon}\r\n              class={`preview__container-item ${\r\n                this.isCopied && this.copiedIcon === icon ? 'copied' : \"\"\r\n              }`} \r\n              onClick={() => this.copyIconText(icon)}\r\n            >\r\n              <ifx-icon icon={icon}></ifx-icon>\r\n            </div>\r\n          ))}\r\n          {this.filteredIcons.length === 0 && (\r\n          <div class=\"no-results\">No icons found matching \"{this.searchTerm}\"</div>\r\n          )}\r\n        </div>\r\n      </div>\r\n    )\r\n  }\r\n}"],"mappings":"iFAAA,MAAMA,EAAkB,s8C,MCSXC,EAAY,MANzB,WAAAC,CAAAC,G,UAOWC,KAAUC,WAAa,GACvBD,KAAQE,SAAY,MAEpBF,KAAUG,WAAkB,KAC5BH,KAAOI,QAAW,2CAClBJ,KAAQK,SAAW,KACnBL,KAAUM,WAAW,EAiG/B,CA9FC,gBAAAC,GACEP,KAAKE,SAAW,KAChBM,YAAW,KACTR,KAAKE,SAAW,KAAK,GACpB,I,CAGJ,YAAAO,CAAaC,GACZV,KAAKI,QAAU,mBAAmBM,iBAClCV,KAAKK,SAAW,IAAIK,KACpBV,KAAKG,WAAaO,C,CAGpB,cAAAC,GACE,MAAMC,EAAY,kBAAkBZ,KAAKK,uBACzCQ,UAAUC,UAAUC,UAAUH,GAC9BZ,KAAKO,kB,CAGL,iBAAIS,GACJ,MAAMC,EAAOjB,KAAKM,WAAWY,cAAcC,OAC3C,IAAKF,EAAM,OAAOjB,KAAKC,WAEvB,OAAOD,KAAKC,WAAWmB,QAAOV,GAC5BA,EAAKQ,cAAcG,SAASJ,I,CAIhC,YAAAK,CAAaZ,GACX,OAAOV,KAAKC,WAAWsB,QAAQb,E,CAGjC,gBAAAc,GACE,MAAMC,EAAczB,KAAK0B,GAAGC,WAAWC,cAAc,kBACrDH,EAAYI,iBAAiB,YAAaC,IACxC9B,KAAKM,WAAawB,EAAEC,MAAM,G,CAI9B,iBAAAC,GACEhC,KAAKC,WAAagC,OAAOC,KAAKC,E,CAGhC,gBAAAC,GACEpC,KAAKwB,kB,CAGP,MAAAa,GACE,OACEC,EAAA,OAAAC,IAAA,2CAAKC,MAAM,aACTF,EAAK,OAAAC,IAAA,2CAAAC,MAAM,kBACPF,EAAA,oBAAAC,IAAA,2CACE7B,KAAK,aACL+B,QAAQ,UACE,iCACA,+IACE,wBAAQ,gEAI1BH,EAAK,OAAAC,IAAA,2CAAAC,MAAM,oBACTF,EAAK,OAAAC,IAAA,2CAAAC,MAAM,mBACTF,EAAkB,oBAAAC,IAAA,2CAAAG,GAAG,gBAAgBC,KAAK,IAAqB,0BAAOC,MAAM,GAAGC,aAAa,KAAKC,YAAY,iBAE/GR,EAAK,OAAAC,IAAA,2CAAAC,MAAM,gBACTF,EAAM,QAAAC,IAAA,2CAAAC,MAAM,YAAsB,KAClCF,EAAM,QAAAC,IAAA,2CAAAC,MAAM,kBAAgC,YAC5CF,EAAM,QAAAC,IAAA,2CAAAC,MAAM,kBAA6B,aAACF,EAAA,QAAAC,IAAA,2CAAMC,MAAM,mBAAmBxC,KAAKK,UAC9EiC,EAAM,QAAAC,IAAA,2CAAAC,MAAM,YAAsB,KAClCF,EAAM,QAAAC,IAAA,2CAAAC,MAAM,YAAuB,MACnCF,EAAM,QAAAC,IAAA,2CAAAC,MAAM,kBAAgC,YAC5CF,EAAM,QAAAC,IAAA,2CAAAC,MAAM,YAAsB,KAClCF,EAAQ,UAAAC,IAAA,2CAAAQ,QAAS,IAAM/C,KAAKW,kBAAmBX,KAAKE,SAAW,SAAW,UAG9EoC,EAAK,OAAAC,IAAA,2CAAAC,MAAM,sBACXxC,KAAKgB,cAAcgC,KAAKtC,GACpB4B,EAAA,OACEC,IAAK7B,EACL8B,MAAO,2BACLxC,KAAKE,UAAYF,KAAKG,aAAeO,EAAO,SAAW,KAEzDqC,QAAS,IAAM/C,KAAKS,aAAaC,IAEjC4B,EAAA,YAAU5B,KAAMA,OAGnBV,KAAKgB,cAAciC,SAAW,GAC/BX,EAAA,OAAAC,IAAA,2CAAKC,MAAM,cAAY,4BAA2BxC,KAAKM,WAAU,M","ignoreList":[]}

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

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

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

@@ -1 +0,0 @@
-{"version":3,"names":["statusCss","Status","constructor","hostRef","this","border","color","componentDidLoad","isNestedInIfxComponent","el","framework","detectFramework","trackComponent","render","effectiveColor","_a","trim","containerClass","h","key","role","class","label"],"sources":["src/components/status/status.scss?tag=ifx-status&encapsulation=shadow","src/components/status/status.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n@use \"../../global/font.scss\";\r\n\r\n:host {\r\n  display: inline-block;\r\n}\r\n\r\n.container {\r\n  display: flex;\r\n  min-height: 1.25em;\r\n  align-items: center;\r\n  padding: 0 tokens.$ifxSpace100;\r\n  border-radius: tokens.$ifxBorderRadiusRound;\r\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\r\n\r\n\r\n\r\n  &.no-border {\r\n    padding: 0; // Remove padding when border is not present\r\n  }\r\n\r\n  &.border-engineering-100{\r\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorEngineering100;\r\n  }\r\n\r\n  &.border-engineering-200{\r\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorEngineering200;\r\n  }\r\n\r\n  &.border-engineering-300{\r\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorEngineering300;\r\n  }\r\n\r\n  &.border-engineering-400{\r\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorEngineering400;\r\n  }\r\n\r\n  &.border-engineering-500{\r\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorEngineering500;\r\n  }\r\n\r\n  &.border-engineering-600{\r\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorEngineering600;\r\n  }\r\n\r\n  &.border-ocean-100 {\r\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorOcean100;\r\n  }\r\n\r\n  &.border-ocean-200 {\r\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorOcean200;\r\n  }\r\n\r\n  &.border-ocean-300 {\r\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorOcean300;\r\n  }\r\n\r\n  &.border-ocean-400 {\r\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorOcean400;\r\n  }\r\n\r\n  &.border-ocean-500 {\r\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorOcean500;\r\n  }\r\n\r\n  &.border-ocean-600 {\r\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorOcean600;\r\n  }\r\n\r\n  &.border-ocean-700 {\r\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorOcean700;\r\n  }\r\n\r\n  &.border-red-500 {\r\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorRed500;\r\n  }\r\n\r\n  &.border-red-600 {\r\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorRed600;\r\n  }\r\n\r\n  &.border-red-700 {\r\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorRed700;\r\n  }\r\n\r\n  &.border-orange-500 {\r\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorOrange500;\r\n  }\r\n\r\n  &.border-green-500 {\r\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorGreen500;\r\n  }\r\n\r\n  &.border-lawn-400 {\r\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorLawn400;\r\n  }\r\n\r\n  &.border-lawn-500 {\r\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorLawn500;\r\n  }\r\n\r\n  &.border-lawn-700 {\r\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorLawn700;\r\n  }\r\n\r\n  &.border-berry-400 {\r\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorBerry400;\r\n  }\r\n\r\n  &.border-berry-500 {\r\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorBerry500;\r\n  }\r\n\r\n  &.border-sun-400 {\r\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorSun400;\r\n  }\r\n\r\n  &.border-sun-500 {\r\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorSun500;\r\n  }\r\n\r\n  &.border-sand-400{\r\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorSand400;\r\n  }\r\n\r\n  &.border-sand-500{\r\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorSand500;\r\n  }\r\n\r\n\r\n}\r\n\r\n.text {\r\n  margin: 0;\r\n  padding-left: tokens.$ifxSpace50;\r\n  font-style: normal;\r\n  font-weight: tokens.$ifxFontWeightSemibold;\r\n  font-size: tokens.$ifxFontSizeM;\r\n  line-height: tokens.$ifxLineHeightS;\r\n  display: inline;\r\n  color: tokens.$ifxColorBaseBlack;\r\n}\r\n\r\n.dot {\r\n  display: inline-block;\r\n  width: tokens.$ifxSize100;\r\n  height: tokens.$ifxSize100;\r\n  border-radius: tokens.$ifxBorderRadiusRound;\r\n}\r\n\r\n\r\n.dot {\r\n  &.engineering-100 {\r\n    background-color: tokens.$ifxColorEngineering100;\r\n  }\r\n\r\n  &.engineering-200 {\r\n    background-color: tokens.$ifxColorEngineering200;\r\n  }\r\n\r\n  &.engineering-300 {\r\n    background-color: tokens.$ifxColorEngineering300;\r\n  }\r\n\r\n  &.engineering-400 {\r\n    background-color: tokens.$ifxColorEngineering400;\r\n  }\r\n\r\n  &.engineering-500 {\r\n    background-color: tokens.$ifxColorEngineering500;\r\n  }\r\n\r\n  &.engineering-600 {\r\n    background-color: tokens.$ifxColorEngineering600;\r\n  }\r\n\r\n  &.ocean-100 {\r\n    background-color: tokens.$ifxColorOcean100;\r\n  }\r\n\r\n  &.ocean-200 {\r\n    background-color: tokens.$ifxColorOcean200;\r\n  }\r\n\r\n  &.ocean-300 {\r\n    background-color: tokens.$ifxColorOcean300;\r\n  }\r\n\r\n  &.ocean-400 {\r\n    background-color: tokens.$ifxColorOcean400;\r\n  }\r\n\r\n  &.ocean-500 {\r\n    background-color: tokens.$ifxColorOcean500;\r\n  }\r\n\r\n  &.ocean-600 {\r\n    background-color: tokens.$ifxColorOcean600;\r\n  }\r\n\r\n  &.ocean-700 {\r\n    background-color: tokens.$ifxColorOcean700;\r\n  }\r\n\r\n  &.red-500 {\r\n    background-color: tokens.$ifxColorRed500;\r\n  }\r\n\r\n  &.red-600 {\r\n    background-color: tokens.$ifxColorRed600;\r\n  }\r\n\r\n  &.red-700 {\r\n    background-color: tokens.$ifxColorRed700;\r\n  }\r\n\r\n  &.orange-500 {\r\n    background-color: tokens.$ifxColorOrange500;\r\n  }\r\n\r\n  &.green-500 {\r\n    background-color: tokens.$ifxColorGreen500;\r\n  }\r\n\r\n  &.lawn-400{\r\n    background-color: tokens.$ifxColorLawn400;\r\n  }\r\n\r\n  &.lawn-500{\r\n    background-color: tokens.$ifxColorLawn500;\r\n  }\r\n\r\n  &.lawn-700 {\r\n    background-color: tokens.$ifxColorLawn700;\r\n  }\r\n\r\n  &.berry-400 {\r\n    background-color: tokens.$ifxColorBerry400;\r\n  }\r\n\r\n  &.berry-500 {\r\n    background-color: tokens.$ifxColorBerry500;\r\n  }\r\n\r\n  &.sun-400 {\r\n    background-color: tokens.$ifxColorSun400;\r\n  }\r\n\r\n  &.sun-500 {\r\n    background-color: tokens.$ifxColorSun500;\r\n  }\r\n\r\n  &.sand-400{\r\n    background-color: tokens.$ifxColorSand400;\r\n  }\r\n\r\n  &.sand-500{\r\n    background-color: tokens.$ifxColorSand500;\r\n  }\r\n}","import { Component, h, Prop, Element } from '@stencil/core';\r\nimport { trackComponent } from '../../global/utils/tracking'; \r\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\r\nimport { detectFramework } from '../../global/utils/framework-detection';\r\n\r\n@Component({\r\n  tag: 'ifx-status',\r\n  styleUrl: 'status.scss',\r\n  shadow: true\r\n})\r\n\r\nexport class Status {\r\n  @Element() el;\r\n  @Prop() label: string;\r\n  @Prop() border: boolean = false;\r\n  @Prop() color: string = 'orange-500';\r\n \r\n  async componentDidLoad() { \r\n    if(!isNestedInIfxComponent(this.el)) { \r\n      const framework = detectFramework();\r\n      trackComponent('ifx-status', await framework)\r\n    }\r\n  }\r\n\r\n  render() {\r\n    const effectiveColor = this.color?.trim() ? this.color : 'orange-500';\r\n    const containerClass = this.border ? `container border-${effectiveColor}` : 'container no-border';\r\n\r\n    return (\r\n      <div role=\"status\" class={containerClass}>\r\n        <span class={`dot ${effectiveColor}`}></span>\r\n        <p class=\"text\">{this.label}</p>\r\n      </div>\r\n    );\r\n  }\r\n}"],"mappings":"4HAAA,MAAMA,EAAY,87F,MCWLC,EAAM,MANnB,WAAAC,CAAAC,G,UASUC,KAAMC,OAAY,MAClBD,KAAKE,MAAW,YAoBzB,CAlBC,sBAAMC,GACJ,IAAIC,EAAuBJ,KAAKK,IAAK,CACnC,MAAMC,EAAYC,IAClBC,EAAe,mBAAoBF,E,EAIvC,MAAAG,G,MACE,MAAMC,IAAiBC,EAAAX,KAAKE,SAAK,MAAAS,SAAA,SAAAA,EAAEC,QAASZ,KAAKE,MAAQ,aACzD,MAAMW,EAAiBb,KAAKC,OAAS,oBAAoBS,IAAmB,sBAE5E,OACEI,EAAA,OAAAC,IAAA,2CAAKC,KAAK,SAASC,MAAOJ,GACxBC,EAAA,QAAAC,IAAA,2CAAME,MAAO,OAAOP,MACpBI,EAAG,KAAAC,IAAA,2CAAAE,MAAM,QAAQjB,KAAKkB,O","ignoreList":[]}

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

@@ -1 +0,0 @@
-{"version":3,"names":["iconButtonCss","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\";\r\n\r\n:host {\r\n  display: inline-flex;\r\n}\r\n\r\n.btn {\r\n  box-sizing: border-box;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  min-height: tokens.$ifxSize500;\r\n  padding: 8px;\r\n  gap: tokens.$ifxSpace100;\r\n  color: tokens.$ifxColorBaseWhite;\r\n  flex-direction: row;\r\n  font-weight: tokens.$ifxFontWeightSemibold;\r\n  border-radius: tokens.$ifxBorderRadius12;\r\n  line-height: tokens.$ifxLineHeightM;\r\n  outline: none;\r\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\r\n\r\n\r\n  text-decoration: none;\r\n  user-select: none;\r\n  border: 1px solid rgba(0, 0, 0, 0);\r\n  font-size: tokens.$ifxFontSizeM;\r\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;\r\n}\r\n\r\n.btn:not(.disabled) {\r\n  cursor: pointer;\r\n}\r\n\r\n.btn-primary {\r\n  color: tokens.$ifxColorBaseWhite;\r\n  background-color: tokens.$ifxColorOcean500;\r\n\r\n  &:disabled,\r\n  &.disabled {\r\n    background-color: tokens.$ifxColorEngineering300;\r\n    color: tokens.$ifxColorBaseWhite;\r\n    pointer-events: none;\r\n\r\n  }\r\n}\r\n\r\n\r\n.btn-secondary {\r\n  color: tokens.$ifxColorOcean500;\r\n  background-color: tokens.$ifxColorBaseWhite;\r\n  border-color: tokens.$ifxColorOcean500;\r\n\r\n  &:disabled,\r\n  &.disabled {\r\n    background-color: tokens.$ifxColorBaseWhite;\r\n    border: 1px solid tokens.$ifxColorEngineering300;\r\n    color: tokens.$ifxColorEngineering300;\r\n    pointer-events: none;\r\n\r\n  }\r\n}\r\n\r\n.btn-tertiary {\r\n  background-color: transparent;\r\n  color: tokens.$ifxColorBaseBlack;\r\n\r\n  &:disabled,\r\n  &.disabled {\r\n    color: tokens.$ifxColorEngineering300;\r\n    pointer-events: none;\r\n  }\r\n}\r\n\r\n\r\n.btn {\r\n\r\n  &.icon-button {\r\n    min-width: initial;\r\n    min-height: initial;\r\n    width: tokens.$ifxSize500;\r\n    height: tokens.$ifxSize500;\r\n    padding: 0;\r\n    justify-content: center;\r\n\r\n    &.btn-round {\r\n      border-radius: 100px;\r\n    }\r\n\r\n    &.btn-square {\r\n      border-radius: tokens.$ifxBorderRadius12;\r\n    }\r\n\r\n    &.btn-s {\r\n      width: tokens.$ifxSize400;\r\n      height: tokens.$ifxSize400;\r\n      padding: 8px;\r\n    }\r\n\r\n\r\n    &.btn-l {\r\n      width: tokens.$ifxSize600;\r\n      height: tokens.$ifxSize600;\r\n      padding: 8px;\r\n    }\r\n  }\r\n\r\n  &.btn-primary:not(:disabled, .disabled) {\r\n    &:focus:not(:active, .active) {\r\n      outline: none;\r\n      box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean500;\r\n    }\r\n\r\n    &:hover {\r\n      background-color: tokens.$ifxColorOcean600;\r\n      border-color: tokens.$ifxColorOcean600;\r\n    }\r\n\r\n    &:active,\r\n    &.active {\r\n      background-color: tokens.$ifxColorOcean700;\r\n      border-color: tokens.$ifxColorOcean700;\r\n    }\r\n  }\r\n\r\n\r\n  &.btn-secondary:not(:disabled, .disabled) {\r\n    &:focus:not(:active, .active) {\r\n      outline: none;\r\n      box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean500;\r\n    }\r\n\r\n    &:hover {\r\n      background-color: tokens.$ifxColorOcean600;\r\n      border-color: tokens.$ifxColorOcean600;\r\n      color: tokens.$ifxColorBaseWhite;\r\n    }\r\n\r\n    &:active,\r\n    &.active {\r\n      background-color: tokens.$ifxColorOcean700;\r\n      border-color: tokens.$ifxColorOcean700;\r\n    }\r\n  }\r\n\r\n  &.btn-tertiary:not(:disabled, .disabled) {\r\n    &:focus:not(:active, .active) {\r\n      outline: none;\r\n      color: tokens.$ifxColorBaseBlack;\r\n      box-shadow: 0 0 0 0px tokens.$ifxColorBaseWhite, 0 0 0 2px tokens.$ifxColorOcean500;\r\n    }\r\n\r\n    &:hover {\r\n      color: tokens.$ifxColorOcean500;\r\n    }\r\n\r\n    &:active,\r\n    &.active {\r\n      color: tokens.$ifxColorOcean600;\r\n    }\r\n  }\r\n}","import { Component, Prop, h, Host, Method, Element, Listen, Watch, State } from '@stencil/core';\r\nimport { trackComponent } from '../../global/utils/tracking'; \r\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\r\nimport { detectFramework } from '../../global/utils/framework-detection';\r\nimport classNames from 'classnames';\r\n\r\n@Component({\r\n  tag: 'ifx-icon-button',\r\n  styleUrl: 'icon-button.scss',\r\n  shadow: true,\r\n})\r\n\r\nexport class IconButton {\r\n  @Prop() variant: 'primary' | 'secondary' | 'tertiary';\r\n  @Prop() size: string;\r\n  @Prop() disabled: boolean;\r\n  @Prop() icon: string;\r\n  @Prop() href: string;\r\n  @Prop() target: string = '_self';\r\n  @Prop() shape: string = 'round';\r\n  @Prop() ariaLabel: string | null;\r\n  @State() internalIcon: string;\r\n  @Element() el;\r\n\r\n  private focusableElement: HTMLElement;\r\n  \r\n  @Listen('click', { capture: true })\r\n  handleClick(event: Event) {\r\n    if (this.disabled) {\r\n      event.stopImmediatePropagation();\r\n    }\r\n  }\r\n\r\n  @Watch('icon')\r\n  updateIcon(newIcon: string) { \r\n    this.internalIcon = newIcon;\r\n  }\r\n\r\n  @Method()\r\n  async setFocus() {\r\n    this.focusableElement.focus();\r\n  }\r\n\r\n  componentWillLoad() {\r\n    if (this.shape === '') {\r\n      this.shape = 'round';\r\n    }\r\n    this.internalIcon = this.icon;\r\n  }\r\n\r\n  async componentDidLoad() { \r\n    if(!isNestedInIfxComponent(this.el)) { \r\n      const framework = detectFramework();\r\n      trackComponent('ifx-icon-button', await framework)\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host \r\n        aria-disabled={this.disabled}\r\n        aria-label={this.ariaLabel}> \r\n        {this.href ? (\r\n          <a\r\n            ref={(el) => (this.focusableElement = el)}\r\n            class={this.getClassNames()}\r\n            href={!this.disabled ? this.href : undefined} \r\n            target={this.target}\r\n            rel={this.target === '_blank' ? 'noopener noreferrer' : undefined}\r\n          >\r\n            <ifx-icon icon={this.internalIcon}></ifx-icon>\r\n          </a>\r\n        ) : (\r\n          <button\r\n            class={this.getClassNames()}\r\n            type=\"button\"\r\n            disabled={this.disabled}\r\n          >\r\n            <ifx-icon icon={this.internalIcon}></ifx-icon>\r\n          </button>\r\n        )}\r\n      </Host>\r\n    );\r\n  }\r\n\r\n  getVariantClass() {\r\n    return `${this.variant}` === \"secondary\"\r\n      ? `secondary`\r\n      : `${this.variant}` === 'tertiary'\r\n        ? `tertiary`\r\n        : `primary`;\r\n  }\r\n\r\n  getSizeClass() {\r\n    if (`${this.size}` === \"xs\") {\r\n      return \"xs\"\r\n    }\r\n    else if (`${this.size}` === \"s\") {\r\n      return \"s\"\r\n    }\r\n    else if (`${this.size}` === \"l\") {\r\n      return \"l\"\r\n    }\r\n    else return \"\";\r\n  }\r\n\r\n  getClassNames() {\r\n    return classNames(\r\n      'btn icon-button',\r\n      `btn-${this.shape}`,\r\n      this.size && `btn-${this.getSizeClass()}`,\r\n      `btn-${this.getVariantClass()}`,\r\n      this.disabled ? 'disabled' : ''\r\n    );\r\n  }\r\n}"],"mappings":"oMAAA,MAAMA,EAAgB,y4E,MCYTC,EAAU,MANvB,WAAAC,CAAAC,G,UAYUC,KAAMC,OAAW,QACjBD,KAAKE,MAAW,OAgGzB,CAxFC,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,sBAAMC,GACJ,IAAIC,EAAuBhB,KAAKiB,IAAK,CACnC,MAAMC,EAAYC,IAClBC,EAAe,wBAAyBF,E,EAI5C,MAAAG,GACE,OACEC,EAACC,EACgB,CAAAC,IAAA,2DAAAxB,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,EACE,UAAAM,MAAO5B,KAAK6B,gBACZG,KAAK,SACL3B,SAAUL,KAAKK,UAEfiB,EAAU,YAAAR,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-aa79ab02.entry.js

@@ -1,2 +0,0 @@
-import{r as e,h as o,a as i}from"./p-PqnYwNKt.js";const a=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}.col{display:flex;flex-direction:column;gap:12px;padding-right:8px;color:#1D1D1D;font-family:var(--ifx-font-family)}.col ::slotted([slot=title]){box-sizing:border-box;font-weight:600;font-size:1rem;line-height:1.5rem;margin:0;padding:0}.col span{display:flex;flex-direction:column;gap:12px;color:#1D1D1D}.col span ::slotted([slot=link]){box-sizing:border-box;font-weight:400;font-size:1rem;line-height:1.5rem}';const f=class{constructor(o){e(this,o)}render(){return o("div",{key:"14bb2d019a75f2470c23a514e37700ca8f688935",class:"col"},o("slot",{key:"558bf7ff85d2308a0ebdefbcf79ac201c7b99cfa",name:"title"}),o("span",{key:"26fbccfea042fe66a2f1e46b97cab21f31f308d5","aria-label":"navigation link"},o("slot",{key:"d639972fb36b4ffefdf7ddc9bcfe8acb5da9f6cd",name:"link"})))}get el(){return i(this)}};f.style=a;export{f as ifx_footer_column};
-//# sourceMappingURL=p-aa79ab02.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["footerColumnCss","FooterColumn","render","h","key","class","name"],"sources":["src/components/footer/footer-column.scss?tag=ifx-footer-column&encapsulation=shadow","src/components/footer/footer-column.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n@use \"../../global/font.scss\";\r\n\r\n\r\n.col {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: tokens.$ifxSpace150;\r\n  padding-right: 8px;\r\n  color: tokens.$ifxColorBaseBlack;\r\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\r\n\r\n\r\n\r\n  & ::slotted([slot=title]) {\r\n    box-sizing: border-box;\r\n    font-weight: tokens.$ifxFontWeightSemibold;\r\n    font-size: tokens.$ifxFontSizeM;\r\n    line-height: tokens.$ifxLineHeightM;\r\n    margin: 0;\r\n    padding: 0;\r\n  }\r\n\r\n  & span {\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: tokens.$ifxSpace150;\r\n    color: tokens.$ifxColorBaseBlack;\r\n\r\n    & ::slotted([slot=link]) {\r\n      box-sizing: border-box;\r\n      font-weight: 400;\r\n      font-size: tokens.$ifxFontSizeM;\r\n      line-height: tokens.$ifxLineHeightM;\r\n    }\r\n  }\r\n}","import { Component, h, Element} from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'ifx-footer-column',\r\n  styleUrl: './footer-column.scss',\r\n  shadow: true,\r\n})\r\n\r\nexport class FooterColumn {\r\n  @Element() el;\r\n  \r\n  render() {\r\n    return (\r\n      <div class=\"col\">\r\n          <slot name=\"title\" />\r\n        <span aria-label='navigation link'>\r\n          <slot name=\"link\" />\r\n        </span>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"kDAAA,MAAMA,EAAkB,yd,MCQXC,EAAY,M,yBAGvB,MAAAC,GACE,OACEC,EAAA,OAAAC,IAAA,2CAAKC,MAAM,OACPF,EAAM,QAAAC,IAAA,2CAAAE,KAAK,UACbH,EAAA,QAAAC,IAAA,wDAAiB,mBACfD,EAAA,QAAAC,IAAA,2CAAME,KAAK,U","ignoreList":[]}

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

@@ -1 +0,0 @@
-{"version":3,"names":["getInitiallySelectedItems","el","Array","from","querySelectorAll","filter","entry","getAttribute","map","label","value","type","filterAccordionCss","FilterAccordion","constructor","hostRef","this","initialized","expanded","count","totalItems","filterGroupName","handleCheckedChange","event","selectedItems","detail","length","ifxFilterAccordionChange","emit","toggleAccordion","stopPropagation","componentWillLoad","addEventListener","componentDidLoad","componentWillUnload","removeEventListener","render","h","key","class","onClick","variant","number","icon","name"],"sources":["src/components/table-advanced-version/filter-type-group/utils.ts","src/components/table-advanced-version/filter-type-group/filter-accordion/filter-accordion.scss?tag=ifx-filter-accordion&encapsulation=shadow","src/components/table-advanced-version/filter-type-group/filter-accordion/filter-accordion.tsx"],"sourcesContent":["// utils.ts\r\nexport function getInitiallySelectedItems(el: HTMLElement) {\r\n   return Array.from(el.querySelectorAll('ifx-list-entry'))\r\n\r\n    .filter(entry => entry.getAttribute('value') === 'true')\r\n    .map(entry => {\r\n      return {\r\n        label: entry.getAttribute('label'),\r\n        value: entry.getAttribute('value'),\r\n        type: entry.getAttribute('type')\r\n      };\r\n    });\r\n}","@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n\r\n\r\n.header {\r\n  display: flex;\r\n  align-items: flex-start;\r\n  align-self: stretch;\r\n  cursor: pointer;\r\n  border-left: 3px solid transparent;\r\n}\r\n\r\n.text-and-icon {\r\n  display: flex;\r\n  padding: tokens.$ifxSpace150 tokens.$ifxSpace200 tokens.$ifxSpace150 tokens.$ifxSpace250;\r\n  align-items: center;\r\n  gap: tokens.$ifxSpace200;\r\n  flex: 1 0 0;\r\n}\r\n\r\n.header.expanded {\r\n  border-left: 3px solid tokens.$ifxColorOcean500;\r\n}\r\n\r\n.text {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 8px;\r\n  flex: 1 0 0;\r\n  color: tokens.$ifxColorBaseBlack;\r\n  font-size: 16px;\r\n  font-style: normal;\r\n  font-weight: 600;\r\n  line-height: 24px;\r\n}\r\n\r\n.hidden {\r\n  display: none;\r\n}\r\n\r\n.accordion {\r\n  border-bottom: 1px solid tokens.$ifxColorEngineering200;\r\n}\r\n\r\n\r\n.filter-accordion-container {\r\n  display: flex;\r\n  padding: 8px 16px 16px 20px;\r\n  flex-direction: column;\r\n  align-items: flex-start;\r\n  gap: 12px;\r\n  align-self: stretch;\r\n  border-left: 3px solid tokens.$ifxColorOcean500;\r\n}\r\n\r\n::slotted(ifx-filter-entry:nth-child(n+7)) {\r\n  display: none;\r\n}\r\n\r\n.link {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 8px;\r\n}\r\n\r\n.show-more ::slotted(ifx-filter-entry:nth-child(n+7)) {\r\n  display: block;\r\n}\r\n\r\n.show-more .show-more-link {\r\n  display: none;\r\n}","import { Component, h, Prop, State, Event, EventEmitter, Element } from '@stencil/core';\r\nimport { getInitiallySelectedItems } from '../utils';\r\n\r\n@Component({\r\n  tag: 'ifx-filter-accordion',\r\n  styleUrl: 'filter-accordion.scss',\r\n  shadow: true,\r\n})\r\nexport class FilterAccordion {\r\n  private initialized = false;\r\n  @Element() private el: HTMLElement;\r\n  @State() expanded: boolean = false;\r\n  @Prop() maxVisibleItems: number;\r\n  @State() count: number = 0;\r\n  @State() totalItems = 0;\r\n\r\n  @Prop() filterGroupName = \"\";\r\n\r\n  @Event() ifxFilterAccordionChange: EventEmitter;\r\n\r\n  componentWillLoad() {\r\n    this.el.addEventListener('ifxListUpdate', this.handleCheckedChange);\r\n\r\n  }\r\n\r\ncomponentDidLoad() {\r\n  if (!this.initialized) {\r\n    const selectedItems = getInitiallySelectedItems(this.el);\r\n    this.count = selectedItems.length;\r\n    this.initialized = true; // Prevent further execution in future calls\r\n  }\r\n}\r\n\r\n\r\nhandleCheckedChange = (event: CustomEvent) => {\r\n    const selectedItems = event.detail.selectedItems;\r\n    this.count = selectedItems.length;\r\n    this.ifxFilterAccordionChange.emit({ filterGroupName: this.filterGroupName, selectedItems });\r\n  }\r\n\r\n  componentWillUnload() {\r\n    this.el.removeEventListener('ifxListUpdate', this.handleCheckedChange);\r\n  }\r\n\r\n  toggleAccordion = (event: MouseEvent) => {\r\n    event.stopPropagation();\r\n    this.expanded = !this.expanded;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div class={`accordion ${this.expanded ? 'expanded' : ''}`}>\r\n        <div class={`header ${this.expanded ? 'expanded' : ''}`} onClick={this.toggleAccordion} >\r\n          <div class={`text-and-icon ${this.expanded ? 'expanded' : ''}`}>\r\n            <div class=\"text\">\r\n              <span>{this.filterGroupName}</span>\r\n              <ifx-indicator variant='number' number={this.count}></ifx-indicator>\r\n            </div>\r\n            <ifx-icon\r\n              class={this.expanded ? '' : 'hidden'}\r\n              icon=\"minus-16\"\r\n              onClick={this.toggleAccordion}\r\n            ></ifx-icon>\r\n            <ifx-icon\r\n              class={this.expanded ? 'hidden' : ''}\r\n              icon=\"plus-16\"\r\n              onClick={this.toggleAccordion}\r\n            ></ifx-icon>\r\n          </div>\r\n        </div>\r\n        {this.expanded &&\r\n          <div class=\"filter-accordion-container\">\r\n            <slot name=\"list\"></slot>\r\n          </div>\r\n        }\r\n      </div>\r\n    );\r\n  }\r\n}"],"mappings":"yDACM,SAAUA,EAA0BC,GACvC,OAAOC,MAAMC,KAAKF,EAAGG,iBAAiB,mBAEpCC,QAAOC,GAASA,EAAMC,aAAa,WAAa,SAChDC,KAAIF,IACI,CACLG,MAAOH,EAAMC,aAAa,SAC1BG,MAAOJ,EAAMC,aAAa,SAC1BI,KAAML,EAAMC,aAAa,WAGjC,CCZA,MAAMK,EAAqB,u0B,MCQdC,EAAe,MAL5B,WAAAC,CAAAC,G,6EAMUC,KAAWC,YAAG,MAEbD,KAAQE,SAAY,MAEpBF,KAAKG,MAAW,EAChBH,KAAUI,WAAG,EAEdJ,KAAeK,gBAAG,GAkB5BL,KAAAM,oBAAuBC,IACnB,MAAMC,EAAgBD,EAAME,OAAOD,cACnCR,KAAKG,MAAQK,EAAcE,OAC3BV,KAAKW,yBAAyBC,KAAK,CAAEP,gBAAiBL,KAAKK,gBAAiBG,iBAAgB,EAO9FR,KAAAa,gBAAmBN,IACjBA,EAAMO,kBACNd,KAAKE,UAAYF,KAAKE,QAAQ,CAgCjC,CA1DC,iBAAAa,GACEf,KAAKf,GAAG+B,iBAAiB,gBAAiBhB,KAAKM,oB,CAInD,gBAAAW,GACE,IAAKjB,KAAKC,YAAa,CACrB,MAAMO,EAAgBxB,EAA0BgB,KAAKf,IACrDe,KAAKG,MAAQK,EAAcE,OAC3BV,KAAKC,YAAc,I,EAWrB,mBAAAiB,GACElB,KAAKf,GAAGkC,oBAAoB,gBAAiBnB,KAAKM,oB,CAQpD,MAAAc,GACE,OACEC,EAAK,OAAAC,IAAA,2CAAAC,MAAO,aAAavB,KAAKE,SAAW,WAAa,MACpDmB,EAAK,OAAAC,IAAA,2CAAAC,MAAO,UAAUvB,KAAKE,SAAW,WAAa,KAAMsB,QAASxB,KAAKa,iBACrEQ,EAAA,OAAAC,IAAA,2CAAKC,MAAO,iBAAiBvB,KAAKE,SAAW,WAAa,MACxDmB,EAAK,OAAAC,IAAA,2CAAAC,MAAM,QACTF,EAAO,QAAAC,IAAA,4CAAAtB,KAAKK,iBACZgB,EAAe,iBAAAC,IAAA,2CAAAG,QAAQ,SAASC,OAAQ1B,KAAKG,SAE/CkB,EACE,YAAAC,IAAA,2CAAAC,MAAOvB,KAAKE,SAAW,GAAK,SAC5ByB,KAAK,WACLH,QAASxB,KAAKa,kBAEhBQ,EACE,YAAAC,IAAA,2CAAAC,MAAOvB,KAAKE,SAAW,SAAW,GAClCyB,KAAK,UACLH,QAASxB,KAAKa,oBAInBb,KAAKE,UACJmB,EAAK,OAAAC,IAAA,2CAAAC,MAAM,8BACTF,EAAA,QAAAC,IAAA,2CAAMM,KAAK,U","ignoreList":[]}

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

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