@infineon/infineon-design-system-stencil 30.9.3--canary.1640.e9ef59f97cf624f94f0207779497ed5e51e1ed11.0 → 30.9.3--canary.1680.63ee9527ec4620c707f0c9846a009da9e4c52d97.0

package/dist/components/ifx-tooltip.js.map

@@ -1 +1 @@
-{"file":"ifx-tooltip.js","mappings":"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","names":[],"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}"],"version":3}
+{"file":"ifx-tooltip.js","mappings":"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","names":[],"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}"],"version":3}

package/dist/components/index.js

@@ -1,3 +1,3 @@
-export { g as getAssetPath, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-a99edff1.js';
+export { g as getAssetPath, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-68d90201.js';
 
 //# sourceMappingURL=index.js.map

package/dist/components/{p-a6310ccf.js → p-094bb435.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h } from './p-a99edff1.js';
+import { p as proxyCustomElement, H, h } from './p-68d90201.js';
 
 const accordionCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}:host{display:block}.accordion-wrapper{display:flex;flex-direction:column;gap:8px;font-family:var(--ifx-font-family)}";
 const IfxAccordionStyle0 = accordionCss;
@@ -22,14 +22,14 @@ const Accordion = /*@__PURE__*/ proxyCustomElement(class Accordion extends H {
         }
     }
     render() {
-        return (h("div", { key: '663e6aac2f3002d3898856b854dbfd96d9519a68', class: "accordion-wrapper" }, h("slot", { key: '0f54044bc1e0d2860ccd3096ee2711eb0a1cb927' })));
+        return (h("div", { key: 'a69a6bea9d5347c0e1808d4635d458ce16614000', class: "accordion-wrapper" }, h("slot", { key: '389e9039f9272a88d95aca8b83efbb754736a5dd' })));
     }
     static get delegatesFocus() { return true; }
     get el() { return this; }
     static get style() { return IfxAccordionStyle0; }
 }, [17, "ifx-accordion", {
         "autoCollapse": [4, "auto-collapse"]
-    }, [[0, "ifxOpen", "onItemOpen"]]]);
+    }, [[0, "ifxItemOpen", "onItemOpen"]]]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
@@ -46,4 +46,4 @@ function defineCustomElement() {
 
 export { Accordion as A, defineCustomElement as d };
 
-//# sourceMappingURL=p-a6310ccf.js.map
+//# sourceMappingURL=p-094bb435.js.map

package/dist/components/p-094bb435.js.map

@@ -0,0 +1 @@
+{"file":"p-094bb435.js","mappings":";;AAAA,MAAM,YAAY,GAAG,gNAAgN,CAAC;AACtO,2BAAe,YAAY;;MCOd,SAAS;;;;;4BAEY,KAAK;;IAIrC,MAAM,UAAU,CAAC,KAAkB;QACjC,IAAI,IAAI,CAAC,YAAY,EAAE;YACrB,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,CAAC,CAAC;YACzE,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE;gBACxB,MAAM,WAAW,GAAG,IAAmC,CAAC;gBACxD,IAAI,WAAW,KAAK,KAAK,CAAC,MAAM,KAAK,MAAM,WAAW,CAAC,IAAI,CAAC,EAAE;oBAC5D,WAAW,CAAC,IAAI,GAAG,KAAK,CAAC;iBAC1B;aACF;SACF;KACF;IAED,MAAM;QACJ,QACE,4DAAK,KAAK,EAAC,mBAAmB,IAC5B,8DAAQ,CACJ,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/accordion/accordion.scss?tag=ifx-accordion&encapsulation=shadow","src/components/accordion/accordion.tsx"],"sourcesContent":["// ifxAccordion.scss\n@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: block;\n}\n\n.accordion-wrapper {\n  display: flex;\n  flex-direction: column;\n  gap: tokens.$ifxSpace100;\n  font-family: var(--ifx-font-family);\n\n}","//ifxAccordion.tsx\nimport { Component, h, Listen, Element, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-accordion',\n  styleUrl: 'accordion.scss',\n  shadow: { delegatesFocus: true },\n})\nexport class Accordion {\n  @Element() el: HTMLElement;\n  @Prop() autoCollapse: boolean = false;\n\n\n  @Listen('ifxItemOpen')\n  async onItemOpen(event: CustomEvent) {\n    if (this.autoCollapse) {\n      const items = Array.from(this.el.querySelectorAll('ifx-accordion-item'));\n      for (const item of items) {\n        const itemElement = item as HTMLIfxAccordionItemElement;\n        if (itemElement !== event.target && (await itemElement.open)) {\n          itemElement.open = false;\n        }\n      }\n    }\n  }\n\n  render() {\n    return (\n      <div class=\"accordion-wrapper\">\n        <slot />\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-0c4e0d19.js → p-11922b8b.js}

@@ -1,5 +1,5 @@
-import { p as proxyCustomElement, H, c as createEvent, h } from './p-a99edff1.js';
-import { d as defineCustomElement$1 } from './p-06410557.js';
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-68d90201.js';
+import { d as defineCustomElement$1 } from './p-7e430b83.js';
 
 function getDefaultExportFromCjs (x) {
 	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
@@ -6840,16 +6840,58 @@ const Choices = /*@__PURE__*/ proxyCustomElement(class Choices extends H {
         this.__registerHost();
         this.ifxSelect = createEvent(this, "ifxSelect", 7);
         this.ifxInput = createEvent(this, "ifxInput", 7);
-        //custom ifx props
+        this.previousOptions = [];
+        this.value = undefined;
+        this.name = undefined;
+        this.items = undefined;
+        this.choices = undefined;
+        this.renderChoiceLimit = undefined;
+        this.maxItemCount = undefined;
+        this.addItems = undefined;
+        this.removeItems = undefined;
+        this.removeItemButton = undefined;
+        this.editItems = undefined;
+        this.duplicateItemsAllowed = undefined;
+        this.delimiter = undefined;
+        this.paste = undefined;
+        this.showSearch = undefined;
+        this.searchChoices = undefined;
+        this.searchFields = undefined;
+        this.searchFloor = undefined;
+        this.searchResultLimit = undefined;
+        this.position = undefined;
+        this.resetScrollPosition = undefined;
+        this.shouldSort = undefined;
+        this.shouldSortItems = undefined;
+        this.sorter = undefined;
+        this.placeholder = undefined;
+        this.searchPlaceholderValue = undefined;
+        this.prependValue = undefined;
+        this.appendValue = undefined;
+        this.renderSelectedChoices = undefined;
+        this.loadingText = undefined;
+        this.noResultsText = undefined;
+        this.noChoicesText = undefined;
+        this.itemSelectText = undefined;
+        this.addItemText = undefined;
+        this.maxItemText = undefined;
+        this.uniqueItemText = undefined;
+        this.classNames = undefined;
+        this.fuseOptions = undefined;
+        this.addItemFilter = undefined;
+        this.customAddItemText = undefined;
+        this.callbackOnInit = undefined;
+        this.callbackOnCreateTemplates = undefined;
+        this.valueComparer = undefined;
         this.error = false;
         this.errorMessage = 'Error';
         this.label = '';
         this.disabled = false;
         this.placeholderValue = 'Placeholder';
+        this.options = undefined;
         this.size = 'medium (40px)';
         this.selectedOption = null;
         this.optionIsSelected = false;
-        this.previousOptions = [];
     }
     watchDisabled(newValue) {
         if (newValue) {
@@ -7373,4 +7415,4 @@ function defineCustomElement() {
 
 export { Choices as C, defineCustomElement as d };
 
-//# sourceMappingURL=p-0c4e0d19.js.map
+//# sourceMappingURL=p-11922b8b.js.map