@infineon/infineon-design-system-stencil 39.5.1--canary.2128.0bbcf8ad9dfd8faa9be4616d66bfb77783eaacbf.0 → 39.5.1--canary.2128.32855eaced35e683ae58f61e74597b349ac6110b.0

package/dist/infineon-design-system-stencil/{p-6e115707.entry.js.map → p-8ab64504.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["spinnerCss","Spinner","constructor","hostRef","this","inverted","componentDidLoad","isNestedInIfxComponent","el","framework","detectFramework","trackComponent","render","h","key","role","ariaLabel","class","getClassNames","variant","getSizeClass","width","height","viewBox","fill","xmlns","id","d","size","classNames","textFieldCss","TextField","placeholder","value","error","label","icon","caption","required","success","disabled","readOnly","showDeleteIcon","autocomplete","type","internalId","valueWatcher","newValue","inputElement","reset","handleDeleteContent","ifxInput","emit","handleInput","query","handleTypeProp","internalType","componentWillLoad","htmlFor","ref","onInput","readonly","maxlength","onClick"],"sources":["src/components/spinner/spinner.scss?tag=ifx-spinner&encapsulation=shadow","src/components/spinner/spinner.tsx","src/components/text-field/text-field.scss?tag=ifx-text-field&encapsulation=shadow","src/components/text-field/text-field.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host {\n  display: inline-block;\n\n}\n\n.spinner {\n  position: relative;\n  width: tokens.$ifxSize500;\n  height: tokens.$ifxSize500;\n\n}\n\n.spinner.s {\n  width: tokens.$ifxSize300;\n  height: tokens.$ifxSize300;\n}\n\n.border {\n  box-sizing: border-box;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  border: 4px solid transparent;\n  border-top-color: tokens.$ifxColorOcean500;\n  border-left-color: tokens.$ifxColorOcean500;\n  border-right-color: tokens.$ifxColorOcean500;\n  border-top-left-radius: 1px;\n  border-top-right-radius: 1px;\n  border-radius: 50%;\n  animation: spin 2s linear infinite;\n\n  &.inverted {\n    border-top-color: tokens.$ifxColorBaseWhite;\n    border-left-color: tokens.$ifxColorBaseWhite;\n    border-right-color: tokens.$ifxColorBaseWhite;\n  }\n}\n\n.semiconductor {\n  width: 100%;\n  height: 100%;\n  animation: spin 2s linear infinite;\n\n  & svg {\n    fill: tokens.$ifxColorOcean500;\n  }\n\n  &.inverted {\n    & svg {\n      fill: tokens.$ifxColorBaseWhite;\n    }\n  }\n\n  &.s {\n    & svg {\n      width: tokens.$ifxSize300;\n      height: tokens.$ifxSize300;\n    }\n  }\n}\n\n\n@keyframes spin {\n  0% {\n    transform: rotate(0deg);\n  }\n\n  100% {\n    transform: rotate(360deg);\n  }\n}","import { Component, h, Prop, Element } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\nimport classNames from 'classnames';\n \n@Component({\n  tag: 'ifx-spinner',\n  styleUrl: 'spinner.scss',\n  shadow: true,\n})\nexport class Spinner {\n  @Element() el;\n  @Prop() size: string;\n  @Prop() variant: string;\n  @Prop() inverted: boolean = false;\n  @Prop() ariaLabel: string | null;\n\n  async componentDidLoad() { \n    if(!isNestedInIfxComponent(this.el)) { \n      const framework = detectFramework();\n      trackComponent('ifx-spinner', await framework)\n    }\n  }\n\n  render() {\n    return (\n      <div role=\"status\" \n      aria-label={this.ariaLabel || \"Loading\"}\n        class={this.getClassNames()}>\n        <div class={`${this.variant !== 'brand' ? 'border' : \"\"} ${this.inverted ? 'inverted' : \"\"}`}></div>\n        {this.variant === 'brand'\n          && <div class={`semiconductor ${this.inverted ? 'inverted' : \"\"} ${this.getSizeClass()}`}>\n            <svg width='40' height='40' viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <g id=\"spinner/conductor\">\n                <path id=\"Vector\" d=\"M38.75 18.75C39.4375 18.75 40 19.3125 40 20C40 20.6875 39.4409 21.25 38.75 21.25H35V26.25H38.75C39.4375 26.25 40 26.8125 40 27.5C40 28.1875 39.4409 28.75 38.75 28.75H35V30C35 32.7617 32.7617 35 30 35H28.75V38.75C28.75 39.4409 28.1875 40 27.5 40C26.8125 40 26.25 39.4409 26.25 38.75V35H21.25V38.75C21.25 39.4409 20.6875 40 20 40C19.3125 40 18.75 39.4409 18.75 38.75V35H13.75V38.75C13.75 39.4409 13.1875 40 12.5 40C11.8125 40 11.25 39.4409 11.25 38.75V35H10C7.23828 35 5 32.7617 5 30V28.75H1.25C0.559062 28.75 0 28.1875 0 27.5C0 26.8125 0.559062 26.25 1.25 26.25H5V21.25H1.25C0.559062 21.25 0 20.6875 0 20C0 19.3125 0.559062 18.75 1.25 18.75H5V13.75H1.25C0.559062 13.75 0 13.1875 0 12.5C0 11.8125 0.559062 11.25 1.25 11.25H5V10C5 7.23828 7.23828 5 10 5H11.25V1.25C11.25 0.5625 11.8125 0 12.5 0C13.1875 0 13.75 0.559063 13.75 1.25V5H18.75V1.25C18.75 0.559063 19.3091 0 20 0C20.6909 0 21.25 0.559063 21.25 1.25V5H26.25V1.25C26.25 0.559063 26.8091 0 27.5 0C28.1909 0 28.75 0.559063 28.75 1.25V5H30C32.7617 5 35 7.23828 35 10V11.25H38.75C39.4409 11.25 40 11.8091 40 12.5C40 13.1909 39.4409 13.75 38.75 13.75H35V18.75H38.75ZM32.5 10C32.5 8.62188 31.3781 7.5 30 7.5H10C8.62187 7.5 7.5 8.62188 7.5 10V30C7.5 31.3781 8.62187 32.5 10 32.5H30C31.3781 32.5 32.5 31.3781 32.5 30V10Z\" />\n              </g>\n            </svg>\n          </div>}\n      </div>\n    );\n  }\n\n  getSizeClass() {\n    return `${this.size}` === \"s\"\n      ? \"s\"\n      : \"\";\n  }\n\n  getClassNames() {\n    return classNames(\n      'spinner',\n      this.size && `spinner ${this.getSizeClass()}`\n    );\n  }\n}\n","@use '~@infineon/design-system-tokens/dist/tokens';\n@use '../../global/font.scss';\n\n:host {\n  display: flex;\n}\n\n.textInput__container {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  padding: 0px;\n  width: 100%;\n  flex: none;\n  order: 0;\n  align-self: stretch;\n  flex-grow: 0;\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n  & .delete-icon {\n    position: absolute;\n    right: tokens.$ifxSpace200;\n  }\n\n  &:not(.readonly, .disabled) .delete-icon {\n    &:hover {\n      cursor: pointer;\n    }\n  }\n\n  &.disabled:not(.readonly) {\n\n    & #text-field { \n      color: tokens.$ifxColorBaseWhite;\n    }\n\n    & .delete-icon { \n      color: tokens.$ifxColorBaseWhite;\n    }\n    \n    & .textInput__top-wrapper {\n      & label {\n        color: tokens.$ifxColorEngineering300;\n      }\n\n      & .required {\n        color: tokens.$ifxColorEngineering300;\n      }\n    }\n\n    & .textInput__bottom-wrapper {\n      input {\n        border: 1px solid tokens.$ifxColorEngineering300;\n        background-color: tokens.$ifxColorEngineering300;\n\n        &::placeholder {\n          font-size: tokens.$ifxFontSizeM;\n          color: tokens.$ifxColorBaseWhite;\n        }\n      }\n    }\n  }\n\n  & .textInput__top-wrapper {\n    display: flex;\n    flex-direction: row;\n    align-items: flex-start;\n    padding: 0px;\n    gap: tokens.$ifxSpace50;\n    flex: none;\n    order: 0;\n    align-self: stretch;\n    flex-grow: 0;\n\n    & label {\n      font-style: normal;\n      font-weight: tokens.$ifxFontWeightRegular;\n      font-size: tokens.$ifxFontSizeM;\n      line-height: tokens.$ifxLineHeightM;\n      display: flex;\n      align-items: center;\n      color: tokens.$ifxColorBaseBlack;\n      flex: none;\n      order: 0;\n      flex-grow: 0;\n\n      & .optional-required {\n        margin-left: tokens.$ifxSpace50;\n      }\n\n      & .optional {\n        margin-left: tokens.$ifxSpace50;\n      }\n\n      & .required {\n        color: tokens.$ifxColorEngineering500;\n        margin-left: tokens.$ifxSpace50;\n\n        &.error {\n          color: tokens.$ifxColorRed500;\n        }\n      }\n    }\n  }\n\n  .input-container {\n    position: relative;\n    display: flex;\n    align-items: center;\n    width: 100%;\n  }\n\n  & .textInput__bottom-wrapper {\n    flex-grow: 1;\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    padding: 0px;\n    gap: tokens.$ifxSpace50;\n    flex: none;\n    order: 1;\n    align-self: stretch;\n    flex-grow: 0;\n\n    & input {\n      width: 100%;\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n      padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\n      gap: tokens.$ifxSpace100;\n      height: tokens.$ifxSize500;\n      background-color: tokens.$ifxColorBaseWhite;\n      color: tokens.$ifxColorBaseBlack;\n      font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n      font-size: tokens.$ifxFontSizeM;\n      line-height: tokens.$ifxLineHeightM;\n      border: 1px solid tokens.$ifxColorEngineering400;\n      border-radius: tokens.$ifxBorderRadius12;\n      flex: none;\n      order: 0;\n      align-self: stretch;\n      flex-grow: 0;\n      text-overflow: ellipsis;\n\n      &.input-s {\n        height: tokens.$ifxSize450;\n        font-size: tokens.$ifxFontSizeS;\n        line-height: tokens.$ifxLineHeightS;\n\n        &::placeholder {\n          font-size: tokens.$ifxFontSizeM;\n          line-height: tokens.$ifxLineHeightS;\n        }\n      }\n\n      &.icon {\n        padding-left: tokens.$ifxSpace500;\n      }\n\n      &.error {\n        border: 1px solid tokens.$ifxColorRed500;\n\n        &:focus {\n          outline: none;\n        }\n      }\n\n      &.readonly {\n        border: none;\n        border-radius: var(--borderRadius-12, 1px);\n        border-bottom: 1px solid var(--color-engineering-300, #bfbbbb);\n        background: var(--color-base-white, #fff);\n        padding-left: 0;\n\n        &::placeholder {\n          color: tokens.$ifxColorBaseBlack;\n        }\n      }\n\n      &.success {\n        border: 1px solid tokens.$ifxColorGreen500;\n\n        &:focus {\n          outline: none;\n        }\n      }\n\n      &:focus:not(.error, .success):not(.readonly) {\n        outline: none;\n        border: 1px solid tokens.$ifxColorOcean500;\n      }\n\n      &.readonly:focus,\n      &[readonly]:focus {\n        outline: none;\n        box-shadow: none;\n        border: none;\n        border-bottom: 1px solid var(--color-engineering-300, #bfbbbb);\n      }\n\n      &:hover:not(:disabled, :focus, .error, .success):not(.readonly) {\n        border: 1px solid tokens.$ifxColorEngineering500;\n      }\n    }\n\n    & .input-icon {\n      // Position the icon within the icon container\n      // Adjust the positioning as needed\n      position: absolute;\n      top: 50%;\n      transform: translateY(-50%);\n      left: tokens.$ifxSpace200;\n      /* Adjust this value to control the icon's left offset */\n      transition: 0.3s;\n      color: tokens.$ifxColorEngineering400;\n    }\n\n    & .textInput__bottom-wrapper-caption {\n      font-style: normal;\n      font-weight: tokens.$ifxFontWeightRegular;\n      font-size: tokens.$ifxFontSizeXs;\n      line-height: tokens.$ifxLineHeightXs;\n      color: tokens.$ifxColorBaseBlack;\n      flex: none;\n      order: 1;\n      align-self: stretch;\n      flex-grow: 0;\n\n      &.error {\n        color: tokens.$ifxColorRed500;\n      }\n\n      &.disabled {\n        color: tokens.$ifxColorEngineering300;\n      }\n    }\n  }\n}","import { Component, h, Event, Element, Prop, EventEmitter, Watch, Method, AttachInternals, State } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n  tag: 'ifx-text-field',\n  styleUrl: 'text-field.scss',\n  shadow: true,\n  // formAssociated: true\n})\nexport class TextField {\n  private inputElement: HTMLInputElement;\n  @Element() el;\n  @Prop() placeholder: string = 'Placeholder';\n  @Prop({ mutable: true }) value: string = '';\n  @Prop() error: boolean = false;\n  @Prop() label: string = '';\n  @Prop() icon: string = '';\n  @Prop() caption: string = '';\n  @Prop() size: string = 'm';\n  @Prop() required: boolean = false;\n  @Prop() success: boolean = false;\n  @Prop() disabled: boolean = false;\n  @Prop() readOnly: boolean = false;\n  @Prop() maxlength?: number;\n  @Prop() showDeleteIcon: boolean = false;\n  @Prop() autocomplete: string = 'on';\n  @Prop() type: 'text' | 'password' = 'text';\n  @Prop() internalId: string = 'text-field';\n  @State() internalType: string;\n  @Event() ifxInput: EventEmitter<String>;\n  // @Prop({ reflect: true })\n  // resetOnSubmit: boolean = false;\n\n  @AttachInternals() internals: ElementInternals;\n\n  @Watch('value')\n  valueWatcher(newValue: string) {\n    if (newValue !== this.inputElement.value) {\n      this.inputElement.value = newValue;\n    }\n  }\n\n  @Method()\n  async reset() {\n    this.value = '';\n    this.inputElement.value = '';\n  }\n\n  handleDeleteContent() {\n    if (!this.disabled && !this.readOnly) {\n      this.reset();\n      this.ifxInput.emit(this.value);\n    }\n  }\n\n  handleInput() {\n    const query = this.inputElement.value;\n    this.value = query;\n    //this.internals.setFormValue(query) // update form value\n    this.ifxInput.emit(this.value);\n  }\n\n  handleTypeProp() {\n    this.internalType = this.type === 'text' || this.type === 'password' ? this.type : 'text';\n  }\n\n  // formResetCallback() {\n  //   this.internals.setValidity({});\n  //   this.internals.setFormValue(\"\");\n  // }\n\n  componentWillLoad() {\n    this.handleTypeProp();\n  }\n\n  async componentDidLoad() {\n    if (!isNestedInIfxComponent(this.el)) {\n      const framework = detectFramework();\n      trackComponent('ifx-text-field', await framework);\n    }\n  }\n\n  render() {\n    return (\n      <div\n        aria-label=\"a text field for user input\"\n        aria-value={this.value}\n        aria-disabled={this.disabled}\n        class={`textInput__container ${this.readOnly ? 'readonly' : ''} ${this.disabled && !this.error ? 'disabled' : ''}`}\n      >\n        <div class=\"textInput__top-wrapper\">\n          {this.label && (\n            <label htmlFor={this.internalId}>\n              <span>{this.label}</span>\n              {this.required && <span class={`required ${this.error && !this.readOnly ? 'error' : ''}`}>*</span>}\n            </label>\n          )}\n        </div>\n\n        <div class=\"textInput__bottom-wrapper\">\n          <div class=\"input-container\">\n            {this.icon && <ifx-icon class=\"input-icon\" icon={this.icon} />}\n            <input\n              ref={el => (this.inputElement = el)}\n              disabled={this.disabled && !this.error}\n              autocomplete={this.autocomplete}\n              type={this.internalType}\n              id={this.internalId}\n              value={this.value}\n              onInput={() => this.handleInput()}\n              placeholder={this.placeholder}\n              readonly={this.readOnly}\n              maxlength={this.maxlength}\n              class={`${this.icon ? 'icon' : ''}\n                ${this.error ? 'error' : ''} \n                ${this.readOnly ? 'readonly' : ''} \n              ${this.size === 's' ? 'input-s' : ''}\n              ${this.success ? 'success' : ''}`}\n            />\n\n            {this.showDeleteIcon && this.value && <ifx-icon class=\"delete-icon\" icon=\"cRemove16\" onClick={() => this.handleDeleteContent()}></ifx-icon>}\n          </div>\n          {this.caption && (\n            <div class={`textInput__bottom-wrapper-caption ${this.error && !this.readOnly ? 'error' : ''} ${this.disabled && !this.readOnly && !this.error ? 'disabled' : ''}`}>\n              {this.caption}\n            </div>\n          )}\n        </div>\n      </div>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["spinnerCss","Spinner","constructor","hostRef","this","inverted","componentDidLoad","isNestedInIfxComponent","el","framework","detectFramework","trackComponent","render","h","key","role","ariaLabel","class","getClassNames","variant","getSizeClass","width","height","viewBox","fill","xmlns","id","d","size","classNames","textFieldCss","TextField","placeholder","value","error","label","icon","caption","required","success","disabled","readOnly","showDeleteIcon","autocomplete","type","internalId","valueWatcher","newValue","inputElement","reset","handleDeleteContent","ifxInput","emit","handleInput","query","handleTypeProp","internalType","componentWillLoad","htmlFor","ref","onInput","readonly","maxlength","onClick"],"sources":["src/components/spinner/spinner.scss?tag=ifx-spinner&encapsulation=shadow","src/components/spinner/spinner.tsx","src/components/text-field/text-field.scss?tag=ifx-text-field&encapsulation=shadow","src/components/text-field/text-field.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host {\n  display: inline-block;\n\n}\n\n.spinner {\n  position: relative;\n  width: tokens.$ifxSize500;\n  height: tokens.$ifxSize500;\n\n}\n\n.spinner.s {\n  width: tokens.$ifxSize300;\n  height: tokens.$ifxSize300;\n}\n\n.border {\n  box-sizing: border-box;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  border: 4px solid transparent;\n  border-top-color: tokens.$ifxColorOcean500;\n  border-left-color: tokens.$ifxColorOcean500;\n  border-right-color: tokens.$ifxColorOcean500;\n  border-top-left-radius: 1px;\n  border-top-right-radius: 1px;\n  border-radius: 50%;\n  animation: spin 2s linear infinite;\n\n  &.inverted {\n    border-top-color: tokens.$ifxColorBaseWhite;\n    border-left-color: tokens.$ifxColorBaseWhite;\n    border-right-color: tokens.$ifxColorBaseWhite;\n  }\n}\n\n.semiconductor {\n  width: 100%;\n  height: 100%;\n  animation: spin 2s linear infinite;\n\n  & svg {\n    fill: tokens.$ifxColorOcean500;\n  }\n\n  &.inverted {\n    & svg {\n      fill: tokens.$ifxColorBaseWhite;\n    }\n  }\n\n  &.s {\n    & svg {\n      width: tokens.$ifxSize300;\n      height: tokens.$ifxSize300;\n    }\n  }\n}\n\n\n@keyframes spin {\n  0% {\n    transform: rotate(0deg);\n  }\n\n  100% {\n    transform: rotate(360deg);\n  }\n}","import { Component, h, Prop, Element } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\nimport classNames from 'classnames';\n \n@Component({\n  tag: 'ifx-spinner',\n  styleUrl: 'spinner.scss',\n  shadow: true,\n})\nexport class Spinner {\n  @Element() el;\n  @Prop() size: string;\n  @Prop() variant: string;\n  @Prop() inverted: boolean = false;\n  @Prop() ariaLabel: string | null;\n\n  async componentDidLoad() { \n    if(!isNestedInIfxComponent(this.el)) { \n      const framework = detectFramework();\n      trackComponent('ifx-spinner', await framework)\n    }\n  }\n\n  render() {\n    return (\n      <div role=\"status\" \n      aria-label={this.ariaLabel || \"Loading\"}\n        class={this.getClassNames()}>\n        <div class={`${this.variant !== 'brand' ? 'border' : \"\"} ${this.inverted ? 'inverted' : \"\"}`}></div>\n        {this.variant === 'brand'\n          && <div class={`semiconductor ${this.inverted ? 'inverted' : \"\"} ${this.getSizeClass()}`}>\n            <svg width='40' height='40' viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <g id=\"spinner/conductor\">\n                <path id=\"Vector\" d=\"M38.75 18.75C39.4375 18.75 40 19.3125 40 20C40 20.6875 39.4409 21.25 38.75 21.25H35V26.25H38.75C39.4375 26.25 40 26.8125 40 27.5C40 28.1875 39.4409 28.75 38.75 28.75H35V30C35 32.7617 32.7617 35 30 35H28.75V38.75C28.75 39.4409 28.1875 40 27.5 40C26.8125 40 26.25 39.4409 26.25 38.75V35H21.25V38.75C21.25 39.4409 20.6875 40 20 40C19.3125 40 18.75 39.4409 18.75 38.75V35H13.75V38.75C13.75 39.4409 13.1875 40 12.5 40C11.8125 40 11.25 39.4409 11.25 38.75V35H10C7.23828 35 5 32.7617 5 30V28.75H1.25C0.559062 28.75 0 28.1875 0 27.5C0 26.8125 0.559062 26.25 1.25 26.25H5V21.25H1.25C0.559062 21.25 0 20.6875 0 20C0 19.3125 0.559062 18.75 1.25 18.75H5V13.75H1.25C0.559062 13.75 0 13.1875 0 12.5C0 11.8125 0.559062 11.25 1.25 11.25H5V10C5 7.23828 7.23828 5 10 5H11.25V1.25C11.25 0.5625 11.8125 0 12.5 0C13.1875 0 13.75 0.559063 13.75 1.25V5H18.75V1.25C18.75 0.559063 19.3091 0 20 0C20.6909 0 21.25 0.559063 21.25 1.25V5H26.25V1.25C26.25 0.559063 26.8091 0 27.5 0C28.1909 0 28.75 0.559063 28.75 1.25V5H30C32.7617 5 35 7.23828 35 10V11.25H38.75C39.4409 11.25 40 11.8091 40 12.5C40 13.1909 39.4409 13.75 38.75 13.75H35V18.75H38.75ZM32.5 10C32.5 8.62188 31.3781 7.5 30 7.5H10C8.62187 7.5 7.5 8.62188 7.5 10V30C7.5 31.3781 8.62187 32.5 10 32.5H30C31.3781 32.5 32.5 31.3781 32.5 30V10Z\" />\n              </g>\n            </svg>\n          </div>}\n      </div>\n    );\n  }\n\n  getSizeClass() {\n    return `${this.size}` === \"s\"\n      ? \"s\"\n      : \"\";\n  }\n\n  getClassNames() {\n    return classNames(\n      'spinner',\n      this.size && `spinner ${this.getSizeClass()}`\n    );\n  }\n}\n","@use '~@infineon/design-system-tokens/dist/tokens';\n@use '../../global/font.scss';\n\n:host {\n  display: flex;\n}\n\n.textInput__container {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  padding: 0px;\n  width: 100%;\n  flex: none;\n  order: 0;\n  align-self: stretch;\n  flex-grow: 0;\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n  & .delete-icon {\n    position: absolute;\n    right: tokens.$ifxSpace200;\n  }\n\n  &:not(.readonly, .disabled) .delete-icon {\n    &:hover {\n      cursor: pointer;\n    }\n  }\n\n  &.disabled:not(.readonly) {\n\n    & #text-field { \n      color: tokens.$ifxColorBaseWhite;\n    }\n\n    & .delete-icon { \n      color: tokens.$ifxColorBaseWhite;\n    }\n    \n    & .textInput__top-wrapper {\n      & label {\n        color: tokens.$ifxColorEngineering300;\n      }\n\n      & .required {\n        color: tokens.$ifxColorEngineering300;\n      }\n    }\n\n    & .textInput__bottom-wrapper {\n      input {\n        border: 1px solid tokens.$ifxColorEngineering300;\n        background-color: tokens.$ifxColorEngineering300;\n\n        &::placeholder {\n          font-size: tokens.$ifxFontSizeM;\n          color: tokens.$ifxColorBaseWhite;\n        }\n      }\n    }\n  }\n\n  & .textInput__top-wrapper {\n    display: flex;\n    flex-direction: row;\n    align-items: flex-start;\n    padding: 0px;\n    gap: tokens.$ifxSpace50;\n    flex: none;\n    order: 0;\n    align-self: stretch;\n    flex-grow: 0;\n\n    & label {\n      font-style: normal;\n      font-weight: tokens.$ifxFontWeightRegular;\n      font-size: tokens.$ifxFontSizeM;\n      line-height: tokens.$ifxLineHeightM;\n      display: flex;\n      align-items: center;\n      color: tokens.$ifxColorBaseBlack;\n      flex: none;\n      order: 0;\n      flex-grow: 0;\n\n      & .optional-required {\n        margin-left: tokens.$ifxSpace50;\n      }\n\n      & .optional {\n        margin-left: tokens.$ifxSpace50;\n      }\n\n      & .required {\n        color: tokens.$ifxColorEngineering500;\n        margin-left: tokens.$ifxSpace50;\n\n        &.error {\n          color: tokens.$ifxColorRed500;\n        }\n      }\n    }\n  }\n\n  .input-container {\n    position: relative;\n    display: flex;\n    align-items: center;\n    width: 100%;\n  }\n\n  & .textInput__bottom-wrapper {\n    flex-grow: 1;\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    padding: 0px;\n    gap: tokens.$ifxSpace50;\n    flex: none;\n    order: 1;\n    align-self: stretch;\n    flex-grow: 0;\n\n    & input {\n      width: 100%;\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n      padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\n      gap: tokens.$ifxSpace100;\n      height: tokens.$ifxSize500;\n      background-color: tokens.$ifxColorBaseWhite;\n      color: tokens.$ifxColorBaseBlack;\n      font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n      font-size: tokens.$ifxFontSizeM;\n      line-height: tokens.$ifxLineHeightM;\n      border: 1px solid tokens.$ifxColorEngineering400;\n      border-radius: tokens.$ifxBorderRadius12;\n      flex: none;\n      order: 0;\n      align-self: stretch;\n      flex-grow: 0;\n      text-overflow: ellipsis;\n\n      &.input-s {\n        height: tokens.$ifxSize450;\n        font-size: tokens.$ifxFontSizeS;\n        line-height: tokens.$ifxLineHeightS;\n\n        &::placeholder {\n          font-size: tokens.$ifxFontSizeM;\n          line-height: tokens.$ifxLineHeightS;\n        }\n      }\n\n      &.icon {\n        padding-left: tokens.$ifxSpace500;\n      }\n\n      &.error {\n        border: 1px solid tokens.$ifxColorRed500;\n\n        &:focus {\n          outline: none;\n        }\n      }\n\n      &.readonly {\n        border: none;\n        border-radius: var(--borderRadius-12, 1px);\n        border-bottom: 1px solid var(--color-engineering-300, #bfbbbb);\n        background: var(--color-base-white, #fff);\n        padding-left: 0;\n\n        &::placeholder {\n          color: tokens.$ifxColorBaseBlack;\n        }\n      }\n\n      &.success {\n        border: 1px solid tokens.$ifxColorGreen500;\n\n        &:focus {\n          outline: none;\n        }\n      }\n\n      &:focus:not(.error, .success):not(.readonly) {\n        outline: none;\n        border: 1px solid tokens.$ifxColorOcean500;\n      }\n\n      &.readonly:focus,\n      &[readonly]:focus {\n        outline: none;\n        box-shadow: none;\n        border: none;\n        border-bottom: 1px solid var(--color-engineering-300, #bfbbbb);\n      }\n\n      &:hover:not(:disabled, :focus, .error, .success):not(.readonly) {\n        border: 1px solid tokens.$ifxColorEngineering500;\n      }\n    }\n\n    & .input-icon {\n      // Position the icon within the icon container\n      // Adjust the positioning as needed\n      position: absolute;\n      top: 50%;\n      transform: translateY(-50%);\n      left: tokens.$ifxSpace200;\n      /* Adjust this value to control the icon's left offset */\n      transition: 0.3s;\n      color: tokens.$ifxColorEngineering400;\n    }\n\n    & .textInput__bottom-wrapper-caption {\n      font-style: normal;\n      font-weight: tokens.$ifxFontWeightRegular;\n      font-size: tokens.$ifxFontSizeXs;\n      line-height: tokens.$ifxLineHeightXs;\n      color: tokens.$ifxColorBaseBlack;\n      flex: none;\n      order: 1;\n      align-self: stretch;\n      flex-grow: 0;\n\n      &.error {\n        color: tokens.$ifxColorRed500;\n      }\n\n      &.disabled {\n        color: tokens.$ifxColorEngineering300;\n      }\n    }\n  }\n}","import { Component, h, Event, Element, Prop, EventEmitter, Watch, Method, AttachInternals, State } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n  tag: 'ifx-text-field',\n  styleUrl: 'text-field.scss',\n  shadow: true,\n  // formAssociated: true\n})\nexport class TextField {\n  private inputElement: HTMLInputElement;\n  @Element() el;\n  @Prop() placeholder: string = 'Placeholder';\n  @Prop({ mutable: true }) value: string = '';\n  @Prop() error: boolean = false;\n  @Prop() label: string = '';\n  @Prop() icon: string = '';\n  @Prop() caption: string = '';\n  @Prop() size: string = 'm';\n  @Prop() required: boolean = false;\n  @Prop() success: boolean = false;\n  @Prop() disabled: boolean = false;\n  @Prop() readOnly: boolean = false;\n  @Prop() maxlength?: number;\n  @Prop() showDeleteIcon: boolean = false;\n  @Prop() autocomplete: string = 'on';\n  @Prop() type: 'text' | 'password' = 'text';\n  @Prop() internalId: string = 'text-field';\n  @State() internalType: string;\n  @Event() ifxInput: EventEmitter<String>;\n  // @Prop({ reflect: true })\n  // resetOnSubmit: boolean = false;\n\n  @AttachInternals() internals: ElementInternals;\n\n  @Watch('value')\n  valueWatcher(newValue: string) {\n    if (newValue !== this.inputElement.value) {\n      this.inputElement.value = newValue;\n    }\n  }\n\n  @Method()\n  async reset() {\n    this.value = '';\n    this.inputElement.value = '';\n  }\n\n  handleDeleteContent() {\n    if (!this.disabled && !this.readOnly) {\n      this.reset();\n      this.ifxInput.emit(this.value);\n    }\n  }\n\n  handleInput() {\n    const query = this.inputElement.value;\n    this.value = query;\n    //this.internals.setFormValue(query) // update form value\n    this.ifxInput.emit(this.value);\n  }\n\n  handleTypeProp() {\n    this.internalType = this.type === 'text' || this.type === 'password' ? this.type : 'text';\n  }\n\n  // formResetCallback() {\n  //   this.internals.setValidity({});\n  //   this.internals.setFormValue(\"\");\n  // }\n\n  componentWillLoad() {\n    this.handleTypeProp();\n  }\n\n  async componentDidLoad() {\n    if (!isNestedInIfxComponent(this.el)) {\n      const framework = detectFramework();\n      trackComponent('ifx-text-field', await framework);\n    }\n  }\n\n  render() {\n    return (\n      <div\n        aria-label=\"a text field for user input\"\n        aria-value={this.value}\n        aria-disabled={this.disabled}\n        class={`textInput__container ${this.readOnly ? 'readonly' : ''} ${this.disabled && !this.error ? 'disabled' : ''}`}\n      >\n        <div class=\"textInput__top-wrapper\">\n          {this.label && (\n            <label htmlFor={this.internalId}>\n              <span>{this.label}</span>\n              {this.required && <span class={`required ${this.error && !this.readOnly ? 'error' : ''}`}>*</span>}\n            </label>\n          )}\n        </div>\n\n        <div class=\"textInput__bottom-wrapper\">\n          <div class=\"input-container\">\n            {this.icon && <ifx-icon class=\"input-icon\" icon={this.icon} />}\n            <input\n              ref={el => (this.inputElement = el)}\n              disabled={this.disabled && !this.error}\n              autocomplete={this.autocomplete}\n              type={this.internalType}\n              id={this.internalId}\n              value={this.value}\n              onInput={() => this.handleInput()}\n              placeholder={this.placeholder}\n              readonly={this.readOnly}\n              maxlength={this.maxlength}\n              class={`${this.icon ? 'icon' : ''}\n                ${this.error ? 'error' : ''} \n                ${this.readOnly ? 'readonly' : ''} \n              ${this.size === 's' ? 'input-s' : ''}\n              ${this.success ? 'success' : ''}`}\n            />\n\n            {this.showDeleteIcon && this.value && <ifx-icon class=\"delete-icon\" icon=\"cRemove16\" onClick={() => this.handleDeleteContent()}></ifx-icon>}\n          </div>\n          {this.caption && (\n            <div class={`textInput__bottom-wrapper-caption ${this.error && !this.readOnly ? 'error' : ''} ${this.disabled && !this.readOnly && !this.error ? 'disabled' : ''}`}>\n              {this.caption}\n            </div>\n          )}\n        </div>\n      </div>\n    );\n  }\n}\n"],"mappings":"oMAAA,MAAMA,EAAa,ovB,MCWNC,EAAO,MALpB,WAAAC,CAAAC,G,UASUC,KAAQC,SAAY,KAwC7B,CArCC,sBAAMC,GACJ,IAAIC,EAAuBH,KAAKI,IAAK,CACnC,MAAMC,EAAYC,IAClBC,EAAe,oBAAqBF,E,EAIxC,MAAAG,GACE,OACEC,EAAK,OAAAC,IAAA,2CAAAC,KAAK,SAAQ,aACNX,KAAKY,WAAa,UAC5BC,MAAOb,KAAKc,iBACZL,EAAA,OAAAC,IAAA,2CAAKG,MAAO,GAAGb,KAAKe,UAAY,QAAU,SAAW,MAAMf,KAAKC,SAAW,WAAa,OACvFD,KAAKe,UAAY,SACbN,EAAA,OAAAC,IAAA,2CAAKG,MAAO,iBAAiBb,KAAKC,SAAW,WAAa,MAAMD,KAAKgB,kBACtEP,EAAA,OAAAC,IAAA,2CAAKO,MAAM,KAAKC,OAAO,KAAKC,QAAQ,YAAYC,KAAK,OAAOC,MAAM,8BAChEZ,EAAG,KAAAC,IAAA,2CAAAY,GAAG,qBACJb,EAAA,QAAAC,IAAA,2CAAMY,GAAG,SAASC,EAAE,4vC,CAQlC,YAAAP,GACE,MAAO,GAAGhB,KAAKwB,SAAW,IACtB,IACA,E,CAGN,aAAAV,GACE,OAAOW,EACL,UACAzB,KAAKwB,MAAQ,WAAWxB,KAAKgB,iB,qCCpDnC,MAAMU,EAAe,u3I,MCWRC,EAAS,MANtB,WAAA7B,CAAAC,G,6MASUC,KAAW4B,YAAW,cACL5B,KAAK6B,MAAW,GACjC7B,KAAK8B,MAAY,MACjB9B,KAAK+B,MAAW,GAChB/B,KAAIgC,KAAW,GACfhC,KAAOiC,QAAW,GAClBjC,KAAIwB,KAAW,IACfxB,KAAQkC,SAAY,MACpBlC,KAAOmC,QAAY,MACnBnC,KAAQoC,SAAY,MACpBpC,KAAQqC,SAAY,MAEpBrC,KAAcsC,eAAY,MAC1BtC,KAAYuC,aAAW,KACvBvC,KAAIwC,KAAwB,OAC5BxC,KAAUyC,WAAW,YAwG9B,CA/FC,YAAAC,CAAaC,GACX,GAAIA,IAAa3C,KAAK4C,aAAaf,MAAO,CACxC7B,KAAK4C,aAAaf,MAAQc,C,EAK9B,WAAME,GACJ7C,KAAK6B,MAAQ,GACb7B,KAAK4C,aAAaf,MAAQ,E,CAG5B,mBAAAiB,GACE,IAAK9C,KAAKoC,WAAapC,KAAKqC,SAAU,CACpCrC,KAAK6C,QACL7C,KAAK+C,SAASC,KAAKhD,KAAK6B,M,EAI5B,WAAAoB,GACE,MAAMC,EAAQlD,KAAK4C,aAAaf,MAChC7B,KAAK6B,MAAQqB,EAEblD,KAAK+C,SAASC,KAAKhD,KAAK6B,M,CAG1B,cAAAsB,GACEnD,KAAKoD,aAAepD,KAAKwC,OAAS,QAAUxC,KAAKwC,OAAS,WAAaxC,KAAKwC,KAAO,M,CAQrF,iBAAAa,GACErD,KAAKmD,gB,CAGP,sBAAMjD,GACJ,IAAKC,EAAuBH,KAAKI,IAAK,CACpC,MAAMC,EAAYC,IAClBC,EAAe,uBAAwBF,E,EAI3C,MAAAG,GACE,OACEC,EACa,OAAAC,IAAA,sFAA6B,aAC5BV,KAAK6B,MACF,gBAAA7B,KAAKoC,SACpBvB,MAAO,wBAAwBb,KAAKqC,SAAW,WAAa,MAAMrC,KAAKoC,WAAapC,KAAK8B,MAAQ,WAAa,MAE9GrB,EAAA,OAAAC,IAAA,2CAAKG,MAAM,0BACRb,KAAK+B,OACJtB,EAAO,SAAAC,IAAA,2CAAA4C,QAAStD,KAAKyC,YACnBhC,EAAO,QAAAC,IAAA,4CAAAV,KAAK+B,OACX/B,KAAKkC,UAAYzB,EAAM,QAAAC,IAAA,2CAAAG,MAAO,YAAYb,KAAK8B,QAAU9B,KAAKqC,SAAW,QAAU,MAAI,OAK9F5B,EAAK,OAAAC,IAAA,2CAAAG,MAAM,6BACTJ,EAAK,OAAAC,IAAA,2CAAAG,MAAM,mBACRb,KAAKgC,MAAQvB,EAAA,YAAAC,IAAA,2CAAUG,MAAM,aAAamB,KAAMhC,KAAKgC,OACtDvB,EAAA,SAAAC,IAAA,2CACE6C,IAAKnD,GAAOJ,KAAK4C,aAAexC,EAChCgC,SAAUpC,KAAKoC,WAAapC,KAAK8B,MACjCS,aAAcvC,KAAKuC,aACnBC,KAAMxC,KAAKoD,aACX9B,GAAItB,KAAKyC,WACTZ,MAAO7B,KAAK6B,MACZ2B,QAAS,IAAMxD,KAAKiD,cACpBrB,YAAa5B,KAAK4B,YAClB6B,SAAUzD,KAAKqC,SACfqB,UAAW1D,KAAK0D,UAChB7C,MAAO,GAAGb,KAAKgC,KAAO,OAAS,uBAC3BhC,KAAK8B,MAAQ,QAAU,wBACvB9B,KAAKqC,SAAW,WAAa,sBAC/BrC,KAAKwB,OAAS,IAAM,UAAY,qBAChCxB,KAAKmC,QAAU,UAAY,OAG9BnC,KAAKsC,gBAAkBtC,KAAK6B,OAASpB,EAAU,YAAAC,IAAA,2CAAAG,MAAM,cAAcmB,KAAK,YAAY2B,QAAS,IAAM3D,KAAK8C,yBAE1G9C,KAAKiC,SACJxB,EAAA,OAAAC,IAAA,2CAAKG,MAAO,qCAAqCb,KAAK8B,QAAU9B,KAAKqC,SAAW,QAAU,MAAMrC,KAAKoC,WAAapC,KAAKqC,WAAarC,KAAK8B,MAAQ,WAAa,MAC3J9B,KAAKiC,U","ignoreList":[]}

package/dist/infineon-design-system-stencil/{p-2e172019.entry.js → p-8c44be53.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,c as t,h as i,a as n}from"./p-PqnYwNKt.js";const a=':host(.hidden){display:none}.navbar__item{position:relative;display:flex;flex-direction:row;align-items:center;padding:0px 8px;flex:none;order:0;flex-grow:0;font-family:var(--ifx-font-family);text-decoration:none;font-weight:400;font-size:16px;color:#1D1D1D}.navbar__item.hide{display:none}.navbar__item.isParent{gap:8px}.navbar__item .navItemIconWrapper{transition:0.3s;display:flex}.navbar__item.open .navItemIconWrapper{transform:rotate(-180deg);transition:0.3s}.navbar__item:hover{color:#0A8276;cursor:pointer}.navbar__item:hover .username__tooltip{display:block}.navbar__item:hover .navbar__container-right-content-navigation-item-icon-wrapper .initials__wrapper{cursor:pointer;background-color:#08665C}.navbar__item.remove{display:none}.navbar__item.removeLabel .label__wrapper{display:none}.navbar__item .number__indicator-wrapper{position:relative;top:-11px}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper{position:relative;display:flex;flex-direction:row;justify-content:center;align-items:center;padding:0px;gap:8px;flex:none;order:0;flex-grow:0}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper .username__tooltip{display:none;position:absolute;top:35px;right:0;text-wrap:nowrap;padding:1px 5px;font-size:13px;font-family:"Source Sans 3";background-color:black;color:#fff;z-index:99}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper:hover .username__tooltip{display:block}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper .initials__wrapper{display:flex;width:24px;height:24px;justify-content:center;align-items:center;border-radius:100%;background-color:#0A8276}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper .initials__wrapper .initials{color:#FFF;text-align:center;font-family:"Source Sans 3";font-size:14px;font-style:normal;font-weight:600;line-height:20px;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper img{width:24px;height:24px;border-radius:100%}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper.removeWrapper{display:none}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper.hide{display:none}.container{position:relative}.container:focus{outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276}.container .sub__layer-back-button{display:none}.container .sub__layer-back-button.show{display:flex;justify-content:flex-start}.container .sub__layer-back-button.show .back__button-wrapper{display:flex;align-items:center;gap:8px;padding:8px 0 16px 0;color:#0A8276;font-size:16px;font-style:normal;font-weight:600;line-height:24px}.container .sub__layer-back-button.show .back__button-wrapper span:hover,.container .sub__layer-back-button.show .back__button-wrapper ifx-icon:hover{cursor:pointer}.container.hide{display:none}.container .inner__content-wrapper{position:relative;display:flex;justify-content:space-between;align-items:center;gap:8px}.container .inner__content-wrapper.no-gap{gap:0px}.container .inner__content-wrapper .navbar__container-right-content-navigation-item-icon-wrapper.no-gap{gap:0px}.container .inner__content-wrapper .number__indicator-wrapper{position:relative;top:-11px}.navbar-menu{position:absolute;display:none;list-style-type:none;visibility:visible;flex-direction:column;width:224px;min-width:224px;background:#FFFFFF;box-shadow:0px 6px 9px 0px rgba(29, 29, 29, 0.1019607843);border:1px solid #EEEDED;padding:8px 0px;font-family:var(--ifx-font-family)}.navbar-menu.open:not(.itemInMobileMenu){display:flex}.navbar-menu.itemInMobileMenu{display:none}.navbar-menu.right{left:100%;top:-40%}.navbar-menu.left{top:-40%;right:100%}.navbar-menu.rightSideItemMenu{left:initial;right:0px}.navbar__item.layer__item-parent{color:#1D1D1D;font-size:24px;font-style:normal;font-weight:600;line-height:32px;letter-spacing:-0.24px;cursor:initial}.navbar__item.layer__item-parent .navbar__container-right-content-navigation-item-icon-wrapper ifx-icon svg{width:24px;height:24px}.navbar__item.sidebarMenuItem{justify-content:space-between;padding:0}.navbar__item.menuItem{text-decoration:none;color:#1D1D1D;display:flex;align-items:center;justify-content:space-between;padding:8px 16px;gap:8px;font-family:var(--ifx-font-family)}.navbar__item.menuItem.hide{display:none}.navbar__item.menuItem .label__wrapper{color:#1D1D1D;font-size:16px;font-style:normal;font-weight:400;line-height:24px}.navbar__item.menuItem:hover{cursor:pointer;background-color:#EEEDED}.navbar__item.menuItem:active{background-color:#BFBBBB}.sub__layer-menu{padding:5px;display:none}.sub__layer-menu.remove__margin{margin:0;padding:0}.sub__layer-menu.open{display:block}.navbar__item.hide{display:none}.menuItemRightIconWrapper.hide{display:none}.navItemIconWrapper.hide{display:none}';const s=class{constructor(i){e(this,i);this.ifxNavItem=t(this,"ifxNavItem",7);this.showLabel=true;this.icon="";this.href="";this.target="_self";this.hideOnMobile=true;this.internalHref="";this.isMenuItem=false;this.hasChildNavItems=false;this.isSidebarMenuItem=false;this.dotIndicator=false}handleFocusOut(e){var t,i;const n=(i=(t=this.el.parentElement)===null||t===void 0?void 0:t.tagName)===null||i===void 0?void 0:i.toUpperCase();if(n==="IFX-NAVBAR"){const t=this.isFocusWithinComponent(e.relatedTarget);if(!t){this.closeItemMenu();this.ifxNavItem.emit({component:this.el,action:"hideFirstLayer"})}return}this.handleNestedLayerMenu(e)}handleOutsideClick(e){const t=e.composedPath();const i=this.getItemMenu();if(i){if(i.classList.contains("open")){if(!t.includes(this.el)){this.closeItemMenu()}}}}async hideComponent(){this.el.style.display="none"}async showComponent(){this.el.style.display=""}async toggleChildren(e){const t=this.getItemMenu();const i=this.getChevronDownIconWrapper();if(t){this.handleClassList(i,e,"hide");this.handleClassList(t,e,"itemInMobileMenu")}}async moveChildComponentsIntoSubLayerMenu(){const e=this.getItemMenu();if(e){const t=this.handleClassList(e,"contains","open");if(t){const e=this.getNavBarItem();const t=this.getSubLayerBackButton();this.handleClassList(e,"add","layer__item-parent");this.handleClassList(t,"add","show");this.ifxNavItem.emit({component:this.el,action:"hideFirstLayer"})}}const t=this.el.querySelectorAll('[slot="first__layer"]');this.isSidebarMenuItem=true;for(let e=0;e<t.length;e++){t[e].setAttribute("slot","second__layer");t[e].moveChildComponentsIntoSubLayerMenu()}}getSubLayerBackButton(){const e=this.el.shadowRoot.querySelector(".sub__layer-back-button");return e}async toggleFirstLayerItem(e,t){const i=this.getNavBarItem();const n=this.getSubLayerMenu();const a=this.getSubLayerBackButton();this.handleClassList(a,[e],"show");this.handleClassList(i,[t],"hide");this.handleClassList(n,[t],"remove__margin")}openSubLayerMenu(){if(this.hasChildNavItems){const e=this.getSubLayerBackButton();const t=this.getRightArrowIcon();const i=this.getNavBarItem();const n=this.getSubLayerMenu();const a=this.el.getAttribute("slot");this.handleClassList(e,"add","show");this.handleClassList(t,"add","hide");this.handleClassList(i,"add","layer__item-parent");this.handleClassList(n,"add","open");if(a.toLowerCase()==="second__layer"){this.ifxNavItem.emit({component:this.el,parent:this.el.parentElement,action:"hideSecondLayer"});this.handleClassList(i,"remove","menuItem")}else{this.ifxNavItem.emit({component:this.el,action:"hideFirstLayer"})}}}async addMenuItemClass(){const e=this.getNavBarItem();this.handleClassList(e,"add","menuItem");const t=this.getRightArrowIcon();if(this.hasChildNavItems){this.handleClassList(t,"remove","hide")}}async moveChildComponentsBackIntoNavbar(){const e=this.getSubLayerBackButton();const t=this.getNavBarItem();const i=this.getSubLayerMenu();this.handleClassList(e,"remove","show");this.handleClassList(t,"remove","layer__item-parent");this.handleClassList(i,"remove","remove__margin");this.ifxNavItem.emit({component:this.el,action:"show"});const n=this.el.querySelectorAll('[slot="second__layer"]');this.isSidebarMenuItem=false;this.showComponent();this.handleClassList(t,"remove","hide");for(let e=0;e<n.length;e++){n[e].setAttribute("slot","first__layer");n[e].moveChildComponentsBackIntoNavbar();n[e].addMenuItemClass();n[e].returnToFirstLayer()}}getRightArrowIcon(){const e=this.el.shadowRoot.querySelector(".menuItemRightIconWrapper");return e}getChevronDownIconWrapper(){const e=this.el.shadowRoot.querySelector(".navItemIconWrapper");return e}async returnToFirstLayer(){const e=this.getSubLayerBackButton();const t=this.getNavBarItem();const i=this.getRightArrowIcon();const n=this.getSubLayerMenu();const a=this.el.getAttribute("slot");this.handleClassList(e,"remove","show");this.handleClassList(t,"remove","layer__item-parent");this.handleClassList(n,"remove","open");if(this.hasChildNavItems){this.handleClassList(i,"remove","hide")}if(a.toLowerCase()==="second__layer"){this.ifxNavItem.emit({component:this.el,parent:this.el.parentElement,action:"returnToSecondLayer"});this.handleClassList(t,"add","menuItem")}else{this.ifxNavItem.emit({component:this.el,action:"return"})}}componentWillLoad(){this.setHref();this.checkIfItemIsNested();this.checkIfItemHasChildren();this.removeEmptyItem()}componentDidLoad(){this.handleItemGap();this.handleLabelWrapper();if(this.hasChildNavItems){const e=this.getNavbarItems();this.relocateItemsToFirstlayer(e)}}componentDidUpdate(){const e=this.getNavBarItem();const t=this.handleClassList(e,"contains","layer__item-parent");if(this.isSidebarMenuItem&&t){const e=this.getRightArrowIcon();this.handleClassList(e,"add","hide")}}async setMenuItemPosition(){if(this.isMenuItem&&this.hasChildNavItems){const e=this.getItemMenuPosition();if(e==="left"){this.itemPosition="left"}else if(e==="right"){this.itemPosition="right"}}}handleClassList(e,t,i){if(!e)return false;e.classList[t](i);if(t==="contains"){return e.classList.contains(i)}}getNavbarItems(){const e=this.el.querySelectorAll("ifx-navbar-item");return e}getNavBarItem(){const e=this.el.shadowRoot.querySelector(".navbar__item");return e}getSubLayerMenu(){const e=this.el.shadowRoot.querySelector(".sub__layer-menu");return e}relocateItemsToFirstlayer(e){e.forEach((e=>{e.setAttribute("slot","first__layer")}))}setHref(){if(this.href.toLowerCase().trim()===""){this.internalHref=undefined}else this.internalHref=this.href}checkIfItemIsNested(){const e=this.el.parentElement;if(e.tagName.toUpperCase()==="IFX-NAVBAR-ITEM"||e.tagName.toUpperCase()==="IFX-NAVBAR-PROFILE"){this.isMenuItem=true;return}else{this.isMenuItem=false}}checkIfItemHasChildren(){const e=this.getNavbarItems();if(e.length!==0){this.hasChildNavItems=true}else{this.hasChildNavItems=false}}async setItemSideSpecifications(){const e=this.el;const t=this.getItemMenu();const i=e.getAttribute("slot");if(i.toLowerCase().trim()==="right-item"){this.handleClassList(t,"add","rightSideItemMenu")}return true}getItemMenu(){const e=this.el.shadowRoot.querySelector(".navbar-menu");return e}getParentItemMenu(){var e;return(e=this.el.parentElement)===null||e===void 0?void 0:e.shadowRoot.querySelector(".navbar-menu")}closeItemMenu(){const e=this.getItemMenu();const t=this.getNavBarItem();if(e){this.handleClassList(e,"remove","open");this.handleClassList(t,"remove","open")}}getItemMenuPosition(){let e=this.el;while(e){if(e.tagName==="IFX-NAVBAR-PROFILE"||e.slot==="right-item"){return"left"}e=e.parentElement||e.getRootNode().host}return"right"}toggleItemMenu(){const e=this.el.getAttribute("slot").toLowerCase();if(e==="mobile-menu-top"||e==="second__layer"){this.openSubLayerMenu()}else if(!this.internalHref){if(this.hasChildNavItems){const e=this.getItemMenu();const t=this.getNavBarItem();this.handleClassList(e,"toggle","open");this.handleClassList(t,"toggle","open");if(this.isMenuItem&&!this.isSidebarMenuItem&&e.classList.contains("open")){this.handleNestedLayerMenu({type:"mouseenter"})}}else{const e=this.getParentItemMenu();if(e){this.handleClassList(e,"toggle","open")}}}}handleNestedLayerMenu(e){if(this.isMenuItem&&this.hasChildNavItems&&!this.isSidebarMenuItem){const t=this.getItemMenu();const i=this.getItemMenuPosition();const n=e.type.toUpperCase();if(n==="MOUSEENTER"){this.handleClassList(t,"add","open");if(i==="left"){this.handleClassList(t,"add","left")}else if(i==="right"){this.handleClassList(t,"add","right")}}if(n==="MOUSELEAVE"){this.handleClassList(t,"remove","open");if(i==="left"){this.handleClassList(t,"remove","left")}else if(i==="right"){this.handleClassList(t,"remove","right")}}if(n==="FOCUSOUT"){const n=this.isFocusWithinComponent(e.relatedTarget);if(!n){this.handleClassList(t,"remove","open");if(i==="left"){this.handleClassList(t,"remove","left")}else if(i==="right"){this.handleClassList(t,"remove","right")}}}}}isFocusWithinComponent(e){var t;if(!e)return false;const i=e;const n=this.el.contains(i);const a=(t=this.el.shadowRoot)===null||t===void 0?void 0:t.contains(i);const s=i.getRootNode();if(s instanceof ShadowRoot){const e=s;if(this.el.contains(e.host)){return true}}return n||a}handleLabelWrapper(){const e=this.el.shadowRoot.querySelector(".label__wrapper");const t=this.getNavBarItem();const i=e.querySelector("slot");if(!i.assignedNodes().length){t.classList.add("removeLabel")}else if(this.showLabel&&t.classList.contains("removeLabel")){t.classList.remove("removeLabel")}}handleItemGap(){const e=this.el.shadowRoot.querySelector(".navbar__item");const t=e.querySelector(".navbar__container-right-content-navigation-item-icon-wrapper");if(this.numberIndicator||this.dotIndicator){this.handleClassList(t,"add","no-gap")}else{this.handleClassList(t,"remove","no-gap")}}removeEmptyItem(){const e=this.el.shadowRoot.host;if(!this.showLabel&&!this.icon){this.handleClassList(e,"add","hidden")}}handleKeyDown(e){if(e.key==="Enter"){e.stopPropagation();e.preventDefault();this.toggleItemMenu()}}render(){return i("div",{key:"2247bd282d899a4058904010e95e739ba268cff6",tabIndex:1,class:"container",onMouseLeave:e=>this.handleNestedLayerMenu(e),onKeyDown:e=>this.handleKeyDown(e),onMouseEnter:e=>this.handleNestedLayerMenu(e)},i("div",{key:"59344778b99b7841b7b2dfa029377232d1366514",class:"sub__layer-back-button"},i("div",{key:"b6ca4910e8e76965c68dc047d3acc782cd42c104",class:"back__button-wrapper",onClick:()=>this.returnToFirstLayer()},i("ifx-icon",{key:"4e125406dbdd78a980875d2a61dc039c55092787",icon:"arrow-left-16"}),i("span",{key:"739794300dcaaa43b0603e857bd8844cc33e29ff"},"Back"))),i("a",{key:"d80292ea2a49171f0606366f4d179d4bf09c65e3",tabindex:-1,href:this.internalHref,target:this.target,onClick:()=>this.toggleItemMenu(),class:`navbar__item ${this.isSidebarMenuItem?"sidebarMenuItem":""} ${!this.showLabel?"removeLabel":""} ${this.isMenuItem?"menuItem":""} ${this.hasChildNavItems?"isParent":""}`},i("div",{key:"48256a9604f143a21fde2d228a46064383ef3f7a",class:"inner__content-wrapper"},i("div",{key:"cf0a99c88e7a7b8f0ac21323e63d3b10aa1f473b",class:`navbar__container-right-content-navigation-item-icon-wrapper ${!this.icon?"removeWrapper":""}`},this.icon&&i("ifx-icon",{key:"72ee0ff92a20930fefe6aaaa4446baa67af4ab78",icon:this.icon}),this.icon&&!this.showLabel&&!isNaN(this.numberIndicator)&&i("div",{key:"7ddf104b002f5c8deaec6242182fb5ac5f28df79",class:"number__indicator-wrapper"},i("ifx-indicator",{key:"cc40353b433ef27a4b825178bdf5129c8f9e81ff",variant:"number",number:this.numberIndicator})),this.icon&&!this.showLabel&&!this.numberIndicator&&this.dotIndicator&&i("div",{key:"665350c3a2c2083583ac329db05efdc7b80f10d2",class:"dot__indicator-wrapper"})),this.itemPosition==="left"&&this.hasChildNavItems&&this.isMenuItem&&i("div",{key:"c49e5148cfc99b9c46b7ace71285785feebf9d0f",class:"menuItemLeftIconWrapper"},i("ifx-icon",{key:"e5fe657c7da8e3c8d27c491e75cb85b66f1609aa",icon:"chevron-left-16"})),i("span",{key:"cefa64025f76292a88a3af57ada85024d72ba52c",class:"label__wrapper"},i("slot",{key:"1e8db1b48fb4e6bc2a55cbbde29dde56edfceccd"}))),this.showLabel&&this.numberIndicator&&!isNaN(this.numberIndicator)?i("div",{class:"number__indicator-wrapper"},i("ifx-indicator",{variant:"number",number:this.numberIndicator})):"",this.showLabel&&!this.numberIndicator&&this.dotIndicator?i("ifx-indicator",{variant:"dot"}):"",i("div",{key:"8de2ad0cf38c30dca322ad36fd3b8dfb0b5ef6e7",class:`navItemIconWrapper ${this.hasChildNavItems&&!this.isMenuItem&&!this.isSidebarMenuItem?"":"hide"}`},i("ifx-icon",{key:"3375614a9105e72cb7f906c6e529c0b14860bcea",icon:"chevron-down-16"})),i("div",{key:"dc9d37b40c43dc2edb2199af7e8b1ff3215e3cda",class:`menuItemRightIconWrapper ${this.itemPosition==="right"&&this.hasChildNavItems&&this.isMenuItem||this.isSidebarMenuItem&&this.hasChildNavItems?"":"hide"}`},i("ifx-icon",{key:"73047fefa740975ebf2d0474ba56230ef246c042",icon:"chevron-right-16"}))),this.hasChildNavItems&&!this.isSidebarMenuItem&&i("ul",{key:"3d0df1441e43ce07845101ad17aa64a261d024f6",class:"navbar-menu"}," ",i("slot",{key:"cd573df9efea6c962fd935901f1db0fd6cc5be0d",name:"first__layer"})," "),this.isSidebarMenuItem&&i("ul",{key:"ddd17b539b0df4e7f9151e1208b7fca653fd2fd5",class:"sub__layer-menu"}," ",i("slot",{key:"48e29dd8d98066753416120ed6886d9dce4e61dc",name:"second__layer"})," "))}get el(){return n(this)}};s.style=a;export{s as ifx_navbar_item};
-//# sourceMappingURL=p-2e172019.entry.js.map
+import{r as e,c as t,h as i,a as n}from"./p-DtIEDtZ8.js";const a=':host(.hidden){display:none}.navbar__item{position:relative;display:flex;flex-direction:row;align-items:center;padding:0px 8px;flex:none;order:0;flex-grow:0;font-family:var(--ifx-font-family);text-decoration:none;font-weight:400;font-size:16px;color:#1D1D1D}.navbar__item.hide{display:none}.navbar__item.isParent{gap:8px}.navbar__item .navItemIconWrapper{transition:0.3s;display:flex}.navbar__item.open .navItemIconWrapper{transform:rotate(-180deg);transition:0.3s}.navbar__item:hover{color:#0A8276;cursor:pointer}.navbar__item:hover .username__tooltip{display:block}.navbar__item:hover .navbar__container-right-content-navigation-item-icon-wrapper .initials__wrapper{cursor:pointer;background-color:#08665C}.navbar__item.remove{display:none}.navbar__item.removeLabel .label__wrapper{display:none}.navbar__item .number__indicator-wrapper{position:relative;top:-11px}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper{position:relative;display:flex;flex-direction:row;justify-content:center;align-items:center;padding:0px;gap:8px;flex:none;order:0;flex-grow:0}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper .username__tooltip{display:none;position:absolute;top:35px;right:0;text-wrap:nowrap;padding:1px 5px;font-size:13px;font-family:"Source Sans 3";background-color:black;color:#fff;z-index:99}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper:hover .username__tooltip{display:block}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper .initials__wrapper{display:flex;width:24px;height:24px;justify-content:center;align-items:center;border-radius:100%;background-color:#0A8276}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper .initials__wrapper .initials{color:#FFF;text-align:center;font-family:"Source Sans 3";font-size:14px;font-style:normal;font-weight:600;line-height:20px;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper img{width:24px;height:24px;border-radius:100%}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper.removeWrapper{display:none}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper.hide{display:none}.container{position:relative}.container:focus{outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276}.container .sub__layer-back-button{display:none}.container .sub__layer-back-button.show{display:flex;justify-content:flex-start}.container .sub__layer-back-button.show .back__button-wrapper{display:flex;align-items:center;gap:8px;padding:8px 0 16px 0;color:#0A8276;font-size:16px;font-style:normal;font-weight:600;line-height:24px}.container .sub__layer-back-button.show .back__button-wrapper span:hover,.container .sub__layer-back-button.show .back__button-wrapper ifx-icon:hover{cursor:pointer}.container.hide{display:none}.container .inner__content-wrapper{position:relative;display:flex;justify-content:space-between;align-items:center;gap:8px}.container .inner__content-wrapper.no-gap{gap:0px}.container .inner__content-wrapper .navbar__container-right-content-navigation-item-icon-wrapper.no-gap{gap:0px}.container .inner__content-wrapper .number__indicator-wrapper{position:relative;top:-11px}.navbar-menu{position:absolute;display:none;list-style-type:none;visibility:visible;flex-direction:column;width:224px;min-width:224px;background:#FFFFFF;box-shadow:0px 6px 9px 0px rgba(29, 29, 29, 0.1019607843);border:1px solid #EEEDED;padding:8px 0px;font-family:var(--ifx-font-family)}.navbar-menu.open:not(.itemInMobileMenu){display:flex}.navbar-menu.itemInMobileMenu{display:none}.navbar-menu.right{left:100%;top:-40%}.navbar-menu.left{top:-40%;right:100%}.navbar-menu.rightSideItemMenu{left:initial;right:0px}.navbar__item.layer__item-parent{color:#1D1D1D;font-size:24px;font-style:normal;font-weight:600;line-height:32px;letter-spacing:-0.24px;cursor:initial}.navbar__item.layer__item-parent .navbar__container-right-content-navigation-item-icon-wrapper ifx-icon svg{width:24px;height:24px}.navbar__item.sidebarMenuItem{justify-content:space-between;padding:0}.navbar__item.menuItem{text-decoration:none;color:#1D1D1D;display:flex;align-items:center;justify-content:space-between;padding:8px 16px;gap:8px;font-family:var(--ifx-font-family)}.navbar__item.menuItem.hide{display:none}.navbar__item.menuItem .label__wrapper{color:#1D1D1D;font-size:16px;font-style:normal;font-weight:400;line-height:24px}.navbar__item.menuItem:hover{cursor:pointer;background-color:#EEEDED}.navbar__item.menuItem:active{background-color:#BFBBBB}.sub__layer-menu{padding:5px;display:none}.sub__layer-menu.remove__margin{margin:0;padding:0}.sub__layer-menu.open{display:block}.navbar__item.hide{display:none}.menuItemRightIconWrapper.hide{display:none}.navItemIconWrapper.hide{display:none}';const s=class{constructor(i){e(this,i);this.ifxNavItem=t(this,"ifxNavItem",7);this.showLabel=true;this.icon="";this.href="";this.target="_self";this.hideOnMobile=true;this.internalHref="";this.isMenuItem=false;this.hasChildNavItems=false;this.isSidebarMenuItem=false;this.dotIndicator=false}handleFocusOut(e){var t,i;const n=(i=(t=this.el.parentElement)===null||t===void 0?void 0:t.tagName)===null||i===void 0?void 0:i.toUpperCase();if(n==="IFX-NAVBAR"){const t=this.isFocusWithinComponent(e.relatedTarget);if(!t){this.closeItemMenu();this.ifxNavItem.emit({component:this.el,action:"hideFirstLayer"})}return}this.handleNestedLayerMenu(e)}handleOutsideClick(e){const t=e.composedPath();const i=this.getItemMenu();if(i){if(i.classList.contains("open")){if(!t.includes(this.el)){this.closeItemMenu()}}}}async hideComponent(){this.el.style.display="none"}async showComponent(){this.el.style.display=""}async toggleChildren(e){const t=this.getItemMenu();const i=this.getChevronDownIconWrapper();if(t){this.handleClassList(i,e,"hide");this.handleClassList(t,e,"itemInMobileMenu")}}async moveChildComponentsIntoSubLayerMenu(){const e=this.getItemMenu();if(e){const t=this.handleClassList(e,"contains","open");if(t){const e=this.getNavBarItem();const t=this.getSubLayerBackButton();this.handleClassList(e,"add","layer__item-parent");this.handleClassList(t,"add","show");this.ifxNavItem.emit({component:this.el,action:"hideFirstLayer"})}}const t=this.el.querySelectorAll('[slot="first__layer"]');this.isSidebarMenuItem=true;for(let e=0;e<t.length;e++){t[e].setAttribute("slot","second__layer");t[e].moveChildComponentsIntoSubLayerMenu()}}getSubLayerBackButton(){const e=this.el.shadowRoot.querySelector(".sub__layer-back-button");return e}async toggleFirstLayerItem(e,t){const i=this.getNavBarItem();const n=this.getSubLayerMenu();const a=this.getSubLayerBackButton();this.handleClassList(a,[e],"show");this.handleClassList(i,[t],"hide");this.handleClassList(n,[t],"remove__margin")}openSubLayerMenu(){if(this.hasChildNavItems){const e=this.getSubLayerBackButton();const t=this.getRightArrowIcon();const i=this.getNavBarItem();const n=this.getSubLayerMenu();const a=this.el.getAttribute("slot");this.handleClassList(e,"add","show");this.handleClassList(t,"add","hide");this.handleClassList(i,"add","layer__item-parent");this.handleClassList(n,"add","open");if(a.toLowerCase()==="second__layer"){this.ifxNavItem.emit({component:this.el,parent:this.el.parentElement,action:"hideSecondLayer"});this.handleClassList(i,"remove","menuItem")}else{this.ifxNavItem.emit({component:this.el,action:"hideFirstLayer"})}}}async addMenuItemClass(){const e=this.getNavBarItem();this.handleClassList(e,"add","menuItem");const t=this.getRightArrowIcon();if(this.hasChildNavItems){this.handleClassList(t,"remove","hide")}}async moveChildComponentsBackIntoNavbar(){const e=this.getSubLayerBackButton();const t=this.getNavBarItem();const i=this.getSubLayerMenu();this.handleClassList(e,"remove","show");this.handleClassList(t,"remove","layer__item-parent");this.handleClassList(i,"remove","remove__margin");this.ifxNavItem.emit({component:this.el,action:"show"});const n=this.el.querySelectorAll('[slot="second__layer"]');this.isSidebarMenuItem=false;this.showComponent();this.handleClassList(t,"remove","hide");for(let e=0;e<n.length;e++){n[e].setAttribute("slot","first__layer");n[e].moveChildComponentsBackIntoNavbar();n[e].addMenuItemClass();n[e].returnToFirstLayer()}}getRightArrowIcon(){const e=this.el.shadowRoot.querySelector(".menuItemRightIconWrapper");return e}getChevronDownIconWrapper(){const e=this.el.shadowRoot.querySelector(".navItemIconWrapper");return e}async returnToFirstLayer(){const e=this.getSubLayerBackButton();const t=this.getNavBarItem();const i=this.getRightArrowIcon();const n=this.getSubLayerMenu();const a=this.el.getAttribute("slot");this.handleClassList(e,"remove","show");this.handleClassList(t,"remove","layer__item-parent");this.handleClassList(n,"remove","open");if(this.hasChildNavItems){this.handleClassList(i,"remove","hide")}if(a.toLowerCase()==="second__layer"){this.ifxNavItem.emit({component:this.el,parent:this.el.parentElement,action:"returnToSecondLayer"});this.handleClassList(t,"add","menuItem")}else{this.ifxNavItem.emit({component:this.el,action:"return"})}}componentWillLoad(){this.setHref();this.checkIfItemIsNested();this.checkIfItemHasChildren();this.removeEmptyItem()}componentDidLoad(){this.handleItemGap();this.handleLabelWrapper();if(this.hasChildNavItems){const e=this.getNavbarItems();this.relocateItemsToFirstlayer(e)}}componentDidUpdate(){const e=this.getNavBarItem();const t=this.handleClassList(e,"contains","layer__item-parent");if(this.isSidebarMenuItem&&t){const e=this.getRightArrowIcon();this.handleClassList(e,"add","hide")}}async setMenuItemPosition(){if(this.isMenuItem&&this.hasChildNavItems){const e=this.getItemMenuPosition();if(e==="left"){this.itemPosition="left"}else if(e==="right"){this.itemPosition="right"}}}handleClassList(e,t,i){if(!e)return false;e.classList[t](i);if(t==="contains"){return e.classList.contains(i)}}getNavbarItems(){const e=this.el.querySelectorAll("ifx-navbar-item");return e}getNavBarItem(){const e=this.el.shadowRoot.querySelector(".navbar__item");return e}getSubLayerMenu(){const e=this.el.shadowRoot.querySelector(".sub__layer-menu");return e}relocateItemsToFirstlayer(e){e.forEach((e=>{e.setAttribute("slot","first__layer")}))}setHref(){if(this.href.toLowerCase().trim()===""){this.internalHref=undefined}else this.internalHref=this.href}checkIfItemIsNested(){const e=this.el.parentElement;if(e.tagName.toUpperCase()==="IFX-NAVBAR-ITEM"||e.tagName.toUpperCase()==="IFX-NAVBAR-PROFILE"){this.isMenuItem=true;return}else{this.isMenuItem=false}}checkIfItemHasChildren(){const e=this.getNavbarItems();if(e.length!==0){this.hasChildNavItems=true}else{this.hasChildNavItems=false}}async setItemSideSpecifications(){const e=this.el;const t=this.getItemMenu();const i=e.getAttribute("slot");if(i.toLowerCase().trim()==="right-item"){this.handleClassList(t,"add","rightSideItemMenu")}return true}getItemMenu(){const e=this.el.shadowRoot.querySelector(".navbar-menu");return e}getParentItemMenu(){var e;return(e=this.el.parentElement)===null||e===void 0?void 0:e.shadowRoot.querySelector(".navbar-menu")}closeItemMenu(){const e=this.getItemMenu();const t=this.getNavBarItem();if(e){this.handleClassList(e,"remove","open");this.handleClassList(t,"remove","open")}}getItemMenuPosition(){let e=this.el;while(e){if(e.tagName==="IFX-NAVBAR-PROFILE"||e.slot==="right-item"){return"left"}e=e.parentElement||e.getRootNode().host}return"right"}toggleItemMenu(){const e=this.el.getAttribute("slot").toLowerCase();if(e==="mobile-menu-top"||e==="second__layer"){this.openSubLayerMenu()}else if(!this.internalHref){if(this.hasChildNavItems){const e=this.getItemMenu();const t=this.getNavBarItem();this.handleClassList(e,"toggle","open");this.handleClassList(t,"toggle","open");if(this.isMenuItem&&!this.isSidebarMenuItem&&e.classList.contains("open")){this.handleNestedLayerMenu({type:"mouseenter"})}}else{const e=this.getParentItemMenu();if(e){this.handleClassList(e,"toggle","open")}}}}handleNestedLayerMenu(e){if(this.isMenuItem&&this.hasChildNavItems&&!this.isSidebarMenuItem){const t=this.getItemMenu();const i=this.getItemMenuPosition();const n=e.type.toUpperCase();if(n==="MOUSEENTER"){this.handleClassList(t,"add","open");if(i==="left"){this.handleClassList(t,"add","left")}else if(i==="right"){this.handleClassList(t,"add","right")}}if(n==="MOUSELEAVE"){this.handleClassList(t,"remove","open");if(i==="left"){this.handleClassList(t,"remove","left")}else if(i==="right"){this.handleClassList(t,"remove","right")}}if(n==="FOCUSOUT"){const n=this.isFocusWithinComponent(e.relatedTarget);if(!n){this.handleClassList(t,"remove","open");if(i==="left"){this.handleClassList(t,"remove","left")}else if(i==="right"){this.handleClassList(t,"remove","right")}}}}}isFocusWithinComponent(e){var t;if(!e)return false;const i=e;const n=this.el.contains(i);const a=(t=this.el.shadowRoot)===null||t===void 0?void 0:t.contains(i);const s=i.getRootNode();if(s instanceof ShadowRoot){const e=s;if(this.el.contains(e.host)){return true}}return n||a}handleLabelWrapper(){const e=this.el.shadowRoot.querySelector(".label__wrapper");const t=this.getNavBarItem();const i=e.querySelector("slot");if(!i.assignedNodes().length){t.classList.add("removeLabel")}else if(this.showLabel&&t.classList.contains("removeLabel")){t.classList.remove("removeLabel")}}handleItemGap(){const e=this.el.shadowRoot.querySelector(".navbar__item");const t=e.querySelector(".navbar__container-right-content-navigation-item-icon-wrapper");if(this.numberIndicator||this.dotIndicator){this.handleClassList(t,"add","no-gap")}else{this.handleClassList(t,"remove","no-gap")}}removeEmptyItem(){const e=this.el.shadowRoot.host;if(!this.showLabel&&!this.icon){this.handleClassList(e,"add","hidden")}}handleKeyDown(e){if(e.key==="Enter"){e.stopPropagation();e.preventDefault();this.toggleItemMenu()}}render(){return i("div",{key:"2247bd282d899a4058904010e95e739ba268cff6",tabIndex:1,class:"container",onMouseLeave:e=>this.handleNestedLayerMenu(e),onKeyDown:e=>this.handleKeyDown(e),onMouseEnter:e=>this.handleNestedLayerMenu(e)},i("div",{key:"59344778b99b7841b7b2dfa029377232d1366514",class:"sub__layer-back-button"},i("div",{key:"b6ca4910e8e76965c68dc047d3acc782cd42c104",class:"back__button-wrapper",onClick:()=>this.returnToFirstLayer()},i("ifx-icon",{key:"4e125406dbdd78a980875d2a61dc039c55092787",icon:"arrow-left-16"}),i("span",{key:"739794300dcaaa43b0603e857bd8844cc33e29ff"},"Back"))),i("a",{key:"d80292ea2a49171f0606366f4d179d4bf09c65e3",tabindex:-1,href:this.internalHref,target:this.target,onClick:()=>this.toggleItemMenu(),class:`navbar__item ${this.isSidebarMenuItem?"sidebarMenuItem":""} ${!this.showLabel?"removeLabel":""} ${this.isMenuItem?"menuItem":""} ${this.hasChildNavItems?"isParent":""}`},i("div",{key:"48256a9604f143a21fde2d228a46064383ef3f7a",class:"inner__content-wrapper"},i("div",{key:"cf0a99c88e7a7b8f0ac21323e63d3b10aa1f473b",class:`navbar__container-right-content-navigation-item-icon-wrapper ${!this.icon?"removeWrapper":""}`},this.icon&&i("ifx-icon",{key:"72ee0ff92a20930fefe6aaaa4446baa67af4ab78",icon:this.icon}),this.icon&&!this.showLabel&&!isNaN(this.numberIndicator)&&i("div",{key:"7ddf104b002f5c8deaec6242182fb5ac5f28df79",class:"number__indicator-wrapper"},i("ifx-indicator",{key:"cc40353b433ef27a4b825178bdf5129c8f9e81ff",variant:"number",number:this.numberIndicator})),this.icon&&!this.showLabel&&!this.numberIndicator&&this.dotIndicator&&i("div",{key:"665350c3a2c2083583ac329db05efdc7b80f10d2",class:"dot__indicator-wrapper"})),this.itemPosition==="left"&&this.hasChildNavItems&&this.isMenuItem&&i("div",{key:"c49e5148cfc99b9c46b7ace71285785feebf9d0f",class:"menuItemLeftIconWrapper"},i("ifx-icon",{key:"e5fe657c7da8e3c8d27c491e75cb85b66f1609aa",icon:"chevron-left-16"})),i("span",{key:"cefa64025f76292a88a3af57ada85024d72ba52c",class:"label__wrapper"},i("slot",{key:"1e8db1b48fb4e6bc2a55cbbde29dde56edfceccd"}))),this.showLabel&&this.numberIndicator&&!isNaN(this.numberIndicator)?i("div",{class:"number__indicator-wrapper"},i("ifx-indicator",{variant:"number",number:this.numberIndicator})):"",this.showLabel&&!this.numberIndicator&&this.dotIndicator?i("ifx-indicator",{variant:"dot"}):"",i("div",{key:"8de2ad0cf38c30dca322ad36fd3b8dfb0b5ef6e7",class:`navItemIconWrapper ${this.hasChildNavItems&&!this.isMenuItem&&!this.isSidebarMenuItem?"":"hide"}`},i("ifx-icon",{key:"3375614a9105e72cb7f906c6e529c0b14860bcea",icon:"chevron-down-16"})),i("div",{key:"dc9d37b40c43dc2edb2199af7e8b1ff3215e3cda",class:`menuItemRightIconWrapper ${this.itemPosition==="right"&&this.hasChildNavItems&&this.isMenuItem||this.isSidebarMenuItem&&this.hasChildNavItems?"":"hide"}`},i("ifx-icon",{key:"73047fefa740975ebf2d0474ba56230ef246c042",icon:"chevron-right-16"}))),this.hasChildNavItems&&!this.isSidebarMenuItem&&i("ul",{key:"3d0df1441e43ce07845101ad17aa64a261d024f6",class:"navbar-menu"}," ",i("slot",{key:"cd573df9efea6c962fd935901f1db0fd6cc5be0d",name:"first__layer"})," "),this.isSidebarMenuItem&&i("ul",{key:"ddd17b539b0df4e7f9151e1208b7fca653fd2fd5",class:"sub__layer-menu"}," ",i("slot",{key:"48e29dd8d98066753416120ed6886d9dce4e61dc",name:"second__layer"})," "))}get el(){return n(this)}};s.style=a;export{s as ifx_navbar_item};
+//# sourceMappingURL=p-8c44be53.entry.js.map

package/dist/infineon-design-system-stencil/p-913a8693.entry.js

@@ -0,0 +1,2 @@
+import{r as t,h as o,a as i}from"./p-DtIEDtZ8.js";import{d as e,t as s}from"./p-DcmcuUOA.js";import{i as a}from"./p-Bw2fh5LT.js";import{c as l}from"./p-BfP9ezJQ.js";const d=":root{--ifx-font-family:\"Source Sans 3\", 'Arial, sans-serif'}:host{display:inline-flex}.tooltip__container{display:inline-flex;flex-direction:column;position:relative;font-family:var(--ifx-font-family)}.tooltip-extended,.tooltip-compact,.tooltip-dismissible{background-color:#1D1D1D;border:1px solid black;z-index:1080;display:none;transition:opacity 0.3s;position:absolute;font-size:14px;font-style:normal;font-weight:400;line-height:20px;color:#FFFFFF;width:max-content;box-sizing:border-box;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;}.visible.tooltip-extended,.visible.tooltip-compact,.visible.tooltip-dismissible{display:flex !important;align-items:start}.tooltip-dismissible .close-button{all:unset;cursor:pointer;position:relative;order:2;margin-top:12px;margin-right:12px;line-height:0px}.tooltip-dismissible .tooltip-dismissible-content{display:flex;flex-direction:column;gap:12px;padding:12px;flex-grow:1;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere}.tooltip-dismissible .tooltip-dismissible-header,.tooltip-dismissible .tooltip-dismissible-body{font-size:14px;font-style:normal;line-height:20px}.tooltip-dismissible .tooltip-dismissible-header{font-weight:600}.tooltip-dismissible .tooltip-dismissible-body{font-weight:400}.tooltip-compact{padding:4px 8px;text-align:center;flex-grow:1}.tooltip-extended{align-items:center;padding:12px;gap:10px}.tooltip-extended .extended_icon{display:flex;align-self:flex-start;align-items:center;cursor:pointer}.tooltip-extended .tooltip-extended-content{display:flex;flex-direction:column;gap:12px;flex-grow:1;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere}.tooltip-extended .tooltip-extended-header,.tooltip-extended .tooltip-extended-body{font-size:14px;font-style:normal;line-height:20px}.tooltip-extended .tooltip-extended-header{font-weight:600}.tooltip-extended .tooltip-extended-body{font-weight:400}.tooltip__container .tooltip-arrow-svg{position:absolute;width:8px;height:8px}[data-placement=top].tooltip-extended>.tooltip-arrow-svg,[data-placement=top].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=top].tooltip-compact>.tooltip-arrow-svg{bottom:-7px;left:50%;transform:rotate(180deg) translateX(-50%)}[data-placement=top-start].tooltip-extended>.tooltip-arrow-svg,[data-placement=top-start].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=top-start].tooltip-compact>.tooltip-arrow-svg{bottom:-7px;left:10px;transform:rotate(180deg)}[data-placement=top-end].tooltip-extended>.tooltip-arrow-svg,[data-placement=top-end].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=top-end].tooltip-compact>.tooltip-arrow-svg{bottom:-7px;right:10px;transform:rotate(180deg)}[data-placement=bottom].tooltip-extended>.tooltip-arrow-svg,[data-placement=bottom].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=bottom].tooltip-compact>.tooltip-arrow-svg{top:-7px;left:50%;transform:translateX(-50%)}[data-placement=bottom-start].tooltip-extended>.tooltip-arrow-svg,[data-placement=bottom-start].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=bottom-start].tooltip-compact>.tooltip-arrow-svg{top:-7px;left:10px}[data-placement=bottom-end].tooltip-extended>.tooltip-arrow-svg,[data-placement=bottom-end].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=bottom-end].tooltip-compact>.tooltip-arrow-svg{top:-7px;right:10px}[data-placement=left].tooltip-extended>.tooltip-arrow-svg,[data-placement=left].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=left].tooltip-compact>.tooltip-arrow-svg{right:-3px;top:50%;transform:rotate(90deg) translateY(-50%) translateX(-50%)}[data-placement=right].tooltip-extended>.tooltip-arrow-svg,[data-placement=right].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=right].tooltip-compact>.tooltip-arrow-svg{left:-3px;top:50%;transform:rotate(270deg) translateY(-50%) translateX(50%)}.tooltip-compact{min-width:28px !important;max-width:145px !important}.tooltip-dismissible{min-width:145px !important;max-width:310px !important}.tooltip-extended{min-width:145px !important;max-width:310px !important}";const p=class{constructor(o){t(this,o);this.tooltipVisible=false;this.header="";this.text="";this.position="auto";this.internalPosition="auto";this.variant="compact";this.popperInstance=null;this.onMouseEnter=()=>{var t,o;(t=this.popperInstance)===null||t===void 0?void 0:t.setOptions((t=>Object.assign(Object.assign({},t),{modifiers:[...t.modifiers,{name:"eventListeners",enabled:true}]})));this.initializePopper();this.tooltipVisible=true;this.tooltipEl.style.display="block";(o=this.popperInstance)===null||o===void 0?void 0:o.update()};this.onMouseLeave=()=>{this.tooltipVisible=false;this.tooltipEl.style.display="none"};this.onClick=()=>{var t;if(this.variant.toLowerCase()==="dismissible"){this.initializePopper();this.tooltipVisible=!this.tooltipVisible;this.tooltipEl.style.display=this.tooltipVisible?"block":"none";(t=this.popperInstance)===null||t===void 0?void 0:t.update()}};this.onDismissClick=()=>{this.tooltipVisible=false;this.tooltipEl.style.display="none"}}componentWillLoad(){if(this.variant.toLowerCase().trim()===""){this.variant="compact"}}async componentDidLoad(){if(!a(this.el)){const t=e();s("ifx-tooltip",await t)}const t=this.el.shadowRoot.querySelector(".tooltip__container").firstChild;if(this.variant.toLowerCase()==="compact"||this.variant.toLowerCase()==="extended"){t.addEventListener("mouseenter",this.onMouseEnter);t.addEventListener("mouseleave",this.onMouseLeave)}else{t.addEventListener("click",this.onClick)}}initializePopper(){if(this.popperInstance)return;this.referenceEl=this.el;if(this.variant.toLowerCase()==="compact"){this.tooltipEl=this.el.shadowRoot.querySelector(".tooltip-compact")}else if(this.variant.toLowerCase()==="dismissible"){this.tooltipEl=this.el.shadowRoot.querySelector(".tooltip-dismissible")}else{this.tooltipEl=this.el.shadowRoot.querySelector(".tooltip-extended")}const t=this.position==="auto"?this.determineBestPosition():this.position;this.internalPosition=t;if(this.tooltipEl&&this.referenceEl){this.popperInstance=l(this.referenceEl,this.tooltipEl,{placement:this.internalPosition,modifiers:[{name:"offset",options:{offset:[0,8]}},{name:"arrow",options:{element:".tooltip-arrow-svg"}}]})}this.tooltipEl.setAttribute("data-placement",t)}determineBestPosition(){const t=this.referenceEl.getBoundingClientRect();const o=window.scrollY;const i=window.scrollX;const e=t.top+o+t.height/2;const s=t.left+i+t.width/2;if(this.position==="auto"){if(e>window.innerHeight/2){if(s>window.innerWidth/2){return"top-end"}else{return"top-start"}}else{if(s>window.innerWidth/2){return"bottom-end"}else{return"bottom-start"}}}else{return this.position}}positionChanged(t){var o;this.internalPosition=t;(o=this.popperInstance)===null||o===void 0?void 0:o.destroy();this.popperInstance=null}disconnectedCallback(){var t;(t=this.popperInstance)===null||t===void 0?void 0:t.destroy()}render(){const t={"tooltip-dismissible":true,visible:this.tooltipVisible};const i={"tooltip-compact":true,visible:this.tooltipVisible};const e={"tooltip-extended":true,visible:this.tooltipVisible};return o("div",{key:"73fe0cd0ba30b772907db89dc10248ca8fab5d5b","aria-label":this.ariaLabel,"aria-value":this.header,class:"tooltip__container"},o("slot",{key:"c322892c782277d8640de4d7f86c073c82ff5b87"}),this.variant.toLowerCase()==="dismissible"&&o("div",{key:"d268c502ee61550b6bb96512220bb10f73a6ec53",class:t},o("button",{key:"e2ef4f4709a58adca779f60afbae4d5d990bf2b0","aria-label":"Close Tooltip",class:"close-button",onClick:this.onDismissClick},o("ifx-icon",{key:"85c008fc5bb577d3ed6dc3dc7ae824f3e579217a",icon:"cross16"})),o("div",{key:"b6bbb49d16efdacb67596bd8006ad94be7895e24",class:"tooltip-dismissible-content"},this.header&&o("div",{key:"b62b5521156c7ae5a9ceb95d2bbf02322345f7ef",class:"tooltip-dismissible-header"},this.header),o("div",{key:"cec7a6ea9e7536d18916547646864729396eb60f",class:"tooltip-dismissible-body"},this.text)),o("svg",{key:"c51e82c058a9cb4c4e7a0cbb13bb476f8afeb928",class:"tooltip-arrow-svg",width:"12",height:"8",viewBox:"0 0 12 8",fill:"none",xmlns:"http://www.w3.org/2000/svg"},o("path",{key:"1029a62c61d0357a731b2951ea38d05c7c269551",id:"Indicator",d:"M6 0L12 8L0 8L6 0Z",fill:"#1D1D1D"}))),this.variant.toLowerCase()==="compact"&&o("div",{key:"830e279a14e2935f4e08021bd7399865e1ef44a2",class:i},this.text,o("svg",{key:"93e80185a37e7121f858790fb3fa33ffb18092f6",class:"tooltip-arrow-svg",width:"12",height:"8",viewBox:"0 0 12 8",fill:"none",xmlns:"http://www.w3.org/2000/svg"},o("path",{key:"0158bcc8dcd9259d92d512f8e96d325b616d50a0",id:"Indicator",d:"M6 0L12 8L0 8L6 0Z",fill:"#1D1D1D"}))),this.variant.toLowerCase()==="extended"&&o("div",{key:"661134a45b938246e9c58f2d456920a6035a90c9",class:e},o("slot",{key:"c601220c6b6d357800b3b697f78e68bb9d614431",name:"icon"},this.icon?o("div",{class:"extended_icon"},o("ifx-icon",{icon:this.icon})):o("svg",{class:"extended_icon",xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",fill:"none",viewBox:"0 0 24 24"},o("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"}),o("path",{stroke:"#fff",d:"M19 17H6l2.5-4 2.097 2.516.405.486.379-.506 4.118-5.49.003-.002L19 17Z"}),o("path",{fill:"#fff",d:"M10 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"}))),o("div",{key:"cee24e9d36ca9f745c397ba328eae361fc19741a",class:"tooltip-extended-content"},this.header&&o("div",{key:"a7cd9c2a5614e33300e2ad18677655d96c8bb16f",class:"tooltip-extended-header"},this.header),o("div",{key:"04075ce9041db50760373c24d5b15481bc1803fb",class:"tooltip-extended-body"},this.text)),o("svg",{key:"003660f174f2d82b61fe122fc7102e5f5c345571",class:"tooltip-arrow-svg",width:"12",height:"8",viewBox:"0 0 12 8",fill:"none",xmlns:"http://www.w3.org/2000/svg"},o("path",{key:"4212775539c5aad8f0b89edd938c9786c7662fef",id:"Indicator",d:"M6 0L12 8L0 8L6 0Z",fill:"#1D1D1D"}))))}get el(){return i(this)}static get watchers(){return{position:["positionChanged"]}}};p.style=d;export{p as ifx_tooltip};
+//# sourceMappingURL=p-913a8693.entry.js.map

package/dist/infineon-design-system-stencil/{p-ce799b3d.entry.js.map → p-913a8693.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["tooltipCss","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","isNestedInIfxComponent","el","framework","detectFramework","trackComponent","slotElement","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","ariaLabel","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); // tokens.$ifxFontFamilyBody;\n\n\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';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n  tag: 'ifx-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  @Prop() ariaLabel: string | null;\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  async componentDidLoad() {\n    if(!isNestedInIfxComponent(this.el)) { \n      const framework = detectFramework();\n      trackComponent('ifx-tooltip', await framework)\n    }\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={this.ariaLabel} 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":"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","ignoreList":[]}
+{"version":3,"names":["tooltipCss","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","isNestedInIfxComponent","el","framework","detectFramework","trackComponent","slotElement","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","ariaLabel","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); // tokens.$ifxFontFamilyBody;\n\n\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';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n  tag: 'ifx-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  @Prop() ariaLabel: string | null;\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  async componentDidLoad() {\n    if(!isNestedInIfxComponent(this.el)) { \n      const framework = detectFramework();\n      trackComponent('ifx-tooltip', await framework)\n    }\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={this.ariaLabel} 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":"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","ignoreList":[]}

package/dist/infineon-design-system-stencil/{p-ff4cc197.entry.js → p-91ce7e7b.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,h as n,d as o,a as i}from"./p-PqnYwNKt.js";import{d as e,t as r}from"./p-DcmcuUOA.js";import{i as s}from"./p-Bw2fh5LT.js";import{c as a}from"./p-DMLRPGid.js";import"./p-B85MJLTf.js";const d=":host{display:inline-flex}.btn{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:8px;gap:8px;color:#FFFFFF;flex-direction:row;font-weight:600;border-radius:1px;line-height:1.5rem;outline:none;font-family:var(--ifx-font-family);text-decoration:none;user-select:none;border:1px solid rgba(0, 0, 0, 0);font-size:1rem;transition:color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out}.btn:not(.disabled){cursor:pointer}.btn-primary{color:#FFFFFF;background-color:#0A8276}.btn-primary:disabled,.btn-primary.disabled{background-color:#BFBBBB;color:#FFFFFF;pointer-events:none}.btn-secondary{color:#0A8276;background-color:#FFFFFF;border-color:#0A8276}.btn-secondary:disabled,.btn-secondary.disabled{background-color:#FFFFFF;border:1px solid #BFBBBB;color:#BFBBBB;pointer-events:none}.btn-tertiary{background-color:transparent;color:#1D1D1D}.btn-tertiary:disabled,.btn-tertiary.disabled{color:#BFBBBB;pointer-events:none}.btn.icon-button{min-width:initial;min-height:initial;width:40px;height:40px;padding:0;justify-content:center}.btn.icon-button.btn-round{border-radius:100px}.btn.icon-button.btn-square{border-radius:1px}.btn.icon-button.btn-s{width:32px;height:32px;padding:8px}.btn.icon-button.btn-l{width:48px;height:48px;padding:8px}.btn.btn-primary:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276}.btn.btn-primary:not(:disabled,.disabled):hover{background-color:#08665C;border-color:#08665C}.btn.btn-primary:not(:disabled,.disabled):active,.btn.btn-primary:not(:disabled,.disabled).active{background-color:#06534B;border-color:#06534B}.btn.btn-secondary:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276}.btn.btn-secondary:not(:disabled,.disabled):hover{background-color:#08665C;border-color:#08665C;color:#FFFFFF}.btn.btn-secondary:not(:disabled,.disabled):active,.btn.btn-secondary:not(:disabled,.disabled).active{background-color:#06534B;border-color:#06534B}.btn.btn-tertiary:not(:disabled,.disabled):focus:not(:active,.active){outline:none;color:#1D1D1D;box-shadow:0 0 0 0px #FFFFFF, 0 0 0 2px #0A8276}.btn.btn-tertiary:not(:disabled,.disabled):hover{color:#0A8276}.btn.btn-tertiary:not(:disabled,.disabled):active,.btn.btn-tertiary:not(:disabled,.disabled).active{color:#08665C}";const b=class{constructor(n){t(this,n);this.target="_self";this.shape="round"}handleClick(t){if(this.disabled){t.stopImmediatePropagation()}}updateIcon(t){this.internalIcon=t}async setFocus(){this.focusableElement.focus()}componentWillLoad(){if(this.shape===""){this.shape="round"}this.internalIcon=this.icon}async componentDidLoad(){if(!s(this.el)){const t=e();r("ifx-icon-button",await t)}}render(){return n(o,{key:"2a31f0c17ad2f648807b6da75e145f6b028f6858","aria-disabled":this.disabled,"aria-label":this.ariaLabel},this.href?n("a",{ref:t=>this.focusableElement=t,class:this.getClassNames(),href:!this.disabled?this.href:undefined,target:this.target,rel:this.target==="_blank"?"noopener noreferrer":undefined},n("ifx-icon",{icon:this.internalIcon})):n("button",{class:this.getClassNames(),type:"button",disabled:this.disabled},n("ifx-icon",{icon:this.internalIcon})))}getVariantClass(){return`${this.variant}`==="secondary"?`secondary`:`${this.variant}`==="tertiary"?`tertiary`:`primary`}getSizeClass(){if(`${this.size}`==="xs"){return"xs"}else if(`${this.size}`==="s"){return"s"}else if(`${this.size}`==="l"){return"l"}else return""}getClassNames(){return a("btn icon-button",`btn-${this.shape}`,this.size&&`btn-${this.getSizeClass()}`,`btn-${this.getVariantClass()}`,this.disabled?"disabled":"")}get el(){return i(this)}static get watchers(){return{icon:["updateIcon"]}}};b.style=d;export{b as ifx_icon_button};
-//# sourceMappingURL=p-ff4cc197.entry.js.map
+import{r as t,h as o,d as n,a as i}from"./p-DtIEDtZ8.js";import{d as e,t as r}from"./p-DcmcuUOA.js";import{i as s}from"./p-Bw2fh5LT.js";import{c as a}from"./p-DMLRPGid.js";import"./p-B85MJLTf.js";const d=":host{display:inline-flex}.btn{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:8px;gap:8px;color:#FFFFFF;flex-direction:row;font-weight:600;border-radius:1px;line-height:1.5rem;outline:none;font-family:var(--ifx-font-family);text-decoration:none;user-select:none;border:1px solid rgba(0, 0, 0, 0);font-size:1rem;transition:color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out}.btn:not(.disabled){cursor:pointer}.btn-primary{color:#FFFFFF;background-color:#0A8276}.btn-primary:disabled,.btn-primary.disabled{background-color:#BFBBBB;color:#FFFFFF;pointer-events:none}.btn-secondary{color:#0A8276;background-color:#FFFFFF;border-color:#0A8276}.btn-secondary:disabled,.btn-secondary.disabled{background-color:#FFFFFF;border:1px solid #BFBBBB;color:#BFBBBB;pointer-events:none}.btn-tertiary{background-color:transparent;color:#1D1D1D}.btn-tertiary:disabled,.btn-tertiary.disabled{color:#BFBBBB;pointer-events:none}.btn.icon-button{min-width:initial;min-height:initial;width:40px;height:40px;padding:0;justify-content:center}.btn.icon-button.btn-round{border-radius:100px}.btn.icon-button.btn-square{border-radius:1px}.btn.icon-button.btn-s{width:32px;height:32px;padding:8px}.btn.icon-button.btn-l{width:48px;height:48px;padding:8px}.btn.btn-primary:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276}.btn.btn-primary:not(:disabled,.disabled):hover{background-color:#08665C;border-color:#08665C}.btn.btn-primary:not(:disabled,.disabled):active,.btn.btn-primary:not(:disabled,.disabled).active{background-color:#06534B;border-color:#06534B}.btn.btn-secondary:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276}.btn.btn-secondary:not(:disabled,.disabled):hover{background-color:#08665C;border-color:#08665C;color:#FFFFFF}.btn.btn-secondary:not(:disabled,.disabled):active,.btn.btn-secondary:not(:disabled,.disabled).active{background-color:#06534B;border-color:#06534B}.btn.btn-tertiary:not(:disabled,.disabled):focus:not(:active,.active){outline:none;color:#1D1D1D;box-shadow:0 0 0 0px #FFFFFF, 0 0 0 2px #0A8276}.btn.btn-tertiary:not(:disabled,.disabled):hover{color:#0A8276}.btn.btn-tertiary:not(:disabled,.disabled):active,.btn.btn-tertiary:not(:disabled,.disabled).active{color:#08665C}";const b=class{constructor(o){t(this,o);this.target="_self";this.shape="round"}handleClick(t){if(this.disabled){t.stopImmediatePropagation()}}updateIcon(t){this.internalIcon=t}async setFocus(){this.focusableElement.focus()}componentWillLoad(){if(this.shape===""){this.shape="round"}this.internalIcon=this.icon}async componentDidLoad(){if(!s(this.el)){const t=e();r("ifx-icon-button",await t)}}render(){return o(n,{key:"2a31f0c17ad2f648807b6da75e145f6b028f6858","aria-disabled":this.disabled,"aria-label":this.ariaLabel},this.href?o("a",{ref:t=>this.focusableElement=t,class:this.getClassNames(),href:!this.disabled?this.href:undefined,target:this.target,rel:this.target==="_blank"?"noopener noreferrer":undefined},o("ifx-icon",{icon:this.internalIcon})):o("button",{class:this.getClassNames(),type:"button",disabled:this.disabled},o("ifx-icon",{icon:this.internalIcon})))}getVariantClass(){return`${this.variant}`==="secondary"?`secondary`:`${this.variant}`==="tertiary"?`tertiary`:`primary`}getSizeClass(){if(`${this.size}`==="xs"){return"xs"}else if(`${this.size}`==="s"){return"s"}else if(`${this.size}`==="l"){return"l"}else return""}getClassNames(){return a("btn icon-button",`btn-${this.shape}`,this.size&&`btn-${this.getSizeClass()}`,`btn-${this.getVariantClass()}`,this.disabled?"disabled":"")}get el(){return i(this)}static get watchers(){return{icon:["updateIcon"]}}};b.style=d;export{b as ifx_icon_button};
+//# sourceMappingURL=p-91ce7e7b.entry.js.map

package/dist/infineon-design-system-stencil/p-933da006.entry.js

@@ -0,0 +1,2 @@
+import{r as o,h as t,a as i,c as e}from"./p-DtIEDtZ8.js";import{d as n,t as r}from"./p-DcmcuUOA.js";import{i as c}from"./p-Bw2fh5LT.js";const a=":root{--ifx-font-family:\"Source Sans 3\", 'Arial, sans-serif'}:host{display:block}.accordion-wrapper{display:flex;flex-direction:column;gap:8px;font-family:var(--ifx-font-family)}";const s=class{constructor(t){o(this,t);this.autoCollapse=false}async componentDidLoad(){if(!c(this.el)){const o=n();r("ifx-accordion",await o)}}async onItemOpen(o){if(this.autoCollapse){const t=Array.from(this.el.querySelectorAll("ifx-accordion-item"));for(const i of t){const t=i;if(t!==o.target&&await t.open){t.open=false}}}}render(){return t("div",{key:"903cc44b4886b77e59e66ab2a5cdf681dafeb9bc",class:"accordion-wrapper"},t("slot",{key:"e0abec42188606e8c80fc3db44fba19a7aa69ed8"}))}static get delegatesFocus(){return true}get el(){return i(this)}};s.style=a;const d=':root{--ifx-font-family:"Source Sans 3", \'Arial, sans-serif\'}.accordion-item{border-radius:3px;transition:all 0.3s;font-family:var(--ifx-font-family)}.accordion-title:focus{outline:none}.accordion-title:focus::after{content:"";display:block;position:absolute;top:-4px;bottom:-4px;left:-4px;right:-4px;border-radius:5px;border:2px solid #0A8276;box-sizing:border-box}.accordion-title:hover{border:1px solid #EEEDED;color:#08665C}.accordion-title{display:flex;align-items:center;position:relative;padding:12px 16px;gap:12px;color:#0A8276;background-color:#FFFFFF;border:1px solid #EEEDED;cursor:pointer;margin:4px 4px 0px}.accordion-caption{font-weight:600;font-size:1.125rem}.accordion-content{gap:8px;overflow:hidden;height:0;transition:height 0.3s ease;line-height:24px;font-size:1rem;font-weight:400}.inner-content{background-color:#FFFFFF;padding:16px;word-wrap:break-word;overflow-wrap:anywhere;align-self:stretch;margin:0 4px 4px;border:1px solid transparent;border-top:1px solid transparent}.accordion-icon{font-weight:bold;display:flex;transition:transform 0.3s}.accordion-icon:hover{color:#08665C}.accordion-item.open .accordion-content{max-height:1000px}.accordion-item.open .accordion-icon{transform:rotate(-180deg)}.accordion-item.open .inner-content{border-color:#EEEDED;border-top-color:transparent;transition:border-color 0s}.accordion-item:not(.open) .inner-content{transition:border-color 0s 0.3s}.inner-content.no-content{border:none;padding:0;margin:0}';const f=class{constructor(t){o(this,t);this.ifxOpen=e(this,"ifxOpen",7);this.ifxClose=e(this,"ifxClose",7);this.open=false;this.AriaLevel=3;this.internalOpen=false}componentWillLoad(){this.internalOpen=this.open}componentDidLoad(){this.checkSlotContent();this.openAccordionItem();this.contentEl=this.el.shadowRoot.querySelector("#accordion-content");if(this.contentEl){this.attachResizeObserver()}}componentDidUpdate(){this.checkSlotContent();this.openAccordionItem()}openChanged(o){this.internalOpen=o}toggleOpen(){this.internalOpen=!this.internalOpen;this.open=this.internalOpen;if(this.internalOpen){this.ifxOpen.emit({isOpen:this.internalOpen})}else{this.ifxClose.emit({isClosed:!this.internalOpen})}}openAccordionItem(){if(this.internalOpen){this.contentEl.style.height=`${this.contentEl.scrollHeight}px`;this.contentEl.style.overflow="hidden"}else{this.contentEl.style.height="0";this.contentEl.style.overflow="hidden"}}getInnerContentWrapper(){const o=this.el.shadowRoot.querySelector(".inner-content");return o}attachResizeObserver(){const o=this.getInnerContentWrapper();if(o){this.resizeObserver=new ResizeObserver((()=>{if(this.internalOpen){this.openAccordionItem()}}));this.resizeObserver.observe(o)}}handleKeydown(o){const t=o.composedPath();if(!t.includes(this.titleEl)){return}switch(o.key){case"Enter":case" ":o.preventDefault();this.toggleOpen();break}}checkSlotContent(){const o=this.el.shadowRoot.querySelector("slot");const t=o.assignedNodes().length>0;const i=this.getInnerContentWrapper();if(!t){i.classList.add("no-content")}else if(i.classList.contains("no-content")){i.classList.remove("no-content")}}render(){return t("div",{key:"1317347110a9c74932695b8ffff8ca31d3c8e6c3",class:`accordion-item ${this.internalOpen?"open":""}`},t("div",{key:"ad5d46e476f76ac121239c15904a4884a6ba4cc5",role:"button","aria-expanded":this.internalOpen,"aria-controls":"accordion-content",class:"accordion-title",onClick:()=>this.toggleOpen(),tabindex:"0",ref:o=>this.titleEl=o},t("span",{key:"924e061fd270701a7c78433a56fcd70a40dfe7f5","aria-hidden":"true",role:"heading","aria-level":String(this.AriaLevel),class:"accordion-icon"},t("ifx-icon",{key:"40cee40a058eb576d0ef5482f6f7f0adb47a5f4e",icon:"chevron-down-16"})),t("span",{key:"37715ae9f3621954f081bec3d4e861d1dd60847b",id:"accordion-caption",class:"accordion-caption"},this.caption)),t("div",{key:"32c1186d1f4dd1a5a09842224cbfe3d648cc7fac",id:"accordion-content",class:"accordion-content",ref:o=>this.contentEl=o,role:"region","aria-labelledby":"accordion-caption"},t("div",{key:"35618fea4d36844fbad5aed1c07dc2e7378a1d4e",class:"inner-content"},t("slot",{key:"eaa5cdaffd9381f8b05b202f6213d8304fbf7cbb"}))))}get el(){return i(this)}static get watchers(){return{open:["openChanged"]}}};f.style=d;export{s as ifx_accordion,f as ifx_accordion_item};
+//# sourceMappingURL=p-933da006.entry.js.map

package/dist/infineon-design-system-stencil/{p-97b2ac42.entry.js.map → p-933da006.entry.js.map}

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

package/dist/infineon-design-system-stencil/{p-6eb6af05.entry.js → p-988ad5f6.entry.js}

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

package/dist/infineon-design-system-stencil/p-98c2e3a9.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as i,h as s,a as e}from"./p-DtIEDtZ8.js";import{d as o,t as a}from"./p-DcmcuUOA.js";import{i as l}from"./p-Bw2fh5LT.js";const n=':root{--ifx-font-family:"Source Sans 3", \'Arial, sans-serif\'}:host{display:flex}.tabs{display:flex;font-family:var(--ifx-font-family);width:100%}.tabs.horizontal{flex-direction:column}.tabs-container{display:flex;align-items:center;position:relative;width:100%;gap:8px}.scroll-button{flex-shrink:0;z-index:10;transition:all 0.3s ease-in-out}.scroll-button.hidden{pointer-events:none}.scroll-button.scroll-left.hidden{width:0;min-width:0;max-width:0;margin:0;padding:0;border:0;opacity:0;overflow:hidden}.scroll-button.scroll-right.hidden{visibility:hidden;pointer-events:none}.tabs.vertical{flex-direction:row}.tabs-list{display:flex;list-style:none;padding:0;margin:0;position:relative;font-weight:600}.tabs-list.scrollable{overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;white-space:nowrap;scrollbar-width:none;-ms-overflow-style:none}.tabs-list.scrollable::-webkit-scrollbar{display:none}.tabs-list:focus-within .active-border{display:none}.active-border{content:"";position:absolute;transition:left 0.3s ease-in-out, top 0.3s ease-in-out, height 0.3s ease-in-out}.tabs.horizontal .active-border{bottom:0;left:0;height:2px;background-color:#0A8276}.tabs.vertical .tabs-list{flex-direction:column;border-bottom:none}.tabs.vertical .tab-content{padding-top:0px;padding-left:32px}.tabs:not(.vertical) .tab-item.full-width{flex:1}.tabs:not(.vertical).full-width-enabled .scroll-button{display:none}.tabs:not(.vertical).full-width-enabled .tabs-list{flex:1}.tabs:not(.vertical).full-width-enabled .tabs-list.scrollable{overflow-x:visible}.tab-item{display:flex;align-items:center;justify-content:center;gap:8px;padding:8px 16px;cursor:pointer;position:relative;white-space:nowrap;flex-shrink:0;max-width:50%;overflow:hidden;text-overflow:ellipsis}@media (max-width: 768px){.tab-item{font-size:0.875rem;padding:8px 8px}}.tab-item.icon__right{flex-direction:row-reverse;justify-content:flex-end}.tab-item:hover{color:#0A8276}.tab-item:active,.tab-item.active{color:#0A8276}.tab-item:focus,.tab-item.focus{outline:2px solid #0A8276;outline-offset:-2px;border-radius:2px}.tab-item:focus+.active-border,.tab-item.focus+.active-border{display:none}.tab-item.disabled{color:#BFBBBB;pointer-events:none}.tabs.vertical .tab-item{border-right:2px solid transparent;min-width:7em}.tabs.vertical .active-border{left:0;top:0;width:2px;background-color:#0A8276}.tab-content{padding-top:24px;padding-left:0px;flex-grow:1}.tabs.small .tab-item{font-size:0.875rem}';const r=class{constructor(s){t(this,s);this.ifxChange=i(this,"ifxChange",7);this.orientation="horizontal";this.activeTabIndex=0;this.fullWidth=false;this.internalActiveTabIndex=0;this.tabObjects=[];this.canScrollLeft=false;this.canScrollRight=false;this.internalFocusedTabIndex=0;this.tabRefs=[];this.tabHeaderRefs=[];this.tabFocusHandlers=new Map}updateBorderOnWindowResize(){this.updateBorderAndFocus();this.updateScrollButtons()}setActiveAndFocusedTab(t){var i;if(t>=this.tabObjects.length){t=this.tabObjects.length-1}if(t<0){t=0}if(!((i=this.tabObjects[t])===null||i===void 0?void 0:i.disabled)){this.internalActiveTabIndex=t;this.internalFocusedTabIndex=t;setTimeout((()=>this.scrollTabIntoView(t)),0)}}handleTabHeaderChange(t){const i=t.target.getAttribute("slot").replace("tab-","");this.tabObjects[i].header=t.detail;this.tabObjects=[...this.tabObjects]}activeTabIndexChanged(t,i){if(t!==i){this.setActiveAndFocusedTab(t)}}componentWillLoad(){this.internalOrientation=this.orientation.toLowerCase()==="vertical"?"vertical":"horizontal";this.onSlotChange();this.setActiveAndFocusedTab(this.activeTabIndex);this.updateTabStyles()}updateTabStyles(){this.tabHeaderRefs.forEach(((t,i)=>{t.classList.toggle("active",i===this.internalActiveTabIndex);t.setAttribute("aria-selected",i===this.internalActiveTabIndex?"true":"false")}))}reRenderBorder(){const t=this.el.shadowRoot.querySelector(".active-border");if(t&&this.tabHeaderRefs[this.internalActiveTabIndex]){if(this.orientation==="horizontal"){t.style.left=`${this.tabHeaderRefs[this.internalActiveTabIndex].offsetLeft}px`;t.style.width=`${this.tabHeaderRefs[this.internalActiveTabIndex].offsetWidth}px`;t.style.top="";t.style.height=""}else{t.style.top=`${this.tabHeaderRefs[this.internalActiveTabIndex].offsetTop}px`;t.style.height=`${this.tabHeaderRefs[this.internalActiveTabIndex].offsetHeight}px`;t.style.left="";t.style.width=""}}}onSlotChange(){const t=this.el.querySelectorAll("ifx-tab");this.tabObjects=Array.from(t).map((t=>({header:t===null||t===void 0?void 0:t.header,disabled:(t===null||t===void 0?void 0:t.disabled)===true,icon:t===null||t===void 0?void 0:t.icon,iconPosition:t===null||t===void 0?void 0:t.iconPosition})));this.tabRefs=Array.from(t);this.tabRefs.forEach(((t,i)=>{t.setAttribute("slot",`tab-${i}`)}));setTimeout((()=>{this.setupTabFocusListeners();this.updateScrollButtons()}),0)}async componentDidLoad(){if(!l(this.el)){const t=o();a("ifx-tabs",await t)}this.updateBorderAndFocus();this.updateScrollButtons();this.setupTabFocusListeners()}setupTabFocusListeners(){this.tabFocusHandlers.clear();this.tabHeaderRefs.forEach(((t,i)=>{const s=()=>{this.internalFocusedTabIndex=i};this.tabFocusHandlers.set(t,s);t.addEventListener("focus",s)}))}disconnectedCallback(){this.tabFocusHandlers.forEach(((t,i)=>{i.removeEventListener("focus",t)}));this.tabFocusHandlers.clear()}componentDidUpdate(){this.updateBorderAndFocus();this.updateScrollButtons()}updateBorderAndFocus(){this.reRenderBorder();this.updateTabFocusability()}updateTabFocusability(){this.tabHeaderRefs.forEach(((t,i)=>{t.tabIndex=i===this.internalActiveTabIndex?0:-1}))}focusNextTab(){let t=this.internalFocusedTabIndex+1;while(t<this.tabHeaderRefs.length&&this.tabObjects[t].disabled){t++}if(t>=0&&t<this.tabHeaderRefs.length){this.internalFocusedTabIndex=t;this.tabHeaderRefs[t].focus()}}focusPreviousTab(){let t=this.internalFocusedTabIndex-1;while(t>=0&&this.tabObjects[t].disabled){t--}if(t>=0&&t<this.tabHeaderRefs.length){this.internalFocusedTabIndex=t;this.tabHeaderRefs[t].focus()}}getTabItemClass(t){const i=t===this.internalActiveTabIndex&&!this.tabObjects[t].disabled;const s=this.tabObjects[t].disabled;const e=this.tabObjects[t].iconPosition;return`tab-item ${this.fullWidth?"full-width":""} ${i?"active":""} ${s?"disabled":""} ${"icon__"+e}`}handleClick(t,i){if(!t.disabled){const t=this.internalActiveTabIndex;this.internalActiveTabIndex=i;this.ifxChange.emit({previousTab:t,currentTab:i});setTimeout((()=>this.scrollTabIntoView(i)),0)}}handleKeyDown(t){if(t.key==="Tab"){if(t.shiftKey){if(this.internalFocusedTabIndex===0){return}else{t.preventDefault();this.focusPreviousTab()}}else{if(this.internalFocusedTabIndex===this.tabHeaderRefs.length-1){return}else{t.preventDefault();this.focusNextTab()}}}else if(t.key==="Enter"){const i=t.composedPath();const s=i.some((t=>this.tabHeaderRefs.includes(t)));if(!s){return}if(this.internalFocusedTabIndex!==-1&&!this.tabObjects[this.internalFocusedTabIndex].disabled){const t=this.internalActiveTabIndex;this.internalActiveTabIndex=this.internalFocusedTabIndex;this.ifxChange.emit({previousTab:t,currentTab:this.internalFocusedTabIndex});setTimeout((()=>this.scrollTabIntoView(this.internalFocusedTabIndex)),0)}}}updateScrollButtons(){if(this.shouldDisableScrolling()){this.canScrollLeft=false;this.canScrollRight=false;return}const{scrollLeft:t,scrollWidth:i,clientWidth:s}=this.tabsListElement;this.canScrollLeft=t>0;this.canScrollRight=t<i-s}shouldDisableScrolling(){return!this.tabsListElement||this.internalOrientation==="vertical"||this.fullWidth}scrollLeft(){if(!this.canScrollLeft||!this.tabsListElement)return;const t=Math.min(200,this.tabsListElement.scrollLeft);this.tabsListElement.scrollBy({left:-t,behavior:"smooth"})}scrollRight(){if(!this.canScrollRight||!this.tabsListElement)return;const t=this.tabsListElement.scrollWidth-this.tabsListElement.clientWidth;const i=this.tabsListElement.scrollLeft;const s=Math.min(200,t-i);this.tabsListElement.scrollBy({left:s,behavior:"smooth"})}onTabsListScroll(){this.updateScrollButtons()}scrollTabIntoView(t){if(this.shouldDisableScrolling()||!this.tabHeaderRefs[t]){return}const i=this.tabHeaderRefs[t];const s=this.tabsListElement;const e=this.getTabCenterInfo(i);const o=this.getContainerCenterInfo(s);if(Math.abs(e.center-o.center)>50){const t=this.calculateCenteredScrollPosition(e,o);s.scrollTo({left:t,behavior:"smooth"})}}getTabCenterInfo(t){const i=t.offsetLeft;const s=t.offsetWidth;return{left:i,width:s,center:i+s/2}}getContainerCenterInfo(t){const i=t.scrollLeft;const s=t.clientWidth;return{scrollLeft:i,width:s,center:i+s/2}}calculateCenteredScrollPosition(t,i){const s=t.center-i.width/2;const e=this.tabsListElement.scrollWidth-i.width;return Math.max(0,Math.min(s,e))}render(){var t,i;return s("div",{key:"17f31c13b84743786e5c6aa2f5c9c24f58b82ed2","aria-label":"navigation tabs",class:`tabs ${this.internalOrientation} ${this.fullWidth?"full-width-enabled":""}`},this.internalOrientation==="horizontal"?s("div",{class:"tabs-container"},s("ifx-icon-button",{shape:"round",variant:"tertiary",icon:"chevronLeft16",size:"s",disabled:false,"aria-label":"Scroll tabs left",onClick:()=>this.scrollLeft(),class:`scroll-button scroll-left ${!this.canScrollLeft?"hidden":""}`}),s("ul",{role:"tablist",class:"tabs-list scrollable",ref:t=>this.tabsListElement=t,onScroll:()=>this.onTabsListScroll()},(t=this.tabObjects)===null||t===void 0?void 0:t.map(((t,i)=>s("li",{class:this.getTabItemClass(i),ref:t=>this.tabHeaderRefs[i]=t,onMouseDown:t=>t.preventDefault(),onClick:()=>this.handleClick(t,i),"aria-selected":i===this.internalActiveTabIndex?"true":"false","aria-disabled":t.disabled?"true":"false",role:"tab"},(t===null||t===void 0?void 0:t.icon)?s("ifx-icon",{icon:t.icon}):"",t===null||t===void 0?void 0:t.header))),s("div",{class:"active-border"})),s("ifx-icon-button",{shape:"round",variant:"tertiary",icon:"chevronRight16",size:"s",disabled:false,"aria-label":"Scroll tabs right",onClick:()=>this.scrollRight(),class:`scroll-button scroll-right ${!this.canScrollRight?"hidden":""}`})):s("ul",{role:"tablist",class:"tabs-list"},(i=this.tabObjects)===null||i===void 0?void 0:i.map(((t,i)=>s("li",{class:this.getTabItemClass(i),ref:t=>this.tabHeaderRefs[i]=t,onMouseDown:t=>t.preventDefault(),onClick:()=>this.handleClick(t,i),"aria-selected":i===this.internalActiveTabIndex?"true":"false","aria-disabled":t.disabled?"true":"false",role:"tab"},(t===null||t===void 0?void 0:t.icon)?s("ifx-icon",{icon:t.icon}):"",t===null||t===void 0?void 0:t.header))),s("div",{class:"active-border"})),s("div",{key:"852abb48779c3d068d3bb3d317e9dcf658f413e2",class:"tab-content"},Array.from(this.tabObjects).map(((t,i)=>s("div",{style:{display:i===this.internalActiveTabIndex?"block":"none"}},s("slot",{name:`tab-${i}`}))))))}get el(){return e(this)}static get watchers(){return{activeTabIndex:["activeTabIndexChanged"]}}};r.style=n;export{r as ifx_tabs};
+//# sourceMappingURL=p-98c2e3a9.entry.js.map