@infineon/infineon-design-system-stencil 33.1.1--canary.1827.0eabedc97f4e514129bb536649b389971d5464b1.0 → 33.1.1

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

@@ -0,0 +1 @@
+{"version":3,"names":["buttonCss","IfxButtonStyle0","Button","constructor","hostRef","this","variant","theme","size","disabled","target","type","fullWidth","handleClick","ev","el","shadowRoot","parentForm","closest","preventDefault","resetClickHandler","fakeButton","document","createElement","style","display","appendChild","click","remove","setInternalHref","newValue","internalHref","setFocus","focusableElement","focus","insertNativeButton","nativeButton","handleFormAndInternalHref","href","undefined","handleButtonWidth","setProperty","componentWillLoad","componentWillRender","formElement","customElements","querySelectorAll","forEach","element","reset","handleKeyDown","key","handleHostClick","event","stopImmediatePropagation","handleFocus","blur","render","h","Host","role","tabIndex","ref","class","getClassNames","onClick","rel","onFocus","AriaLabel","getVariantClass","getSizeClass","classNames"],"sources":["src/components/button/button.scss?tag=ifx-button&encapsulation=shadow","src/components/button/button.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  vertical-align: bottom;\n  display: inline-flex;\n  width: var(--bw, fit-content);\n}\n\n.btn {\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  height: tokens.$ifxSize500;\n  padding: 0px tokens.$ifxSpace200;\n  gap: tokens.$ifxSpace100;\n  color: tokens.$ifxColorBaseWhite;\n  font-weight: tokens.$ifxFontWeightSemibold;\n  border-radius: tokens.$ifxBorderRadius12;\n  line-height: tokens.$ifxLineHeightM;\n  font-family: tokens.$ifxFontFamilyBody;\n  font-style: normal;\n  text-decoration: none;\n  user-select: none;\n  font-size: tokens.$ifxFontSizeM;\n  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;\n  width: var(--bw, fit-content);\n}\n\n.btn:not(.disabled) {\n  cursor: pointer;\n}\n\n.btn.disabled {\n  pointer-events: none;\n}\n\n.btn-default {\n  //default variant=primary; default color=default\n  color: tokens.$ifxColorBaseWhite;\n  background-color: tokens.$ifxColorOcean500;\n\n  &:disabled,\n  &.disabled {\n    background-color: tokens.$ifxColorEngineering300;\n    color: tokens.$ifxColorBaseWhite;\n    pointer-events: none;\n\n  }\n}\n\n.btn-secondary-default {\n  background-color: tokens.$ifxColorBaseWhite;\n  color: tokens.$ifxColorOcean500;\n  border: 1px solid tokens.$ifxColorOcean500;\n\n  &:disabled,\n  &.disabled {\n    background-color: tokens.$ifxColorBaseWhite;\n    border: 1px solid tokens.$ifxColorEngineering300;\n    color: tokens.$ifxColorEngineering300;\n    pointer-events: none;\n\n  }\n}\n\n.btn-tertiary-default {\n  background-color: tokens.$ifxColorBaseTransparent;\n  color: tokens.$ifxColorOcean500;\n\n  &:disabled,\n  &.disabled {\n    color: tokens.$ifxColorEngineering300;\n    pointer-events: none;\n\n  }\n}\n\n\n.btn-danger {\n  color: tokens.$ifxColorBaseWhite;\n  background-color: tokens.$ifxColorRed500;\n  border-color: tokens.$ifxColorRed500;\n\n  &:disabled,\n  &.disabled {\n    background-color: tokens.$ifxColorEngineering300;\n    color: tokens.$ifxColorBaseWhite;\n    pointer-events: none;\n\n  }\n}\n\n.btn-secondary-danger {\n  background-color: tokens.$ifxColorBaseWhite;\n  color: tokens.$ifxColorRed500;\n  border: 1px solid tokens.$ifxColorRed500;\n\n  &:disabled,\n  &.disabled {\n    background-color: tokens.$ifxColorBaseWhite;\n    border: 1px solid tokens.$ifxColorEngineering300;\n    color: tokens.$ifxColorEngineering300;\n    pointer-events: none;\n\n  }\n}\n\n.btn-tertiary-danger {\n  //combination tertiary + danger not in design\n  background-color: tokens.$ifxColorBaseTransparent;\n  color: tokens.$ifxColorRed500;\n\n  &:disabled,\n  &.disabled {\n    background-color: tokens.$ifxColorBaseWhite;\n    color: tokens.$ifxColorEngineering300;\n    pointer-events: none;\n\n  }\n}\n\n.btn-inverse {\n  color: tokens.$ifxColorOcean500;\n  background-color: tokens.$ifxColorBaseWhite;\n\n  &:disabled,\n  &.disabled {\n    opacity: tokens.$ifxOpacity100;\n    background-color: tokens.$ifxColorBaseWhite;\n    color: tokens.$ifxColorOcean500;\n    pointer-events: none;\n  }\n}\n\n.btn-secondary-inverse {\n  color: tokens.$ifxColorBaseWhite;\n  border: 1px solid tokens.$ifxColorBaseWhite;\n\n  &:disabled,\n  &.disabled {\n    border: 1px solid tokens.$ifxColorBaseWhite;\n    color: tokens.$ifxColorBaseWhite;\n    pointer-events: none;\n\n  }\n}\n\n\n.btn-tertiary-inverse {\n  color: tokens.$ifxColorBaseWhite;\n\n  &:disabled,\n  &.disabled {\n    color: tokens.$ifxColorBaseWhite;\n    opacity: tokens.$ifxOpacity100;\n    pointer-events: none;\n\n  }\n}\n\n.btn {\n  & ifx-icon:empty {\n    display: none;\n  }\n\n  &.btn-xs {\n    font-size: tokens.$ifxFontSizeS;\n    height: tokens.$ifxSize400;\n    line-height: tokens.$ifxLineHeightXs;\n  }\n\n  &.btn-s {\n    font-size: tokens.$ifxFontSizeS;\n    height: tokens.$ifxSize450;\n    line-height: tokens.$ifxLineHeightS;\n  }\n\n  // &.btn-m { //default\n  //   font-size: tokens.$ifxFontSizeM;\n  //   height: tokens.$ifxSize400;\n  //   line-height: tokens.$ifxLineHeightM;\n  // }\n\n\n  &.btn-l {\n    font-size: tokens.$ifxFontSizeXl;\n    height: tokens.$ifxSize600;\n    line-height: tokens.$ifxLineHeightXl;\n  }\n\n\n\n  &.btn-default:not(:disabled, .disabled) {\n    &:focus:not(:active, .active) {\n      outline: none;\n      box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean500;\n    }\n\n    &:hover {\n      background-color: tokens.$ifxColorOcean600;\n    }\n\n    &:active,\n    &.active {\n      background-color: tokens.$ifxColorOcean700;\n    }\n  }\n\n  &.btn-secondary-default:not(:disabled, .disabled) {\n    &:focus:not(:active, .active) {\n      outline: none;\n      box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean500;\n    }\n\n    &:hover {\n      color: tokens.$ifxColorBaseWhite;\n      background-color: tokens.$ifxColorOcean600;\n    }\n\n    &:active,\n    &.active {\n      background-color: tokens.$ifxColorOcean700;\n    }\n  }\n\n  &.btn-secondary:not(:disabled, .disabled) {\n\n    &:hover {\n      background-color: tokens.$ifxColorBerry500;\n    }\n\n    &:active,\n    &.active {\n      background-color: tokens.$ifxColorBerry500;\n    }\n  }\n\n\n\n  &.btn-danger:not(:disabled, .disabled) {\n    &:focus:not(:active, .active) {\n      outline: none;\n      box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean500;\n    }\n\n    &:hover {\n      background-color: tokens.$ifxColorRed600;\n    }\n\n    &:active,\n    &.active {\n      background-color: tokens.$ifxColorRed700;\n    }\n  }\n\n  &.btn-secondary-danger:not(:disabled, .disabled) {\n\n    &:focus:not(:active, .active) {\n      outline: none;\n      box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean500;\n    }\n\n    &:hover {\n      color: tokens.$ifxColorBaseWhite;\n      background-color: tokens.$ifxColorRed600;\n    }\n\n    &:active,\n    &.active {\n      background-color: tokens.$ifxColorRed700;\n    }\n  }\n\n\n  &.btn-inverse:not(:disabled, .disabled) {\n    &:focus:not(:active, .active) {\n      outline: none;\n      box-shadow: 0 0 0 2px tokens.$ifxColorOcean500, 0 0 0 4px tokens.$ifxColorBaseWhite;\n    }\n\n    &:hover {\n      background-color: tokens.$ifxColorEngineering200;\n    }\n\n    &:active,\n    &.active {\n      background-color: tokens.$ifxColorEngineering300;\n    }\n  }\n\n  &.btn-secondary-inverse:not(:disabled, .disabled) {\n    &:focus:not(:active, .active) {\n      outline: none;\n      box-shadow: 0 0 0 2px tokens.$ifxColorOcean500, 0 0 0 4px tokens.$ifxColorBaseWhite;\n    }\n\n    &:hover {\n      color: tokens.$ifxColorOcean500;\n      background-color: tokens.$ifxColorEngineering200;\n    }\n\n    &:active,\n    &.active {\n      color: tokens.$ifxColorOcean500;\n      background-color: tokens.$ifxColorEngineering300;\n    }\n  }\n\n\n\n  &.btn-tertiary-default:not(:disabled, .disabled) {\n    &:focus:not(:active, .active) {\n      outline: none;\n      box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean600;\n    }\n\n    &:hover {\n      color: tokens.$ifxColorOcean600;\n    }\n\n    &:active,\n    &.active {\n      color: tokens.$ifxColorOcean700;\n    }\n\n\n  }\n\n\n\n\n\n  &.btn-tertiary-danger:not(:disabled, .disabled) {\n    &:focus:not(:active, .active) {\n      outline: none;\n      box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorRed600;\n    }\n\n    &:hover {\n      color: tokens.$ifxColorRed600;\n    }\n\n    &:active,\n    &.active {\n      color: tokens.$ifxColorRed700;\n    }\n\n  }\n\n\n  &.btn-tertiary-inverse:not(:disabled, .disabled) {\n    &:focus:not(:active, .active) {\n      outline: none;\n      box-shadow: 0 0 0 2px tokens.$ifxColorOcean500, 0 0 0 4px tokens.$ifxColorBaseWhite;\n    }\n\n    &:hover {\n      color: tokens.$ifxColorEngineering200;\n\n    }\n\n    &:active,\n    &.active {\n      color: tokens.$ifxColorEngineering300;\n    }\n  }\n}","import { Component, Prop, h, Host, Method, Element, Listen, State, Watch } from '@stencil/core';\nimport classNames from 'classnames';\n \n\n@Component({\n  tag: 'ifx-button',\n  styleUrl: 'button.scss',\n  shadow: true,\n})\nexport class Button {\n  @Prop() variant: 'primary' | 'secondary' | 'tertiary' = 'primary';\n  @Prop() theme: 'default' | 'danger' | 'inverse' = 'default';\n  @Prop() size: string = 'm';\n  @Prop() disabled: boolean = false;\n  @State() internalHref: string;\n  @Prop() href: string;\n  @Prop() target: string = '_self';\n  @Prop() type: \"button\" | \"submit\" | \"reset\" = \"button\";\n  @Prop() fullWidth: boolean = false;\n  @Prop() AriaLabel: string;\n  @Element() el;\n\n  private focusableElement: HTMLElement;\n  private nativeButton: HTMLButtonElement | HTMLInputElement;\n\n  @Watch('href')\n  setInternalHref(newValue: string) {\n    this.internalHref = newValue;\n  }\n\n  @Method()\n  async setFocus() {\n    this.focusableElement.focus();\n  }\n\n  insertNativeButton() {\n    this.nativeButton = document.createElement('button');\n    this.nativeButton.type = this.type;\n    this.nativeButton.style.display = 'none';\n    this.el.closest('form').appendChild(this.nativeButton);\n  }\n\n  handleFormAndInternalHref() {\n    if (this.el.closest('form')) {\n      if (this.el.href) {\n        this.el.internalHref = undefined;\n      }\n      this.insertNativeButton()\n    } else {\n      this.internalHref = this.href;\n    }\n  }\n\n  handleButtonWidth() {\n    if (this.fullWidth) {\n      this.el.style.setProperty('--bw', '100%');\n    } else {\n      this.el.style.setProperty('--bw', 'fit-content');\n    }\n  }\n\n  componentWillLoad() {\n    this.handleFormAndInternalHref()\n  }\n\n  componentWillRender() {\n    this.handleButtonWidth()\n  }\n\n\n\n  handleClick = (ev: Event) => {\n    if (this.el.shadowRoot) {\n      const parentForm = this.el.closest('form');\n      if (parentForm) {\n        ev.preventDefault();\n\n        if (this.type === 'reset') {\n          // If the button type is 'reset', manually reset all custom form fields\n          this.resetClickHandler(); //this will reset all ifx-text-fields within a form\n        } else {\n          const fakeButton = document.createElement('button');\n          if (this.type) {\n            fakeButton.type = this.type;\n          }\n          fakeButton.style.display = 'none';\n          parentForm.appendChild(fakeButton);\n          fakeButton.click();\n          fakeButton.remove();\n        }\n      }\n    }\n  }\n\n  resetClickHandler() {\n    const formElement = this.el.closest('form');\n    const customElements = formElement.querySelectorAll('ifx-text-field, ifx-textarea');\n    customElements.forEach(element => {\n      element.reset();\n    });\n  }\n\n  @Listen('keydown')\n  handleKeyDown(ev: KeyboardEvent) {\n    if ( ev.key === \" \" || ev.key === 'Enter' && !this.disabled) {\n      this.focusableElement.click();\n    }\n  }\n\n  @Listen('click', { capture: true })\n  handleHostClick(event: Event) {\n    if (this.disabled === true) {\n      event.stopImmediatePropagation();\n    }\n  }\n\n  handleFocus(event: FocusEvent) {\n    if (this.disabled) {\n      event.preventDefault();\n      this.focusableElement.blur();\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <a\n          role={this.href ? 'link' : 'button'}\n          tabIndex={this.disabled ? -1 : 0}\n          ref={(el) => (this.focusableElement = el)}\n          class={this.getClassNames()}\n          href={!this.disabled ? this.internalHref : undefined}\n          target={this.target}\n          onClick={this.handleClick}\n          rel={this.target === '_blank' ? 'noopener noreferrer' : undefined}\n          onFocus={(event) => this.handleFocus(event)}\n          aria-disabled={this.disabled ? 'true' : null}\n          aria-describedby={this.theme === 'danger' ? 'Dangerous action' : undefined}\n          aria-label={this.AriaLabel || undefined}\n        >\n          <slot></slot>\n        </a>\n      </Host>\n    );\n  }\n\n\n  getVariantClass() {\n    return `${this.variant}` === \"secondary\"\n      ? `secondary-${this.theme}`\n      : `${this.variant}` === 'tertiary'\n        ? `tertiary-${this.theme}`\n        : `${this.theme}`;\n  }\n\n  getSizeClass() {\n    if (`${this.size}` === \"xs\") {\n      return \"xs\"\n    }\n    else if (`${this.size}` === \"s\") {\n      return \"s\"\n    }\n    else if (`${this.size}` === \"l\") {\n      return \"l\"\n    }\n    else return \"\";\n  }\n\n  getClassNames() {\n    return classNames(\n      'btn',\n      this.size && `btn-${this.getSizeClass()}`,\n      `btn-${this.getVariantClass()}`,\n      this.disabled ? 'disabled' : ''\n    );\n  }\n}"],"mappings":"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","ignoreList":[]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"names":["checkboxGroupCss","IfxCheckboxGroupStyle0","CheckboxGroup","constructor","hostRef","this","errorStates","Map","alignment","groupLabelText","hasErrors","handleSlotChange","initializeState","handleCheckboxError","event","checkbox","target","tagName","set","detail","updateHasErrors","setGroupError","error","checkboxes","Array","from","el","querySelectorAll","forEach","componentWillLoad","clear","has","values","some","render","h","key","class","showGroupLabel","size","onSlotchange","showCaption","showCaptionIcon","icon","captionText"],"sources":["src/components/checkbox-group/checkbox-group.scss?tag=ifx-checkbox-group&encapsulation=shadow","src/components/checkbox-group/checkbox-group.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n.checkbox-group-container {\n    display: flex;\n    flex-direction: column;\n}\n\n.checkbox-group {\n    display: flex;\n    font-family: tokens.$ifxFontFamilyBody;\n    gap: tokens.$ifxSpace100;\n\n    &.horizontal {\n        flex-direction: row;\n        column-gap: tokens.$ifxSpace150;\n    }\n\n    &.vertical {\n        flex-direction: column;\n        row-gap: tokens.$ifxSpace150;\n    }\n}\n\n.group-label {\n    font: tokens.$ifxBodyBody05;\n    margin-bottom: tokens.$ifxSpace100;\n    text-align: left;\n    text-underline-position: from-font;\n    text-decoration-skip-ink: none;\n}\n\n.caption {\n    margin-top: tokens.$ifxSpace100;\n    align-self: flex-start;\n    display: flex;\n    width: 100%;\n    column-gap: tokens.$ifxSpace100;\n    justify-content: space-between;\n    align-items: center;\n\n    &.default {\n        color: tokens.$ifxColorBaseBlack;\n    }\n\n    &.error {\n        color: tokens.$ifxColorRed500;\n    }\n}\n\n.caption-text {\n    font: tokens.$ifxBodyBody05;\n    flex: 1;\n    text-align: left;\n    text-underline-position: from-font;\n    text-decoration-skip-ink: none;\n}\n\n.caption-icon {\n    flex:0;\n    display: flex;\n}","import { Component, State, Prop, h, Element, Listen, Method } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-checkbox-group',\n  styleUrl: 'checkbox-group.scss',\n  shadow: true,\n  formAssociated: true\n})\n\nexport class CheckboxGroup {\n  private errorStates: Map<HTMLElement, boolean> = new Map();\n\n  @Element() el: HTMLElement;\n  @Prop() alignment: 'horizontal' | 'vertical' = 'vertical';\n  @Prop() size: string;\n  @Prop() showGroupLabel: boolean;\n  @Prop() groupLabelText: string = 'Group Label Text';\n  @Prop() showCaption: boolean;\n  @Prop() captionText: string;\n  @Prop() showCaptionIcon: boolean;\n  @State() hasErrors: boolean = false;\n\n  @Listen('ifxError')\n  handleCheckboxError(event: CustomEvent) {\n    const checkbox = event.target as HTMLElement;\n    if (checkbox.tagName === 'ifx-checkbox') {\n      this.errorStates.set(checkbox, event.detail);\n      this.updateHasErrors();\n    }\n  }\n\n  // Method to set the error state of all checkboxes in the group\n  @Method()\n  async setGroupError(error: boolean) {\n    const checkboxes = Array.from(this.el.querySelectorAll('ifx-checkbox'));\n    checkboxes.forEach((checkbox) => {\n      (checkbox as any).error = error;\n    });\n  }\n\n  componentWillLoad() {\n    this.initializeState();\n  }\n\n  handleSlotChange = () => {\n    this.initializeState();\n  };\n\n  private initializeState() {\n    this.errorStates.clear();\n    const checkboxes = Array.from(this.el.querySelectorAll('ifx-checkbox'));\n    checkboxes.forEach((checkbox) => {\n      if (!this.errorStates.has(checkbox)) {\n        this.errorStates.set(checkbox, (checkbox as any).error || false);\n      }\n    });\n    this.updateHasErrors();\n  }\n\n  private updateHasErrors() {\n    this.hasErrors = Array.from(this.errorStates.values()).some((error) => error);\n  }\n\n  render() {\n    return (\n      <div class='checkbox-group-container'>\n        {this.showGroupLabel ? <div class='group-label'>{this.groupLabelText} *</div> : ''}\n        <div class={`checkbox-group ${this.alignment} ${this.size}`}>\n          <slot onSlotchange={this.handleSlotChange}></slot>\n        </div>\n        {this.showCaption ? (\n          <div class={`caption ${this.hasErrors ? 'error' : 'default'}`}>\n            {this.showCaptionIcon ? <div class='caption-icon'><ifx-icon icon=\"c-info-16\">\n            </ifx-icon></div> : ''}\n            <div class='caption-text'>{this.captionText}</div>\n          </div>) : ''}\n      </div>\n    );\n  }\n}"],"mappings":"kDAAA,MAAMA,EAAmB,6yBACzB,MAAAC,EAAeD,E,MCQFE,EAAa,MAP1B,WAAAC,CAAAC,G,UAQUC,KAAAC,YAAyC,IAAIC,IAG7CF,KAAAG,UAAuC,WAGvCH,KAAAI,eAAyB,mBAIxBJ,KAAAK,UAAqB,MAwB9BL,KAAAM,iBAAmB,KACjBN,KAAKO,iBAAiB,C,CAtBxB,mBAAAC,CAAoBC,GAClB,MAAMC,EAAWD,EAAME,OACvB,GAAID,EAASE,UAAY,eAAgB,CACvCZ,KAAKC,YAAYY,IAAIH,EAAUD,EAAMK,QACrCd,KAAKe,iB,EAMT,mBAAMC,CAAcC,GAClB,MAAMC,EAAaC,MAAMC,KAAKpB,KAAKqB,GAAGC,iBAAiB,iBACvDJ,EAAWK,SAASb,IACjBA,EAAiBO,MAAQA,CAAK,G,CAInC,iBAAAO,GACExB,KAAKO,iB,CAOC,eAAAA,GACNP,KAAKC,YAAYwB,QACjB,MAAMP,EAAaC,MAAMC,KAAKpB,KAAKqB,GAAGC,iBAAiB,iBACvDJ,EAAWK,SAASb,IAClB,IAAKV,KAAKC,YAAYyB,IAAIhB,GAAW,CACnCV,KAAKC,YAAYY,IAAIH,EAAWA,EAAiBO,OAAS,M,KAG9DjB,KAAKe,iB,CAGC,eAAAA,GACNf,KAAKK,UAAYc,MAAMC,KAAKpB,KAAKC,YAAY0B,UAAUC,MAAMX,GAAUA,G,CAGzE,MAAAY,GACE,OACEC,EAAA,OAAAC,IAAA,2CAAKC,MAAM,4BACRhC,KAAKiC,eAAiBH,EAAA,OAAKE,MAAM,eAAehC,KAAKI,eAAc,MAAY,GAChF0B,EAAA,OAAAC,IAAA,2CAAKC,MAAO,kBAAkBhC,KAAKG,aAAaH,KAAKkC,QACnDJ,EAAA,QAAAC,IAAA,2CAAMI,aAAcnC,KAAKM,oBAE1BN,KAAKoC,YACJN,EAAA,OAAKE,MAAO,WAAWhC,KAAKK,UAAY,QAAU,aAC/CL,KAAKqC,gBAAkBP,EAAA,OAAKE,MAAM,gBAAeF,EAAA,YAAUQ,KAAK,eAC7C,GACpBR,EAAA,OAAKE,MAAM,gBAAgBhC,KAAKuC,cACxB,G","ignoreList":[]}

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

