@infineon/infineon-design-system-stencil 30.9.3--canary.1685.d4f6fa41532c053d6dd83a5a287820d5cf74b243.0 → 30.9.3--canary.1692.59c40bb497f09acb42590b3e54cb7f4190ece08f.0

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

@@ -1 +0,0 @@
-{"version":3,"names":["tooltipCss","IfxTooltipStyle0","Tooltip","constructor","hostRef","this","tooltipVisible","header","text","position","internalPosition","variant","popperInstance","onMouseEnter","_a","setOptions","options","Object","assign","modifiers","name","enabled","initializePopper","tooltipEl","style","display","_b","update","onMouseLeave","onClick","toLowerCase","onDismissClick","componentWillLoad","trim","componentDidLoad","slotElement","el","shadowRoot","querySelector","firstChild","addEventListener","referenceEl","effectivePosition","determineBestPosition","createPopper","placement","offset","element","setAttribute","rect","getBoundingClientRect","yOffset","window","scrollY","xOffset","scrollX","verticalHalfwayPoint","top","height","horizontalHalfwayPoint","left","width","innerHeight","innerWidth","positionChanged","newVal","destroy","disconnectedCallback","render","tooltipDismissible","visible","tooltipCompact","tooltipExtended","h","key","class","icon","viewBox","fill","xmlns","id","d","stroke"],"sources":["src/components/tooltip/tooltip.scss?tag=ifx-tooltip&encapsulation=shadow","src/components/tooltip/tooltip.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: inline-flex;\n}\n\n.tooltip__container {\n  display: inline-flex;\n  flex-direction: column;\n  position: relative;\n  font-family: var(--ifx-font-family);\n\n}\n\n%tooltip-common {\n  background-color: tokens.$ifxColorBaseBlack;\n  border: 1px solid black;\n  z-index: 1080;\n  display: none;\n  transition: opacity 0.3s;\n  position: absolute;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n  color: tokens.$ifxColorBaseWhite;\n  width: max-content;\n  box-sizing: border-box;\n\n  white-space: pre-wrap;   /* wraps text at spaces and within words */\n  word-wrap: break-word;   /* breaks text within a word if necessary */\n  overflow-wrap: anywhere; /* breaks text at arbitrary points when needed */\n\n  &.visible {\n    display: flex !important;\n    align-items: start;\n    //min-width: 100px;\n    //width: auto;\n  }\n}\n\n\n\n.tooltip-dismissible {\n  @extend %tooltip-common;\n\n    .close-button {\n      all: unset;\n      //position: absolute;\n      //top: tokens.$ifxSpace150;\n      //right: tokens.$ifxSpace150;\n      cursor: pointer;\n      position: relative;\n      order: 2;\n      margin-top: 12px;\n      margin-right: 12px;\n      line-height: 0px;\n    }\n\n  .tooltip-dismissible-content {\n    display: flex;\n    flex-direction: column;\n    gap: tokens.$ifxSpace150;\n    padding: tokens.$ifxSpace150;\n    flex-grow: 1;\n    white-space: pre-wrap;\n    word-wrap: break-word;\n    overflow-wrap: anywhere;\n\n  }\n\n  .tooltip-dismissible-header,\n  .tooltip-dismissible-body {\n    font-size: 14px;\n    font-style: normal;\n    line-height: 20px;\n  }\n\n  .tooltip-dismissible-header {\n    font-weight: tokens.$ifxFontWeightSemibold;\n  }\n\n  .tooltip-dismissible-body {\n    font-weight: tokens.$ifxFontWeightRegular;\n  }\n}\n\n.tooltip-compact {\n  @extend %tooltip-common;\n  padding: 4px 8px;\n  text-align: center;\n  flex-grow: 1;\n}\n\n\n.tooltip-extended {\n  @extend %tooltip-common;\n  //padding-left: 36px; // Added this line, adjust as per your icon width\n  //padding-left: tokens.$ifxSpace150; // Added this line, adjust as per your icon width\n  align-items: center;\n  padding: tokens.$ifxSpace150;\n  gap: 10px;\n\n  .extended_icon {\n    display: flex;\n    align-self: flex-start;\n    align-items: center;\n    //padding-top: tokens.$ifxSpace150;\n    cursor: pointer;\n  }\n\n\n\n  .tooltip-extended-content {\n    display: flex;\n    flex-direction: column;\n    gap: tokens.$ifxSpace150;\n    //padding: tokens.$ifxSpace150;\n    flex-grow: 1;\n    white-space: pre-wrap;\n    word-wrap: break-word;\n    overflow-wrap: anywhere;\n  }\n\n  .tooltip-extended-header,\n  .tooltip-extended-body {\n    font-size: 14px;\n    font-style: normal;\n    line-height: 20px;\n  }\n\n  .tooltip-extended-header {\n    font-weight: tokens.$ifxFontWeightSemibold;\n  }\n\n  .tooltip-extended-body {\n    font-weight: tokens.$ifxFontWeightRegular;\n  }\n}\n\n\n.tooltip__container .tooltip-arrow-svg {\n  position: absolute;\n  width: 8px;\n  height: 8px;\n}\n\n\n%tooltip-arrow-positions {\n\n  // For 'top' placement\n  &[data-placement=\"top\"]>.tooltip-arrow-svg {\n    bottom: -7px;\n    left: 50%;\n    transform: rotate(180deg) translateX(-50%);\n  }\n\n  // For 'top-start' placement\n  &[data-placement=\"top-start\"]>.tooltip-arrow-svg {\n    bottom: -7px;\n    left: 10px; // Adjust as needed\n    transform: rotate(180deg)\n  }\n\n  // For 'top-end' placement\n  &[data-placement=\"top-end\"]>.tooltip-arrow-svg {\n    bottom: -7px;\n    right: 10px; // Adjust as needed\n    transform: rotate(180deg);\n  }\n\n  // For 'bottom' placement\n  &[data-placement=\"bottom\"]>.tooltip-arrow-svg {\n    top: -7px;\n    left: 50%;\n    transform: translateX(-50%);\n  }\n\n  // For 'bottom-start' placement\n  &[data-placement=\"bottom-start\"]>.tooltip-arrow-svg {\n    top: -7px;\n    left: 10px; // Adjust as needed\n  }\n\n  // For 'bottom-end' placement\n  &[data-placement=\"bottom-end\"]>.tooltip-arrow-svg {\n    top: -7px;\n    right: 10px; // Adjust as needed\n  }\n\n  // For 'left' placement\n  &[data-placement=\"left\"]>.tooltip-arrow-svg {\n    right: -3px;\n    top: 50%;\n    transform: rotate(90deg) translateY(-50%) translateX(-50%);\n  }\n\n  // For 'right' placement\n  &[data-placement=\"right\"]>.tooltip-arrow-svg {\n    left: -3px;\n    top: 50%;\n    transform: rotate(270deg) translateY(-50%) translateX(50%);\n  }\n}\n\n\n.tooltip-compact {\n  @extend %tooltip-arrow-positions;\n  min-width: 28px !important;\n  max-width: 145px !important;\n}\n\n.tooltip-dismissible {\n  @extend %tooltip-arrow-positions;\n  min-width: 145px !important;\n  max-width: 310px !important;\n}\n\n.tooltip-extended {\n  @extend %tooltip-arrow-positions;\n  min-width: 145px !important;\n  max-width: 310px !important;\n}\n","import { Component, Prop, h, Element, State, Watch } from '@stencil/core';\nimport { createPopper } from '@popperjs/core';\n \n\n@Component({\n  tag: 'ifx-tooltip',\n  styleUrl: 'tooltip.scss',\n  shadow: true\n})\nexport class Tooltip {\n\n  @Element() el: HTMLElement;\n  @State() tooltipVisible: boolean = false;\n  @Prop() header: string = '';\n  @Prop() text: string = '';\n  @Prop() position: 'bottom-start' | 'top-start' | 'left' | 'bottom-end' | 'top-end' | 'right' | 'bottom' | 'top' | 'auto' = 'auto';\n  @State() internalPosition: 'bottom-start' | 'top-start' | 'left' | 'bottom-end' | 'top-end' | 'right' | 'bottom' | 'top' | 'auto' = 'auto';\n\n  @Prop() variant: 'compact' | 'dismissible' | 'extended' = 'compact';\n  @Prop() icon: string;\n\n  tooltipEl: HTMLElement;\n  referenceEl: HTMLElement;\n  popperInstance: any = null;\n\n\n  componentWillLoad() { \n    if(this.variant.toLowerCase().trim() === \"\") { \n      this.variant = 'compact'\n    }\n  }\n  \n  componentDidLoad() {\n    const slotElement = this.el.shadowRoot.querySelector('.tooltip__container').firstChild;\n    \n    if(this.variant.toLowerCase() === 'compact' || this.variant.toLowerCase() === 'extended') {\n      slotElement.addEventListener('mouseenter', this.onMouseEnter)\n      slotElement.addEventListener('mouseleave', this.onMouseLeave)\n    }else{\n      slotElement.addEventListener('click', this.onClick);\n    }\n\n  }\n\n  initializePopper() {\n    if (this.popperInstance) return;\n\n    this.referenceEl = this.el;\n    this.tooltipEl;\n    if (this.variant.toLowerCase() === 'compact') {\n      this.tooltipEl = this.el.shadowRoot.querySelector('.tooltip-compact');\n    }\n    else if (this.variant.toLowerCase() === 'dismissible') {\n      this.tooltipEl = this.el.shadowRoot.querySelector('.tooltip-dismissible');\n    }\n    else {\n      this.tooltipEl = this.el.shadowRoot.querySelector('.tooltip-extended');\n\n    }\n\n    const effectivePosition = this.position === 'auto' ? this.determineBestPosition() : this.position;\n\n    // Set the internalPosition\n    this.internalPosition = effectivePosition;\n\n    if (this.tooltipEl && this.referenceEl) {\n\n      this.popperInstance = createPopper(this.referenceEl, this.tooltipEl, {\n        placement: this.internalPosition,\n        modifiers: [\n          {\n            name: 'offset',\n            options: {\n              offset: [0, 8]  // this offset should be adjusted to ensure the tooltip doesn't overlap its reference element\n            }\n          },\n          {\n            name: 'arrow',\n            options: {\n              element: '.tooltip-arrow-svg'\n            }\n          }\n        ]\n      });\n\n    }\n\n    // Add this line to set the 'data-placement' attribute on the tooltip\n    this.tooltipEl.setAttribute('data-placement', effectivePosition);\n\n\n  }\n\n  determineBestPosition() {\n    // This is a simplified version, you can enhance this based on available viewport space.\n    const rect = this.referenceEl.getBoundingClientRect();\n    const yOffset = window.scrollY; // Get current scroll position\n    const xOffset = window.scrollX; // Get current horizontal scroll position\n\n    const verticalHalfwayPoint = rect.top + yOffset + rect.height / 2;\n    const horizontalHalfwayPoint = rect.left + xOffset + rect.width / 2;\n\n    if (this.position === 'auto') {\n      if (verticalHalfwayPoint > window.innerHeight / 2) {\n        if (horizontalHalfwayPoint > window.innerWidth / 2) {\n          return 'top-end';\n        } else {\n          return 'top-start';\n        }\n      } else {\n        if (horizontalHalfwayPoint > window.innerWidth / 2) {\n          return 'bottom-end';\n        } else {\n          return 'bottom-start';\n        }\n      }\n    } else {\n      return this.position;\n    }\n  }\n\n  @Watch('position')\n  positionChanged(newVal: any) {\n    this.internalPosition = newVal;\n    this.popperInstance?.destroy();\n    this.popperInstance = null; // Force re-initialization on next mouse enter\n  }\n\n\n\n  onMouseEnter = () => {\n    // Enable the event listeners immediately\n    this.popperInstance?.setOptions((options) => ({\n      ...options,\n      modifiers: [\n        ...options.modifiers,\n        { name: 'eventListeners', enabled: true },\n      ],\n    }));\n\n    // Initialize the popper instance\n    this.initializePopper();\n\n    // Make the tooltip visible\n    this.tooltipVisible = true;\n    this.tooltipEl.style.display = 'block';\n\n    // Update the popper instance immediately after initialization\n    this.popperInstance?.update();\n  }\n\n\n  onMouseLeave = () => {\n    this.tooltipVisible = false;\n    this.tooltipEl.style.display = 'none';\n\n  }\n\n  disconnectedCallback() {\n    this.popperInstance?.destroy();\n  }\n\n  onClick = () => {\n    if (this.variant.toLowerCase() === 'dismissible') {\n      this.initializePopper();\n      this.tooltipVisible = !this.tooltipVisible;\n      this.tooltipEl.style.display = this.tooltipVisible ? 'block' : 'none';\n      this.popperInstance?.update();\n    }\n  }\n\n  onDismissClick = () => {\n    this.tooltipVisible = false;\n    this.tooltipEl.style.display = 'none';\n  }\n\n  render() {\n    const tooltipDismissible = {\n      'tooltip-dismissible': true,\n      'visible': this.tooltipVisible,\n    };\n\n    const tooltipCompact = {\n      'tooltip-compact': true,\n      'visible': this.tooltipVisible,\n    };\n\n    const tooltipExtended = {\n      'tooltip-extended': true,\n      'visible': this.tooltipVisible,\n    };\n\n    return (\n      <div aria-label=\"a tooltip showing important information\" aria-value={this.header} class=\"tooltip__container\" >\n        <slot></slot>\n\n        {this.variant.toLowerCase() === 'dismissible' && <div class={tooltipDismissible}>\n          <button aria-label=\"Close Tooltip\" class=\"close-button\" onClick={this.onDismissClick}>\n            <ifx-icon icon=\"cross16\"></ifx-icon>\n          </button>\n          <div class=\"tooltip-dismissible-content\">\n            {this.header && <div class=\"tooltip-dismissible-header\">{this.header}</div>}\n            <div class=\"tooltip-dismissible-body\">{this.text}</div>\n          </div>\n          <svg class=\"tooltip-arrow-svg\" width=\"12\" height=\"8\" viewBox=\"0 0 12 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path id=\"Indicator\" d=\"M6 0L12 8L0 8L6 0Z\" fill=\"#1D1D1D\" />\n          </svg>\n        </div>\n        }\n        {this.variant.toLowerCase() === 'compact' &&\n          <div class={tooltipCompact}>\n            {this.text}\n            <svg class=\"tooltip-arrow-svg\" width=\"12\" height=\"8\" viewBox=\"0 0 12 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path id=\"Indicator\" d=\"M6 0L12 8L0 8L6 0Z\" fill=\"#1D1D1D\" />\n            </svg>\n          </div>\n        }\n        {this.variant.toLowerCase() === 'extended' &&\n          <div class={tooltipExtended}>\n            <slot name=\"icon\">\n              {this.icon ? <div class=\"extended_icon\"><ifx-icon icon={this.icon}></ifx-icon></div> :\n                <svg class=\"extended_icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\" viewBox=\"0 0 24 24\">\n                  <path stroke=\"#fff\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M20.5 2.5h-16a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-16a2 2 0 0 0-2-2Z\" />\n                  <path stroke=\"#fff\" d=\"M19 17H6l2.5-4 2.097 2.516.405.486.379-.506 4.118-5.49.003-.002L19 17Z\" />\n                  <path fill=\"#fff\" d=\"M10 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z\" />\n                </svg>\n              }\n            </slot>\n            <div class=\"tooltip-extended-content\">\n              {this.header && <div class=\"tooltip-extended-header\">{this.header}</div>}\n              <div class=\"tooltip-extended-body\">{this.text}</div>\n            </div>\n            <svg class=\"tooltip-arrow-svg\" width=\"12\" height=\"8\" viewBox=\"0 0 12 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path id=\"Indicator\" d=\"M6 0L12 8L0 8L6 0Z\" fill=\"#1D1D1D\" />\n            </svg>\n          </div >\n        }\n      </div>\n    );\n  }\n\n\n}"],"mappings":"sFAAA,MAAMA,EAAa,khIACnB,MAAAC,EAAeD,E,MCQFE,EAAO,MALpB,WAAAC,CAAAC,G,UAQWC,KAAAC,eAA0B,MAC3BD,KAAAE,OAAiB,GACjBF,KAAAG,KAAe,GACfH,KAAAI,SAAmH,OAClHJ,KAAAK,iBAA2H,OAE5HL,KAAAM,QAAkD,UAK1DN,KAAAO,eAAsB,KA2GtBP,KAAAQ,aAAe,K,SAEbC,EAAAT,KAAKO,kBAAc,MAAAE,SAAA,SAAAA,EAAEC,YAAYC,GAAOC,OAAAC,OAAAD,OAAAC,OAAA,GACnCF,GAAO,CACVG,UAAW,IACNH,EAAQG,UACX,CAAEC,KAAM,iBAAkBC,QAAS,WAKvChB,KAAKiB,mBAGLjB,KAAKC,eAAiB,KACtBD,KAAKkB,UAAUC,MAAMC,QAAU,SAG/BC,EAAArB,KAAKO,kBAAc,MAAAc,SAAA,SAAAA,EAAEC,QAAQ,EAI/BtB,KAAAuB,aAAe,KACbvB,KAAKC,eAAiB,MACtBD,KAAKkB,UAAUC,MAAMC,QAAU,MAAM,EAQvCpB,KAAAwB,QAAU,K,MACR,GAAIxB,KAAKM,QAAQmB,gBAAkB,cAAe,CAChDzB,KAAKiB,mBACLjB,KAAKC,gBAAkBD,KAAKC,eAC5BD,KAAKkB,UAAUC,MAAMC,QAAUpB,KAAKC,eAAiB,QAAU,QAC/DQ,EAAAT,KAAKO,kBAAc,MAAAE,SAAA,SAAAA,EAAEa,Q,GAIzBtB,KAAA0B,eAAiB,KACf1B,KAAKC,eAAiB,MACtBD,KAAKkB,UAAUC,MAAMC,QAAU,MAAM,C,CAnJvC,iBAAAO,GACE,GAAG3B,KAAKM,QAAQmB,cAAcG,SAAW,GAAI,CAC3C5B,KAAKM,QAAU,S,EAInB,gBAAAuB,GACE,MAAMC,EAAc9B,KAAK+B,GAAGC,WAAWC,cAAc,uBAAuBC,WAE5E,GAAGlC,KAAKM,QAAQmB,gBAAkB,WAAazB,KAAKM,QAAQmB,gBAAkB,WAAY,CACxFK,EAAYK,iBAAiB,aAAcnC,KAAKQ,cAChDsB,EAAYK,iBAAiB,aAAcnC,KAAKuB,a,KAC7C,CACHO,EAAYK,iBAAiB,QAASnC,KAAKwB,Q,EAK/C,gBAAAP,GACE,GAAIjB,KAAKO,eAAgB,OAEzBP,KAAKoC,YAAcpC,KAAK+B,GAExB,GAAI/B,KAAKM,QAAQmB,gBAAkB,UAAW,CAC5CzB,KAAKkB,UAAYlB,KAAK+B,GAAGC,WAAWC,cAAc,mB,MAE/C,GAAIjC,KAAKM,QAAQmB,gBAAkB,cAAe,CACrDzB,KAAKkB,UAAYlB,KAAK+B,GAAGC,WAAWC,cAAc,uB,KAE/C,CACHjC,KAAKkB,UAAYlB,KAAK+B,GAAGC,WAAWC,cAAc,oB,CAIpD,MAAMI,EAAoBrC,KAAKI,WAAa,OAASJ,KAAKsC,wBAA0BtC,KAAKI,SAGzFJ,KAAKK,iBAAmBgC,EAExB,GAAIrC,KAAKkB,WAAalB,KAAKoC,YAAa,CAEtCpC,KAAKO,eAAiBgC,EAAavC,KAAKoC,YAAapC,KAAKkB,UAAW,CACnEsB,UAAWxC,KAAKK,iBAChBS,UAAW,CACT,CACEC,KAAM,SACNJ,QAAS,CACP8B,OAAQ,CAAC,EAAG,KAGhB,CACE1B,KAAM,QACNJ,QAAS,CACP+B,QAAS,yB,CASnB1C,KAAKkB,UAAUyB,aAAa,iBAAkBN,E,CAKhD,qBAAAC,GAEE,MAAMM,EAAO5C,KAAKoC,YAAYS,wBAC9B,MAAMC,EAAUC,OAAOC,QACvB,MAAMC,EAAUF,OAAOG,QAEvB,MAAMC,EAAuBP,EAAKQ,IAAMN,EAAUF,EAAKS,OAAS,EAChE,MAAMC,EAAyBV,EAAKW,KAAON,EAAUL,EAAKY,MAAQ,EAElE,GAAIxD,KAAKI,WAAa,OAAQ,CAC5B,GAAI+C,EAAuBJ,OAAOU,YAAc,EAAG,CACjD,GAAIH,EAAyBP,OAAOW,WAAa,EAAG,CAClD,MAAO,S,KACF,CACL,MAAO,W,MAEJ,CACL,GAAIJ,EAAyBP,OAAOW,WAAa,EAAG,CAClD,MAAO,Y,KACF,CACL,MAAO,c,OAGN,CACL,OAAO1D,KAAKI,Q,EAKhB,eAAAuD,CAAgBC,G,MACd5D,KAAKK,iBAAmBuD,GACxBnD,EAAAT,KAAKO,kBAAc,MAAAE,SAAA,SAAAA,EAAEoD,UACrB7D,KAAKO,eAAiB,I,CAiCxB,oBAAAuD,G,OACErD,EAAAT,KAAKO,kBAAc,MAAAE,SAAA,SAAAA,EAAEoD,S,CAiBvB,MAAAE,GACE,MAAMC,EAAqB,CACzB,sBAAuB,KACvBC,QAAWjE,KAAKC,gBAGlB,MAAMiE,EAAiB,CACrB,kBAAmB,KACnBD,QAAWjE,KAAKC,gBAGlB,MAAMkE,EAAkB,CACtB,mBAAoB,KACpBF,QAAWjE,KAAKC,gBAGlB,OACEmE,EAAA,OAAAC,IAAA,wDAAgB,0CAAyC,aAAarE,KAAKE,OAAQoE,MAAM,sBACvFF,EAAA,QAAAC,IAAA,6CAECrE,KAAKM,QAAQmB,gBAAkB,eAAiB2C,EAAA,OAAAC,IAAA,2CAAKC,MAAON,GAC3DI,EAAA,UAAAC,IAAA,wDAAmB,gBAAgBC,MAAM,eAAe9C,QAASxB,KAAK0B,gBACpE0C,EAAA,YAAAC,IAAA,2CAAUE,KAAK,aAEjBH,EAAA,OAAAC,IAAA,2CAAKC,MAAM,+BACRtE,KAAKE,QAAUkE,EAAA,OAAAC,IAAA,2CAAKC,MAAM,8BAA8BtE,KAAKE,QAC9DkE,EAAA,OAAAC,IAAA,2CAAKC,MAAM,4BAA4BtE,KAAKG,OAE9CiE,EAAA,OAAAC,IAAA,2CAAKC,MAAM,oBAAoBd,MAAM,KAAKH,OAAO,IAAImB,QAAQ,WAAWC,KAAK,OAAOC,MAAM,8BACxFN,EAAA,QAAAC,IAAA,2CAAMM,GAAG,YAAYC,EAAE,qBAAqBH,KAAK,cAIpDzE,KAAKM,QAAQmB,gBAAkB,WAC9B2C,EAAA,OAAAC,IAAA,2CAAKC,MAAOJ,GACTlE,KAAKG,KACNiE,EAAA,OAAAC,IAAA,2CAAKC,MAAM,oBAAoBd,MAAM,KAAKH,OAAO,IAAImB,QAAQ,WAAWC,KAAK,OAAOC,MAAM,8BACxFN,EAAA,QAAAC,IAAA,2CAAMM,GAAG,YAAYC,EAAE,qBAAqBH,KAAK,cAItDzE,KAAKM,QAAQmB,gBAAkB,YAC9B2C,EAAA,OAAAC,IAAA,2CAAKC,MAAOH,GACVC,EAAA,QAAAC,IAAA,2CAAMtD,KAAK,QACRf,KAAKuE,KAAOH,EAAA,OAAKE,MAAM,iBAAgBF,EAAA,YAAUG,KAAMvE,KAAKuE,QAC3DH,EAAA,OAAKE,MAAM,gBAAgBI,MAAM,6BAA6BlB,MAAM,KAAKH,OAAO,KAAKoB,KAAK,OAAOD,QAAQ,aACvGJ,EAAA,QAAMS,OAAO,OAAM,iBAAgB,QAAO,kBAAiB,QAAQD,EAAE,qFACrER,EAAA,QAAMS,OAAO,OAAOD,EAAE,2EACtBR,EAAA,QAAMK,KAAK,OAAOG,EAAE,mDAI1BR,EAAA,OAAAC,IAAA,2CAAKC,MAAM,4BACRtE,KAAKE,QAAUkE,EAAA,OAAAC,IAAA,2CAAKC,MAAM,2BAA2BtE,KAAKE,QAC3DkE,EAAA,OAAAC,IAAA,2CAAKC,MAAM,yBAAyBtE,KAAKG,OAE3CiE,EAAA,OAAAC,IAAA,2CAAKC,MAAM,oBAAoBd,MAAM,KAAKH,OAAO,IAAImB,QAAQ,WAAWC,KAAK,OAAOC,MAAM,8BACxFN,EAAA,QAAAC,IAAA,2CAAMM,GAAG,YAAYC,EAAE,qBAAqBH,KAAK,c","ignoreList":[]}

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