@@ -0,0 +1,2 @@
+import{r as t,h as n,a as o,g as e}from"./p-e6edf72d.js";import{c as i}from"./p-5cdc6210.js";const r=':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:"Source Sans 3";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 s=r;const a=class{constructor(n){t(this,n);this.target="_self";this.shape="round"}handleClick(t){if(this.disabled){t.stopImmediatePropagation()}}async setFocus(){this.focusableElement.focus()}componentWillLoad(){if(this.shape===""){this.shape="round"}}render(){return n(o,{key:"3cc21055a0545976f5375b3e43fe8dec7cc3e28c"},this.href?n("a",{"aria-disabled":this.disabled,"aria-label":"a clickable icon button",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.icon})):n("button",{class:this.getClassNames(),type:"button"},n("ifx-icon",{icon:this.icon})))}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 i("btn icon-button",`btn-${this.shape}`,this.size&&`btn-${this.getSizeClass()}`,`btn-${this.getVariantClass()}`,this.disabled?"disabled":"")}get el(){return e(this)}};a.style=s;export{a as ifx_icon_button};
+//# sourceMappingURL=p-ebe1aa5f.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["iconButtonCss","IfxIconButtonStyle0","IconButton","constructor","hostRef","this","target","shape","handleClick","event","disabled","stopImmediatePropagation","setFocus","focusableElement","focus","componentWillLoad","render","h","Host","key","href","ref","el","class","getClassNames","undefined","rel","icon","type","getVariantClass","variant","getSizeClass","size","classNames"],"sources":["src/components/icon-button/icon-button.scss?tag=ifx-icon-button&encapsulation=shadow","src/components/icon-button/icon-button.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host {\n  display: inline-flex;\n}\n\n.btn {\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-height: tokens.$ifxSize500;\n  padding: 8px;\n  gap: tokens.$ifxSpace100;\n  color: tokens.$ifxColorBaseWhite;\n  flex-direction: row;\n  font-weight: tokens.$ifxFontWeightSemibold;\n  border-radius: tokens.$ifxBorderRadius12;\n  line-height: tokens.$ifxLineHeightM;\n  outline: none;\n  font-family: tokens.$ifxFontFamilyBody;\n  text-decoration: none;\n  user-select: none;\n  border: 1px solid rgba(0, 0, 0, 0);\n  font-size: tokens.$ifxFontSizeM;\n  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;\n}\n\n.btn:not(.disabled) {\n  cursor: pointer;\n}\n\n.btn-primary {\n  color: tokens.$ifxColorBaseWhite;\n  background-color: tokens.$ifxColorOcean500;\n\n  &:disabled,\n  &.disabled {\n    background-color: tokens.$ifxColorEngineering300;\n    color: tokens.$ifxColorBaseWhite;\n    pointer-events: none;\n\n  }\n}\n\n\n.btn-secondary {\n  color: tokens.$ifxColorOcean500;\n  background-color: tokens.$ifxColorBaseWhite;\n  border-color: tokens.$ifxColorOcean500;\n\n  &:disabled,\n  &.disabled {\n    background-color: tokens.$ifxColorBaseWhite;\n    border: 1px solid tokens.$ifxColorEngineering300;\n    color: tokens.$ifxColorEngineering300;\n    pointer-events: none;\n\n  }\n}\n\n.btn-tertiary {\n  background-color: transparent;\n  color: tokens.$ifxColorBaseBlack;\n\n  &:disabled,\n  &.disabled {\n    color: tokens.$ifxColorEngineering300;\n    pointer-events: none;\n  }\n}\n\n\n.btn {\n\n  &.icon-button {\n    min-width: initial;\n    min-height: initial;\n    width: tokens.$ifxSize500;\n    height: tokens.$ifxSize500;\n    padding: 0;\n    justify-content: center;\n\n    &.btn-round {\n      border-radius: 100px;\n    }\n\n    &.btn-square {\n      border-radius: tokens.$ifxBorderRadius12;\n    }\n\n    &.btn-s {\n      width: tokens.$ifxSize400;\n      height: tokens.$ifxSize400;\n      padding: 8px;\n    }\n\n\n    &.btn-l {\n      width: tokens.$ifxSize600;\n      height: tokens.$ifxSize600;\n      padding: 8px;\n    }\n  }\n\n  &.btn-primary:not(:disabled, .disabled) {\n    &:focus:not(:active, .active) {\n      outline: none;\n      box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean500;\n    }\n\n    &:hover {\n      background-color: tokens.$ifxColorOcean600;\n      border-color: tokens.$ifxColorOcean600;\n    }\n\n    &:active,\n    &.active {\n      background-color: tokens.$ifxColorOcean700;\n      border-color: tokens.$ifxColorOcean700;\n    }\n  }\n\n\n  &.btn-secondary:not(:disabled, .disabled) {\n    &:focus:not(:active, .active) {\n      outline: none;\n      box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean500;\n    }\n\n    &:hover {\n      background-color: tokens.$ifxColorOcean600;\n      border-color: tokens.$ifxColorOcean600;\n      color: tokens.$ifxColorBaseWhite;\n    }\n\n    &:active,\n    &.active {\n      background-color: tokens.$ifxColorOcean700;\n      border-color: tokens.$ifxColorOcean700;\n    }\n  }\n\n  &.btn-tertiary:not(:disabled, .disabled) {\n    &:focus:not(:active, .active) {\n      outline: none;\n      color: tokens.$ifxColorBaseBlack;\n      box-shadow: 0 0 0 0px tokens.$ifxColorBaseWhite, 0 0 0 2px tokens.$ifxColorOcean500;\n    }\n\n    &:hover {\n      color: tokens.$ifxColorOcean500;\n    }\n\n    &:active,\n    &.active {\n      color: tokens.$ifxColorOcean600;\n    }\n  }\n}","import { Component, Prop, h, Host, Method, Element, Listen } from '@stencil/core';\nimport classNames from 'classnames';\n \n\n@Component({\n  tag: 'ifx-icon-button',\n  styleUrl: 'icon-button.scss',\n  shadow: true,\n})\n\nexport class IconButton {\n  @Prop() variant: 'primary' | 'secondary' | 'tertiary';\n  @Prop() size: string;\n  @Prop() disabled: boolean;\n  @Prop() icon: string;\n  @Prop() href: string;\n  @Prop() target: string = '_self';\n  @Prop() shape: string = 'round';\n  @Element() el;\n\n  private focusableElement: HTMLElement;\n\n  @Listen('click', { capture: true })\n  handleClick(event: Event) {\n    if (this.disabled) {\n      event.stopImmediatePropagation();\n    }\n  }\n\n  @Method()\n  async setFocus() {\n    this.focusableElement.focus();\n  }\n\n  componentWillLoad() {\n    if (this.shape === '') {\n      this.shape = 'round';\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        {this.href ? (\n          <a\n            aria-disabled={this.disabled}\n            aria-label='a clickable icon button'\n            ref={(el) => (this.focusableElement = el)}\n            class={this.getClassNames()}\n            href={!this.disabled ? this.href : undefined}\n            target={this.target}\n            rel={this.target === '_blank' ? 'noopener noreferrer' : undefined}\n          >\n            <ifx-icon icon={this.icon}></ifx-icon>\n          </a>\n        ) : (\n          <button\n            class={this.getClassNames()}\n            type=\"button\"\n          >\n            <ifx-icon icon={this.icon}></ifx-icon>\n          </button>\n        )}\n      </Host>\n    );\n  }\n\n  getVariantClass() {\n    return `${this.variant}` === \"secondary\"\n      ? `secondary`\n      : `${this.variant}` === 'tertiary'\n        ? `tertiary`\n        : `primary`;\n  }\n\n  getSizeClass() {\n    if (`${this.size}` === \"xs\") {\n      return \"xs\"\n    }\n    else if (`${this.size}` === \"s\") {\n      return \"s\"\n    }\n    else if (`${this.size}` === \"l\") {\n      return \"l\"\n    }\n    else return \"\";\n  }\n\n  getClassNames() {\n    return classNames(\n      'btn icon-button',\n      `btn-${this.shape}`,\n      this.size && `btn-${this.getSizeClass()}`,\n      `btn-${this.getVariantClass()}`,\n      this.disabled ? 'disabled' : ''\n    );\n  }\n}"],"mappings":"6FAAA,MAAMA,EAAgB,k4EACtB,MAAAC,EAAeD,E,MCSFE,EAAU,MANvB,WAAAC,CAAAC,G,UAYUC,KAAAC,OAAiB,QACjBD,KAAAE,MAAgB,O,CAMxB,WAAAC,CAAYC,GACV,GAAIJ,KAAKK,SAAU,CACjBD,EAAME,0B,EAKV,cAAMC,GACJP,KAAKQ,iBAAiBC,O,CAGxB,iBAAAC,GACE,GAAIV,KAAKE,QAAU,GAAI,CACrBF,KAAKE,MAAQ,O,EAIjB,MAAAS,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACFd,KAAKe,KACJH,EAAA,qBACiBZ,KAAKK,SAAQ,aACjB,0BACXW,IAAMC,GAAQjB,KAAKQ,iBAAmBS,EACtCC,MAAOlB,KAAKmB,gBACZJ,MAAOf,KAAKK,SAAWL,KAAKe,KAAOK,UACnCnB,OAAQD,KAAKC,OACboB,IAAKrB,KAAKC,SAAW,SAAW,sBAAwBmB,WAExDR,EAAA,YAAUU,KAAMtB,KAAKsB,QAGvBV,EAAA,UACEM,MAAOlB,KAAKmB,gBACZI,KAAK,UAELX,EAAA,YAAUU,KAAMtB,KAAKsB,Q,CAO/B,eAAAE,GACE,MAAO,GAAGxB,KAAKyB,YAAc,YACzB,YACA,GAAGzB,KAAKyB,YAAc,WACpB,WACA,S,CAGR,YAAAC,GACE,GAAI,GAAG1B,KAAK2B,SAAW,KAAM,CAC3B,MAAO,I,MAEJ,GAAI,GAAG3B,KAAK2B,SAAW,IAAK,CAC/B,MAAO,G,MAEJ,GAAI,GAAG3B,KAAK2B,SAAW,IAAK,CAC/B,MAAO,G,MAEJ,MAAO,E,CAGd,aAAAR,GACE,OAAOS,EACL,kBACA,OAAO5B,KAAKE,QACZF,KAAK2B,MAAQ,OAAO3B,KAAK0B,iBACzB,OAAO1B,KAAKwB,oBACZxB,KAAKK,SAAW,WAAa,G","ignoreList":[]}

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

@@ -0,0 +1,2 @@
+import{r as e,h as n}from"./p-e6edf72d.js";const o=':root{font-family:"Source Sans 3", sans-serif}:host{display:inline-flex}.badge__container{display:inline-flex;justify-content:center;align-items:center;padding:4px 8px;gap:8px;border:1px solid #EEEDED;background-color:#EEEDED;border-radius:100px;font-family:"Source Sans 3";font-size:0.875rem;line-height:1.25rem;font-weight:400;color:#1D1D1D}';const r=o;const a=class{constructor(n){e(this,n)}render(){return n("div",{key:"eaa5be7836515fc284e17ed7fb6acfdcc6ce11f1",class:"badge__container"},n("slot",{key:"f00f0415cb6cdfa25ce8e7b0df798f8a98eb2373"}))}};a.style=r;export{a as ifx_badge};
+//# sourceMappingURL=p-f88b928c.entry.js.map

package/dist/infineon-design-system-stencil/{p-7a977f98.entry.js.map → p-f88b928c.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["badgeCss","IfxBadgeStyle0","Badge","render","h","key","class"],"sources":["src/components/badge/badge.scss?tag=ifx-badge&encapsulation=shadow","src/components/badge/badge.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: inline-flex;\n}\n\n.badge__container {\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  padding: 4px 8px;\n  gap: tokens.$ifxSpace100;\n  border: 1px solid tokens.$ifxColorEngineering200;\n  background-color: tokens.$ifxColorEngineering200;\n  border-radius: 100px;\n  font-family: var(--ifx-font-family);\n  font-size: tokens.$ifxFontSizeS;\n  line-height: tokens.$ifxLineHeightS;\n  font-weight: 400;\n  color: tokens.$ifxColorBaseBlack;\n}","import { Component, h } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-badge',\n  styleUrl: 'badge.scss',\n  shadow: true\n})\nexport class Badge {\n\n\n\n  render() {\n    return (\n      <div class=\"badge__container\">\n        <slot />\n      </div>\n    );\n  }\n}"],"mappings":"2CAAA,MAAMA,EAAW,0YACjB,MAAAC,EAAeD,E,MCMFE,EAAK,M,yBAIhB,MAAAC,GACE,OACEC,EAAA,OAAAC,IAAA,2CAAKC,MAAM,oBACTF,EAAA,QAAAC,IAAA,6C","ignoreList":[]}
+{"version":3,"names":["badgeCss","IfxBadgeStyle0","Badge","render","h","key","class"],"sources":["src/components/badge/badge.scss?tag=ifx-badge&encapsulation=shadow","src/components/badge/badge.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: inline-flex;\n}\n\n.badge__container {\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  padding: 4px 8px;\n  gap: tokens.$ifxSpace100;\n  border: 1px solid tokens.$ifxColorEngineering200;\n  background-color: tokens.$ifxColorEngineering200;\n  border-radius: 100px;\n  font-family: tokens.$ifxFontFamilyBody;\n  font-size: tokens.$ifxFontSizeS;\n  line-height: tokens.$ifxLineHeightS;\n  font-weight: 400;\n  color: tokens.$ifxColorBaseBlack;\n}","import { Component, h } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-badge',\n  styleUrl: 'badge.scss',\n  shadow: true\n})\nexport class Badge {\n\n\n\n  render() {\n    return (\n      <div class=\"badge__container\">\n        <slot />\n      </div>\n    );\n  }\n}"],"mappings":"2CAAA,MAAMA,EAAW,0VACjB,MAAAC,EAAeD,E,MCMFE,EAAK,M,yBAIhB,MAAAC,GACE,OACEC,EAAA,OAAAC,IAAA,2CAAKC,MAAM,oBACTF,EAAA,QAAAC,IAAA,6C","ignoreList":[]}

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