@@ -1,2 +0,0 @@
-import{r as e,c as t,h as s}from"./p-c63974da.js";const i="";const l=i;const h=class{constructor(s){e(this,s);this.ifxFilterSelect=t(this,"ifxFilterSelect",7);this.type="text";this.filterValues=[]}handleTextInputChange(e){const t=e.target;const s=t.value;this.ifxFilterSelect.emit({filterName:this.filterName,filterValues:[s],type:this.type})}handleSingleSelectChange(e){const t=e.detail.value;this.ifxFilterSelect.emit({filterName:this.filterName,filterValues:[t],type:this.type})}handleMultiselectOptionChange(e){this.filterValues=e.detail;this.ifxFilterSelect.emit({filterName:this.filterName,filterValues:this.filterValues,type:this.type})}render(){switch(this.type){case"text":return s("ifx-text-field",{error:false,disabled:false,placeholder:this.placeholder,onIfxInput:e=>this.handleTextInputChange(e)},this.filterLabel);case"single-select":return s("ifx-select",{placeholder:"true","search-enabled":"true","search-placeholder-value":"Search...",onIfxSelect:e=>this.handleSingleSelectChange(e),"ifx-placeholder-value":this.placeholder,"ifx-label":this.filterLabel,"ifx-options":this.options});case"multi-select":return s("ifx-multiselect",{label:this.filterLabel,placeholder:this.placeholder,options:this.options,onIfxSelect:e=>this.handleMultiselectOptionChange(e)});default:return null}}};h.style=l;export{h as ifx_set_filter};
-//# sourceMappingURL=p-1d2f0317.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["setFilterCss","IfxSetFilterStyle0","SetFilter","constructor","hostRef","this","type","filterValues","handleTextInputChange","event","target","value","ifxFilterSelect","emit","filterName","handleSingleSelectChange","detail","handleMultiselectOptionChange","render","h","error","disabled","placeholder","onIfxInput","filterLabel","onIfxSelect","options","label"],"sources":["src/components/table-advanced-version/set-filter/set-filter.scss?tag=ifx-set-filter&encapsulation=shadow","src/components/table-advanced-version/set-filter/setFilter.tsx"],"sourcesContent":["/* set-filter.css */\n\n","// SetFilter.tsx\nimport { Component, h, Event, EventEmitter, Prop, State } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-set-filter',\n  styleUrl: 'set-filter.scss',\n  shadow: true\n})\nexport class SetFilter {\n  @Prop() filterName: string;\n  @Prop() filterLabel: string;\n  @Prop() placeholder: string;\n  @Prop() type: 'text' | 'single-select' | 'multi-select' = 'text';\n  @Prop() options: any[] | string;\n  @State() filterValues: string[] = [];\n\n  @Event() ifxFilterSelect: EventEmitter;\n\n\n  handleTextInputChange(event: Event) {\n    const target = event.target as HTMLInputElement;\n    const value = target.value;\n    this.ifxFilterSelect.emit({ filterName: this.filterName, filterValues: [value], type: this.type }); // Emit an array for consistency with the multi select component\n\n  }\n\n  handleSingleSelectChange(event: CustomEvent) {\n    const value = event.detail.value;\n    this.ifxFilterSelect.emit({ filterName: this.filterName, filterValues: [value], type: this.type }); // Emit an array for consistency with the multi select component\n  }\n\n\n  handleMultiselectOptionChange(event: CustomEvent) {\n    this.filterValues = event.detail; // Assuming that ifx-multiselect emits an array of selected options\n    this.ifxFilterSelect.emit({ filterName: this.filterName, filterValues: this.filterValues, type: this.type });\n  }\n\n\n  render() {\n    switch (this.type) {\n      case 'text':\n        return (\n          <ifx-text-field error={false} disabled={false} placeholder={this.placeholder}\n            onIfxInput={event => this.handleTextInputChange(event)}\n          >{this.filterLabel}</ifx-text-field>\n        );\n      case 'single-select':\n        return (\n          <ifx-select\n            placeholder=\"true\"\n            search-enabled=\"true\"\n            search-placeholder-value=\"Search...\"\n            onIfxSelect={event => this.handleSingleSelectChange(event)}\n            ifx-placeholder-value={this.placeholder}\n            ifx-label={this.filterLabel}\n            ifx-options={this.options}\n          ></ifx-select>\n        );\n      case 'multi-select':\n        return (\n          <ifx-multiselect\n            label={this.filterLabel}\n            placeholder={this.placeholder}\n            options={this.options}\n            onIfxSelect={event => this.handleMultiselectOptionChange(event)}\n          />\n        );\n      default:\n        return null;\n    }\n  }\n}\n\n"],"mappings":"kDAAA,MAAMA,EAAe,GACrB,MAAAC,EAAeD,E,MCOFE,EAAS,MALtB,WAAAC,CAAAC,G,2DASUC,KAAAC,KAAkD,OAEjDD,KAAAE,aAAyB,E,CAKlC,qBAAAC,CAAsBC,GACpB,MAAMC,EAASD,EAAMC,OACrB,MAAMC,EAAQD,EAAOC,MACrBN,KAAKO,gBAAgBC,KAAK,CAAEC,WAAYT,KAAKS,WAAYP,aAAc,CAACI,GAAQL,KAAMD,KAAKC,M,CAI7F,wBAAAS,CAAyBN,GACvB,MAAME,EAAQF,EAAMO,OAAOL,MAC3BN,KAAKO,gBAAgBC,KAAK,CAAEC,WAAYT,KAAKS,WAAYP,aAAc,CAACI,GAAQL,KAAMD,KAAKC,M,CAI7F,6BAAAW,CAA8BR,GAC5BJ,KAAKE,aAAeE,EAAMO,OAC1BX,KAAKO,gBAAgBC,KAAK,CAAEC,WAAYT,KAAKS,WAAYP,aAAcF,KAAKE,aAAcD,KAAMD,KAAKC,M,CAIvG,MAAAY,GACE,OAAQb,KAAKC,MACX,IAAK,OACH,OACEa,EAAA,kBAAgBC,MAAO,MAAOC,SAAU,MAAOC,YAAajB,KAAKiB,YAC/DC,WAAYd,GAASJ,KAAKG,sBAAsBC,IAChDJ,KAAKmB,aAEX,IAAK,gBACH,OACEL,EAAA,cACEG,YAAY,OAAM,iBACH,OAAM,2BACI,YACzBG,YAAahB,GAASJ,KAAKU,yBAAyBN,GAAM,wBACnCJ,KAAKiB,YAAW,YAC5BjB,KAAKmB,YAAW,cACdnB,KAAKqB,UAGxB,IAAK,eACH,OACEP,EAAA,mBACEQ,MAAOtB,KAAKmB,YACZF,YAAajB,KAAKiB,YAClBI,QAASrB,KAAKqB,QACdD,YAAahB,GAASJ,KAAKY,8BAA8BR,KAG/D,QACE,OAAO,K","ignoreList":[]}

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