@@ -0,0 +1,2 @@
+import{r as e,h as o}from"./p-e6edf72d.js";const a=':root{font-family:"Source Sans 3", sans-serif}.dropdown-header{display:flex;padding:8px 16px;align-items:center;gap:8px;align-self:stretch;border-bottom:1px solid #EEEDED;font-family:"Source Sans 3"}.dropdown-header span{color:#575352;font-family:"Source Sans 3";font-size:14px;font-style:normal;font-weight:400;line-height:20px;}';const d=a;const r=class{constructor(o){e(this,o)}render(){return o("div",{key:"5b074bc6dca271a18713c34a4c4f8cb40a2ea265",class:"dropdown-header"},o("span",{key:"69ed109762bf3ae540d1c5489f5bebbd8107b1cd"},o("slot",{key:"b9fe8b98734bd887f25df7a211b5b5587d7bf994"})))}};r.style=d;export{r as ifx_dropdown_header};
+//# sourceMappingURL=p-fc455450.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["dropdownHeaderCss","IfxDropdownHeaderStyle0","DropdownHeader","render","h","key","class"],"sources":["src/components/dropdown/dropdown-header/dropdown-header.scss?tag=ifx-dropdown-header&encapsulation=shadow","src/components/dropdown/dropdown-header/dropdown-header.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n.dropdown-header {\n  display: flex;\n  padding: 8px 16px;\n  align-items: center;\n  gap: 8px;\n  align-self: stretch;\n  border-bottom: 1px solid tokens.$ifxColorEngineering200;\n  font-family: tokens.$ifxFontFamilyBody;\n\n\n  & span {\n    color: tokens.$ifxColorEngineering500;\n    font-family: tokens.$ifxFontFamilyBody;\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 20px;\n    /* 142.857% */\n  }\n}","// dropdown-separator.tsx\nimport { Component, h } from \"@stencil/core\";\n\n@Component({\n  tag: 'ifx-dropdown-header',\n  styleUrl: 'dropdown-header.scss',\n  shadow: true\n})\n\nexport class DropdownHeader {\n  render() {\n    return (\n      <div class='dropdown-header'>\n        <span>\n          <slot />\n        </span>\n      </div>\n    )\n  }\n}"],"mappings":"2CAAA,MAAMA,EAAoB,6UAC1B,MAAAC,EAAeD,E,MCQFE,EAAc,M,yBACzB,MAAAC,GACE,OACEC,EAAA,OAAAC,IAAA,2CAAKC,MAAM,mBACTF,EAAA,QAAAC,IAAA,4CACED,EAAA,QAAAC,IAAA,8C","ignoreList":[]}

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

@@ -0,0 +1,2 @@
+import{r as e,c as t,h as r,a,g as s}from"./p-e6edf72d.js";const i=':root{font-family:"Source Sans 3", sans-serif}:host{display:flex;flex-direction:column;width:100%}.wrapper__label{color:#1D1D1D;font:400 1rem/1.5rem "Source Sans 3"}:host(.wrapper--disabled) .wrapper__label{color:#575352}.wrapper__textarea{width:100%}.wrapper__textarea.fullWidth{width:100%}.wrapper__textarea.fullWidth textarea{width:100%;box-sizing:border-box}.wrapper__textarea textarea{border:1px solid #8D8786;border-radius:1px;padding:8px 16px;background-color:#FFFFFF;color:#1D1D1D;font:400 1rem/1.5rem "Source Sans 3";transition:all 100ms ease;transition-property:border-color}.wrapper__textarea textarea:hover{border:1px solid #575352}.wrapper__textarea textarea:focus-within{outline:none;border:1px solid #0A8276}:host(.wrapper--error) .wrapper__textarea textarea{border:1px solid #CD002F}:host(.wrapper--disabled) .wrapper__textarea textarea{border:1px solid #575352;background-color:#EEEDED}.wrapper__caption{color:#1D1D1D;font:400 0.75rem/1rem "Source Sans 3"}:host(.wrapper--error) .wrapper__caption{color:#CD002F}:host(.wrapper--disabled) .wrapper__caption{color:#575352}';const o=i;const l=class{constructor(r){e(this,r);this.ifxInput=t(this,"ifxInput",7);if(r.$hostElement$["s-ei"]){this.internals=r.$hostElement$["s-ei"]}else{this.internals=r.$hostElement$.attachInternals();r.$hostElement$["s-ei"]=this.internals}this.inputId=`ifx-textarea-${++h}`;this.disabled=false;this.error=false;this.readOnly=false;this.resize="both";this.wrap="soft";this.fullWidth="false"}async reset(){this.resetTextarea()}handleComponentWidth(){const e=this.el.shadowRoot.querySelector(".wrapper__textarea");const t=this.fullWidth.toLowerCase()==="true";if(t){e.classList.add("fullWidth")}else if(e.classList.contains("fullWidth")){e.classList.remove("fullWidth")}}componentDidRender(){this.handleComponentWidth()}formResetCallback(){this.resetTextarea();this.internals.setFormValue("")}handleOnInput(e){this.value=e.target.value;this.internals.setFormValue(this.value);this.ifxInput.emit(this.value)}resetTextarea(){this.value="";this.internals.setValidity({});this.internals.setFormValue("")}componentWillLoad(){this.internals.setFormValue(this.value)}render(){var e,t;return r(a,{key:"c04bd9f6eb75e14607f6b81fb32065752fd814ac",class:`wrapper--${this.error?"error":""} wrapper--${this.disabled?"disabled":""}`},r("label",{key:"bd270704eaedbd3fb127015dd5d9993839a75135",class:"wrapper__label",htmlFor:this.inputId},(e=this.label)===null||e===void 0?void 0:e.trim()),r("div",{key:"2ff0f414ce2209a5f7bdc9400b2c7c2356da39fd",class:"wrapper__textarea"},r("textarea",{key:"65007882cbf52104ee22af96beacb9d882bbf245","aria-label":"a textarea","aria-value":this.value,"aria-disabled":this.disabled,id:this.inputId,style:{resize:this.resize},name:this.name?this.name:this.inputId,cols:this.cols,rows:this.rows,maxlength:this.maxlength,wrap:this.wrap,disabled:this.disabled,readonly:this.readOnly,placeholder:this.placeholder,value:this.value,onInput:e=>this.handleOnInput(e)})),((t=this.caption)===null||t===void 0?void 0:t.trim())&&r("div",{key:"c44b21fd8eef93920228267d9baf51a12bcf08ea",class:"wrapper__caption"},this.caption.trim()))}static get formAssociated(){return true}get el(){return s(this)}};let h=0;l.style=o;export{l as ifx_textarea};
+//# sourceMappingURL=p-fe55dfcd.entry.js.map