@@ -1,2 +0,0 @@
-import{r as e,c as r,h as i,g as o}from"./p-c63974da.js";const c=':host{display:inline-flex;vertical-align:top}.checkbox__container{box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:center;padding:0px;gap:8px;font-family:var(--ifx-font-family)}.checkbox__container .checkbox__wrapper{box-sizing:border-box;display:flex;position:relative;justify-content:center;align-items:center;width:20px;height:20px;background-color:#FFFFFF;border:1px solid #575352;border-radius:1px;flex:none;order:0;flex-grow:0;align-self:flex-start}.checkbox__container .checkbox__wrapper.checkbox-m{height:24px;width:24px}.checkbox__container .checkbox__wrapper.error{border-color:#CD002F}.checkbox__container .checkbox__wrapper:focus-visible{border:1px solid #575352;outline:2px solid #0A8276;outline-offset:2px}.checkbox__container .checkbox__wrapper:hover{background-color:#EEEDED;border:1px solid #575352;border-radius:1px;flex:none;order:0;flex-grow:0}.checkbox__container .checkbox__wrapper.disabled{background-color:#BFBBBB;border-color:#BFBBBB;border-radius:1px;flex:none;order:0;flex-grow:0}.checkbox__container .checkbox__wrapper.checked{background-color:#0A8276;border-radius:1px;border-color:transparent;flex:none;order:0;flex-grow:0;color:#FFFFFF}.checkbox__container .checkbox__wrapper.checked.error{background-color:#CD002F}.checkbox__container .checkbox__wrapper.checked:focus-visible{border:1px solid transparent;outline:2px solid #0A8276;outline-offset:2px}.checkbox__container .checkbox__wrapper.checked:hover{background-color:#08665C;border-radius:1px;flex:none;order:0;flex-grow:0}.checkbox__container .checkbox__wrapper.checked.disabled{background:#BFBBBB;border-radius:1px;flex:none;order:0;flex-grow:0}.checkbox__container .checkbox__wrapper.indeterminate:before{content:"";display:block;width:70%;height:2px;background-color:#08665C;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}.checkbox__container .label{font-style:normal;font-weight:400;font-size:0.875rem;line-height:1.25rem;color:#1D1D1D;overflow-wrap:break-word;word-wrap:break-word;word-break:break-all;max-width:100%}.checkbox__container .label.label-m{font-size:1rem;line-height:1.5rem}.checkbox__container .label.disabled{color:#BFBBBB}.checkbox__container .checkbox__wrapper:hover,.checkbox__container .label:hover{cursor:pointer}';const t=c;const n=class{constructor(i){e(this,i);this.ifxChange=r(this,"ifxChange",7);if(i.$hostElement$["s-ei"]){this.internals=i.$hostElement$["s-ei"]}else{this.internals=i.$hostElement$.attachInternals();i.$hostElement$["s-ei"]=this.internals}this.disabled=false;this.checked=false;this.error=false;this.size="m";this.indeterminate=false}handleCheckbox(){if(!this.disabled){if(this.inputElement.indeterminate){this.internalChecked=true;this.internalIndeterminate=false}else{this.internalChecked=!this.internalChecked}if(this.internalChecked){if(this.value!==undefined){this.internals.setFormValue(this.value)}else{this.internals.setFormValue("on")}}else{this.internals.setFormValue(null)}this.ifxChange.emit(this.internalChecked)}}async isChecked(){return this.internalChecked}async toggleCheckedState(e){this.internalChecked=e}valueChanged(e,r){if(e!==r){this.internalChecked=e;this.inputElement.checked=this.internalChecked}}indeterminateChanged(e,r){if(e!==r){this.internalIndeterminate=e;this.inputElement.indeterminate=this.internalIndeterminate}}handleKeydown(e){if(e.keyCode===32||e.keyCode===13){this.handleCheckbox();e.preventDefault()}}componentWillLoad(){this.internalChecked=this.checked;this.internalIndeterminate=this.indeterminate}componentDidRender(){this.inputElement.indeterminate=this.internalIndeterminate}formResetCallback(){this.internals.setFormValue(null)}getCheckedClassName(){if(this.error){if(this.internalChecked){return"checked error"}else{return"error"}}else if(this.internalChecked){return"checked"}else return""}render(){const e=this.el.innerHTML;let r=false;if(e){r=true}return i("div",{key:"42d5a5b45e19edb9ad6885c2849ec4909fb587ea",class:"checkbox__container"},i("input",{key:"a924fc885614c78b86d396c50665470e1c281c2f",type:"checkbox",hidden:true,ref:e=>this.inputElement=e,checked:this.internalChecked,onChange:this.handleCheckbox.bind(this),id:"checkbox",value:`${this.value}`,disabled:this.disabled?true:undefined}),i("div",{key:"b39d40cdd76089d90ef783f971b3ff1eedddd16c",tabindex:"0",onClick:this.handleCheckbox.bind(this),onKeyDown:this.handleKeydown.bind(this),role:"checkbox","aria-checked":this.indeterminate?"mixed":this.internalChecked.toString(),"aria-disabled":this.disabled,"aria-labelledby":"label",class:`checkbox__wrapper \n          ${this.getCheckedClassName()}\n        ${this.size==="m"?"checkbox-m":""}\n        ${this.indeterminate?"indeterminate":""}\n        ${this.disabled?"disabled":""}`},this.internalChecked&&i("ifx-icon",{key:"c377c5f5a75b99a6b9b9e94b46f585e0957779bf",icon:"check-12","aria-hidden":"true"})),r&&i("div",{key:"eece08029794065f499efe28480f2fc2030dabd9",id:"label",class:`label ${this.size==="m"?"label-m":""} ${this.disabled?"disabled":""} `,onClick:this.handleCheckbox.bind(this)},i("slot",{key:"a317e5c7eedb34e245888b7f24df1cd5de633bf3"})))}static get formAssociated(){return true}get el(){return o(this)}static get watchers(){return{checked:["valueChanged"],indeterminate:["indeterminateChanged"]}}};n.style=t;export{n as ifx_checkbox};
-//# sourceMappingURL=p-23c0b40c.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["checkboxCss","IfxCheckboxStyle0","Checkbox","constructor","hostRef","this","disabled","checked","error","size","indeterminate","handleCheckbox","inputElement","internalChecked","internalIndeterminate","value","undefined","internals","setFormValue","ifxChange","emit","isChecked","toggleCheckedState","newVal","valueChanged","newValue","oldValue","indeterminateChanged","handleKeydown","event","keyCode","preventDefault","componentWillLoad","componentDidRender","formResetCallback","getCheckedClassName","render","slot","el","innerHTML","hasSlot","h","key","class","type","hidden","ref","onChange","bind","id","tabindex","onClick","onKeyDown","role","toString","icon"],"sources":["src/components/checkbox/checkbox.scss?tag=ifx-checkbox&encapsulation=shadow","src/components/checkbox/checkbox.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host {\n    display: inline-flex;\n    vertical-align: top;\n}\n\n\n.checkbox__container {\n    box-sizing: border-box;\n    display: inline-flex;\n    flex-direction: row;\n    align-items: center;\n    padding: 0px;\n    gap: tokens.$ifxSpace100;\n    font-family: var(--ifx-font-family);\n\n    & .checkbox__wrapper {\n        box-sizing: border-box;\n        display: flex;\n        position: relative; //needs to be added for the indeterminate state of the checkbox\n        justify-content: center;\n        align-items: center;\n        width: tokens.$ifxSize250;\n        height: tokens.$ifxSize250;\n        background-color: tokens.$ifxColorBaseWhite;\n        border: 1px solid #575352;\n        border-radius: tokens.$ifxBorderRadius12;\n        flex: none;\n        order: 0;\n        flex-grow: 0;\n        align-self: flex-start;\n\n        &.checkbox-m {\n            height: tokens.$ifxSize300;\n            width: tokens.$ifxSize300;\n        }\n\n\n        &.error {\n            border-color: #CD002F;\n        }\n\n        &:focus-visible {\n            border: 1px solid #575352;\n            outline: 2px solid #0A8276;\n            outline-offset: 2px;\n        }\n\n        &:hover {\n            background-color: #EEEDED;\n            border: 1px solid #575352;\n            border-radius: tokens.$ifxBorderRadius12;\n            flex: none;\n            order: 0;\n            flex-grow: 0;\n        }\n\n        &.disabled {\n            background-color: #BFBBBB;\n            border-color: #BFBBBB;\n            border-radius: tokens.$ifxBorderRadius12;\n            flex: none;\n            order: 0;\n            flex-grow: 0;\n        }\n\n        &.checked {\n            background-color: #0A8276;\n            border-radius: tokens.$ifxBorderRadius12;\n            border-color: tokens.$ifxColorBaseTransparent;\n            flex: none;\n            order: 0;\n            flex-grow: 0;\n            color: tokens.$ifxColorBaseWhite;\n\n            &.error {\n                background-color: #CD002F;\n            }\n\n            &:focus-visible {\n                border: 1px solid transparent;\n                outline: 2px solid #0A8276;\n                outline-offset: 2px;\n            }\n\n            &:hover {\n                background-color: #08665C;\n                border-radius: tokens.$ifxBorderRadius12;\n                flex: none;\n                order: 0;\n                flex-grow: 0;\n            }\n\n            &.disabled {\n                background: #BFBBBB;\n                border-radius: tokens.$ifxBorderRadius12;\n                flex: none;\n                order: 0;\n                flex-grow: 0;\n            }\n        }\n\n        &.indeterminate {\n            &:before {\n                content: \"\";\n                display: block;\n                width: 70%; // Adjust as needed for the width of the minus sign\n                height: 2px; // Adjust for thickness of the minus sign\n                background-color: #08665C; // Color of the minus sign\n                position: absolute;\n                top: 50%;\n                left: 50%;\n                transform: translate(-50%, -50%);\n            }\n        }\n\n    }\n\n    & .label {\n        font-style: normal;\n        font-weight: 400;\n        font-size: tokens.$ifxFontSizeS;\n        line-height: tokens.$ifxLineHeightS;\n        color: tokens.$ifxColorBaseBlack;\n        overflow-wrap: break-word;\n        word-wrap: break-word;\n        word-break: break-all;\n        max-width: 100%;\n\n        &.label-m {\n            font-size: tokens.$ifxFontSizeM;\n            line-height: tokens.$ifxLineHeightM;\n        }\n\n        &.disabled {\n            color: #BFBBBB;\n        }\n    }\n\n    & .checkbox__wrapper,\n    & .label {\n        &:hover {\n            cursor: pointer;\n        }\n    }\n\n}","import { Component, h, Prop, Element, State, Event, EventEmitter, Watch, Method, AttachInternals } from '@stencil/core';\n \n\n@Component({\n  tag: 'ifx-checkbox',\n  styleUrl: 'checkbox.scss',\n  shadow: true,\n  formAssociated: true\n})\n\nexport class Checkbox {\n  private inputElement: HTMLInputElement;\n\n  @Element() el;\n  @Prop() disabled: boolean = false;\n  @Prop() checked: boolean = false;\n  @Prop() error: boolean = false;\n  @Prop() size: string = 'm';\n  @Prop() indeterminate: boolean = false;\n  @Prop() value: string;\n  @State() internalChecked: boolean;\n  @State() internalIndeterminate: boolean;\n\n  @AttachInternals() internals: ElementInternals;\n\n  @Event({ bubbles: true, composed: true }) ifxChange: EventEmitter;\n\n  handleCheckbox() {\n    if (!this.disabled) {\n      if (this.inputElement.indeterminate) {\n        this.internalChecked = true;\n        this.internalIndeterminate = false;\n      } else {\n        this.internalChecked = !this.internalChecked;\n      }\n      \n      if (this.internalChecked) {\n        if (this.value !== undefined) {\n          this.internals.setFormValue(this.value);\n        } else {\n          this.internals.setFormValue(\"on\")\n        }\n      } else {\n        this.internals.setFormValue(null)\n      }\n      this.ifxChange.emit(this.internalChecked);\n    }\n  }\n\n  @Method()\n  async isChecked(): Promise<boolean> {\n    return this.internalChecked;\n  }\n\n  @Method()\n  async toggleCheckedState(newVal: boolean) {\n    this.internalChecked = newVal;\n  }\n\n  @Watch('checked')\n  valueChanged(newValue: boolean, oldValue: boolean) {\n    if (newValue !== oldValue) {\n      this.internalChecked = newValue;\n      this.inputElement.checked = this.internalChecked; // update the checkbox's checked property\n    }\n  }\n\n\n  @Watch('indeterminate')\n  indeterminateChanged(newValue: boolean, oldValue: boolean) {\n    if (newValue !== oldValue) {\n      this.internalIndeterminate = newValue;\n      this.inputElement.indeterminate = this.internalIndeterminate; // update the checkbox's indeterminate property\n    }\n  }\n\n  handleKeydown(event) {\n    // Keycode 32 corresponds to the Space key, 13 corresponds to the Enter key\n    if (event.keyCode === 32 || event.keyCode === 13) {\n      this.handleCheckbox();\n      event.preventDefault();  // prevent the default action when space or enter is pressed\n    }\n  }\n\n  componentWillLoad() {\n    this.internalChecked = this.checked;\n    this.internalIndeterminate = this.indeterminate;\n  }\n\n  componentDidRender() {\n    this.inputElement.indeterminate = this.internalIndeterminate;\n  }\n\n\n  /**\n   * Callback for form association.\n   * Called whenever the form is reset.\n   */\n  formResetCallback() {\n    this.internals.setFormValue(null);\n  }\n\n  getCheckedClassName() {\n    if (this.error) {\n      if (this.internalChecked) {\n        return \"checked error\"\n      } else {\n        return \"error\"\n      }\n    } else if (this.internalChecked) {\n      return \"checked\";\n    } else return \"\"\n  }\n\n  render() {\n    const slot = this.el.innerHTML;\n    let hasSlot = false;\n\n    if (slot) {\n      hasSlot = true;\n    }\n\n    return (\n      <div class=\"checkbox__container\">\n        <input\n          type=\"checkbox\"\n          hidden\n          ref={(el) => (this.inputElement = el)}\n          checked={this.internalChecked}\n          onChange={this.handleCheckbox.bind(this)} // Listen for changes here\n          id='checkbox'\n          value={`${this.value}`}\n          disabled={this.disabled ? true : undefined}\n        />\n\n        <div\n          tabindex=\"0\"\n          onClick={this.handleCheckbox.bind(this)}\n          onKeyDown={this.handleKeydown.bind(this)}\n          role=\"checkbox\"\n          aria-checked={this.indeterminate ? 'mixed' : this.internalChecked.toString()}\n          aria-disabled={this.disabled}\n          aria-labelledby=\"label\"\n          class={`checkbox__wrapper \n          ${this.getCheckedClassName()}\n        ${this.size === \"m\" ? \"checkbox-m\" : \"\"}\n        ${this.indeterminate ? 'indeterminate' : \"\"}\n        ${this.disabled ? 'disabled' : \"\"}`}\n        >\n          {this.internalChecked && <ifx-icon icon=\"check-12\"  aria-hidden=\"true\"></ifx-icon>}\n        </div>\n        {hasSlot &&\n          <div id=\"label\" class={`label ${this.size === \"m\" ? \"label-m\" : \"\"} ${this.disabled ? 'disabled' : \"\"} `} onClick={this.handleCheckbox.bind(this)}>\n            <slot />\n          </div>}\n      </div>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,2 +0,0 @@
-import{r as e,h as a}from"./p-c63974da.js";const o=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}:host{display:inline-flex}.container{display:inline-flex;align-items:center;padding:4px 16px;border:1px solid #BFBBBB;border-radius:9999px;background-color:#FFFFFF;gap:8px;font-family:var(--ifx-font-family)}.container:hover{cursor:pointer;border-color:#8D8786}.container:active,.container.active{border-color:#1D1D1D}.container:focus:not(:active,.active){outline:none;border-color:#1D1D1D}.container .label-wrapper{text-decoration:none}.container .label-wrapper .label{margin:0;font-weight:400;font-size:1rem;line-height:20px;color:#1D1D1D}';const r=o;const c=class{constructor(a){e(this,a)}render(){return a("div",{key:"fd95fec410cb814e865254b6d19168093ca817a3","aria-label":"a tag",class:"container"},this.icon&&a("ifx-icon",{key:"331869ac0b205e6dde434c45639d7a607ca77d77",icon:this.icon}),a("a",{key:"58027bdcb06e65fe2a6032a4f8cee44259a10473",href:"javascript:void(null);",class:"label-wrapper"},a("p",{key:"6db956e912c4469eff6c0cda1eb0dda92a1e5c0b",class:"label"},a("slot",{key:"ada3f26e0ecc145a0ae3c7eacce57b682cd33595"}))))}};c.style=r;export{c as ifx_tag};
-//# sourceMappingURL=p-26dfd238.entry.js.map

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

@@ -1,2 +0,0 @@
-import{r as e,h as t,g as r}from"./p-c63974da.js";const i=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}.breadcrumb-parent{display:flex;flex-direction:row;align-items:center;padding:0px;gap:12px;min-height:24px;justify-content:center}.breadcrumb-parent:hover{cursor:pointer}.breadcrumb-parent .breadcrumb-wrapper{display:flex;flex-direction:row;align-items:center;padding:0px;gap:8px;position:relative}.breadcrumb-parent .breadcrumb-wrapper .dropdown-menu{display:none;position:absolute;top:20px}.breadcrumb-parent .breadcrumb-wrapper .dropdown-menu.open{display:block}.breadcrumb-parent .breadcrumb-wrapper a{text-decoration:none;color:#1D1D1D;font-family:var(--ifx-font-family);font-style:normal;font-weight:400;font-size:0.875rem;line-height:1.25rem;display:flex;align-items:center;color:#1D1D1D;flex-direction:column;justify-content:center;padding:0px;border-bottom:1px solid #1D1D1D}.breadcrumb-parent .breadcrumb-divider{width:10px;height:16px;color:#EEEDED;line-height:13px;font-size:1.25rem;margin-right:12px}';const n=i;const o=class{constructor(t){e(this,t);this.isLastItem=false;this.hasDropdownMenu=false}handleOutsideClick(e){const t=e.composedPath();if(!t.includes(this.el)){this.closeDropdownMenu()}}handleKeyDown(e){if(e.key==="Enter"||e.key===" "){this.toggleDropdownMenu()}else if(e.key==="Escape"){this.closeDropdownMenu()}}getDropdownMenu(){const e=this.el.shadowRoot.querySelector(".dropdown-menu");return e}menuWrapperEventReEmitter(e){this.emittedElement=e.detail}getMenuIconWrapper(){return this.emittedElement}handleClassList(e,t,r){e.classList[t](r)}closeDropdownMenu(){if(this.hasDropdownMenu){const e=this.getDropdownMenu();const t=this.getMenuIconWrapper();this.handleClassList(e,"remove","open");this.handleClassList(t,"remove","show")}}toggleDropdownMenu(){if(this.hasDropdownMenu){const e=this.getDropdownMenu();const t=this.getMenuIconWrapper();this.handleClassList(e,"toggle","open");this.handleClassList(t,"toggle","show")}}isDropdownMenuOpen(){const e=this.getDropdownMenu();return this.hasDropdownMenu&&e&&e.classList.contains("open")}handleLastItem(){const e=this.el.closest("ifx-breadcrumb").querySelectorAll("ifx-breadcrumb-item");if(this.el===e[e.length-1]){this.isLastItem=true}else this.isLastItem=false}generateUniqueId(e="id"){return`${e}-${Math.random().toString(36).substring(2,9)}`}componentWillLoad(){if(!this.uniqueId){this.uniqueId=this.generateUniqueId("breadcrumb-dropdown")}this.handleLastItem()}componentDidUpdate(){this.handleLastItem()}componentWillRender(){this.setHasDropdownMenuState()}setHasDropdownMenuState(){const e=this.getIfxDropdownMenuComponent();if(e){this.hasDropdownMenu=!!e}}getIfxDropdownMenuComponent(){const e=this.el.querySelector("ifx-dropdown-menu");return e}componentDidLoad(){const e=this.getIfxDropdownMenuComponent();if(!this.hasDropdownMenu){const e=this.getMenuIconWrapper();this.handleClassList(e,"toggle","hide")}else{e.isOpen=true}}render(){return t("li",{key:"5779bbe0854a084c33c1bb535655fe484165784e",class:"breadcrumb-parent","aria-current":`${this.isLastItem?"page":""}`},t("li",{key:"63e956424dda4002a84c7da17bfe42b3f7f830b0",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"},t("slot",{key:"14f66501d9ac8efc9ff9e6b771757e30c70814a6",name:"label"}),t("div",{key:"9620ab0608dc5c74aa39fe321a332421ee4c76b3",id:this.uniqueId,class:"dropdown-menu","aria-expanded":this.isDropdownMenuOpen(),"aria-label":"Dropdown menu"},t("slot",{key:"c4e6e9b1650f2467876f7824201139b369625b3d"}))),!this.isLastItem&&t("span",{key:"5c028ab8720841b8a2777a84d7ad3f933ab43b79",class:"breadcrumb-divider","aria-hidden":"true"},"/"))}get el(){return r(this)}};o.style=n;export{o as ifx_breadcrumb_item};
-//# sourceMappingURL=p-2bae45cd.entry.js.map

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

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

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

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

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

@@ -1 +0,0 @@
-{"version":3,"names":["infineonIconStencilCss","IfxIconStyle0","InfineonIconStencil","constructor","hostRef","this","icon","convertStringToHtml","htmlString","div","document","createElement","innerHTML","firstChild","convertHtmlToObject","htmlElement","pathToObject","Array","from","attributes","name","value","reduce","acc","current","convertPathsToVnode","htmlPath","svgPaths","parentPath","parentPathToVnode","h","push","paths","querySelectorAll","pathLength","length","i","objToVnode","getSVG","svgPath","class","width","ifxIcon","height","xmlns","fill","viewBox","constructIcon","svgContent","SVG","console","error","consoleError","emit","componentWillLoad","removeHyphen","str","toLowerCase","replace","_m","chr","getIcon","render","Host","key"],"sources":["src/components/icon/infineonIconStencil.scss?tag=ifx-icon","src/components/icon/infineonIconStencil.tsx"],"sourcesContent":["ifx-icon {\n  display: inline-flex;\n  justify-content: center;\n\n  &:empty {\n    display: none;\n  }\n}","import { Component, Prop, h, Host, Event, EventEmitter } from '@stencil/core';\nimport { getIcon } from '@infineon/infineon-icons'\n \n\n\n@Component({\n  tag: 'ifx-icon',\n  styleUrl: './infineonIconStencil.scss'\n})\n\nexport class InfineonIconStencil {\n  @Prop({ mutable: true }) icon: string = \"\"\n  @Prop({ mutable: true }) ifxIcon: any;\n  @Event() consoleError: EventEmitter<boolean>;\n \n  convertStringToHtml(htmlString) { \n    const div = document.createElement('div')\n    div.innerHTML = htmlString\n    return div.firstChild\n  }\n\n  convertHtmlToObject(htmlElement) { \n    let pathToObject = Array\n      .from(htmlElement.attributes, ({ name, value }) => ({ name, value }))\n      .reduce((acc, current) => {\n        acc[current.name] = current.value\n        return acc\n      }, {})\n\n    return pathToObject\n  }\n\n  convertPathsToVnode(htmlPath) { \n    let svgPaths = []\n    const parentPath = this.convertHtmlToObject(htmlPath);\n    const parentPathToVnode = h(\"path\", parentPath);\n    svgPaths.push(parentPathToVnode)\n    if(htmlPath.firstChild) { \n      const paths = htmlPath.querySelectorAll('path');\n      const pathLength = htmlPath.querySelectorAll('path').length;\n      for(let i = 0; i < pathLength; i++) { \n        let pathToObject = this.convertHtmlToObject(paths[i])\n        let objToVnode = h(\"path\", pathToObject)\n        svgPaths.push(objToVnode)\n      }      \n    }\n    return svgPaths\n  }\n\n  getSVG(svgPath) {\n    return <svg class=\"inline-svg\" width={this.ifxIcon.width} height={this.ifxIcon.height} xmlns=\"http://www.w3.org/2000/svg\" fill={this.ifxIcon.fill} viewBox={this.ifxIcon.viewBox}>{...svgPath}</svg>\n  }\n\n  constructIcon() {\n    if(this.ifxIcon) {\n      const htmlPath = this.convertStringToHtml(this.ifxIcon.svgContent)\n      const svgPath = this.convertPathsToVnode(htmlPath)\n      const SVG = this.getSVG(svgPath)\n      return SVG;\n    } else if(this.icon !== \"\") {\n      console.error('Icon not found!')\n      this.consoleError.emit(true)\n      return;\n    }  else { \n      return;\n    }\n  }\n\n  componentWillLoad() {\n    const removeHyphen = (str) => str.toLowerCase().replace(/[^a-zA-Z0-9]+(.)/g, (_m, chr) => chr);\n    this.ifxIcon = getIcon(removeHyphen(this.icon));\n  }\n\n\n\n  render() {\n    return (\n      <Host>\n      {this.constructIcon()}\n      </Host>\n    );\n  }\n}"],"mappings":"6FAAA,MAAMA,EAAyB,mFAC/B,MAAAC,EAAeD,E,MCSFE,EAAmB,MALhC,WAAAC,CAAAC,G,qDAM2BC,KAAAC,KAAe,E,CAIxC,mBAAAC,CAAoBC,GAClB,MAAMC,EAAMC,SAASC,cAAc,OACnCF,EAAIG,UAAYJ,EAChB,OAAOC,EAAII,U,CAGb,mBAAAC,CAAoBC,GAClB,IAAIC,EAAeC,MAChBC,KAAKH,EAAYI,YAAY,EAAGC,OAAMC,YAAO,CAAQD,OAAMC,YAC3DC,QAAO,CAACC,EAAKC,KACZD,EAAIC,EAAQJ,MAAQI,EAAQH,MAC5B,OAAOE,CAAG,GACT,IAEL,OAAOP,C,CAGT,mBAAAS,CAAoBC,GAClB,IAAIC,EAAW,GACf,MAAMC,EAAavB,KAAKS,oBAAoBY,GAC5C,MAAMG,EAAoBC,EAAE,OAAQF,GACpCD,EAASI,KAAKF,GACd,GAAGH,EAASb,WAAY,CACtB,MAAMmB,EAAQN,EAASO,iBAAiB,QACxC,MAAMC,EAAaR,EAASO,iBAAiB,QAAQE,OACrD,IAAI,IAAIC,EAAI,EAAGA,EAAIF,EAAYE,IAAK,CAClC,IAAIpB,EAAeX,KAAKS,oBAAoBkB,EAAMI,IAClD,IAAIC,EAAaP,EAAE,OAAQd,GAC3BW,EAASI,KAAKM,E,EAGlB,OAAOV,C,CAGT,MAAAW,CAAOC,GACL,OAAOT,EAAA,OAAKU,MAAM,aAAaC,MAAOpC,KAAKqC,QAAQD,MAAOE,OAAQtC,KAAKqC,QAAQC,OAAQC,MAAM,6BAA6BC,KAAMxC,KAAKqC,QAAQG,KAAMC,QAASzC,KAAKqC,QAAQI,YAAaP,E,CAGxL,aAAAQ,GACE,GAAG1C,KAAKqC,QAAS,CACf,MAAMhB,EAAWrB,KAAKE,oBAAoBF,KAAKqC,QAAQM,YACvD,MAAMT,EAAUlC,KAAKoB,oBAAoBC,GACzC,MAAMuB,EAAM5C,KAAKiC,OAAOC,GACxB,OAAOU,C,MACF,GAAG5C,KAAKC,OAAS,GAAI,CAC1B4C,QAAQC,MAAM,mBACd9C,KAAK+C,aAAaC,KAAK,MACvB,M,KACM,CACN,M,EAIJ,iBAAAC,GACE,MAAMC,EAAgBC,GAAQA,EAAIC,cAAcC,QAAQ,qBAAqB,CAACC,EAAIC,IAAQA,IAC1FvD,KAAKqC,QAAUmB,EAAQN,EAAalD,KAAKC,M,CAK3C,MAAAwD,GACE,OACEhC,EAACiC,EAAI,CAAAC,IAAA,4CACJ3D,KAAK0C,gB","ignoreList":[]}

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

@@ -1,2 +0,0 @@
-import{r as e,c as i,h as t,g as s}from"./p-c63974da.js";const a=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}:host{display:inline-block}.left-icon,.right-icon,.left-text,.right-text,.percentage-display{font-size:0.875rem;color:#575352;margin-left:8px}.left-icon.disabled,.right-icon.disabled,.left-text.disabled,.right-text.disabled,.percentage-display.disabled{color:#BFBBBB}.left-icon,.left-text{margin-right:8px}.right-icon,.right-text,.percentage-display{margin-left:8px}.ifx-slider{display:flex;align-items:center;padding:2px 16px;border-radius:9999px}.ifx-slider input[type=range]{-webkit-appearance:none;width:100%;height:4px;background:linear-gradient(to right, #0A8276 0%, #0A8276 var(--value-percent, 0%), #EEEDED var(--value-percent, 0%), #EEEDED 100%);outline:none;cursor:pointer;transition:0.2s}.ifx-slider input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#0A8276;cursor:pointer;box-shadow:0px 1px 2px rgba(0, 0, 0, 0.2)}.ifx-slider input[type=range]:not(:disabled)::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:#0A8276;border-radius:50%;cursor:pointer;transition:box-shadow 0.2s}.ifx-slider input[type=range]:not(:disabled)::-webkit-slider-thumb:hover{background:#08665C}.ifx-slider input[type=range]:not(:disabled)::-webkit-slider-thumb:active{background:#06534B}.ifx-slider input[type=range]:disabled{background:#BFBBBB;cursor:default}.ifx-slider input[type=range]:disabled::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:#BFBBBB;border-radius:50%;cursor:default}.ifx-slider .range-slider__wrapper{position:relative;width:129px;height:4px;display:flex;align-items:center;justify-content:center;margin:0px 2px;background:linear-gradient(to right, #EEEDED 0%, #EEEDED var(--min-value-percent, 100%), #0A8276 var(--min-value-percent, 100%), #0A8276 var(--max-value-percent, 100%), #EEEDED var(--max-value-percent, 100%), #EEEDED 100%)}.ifx-slider .range-slider__wrapper:has(input[type=range]:disabled){background:#BFBBBB}.ifx-slider .range-slider__wrapper input[type=range]{position:absolute;pointer-events:none;background:none}.ifx-slider .range-slider__wrapper input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;border:none;pointer-events:auto;cursor:pointer;box-shadow:0px 1px 2px rgba(0, 0, 0, 0.2)}.ifx-slider .range-slider__wrapper input[type=range]::-moz-range-thumb{-webkit-appearance:none;border:none;pointer-events:auto;cursor:pointer;box-shadow:0px 1px 2px rgba(0, 0, 0, 0.2)}.ifx-slider .range-slider__wrapper input[type=range]::-ms-thumb{-webkit-appearance:none;border:none;pointer-events:auto;cursor:pointer;box-shadow:0px 1px 2px rgba(0, 0, 0, 0.2)}.ifx-slider .range-slider__wrapper input[type=range]::-webkit-slider-runnable-track{-webkit-appearance:none;border:none;background:none;width:100%}.ifx-slider .range-slider__wrapper input[type=range]::-moz-range-track{-webkit-appearance:none;border:none;background:none;width:100%}';const n=a;const r=class{constructor(t){e(this,t);this.ifxChange=i(this,"ifxChange",7);this.min=0;this.max=100;this.step=1;this.disabled=false;this.showPercentage=false;this.type="single";this.internalValue=0;this.percentage=0;this.internalMinValue=0;this.internalMaxValue=100}valueChanged(e){this.internalValue=e;this.updateValuePercent()}minValueChanged(e){this.internalMinValue=e;this.updateValuePercent()}maxValueChanged(e){this.internalMaxValue=e;this.updateValuePercent()}getRangeSliderWrapper(){const e=this.el.shadowRoot.querySelector(".range-slider__wrapper");return e}handleInputChangeOfRangeSlider(e){const i=e.target;if(parseFloat(this.maxInputRef.value)-parseFloat(this.minInputRef.value)<=0){if(i.id==="max-slider"){this.maxInputRef.value=this.minInputRef.value}else{this.minInputRef.value=this.maxInputRef.value}}if(i.id==="max-slider"){this.internalMaxValue=parseFloat(this.maxInputRef.value)}else{this.internalMinValue=parseFloat(this.minInputRef.value)}this.ifxChange.emit({minVal:this.internalMinValue,maxVal:this.internalMaxValue});this.updateValuePercent();this.updateZIndexIfRangeSlider(i.id)}handleOnMouseLeaveOfRangeSlider(e){const i=e.target;const t=this.getRangeSliderWrapper();if(i.id==="max-slider"){t.insertBefore(this.maxInputRef,this.minInputRef)}else{t.insertBefore(this.minInputRef,this.maxInputRef)}}calculatePercentageValue(){const e=(this.internalValue-this.min)*1;const i=this.max-this.min;this.percentage=+parseFloat(String(e/i*100)).toFixed(2)}handleInputChange(e){const i=e.target;this.internalValue=parseFloat(i.value);this.ifxChange.emit(this.internalValue);this.calculatePercentageValue();this.updateValuePercent()}roundToValidStep(e){const i=e-this.min;const t=i%this.step;if(t>=this.step/2){return this.min+i+(this.step-t)}else{return this.min+i-t}}updateValuePercent(){const e=this.max-this.min;if(this.type==="double"){if(this.minInputRef){const i=(this.roundToValidStep(this.internalMinValue)-this.min)*1;const t=i/e*100;this.minInputRef.parentElement.style.setProperty("--min-value-percent",`${t}%`)}if(this.maxInputRef){const i=(this.roundToValidStep(this.internalMaxValue)-this.min)*1;const t=i/e*100;this.maxInputRef.parentElement.style.setProperty("--max-value-percent",`${t}%`)}}else{if(this.inputRef){const e=(this.roundToValidStep(this.internalValue)-this.min)*1;const i=this.max-this.min;const t=e/i*100;this.inputRef.style.setProperty("--value-percent",`${t}%`)}}}updateZIndexIfRangeSlider(e=""){if(e==="max-slider"){this.minInputRef.style.zIndex="1";this.maxInputRef.style.zIndex="2"}else{this.minInputRef.style.zIndex="2";this.maxInputRef.style.zIndex="1"}}componentWillLoad(){if(this.value===undefined){this.internalValue=(this.max-this.min)/2}else{this.internalValue=Math.max(this.min,Math.min(this.max,this.value))}this.calculatePercentageValue();if(this.minValueHandle!==undefined)this.internalMinValue=this.minValueHandle;else this.internalMinValue=this.min;if(this.maxValueHandle!==undefined)this.internalMaxValue=this.maxValueHandle;else this.internalMaxValue=this.max}componentDidLoad(){this.updateValuePercent()}render(){return t("div",{key:"b465d077094d60c3bdf74cd5ac862e967841067b",class:"ifx-slider"},this.leftText&&t("span",{key:"5913654492aa7e837b6778935b5cb3a7002308fd",class:`left-text`},this.leftText),this.leftIcon&&t("ifx-icon",{key:"26b106c741836e06e127ef3299f0d433de693ab9",icon:this.leftIcon,class:`left-icon${this.disabled?" disabled":""}`}),this.type!=="double"?t("input",{type:"range",min:this.min,max:this.max,step:this.step,value:this.internalValue,disabled:this.disabled,ref:e=>this.inputRef=e,onInput:e=>this.handleInputChange(e),"aria-label":"a slider","aria-value":this.value,"aria-disabled":this.disabled}):t("div",{class:"range-slider__wrapper","aria-label":"a range slider","aria-value":this.value,"aria-disabled":this.disabled},t("input",{id:"min-slider",type:"range",min:this.min,max:this.max,step:this.step,value:this.internalMinValue,disabled:this.disabled,ref:e=>this.minInputRef=e,onInput:e=>this.handleInputChangeOfRangeSlider(e),onMouseUp:e=>this.handleOnMouseLeaveOfRangeSlider(e)}),t("input",{id:"max-slider",type:"range",min:this.min,max:this.max,step:this.step,value:this.internalMaxValue,disabled:this.disabled,ref:e=>this.maxInputRef=e,onInput:e=>this.handleInputChangeOfRangeSlider(e),onMouseUp:e=>this.handleOnMouseLeaveOfRangeSlider(e)})),this.rightIcon&&t("ifx-icon",{key:"4af440423ce265817ecd177c0f74a9ed1d0e5f10",icon:this.rightIcon,class:`right-icon${this.disabled?" disabled":""}`}),this.rightText&&t("span",{key:"627694f955bfc92530e91fdd56ddaa791d7006e7",class:`right-text${this.disabled?" disabled":""}`},this.rightText),this.showPercentage&&this.type!=="double"&&t("span",{key:"6b564afbe80debd694cd325e6719c5fecd40ca66",class:`percentage-display${this.disabled?" disabled":""}`},this.percentage,"%"))}get el(){return s(this)}static get watchers(){return{value:["valueChanged"],minValueHandle:["minValueChanged"],maxValueHandle:["maxValueChanged"]}}};r.style=n;export{r as ifx_slider};
-//# sourceMappingURL=p-3ddd67ce.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["sliderCss","IfxSliderStyle0","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","render","h","key","class","leftText","leftIcon","icon","ref","onInput","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\";\n@use \"../../global/font.scss\";\n\n\n// ifx-slider.scss\n:host {\n  display: inline-block;\n}\n\n.left-icon,\n.right-icon,\n.left-text,\n.right-text,\n.percentage-display {\n  font-size: tokens.$ifxFontSizeS;\n  color: tokens.$ifxColorEngineering500;\n  margin-left: tokens.$ifxSpace100;\n\n  &.disabled {\n    // Add the disabled state for the percentage display\n    color: tokens.$ifxColorEngineering300;\n  }\n}\n\n.left-icon,\n.left-text {\n  margin-right: tokens.$ifxSpace100;\n}\n\n.right-icon,\n.right-text,\n.percentage-display {\n  margin-left: tokens.$ifxSpace100;\n}\n\n\n.ifx-slider {\n  display: flex;\n  align-items: center;\n  padding: tokens.$ifxSpace25 tokens.$ifxSpace200;\n  border-radius: tokens.$ifxBorderRadiusRound;\n\n  input[type='range'] {\n    -webkit-appearance: none;\n    width: 100%;\n    height: 4px;\n    background: linear-gradient(to right, tokens.$ifxColorOcean500 0%, tokens.$ifxColorOcean500 var(--value-percent, 0%), tokens.$ifxColorEngineering200 var(--value-percent, 0%), tokens.$ifxColorEngineering200 100%);\n    outline: none;\n    cursor: pointer;\n    transition: 0.2s;\n\n    &::-moz-range-thumb {\n      width: tokens.$ifxSize250;\n      height: tokens.$ifxSize250;\n      border-radius: 50%;\n      background: tokens.$ifxColorOcean500;\n      cursor: pointer;\n      box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);\n    }\n    \n\n    &:not(:disabled)::-webkit-slider-thumb {\n      -webkit-appearance: none;\n      width: 16px;\n      height: 16px;\n      background: tokens.$ifxColorOcean500;\n      border-radius: 50%;\n      cursor: pointer;\n      transition: box-shadow 0.2s;\n\n      &:hover {\n        background: tokens.$ifxColorOcean600;\n      }\n\n      &:active {\n        background: tokens.$ifxColorOcean700;\n      }\n    }\n  }\n\n  input[type='range']:disabled {\n    background: tokens.$ifxColorEngineering300;\n    cursor: default;\n  }\n\n  input[type='range']:disabled::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    width: 16px;\n    height: 16px;\n    background: tokens.$ifxColorEngineering300;\n    border-radius: 50%;\n    cursor: default;\n  }\n  \n  & .range-slider__wrapper {\n    position: relative;\n    width: 129px;\n    height: 4px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin: 0px 2px;\n    \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%);\n\n    &:has(input[type='range']:disabled) {\n      background: tokens.$ifxColorEngineering300;\n    }\n\n    \n    @mixin thumb() {\n      -webkit-appearance: none;\n      border: none; \n      pointer-events: auto;\n      cursor: pointer;\n      box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);\n    }\n    \n    @mixin track() {\n      -webkit-appearance: none;\n      border: none;\n      background: none; \n      width: 100%;\n    }\n\n    input[type='range'] {\n      position: absolute;\n      pointer-events: none; \n      background: none;\n\n      &::-webkit-slider-thumb { @include thumb; }\n      &::-moz-range-thumb { @include thumb; }\n      &::-ms-thumb { @include thumb; }\n\n      &::-webkit-slider-runnable-track { @include track; }\n      &::-moz-range-track { @include track; }\n    }\n  }\n  \n}\n","import { Component, h, Prop, Event, EventEmitter, State, Watch, Element } from '@stencil/core';\n \n\n@Component({\n  tag: 'ifx-slider',\n  styleUrl: 'slider.scss',\n  shadow: true,\n})\nexport class IfxSlider {\n  @Prop() min: number = 0;\n  @Prop() max: number = 100;\n  @Prop() step: number = 1;\n  @Prop() value: number;\n  @Prop() minValueHandle: number;\n  @Prop() maxValueHandle: number;\n  @Prop() disabled: boolean = false;\n  @Prop() showPercentage: boolean = false;\n  @Prop() leftIcon: string;\n  @Prop() rightIcon: string;\n  @Prop() leftText: string;\n  @Prop() rightText: string;\n  @Prop() type: 'single' | 'double' = 'single';\n  @State() internalValue: number = 0;\n  @State() percentage: number = 0;\n  @State() internalMinValue: number = 0;\n  @State() internalMaxValue: number = 100;\n  @Event() ifxChange: EventEmitter;\n\n  @Element() el;\n\n  private inputRef: HTMLInputElement;\n  private minInputRef: HTMLInputElement;\n  private maxInputRef: HTMLInputElement;\n                                             \n  @Watch('value')\n  valueChanged(newValue: number) {\n    this.internalValue = newValue;\n    this.updateValuePercent();\n  }\n\n  @Watch('minValueHandle')\n  minValueChanged(newValue: number) {\n    this.internalMinValue = newValue;\n    this.updateValuePercent();\n  }\n  \n  @Watch('maxValueHandle')\n  maxValueChanged(newValue: number) {\n    this.internalMaxValue = newValue;\n    this.updateValuePercent();\n  }\n\n  getRangeSliderWrapper() {\n    const rangeSliderWrapper = this.el.shadowRoot.querySelector('.range-slider__wrapper');\n    return rangeSliderWrapper;\n  }\n\n  handleInputChangeOfRangeSlider(event: Event) {\n    const target = event.target as HTMLInputElement;\n    if(parseFloat(this.maxInputRef.value) - parseFloat(this.minInputRef.value) <= 0) {\n      if(target.id === 'max-slider') {\n        this.maxInputRef.value = this.minInputRef.value;\n      }else{\n        this.minInputRef.value = this.maxInputRef.value;\n      }\n    }\n    if(target.id === 'max-slider') {\n      this.internalMaxValue = parseFloat(this.maxInputRef.value);\n    } else {\n      this.internalMinValue = parseFloat(this.minInputRef.value);\n    }\n    this.ifxChange.emit({minVal: this.internalMinValue, maxVal: this.internalMaxValue});\n    this.updateValuePercent();\n    this.updateZIndexIfRangeSlider(target.id)\n  }\n  \n  handleOnMouseLeaveOfRangeSlider(event: Event) {\n    const target = event.target as HTMLInputElement;\n    const sliderWrapper = this.getRangeSliderWrapper();\n    if(target.id === 'max-slider') {\n      sliderWrapper.insertBefore(this.maxInputRef, this.minInputRef);\n    } else {\n      sliderWrapper.insertBefore(this.minInputRef, this.maxInputRef);\n    }\n  }\n\n  calculatePercentageValue() {\n    const num = (this.internalValue - this.min) * 1.0;\n    const den = this.max - this.min;\n    this.percentage = +parseFloat(String((num/den)*100)).toFixed(2);\n  }\n\n  handleInputChange(event: Event) {\n    const target = event.target as HTMLInputElement;\n    this.internalValue = parseFloat(target.value);\n    this.ifxChange.emit(this.internalValue);\n    this.calculatePercentageValue();\n    this.updateValuePercent();\n  }\n\n  private roundToValidStep(value: number) {\n    const relativeValue = value - this.min;\n    const remainder = relativeValue % this.step;\n    if (remainder >= this.step / 2) {\n      return this.min + relativeValue + (this.step - remainder);\n    } else {\n      return this.min + relativeValue - remainder;\n    }\n  }\n\n  updateValuePercent() {\n    const den = this.max - this.min;\n    if(this.type === 'double'){\n      if (this.minInputRef) {\n        const num = (this.roundToValidStep(this.internalMinValue) - this.min) * 1.0;\n        const minPercent = (num/den) * 100;\n        this.minInputRef.parentElement.style.setProperty('--min-value-percent', `${minPercent}%`);\n      }\n\n      if (this.maxInputRef) {\n        const num = (this.roundToValidStep(this.internalMaxValue) - this.min) * 1.0;\n        const maxPercent = (num/den) * 100;\n        this.maxInputRef.parentElement.style.setProperty('--max-value-percent', `${maxPercent}%`);\n      }\n\n    } else {\n\n      if (this.inputRef) {\n        const num = (this.roundToValidStep(this.internalValue) - this.min) * 1.0;\n        const den = this.max - this.min;\n        const percentage = (num/den) * 100;\n        this.inputRef.style.setProperty('--value-percent', `${percentage}%`);\n      }\n\n    }\n  }  \n  \n  // Ensures that the last used slider thumb stays on top of the other thumb in order to handle correct overlapping \n  // if min and max thumbs take the same value.\n  updateZIndexIfRangeSlider(targetId: string = '') {\n    if (targetId === 'max-slider') {\n      this.minInputRef.style.zIndex = '1';\n      this.maxInputRef.style.zIndex = '2';\n    } else {\n      this.minInputRef.style.zIndex = '2';\n      this.maxInputRef.style.zIndex = '1';\n    }\n  }\n\n  componentWillLoad() {\n    if(this.value === undefined) {\n      this.internalValue = (this.max-this.min) / 2;\n    } else {\n      this.internalValue = Math.max(this.min, Math.min(this.max, this.value));\n    }\n\n    this.calculatePercentageValue();\n\n    if(this.minValueHandle !== undefined) this.internalMinValue = this.minValueHandle;\n    else this.internalMinValue = this.min;\n    if(this.maxValueHandle !== undefined) this.internalMaxValue = this.maxValueHandle;\n    else this.internalMaxValue = this.max;\n  }\n\n  componentDidLoad() {\n    this.updateValuePercent();\n\n  }\n\n\n  render() {\n    return (\n      <div class=\"ifx-slider\">\n        {this.leftText && (\n          <span class={`left-text`}>\n            {this.leftText}\n          </span>\n        )}\n        {this.leftIcon && (\n          <ifx-icon icon={this.leftIcon} class={`left-icon${this.disabled ? ' disabled' : ''}`} />\n        )}\n        {\n          (this.type !== 'double') ?\n            <input\n              type=\"range\"\n              min={this.min}\n              max={this.max}\n              step={this.step}\n              value={this.internalValue}\n              disabled={this.disabled}\n              ref={(el) => (this.inputRef = el as HTMLInputElement)}\n              onInput={(event) => this.handleInputChange(event)}\n              aria-label='a slider'\n              aria-value={this.value}\n              aria-disabled={this.disabled}\n              /> \n              :\n            <div class = 'range-slider__wrapper' aria-label='a range slider' aria-value={this.value} aria-disabled={this.disabled} >\n              <input \n                id='min-slider'\n                type='range'\n                min={this.min}\n                max={this.max}\n                step={this.step}\n                value={this.internalMinValue}\n                disabled={this.disabled}\n                ref={(el) => (this.minInputRef = el as HTMLInputElement)}\n                onInput={(event) => this.handleInputChangeOfRangeSlider(event)}\n                onMouseUp={(event) => this.handleOnMouseLeaveOfRangeSlider(event)}\n              />\n              <input \n                id='max-slider'\n                type='range'\n                min={this.min}\n                max={this.max}\n                step={this.step}\n                value={this.internalMaxValue}\n                disabled={this.disabled}\n                ref={(el) => (this.maxInputRef = el as HTMLInputElement)}\n                onInput={(event) => this.handleInputChangeOfRangeSlider(event)}\n                onMouseUp={(event) => this.handleOnMouseLeaveOfRangeSlider(event)}\n              />\n\n            </div>\n        }\n        {this.rightIcon && (\n          <ifx-icon icon={this.rightIcon} class={`right-icon${this.disabled ? ' disabled' : ''}`} />\n        )}\n        {this.rightText && (\n          <span class={`right-text${this.disabled ? ' disabled' : ''}`}>\n            {this.rightText}\n          </span>\n        )}\n\n        {this.showPercentage && (this.type !== \"double\") && (\n          <span\n            class={`percentage-display${this.disabled ? ' disabled' : ''}`}\n          >\n            {this.percentage}%\n          </span>\n        )}\n      </div>\n    );\n  }\n}"],"mappings":"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","ignoreList":[]}

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

@@ -1,2 +0,0 @@
-import{r as e,c as t,h as o}from"./p-c63974da.js";const s=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}.segment{display:flex;align-items:center;justify-content:center;gap:8px;position:relative;border:1px solid #BFBBBB;border-radius:1px;padding:0 8px 0 8px;height:34px;background-color:#FFFFFF;transition:all 100ms ease;transition-property:color, background;font:600 0.875rem/1.25rem "Source Sans 3"}.segment:focus-visible{color:#FFFFFF;background-color:#0A8276}.segment:hover{color:#FFFFFF;background-color:#08665C;cursor:pointer}.segment:active{background-color:#06534B}.segment.segment--selected{color:#FFFFFF;background-color:#0A8276}.segment.segment--small{height:30px}.segment::after{position:absolute;top:0;left:0;width:100%;height:100%;outline:1px solid #BFBBBB;border-radius:1px;content:""}';const n=s;const i=class{constructor(o){e(this,o);this.segmentSelect=t(this,"segmentSelect",5);this.selected=false}handleSegmentClick(){if(this.selected)return;this.selected=true;this.segmentSelect.emit(this.segmentIndex)}handleSegmentKeyDown(e){if(e.code==="Enter"||e.code==="Space"){if(this.selected)return;this.selected=true;this.segmentSelect.emit(this.segmentIndex)}}render(){return o("div",{key:"49c56df2adf407d13685ae7c99b512afa532c6de",class:`segment ${this.selected?"segment--selected":""}`,tabIndex:0,onClick:()=>{this.handleSegmentClick()},onKeyDown:e=>{this.handleSegmentKeyDown(e)}},o("ifx-icon",{key:"c576b2bb7b09ae6ed1946759df7303df36b430dc",icon:this.icon})," ",o("slot",{key:"61d467f2cda3552d5c90e9995ceccdca76c6825c"}))}};i.style=n;export{i as ifx_segment};
-//# sourceMappingURL=p-45cd79e4.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["segmentCss","IfxSegmentStyle0","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\";\n@use \"../../../global/font.scss\";\n\n.segment {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: tokens.$ifxSize100;\n    position: relative;\n\n    border: tokens.$ifxBorderRadius12 solid tokens.$ifxColorEngineering300;\n    border-radius: tokens.$ifxBorderRadius12;\n    padding: 0 tokens.$ifxSize100 0 tokens.$ifxSize100;\n    \n    height: 34px;\n\n    background-color: tokens.$ifxColorBaseWhite;\n\n    transition: all 100ms ease;\n    transition-property: color, background;\n    \n    font: tokens.$ifxBodyBodySemibold04;\n\n    &:focus-visible {\n        color: tokens.$ifxColorBaseWhite;\n        background-color: tokens.$ifxColorOcean500;\n    }\n\n    &:hover {         \n        color: tokens.$ifxColorBaseWhite;\n        background-color: tokens.$ifxColorOcean600;\n        \n        cursor: pointer;\n    }\n    \n    &:active {\n        background-color: tokens.$ifxColorOcean700;\n    }\n    \n    &.segment--selected {\n        color: tokens.$ifxColorBaseWhite;\n        \n        background-color: tokens.$ifxColorOcean500;\n    }\n\n    &.segment--small {\n        height: 30px;\n    }\n}\n\n.segment::after {\n    position: absolute;\n    top: 0;\n    left: 0;\n\n    width: 100%;\n    height: 100%;\n\n    outline: tokens.$ifxBorderRadius12 solid tokens.$ifxColorEngineering300;\n    border-radius: tokens.$ifxBorderRadius12;\n\n    content: '';\n}","import { h, Component, Event, EventEmitter, Prop } from \"@stencil/core\";\n\n@Component ({\n    tag: 'ifx-segment',\n    styleUrl: 'segment.scss',\n    shadow: true\n})\n\nexport class Segment {\n    @Event({ composed: false }) segmentSelect: EventEmitter<number>;\n\n    @Prop() icon: string;\n    @Prop() segmentIndex: number;\n    @Prop({ mutable: true }) selected: boolean = false;\n    @Prop() value!: string;\n\n    handleSegmentClick() {\n        if (this.selected) return;\n        this.selected = true;\n        this.segmentSelect.emit(this.segmentIndex);\n    }\n    \n    handleSegmentKeyDown(event: KeyboardEvent) {\n        if (event.code === 'Enter' || event.code === 'Space') {\n            if (this.selected) return;\n            this.selected = true;\n            this.segmentSelect.emit(this.segmentIndex);\n        }\n    }\n\n    render() {\n        return (\n            <div class={`segment ${this.selected ? 'segment--selected' : ''}`} \n                tabIndex={0}\n                onClick={() => {this.handleSegmentClick()}}\n                onKeyDown={(e) => {this.handleSegmentKeyDown(e)}}>\n                <ifx-icon icon={this.icon}></ifx-icon> <slot />\n            </div>\n        );\n    }\n}"],"mappings":"kDAAA,MAAMA,EAAa,ixBACnB,MAAAC,EAAeD,E,MCOFE,EAAO,MANpB,WAAAC,CAAAC,G,uDAW6BC,KAAAC,SAAoB,K,CAG7C,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,EAAA,QAAAC,IAAA,6C","ignoreList":[]}

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

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

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

@@ -1,2 +0,0 @@
-import{r as t,c as i,h as s}from"./p-c63974da.js";const o=".card-image{width:100%;height:100%;vertical-align:bottom;object-fit:cover}";const c=o;const e=class{constructor(s){t(this,s);this.imgPosition=i(this,"imgPosition",7)}handlePosition(t){this.imgPosition.emit(t)}componentWillLoad(){this.handlePosition(this.position)}componentDidUpdate(){this.handlePosition(this.position)}render(){return s("img",{key:"e08992cdb9c62e7b4f98d58d39457702233ee300",src:this.src,alt:this.alt,class:"card-image"})}};e.style=c;export{e as ifx_card_image};
-//# sourceMappingURL=p-4baf201d.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["radioButtonCss","IfxRadioButtonStyle0","RadioButton","constructor","hostRef","this","disabled","error","size","internalChecked","hasSlot","isChecked","componentWillLoad","checked","slot","el","innerHTML","handleRadioButtonClick","event","stopPropagation","inputElement","click","ifxChange","emit","handleChange","target","name","render","h","key","value","class","onClick","bind","tabIndex","type","hidden","ref","e"],"sources":["src/components/radio-button/radio-button.scss?tag=ifx-radio-button","src/components/radio-button/radio-button.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n    display: inline-flex;\n}\n\n.radioButton__container {\n    box-sizing: border-box;\n    display: inline-flex;\n    flex-direction: row;\n    align-items: center;\n    padding: 0px;\n    gap: tokens.$ifxSpace100;\n    cursor: pointer;\n    font-family: var(--ifx-font-family);\n\n    &.m .radioButton__wrapper {\n        width: tokens.$ifxSize300;\n        height: tokens.$ifxSize300;\n    }\n\n    .radioButton__wrapper {\n        width: tokens.$ifxSize250;\n        height: tokens.$ifxSize250;\n        position: relative;\n        display: block;\n        border-radius: 50%;\n        background-color: tokens.$ifxColorBaseWhite;\n        border: 1px solid #575352;\n\n        &:focus {\n            outline: none;\n\n            &::before {\n                content: '';\n                position: absolute;\n                width: calc(100% + 4px);\n                height: calc(100% + 4px);\n                top: 50%;\n                left: 50%;\n                transform: translate(-50%, -50%);\n                border: 2px solid tokens.$ifxColorOcean500;\n                border-radius: 50%;\n            }\n        }\n\n        .radioButton__wrapper-mark {\n            position: absolute;\n            top: 50%;\n            left: 50%;\n            transform: translate(-50%, -50%);\n            background-color: #0A8276;\n            border-radius: 50%;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            border-color: tokens.$ifxColorBaseTransparent;\n        }\n\n        &:hover {\n            background-color: tokens.$ifxColorEngineering200;\n        }\n\n        &.disabled {\n            background-color: #BFBBBB;\n            border-color: #BFBBBB;\n\n            &.error {\n\n                &:hover,\n                &:focus-visible {\n                    border-color: #CD002F;\n                }\n            }\n        }\n\n        &.checked {\n            border-color: #0A8276;\n\n            &::after {\n                content: \"\";\n                position: absolute;\n                top: 50%;\n                left: 50%;\n                transform: translate(-50%, -50%);\n                width: 10px;\n                height: 10px;\n                background-color: #0A8276;\n                border-radius: 50%;\n            }\n\n            &.disabled::after {\n                background-color: #BFBBBB;\n            }\n\n\n            &:hover {\n                border-color: tokens.$ifxColorOcean600;\n\n                & .radioButton__wrapper-mark {\n                    background-color: tokens.$ifxColorOcean600;\n                }\n            }\n\n            &.disabled {\n                background-color: tokens.$ifxColorBaseWhite;\n                border-color: #BFBBBB;\n\n                &.disabled::after {\n                    background-color: #BFBBBB;\n                }\n\n                & .radioButton__wrapper-mark {\n                    background-color: #BFBBBB;\n                }\n            }\n        }\n\n        &.error:not(.disabled) {\n            border-color: #CD002F;\n\n            &:hover,\n            &:focus-visible {\n                border-color: #CD002F;\n            }\n        }\n    }\n\n    .label {\n        display: flex;\n        align-items: center;\n        height: tokens.$ifxSize250;\n        font-style: normal;\n        font-weight: 400;\n        font-size: tokens.$ifxFontSizeS;\n        line-height: tokens.$ifxLineHeightS;\n        color: tokens.$ifxColorBaseBlack;\n        flex: none;\n        order: 1;\n        flex-grow: 0;\n\n        &.label-m {\n            height: tokens.$ifxSize300;\n            font-size: tokens.$ifxFontSizeM;\n            line-height: tokens.$ifxLineHeightM;\n        }\n\n        &.disabled {\n            color: #BFBBBB;\n        }\n\n\n\n        &:hover {\n            cursor: pointer;\n        }\n    }\n}","import { Component, h, Prop, Element, State, Event, EventEmitter, Listen, Method } from '@stencil/core';\n \n\n@Component({\n  tag: 'ifx-radio-button',\n  styleUrl: 'radio-button.scss',\n  shadow: false,\n  formAssociated: false\n})\nexport class RadioButton {\n  @Element() el;\n  @Prop() disabled: boolean = false;\n  @Prop() value: string;\n  @Prop() error: boolean = false;\n  @Prop() size: \"s\" | \"m\" = \"s\";\n  @Prop() name: string;\n  @Prop() checked: boolean;\n  @State() internalChecked: boolean = false;\n  @State() hasSlot: boolean = true;\n\n  @State() inputElement: HTMLInputElement;\n\n  @Event({ eventName: 'ifxChange' }) ifxChange: EventEmitter;\n\n  /**\n   * @returns whether the radio button is checked.\n   */\n  @Method()\n  async isChecked(): Promise<boolean> {\n    return this.internalChecked;\n  }\n  \n  componentWillLoad() {\n    if (this.checked) this.internalChecked = this.checked;\n    const slot = this.el.innerHTML;\n    if (slot) {\n      this.hasSlot = true;\n    } else this.hasSlot = false;\n  }\n\n\n  /**\n   * Click the hidden input element to let it handle the state\n   * and emit ifxChange event.\n   */\n  handleRadioButtonClick(event: PointerEvent) {\n    if (this.disabled) {\n      event.stopPropagation();\n      return;\n    }\n\n    this.inputElement.click();\n    this.internalChecked = this.inputElement.checked;\n    this.ifxChange.emit(this.internalChecked);\n  }\n\n  /**\n   * Listen to all change events.\n   * Needed to get informed when another button of the group gets chcked \n   * and this one needs to become unchecked. \n   * \n   * @param event \n   */\n  @Listen('change', { target: 'window' }) \n  handleChange(event: Event) {\n    const target = event.target as HTMLInputElement;\n    if (target.name === this.name) {\n      this.internalChecked = this.inputElement.checked;\n    }\n  }\n\n  render() {\n    return (\n      <div\n        aria-label='a radio button' aria-value={this.value} aria-disabled={this.disabled}\n        class={`radioButton__container ${this.size} ${this.disabled ? 'disabled' : ''}`}\n        onClick={this.handleRadioButtonClick.bind(this)}\n      >\n        <div\n          class={`radioButton__wrapper \n          ${this.internalChecked ? 'checked' : ''} \n          ${this.disabled ? 'disabled' : ''} \n          ${this.error ? 'error' : ''}`}\n          tabIndex={this.disabled ? -1 : 0}\n        >\n          {this.internalChecked && <div class=\"radioButton__wrapper-mark\"></div>}\n        </div>\n        {this.hasSlot && (\n          <div class={`label ${this.size === \"m\" ? \"label-m\" : \"\"} ${this.disabled ? 'disabled' : ''}`}>\n            <slot />\n          </div>\n        )}\n        <input\n          type=\"radio\" \n          hidden \n          ref={el => this.inputElement = el as HTMLInputElement} \n          name={this.name}  \n          value={this.value}\n          checked={this.internalChecked}        \n          disabled={this.disabled}\n          onClick={(e) => e.stopPropagation()}></input>\n      </div>\n    );\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAAiB,y5FACvB,MAAAC,EAAeD,E,MCQFE,EAAW,MANxB,WAAAC,CAAAC,G,+CAQUC,KAAAC,SAAoB,MAEpBD,KAAAE,MAAiB,MACjBF,KAAAG,KAAkB,IAGjBH,KAAAI,gBAA2B,MAC3BJ,KAAAK,QAAmB,I,CAU5B,eAAMC,GACJ,OAAON,KAAKI,e,CAGd,iBAAAG,GACE,GAAIP,KAAKQ,QAASR,KAAKI,gBAAkBJ,KAAKQ,QAC9C,MAAMC,EAAOT,KAAKU,GAAGC,UACrB,GAAIF,EAAM,CACRT,KAAKK,QAAU,I,MACVL,KAAKK,QAAU,K,CAQxB,sBAAAO,CAAuBC,GACrB,GAAIb,KAAKC,SAAU,CACjBY,EAAMC,kBACN,M,CAGFd,KAAKe,aAAaC,QAClBhB,KAAKI,gBAAkBJ,KAAKe,aAAaP,QACzCR,KAAKiB,UAAUC,KAAKlB,KAAKI,gB,CAW3B,YAAAe,CAAaN,GACX,MAAMO,EAASP,EAAMO,OACrB,GAAIA,EAAOC,OAASrB,KAAKqB,KAAM,CAC7BrB,KAAKI,gBAAkBJ,KAAKe,aAAaP,O,EAI7C,MAAAc,GACE,OACEC,EAAA,OAAAC,IAAA,wDACa,iBAAgB,aAAaxB,KAAKyB,MAAK,gBAAiBzB,KAAKC,SACxEyB,MAAO,0BAA0B1B,KAAKG,QAAQH,KAAKC,SAAW,WAAa,KAC3E0B,QAAS3B,KAAKY,uBAAuBgB,KAAK5B,OAE1CuB,EAAA,OAAAC,IAAA,2CACEE,MAAO,oCACL1B,KAAKI,gBAAkB,UAAY,kBACnCJ,KAAKC,SAAW,WAAa,kBAC7BD,KAAKE,MAAQ,QAAU,KACzB2B,SAAU7B,KAAKC,UAAY,EAAI,GAE9BD,KAAKI,iBAAmBmB,EAAA,OAAAC,IAAA,2CAAKE,MAAM,+BAErC1B,KAAKK,SACJkB,EAAA,OAAAC,IAAA,2CAAKE,MAAO,SAAS1B,KAAKG,OAAS,IAAM,UAAY,MAAMH,KAAKC,SAAW,WAAa,MACtFsB,EAAA,QAAAC,IAAA,8CAGJD,EAAA,SAAAC,IAAA,2CACEM,KAAK,QACLC,OAAM,KACNC,IAAKtB,GAAMV,KAAKe,aAAeL,EAC/BW,KAAMrB,KAAKqB,KACXI,MAAOzB,KAAKyB,MACZjB,QAASR,KAAKI,gBACdH,SAAUD,KAAKC,SACf0B,QAAUM,GAAMA,EAAEnB,oB","ignoreList":[]}

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

@@ -1 +0,0 @@
-{"version":3,"names":["alertCss","IfxAlertStyle0","Alert","constructor","hostRef","this","variant","closable","AriaLive","alertTypeDescription","primary","success","danger","warning","info","handleClose","ifxClose","emit","renderCloseButton","h","class","onClick","bind","icon","generateUniqueId","prefix","Math","random","toString","substring","componentWillLoad","uniqueId","render","role","name","id"],"sources":["src/components/alert/alert.scss?tag=ifx-alert&encapsulation=shadow","src/components/alert/alert.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: block;\n}\n\n.alert__info-wrapper {\n  display: flex;\n  padding: 16px 24px;\n  font-family: var(--ifx-font-family);\n  box-shadow: 0px 6px 9px 0px #1D1D1D1A;\n\n\n  & .info__text-wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: tokens.$ifxSpace100;\n    width: 100%;\n\n    & .info__headline-wrapper {\n      display: -webkit-box;\n      -webkit-line-clamp: 1;\n      line-clamp: 1;\n      -webkit-box-orient: vertical;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    & .info__headline-wrapper,\n    .info__description-wrapper {\n      color: #1D1D1D;\n      font-size: 16px;\n      font-style: normal;\n      font-weight: 600;\n      line-height: 24px;\n\n      ::slotted(p) {\n        padding: 0;\n        margin: 0;\n      }\n    }\n\n    & .info__description-wrapper {\n      font-weight: 400;\n    }\n  }\n\n  & .close-icon-wrapper {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    justify-content: flex-start;\n    //min-width: tokens.$ifxSize500;\n\n    & button {\n      all: unset;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      line-height: 0;\n      color: tokens.$ifxColorBaseBlack;\n      height: tokens.$ifxSize300;\n      width: tokens.$ifxSize300;\n\n\n      &:focus {\n        outline: 2px solid tokens.$ifxColorOcean500;\n        outline-offset: 2px;\n      }\n    }\n  }\n}\n\n.alert {\n  display: flex;\n  border: 1px solid tokens.$ifxColorOcean500;\n  border-radius: tokens.$ifxBorderRadius12;\n  color: tokens.$ifxColorBaseBlack;\n  background-color: tokens.$ifxColorBaseWhite;\n  font-family: var(--ifx-font-family);\n  box-shadow: 0px 6px 9px 0px #1D1D1D1A;\n\n\n  & .close-icon-wrapper {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-width: tokens.$ifxSize500;\n\n    & button {\n      all: unset;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      line-height: 0;\n      color: tokens.$ifxColorBaseBlack;\n      height: tokens.$ifxSize300;\n      width: tokens.$ifxSize300;\n\n      &:focus {\n        outline: 2px solid tokens.$ifxColorOcean500;\n        outline-offset: 2px;\n      }\n    }\n  }\n\n  & .icon-wrapper {\n    position: relative;\n    min-width: tokens.$ifxSize600;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    background-color: tokens.$ifxColorOcean500;\n  }\n\n  & .alert-text {\n    font-size: 16px;\n    width: 100%;\n    padding: 12px 0px 12px 12px;\n    color: tokens.$ifxColorBaseBlack;\n\n    white-space: pre-wrap;\n    /* wraps text at spaces and within words */\n    word-wrap: break-word;\n    /* breaks text within a word if necessary */\n    overflow-wrap: anywhere;\n    /* breaks text at arbitrary points when needed */\n  }\n\n  &.primary {\n    border: 1px solid tokens.$ifxColorOcean500;\n\n    & .icon-wrapper {\n      background-color: tokens.$ifxColorOcean500;\n      color: tokens.$ifxColorBaseWhite;\n    }\n  }\n\n  &.success {\n    border: 1px solid tokens.$ifxColorGreen500;\n\n    & .icon-wrapper {\n      background-color: tokens.$ifxColorGreen500;\n      color: tokens.$ifxColorBaseWhite;\n    }\n  }\n\n  &.danger {\n    border: 1px solid tokens.$ifxColorRed500;\n\n    & .icon-wrapper {\n      background-color: tokens.$ifxColorRed500;\n      color: tokens.$ifxColorBaseWhite;\n    }\n  }\n\n  &.warning {\n    border: 1px solid tokens.$ifxColorOrange500;\n\n    & .icon-wrapper {\n      background-color: tokens.$ifxColorOrange500;\n      color: tokens.$ifxColorBaseWhite;\n    }\n  }\n}\n\n.close-icon-wrapper {\n  & ifx-icon {\n    &:hover {\n      cursor: pointer;\n    }\n  }\n}","import { Component, Prop, h, Event, EventEmitter, State } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-alert',\n  styleUrl: 'alert.scss',\n  shadow: true,\n})\nexport class Alert {\n  @Prop() variant: 'primary' | 'success' | 'danger' | 'warning' | 'info' = 'primary';\n  @Prop() icon: string;\n  @Event() ifxClose: EventEmitter;\n  @Prop() closable: boolean = true;\n  @Prop() AriaLive = 'assertive';\n  @State() uniqueId: string;\n\n  alertTypeDescription = {\n    \"primary\": 'Neutral alert',\n    \"success\": 'Success Alert',\n    \"danger\": 'Error Alert',\n    \"warning\": 'Warning Alert',\n    \"info\": 'Neutral alert',\n  };\n\n  handleClose() {\n    this.ifxClose.emit();\n  }\n\n  renderCloseButton() {\n    return (\n      <div class=\"close-icon-wrapper\">\n        <button onClick={this.handleClose.bind(this)} aria-label=\"Dismiss alert\">\n          <ifx-icon icon=\"cross-16\" />\n        </button>\n      </div>\n    );\n  }\n\n  generateUniqueId(prefix = 'id') {\n    return `${prefix}-${Math.random().toString(36).substring(2, 9)}`;\n  }\n\n  componentWillLoad() { \n    if (!this.uniqueId) {\n      this.uniqueId = this.generateUniqueId('alert');\n    }\n  }\n\n  render() {\n    return this.variant === 'info' ? (\n      <div class=\"alert__info-wrapper\" role=\"alert\" aria-live={this.AriaLive} aria-describedby={this.alertTypeDescription[this.variant]} aria-labelledby=\"alert-text alert-description\">\n        <div class=\"info__text-wrapper\">\n          <div class=\"info__headline-wrapper\">\n            <slot name=\"headline\" />\n          </div>\n          <div id={`alert-description-${this.uniqueId}`} class=\"info__description-wrapper\">\n            <slot name=\"desc\" />\n          </div>\n        </div>\n        {this.closable ? this.renderCloseButton() : null}\n      </div>\n    ) : (\n      <div class={`alert ${this.variant}`} role=\"alert\">\n        {this.icon && (\n          <div class=\"icon-wrapper\">\n            <ifx-icon icon={this.icon} />\n          </div>\n        )}\n        <div class=\"alert-text\" id={`alert-text-${this.uniqueId}`}>\n          <slot />\n        </div>\n        {this.closable ? this.renderCloseButton() : null}\n      </div>\n    );\n  }\n}\n"],"mappings":"kDAAA,MAAMA,EAAW,qoFACjB,MAAAC,EAAeD,E,MCMFE,EAAK,MALlB,WAAAC,CAAAC,G,6CAMUC,KAAAC,QAAiE,UAGjED,KAAAE,SAAoB,KACpBF,KAAAG,SAAW,YAGnBH,KAAAI,qBAAuB,CACrBC,QAAW,gBACXC,QAAW,gBACXC,OAAU,cACVC,QAAW,gBACXC,KAAQ,gB,CAGV,WAAAC,GACEV,KAAKW,SAASC,M,CAGhB,iBAAAC,GACE,OACEC,EAAA,OAAKC,MAAM,sBACTD,EAAA,UAAQE,QAAShB,KAAKU,YAAYO,KAAKjB,MAAK,aAAa,iBACvDc,EAAA,YAAUI,KAAK,c,CAMvB,gBAAAC,CAAiBC,EAAS,MACxB,MAAO,GAAGA,KAAUC,KAAKC,SAASC,SAAS,IAAIC,UAAU,EAAG,I,CAG9D,iBAAAC,GACE,IAAKzB,KAAK0B,SAAU,CAClB1B,KAAK0B,SAAW1B,KAAKmB,iBAAiB,Q,EAI1C,MAAAQ,GACE,OAAO3B,KAAKC,UAAY,OACtBa,EAAA,OAAKC,MAAM,sBAAsBa,KAAK,QAAO,YAAY5B,KAAKG,SAAQ,mBAAoBH,KAAKI,qBAAqBJ,KAAKC,SAAQ,kBAAkB,gCACjJa,EAAA,OAAKC,MAAM,sBACTD,EAAA,OAAKC,MAAM,0BACTD,EAAA,QAAMe,KAAK,cAEbf,EAAA,OAAKgB,GAAI,qBAAqB9B,KAAK0B,WAAYX,MAAM,6BACnDD,EAAA,QAAMe,KAAK,WAGd7B,KAAKE,SAAWF,KAAKa,oBAAsB,MAG9CC,EAAA,OAAKC,MAAO,SAASf,KAAKC,UAAW2B,KAAK,SACvC5B,KAAKkB,MACJJ,EAAA,OAAKC,MAAM,gBACTD,EAAA,YAAUI,KAAMlB,KAAKkB,QAGzBJ,EAAA,OAAKC,MAAM,aAAae,GAAI,cAAc9B,KAAK0B,YAC7CZ,EAAA,cAEDd,KAAKE,SAAWF,KAAKa,oBAAsB,K","ignoreList":[]}