package/dist/infineon-design-system-stencil/{p-7abdbf1f.entry.js.map → p-fe55dfcd.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["textareaCss","IfxTextareaStyle0","TextArea","constructor","hostRef","this","inputId","textareaId","disabled","error","readOnly","resize","wrap","fullWidth","reset","resetTextarea","handleComponentWidth","textareaWrapper","el","shadowRoot","querySelector","isFullWidth","toLowerCase","classList","add","contains","remove","componentDidRender","formResetCallback","internals","setFormValue","handleOnInput","e","value","target","ifxInput","emit","setValidity","componentWillLoad","render","h","Host","key","class","htmlFor","_a","label","trim","id","style","name","cols","rows","maxlength","readonly","placeholder","onInput","_b","caption"],"sources":["src/components/textarea/textarea.scss?tag=ifx-textarea&encapsulation=shadow","src/components/textarea/textarea.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n}\n\n.wrapper__label {\n    color: tokens.$ifxColorBaseBlack;\n    font: tokens.$ifxBodyBody03;\n}\n:host(.wrapper--disabled) .wrapper__label {\n    color: tokens.$ifxColorEngineering500;\n}\n\n.wrapper__textarea {\n    width: 100%;\n    &.fullWidth { \n        width: 100%;\n        & textarea { \n            width: 100%;\n            box-sizing: border-box; \n        }\n    }\n}\n\n.wrapper__textarea textarea {\n    border: 1px solid tokens.$ifxColorEngineering400;\n    border-radius: tokens.$ifxSpace12;\n    padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\n    \n    background-color: tokens.$ifxColorBaseWhite;\n    color: tokens.$ifxColorBaseBlack;\n    font: tokens.$ifxBodyBody03;\n    \n    transition: all 100ms ease;\n    transition-property: border-color;\n\n    &:hover {\n        border: 1px solid tokens.$ifxColorEngineering500;\n    }\n    \n    &:focus-within {\n        outline: none;\n        border: 1px solid tokens.$ifxColorOcean500;\n    }\n}\n\n:host(.wrapper--error) .wrapper__textarea textarea {\n    border: 1px solid tokens.$ifxColorRed500;\n}\n:host(.wrapper--disabled) .wrapper__textarea textarea {\n    border: 1px solid tokens.$ifxColorEngineering500;\n\n    background-color: tokens.$ifxColorEngineering200;\n}\n\n.wrapper__caption {\n    color: tokens.$ifxColorBaseBlack;\n    font: tokens.$ifxBodyBody05;\n}\n:host(.wrapper--error) .wrapper__caption {\n    color: tokens.$ifxColorRed500;\n}\n:host(.wrapper--disabled) .wrapper__caption {\n    color: tokens.$ifxColorEngineering500;\n}","import { h, AttachInternals, Component, Event, EventEmitter, Host, Method, Prop, Element } from \"@stencil/core\"\n\n@Component({\n\tformAssociated: true,\n\tshadow: true,\n\tstyleUrl: 'textarea.scss',\n\ttag: 'ifx-textarea'\n})\n\nexport class TextArea {\n\n\tprivate inputId: string = `ifx-textarea-${++textareaId}`;\n\n\t@AttachInternals() internals: ElementInternals;\n\n\t@Event() ifxInput: EventEmitter<String>;\n\t@Element() el;\n\t@Prop() caption: string;\n\t@Prop() cols: number;\n\t@Prop() disabled: boolean = false;\n\t@Prop() error: boolean = false;\n\t@Prop() label: string;\n\t@Prop() maxlength: number;\n\t@Prop() name: string;\n\t@Prop() placeholder: string;\n\t@Prop() readOnly: boolean = false;\n\t@Prop() resize: 'both' | 'horizontal' | 'vertical' | 'none' = 'both';\n\t@Prop() rows: number;\n\t@Prop({ mutable: true }) value: string;\n\t@Prop() wrap: 'hard' | 'soft' | 'off' = 'soft';\n\t@Prop({ reflect: true }) fullWidth: string = \"false\";\n\n\t@Method()\n\tasync reset() {\n\t\tthis.resetTextarea();\n\t}\n\n\thandleComponentWidth() {\n\t\tconst textareaWrapper = this.el.shadowRoot.querySelector('.wrapper__textarea')\n\t\tconst isFullWidth = this.fullWidth.toLowerCase() === \"true\";\n\t\t\n    if (isFullWidth) {\n\t\t\ttextareaWrapper.classList.add('fullWidth')\n    } else if(textareaWrapper.classList.contains('fullWidth')) {\n\t\t\ttextareaWrapper.classList.remove('fullWidth');\n    }\n  }\n\n\tcomponentDidRender() {\n    this.handleComponentWidth()\n  }\n\t\n\tformResetCallback(): void {\n\t\tthis.resetTextarea();\n\t\tthis.internals.setFormValue(\"\");\n\t}\n\t\n\thandleOnInput(e: InputEvent): void {\n\t\tthis.value = (e.target as HTMLTextAreaElement).value;\n\t\tthis.internals.setFormValue(this.value);\n\t\tthis.ifxInput.emit(this.value);\n\t}\n\n\tresetTextarea() {\n\t\tthis.value = '';\n\t\tthis.internals.setValidity({});\n\t\tthis.internals.setFormValue('');\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.internals.setFormValue(this.value);\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={`wrapper--${this.error ? 'error' : ''} wrapper--${this.disabled ? 'disabled': ''}`}>\n\t\t\t\t<label class='wrapper__label' htmlFor={ this.inputId }>\n\t\t\t\t\t{ this.label?.trim() }\n\t\t\t\t</label>\n\n\t\t\t\t<div class='wrapper__textarea'>\n\t\t\t\t\t<textarea\n\t\t\t\t\t\taria-label='a textarea'\n\t\t\t\t\t\taria-value={ this.value }\n\t\t\t\t\t\taria-disabled={ this.disabled }\n\t\t\t\t\t\tid={ this.inputId }\n\t\t\t\t\t\tstyle={ {resize: this.resize} }\n\t\t\t\t\t\tname={ this.name ? this.name : this.inputId}\n\t\t\t\t\t\tcols={ this.cols }\n\t\t\t\t\t\trows={ this.rows }\n\t\t\t\t\t\tmaxlength={ this.maxlength }\n\t\t\t\t\t\twrap={ this.wrap }\n\t\t\t\t\t\tdisabled={ this.disabled }\n\t\t\t\t\t\treadonly={ this.readOnly }\n\t\t\t\t\t\tplaceholder={ this.placeholder }\n\t\t\t\t\t\tvalue={ this.value }\n\t\t\t\t\t\tonInput={ (e) => this.handleOnInput(e) }\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\n\t\t\t\t{ this.caption?.trim() && (\n\t\t\t\t\t<div class='wrapper__caption'>\n\t\t\t\t\t\t{ this.caption.trim() }\n\t\t\t\t\t</div> \n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n}\n\nlet textareaId = 0;"],"mappings":"2DAAA,MAAMA,EAAc,0mCACpB,MAAAC,EAAeD,E,MCQFE,EAAQ,MAPrB,WAAAC,CAAAC,G,6MASSC,KAAAC,QAAkB,kBAAkBC,IAQpCF,KAAAG,SAAoB,MACpBH,KAAAI,MAAiB,MAKjBJ,KAAAK,SAAoB,MACpBL,KAAAM,OAAsD,OAGtDN,KAAAO,KAAgC,OACfP,KAAAQ,UAAoB,O,CAG7C,WAAMC,GACLT,KAAKU,e,CAGN,oBAAAC,GACC,MAAMC,EAAkBZ,KAAKa,GAAGC,WAAWC,cAAc,sBACzD,MAAMC,EAAchB,KAAKQ,UAAUS,gBAAkB,OAEnD,GAAID,EAAa,CAClBJ,EAAgBM,UAAUC,IAAI,Y,MACtB,GAAGP,EAAgBM,UAAUE,SAAS,aAAc,CAC5DR,EAAgBM,UAAUG,OAAO,Y,EAInC,kBAAAC,GACGtB,KAAKW,sB,CAGR,iBAAAY,GACCvB,KAAKU,gBACLV,KAAKwB,UAAUC,aAAa,G,CAG7B,aAAAC,CAAcC,GACb3B,KAAK4B,MAASD,EAAEE,OAA+BD,MAC/C5B,KAAKwB,UAAUC,aAAazB,KAAK4B,OACjC5B,KAAK8B,SAASC,KAAK/B,KAAK4B,M,CAGzB,aAAAlB,GACCV,KAAK4B,MAAQ,GACb5B,KAAKwB,UAAUQ,YAAY,IAC3BhC,KAAKwB,UAAUC,aAAa,G,CAG7B,iBAAAQ,GACCjC,KAAKwB,UAAUC,aAAazB,KAAK4B,M,CAGlC,MAAAM,G,QACC,OACCC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAO,YAAYtC,KAAKI,MAAQ,QAAU,eAAeJ,KAAKG,SAAW,WAAY,MAC1FgC,EAAA,SAAAE,IAAA,2CAAOC,MAAM,iBAAiBC,QAAUvC,KAAKC,UAC1CuC,EAAAxC,KAAKyC,SAAK,MAAAD,SAAA,SAAAA,EAAEE,QAGfP,EAAA,OAAAE,IAAA,2CAAKC,MAAM,qBACVH,EAAA,YAAAE,IAAA,wDACY,aAAY,aACVrC,KAAK4B,MAAK,gBACP5B,KAAKG,SACrBwC,GAAK3C,KAAKC,QACV2C,MAAQ,CAACtC,OAAQN,KAAKM,QACtBuC,KAAO7C,KAAK6C,KAAO7C,KAAK6C,KAAO7C,KAAKC,QACpC6C,KAAO9C,KAAK8C,KACZC,KAAO/C,KAAK+C,KACZC,UAAYhD,KAAKgD,UACjBzC,KAAOP,KAAKO,KACZJ,SAAWH,KAAKG,SAChB8C,SAAWjD,KAAKK,SAChB6C,YAAclD,KAAKkD,YACnBtB,MAAQ5B,KAAK4B,MACbuB,QAAWxB,GAAM3B,KAAK0B,cAAcC,QAIpCyB,EAAApD,KAAKqD,WAAO,MAAAD,SAAA,SAAAA,EAAEV,SACfP,EAAA,OAAAE,IAAA,2CAAKC,MAAM,oBACRtC,KAAKqD,QAAQX,Q,mEAQrB,IAAIxC,EAAa,E","ignoreList":[]}
+{"version":3,"names":["textareaCss","IfxTextareaStyle0","TextArea","constructor","hostRef","this","inputId","textareaId","disabled","error","readOnly","resize","wrap","fullWidth","reset","resetTextarea","handleComponentWidth","textareaWrapper","el","shadowRoot","querySelector","isFullWidth","toLowerCase","classList","add","contains","remove","componentDidRender","formResetCallback","internals","setFormValue","handleOnInput","e","value","target","ifxInput","emit","setValidity","componentWillLoad","render","h","Host","key","class","htmlFor","_a","label","trim","id","style","name","cols","rows","maxlength","readonly","placeholder","onInput","_b","caption"],"sources":["src/components/textarea/textarea.scss?tag=ifx-textarea&encapsulation=shadow","src/components/textarea/textarea.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n}\n\n.wrapper__label {\n    color: tokens.$ifxColorBaseBlack;\n    font: tokens.$ifxBodyBody03;\n}\n:host(.wrapper--disabled) .wrapper__label {\n    color: tokens.$ifxColorEngineering500;\n}\n\n.wrapper__textarea {\n    width: 100%;\n    &.fullWidth { \n        width: 100%;\n        & textarea { \n            width: 100%;\n            box-sizing: border-box; \n        }\n    }\n}\n\n.wrapper__textarea textarea {\n    border: 1px solid tokens.$ifxColorEngineering400;\n    border-radius: tokens.$ifxSpace12;\n    padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\n    \n    background-color: tokens.$ifxColorBaseWhite;\n    color: tokens.$ifxColorBaseBlack;\n    font: tokens.$ifxBodyBody03;\n    \n    transition: all 100ms ease;\n    transition-property: border-color;\n\n    &:hover {\n        border: 1px solid tokens.$ifxColorEngineering500;\n    }\n    \n    &:focus-within {\n        outline: none;\n        border: 1px solid tokens.$ifxColorOcean500;\n    }\n}\n\n:host(.wrapper--error) .wrapper__textarea textarea {\n    border: 1px solid tokens.$ifxColorRed500;\n}\n:host(.wrapper--disabled) .wrapper__textarea textarea {\n    border: 1px solid tokens.$ifxColorEngineering500;\n\n    background-color: tokens.$ifxColorEngineering200;\n}\n\n.wrapper__caption {\n    color: tokens.$ifxColorBaseBlack;\n    font: tokens.$ifxBodyBody05;\n}\n:host(.wrapper--error) .wrapper__caption {\n    color: tokens.$ifxColorRed500;\n}\n:host(.wrapper--disabled) .wrapper__caption {\n    color: tokens.$ifxColorEngineering500;\n}","import { h, AttachInternals, Component, Event, EventEmitter, Host, Method, Prop, Element } from \"@stencil/core\"\n\n@Component({\n\tformAssociated: true,\n\tshadow: true,\n\tstyleUrl: 'textarea.scss',\n\ttag: 'ifx-textarea'\n})\n\nexport class TextArea {\n\n\tprivate inputId: string = `ifx-textarea-${++textareaId}`;\n\n\t@AttachInternals() internals: ElementInternals;\n\n\t@Event() ifxInput: EventEmitter<String>;\n\t@Element() el;\n\t@Prop() caption: string;\n\t@Prop() cols: number;\n\t@Prop() disabled: boolean = false;\n\t@Prop() error: boolean = false;\n\t@Prop() label: string;\n\t@Prop() maxlength: number;\n\t@Prop() name: string;\n\t@Prop() placeholder: string;\n\t@Prop() readOnly: boolean = false;\n\t@Prop() resize: 'both' | 'horizontal' | 'vertical' | 'none' = 'both';\n\t@Prop() rows: number;\n\t@Prop({ mutable: true }) value: string;\n\t@Prop() wrap: 'hard' | 'soft' | 'off' = 'soft';\n\t@Prop({ reflect: true }) fullWidth: string = \"false\";\n\n\t@Method()\n\tasync reset() {\n\t\tthis.resetTextarea();\n\t}\n\n\thandleComponentWidth() {\n\t\tconst textareaWrapper = this.el.shadowRoot.querySelector('.wrapper__textarea')\n\t\tconst isFullWidth = this.fullWidth.toLowerCase() === \"true\";\n\t\t\n    if (isFullWidth) {\n\t\t\ttextareaWrapper.classList.add('fullWidth')\n    } else if(textareaWrapper.classList.contains('fullWidth')) {\n\t\t\ttextareaWrapper.classList.remove('fullWidth');\n    }\n  }\n\n\tcomponentDidRender() {\n    this.handleComponentWidth()\n  }\n\t\n\tformResetCallback(): void {\n\t\tthis.resetTextarea();\n\t\tthis.internals.setFormValue(\"\");\n\t}\n\t\n\thandleOnInput(e: InputEvent): void {\n\t\tthis.value = (e.target as HTMLTextAreaElement).value;\n\t\tthis.internals.setFormValue(this.value);\n\t\tthis.ifxInput.emit(this.value);\n\t}\n\n\tresetTextarea() {\n\t\tthis.value = '';\n\t\tthis.internals.setValidity({});\n\t\tthis.internals.setFormValue('');\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.internals.setFormValue(this.value);\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={`wrapper--${this.error ? 'error' : ''} wrapper--${this.disabled ? 'disabled': ''}`}>\n\t\t\t\t<label class='wrapper__label' htmlFor={ this.inputId }>\n\t\t\t\t\t{ this.label?.trim() }\n\t\t\t\t</label>\n\n\t\t\t\t<div class='wrapper__textarea'>\n\t\t\t\t\t<textarea\n\t\t\t\t\t\taria-label='a textarea'\n\t\t\t\t\t\taria-value={ this.value }\n\t\t\t\t\t\taria-disabled={ this.disabled }\n\t\t\t\t\t\tid={ this.inputId }\n\t\t\t\t\t\tstyle={ {resize: this.resize} }\n\t\t\t\t\t\tname={ this.name ? this.name : this.inputId}\n\t\t\t\t\t\tcols={ this.cols }\n\t\t\t\t\t\trows={ this.rows }\n\t\t\t\t\t\tmaxlength={ this.maxlength }\n\t\t\t\t\t\twrap={ this.wrap }\n\t\t\t\t\t\tdisabled={ this.disabled }\n\t\t\t\t\t\treadonly={ this.readOnly }\n\t\t\t\t\t\tplaceholder={ this.placeholder }\n\t\t\t\t\t\tvalue={ this.value }\n\t\t\t\t\t\tonInput={ (e) => this.handleOnInput(e) }\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\n\t\t\t\t{ this.caption?.trim() && (\n\t\t\t\t\t<div class='wrapper__caption'>\n\t\t\t\t\t\t{ this.caption.trim() }\n\t\t\t\t\t</div> \n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n}\n\nlet textareaId = 0;"],"mappings":"2DAAA,MAAMA,EAAc,ikCACpB,MAAAC,EAAeD,E,MCQFE,EAAQ,MAPrB,WAAAC,CAAAC,G,6MASSC,KAAAC,QAAkB,kBAAkBC,IAQpCF,KAAAG,SAAoB,MACpBH,KAAAI,MAAiB,MAKjBJ,KAAAK,SAAoB,MACpBL,KAAAM,OAAsD,OAGtDN,KAAAO,KAAgC,OACfP,KAAAQ,UAAoB,O,CAG7C,WAAMC,GACLT,KAAKU,e,CAGN,oBAAAC,GACC,MAAMC,EAAkBZ,KAAKa,GAAGC,WAAWC,cAAc,sBACzD,MAAMC,EAAchB,KAAKQ,UAAUS,gBAAkB,OAEnD,GAAID,EAAa,CAClBJ,EAAgBM,UAAUC,IAAI,Y,MACtB,GAAGP,EAAgBM,UAAUE,SAAS,aAAc,CAC5DR,EAAgBM,UAAUG,OAAO,Y,EAInC,kBAAAC,GACGtB,KAAKW,sB,CAGR,iBAAAY,GACCvB,KAAKU,gBACLV,KAAKwB,UAAUC,aAAa,G,CAG7B,aAAAC,CAAcC,GACb3B,KAAK4B,MAASD,EAAEE,OAA+BD,MAC/C5B,KAAKwB,UAAUC,aAAazB,KAAK4B,OACjC5B,KAAK8B,SAASC,KAAK/B,KAAK4B,M,CAGzB,aAAAlB,GACCV,KAAK4B,MAAQ,GACb5B,KAAKwB,UAAUQ,YAAY,IAC3BhC,KAAKwB,UAAUC,aAAa,G,CAG7B,iBAAAQ,GACCjC,KAAKwB,UAAUC,aAAazB,KAAK4B,M,CAGlC,MAAAM,G,QACC,OACCC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAO,YAAYtC,KAAKI,MAAQ,QAAU,eAAeJ,KAAKG,SAAW,WAAY,MAC1FgC,EAAA,SAAAE,IAAA,2CAAOC,MAAM,iBAAiBC,QAAUvC,KAAKC,UAC1CuC,EAAAxC,KAAKyC,SAAK,MAAAD,SAAA,SAAAA,EAAEE,QAGfP,EAAA,OAAAE,IAAA,2CAAKC,MAAM,qBACVH,EAAA,YAAAE,IAAA,wDACY,aAAY,aACVrC,KAAK4B,MAAK,gBACP5B,KAAKG,SACrBwC,GAAK3C,KAAKC,QACV2C,MAAQ,CAACtC,OAAQN,KAAKM,QACtBuC,KAAO7C,KAAK6C,KAAO7C,KAAK6C,KAAO7C,KAAKC,QACpC6C,KAAO9C,KAAK8C,KACZC,KAAO/C,KAAK+C,KACZC,UAAYhD,KAAKgD,UACjBzC,KAAOP,KAAKO,KACZJ,SAAWH,KAAKG,SAChB8C,SAAWjD,KAAKK,SAChB6C,YAAclD,KAAKkD,YACnBtB,MAAQ5B,KAAK4B,MACbuB,QAAWxB,GAAM3B,KAAK0B,cAAcC,QAIpCyB,EAAApD,KAAKqD,WAAO,MAAAD,SAAA,SAAAA,EAAEV,SACfP,EAAA,OAAAE,IAAA,2CAAKC,MAAM,oBACRtC,KAAKqD,QAAQX,Q,mEAQrB,IAAIxC,EAAa,E","ignoreList":[]}

package/dist/types/components/link/link.d.ts

@@ -5,13 +5,11 @@ export declare class Link {
     size: string;
     disabled: boolean;
     download: string;
-    AriaLabel: string;
     internalHref: string;
     internalTarget: string;
     internalVariant: string;
     setInternalStates(): void;
     componentWillRender(): void;
-    handleKeyDown(event: KeyboardEvent): void;
     render(): any;
     getSizeClass(): "" | "medium" | "large" | "small" | "extraLarge";
     getVariantClass(): "bold" | "title" | "menu" | "underlined";

package/dist/types/components/link/link.stories.d.ts

@@ -9,7 +9,6 @@ declare const _default: {
         disabled: boolean;
         variant: string;
         download: string;
-        AriaLabel: string;
     };
     argTypes: {
         label: {
@@ -19,17 +18,6 @@ declare const _default: {
                 category: string;
             };
         };
-        AriaLabel: {
-            name: string;
-            description: string;
-            control: string;
-            table: {
-                category: string;
-                type: {
-                    summary: string;
-                };
-            };
-        };
         href: {
             description: string;
             table: {

package/dist/types/components.d.ts

@@ -218,7 +218,6 @@ export namespace Components {
     interface IfxIconsPreview {
     }
     interface IfxLink {
-        "AriaLabel": string;
         "disabled": boolean;
         "download": string;
         "href": string;
@@ -1975,7 +1974,6 @@ declare namespace LocalJSX {
     interface IfxIconsPreview {
     }
     interface IfxLink {
-        "AriaLabel"?: string;
         "disabled"?: boolean;
         "download"?: string;
         "href"?: string;

package/dist/types/global/font-import.d.ts

@@ -0,0 +1 @@
+import '@infineon/design-system-tokens/dist/fonts/ifx-fonts.css';

package/dist/types/index.d.ts

@@ -1 +1,2 @@
+import './global/font-import';
 export * from './components';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@infineon/infineon-design-system-stencil",
-  "version": "33.1.1--canary.1827.0eabedc97f4e514129bb536649b389971d5464b1.0",
+  "version": "33.1.1",
   "private": false,
   "description": "Infineon design system Stencil web components",
   "homepage": "https://infineon.github.io/infineon-design-system-stencil",

package/dist/components/p-107fafa0.js.map

@@ -1 +0,0 @@
-{"file":"p-107fafa0.js","mappings":"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","names":[],"sources":["src/components/pagination/pagination.scss?tag=ifx-pagination&encapsulation=shadow","src/components/pagination/pagination.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: inline-flex;\n}\n\n.container {\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  gap: 32px;\n  font-family: var(--ifx-font-family);\n\n\n  & .items__per-page-wrapper {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n\n    & .items__per-page-label {\n      color: #1D1D1D;\n      font-size: 14px;\n      font-style: normal;\n      font-weight: 600;\n      line-height: 20px;\n    }\n\n    & .items__per-page-field {\n      display: flex;\n      flex-direction: column;\n      align-items: flex-start;\n\n      & ifx-select {\n        width: 92px;\n      }\n    }\n  }\n\n  & .items__total-wrapper {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    gap: 12px;\n\n    & .items__total-button {\n      display: flex;\n      width: 40px;\n      height: 40px;\n      justify-content: center;\n      align-items: center;\n      border-radius: 100px;\n      border: 1px solid #BFBBBB;\n      background: #FFF;\n    }\n\n    & .page__numbers-wrapper {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      gap: 12px;\n\n      & .page__number-item {\n        display: flex;\n        padding: 6px;\n        flex-direction: column;\n        justify-content: center;\n        align-items: center;\n        gap: 10px;\n        border-radius: 100px;\n\n        &.active {\n          background-color: #0A8276;\n\n          & span {\n            color: #fff;\n          }\n        }\n\n        &:hover {\n          cursor: pointer;\n        }\n\n        &:hover:not(.active) {\n          background-color: #ddd;\n\n        }\n\n        &:active:not(.active) {\n          background-color: #575352;\n        }\n\n        & span {\n          display: flex;\n          width: 16px;\n          height: 16px;\n          flex-direction: column;\n          justify-content: center;\n          color: #1D1D1D;\n          text-align: center;\n          font-size: 13px;\n          font-style: normal;\n          font-weight: 400;\n          line-height: 20px;\n        }\n      }\n    }\n  }\n}\n\n\n.pagination {\n  display: flex;\n\n  & ifx-icon-button:first-of-type {\n    margin-right: 12px;\n  }\n\n  & ifx-icon-button:last-of-type {\n    margin-left: 12px;\n  }\n}\n\na {\n  padding: 8px;\n  border-radius: 100px;\n}\n\nol {\n  list-style-type: none;\n  padding: 0;\n  margin: 0;\n  display: inline-flex;\n  align-items: center;\n  gap: 12px;\n}\n\nli {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  border-radius: 100px;\n\n  &:hover:not(.active) {\n    & a {\n      background-color: #EEEDED;\n    }\n  }\n\n  &:active:not(.active) {\n    & a {\n      background-color: #575352;\n      color: #fff;\n    }\n  }\n\n  &.active {\n    background-color: #0A8276;\n\n    & a {\n      color: #fff;\n    }\n  }\n\n  &:hover {\n    cursor: pointer;\n  }\n\n  & a {\n    text-decoration: none;\n    display: flex;\n    width: 16px;\n    height: 16px;\n    flex-direction: column;\n    justify-content: center;\n    color: #1D1D1D;\n    text-align: center;\n    font-size: 13px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 20px;\n    align-items: center;\n  }\n}\n\n.prev,\n.next {\n  &.disabled {\n    cursor: default;\n\n    &:hover {\n      cursor: default;\n      text-decoration: none;\n    }\n  }\n}\n\n.prev {\n  margin-right: 2.5px;\n}\n\n.next {\n  margin-left: 2.5px;\n}\n\n\n@mixin ellipsis($before: true) {\n  content: \"\\2026\";\n  font-size: 13px;\n  display: inline-block;\n\n  @if($before) {\n    margin-right: 6px;\n  }\n\n  @else {\n    margin-left: 6px;\n  }\n}\n\n\n// @media(max-width:460px) {\n//   li {\n\n//     &:first-child,\n//     &.active,\n//     &.active-sibling:nth-last-child(2), // Show second to last child if the last one is active\n//     &:last-child {\n//       //display: inline-block !important;\n//       display: inline-flex !important;\n//       flex-direction: row;\n//     }\n\n//     $how-many-on-ends: 3; // 1,2,3,...,10 || 1,...,8,9,10\n//     // There are >= 5 pages\n//     &:first-child:nth-last-child(n+6) {\n\n//       &~li {\n//         // Start out with all siblings hidden\n//         display: none;\n\n//         // Show the last children in the list by default\n//         &:nth-last-child(-n+#{$how-many-on-ends}) {\n//           //display: inline-block;\n//           display: inline-flex;\n//           flex-direction: row;\n\n//         }\n\n//         // The child at the beginning of the last group shows ellipsis for the group\n//         &:nth-last-child(#{$how-many-on-ends}) {\n//           &:before {\n//             @include ellipsis(true);\n//           }\n//         }\n\n//         // The very beginning elements do not need to show ellipsis\n//         // The very end elements do not need to show ellipsis\n//       }\n\n\n//       &.active,\n//        &~li.active {\n\n//          // Show ellipsis before and after the active element\n//          &:before {\n//            @include ellipsis(true);\n//          }\n//          &:after {\n//            @include ellipsis(false);\n//          }\n\n\n//          // If the active element is in the first or last group, don't show ellipsis (siblings will take care of it)\n//          &:nth-child(-n+#{$how-many-on-ends - 1}),\n//          &:nth-last-child(-n+#{$how-many-on-ends - 1}) {\n//            &:before, &:after {\n//              display: none;\n//            }\n//          }\n\n//          // Hide the last group if \"active\" comes before them\n//          &~li:nth-last-child(-n+#{$how-many-on-ends}) {\n//            display: none;\n//          }\n\n//          // Show the first group together if \"active\" comes before them\n//          &~li:nth-child(-n+#{$how-many-on-ends}) {\n//            //display: inline-block;\n//            display: inline-flex;\n//            flex-direction: row;\n//          }\n\n//          // If \"active\" is before the last member in the group, don't show ellipsis\n//          &~li:nth-child(-n+#{$how-many-on-ends - 1}) {\n//             &:after {\n//               display: none;\n//             }\n//          }\n\n\n//         // The child at the end of the first group shows ellipsis for the group\n//         &~li:nth-child(#{$how-many-on-ends}) {\n//           &:after {\n//             @include ellipsis(false);\n//           }\n//         }\n//       }\n//     }\n//   }\n// }\n\n@media (min-width: 400px) {\n  li {\n\n    &:first-child,\n    &.active-sibling,\n    &.active,\n    &.active+li,\n    &:last-child {\n      //display: inline-block!important;\n      display: inline-flex !important;\n      flex-direction: row;\n    }\n\n    // There are >= 7 pages\n    &:first-child:nth-last-child(n+8) {\n      $how-many-on-ends: 5; // 1,2,3,4,5,...,10 || 1,...6,7,8,9,10\n\n      &~li {\n        // Start out with all siblings hidden\n        display: none;\n\n        // Show ellipsis before the previous one\n        &.active-sibling:before {\n          @include ellipsis(true);\n        }\n\n        // Show ellipsis after the next one\n        &.active+li:after {\n          @include ellipsis(false);\n        }\n\n        // Show the last children in the list by default\n        &:nth-last-child(-n+#{$how-many-on-ends}) {\n          //display: inline-block;\n          display: inline-flex;\n          flex-direction: row;\n        }\n\n        // The child at the beginning of the last group shows ellipsis for the group\n        &:nth-last-child(#{$how-many-on-ends}) {\n          &:before {\n            @include ellipsis(true);\n          }\n        }\n\n        // The very beginning elements do not need to show ellipsis\n        &:nth-child(-n+#{$how-many-on-ends - 3}),\n        // The very end elements do not need to show ellipsis\n        &:nth-last-child(-n+#{$how-many-on-ends - 3}),\n        // Even if it's a sibling to \"active\"\n        &.active-sibling:nth-last-child(-n+#{$how-many-on-ends - 1}) {\n\n          &:before,\n          &:after {\n            display: none !important;\n          }\n        }\n      }\n\n      &.active,\n      &~li.active {\n\n        // Hide the last group if \"active\" comes before them\n        &~li:nth-last-child(-n+#{$how-many-on-ends}) {\n          display: none;\n\n          // If there is overlap, the element will show, but hide it's ellipsis\n          &:before {\n            display: none;\n          }\n        }\n\n        // Show the first group together if \"active\" comes before them\n        &~li:nth-child(-n+#{$how-many-on-ends}) {\n          //display: inline-block;\n          display: inline-flex !important;\n          flex-direction: row;\n        }\n\n        // If \"active\" is before the last member in the group, don't show ellipsis\n        &~li:nth-child(-n+#{$how-many-on-ends - 1}) {\n          &:after {\n            display: none;\n          }\n        }\n\n\n        // The child at the end of the first group shows ellipsis for the group\n        &~li:nth-child(#{$how-many-on-ends}) {\n          &:after {\n            @include ellipsis(false);\n          }\n        }\n\n        // \"active\" should never show ellipsis\n        &:before,\n        &:after {\n          display: none;\n        }\n      }\n    }\n  }\n}","import { Component, h, Element, Event, EventEmitter, Prop, State, Listen } from '@stencil/core';\n \n\n@Component({\n  tag: 'ifx-pagination',\n  styleUrl: 'pagination.scss',\n  shadow: true\n})\nexport class Pagination {\n  @Element() el;\n  @Event() ifxPageChange: EventEmitter;\n  @Prop() currentPage: number = 0;\n  @State() internalPage: number = 1;\n  @State() internalItemsPerPage: number = 10;\n  @State() numberOfPages: number[] = [];\n  @Prop() total: number = 1;\n  @Prop() itemsPerPage: any[] | string;\n  @State() filteredItemsPerPage: any[]\n\n  private CLASS_DISABLED = \"disabled\"\n  private CLASS_ACTIVE = \"active\"\n  private CLASS_SIBLING_ACTIVE = \"active-sibling\"\n  private DATA_KEY = \"pagination\";\n\n  @Listen('ifxSelect')\n  setItemsPerPage(e) {\n    if(e.detail) {\n      this.internalItemsPerPage = parseInt(e.detail.label)\n    } else { \n      this.internalItemsPerPage = 10;\n    }\n  }\n\n  componentDidLoad() {\n    this.calculateVisiblePageIndices()\n    var paginationElement = this.el.shadowRoot.querySelector(\".pagination\");\n    let leftArrow = paginationElement.querySelector('.prev')\n    this.navigateSinglePage(leftArrow, true)\n\n  }\n\n  calculateNumberOfPages() {\n    if (isNaN(this.currentPage)) {\n      this.currentPage = 1;\n    }\n    const total = this.total <= this.internalItemsPerPage ? this.internalItemsPerPage : this.total;\n    const itemsPerPage = this.internalItemsPerPage;\n    const totalPageNumber = Math.ceil(total / itemsPerPage);\n\n    if (this.currentPage <= 0) {\n      this.internalPage = 1;\n    } else if (this.currentPage > totalPageNumber) {\n      this.internalPage = totalPageNumber;\n    } else this.internalPage = this.currentPage;\n\n    this.numberOfPages = Array.from({ length: totalPageNumber }, (_, index) => index + 1);\n  }\n\n  filterOptionsArray() { \n    let obj: any[] = Array.isArray(this.itemsPerPage) ? this.itemsPerPage : JSON.parse(this.itemsPerPage);\n    for(let i = 0; i < obj.length; i++) { \n      let item = obj[i];\n      if(!item.label) { \n        item.label = item.value;\n      }\n    }\n    this.filteredItemsPerPage = obj;\n  }\n\n  componentWillLoad() {\n    this.calculateNumberOfPages()\n    this.filterOptionsArray()\n  }\n\n  componentDidUpdate() {\n    var paginationElement = this.el.shadowRoot.querySelector(\".pagination\");\n    var listItems = paginationElement.querySelectorAll(\"li\");\n    this.addEventListenersToPageItems(listItems, paginationElement)\n\n    if (paginationElement.dataset[this.DATA_KEY] < this.numberOfPages) {\n      paginationElement.dataset[this.DATA_KEY] = paginationElement.dataset[this.DATA_KEY];\n    } else paginationElement.dataset[this.DATA_KEY] = 0;\n\n    this.changePage(paginationElement, false)\n  }\n\n  componentWillUpdate() {\n    this.calculateNumberOfPages()\n  }\n\n  handleEventEmission(currActive) {\n    let currentPage = currActive + 1;\n    let totalPages = this.numberOfPages.length;\n    let prevPage = currActive === 0 ? null : currActive;\n    let nextPage = currActive + 2 > totalPages ? null : currActive + 2;\n    let itemsPerPage = this.internalItemsPerPage\n    this.ifxPageChange.emit({ currentPage, totalPages, prevPage, nextPage, itemsPerPage })\n  }\n\n  addEventListenersToPageItems(listItems, paginationContainer) {\n    listItems.forEach((item) => {\n      item.addEventListener(\"click\", (e) => {\n        var parent = paginationContainer;\n        let listItems = parent.querySelectorAll(\"li\");\n        parent.dataset[this.DATA_KEY] = Array.from(listItems).indexOf(e.currentTarget)\n        this.changePage(parent, false)\n      });\n    });\n  }\n\n  initPagination(paginationContainer) {\n    var listItems = paginationContainer.querySelectorAll(\"li\");\n\n    paginationContainer.dataset[this.DATA_KEY] = Array.from(listItems).indexOf(paginationContainer.querySelector(\".active\"));\n\n    paginationContainer.querySelector(\".prev\").addEventListener(\"click\", (e) => this.navigateSinglePage(e, false));\n    paginationContainer.querySelector(\".next\").addEventListener(\"click\", (e) => this.navigateSinglePage(e, false));\n\n    this.addEventListenersToPageItems(listItems, paginationContainer)\n  }\n\n  navigateSinglePage(e, initialValue) {\n    let el = e;\n    if (typeof e.target === 'object') {\n      el = e.target\n    }\n\n    if (!el.classList.contains(this.CLASS_DISABLED)) {\n      var parent = el.closest(\".pagination\");\n      var currActive = parseInt(parent.dataset[this.DATA_KEY], 10);\n      currActive += 1 * (el.classList.contains(\"prev\") ? -1 : 1);\n\n      if (currActive === -1) {\n        currActive = 0;\n      }\n\n      parent.dataset[this.DATA_KEY] = currActive;\n      this.changePage(parent, initialValue)\n    }\n  }\n\n  changePage(pagination, initialValue) {\n    const paginationContainer = pagination;\n    var listItems = paginationContainer.querySelectorAll(\"li\");\n    var currActive = parseInt(paginationContainer.dataset[this.DATA_KEY], 10);\n\n    listItems.forEach((item) => {\n      item.classList.remove(this.CLASS_ACTIVE);\n      item.classList.remove(this.CLASS_SIBLING_ACTIVE);\n    });\n\n    if (initialValue && this.internalPage > 1) {\n      currActive = Math.floor(this.internalPage - 1);\n      paginationContainer.dataset[this.DATA_KEY] = currActive;\n    }\n\n    this.handleEventEmission(currActive)\n\n    listItems[currActive].classList.add(this.CLASS_ACTIVE);\n\n    if (currActive === 0) {\n      paginationContainer.querySelector(\".prev\").classList.add(this.CLASS_DISABLED);\n      paginationContainer.querySelector(\".prev\").disabled = true;\n\n    } else {\n      listItems[currActive - 1].classList.add(this.CLASS_SIBLING_ACTIVE);\n      paginationContainer.querySelector(\".prev\").classList.remove(this.CLASS_DISABLED);\n      paginationContainer.querySelector(\".prev\").disabled = false;\n    }\n\n    if (currActive === (listItems.length - 1)) {\n      paginationContainer.querySelector(\".next\").classList.add(this.CLASS_DISABLED);\n      paginationContainer.querySelector(\".next\").disabled = true;\n\n    } else {\n      paginationContainer.querySelector(\".next\").classList.remove(this.CLASS_DISABLED);\n      paginationContainer.querySelector(\".next\").disabled = false;\n    }\n  }\n\n  calculateVisiblePageIndices() {\n    var paginationElement = this.el.shadowRoot.querySelector(\".pagination\");\n    this.initPagination(paginationElement)\n  }\n\n  render() {\n    return (\n      <div aria-label='a pagination' aria-value={this.currentPage} class=\"container\">\n        <div class='items__per-page-wrapper'>\n          <div class='items__per-page-label'>Results per Page</div>\n          <div class='items__per-page-field'>\n            <ifx-select\n              value='undefined'\n              size='s'\n              placeholder='false'\n              show-search='false'\n              search-placeholder-value='Search...'\n              disabled={false}\n              error={false}\n              error-message='Error'\n              label=''\n              placeholder-value='Placeholder'\n              options={this.filteredItemsPerPage} >\n            </ifx-select>\n          </div>\n        </div>\n        <div class='items__total-wrapper'>\n          <div class='page__numbers-wrapper'>\n            <div class=\"pagination\">\n              <ifx-icon-button variant='secondary' class=\"prev\" color='primary' icon='arrow-left-24'></ifx-icon-button>\n              <ol>\n                {this.numberOfPages.map((item) =>\n                  <li class={`${this.internalPage === item ? 'active' : \"\"}`}><a href={undefined}>{item}</a></li>)}\n              </ol>\n              <ifx-icon-button class=\"next\" variant='secondary' color='primary' icon='arrow-right-24'></ifx-icon-button>\n            </div>\n          </div>\n        </div>\n      </div>\n    );\n  }\n}"],"version":3}

package/dist/components/p-19417832.js.map

@@ -1 +0,0 @@
-{"file":"p-19417832.js","mappings":";;;;AAAA,MAAM,eAAe,GAAG,+pDAA+pD,CAAC;AACxrD,8BAAe,eAAe;;MCQjB,YAAY;IALzB;;;;QAOU,YAAO,GAAwB,SAAS,CAAC;QAGzC,eAAU,GAAW,QAAQ,CAAC;KA0CvC;IAvCS,YAAY;QAClB,QAAQ,IAAI,CAAC,OAAO;YAClB,KAAK,SAAS;gBACZ,OAAO,oCAAoC,CAAC;YAC9C,KAAK,QAAQ;gBACX,OAAO,mCAAmC,CAAC;YAC7C,KAAK,OAAO;gBACV,OAAO,kCAAkC,CAAC;YAC5C,KAAK,SAAS;gBACZ,OAAO,oCAAoC,CAAC;YAC9C;gBACE,OAAO,oCAAoC,CAAC;SAC/C;KACF;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAE,4BAA4B,GAAG,IAAI,CAAC,YAAY,EAAE,IAC5D,4DAAK,KAAK,EAAC,wBAAwB,IACjC,iEAAU,IAAI,EAAE,IAAI,CAAC,IAAI,GAAa,CAClC,EACN,4DAAK,KAAK,EAAC,wBAAwB,IACjC,4DAAK,KAAK,EAAC,wBAAwB,IACjC,8DAAO,CACH,EACJ,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ;YAChC,4DAAK,KAAK,EAAC,wBAAwB,IACjC,iEAAU,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,CAAC,UAAU,IACnD,IAAI,CAAC,QAAQ,EAAC,iEAAU,IAAI,EAAC,gBAAgB,GACrC,CACA,CACP,CAEF,CACF,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/notification/notification.scss?tag=ifx-notification&encapsulation=shadow","src/components/notification/notification.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n.ifx-notification__wrapper {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\n\n  background-color: tokens.$ifxColorBaseWhite;\n  font-family: var(--ifx-font-family);\n  color: tokens.$ifxColorBaseBlack;\n\n  border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorEngineering200;\n\n  &.ifx-notification__wrapper--success {\n    border-left: tokens.$ifxBorderWidth50 solid tokens.$ifxColorGreen500;\n\n    & .ifx-notification__icon {\n      color: tokens.$ifxColorGreen500;\n    }\n  }\n\n  &.ifx-notification__wrapper--locked {\n    border-left: tokens.$ifxBorderWidth50 solid tokens.$ifxColorOrange500;\n\n    & .ifx-notification__icon {\n      color: tokens.$ifxColorOrange500;\n    }\n  }\n\n  &.ifx-notification__wrapper--error {\n    border-left: tokens.$ifxBorderWidth50 solid tokens.$ifxColorRed500;\n\n    & .ifx-notification__icon {\n      color: tokens.$ifxColorRed500;\n    }\n  }\n\n  &.ifx-notification__wrapper--neutral{\n    border-left: tokens.$ifxBorderWidth50 solid tokens.$ifxColorOcean500;\n\n    & .ifx-notification__icon {\n      color: tokens.$ifxColorOcean500;\n    }\n  }\n\n  & .ifx-notification__icon {\n    margin-right: tokens.$ifxSpace100;\n    display: flex;\n    align-self: center;\n  }\n\n  & .ifx-notification__body {\n    display: flex;\n    flex-direction: row;\n    flex-grow: 1;\n    font-size: tokens.$ifxFontSizeS;\n\n    & .ifx-notification__slot {\n      flex-grow: 1;\n      display: inline-flex;\n      align-items: center;\n    }\n  }\n\n  & .ifx-notification__link {\n    font-size: tokens.$ifxFontSizeS;\n  }\n\n  @media (max-width: tokens.$ifxBreakpointXs) {\n    & .ifx-notification__icon {\n      align-self: flex-start;\n    }\n\n    & .ifx-notification__body {\n      flex-direction: column;\n    }\n\n    & .ifx-notification__link {\n      margin-top: tokens.$ifxSpace100;\n    }\n  }\n}","import { Component, h, Host, Prop } from '@stencil/core';\n \nexport type NotificationVariant = 'success' | 'locked' | 'error' | 'neutral';\n\n@Component({\n  tag: 'ifx-notification',\n  styleUrl: 'notification.scss',\n  shadow: true\n})\nexport class Notification {\n  @Prop() icon: string;\n  @Prop() variant: NotificationVariant = 'success';\n  @Prop() linkText: string; \n  @Prop() linkHref: string;\n  @Prop() linkTarget: string = '_blank';\n\n\n  private getClassName(): string {\n    switch (this.variant) {\n      case 'success':\n        return 'ifx-notification__wrapper--success';\n      case 'locked':\n        return 'ifx-notification__wrapper--locked';\n      case 'error':\n        return 'ifx-notification__wrapper--error';\n      case 'neutral':\n        return 'ifx-notification__wrapper--neutral';\n      default:\n        return 'ifx-notification__wrapper--success';\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={\"ifx-notification__wrapper \" + this.getClassName()}>\n          <div class=\"ifx-notification__icon\">\n            <ifx-icon icon={this.icon}></ifx-icon>\n          </div>\n          <div class=\"ifx-notification__body\">\n            <div class=\"ifx-notification__slot\">\n              <slot/>\n            </div>\n            { this.linkText && this.linkHref && \n            <div class=\"ifx-notification__link\">\n              <ifx-link href={this.linkHref} target={this.linkTarget}>\n                {this.linkText}<ifx-icon icon=\"arrow-right-16\">\n              </ifx-icon>\n              </ifx-link>\n            </div>\n          }\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}"],"version":3}

package/dist/components/p-2d148a20.js.map

@@ -1 +0,0 @@
-{"file":"p-2d148a20.js","mappings":"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","names":[],"sources":["src/components/link/link.scss?tag=ifx-link&encapsulation=shadow","src/components/link/link.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: inline-flex;\n}\n\n.link {\n  display: inline-flex;\n  align-items: center;\n  font-weight: 400;\n  font-size: tokens.$ifxFontSizeM;\n  text-decoration: none;\n  color: tokens.$ifxColorOcean500;\n  gap: tokens.$ifxSpace100;\n  line-height: 1.6;\n  font-family: var(--ifx-font-family);\n\n  &:hover { \n    cursor: pointer;\n  }\n\n  &:focus {\n    outline-width: 2px;\n    outline-style: solid;\n    outline-color: #0A8276;\n    outline-offset: 4px;\n    border-radius: 3px;\n  }\n\n  &.bold {\n    font-weight: tokens.$ifxFontWeightSemibold;\n\n    &:hover {\n      text-decoration: underline;\n    }\n\n    &:active {\n      color: #08665C;\n      font-style: normal;\n      font-weight: 600;\n      text-decoration: underline;\n    }\n\n  }\n\n  &.underlined {\n    text-decoration: underline;\n    text-decoration-color: tokens.$ifxColorOcean500;\n    color: #1D1D1D;\n    text-underline-offset: 8px;\n    \n    &:hover {\n      color: tokens.$ifxColorOcean500;;\n    }\n    \n    &:active {\n      color: #0A8276;\n    }\n\n    &:disabled,\n    &.disabled {\n      text-decoration-color: tokens.$ifxColorEngineering300;\n    }\n  }\n\n  &.title {\n    text-decoration: none;\n    font-weight: tokens.$ifxFontWeightSemibold;\n    color: #1D1D1D;\n\n    &:hover {\n      color: tokens.$ifxColorOcean500;\n    }\n\n    &:active {\n      color: #08665C;\n    }\n  }\n\n  &.menu {\n    font-weight: 400;\n    font-style: normal;\n    line-height: 26px;\n    color: #1D1D1D;\n\n    &:hover {\n      color: tokens.$ifxColorOcean500;\n    }\n\n    &:active {\n      color: #08665C;\n    }\n  }\n\n  &.small {\n    font-size: tokens.$ifxFontSizeS;\n  }\n\n  &.medium {\n    font-size: tokens.$ifxFontSizeM;\n  }\n\n  &.large {\n    font-size: tokens.$ifxFontSizeL;\n  }\n\n  &.extraLarge {\n    font-size: tokens.$ifxFontSizeXl;\n  }\n\n  &.underline {\n    text-decoration: underline;\n  }\n\n  &:disabled,\n  &.disabled {\n    color: tokens.$ifxColorEngineering300;\n    cursor: default;\n    pointer-events:  none;\n  }\n\n}","import { Component, Prop, h, State } from \"@stencil/core\";\nimport classNames from 'classnames';\n \n\n@Component({\n  tag: 'ifx-link',\n  styleUrl: 'link.scss',\n  shadow: true\n})\n\nexport class Link {\n  @Prop() href: string = undefined;\n  @Prop() target: string = '_self';\n  @Prop() variant: string = 'bold';\n  @Prop() size: string;\n  @Prop() disabled: boolean = false;\n  @Prop() download: string;\n  @Prop() AriaLabel: string;\n  @State() internalHref: string ='';\n  @State() internalTarget: string = '';\n  @State() internalVariant: string = '';\n\n  setInternalStates() {\n    if(this.href){\n      this.internalHref = this.href.trim();\n    }else{\n      this.internalHref = undefined;\n    }\n    this.internalTarget = this.target.trim();\n    this.internalVariant = this.variant.trim().toLowerCase();\n  }\n\n  componentWillRender(){\n    this.setInternalStates();\n  }\n\n  handleKeyDown(event: KeyboardEvent) {\n    if (this.disabled) {\n      event.preventDefault();\n    } else if (event.key === 'Enter') {\n      window.open(this.internalHref, this.internalTarget);\n      event.preventDefault();\n    }\n  }\n\n  render() {\n    return (\n      <a\n        role=\"link\"\n        aria-label={this.AriaLabel}\n        aria-disabled={this.disabled || !this.internalHref}\n        href={this.disabled ? undefined : this.internalHref}\n        download={this.download}\n        target={this.internalTarget}\n        class={this.linkClassNames()}>\n        <slot></slot>\n      </a>)\n  }\n\n  getSizeClass() {\n    const small = this.size === 's' ? 'small' : null;\n    const medium = this.size === 'm' ? 'medium' : null;\n    const large = this.size === 'l' ? 'large' : null;\n    const extraLarge = this.size === 'xl' ? 'extraLarge' : null;\n\n    if (small) {\n      return small;\n    } else if (medium) {\n      return medium;\n    } else if (large) {\n      return large;\n    } else if (extraLarge && this.internalVariant === 'underlined') {\n      return 'large';\n    } else if (extraLarge && this.internalVariant !== 'underlined') {\n      return extraLarge;\n    } else return \"\";\n  }\n\n  getVariantClass() {\n    const bold = this.internalVariant === 'bold' ? 'bold' : null;\n    const title = this.internalVariant === 'title' ? 'title' : null;\n    const underlined = this.internalVariant === 'underlined' ? 'underlined' : null;\n    const menu = this.internalVariant === 'menu' ? 'menu' : null;\n\n    if (bold) {\n      return bold\n    } else if (title) {\n      return title;\n    } else if (underlined) {\n      return underlined;\n    } else if (menu) {\n      return menu;\n    } else return bold;\n  }\n\n  linkClassNames() {\n    return classNames(\n      'link',\n      'primary',\n      this.getVariantClass(),\n      this.getSizeClass(),\n      this.disabled ? 'disabled' : '',\n    );\n  }\n}"],"version":3}

package/dist/components/p-3954dc5f.js.map

@@ -1 +0,0 @@
-{"file":"p-3954dc5f.js","mappings":";;;;AAAA,MAAM,aAAa,GAAG,w4EAAw4E,CAAC;AAC/5E,4BAAe,aAAa;;MCSf,UAAU;IANvB;;;;QAYU,WAAM,GAAW,OAAO,CAAC;QACzB,UAAK,GAAW,OAAO,CAAC;KAgFjC;IA1EC,WAAW,CAAC,KAAY;QACtB,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,KAAK,CAAC,wBAAwB,EAAE,CAAC;SAClC;KACF;IAGD,MAAM,QAAQ;QACZ,IAAI,CAAC,gBAAgB,CAAC,KAAK,EAAE,CAAC;KAC/B;IAED,iBAAiB;QACf,IAAI,IAAI,CAAC,KAAK,KAAK,EAAE,EAAE;YACrB,IAAI,CAAC,KAAK,GAAG,OAAO,CAAC;SACtB;KACF;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACF,IAAI,CAAC,IAAI,IACR,0BACiB,IAAI,CAAC,QAAQ,gBACjB,yBAAyB,EACpC,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,gBAAgB,GAAG,EAAE,CAAC,EACzC,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,EAC3B,IAAI,EAAE,CAAC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,IAAI,GAAG,SAAS,EAC5C,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,GAAG,EAAE,IAAI,CAAC,MAAM,KAAK,QAAQ,GAAG,qBAAqB,GAAG,SAAS,IAEjE,gBAAU,IAAI,EAAE,IAAI,CAAC,IAAI,GAAa,CACpC,KAEJ,cACE,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,EAC3B,IAAI,EAAC,QAAQ,IAEb,gBAAU,IAAI,EAAE,IAAI,CAAC,IAAI,GAAa,CAC/B,CACV,CACI,EACP;KACH;IAED,eAAe;QACb,OAAO,GAAG,IAAI,CAAC,OAAO,EAAE,KAAK,WAAW;cACpC,WAAW;cACX,GAAG,IAAI,CAAC,OAAO,EAAE,KAAK,UAAU;kBAC9B,UAAU;kBACV,SAAS,CAAC;KACjB;IAED,YAAY;QACV,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE,KAAK,IAAI,EAAE;YAC3B,OAAO,IAAI,CAAA;SACZ;aACI,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE,KAAK,GAAG,EAAE;YAC/B,OAAO,GAAG,CAAA;SACX;aACI,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE,KAAK,GAAG,EAAE;YAC/B,OAAO,GAAG,CAAA;SACX;;YACI,OAAO,EAAE,CAAC;KAChB;IAED,aAAa;QACX,OAAO,UAAU,CACf,iBAAiB,EACjB,OAAO,IAAI,CAAC,KAAK,EAAE,EACnB,IAAI,CAAC,IAAI,IAAI,OAAO,IAAI,CAAC,YAAY,EAAE,EAAE,EACzC,OAAO,IAAI,CAAC,eAAe,EAAE,EAAE,EAC/B,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,CAChC,CAAC;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/icon-button/icon-button.scss?tag=ifx-icon-button&encapsulation=shadow","src/components/icon-button/icon-button.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host {\n  display: inline-flex;\n}\n\n.btn {\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-height: tokens.$ifxSize500;\n  padding: 8px;\n  gap: tokens.$ifxSpace100;\n  color: tokens.$ifxColorBaseWhite;\n  flex-direction: row;\n  font-weight: tokens.$ifxFontWeightSemibold;\n  border-radius: tokens.$ifxBorderRadius12;\n  line-height: tokens.$ifxLineHeightM;\n  outline: none;\n  font-family: var(--ifx-font-family);\n  text-decoration: none;\n  user-select: none;\n  border: 1px solid rgba(0, 0, 0, 0);\n  font-size: tokens.$ifxFontSizeM;\n  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;\n}\n\n.btn:not(.disabled) {\n  cursor: pointer;\n}\n\n.btn-primary {\n  color: tokens.$ifxColorBaseWhite;\n  background-color: tokens.$ifxColorOcean500;\n\n  &:disabled,\n  &.disabled {\n    background-color: tokens.$ifxColorEngineering300;\n    color: tokens.$ifxColorBaseWhite;\n    pointer-events: none;\n\n  }\n}\n\n\n.btn-secondary {\n  color: tokens.$ifxColorOcean500;\n  background-color: tokens.$ifxColorBaseWhite;\n  border-color: tokens.$ifxColorOcean500;\n\n  &:disabled,\n  &.disabled {\n    background-color: tokens.$ifxColorBaseWhite;\n    border: 1px solid tokens.$ifxColorEngineering300;\n    color: tokens.$ifxColorEngineering300;\n    pointer-events: none;\n\n  }\n}\n\n.btn-tertiary {\n  background-color: transparent;\n  color: tokens.$ifxColorBaseBlack;\n\n  &:disabled,\n  &.disabled {\n    color: tokens.$ifxColorEngineering300;\n    pointer-events: none;\n  }\n}\n\n\n.btn {\n\n  &.icon-button {\n    min-width: initial;\n    min-height: initial;\n    width: tokens.$ifxSize500;\n    height: tokens.$ifxSize500;\n    padding: 0;\n    justify-content: center;\n\n    &.btn-round {\n      border-radius: 100px;\n    }\n\n    &.btn-square {\n      border-radius: tokens.$ifxBorderRadius12;\n    }\n\n    &.btn-s {\n      width: tokens.$ifxSize400;\n      height: tokens.$ifxSize400;\n      padding: 8px;\n    }\n\n\n    &.btn-l {\n      width: tokens.$ifxSize600;\n      height: tokens.$ifxSize600;\n      padding: 8px;\n    }\n  }\n\n  &.btn-primary:not(:disabled, .disabled) {\n    &:focus:not(:active, .active) {\n      outline: none;\n      box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean500;\n    }\n\n    &:hover {\n      background-color: tokens.$ifxColorOcean600;\n      border-color: tokens.$ifxColorOcean600;\n    }\n\n    &:active,\n    &.active {\n      background-color: tokens.$ifxColorOcean700;\n      border-color: tokens.$ifxColorOcean700;\n    }\n  }\n\n\n  &.btn-secondary:not(:disabled, .disabled) {\n    &:focus:not(:active, .active) {\n      outline: none;\n      box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean500;\n    }\n\n    &:hover {\n      background-color: tokens.$ifxColorOcean600;\n      border-color: tokens.$ifxColorOcean600;\n      color: tokens.$ifxColorBaseWhite;\n    }\n\n    &:active,\n    &.active {\n      background-color: tokens.$ifxColorOcean700;\n      border-color: tokens.$ifxColorOcean700;\n    }\n  }\n\n  &.btn-tertiary:not(:disabled, .disabled) {\n    &:focus:not(:active, .active) {\n      outline: none;\n      color: tokens.$ifxColorBaseBlack;\n      box-shadow: 0 0 0 0px tokens.$ifxColorBaseWhite, 0 0 0 2px tokens.$ifxColorOcean500;\n    }\n\n    &:hover {\n      color: tokens.$ifxColorOcean500;\n    }\n\n    &:active,\n    &.active {\n      color: tokens.$ifxColorOcean600;\n    }\n  }\n}","import { Component, Prop, h, Host, Method, Element, Listen } from '@stencil/core';\nimport classNames from 'classnames';\n \n\n@Component({\n  tag: 'ifx-icon-button',\n  styleUrl: 'icon-button.scss',\n  shadow: true,\n})\n\nexport class IconButton {\n  @Prop() variant: 'primary' | 'secondary' | 'tertiary';\n  @Prop() size: string;\n  @Prop() disabled: boolean;\n  @Prop() icon: string;\n  @Prop() href: string;\n  @Prop() target: string = '_self';\n  @Prop() shape: string = 'round';\n  @Element() el;\n\n  private focusableElement: HTMLElement;\n\n  @Listen('click', { capture: true })\n  handleClick(event: Event) {\n    if (this.disabled) {\n      event.stopImmediatePropagation();\n    }\n  }\n\n  @Method()\n  async setFocus() {\n    this.focusableElement.focus();\n  }\n\n  componentWillLoad() {\n    if (this.shape === '') {\n      this.shape = 'round';\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        {this.href ? (\n          <a\n            aria-disabled={this.disabled}\n            aria-label='a clickable icon button'\n            ref={(el) => (this.focusableElement = el)}\n            class={this.getClassNames()}\n            href={!this.disabled ? this.href : undefined}\n            target={this.target}\n            rel={this.target === '_blank' ? 'noopener noreferrer' : undefined}\n          >\n            <ifx-icon icon={this.icon}></ifx-icon>\n          </a>\n        ) : (\n          <button\n            class={this.getClassNames()}\n            type=\"button\"\n          >\n            <ifx-icon icon={this.icon}></ifx-icon>\n          </button>\n        )}\n      </Host>\n    );\n  }\n\n  getVariantClass() {\n    return `${this.variant}` === \"secondary\"\n      ? `secondary`\n      : `${this.variant}` === 'tertiary'\n        ? `tertiary`\n        : `primary`;\n  }\n\n  getSizeClass() {\n    if (`${this.size}` === \"xs\") {\n      return \"xs\"\n    }\n    else if (`${this.size}` === \"s\") {\n      return \"s\"\n    }\n    else if (`${this.size}` === \"l\") {\n      return \"l\"\n    }\n    else return \"\";\n  }\n\n  getClassNames() {\n    return classNames(\n      'btn icon-button',\n      `btn-${this.shape}`,\n      this.size && `btn-${this.getSizeClass()}`,\n      `btn-${this.getVariantClass()}`,\n      this.disabled ? 'disabled' : ''\n    );\n  }\n}"],"version":3}

package/dist/components/p-493b7a31.js.map

@@ -1 +0,0 @@
-{"file":"p-493b7a31.js","mappings":";;;AAAA,MAAM,QAAQ,GAAG,soFAAsoF,CAAC;AACxpF,uBAAe,QAAQ;;MCMV,KAAK;IALlB;;;;;QAMU,YAAO,GAA0D,SAAS,CAAC;QAG3E,aAAQ,GAAY,IAAI,CAAC;QACzB,aAAQ,GAAG,WAAW,CAAC;QAG/B,yBAAoB,GAAG;YACrB,SAAS,EAAE,eAAe;YAC1B,SAAS,EAAE,eAAe;YAC1B,QAAQ,EAAE,aAAa;YACvB,SAAS,EAAE,eAAe;YAC1B,MAAM,EAAE,eAAe;SACxB,CAAC;KAqDH;IAnDC,WAAW;QACT,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;KACtB;IAED,iBAAiB;QACf,QACE,WAAK,KAAK,EAAC,oBAAoB,IAC7B,cAAQ,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAa,eAAe,IACtE,gBAAU,IAAI,EAAC,UAAU,GAAG,CACrB,CACL,EACN;KACH;IAED,gBAAgB,CAAC,MAAM,GAAG,IAAI;QAC5B,OAAO,GAAG,MAAM,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC;KAClE;IAED,iBAAiB;QACf,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAClB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC;SAChD;KACF;IAED,MAAM;QACJ,OAAO,IAAI,CAAC,OAAO,KAAK,MAAM,IAC5B,WAAK,KAAK,EAAC,qBAAqB,EAAC,IAAI,EAAC,OAAO,eAAY,IAAI,CAAC,QAAQ,sBAAoB,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,OAAO,CAAC,qBAAkB,8BAA8B,IAC/K,WAAK,KAAK,EAAC,oBAAoB,IAC7B,WAAK,KAAK,EAAC,wBAAwB,IACjC,YAAM,IAAI,EAAC,UAAU,GAAG,CACpB,EACN,WAAK,EAAE,EAAE,qBAAqB,IAAI,CAAC,QAAQ,EAAE,EAAE,KAAK,EAAC,2BAA2B,IAC9E,YAAM,IAAI,EAAC,MAAM,GAAG,CAChB,CACF,EACL,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,iBAAiB,EAAE,GAAG,IAAI,CAC5C,KAEN,WAAK,KAAK,EAAE,SAAS,IAAI,CAAC,OAAO,EAAE,EAAE,IAAI,EAAC,OAAO,IAC9C,IAAI,CAAC,IAAI,KACR,WAAK,KAAK,EAAC,cAAc,IACvB,gBAAU,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI,CACzB,CACP,EACD,WAAK,KAAK,EAAC,YAAY,EAAC,EAAE,EAAE,cAAc,IAAI,CAAC,QAAQ,EAAE,IACvD,eAAQ,CACJ,EACL,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,iBAAiB,EAAE,GAAG,IAAI,CAC5C,CACP,CAAC;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/alert/alert.scss?tag=ifx-alert&encapsulation=shadow","src/components/alert/alert.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: block;\n}\n\n.alert__info-wrapper {\n  display: flex;\n  padding: 16px 24px;\n  font-family: var(--ifx-font-family);\n  box-shadow: 0px 6px 9px 0px #1D1D1D1A;\n\n\n  & .info__text-wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: tokens.$ifxSpace100;\n    width: 100%;\n\n    & .info__headline-wrapper {\n      display: -webkit-box;\n      -webkit-line-clamp: 1;\n      line-clamp: 1;\n      -webkit-box-orient: vertical;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    & .info__headline-wrapper,\n    .info__description-wrapper {\n      color: #1D1D1D;\n      font-size: 16px;\n      font-style: normal;\n      font-weight: 600;\n      line-height: 24px;\n\n      ::slotted(p) {\n        padding: 0;\n        margin: 0;\n      }\n    }\n\n    & .info__description-wrapper {\n      font-weight: 400;\n    }\n  }\n\n  & .close-icon-wrapper {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    justify-content: flex-start;\n    //min-width: tokens.$ifxSize500;\n\n    & button {\n      all: unset;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      line-height: 0;\n      color: tokens.$ifxColorBaseBlack;\n      height: tokens.$ifxSize300;\n      width: tokens.$ifxSize300;\n\n\n      &:focus {\n        outline: 2px solid tokens.$ifxColorOcean500;\n        outline-offset: 2px;\n      }\n    }\n  }\n}\n\n.alert {\n  display: flex;\n  border: 1px solid tokens.$ifxColorOcean500;\n  border-radius: tokens.$ifxBorderRadius12;\n  color: tokens.$ifxColorBaseBlack;\n  background-color: tokens.$ifxColorBaseWhite;\n  font-family: var(--ifx-font-family);\n  box-shadow: 0px 6px 9px 0px #1D1D1D1A;\n\n\n  & .close-icon-wrapper {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-width: tokens.$ifxSize500;\n\n    & button {\n      all: unset;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      line-height: 0;\n      color: tokens.$ifxColorBaseBlack;\n      height: tokens.$ifxSize300;\n      width: tokens.$ifxSize300;\n\n      &:focus {\n        outline: 2px solid tokens.$ifxColorOcean500;\n        outline-offset: 2px;\n      }\n    }\n  }\n\n  & .icon-wrapper {\n    position: relative;\n    min-width: tokens.$ifxSize600;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    background-color: tokens.$ifxColorOcean500;\n  }\n\n  & .alert-text {\n    font-size: 16px;\n    width: 100%;\n    padding: 12px 0px 12px 12px;\n    color: tokens.$ifxColorBaseBlack;\n\n    white-space: pre-wrap;\n    /* wraps text at spaces and within words */\n    word-wrap: break-word;\n    /* breaks text within a word if necessary */\n    overflow-wrap: anywhere;\n    /* breaks text at arbitrary points when needed */\n  }\n\n  &.primary {\n    border: 1px solid tokens.$ifxColorOcean500;\n\n    & .icon-wrapper {\n      background-color: tokens.$ifxColorOcean500;\n      color: tokens.$ifxColorBaseWhite;\n    }\n  }\n\n  &.success {\n    border: 1px solid tokens.$ifxColorGreen500;\n\n    & .icon-wrapper {\n      background-color: tokens.$ifxColorGreen500;\n      color: tokens.$ifxColorBaseWhite;\n    }\n  }\n\n  &.danger {\n    border: 1px solid tokens.$ifxColorRed500;\n\n    & .icon-wrapper {\n      background-color: tokens.$ifxColorRed500;\n      color: tokens.$ifxColorBaseWhite;\n    }\n  }\n\n  &.warning {\n    border: 1px solid tokens.$ifxColorOrange500;\n\n    & .icon-wrapper {\n      background-color: tokens.$ifxColorOrange500;\n      color: tokens.$ifxColorBaseWhite;\n    }\n  }\n}\n\n.close-icon-wrapper {\n  & ifx-icon {\n    &:hover {\n      cursor: pointer;\n    }\n  }\n}","import { Component, Prop, h, Event, EventEmitter, State } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-alert',\n  styleUrl: 'alert.scss',\n  shadow: true,\n})\nexport class Alert {\n  @Prop() variant: 'primary' | 'success' | 'danger' | 'warning' | 'info' = 'primary';\n  @Prop() icon: string;\n  @Event() ifxClose: EventEmitter;\n  @Prop() closable: boolean = true;\n  @Prop() AriaLive = 'assertive';\n  @State() uniqueId: string;\n\n  alertTypeDescription = {\n    \"primary\": 'Neutral alert',\n    \"success\": 'Success Alert',\n    \"danger\": 'Error Alert',\n    \"warning\": 'Warning Alert',\n    \"info\": 'Neutral alert',\n  };\n\n  handleClose() {\n    this.ifxClose.emit();\n  }\n\n  renderCloseButton() {\n    return (\n      <div class=\"close-icon-wrapper\">\n        <button onClick={this.handleClose.bind(this)} aria-label=\"Dismiss alert\">\n          <ifx-icon icon=\"cross-16\" />\n        </button>\n      </div>\n    );\n  }\n\n  generateUniqueId(prefix = 'id') {\n    return `${prefix}-${Math.random().toString(36).substring(2, 9)}`;\n  }\n\n  componentWillLoad() { \n    if (!this.uniqueId) {\n      this.uniqueId = this.generateUniqueId('alert');\n    }\n  }\n\n  render() {\n    return this.variant === 'info' ? (\n      <div class=\"alert__info-wrapper\" role=\"alert\" aria-live={this.AriaLive} aria-describedby={this.alertTypeDescription[this.variant]} aria-labelledby=\"alert-text alert-description\">\n        <div class=\"info__text-wrapper\">\n          <div class=\"info__headline-wrapper\">\n            <slot name=\"headline\" />\n          </div>\n          <div id={`alert-description-${this.uniqueId}`} class=\"info__description-wrapper\">\n            <slot name=\"desc\" />\n          </div>\n        </div>\n        {this.closable ? this.renderCloseButton() : null}\n      </div>\n    ) : (\n      <div class={`alert ${this.variant}`} role=\"alert\">\n        {this.icon && (\n          <div class=\"icon-wrapper\">\n            <ifx-icon icon={this.icon} />\n          </div>\n        )}\n        <div class=\"alert-text\" id={`alert-text-${this.uniqueId}`}>\n          <slot />\n        </div>\n        {this.closable ? this.renderCloseButton() : null}\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/p-4ac265d2.js.map

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

package/dist/components/p-5853aeb8.js.map

@@ -1 +0,0 @@
-{"file":"p-5853aeb8.js","mappings":";;AAAA,MAAM,cAAc,GAAG,2zGAA2zG,CAAC;AACn1G,6BAAe,cAAc;;MCOhB,WAAW;IANxB;;;;;;QAQU,aAAQ,GAAY,KAAK,CAAC;QAE1B,UAAK,GAAY,KAAK,CAAC;QACN,SAAI,GAAc,GAAG,CAAC;QAGtC,oBAAe,GAAY,KAAK,CAAC;QACjC,YAAO,GAAY,KAAK,CAAC;KA4InC;IAnIC,iBAAiB;;QAEf,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QACrD,IAAI,CAAC,aAAa,CAAC,IAAI,GAAG,OAAO,CAAC;QAClC,IAAI,CAAC,aAAa,CAAC,MAAM,GAAG,IAAI,CAAC;QACjC,IAAI,CAAC,aAAa,CAAC,SAAS,GAAG,2BAA2B,CAAC;QAC3D,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,OAAO,GAAG;;;;;;;KAOlC,CAAC;QACF,IAAI,CAAC,aAAa,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;QACvD,IAAI,CAAC,aAAa,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;QACjC,IAAI,CAAC,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;;QAGxC,IAAI,iBAAiB,IAAIA,CAAW,CAAC,SAAS,EAAE;YAC9C,IAAI;gBACF,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,eAAe,EAAE,CAAC;aAC5C;YAAC,OAAO,CAAC,EAAE;gBACV,OAAO,CAAC,IAAI,CAAC,gCAAgC,CAAC,CAAC;aAChD;SACF;;QAGD,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,OAAO,IAAI,KAAK,CAAC;QAC7C,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,QAAQ,CAAC,IAAI,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC;KACrF;IAGD,mBAAmB,CAAC,QAAiB;QACnC,IAAI,CAAC,eAAe,GAAG,QAAQ,CAAC;KACjC;IAGD,eAAe;;;QAEb,IAAI,MAAA,IAAI,CAAC,SAAS,0CAAE,YAAY,EAAE;YAChC,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,CAAC;SACvE;QACD,IAAI,CAAC,aAAa,CAAC,OAAO,GAAG,IAAI,CAAC,eAAe,CAAC;QAClD,IAAI,CAAC,aAAa,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;QACpC,IAAI,CAAC,aAAa,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;QACtC,IAAI,CAAC,aAAa,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC;KAC7C;IAGC,YAAY,CAAC,QAAiB,EAAE,QAAiB;QAC/C,IAAI,QAAQ,KAAK,QAAQ,EAAE;YACzB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;SAC9B;KACF;IAEH,sBAAsB,CAAC,KAAY;QACjC,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,OAAO;SACR;QAED,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,CAAC;QAC1B,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC;QACjD,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,eAAe,CAAC;QACpC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;QAE1C,MAAM,WAAW,GAAG,IAAI,WAAW,CAAC,QAAQ,EAAE;YAC5C,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,eAAe,EAAE;SAC1C,CAAC,CAAC;QACH,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;KACpC;IAGD,aAAa,CAAC,EAAiB;QAC7B,IAAI,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE;YACnC,EAAE,CAAC,cAAc,EAAE,CAAC;YACpB,IAAI,CAAC,sBAAsB,CAAC,IAAI,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC;SACxD;KACF;IAGD,oBAAoB,CAAC,KAAY;QAC/B,MAAM,MAAM,GAAG,KAAK,CAAC,MAAqB,CAAC;QAC3C,IAAI,MAAM,KAAK,IAAI,CAAC,EAAE,IAAI,MAAM,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,kBAAkB;YAAE,OAAO;QAEtF,IAAI,MAAM,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC,IAAI,EAAE;YAC7C,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;SAC9B;KACF;IAED,MAAM;QACJ,QACE,4DACE,IAAI,EAAC,OAAO,kBACE,MAAM,CAAC,IAAI,CAAC,eAAe,CAAC,mBAC3B,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,EACpC,KAAK,EAAE,0BAA0B,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,EAC/E,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,sBAAsB,CAAC,CAAC,CAAC,EAC9C,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAC,IAEhC,4DACE,KAAK,EAAE;cACH,IAAI,CAAC,eAAe,GAAG,SAAS,GAAG,EAAE;cACrC,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE;cAC/B,IAAI,CAAC,KAAK,GAAG,OAAO,GAAG,EAAE,EAAE,IAE9B,IAAI,CAAC,eAAe,IAAI,4DAAK,KAAK,EAAC,2BAA2B,GAAO,CAClE,EAEL,IAAI,CAAC,OAAO,KACX,4DAAK,KAAK,EAAE,SAAS,IAAI,CAAC,IAAI,KAAK,GAAG,GAAG,SAAS,GAAG,EAAE,IAAI,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,IAC1F,8DAAQ,CACJ,CACP,EAED,8DACE,IAAI,EAAC,OAAO,EACZ,MAAM,QACN,GAAG,EAAE,EAAE,IAAI,IAAI,CAAC,YAAY,GAAG,EAAE,EACjC,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,eAAe,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,eAAe,EAAE,GACnC,CACE,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["HTMLElement"],"sources":["src/components/radio-button/radio-button.scss?tag=ifx-radio-button&encapsulation=shadow","src/components/radio-button/radio-button.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n    display: inline-flex;\n    --_ifx-fallback-display: none !important;\n}\n\n._ifx-radiobutton-fallback {\n    display: var(--_ifx-fallback-display);\n    position: absolute !important;\n    width: 1px !important;\n    height: 1px !important;\n    padding: 0 !important;\n    margin: -1px !important;\n    overflow: hidden !important;\n    clip: rect(0,0,0,0) !important;\n    border: 0 !important;\n  }\n\n.radioButton__container {\n    box-sizing: border-box;\n    display: inline-flex;\n    flex-direction: row;\n    align-items: center;\n    padding: 0px;\n    gap: tokens.$ifxSpace100;\n    cursor: pointer;\n    font-family: var(--ifx-font-family);\n\n    &.m .radioButton__wrapper {\n        width: tokens.$ifxSize300;\n        height: tokens.$ifxSize300;\n    }\n\n    .radioButton__wrapper {\n        width: tokens.$ifxSize250;\n        height: tokens.$ifxSize250;\n        position: relative;\n        display: block;\n        border-radius: 50%;\n        background-color: tokens.$ifxColorBaseWhite;\n        border: 1px solid #575352;\n\n        &:focus {\n            outline: none;\n\n            &::before {\n                content: '';\n                position: absolute;\n                width: calc(100% + 4px);\n                height: calc(100% + 4px);\n                top: 50%;\n                left: 50%;\n                transform: translate(-50%, -50%);\n                border: 2px solid tokens.$ifxColorOcean500;\n                border-radius: 50%;\n            }\n        }\n\n        .radioButton__wrapper-mark {\n            position: absolute;\n            top: 50%;\n            left: 50%;\n            transform: translate(-50%, -50%);\n            background-color: #0A8276;\n            border-radius: 50%;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            border-color: tokens.$ifxColorBaseTransparent;\n        }\n\n        &:hover {\n            background-color: tokens.$ifxColorEngineering200;\n        }\n\n        &.disabled {\n            background-color: #BFBBBB;\n            border-color: #BFBBBB;\n\n            &.error {\n\n                &:hover,\n                &:focus-visible {\n                    border-color: #CD002F;\n                }\n            }\n        }\n\n        &.checked {\n            border-color: #0A8276;\n\n            &::after {\n                content: \"\";\n                position: absolute;\n                top: 50%;\n                left: 50%;\n                transform: translate(-50%, -50%);\n                width: 10px;\n                height: 10px;\n                background-color: #0A8276;\n                border-radius: 50%;\n            }\n\n            &.disabled::after {\n                background-color: #BFBBBB;\n            }\n\n\n            &:hover {\n                border-color: tokens.$ifxColorOcean600;\n\n                & .radioButton__wrapper-mark {\n                    background-color: tokens.$ifxColorOcean600;\n                }\n            }\n\n            &.disabled {\n                background-color: tokens.$ifxColorBaseWhite;\n                border-color: #BFBBBB;\n\n                &.disabled::after {\n                    background-color: #BFBBBB;\n                }\n\n                & .radioButton__wrapper-mark {\n                    background-color: #BFBBBB;\n                }\n            }\n            &.error::after {\n                border-color: #CD002F;\n                background-color: #CD002F;\n            }\n        }\n\n        &.error:not(.disabled) {\n            border-color: #CD002F;\n\n            &:hover,\n            &:focus-visible {\n                border-color: #CD002F;\n            }\n        }\n    }\n\n    .label {\n        display: flex;\n        align-items: center;\n        height: tokens.$ifxSize250;\n        font-style: normal;\n        font-weight: 400;\n        font-size: tokens.$ifxFontSizeS;\n        line-height: tokens.$ifxLineHeightS;\n        color: tokens.$ifxColorBaseBlack;\n        flex: none;\n        order: 1;\n        flex-grow: 0;\n\n        &.label-m {\n            height: tokens.$ifxSize300;\n            font-size: tokens.$ifxFontSizeM;\n            line-height: tokens.$ifxLineHeightM;\n        }\n\n        &.disabled {\n            color: #BFBBBB;\n        }\n\n\n\n        &:hover {\n            cursor: pointer;\n        }\n    }\n}\n\n","import { Component, h, Prop, Element, State, Event, EventEmitter, Listen, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-radio-button',\n  styleUrl: 'radio-button.scss',\n  shadow: true,\n  formAssociated: true\n})\nexport class RadioButton {\n  @Element() el: HTMLElement;\n  @Prop() disabled: boolean = false;\n  @Prop() value: string;\n  @Prop() error: boolean = false;\n  @Prop({ reflect: true }) size: \"s\" | \"m\" = \"s\";\n  @Prop({ reflect: true }) name: string;\n  @Prop({ mutable: true }) checked: boolean;\n  @State() internalChecked: boolean = false;\n  @State() hasSlot: boolean = false;\n\n  private inputElement: HTMLInputElement;\n  private internals: ElementInternals;\n  private fallbackInput: HTMLInputElement;\n\n  @Event({ eventName: 'ifxChange' }) ifxChange: EventEmitter;\n  @Event({ eventName: 'ifxError' }) ifxError: EventEmitter;\n\n  componentWillLoad() {\n    // Fallback for form association\n    this.fallbackInput = document.createElement('input');\n    this.fallbackInput.type = 'radio';\n    this.fallbackInput.hidden = true;\n    this.fallbackInput.className = '_ifx-radiobutton-fallback';\n    this.fallbackInput.style.cssText = `\n      display: none !important;\n      position: absolute !important;\n      opacity: 0 !important;\n      pointer-events: none !important;\n      width: 0 !important;\n      height: 0 !important;\n    `;\n    this.fallbackInput.setAttribute('aria-hidden', 'true');\n    this.fallbackInput.tabIndex = -1;\n    this.el.appendChild(this.fallbackInput);\n\n    // Initialize ElementInternals if supported\n    if ('attachInternals' in HTMLElement.prototype) {\n      try {\n        this.internals = this.el.attachInternals();\n      } catch (e) {\n        console.warn('ElementInternals not supported');\n      }\n    }\n\n    // Initial state\n    this.internalChecked = this.checked || false;\n    this.hasSlot = !!this.el.querySelector('[slot]') || this.el.innerHTML.trim() !== '';\n  }\n\n  @Watch('checked')\n  handleCheckedChange(newValue: boolean) {\n    this.internalChecked = newValue;\n  }\n\n  @Watch('internalChecked')\n  updateFormValue() {\n    // Update both ElementInternals and fallback input\n    if (this.internals?.setFormValue) {\n      this.internals.setFormValue(this.internalChecked ? this.value : null);\n    }\n    this.fallbackInput.checked = this.internalChecked;\n    this.fallbackInput.name = this.name;\n    this.fallbackInput.value = this.value;\n    this.fallbackInput.disabled = this.disabled;\n  }\n\n  @Watch('error')\n    errorChanged(newValue: boolean, oldValue: boolean) {\n      if (newValue !== oldValue) {\n        this.ifxError.emit(newValue);\n      }\n    }\n\n  handleRadioButtonClick(event: Event) {\n    if (this.disabled) {\n      event.stopPropagation();\n      return;\n    }\n\n    this.inputElement.click();\n    this.internalChecked = this.inputElement.checked;\n    this.checked = this.internalChecked;\n    this.ifxChange.emit(this.internalChecked);\n\n    const changeEvent = new CustomEvent('change', {\n      bubbles: true,\n      composed: true,\n      detail: { checked: this.internalChecked }\n    });\n    this.el.dispatchEvent(changeEvent);\n  }\n\n  @Listen('keydown')\n  handleKeyDown(ev: KeyboardEvent) {\n    if ([' ', 'Enter'].includes(ev.key)) {\n      ev.preventDefault();\n      this.handleRadioButtonClick(new PointerEvent('click'));\n    }\n  }\n\n  @Listen('change', { target: 'document' })\n  handleExternalChange(event: Event) {\n    const target = event.target as HTMLElement;\n    if (target === this.el || target.tagName.toLowerCase() !== 'ifx-radio-button') return;\n    \n    if (target.getAttribute('name') === this.name) {\n      this.internalChecked = false;\n    }\n  }\n\n  render() {\n    return (\n      <div\n        role=\"radio\"\n        aria-checked={String(this.internalChecked)}\n        aria-disabled={String(this.disabled)}\n        class={`radioButton__container ${this.size} ${this.disabled ? 'disabled' : ''}`}\n        onClick={(e) => this.handleRadioButtonClick(e)}\n        tabindex={this.disabled ? -1 : 0}\n      >\n        <div\n          class={`radioButton__wrapper \n            ${this.internalChecked ? 'checked' : ''} \n            ${this.disabled ? 'disabled' : ''} \n            ${this.error ? 'error' : ''}`}\n        >\n          {this.internalChecked && <div class=\"radioButton__wrapper-mark\"></div>}\n        </div>\n\n        {this.hasSlot && (\n          <div class={`label ${this.size === \"m\" ? \"label-m\" : \"\"} ${this.disabled ? 'disabled' : ''}`}>\n            <slot />\n          </div>\n        )}\n\n        <input\n          type=\"radio\"\n          hidden\n          ref={el => this.inputElement = el}\n          name={this.name}\n          value={this.value}\n          checked={this.internalChecked}\n          disabled={this.disabled}\n          onClick={(e) => e.stopPropagation()}\n        />\n      </div>\n    );\n  }\n}"],"version":3}

package/dist/components/p-58a0ff65.js.map

@@ -1 +0,0 @@
-{"file":"p-58a0ff65.js","mappings":"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","names":[],"sources":["src/components/search-field/search-field.scss?tag=ifx-search-field&encapsulation=shadow","src/components/search-field/search-field.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: flex;\n}\n\n.search-field {\n  box-sizing: border-box;\n  background-color: tokens.$ifxColorBaseWhite;\n  width: 100%;\n  font-family: var(--ifx-font-family);\n\n\n  .search-field__wrapper {\n    box-sizing: border-box;\n    height: tokens.$ifxSize500;\n    display: flex;\n    align-items: center;\n    border: 1px solid #8D8786;\n    border-radius: tokens.$ifxBorderRadius12;\n    padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\n    gap: tokens.$ifxSpace150;\n    flex: none;\n    order: 0;\n    align-self: stretch;\n    flex-grow: 0;\n    position: relative;\n    width: 100%;\n    outline: none;\n    color: tokens.$ifxColorEngineering400;\n\n    &.focused {\n      border: 1px solid tokens.$ifxColorOcean500;\n\n      & ifx-icon {\n        color: tokens.$ifxColorEngineering500;\n      }\n    }\n\n    &.search-field__wrapper-s {\n      height: 36px;\n    }\n\n\n    &:hover:not(.focused, :focus) {\n      border: 1px solid #3C3A39;\n    }\n\n    &:focus {\n      outline: none;\n      border: 1px solid #0A8276;\n    }\n\n\n    .delete-icon {\n      right: 12px;\n      cursor: pointer;\n    }\n\n    input[type='text'] {\n      font-style: normal;\n      font-weight: 400;\n      font-size: 16px;\n      //line-height: 24px;\n      color: #8D8786;\n      border: none;\n      width: 100%;\n      outline: none;\n      //height: 100%;\n      height: 16px;\n\n      &:focus {\n        outline: none;\n        color: #1d1d1d;\n      }\n\n      &:disabled {\n        background-color: #EEEDED;\n      }\n    }\n\n    &:has(input[disabled]) {\n      background-color: #EEEDED;\n    }\n  }\n}","import { Component, EventEmitter, h, Event, Prop, Watch, State, Listen } from '@stencil/core';\nimport classNames from 'classnames';\n \n\n\n@Component({\n  tag: 'ifx-search-field',\n  styleUrl: 'search-field.scss',\n  shadow: true\n})\n\n\nexport class SearchField {\n  private inputElement: HTMLInputElement;\n  @Prop({ mutable: true }) value: string = '';\n\n  @Event() ifxInput: EventEmitter<String>;\n  @State() insideDropdown: boolean = false;\n\n  @Prop() showDeleteIcon: boolean = false;\n  @State() showDeleteIconInternalState: boolean = false;\n  @Prop() disabled: boolean = false;\n  @Prop() size: string = 'l';\n  @State() isFocused: boolean = false;\n  @Prop() placeholder: string = \"Search...\";\n  @Prop() autocomplete: string = \"on\";\n  @Prop() maxlength?: number = null;  \n\n  @Listen('mousedown', { target: 'document' })\n  handleOutsideClick(event: MouseEvent) {\n    const path = event.composedPath();\n    if (!path.includes(this.inputElement)) {\n      this.isFocused = false;\n    }\n  }\n\n  @Watch('value')\n  valueWatcher(newValue: string) {\n    if (newValue !== this.inputElement.value) {\n      this.inputElement.value = newValue;\n    }\n  }\n\n\n  handleInput = () => {\n    const query = this.inputElement.value;\n    this.value = query; // update the value property when input changes\n    this.ifxInput.emit(this.value);\n  };\n\n  handleDelete = () => {\n    this.inputElement.value = '';\n    this.value = \"\";\n    this.ifxInput.emit(this.value);\n  }\n\n  focusInput() {\n    this.inputElement.focus();\n    this.isFocused = true;\n  }\n  \n\n\n\n  componentWillUpdate() {\n    if (this.value !== \"\") {\n      this.showDeleteIconInternalState = true;\n    } else this.showDeleteIconInternalState = false;\n  }\n\n  render() {\n    return (\n      <div aria-label=\"a search field for user input\" aria-disabled={this.disabled} aria-value={this.value} class='search-field'>\n        <div class={this.getWrapperClassNames()}\n          tabindex={1}\n          onFocus={() => this.focusInput()}\n          onClick={() => this.focusInput()}\n        >\n          <ifx-icon icon=\"search-16\" class=\"search-icon\"></ifx-icon>\n          <input\n            ref={(el) => (this.inputElement = el)}\n            type=\"text\"\n            autocomplete={this.autocomplete}\n            onInput={() => this.handleInput()}\n            placeholder={this.placeholder}\n            disabled={this.disabled}\n            maxlength={this.maxlength}\n            value={this.value} // bind the value property to input element\n          />\n          {this.showDeleteIcon && this.showDeleteIconInternalState ? (\n            <ifx-icon icon=\"cremove16\" class=\"delete-icon\" onClick={this.handleDelete}>\n            </ifx-icon>\n          ) : null}\n        </div>\n      </div>\n    );\n  }\n\n  getSizeClass() {\n    return `${this.size}` === \"s\"\n      ? \"search-field__wrapper-s\"\n      : \"\";\n  }\n\n\n  getWrapperClassNames() {\n    return classNames(\n      `search-field__wrapper`,\n      `search-field__wrapper ${this.getSizeClass()}`,\n      `${this.isFocused ? 'focused' : \"\"}`\n    );\n  }\n}"],"version":3}

package/dist/components/p-905fb988.js.map

@@ -1 +0,0 @@
-{"file":"p-905fb988.js","mappings":";;AAAA,MAAM,YAAY,GAAG,gNAAgN,CAAC;AACtO,2BAAe,YAAY;;MCOd,SAAS;IALtB;;;;QAOU,iBAAY,GAAY,KAAK,CAAC;KAuBvC;IAnBC,MAAM,UAAU,CAAC,KAAkB;QACjC,IAAI,IAAI,CAAC,YAAY,EAAE;YACrB,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,CAAC,CAAC;YACzE,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE;gBACxB,MAAM,WAAW,GAAG,IAAmC,CAAC;gBACxD,IAAI,WAAW,KAAK,KAAK,CAAC,MAAM,KAAK,MAAM,WAAW,CAAC,IAAI,CAAC,EAAE;oBAC5D,WAAW,CAAC,IAAI,GAAG,KAAK,CAAC;iBAC1B;aACF;SACF;KACF;IAED,MAAM;QACJ,QACE,4DAAK,KAAK,EAAC,mBAAmB,IAC5B,8DAAQ,CACJ,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/accordion/accordion.scss?tag=ifx-accordion&encapsulation=shadow","src/components/accordion/accordion.tsx"],"sourcesContent":["// ifxAccordion.scss\n@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: block;\n}\n\n.accordion-wrapper {\n  display: flex;\n  flex-direction: column;\n  gap: tokens.$ifxSpace100;\n  font-family: var(--ifx-font-family);\n\n}","//ifxAccordion.tsx\nimport { Component, h, Listen, Element, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-accordion',\n  styleUrl: 'accordion.scss',\n  shadow: { delegatesFocus: true },\n})\nexport class Accordion {\n  @Element() el: HTMLElement;\n  @Prop() autoCollapse: boolean = false;\n\n\n  @Listen('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"],"version":3}

package/dist/components/p-94e019a6.js.map

@@ -1 +0,0 @@
-{"file":"p-94e019a6.js","mappings":";;;AAAA,MAAM,gBAAgB,GAAG,ioCAAioC,CAAC;AAC3pC,+BAAe,gBAAgB;;MCOlB,gBAAgB;IAL7B;;;;;;QAUK,SAAI,GAAY,KAAK,CAAC;QACjB,cAAS,GAAG,CAAC,CAAC;QACb,iBAAY,GAAY,KAAK,CAAC;KA0GxC;IAnGC,iBAAiB;QACf,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,IAAI,CAAC;KAC/B;IAED,gBAAgB;QACd,IAAI,CAAC,iBAAiB,EAAE,CAAA;KACzB;IAED,kBAAkB;QAChB,IAAI,CAAC,iBAAiB,EAAE,CAAA;KACzB;IAKD,WAAW,CAAC,QAAiB;QAC3B,IAAI,CAAC,YAAY,GAAG,QAAQ,CAAC;KAC9B;IAED,UAAU;QACR,IAAI,CAAC,YAAY,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC;QACvC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,YAAY,CAAC;QAE9B,IAAI,IAAI,CAAC,YAAY,EAAE;YACrB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC;SAClD;aAAM;YACL,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,QAAQ,EAAE,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC;SACtD;KACF;IAED,iBAAiB;QACf,IAAI,IAAI,CAAC,YAAY,EAAE;YACrB,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,SAAS,GAAG,GAAG,IAAI,CAAC,SAAS,CAAC,YAAY,IAAI,CAAC;SACrE;aAAM;YACL,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,SAAS,GAAG,GAAG,CAAC;SACtC;KACF;IAED,gBAAgB,CAAC,CAAC;QAChB,MAAM,WAAW,GAAG,CAAC,CAAC,MAAM,CAAC;QAC7B,MAAM,KAAK,GAAG,WAAW,CAAC,aAAa,EAAE,CAAC;QAE1C,IAAG,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;YACnB,KAAK,CAAC,OAAO,CAAC,IAAI;gBAChB,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,CAAC,aAAa,EAAE,CAAC;oBACrD,KAAI,IAAI,QAAQ,IAAI,aAAa,EAAE;wBACjC,IAAI,QAAQ,CAAC,IAAI,KAAK,WAAW,EAAE;4BACjC,IAAI,IAAI,CAAC,YAAY,EAAE;gCACrB,IAAI,CAAC,iBAAiB,EAAE,CAAC;6BAC1B;yBACF;qBACF;iBACF,CAAC,CAAC;gBACH,QAAQ,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;aAC9E,CAAC,CAAC;SACJ;QAED,IAAI,IAAI,CAAC,YAAY,EAAE;YACrB,IAAI,CAAC,iBAAiB,EAAE,CAAC;SAC1B;KACF;IAKD,aAAa,CAAC,EAAiB;QAC7B,MAAM,IAAI,GAAG,EAAE,CAAC,YAAY,EAAE,CAAC;QAE/B,IAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE;YAC/B,OAAO;SACR;QAED,QAAQ,EAAE,CAAC,GAAG;YACZ,KAAK,OAAO,CAAC;YACb,KAAK,GAAG;gBACN,EAAE,CAAC,cAAc,EAAE,CAAC;gBACpB,IAAI,CAAC,UAAU,EAAE,CAAC;gBAClB,MAAM;SACT;KACF;IAGD,MAAM;QACJ,QACE,4DAAK,KAAK,EAAE,kBAAkB,IAAI,CAAC,YAAY,GAAG,MAAM,GAAG,EAAE,EAAE,IAC7D,4DAAK,IAAI,EAAC,QAAQ,mBAAgB,IAAI,CAAC,YAAY,mBAAgB,mBAAmB,EAAC,KAAK,EAAC,iBAAiB,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,EAAE,EAAE,QAAQ,EAAC,GAAG,EAAC,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,OAAO,GAAG,EAAiB,CAAC,IAC3M,4EAAkB,MAAM,EAAC,IAAI,EAAC,SAAS,gBAAa,MAAM,CAAC,IAAI,CAAC,SAAS,CAAW,EAAE,KAAK,EAAC,gBAAgB,IAC1G,iEAAU,IAAI,EAAC,iBAAiB,GAAE,CAC7B,EACP,6DAAM,EAAE,EAAC,mBAAmB,EAAC,KAAK,EAAC,mBAAmB,IAAE,IAAI,CAAC,OAAO,CAAQ,CACxE,EACN,4DAAK,EAAE,EAAC,mBAAmB,EAAC,KAAK,EAAC,mBAAmB,EAAC,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,SAAS,GAAG,EAAiB,CAAC,EAAE,IAAI,EAAC,QAAQ,qBAAiB,mBAAmB,IACxJ,4DAAK,KAAK,EAAC,eAAe,IACxB,6DAAM,YAAY,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,GAAI,CACnD,CACF,CACF,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/accordion/accordionItem.scss?tag=ifx-accordion-item&encapsulation=shadow","src/components/accordion/accordionItem.tsx"],"sourcesContent":["// 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  overflow: hidden;\n  transition: all 0.3s;\n  font-family: var(--ifx-font-family);\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;\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  max-height: 0;\n  overflow: hidden;\n  transition: max-height 0.3s ease-in-out;\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.$ifxSpace300;\n  // white-space: pre-wrap;\n  /* wraps text at spaces and within words */\n  word-wrap: break-word;\n  /* breaks text within a word if necessary */\n  overflow-wrap: anywhere;\n  align-self: stretch;\n\n  /* breaks text at arbitrary points when needed */\n}\n\n.accordion-icon {\n  font-weight: bold;\n  display: inline-block;\n  transition: transform 0.3s;\n\n  &:hover {\n    color: tokens.$ifxColorOcean600;\n\n  }\n}\n\n\n\n.accordion-item.open .accordion-icon {\n  transform: rotate(-180deg);\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 IfxAccordionItem {\n  @Element() el;\n  @Prop() caption: string;\n  @Prop({\n    mutable: true,\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\n\n  componentWillLoad() {\n    this.internalOpen = this.open;\n  }\n\n  componentDidLoad() {\n    this.openAccordionItem()\n  }\n\n  componentDidUpdate() {\n    this.openAccordionItem()\n  }\n\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.maxHeight = `${this.contentEl.scrollHeight}px`;\n    } else {\n      this.contentEl.style.maxHeight = '0';\n    }\n  }\n\n  handleSlotChange(e) {\n    const slotElement = e.target;\n    const nodes = slotElement.assignedNodes();\n    \n    if(nodes.length > 0) {\n      nodes.forEach(node => {\n        const observer = new MutationObserver((mutationsList, _) => {\n          for(let mutation of mutationsList) {\n            if (mutation.type === 'childList') {\n              if (this.internalOpen) {\n                this.openAccordionItem();\n              }\n            }\n          }\n        });\n        observer.observe(node, { attributes: true, childList: true, subtree: true });\n      });\n    }\n\n    if (this.internalOpen) {\n      this.openAccordionItem();\n    }\n  }\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\n  render() {\n    return (\n      <div class={`accordion-item ${this.internalOpen ? 'open' : ''}`}>\n        <div role=\"button\" aria-expanded={this.internalOpen} aria-controls=\"accordion-content\" class=\"accordion-title\" onClick={() => this.toggleOpen()} tabindex='0' ref={(el) => (this.titleEl = el as HTMLElement)}>\n          <span aria-hidden=\"true\" role=\"heading\" aria-level={String(this.AriaLevel) as string} class=\"accordion-icon\">\n            <ifx-icon icon=\"chevron-down-12\"/>\n          </span>\n          <span id=\"accordion-caption\" class=\"accordion-caption\">{this.caption}</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 onSlotchange={(e) => this.handleSlotChange(e)} />\n          </div>\n        </div>\n      </div>\n    );\n  }\n}"],"version":3}