@infineon/infineon-design-system-stencil 37.13.1--canary.1987.3a00aa50ac2f53008f1e351eabf4b0c340894bb9.0 → 37.14.0--canary.1964.0cc47e126559ad69071eedaaa2c1137ce976ec2c.0

package/dist/components/{p-r7hBylnC.js → p-B-erGWs9.js}

@@ -2,7 +2,7 @@ import { p as proxyCustomElement, H, h, a as Host } from './index.js';
 import { d as detectFramework, t as trackComponent } from './p-DcmcuUOA.js';
 import { i as isNestedInIfxComponent } from './p-Bw2fh5LT.js';
 import { c as classNames } from './p-DMLRPGid.js';
-import { d as defineCustomElement$1 } from './p-Bq-GdSe7.js';
+import { d as defineCustomElement$1 } from './p-BctmSAbW.js';
 
 const iconButtonCss = ":host{display:inline-flex}.btn{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:8px;gap:8px;color:#FFFFFF;flex-direction:row;font-weight:600;border-radius:1px;line-height:1.5rem;outline:none;font-family:var(--ifx-font-family);text-decoration:none;user-select:none;border:1px solid rgba(0, 0, 0, 0);font-size:1rem;transition:color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out}.btn:not(.disabled){cursor:pointer}.btn-primary{color:#FFFFFF;background-color:#0A8276}.btn-primary:disabled,.btn-primary.disabled{background-color:#BFBBBB;color:#FFFFFF;pointer-events:none}.btn-secondary{color:#0A8276;background-color:#FFFFFF;border-color:#0A8276}.btn-secondary:disabled,.btn-secondary.disabled{background-color:#FFFFFF;border:1px solid #BFBBBB;color:#BFBBBB;pointer-events:none}.btn-tertiary{background-color:transparent;color:#1D1D1D}.btn-tertiary:disabled,.btn-tertiary.disabled{color:#BFBBBB;pointer-events:none}.btn.icon-button{min-width:initial;min-height:initial;width:40px;height:40px;padding:0;justify-content:center}.btn.icon-button.btn-round{border-radius:100px}.btn.icon-button.btn-square{border-radius:1px}.btn.icon-button.btn-s{width:32px;height:32px;padding:8px}.btn.icon-button.btn-l{width:48px;height:48px;padding:8px}.btn.btn-primary:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276}.btn.btn-primary:not(:disabled,.disabled):hover{background-color:#08665C;border-color:#08665C}.btn.btn-primary:not(:disabled,.disabled):active,.btn.btn-primary:not(:disabled,.disabled).active{background-color:#06534B;border-color:#06534B}.btn.btn-secondary:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276}.btn.btn-secondary:not(:disabled,.disabled):hover{background-color:#08665C;border-color:#08665C;color:#FFFFFF}.btn.btn-secondary:not(:disabled,.disabled):active,.btn.btn-secondary:not(:disabled,.disabled).active{background-color:#06534B;border-color:#06534B}.btn.btn-tertiary:not(:disabled,.disabled):focus:not(:active,.active){outline:none;color:#1D1D1D;box-shadow:0 0 0 0px #FFFFFF, 0 0 0 2px #0A8276}.btn.btn-tertiary:not(:disabled,.disabled):hover{color:#0A8276}.btn.btn-tertiary:not(:disabled,.disabled):active,.btn.btn-tertiary:not(:disabled,.disabled).active{color:#08665C}";
 
@@ -38,7 +38,7 @@ const IconButton = /*@__PURE__*/ proxyCustomElement(class IconButton extends H {
         }
     }
     render() {
-        return (h(Host, { key: '168272c5554ac3582a1441acf209c93bec1a1f50', "aria-disabled": this.disabled, "aria-label": this.ariaLabel }, this.href ? (h("a", { ref: (el) => (this.focusableElement = el), class: this.getClassNames(), href: !this.disabled ? this.href : undefined, target: this.target, rel: this.target === '_blank' ? 'noopener noreferrer' : undefined }, h("ifx-icon", { icon: this.internalIcon }))) : (h("button", { class: this.getClassNames(), type: "button", disabled: this.disabled }, h("ifx-icon", { icon: this.internalIcon })))));
+        return (h(Host, { key: 'd438b7c3e600add49dad57ed58cc778b86775643', "aria-disabled": this.disabled, "aria-label": this.ariaLabel }, this.href ? (h("a", { ref: (el) => (this.focusableElement = el), class: this.getClassNames(), href: !this.disabled ? this.href : undefined, target: this.target, rel: this.target === '_blank' ? 'noopener noreferrer' : undefined }, h("ifx-icon", { icon: this.internalIcon }))) : (h("button", { class: this.getClassNames(), type: "button", disabled: this.disabled }, h("ifx-icon", { icon: this.internalIcon })))));
     }
     getVariantClass() {
         return `${this.variant}` === "secondary"
@@ -102,6 +102,6 @@ function defineCustomElement() {
 }
 
 export { IconButton as I, defineCustomElement as d };
-//# sourceMappingURL=p-r7hBylnC.js.map
+//# sourceMappingURL=p-B-erGWs9.js.map
 
-//# sourceMappingURL=p-r7hBylnC.js.map
+//# sourceMappingURL=p-B-erGWs9.js.map

package/dist/components/{p-r7hBylnC.js.map → p-B-erGWs9.js.map}

@@ -1 +1 @@
-{"file":"p-r7hBylnC.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"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); // tokens.$ifxFontFamilyBody;\n\n\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, Watch, State } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking'; \nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\nimport classNames from 'classnames';\n\n@Component({\n  tag: 'ifx-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  @Prop() ariaLabel: string | null;\n  @State() internalIcon: string;\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  @Watch('icon')\n  updateIcon(newIcon: string) { \n    this.internalIcon = newIcon;\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    this.internalIcon = this.icon;\n  }\n\n  async componentDidLoad() { \n    if(!isNestedInIfxComponent(this.el)) { \n      const framework = detectFramework();\n      trackComponent('ifx-icon-button', await framework)\n    }\n  }\n\n  render() {\n    return (\n      <Host \n        aria-disabled={this.disabled}\n        aria-label={this.ariaLabel}> \n        {this.href ? (\n          <a\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.internalIcon}></ifx-icon>\n          </a>\n        ) : (\n          <button\n            class={this.getClassNames()}\n            type=\"button\"\n            disabled={this.disabled}\n          >\n            <ifx-icon icon={this.internalIcon}></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}
+{"file":"p-B-erGWs9.js","mappings":";;;;;;AAAA,MAAM,aAAa,GAAG,w4EAAw4E;;MCYj5E,UAAU,iBAAAA,kBAAA,CAAA,MAAA,UAAA,SAAAC,CAAA,CAAA;AANvB,IAAA,WAAA,GAAA;;;;AAYU,QAAA,IAAM,CAAA,MAAA,GAAW,OAAO;AACxB,QAAA,IAAK,CAAA,KAAA,GAAW,OAAO;AAgGhC;AAxFC,IAAA,WAAW,CAAC,KAAY,EAAA;AACtB,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,KAAK,CAAC,wBAAwB,EAAE;;;AAKpC,IAAA,UAAU,CAAC,OAAe,EAAA;AACxB,QAAA,IAAI,CAAC,YAAY,GAAG,OAAO;;AAI7B,IAAA,MAAM,QAAQ,GAAA;AACZ,QAAA,IAAI,CAAC,gBAAgB,CAAC,KAAK,EAAE;;IAG/B,iBAAiB,GAAA;AACf,QAAA,IAAI,IAAI,CAAC,KAAK,KAAK,EAAE,EAAE;AACrB,YAAA,IAAI,CAAC,KAAK,GAAG,OAAO;;AAEtB,QAAA,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,IAAI;;AAG/B,IAAA,MAAM,gBAAgB,GAAA;QACpB,IAAG,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;AACnC,YAAA,MAAM,SAAS,GAAG,eAAe,EAAE;AACnC,YAAA,cAAc,CAAC,iBAAiB,EAAE,MAAM,SAAS,CAAC;;;IAItD,MAAM,GAAA;AACJ,QAAA,QACE,CAAC,CAAA,IAAI,EACY,EAAA,GAAA,EAAA,0CAAA,EAAA,eAAA,EAAA,IAAI,CAAC,QAAQ,EAAA,YAAA,EAChB,IAAI,CAAC,SAAS,EACzB,EAAA,IAAI,CAAC,IAAI,IACR,CAAA,CAAA,GAAA,EAAA,EACE,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,EAAA,EAEjE,CAAA,CAAA,UAAA,EAAA,EAAU,IAAI,EAAE,IAAI,CAAC,YAAY,EAAA,CAAa,CAC5C,KAEJ,CACE,CAAA,QAAA,EAAA,EAAA,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,EAC3B,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAA,EAEvB,CAAU,CAAA,UAAA,EAAA,EAAA,IAAI,EAAE,IAAI,CAAC,YAAY,GAAa,CACvC,CACV,CACI;;IAIX,eAAe,GAAA;AACb,QAAA,OAAO,GAAG,IAAI,CAAC,OAAO,CAAA,CAAE,KAAK;AAC3B,cAAE,CAAW,SAAA;AACb,cAAE,CAAG,EAAA,IAAI,CAAC,OAAO,CAAA,CAAE,KAAK;AACtB,kBAAE,CAAU,QAAA;kBACV,SAAS;;IAGjB,YAAY,GAAA;QACV,IAAI,CAAA,EAAG,IAAI,CAAC,IAAI,EAAE,KAAK,IAAI,EAAE;AAC3B,YAAA,OAAO,IAAI;;aAER,IAAI,CAAA,EAAG,IAAI,CAAC,IAAI,EAAE,KAAK,GAAG,EAAE;AAC/B,YAAA,OAAO,GAAG;;aAEP,IAAI,CAAA,EAAG,IAAI,CAAC,IAAI,EAAE,KAAK,GAAG,EAAE;AAC/B,YAAA,OAAO,GAAG;;;AAEP,YAAA,OAAO,EAAE;;IAGhB,aAAa,GAAA;AACX,QAAA,OAAO,UAAU,CACf,iBAAiB,EACjB,CAAO,IAAA,EAAA,IAAI,CAAC,KAAK,CAAA,CAAE,EACnB,IAAI,CAAC,IAAI,IAAI,OAAO,IAAI,CAAC,YAAY,EAAE,CAAA,CAAE,EACzC,CAAA,IAAA,EAAO,IAAI,CAAC,eAAe,EAAE,CAAE,CAAA,EAC/B,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,CAChC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"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); // tokens.$ifxFontFamilyBody;\n\n\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, Watch, State } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking'; \nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\nimport classNames from 'classnames';\n\n@Component({\n  tag: 'ifx-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  @Prop() ariaLabel: string | null;\n  @State() internalIcon: string;\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  @Watch('icon')\n  updateIcon(newIcon: string) { \n    this.internalIcon = newIcon;\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    this.internalIcon = this.icon;\n  }\n\n  async componentDidLoad() { \n    if(!isNestedInIfxComponent(this.el)) { \n      const framework = detectFramework();\n      trackComponent('ifx-icon-button', await framework)\n    }\n  }\n\n  render() {\n    return (\n      <Host \n        aria-disabled={this.disabled}\n        aria-label={this.ariaLabel}> \n        {this.href ? (\n          <a\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.internalIcon}></ifx-icon>\n          </a>\n        ) : (\n          <button\n            class={this.getClassNames()}\n            type=\"button\"\n            disabled={this.disabled}\n          >\n            <ifx-icon icon={this.internalIcon}></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-DUpz5Fu_.js → p-B2j8iujQ.js}

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, c as createEvent, h } from './index.js';
-import { d as defineCustomElement$2 } from './p-CqzFm2Ow.js';
-import { d as defineCustomElement$1 } from './p-Bq-GdSe7.js';
+import { d as defineCustomElement$2 } from './p-BfmQxZSi.js';
+import { d as defineCustomElement$1 } from './p-BctmSAbW.js';
 
 const chipItemCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}.chip-item{display:flex;align-items:center;gap:8px;padding:8px 16px;user-select:none;transition:all 100ms ease;transition-property:background, color}.chip-item:hover{cursor:pointer;background-color:#EEEDED}.chip-item:active{background-color:#BFBBBB}.chip-item:focus{outline:2px solid #0A8276}.chip-item.chip-item--large{font:400 1rem/1.5rem \"Source Sans 3\"}.chip-item.chip-item--small{font:400 0.875rem/1.25rem \"Source Sans 3\"}.chip-item.chip-item--selected{color:#0A8276}.chip-item.chip-item--selected .chip-item__selected-indicator{display:block}.chip-item__selected-indicator{display:none;margin-left:auto}";
 
@@ -65,9 +65,9 @@ const ChipItem = /*@__PURE__*/ proxyCustomElement(class ChipItem extends H {
         this.handleSelectedState();
     }
     render() {
-        return (h("div", { key: '0feac58e2e7104e948633503bb6e1e41a7933963', class: `chip-item chip-item--${this.chipState.size} 
+        return (h("div", { key: 'e74d43ca63eacb144865a6c1bd40b5bf2addc426', class: `chip-item chip-item--${this.chipState.size} 
                     chip-item--${(this.selected && this.chipState.variant) === 'single' ? 'selected' : ''}`, tabIndex: 0, onClick: () => { this.handleItemClick(); }, onKeyDown: (e) => { this.handleItemKeyDown(e); }, role: "option", "aria-selected": this.selected.toString() }, this.chipState.variant === 'multi' &&
-            h("ifx-checkbox", { key: '5bff8f27bda9843ffbad86fed014e6f5b1df3b9c', checked: this.selected, tabIndex: -1, size: 's' }), h("div", { key: 'e4ed1025410e1821e1549d8f29f7cc6c5ba57a2d', class: 'chip-item__label' }, " ", h("slot", { key: '541c9acff7c19e816f75cea1d17de319eefb8536' }), " "), h("div", { key: 'e5fc6f9e1d1e40bcc2ac591f2e550abcffa4cdad', class: 'chip-item__selected-indicator' }, h("ifx-icon", { key: '24c75f1d1eb8927d5193875aacda59ce9117e0df', icon: 'check-16' }, " "))));
+            h("ifx-checkbox", { key: '7bd93f94f3155f73fdcd8798e42f6a11201ac11d', checked: this.selected, tabIndex: -1, size: 's' }), h("div", { key: '854a247db00e595ecfb38e80b257ab1270ef36f3', class: 'chip-item__label' }, " ", h("slot", { key: '6687cc2e52f714370c93b16e367d62b30a9ea7b0' }), " "), h("div", { key: '440a71674a3769490cd843d5f31c3a22e0b08cae', class: 'chip-item__selected-indicator' }, h("ifx-icon", { key: '3ed8148581d26cf7e142914627eda330cbfed896', icon: 'check-16' }, " "))));
     }
     get chipItem() { return this; }
     static get watchers() { return {
@@ -106,6 +106,6 @@ function defineCustomElement() {
 }
 
 export { ChipItem as C, defineCustomElement as d };
-//# sourceMappingURL=p-DUpz5Fu_.js.map
+//# sourceMappingURL=p-B2j8iujQ.js.map
 
-//# sourceMappingURL=p-DUpz5Fu_.js.map
+//# sourceMappingURL=p-B2j8iujQ.js.map

package/dist/components/{p-DUpz5Fu_.js.map → p-B2j8iujQ.js.map}

@@ -1 +1 @@
-{"file":"p-DUpz5Fu_.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/chip/chip-item/chip-item.scss?tag=ifx-chip-item&encapsulation=shadow","src/components/chip/chip-item/chip-item.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n.chip-item {\n    display: flex;\n    align-items: center;\n    gap: tokens.$ifxSpace100;\n    \n    padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\n    \n    user-select: none;\n    \n    transition: all 100ms ease;\n    transition-property: background, color;\n    \n    &:hover {\n        cursor: pointer;\n        \n        background-color: tokens.$ifxColorEngineering200;\n    }\n    \n    &:active {\n        background-color: tokens.$ifxColorEngineering300;\n    }\n\n    &:focus {\n        outline: 2px solid tokens.$ifxColorOcean500;\n    }\n    \n    &.chip-item--large {\n        font: tokens.$ifxBodyBody03;\n    }\n    \n    &.chip-item--small {\n        font: tokens.$ifxBodyBody04;\n    }\n\n    &.chip-item--selected {\n        color: tokens.$ifxColorOcean500;\n\n        .chip-item__selected-indicator {\n            display: block;\n        }\n    }\n}\n\n.chip-item__selected-indicator {\n    display: none;\n    \n    margin-left: auto;\n}\n\n","import { h,\n    Component,\n    Element,\n    Event,\n    EventEmitter, \n    Listen,\n    Prop, \n    Watch } from '@stencil/core';\nimport { ChipItemSelectEvent, ChipState } from '../interfaces';\n\n@Component({\ntag: 'ifx-chip-item',\nstyleUrl: 'chip-item.scss',\nshadow: true\n})\n\nexport class ChipItem {\n@Element() chipItem: HTMLIfxChipItemElement;\n\n@Event({ composed: false }) ifxChipItemSelect: EventEmitter<ChipItemSelectEvent>;\n\n@Prop() value: string = undefined;\n@Prop() chipState: ChipState = { emitIfxChipItemSelect: true, variant: 'multi', size: 'large' }; \n@Prop({ mutable: true, reflect: true }) selected: boolean = false;\n\n@Listen('ifxChipItemSelect', { target: 'body' })\nupdateItemSelection(event: CustomEvent<ChipItemSelectEvent>) {\n   if (this.chipState.variant === 'single') {\n       const target = event.target as HTMLIfxChipItemElement;\n       /* Also making sure chip items are from the same group (parent) while unselecting. */\n       if (this.chipItem !== target && this.chipItem.parentElement === target.parentElement) {\n           this.selected = false;\n       }\n   }\n} \n\n@Watch('selected')\nvalidateSelected(newValue: boolean, oldValue: boolean) {\n   if (newValue !== oldValue) {\n       /* Do not emit if ChipState does not allow. */\n       if (this.chipState.emitIfxChipItemSelect){\n           this.emitIfxChipItemSelectEvent();\n       } else {\n           this.chipState.emitIfxChipItemSelect = true;\n       }\n   }\n} \n\ngetItemLabel(): string {\n   return this.chipItem.innerText as string;\n}\n\ntoggleItemSelection() {\n   this.selected = !this.selected;\n}\n   \n\nemitIfxChipItemSelectEvent(emitIfxChange: boolean = true) {\n   this.ifxChipItemSelect.emit({ emitIfxChange: emitIfxChange,\n                           key: this.chipState.key,\n                           label: this.getItemLabel(), \n                           selected: this.selected, \n                           value: this.value });\n}\n\nhandleItemClick() {\n   this.toggleItemSelection();\n}\n\nhandleItemKeyDown(event: KeyboardEvent) {\n   if (event.code === 'Enter' || event.code === 'Space') {\n       this.toggleItemSelection();\n   }\n}\n\nhandleSelectedState() {\n   if (this.selected) {\n       this.emitIfxChipItemSelectEvent(false);\n   }\n}\n\n\ncomponentWillLoad() {\n   /* Propogating the selected state to the Chip (Parent) component if it is set. */\n   this.handleSelectedState();\n}\n\nrender() {\n   return (\n       <div class={`chip-item chip-item--${this.chipState.size} \n                    chip-item--${(this.selected && this.chipState.variant) === 'single' ? 'selected' : ''}`} \n           tabIndex={0}\n           onClick={() => {this.handleItemClick()}}\n           onKeyDown={(e) => {this.handleItemKeyDown(e)}}\n           role=\"option\"\n           aria-selected={this.selected.toString()}>    \n           {/* Checkbox; renders only in 'multi' variant. */}\n           { \n               this.chipState.variant === 'multi' &&\n               <ifx-checkbox checked={this.selected}\n                   tabIndex={-1} \n                   size='s'>\n               </ifx-checkbox>\n           }\n\n           <div class='chip-item__label'> <slot /> </div>\n\n           {/* Selected indicator only visible in 'single' variant. */}\n           <div class='chip-item__selected-indicator'> \n               <ifx-icon icon='check-16'> </ifx-icon> \n           </div>\n\n       </div>\n   );\n}\n}"],"version":3}
+{"file":"p-B2j8iujQ.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/chip/chip-item/chip-item.scss?tag=ifx-chip-item&encapsulation=shadow","src/components/chip/chip-item/chip-item.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n.chip-item {\n    display: flex;\n    align-items: center;\n    gap: tokens.$ifxSpace100;\n    \n    padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\n    \n    user-select: none;\n    \n    transition: all 100ms ease;\n    transition-property: background, color;\n    \n    &:hover {\n        cursor: pointer;\n        \n        background-color: tokens.$ifxColorEngineering200;\n    }\n    \n    &:active {\n        background-color: tokens.$ifxColorEngineering300;\n    }\n\n    &:focus {\n        outline: 2px solid tokens.$ifxColorOcean500;\n    }\n    \n    &.chip-item--large {\n        font: tokens.$ifxBodyBody03;\n    }\n    \n    &.chip-item--small {\n        font: tokens.$ifxBodyBody04;\n    }\n\n    &.chip-item--selected {\n        color: tokens.$ifxColorOcean500;\n\n        .chip-item__selected-indicator {\n            display: block;\n        }\n    }\n}\n\n.chip-item__selected-indicator {\n    display: none;\n    \n    margin-left: auto;\n}\n\n","import { h,\n    Component,\n    Element,\n    Event,\n    EventEmitter, \n    Listen,\n    Prop, \n    Watch } from '@stencil/core';\nimport { ChipItemSelectEvent, ChipState } from '../interfaces';\n\n@Component({\ntag: 'ifx-chip-item',\nstyleUrl: 'chip-item.scss',\nshadow: true\n})\n\nexport class ChipItem {\n@Element() chipItem: HTMLIfxChipItemElement;\n\n@Event({ composed: false }) ifxChipItemSelect: EventEmitter<ChipItemSelectEvent>;\n\n@Prop() value: string = undefined;\n@Prop() chipState: ChipState = { emitIfxChipItemSelect: true, variant: 'multi', size: 'large' }; \n@Prop({ mutable: true, reflect: true }) selected: boolean = false;\n\n@Listen('ifxChipItemSelect', { target: 'body' })\nupdateItemSelection(event: CustomEvent<ChipItemSelectEvent>) {\n   if (this.chipState.variant === 'single') {\n       const target = event.target as HTMLIfxChipItemElement;\n       /* Also making sure chip items are from the same group (parent) while unselecting. */\n       if (this.chipItem !== target && this.chipItem.parentElement === target.parentElement) {\n           this.selected = false;\n       }\n   }\n} \n\n@Watch('selected')\nvalidateSelected(newValue: boolean, oldValue: boolean) {\n   if (newValue !== oldValue) {\n       /* Do not emit if ChipState does not allow. */\n       if (this.chipState.emitIfxChipItemSelect){\n           this.emitIfxChipItemSelectEvent();\n       } else {\n           this.chipState.emitIfxChipItemSelect = true;\n       }\n   }\n} \n\ngetItemLabel(): string {\n   return this.chipItem.innerText as string;\n}\n\ntoggleItemSelection() {\n   this.selected = !this.selected;\n}\n   \n\nemitIfxChipItemSelectEvent(emitIfxChange: boolean = true) {\n   this.ifxChipItemSelect.emit({ emitIfxChange: emitIfxChange,\n                           key: this.chipState.key,\n                           label: this.getItemLabel(), \n                           selected: this.selected, \n                           value: this.value });\n}\n\nhandleItemClick() {\n   this.toggleItemSelection();\n}\n\nhandleItemKeyDown(event: KeyboardEvent) {\n   if (event.code === 'Enter' || event.code === 'Space') {\n       this.toggleItemSelection();\n   }\n}\n\nhandleSelectedState() {\n   if (this.selected) {\n       this.emitIfxChipItemSelectEvent(false);\n   }\n}\n\n\ncomponentWillLoad() {\n   /* Propogating the selected state to the Chip (Parent) component if it is set. */\n   this.handleSelectedState();\n}\n\nrender() {\n   return (\n       <div class={`chip-item chip-item--${this.chipState.size} \n                    chip-item--${(this.selected && this.chipState.variant) === 'single' ? 'selected' : ''}`} \n           tabIndex={0}\n           onClick={() => {this.handleItemClick()}}\n           onKeyDown={(e) => {this.handleItemKeyDown(e)}}\n           role=\"option\"\n           aria-selected={this.selected.toString()}>    \n           {/* Checkbox; renders only in 'multi' variant. */}\n           { \n               this.chipState.variant === 'multi' &&\n               <ifx-checkbox checked={this.selected}\n                   tabIndex={-1} \n                   size='s'>\n               </ifx-checkbox>\n           }\n\n           <div class='chip-item__label'> <slot /> </div>\n\n           {/* Selected indicator only visible in 'single' variant. */}\n           <div class='chip-item__selected-indicator'> \n               <ifx-icon icon='check-16'> </ifx-icon> \n           </div>\n\n       </div>\n   );\n}\n}"],"version":3}

package/dist/components/{p-CssgRUtq.js → p-B6Fm7iTY.js}

@@ -1,11 +1,11 @@
 import { p as proxyCustomElement, H, c as createEvent, h } from './index.js';
 import { d as detectFramework, t as trackComponent } from './p-DcmcuUOA.js';
 import { i as isNestedInIfxComponent } from './p-Bw2fh5LT.js';
-import { d as defineCustomElement$3 } from './p-Bq-GdSe7.js';
-import { d as defineCustomElement$2 } from './p-r7hBylnC.js';
-import { d as defineCustomElement$1 } from './p-VdirQ-rJ.js';
+import { d as defineCustomElement$3 } from './p-BctmSAbW.js';
+import { d as defineCustomElement$2 } from './p-B-erGWs9.js';
+import { d as defineCustomElement$1 } from './p-ADIPRswj.js';
 
-const paginationCss = "@charset \"UTF-8\";:root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}:host{display:inline-flex}.container{display:inline-flex;justify-content:center;align-items:center;gap:32px;font-family:var(--ifx-font-family)}.container .items__per-page-wrapper{display:flex;align-items:center;gap:16px}.container .items__per-page-wrapper .items__per-page-label{color:#1D1D1D;font-size:14px;font-style:normal;font-weight:600;line-height:20px}.container .items__per-page-wrapper .items__per-page-field{display:flex;flex-direction:column;align-items:flex-start}.container .items__per-page-wrapper .items__per-page-field ifx-select{width:92px}.container .items__total-wrapper{display:flex;justify-content:center;align-items:center;gap:12px}.container .items__total-wrapper .items__total-button{display:flex;width:40px;height:40px;justify-content:center;align-items:center;border-radius:100px;border:1px solid #BFBBBB;background:#FFF}.container .items__total-wrapper .page__numbers-wrapper{display:flex;justify-content:center;align-items:center;gap:12px}.container .items__total-wrapper .page__numbers-wrapper .page__number-item{display:flex;padding:6px;flex-direction:column;justify-content:center;align-items:center;gap:10px;border-radius:100px}.container .items__total-wrapper .page__numbers-wrapper .page__number-item.active{background-color:#0A8276}.container .items__total-wrapper .page__numbers-wrapper .page__number-item.active span{color:#fff}.container .items__total-wrapper .page__numbers-wrapper .page__number-item:hover{cursor:pointer}.container .items__total-wrapper .page__numbers-wrapper .page__number-item:hover:not(.active){background-color:#ddd}.container .items__total-wrapper .page__numbers-wrapper .page__number-item:active:not(.active){background-color:#575352}.container .items__total-wrapper .page__numbers-wrapper .page__number-item span{display:flex;width:16px;height:16px;flex-direction:column;justify-content:center;color:#1D1D1D;text-align:center;font-size:13px;font-style:normal;font-weight:400;line-height:20px}.pagination{display:flex}.pagination ifx-icon-button:first-of-type{margin-right:12px}.pagination ifx-icon-button:last-of-type{margin-left:12px}.page__button{padding:8px;border-radius:100px}ol{list-style-type:none;padding:0;margin:0;display:inline-flex;align-items:center;gap:12px}li{display:flex;flex-direction:column;justify-content:center;align-items:center;border-radius:100px}li:hover:not(.active) page__button{background-color:#EEEDED}li:active:not(.active) .page__button{background-color:#575352;color:#fff}li.active{background-color:#0A8276}li.active .page__button{color:#fff}li:hover{cursor:pointer}li .page__button{text-decoration:none;display:flex;width:16px;height:16px;flex-direction:column;justify-content:center;color:#1D1D1D;text-align:center;font-size:13px;font-style:normal;font-weight:400;line-height:20px;align-items:center}.prev.disabled,.next.disabled{cursor:default}.prev.disabled:hover,.next.disabled:hover{cursor:default;text-decoration:none}.prev{margin-right:2.5px}.next{margin-left:2.5px}@media (min-width: 400px){li:first-child,li.active-sibling,li.active,li.active+li,li:last-child{display:inline-flex !important;flex-direction:row}li:first-child:nth-last-child(n+8)~li{display:none}li:first-child:nth-last-child(n+8)~li.active-sibling:before{content:\"…\";font-size:13px;display:inline-block;margin-right:6px}li:first-child:nth-last-child(n+8)~li.active+li:after{content:\"…\";font-size:13px;display:inline-block;margin-left:6px}li:first-child:nth-last-child(n+8)~li:nth-last-child(-n+5){display:inline-flex;flex-direction:row}li:first-child:nth-last-child(n+8)~li:nth-last-child(5):before{content:\"…\";font-size:13px;display:inline-block;margin-right:6px}li:first-child:nth-last-child(n+8)~li:nth-child(-n+2):before,li:first-child:nth-last-child(n+8)~li:nth-child(-n+2):after,li:first-child:nth-last-child(n+8)~li:nth-last-child(-n+2):before,li:first-child:nth-last-child(n+8)~li:nth-last-child(-n+2):after,li:first-child:nth-last-child(n+8)~li.active-sibling:nth-last-child(-n+4):before,li:first-child:nth-last-child(n+8)~li.active-sibling:nth-last-child(-n+4):after{display:none !important}li:first-child:nth-last-child(n+8).active~li:nth-last-child(-n+5),li:first-child:nth-last-child(n+8)~li.active~li:nth-last-child(-n+5){display:none}li:first-child:nth-last-child(n+8).active~li:nth-last-child(-n+5):before,li:first-child:nth-last-child(n+8)~li.active~li:nth-last-child(-n+5):before{display:none}li:first-child:nth-last-child(n+8).active~li:nth-child(-n+5),li:first-child:nth-last-child(n+8)~li.active~li:nth-child(-n+5){display:inline-flex !important;flex-direction:row}li:first-child:nth-last-child(n+8).active~li:nth-child(-n+4):after,li:first-child:nth-last-child(n+8)~li.active~li:nth-child(-n+4):after{display:none}li:first-child:nth-last-child(n+8).active~li:nth-child(5):after,li:first-child:nth-last-child(n+8)~li.active~li:nth-child(5):after{content:\"…\";font-size:13px;display:inline-block;margin-left:6px}li:first-child:nth-last-child(n+8).active:before,li:first-child:nth-last-child(n+8).active:after,li:first-child:nth-last-child(n+8)~li.active:before,li:first-child:nth-last-child(n+8)~li.active:after{display:none}}";
+const paginationCss = "@charset \"UTF-8\";:root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}:host{display:inline-flex}.container{display:inline-flex;justify-content:center;align-items:center;gap:32px;font-family:var(--ifx-font-family)}.container .items__per-page-wrapper{display:flex;align-items:center;gap:16px}.container .items__per-page-wrapper .items__per-page-label{color:#1D1D1D;font-size:14px;font-style:normal;font-weight:600;line-height:20px}.container .items__per-page-wrapper .items__per-page-field{display:flex;flex-direction:column;align-items:flex-start}.container .items__per-page-wrapper .items__per-page-field ifx-select{width:92px}.container .items__total-wrapper{display:flex;justify-content:center;align-items:center;gap:12px}.container .items__total-wrapper .items__total-button{display:flex;width:40px;height:40px;justify-content:center;align-items:center;border-radius:100px;border:1px solid #BFBBBB;background:#FFF}.container .items__total-wrapper .page__numbers-wrapper{display:flex;justify-content:center;align-items:center;gap:12px}.container .items__total-wrapper .page__numbers-wrapper .page__number-item{display:flex;padding:6px;flex-direction:column;justify-content:center;align-items:center;gap:10px;border-radius:100px}.container .items__total-wrapper .page__numbers-wrapper .page__number-item.active{background-color:#0A8276}.container .items__total-wrapper .page__numbers-wrapper .page__number-item.active span{color:#fff}.container .items__total-wrapper .page__numbers-wrapper .page__number-item:hover{cursor:pointer}.container .items__total-wrapper .page__numbers-wrapper .page__number-item:hover:not(.active){background-color:#ddd}.container .items__total-wrapper .page__numbers-wrapper .page__number-item:active:not(.active){background-color:#575352}.container .items__total-wrapper .page__numbers-wrapper .page__number-item span{display:flex;width:16px;height:16px;flex-direction:column;justify-content:center;color:#1D1D1D;text-align:center;font-size:13px;font-style:normal;font-weight:400;line-height:20px}.pagination{display:flex}.pagination ifx-icon-button:first-of-type{margin-right:12px}.pagination ifx-icon-button:last-of-type{margin-left:12px}a{padding:8px;border-radius:100px}ol{list-style-type:none;padding:0;margin:0;display:inline-flex;align-items:center;gap:12px}li{display:flex;flex-direction:column;justify-content:center;align-items:center;border-radius:100px}li:hover:not(.active) a{background-color:#EEEDED}li:active:not(.active) a{background-color:#575352;color:#fff}li.active{background-color:#0A8276}li.active a{color:#fff}li:hover{cursor:pointer}li a{text-decoration:none;display:flex;width:16px;height:16px;flex-direction:column;justify-content:center;color:#1D1D1D;text-align:center;font-size:13px;font-style:normal;font-weight:400;line-height:20px;align-items:center}.prev.disabled,.next.disabled{cursor:default}.prev.disabled:hover,.next.disabled:hover{cursor:default;text-decoration:none}.prev{margin-right:2.5px}.next{margin-left:2.5px}@media (min-width: 400px){li:first-child,li.active-sibling,li.active,li.active+li,li:last-child{display:inline-flex !important;flex-direction:row}li:first-child:nth-last-child(n+8)~li{display:none}li:first-child:nth-last-child(n+8)~li.active-sibling:before{content:\"…\";font-size:13px;display:inline-block;margin-right:6px}li:first-child:nth-last-child(n+8)~li.active+li:after{content:\"…\";font-size:13px;display:inline-block;margin-left:6px}li:first-child:nth-last-child(n+8)~li:nth-last-child(-n+5){display:inline-flex;flex-direction:row}li:first-child:nth-last-child(n+8)~li:nth-last-child(5):before{content:\"…\";font-size:13px;display:inline-block;margin-right:6px}li:first-child:nth-last-child(n+8)~li:nth-child(-n+2):before,li:first-child:nth-last-child(n+8)~li:nth-child(-n+2):after,li:first-child:nth-last-child(n+8)~li:nth-last-child(-n+2):before,li:first-child:nth-last-child(n+8)~li:nth-last-child(-n+2):after,li:first-child:nth-last-child(n+8)~li.active-sibling:nth-last-child(-n+4):before,li:first-child:nth-last-child(n+8)~li.active-sibling:nth-last-child(-n+4):after{display:none !important}li:first-child:nth-last-child(n+8).active~li:nth-last-child(-n+5),li:first-child:nth-last-child(n+8)~li.active~li:nth-last-child(-n+5){display:none}li:first-child:nth-last-child(n+8).active~li:nth-last-child(-n+5):before,li:first-child:nth-last-child(n+8)~li.active~li:nth-last-child(-n+5):before{display:none}li:first-child:nth-last-child(n+8).active~li:nth-child(-n+5),li:first-child:nth-last-child(n+8)~li.active~li:nth-child(-n+5){display:inline-flex !important;flex-direction:row}li:first-child:nth-last-child(n+8).active~li:nth-child(-n+4):after,li:first-child:nth-last-child(n+8)~li.active~li:nth-child(-n+4):after{display:none}li:first-child:nth-last-child(n+8).active~li:nth-child(5):after,li:first-child:nth-last-child(n+8)~li.active~li:nth-child(5):after{content:\"…\";font-size:13px;display:inline-block;margin-left:6px}li:first-child:nth-last-child(n+8).active:before,li:first-child:nth-last-child(n+8).active:after,li:first-child:nth-last-child(n+8)~li.active:before,li:first-child:nth-last-child(n+8)~li.active:after{display:none}}";
 
 const Pagination = /*@__PURE__*/ proxyCustomElement(class Pagination extends H {
     constructor() {
@@ -168,7 +168,7 @@ const Pagination = /*@__PURE__*/ proxyCustomElement(class Pagination extends H {
         this.initPagination();
     }
     render() {
-        return (h("div", { key: '14f71cd0291d0b01d3b9da91ecec8d3908796107', class: "container" }, h("div", { key: 'd28f3b1a05cd937eec0efa30b661c1e5671542d3', class: "items__per-page-wrapper" }, h("div", { key: '504286b0c1d4d1a77e283612389e2f0a98f76ce3', class: "items__per-page-label" }, "Results per Page"), h("div", { key: '61fb210192777dc3ebf7810f0d311eae2abd3dc3', class: "items__per-page-field" }, h("ifx-select", { key: 'a576ef3d2ee4feb8d9f04550fa08e0a75fdafc07', id: 'itemsPerPageSelect', placeholder: 'false', "show-search": 'false', value: undefined, disabled: false, error: false, size: "s", options: this.filteredItemsPerPage, "placeholder-value": "Select" }))), h("nav", { key: '47646225b5ab6cfa65b5620fda57300bc39e23e9', class: "items__total-wrapper", "aria-label": `Pagination navigation, page ${this.internalPage} of ${this.numberOfPages.length}` }, h("div", { key: '6bdbf4cb181b372491efc177b26c75e1b7677c64', class: "pagination" }, h("ifx-icon-button", { key: 'ede2c6a66a75510ecc7244be7a7d00dae16f9d3a', class: "prev", icon: "arrow-left-16", "aria-label": 'Previous Page', onClick: () => this.changePage(this.internalPage - 1) }), h("ol", { key: '43f63193bf3fc7c93fdf714e328da4f1333aca88' }, this.visiblePages.map((page, i) => typeof page === 'number' ? (h("li", { key: `page-${page}`, class: { [this.CLASS_ACTIVE]: page === this.internalPage }, "data-page": page }, h("span", { class: 'page__button', role: "button", tabindex: "0", "aria-current": page === this.internalPage ? "page" : undefined, "aria-label": `Page ${page}`, onClick: () => this.changePage(page), onKeyDown: (e) => (e.key === 'Enter' || e.key === ' ') && this.changePage(page) }, page))) : (h("li", { class: "ellipsis", key: `ellipsis-${i}` }, h("span", { "aria-hidden": "true" }, "..."))))), h("ifx-icon-button", { key: '610f92b2a6af014529f5562409fa963d85654050', class: "next", icon: "arrow-right-16", "aria-label": 'Next Page', onClick: () => this.changePage(this.internalPage + 1) })))));
+        return (h("div", { key: '724b3d84f8dc469898c4126b76637c77567f195d', class: "container" }, h("div", { key: '171579231fc284e71acfe1df372e6750742a2973', class: "items__per-page-wrapper" }, h("div", { key: '916428fde974123aa1b805f4815eae6dc2a64097', class: "items__per-page-label" }, "Results per Page"), h("div", { key: '88e7827159c37eee23109dd956863bdc1335f043', class: "items__per-page-field" }, h("ifx-select", { key: '08fc2626e633d33dfa0565074464adc4533072f2', id: 'itemsPerPageSelect', placeholder: 'false', "show-search": 'false', value: undefined, disabled: false, error: false, size: "s", options: this.filteredItemsPerPage, "placeholder-value": "Select" }))), h("div", { key: '1e0299c9b3ba3bbe229039cfe0f298a821b90aea', class: "items__total-wrapper" }, h("div", { key: 'f8c507a16e070b199a75b30138829528ee434ccd', class: "pagination" }, h("ifx-icon-button", { key: 'c6fd48710f97119a71745ff0909b7072aa645e21', class: "prev", icon: "arrow-left-16", onClick: () => this.changePage(this.internalPage - 1) }), h("ol", { key: '860a2420df4b9cdfbed1df0630e8227531b61276' }, this.visiblePages.map((page, i) => typeof page === 'number' ? (h("li", { key: `page-${page}`, class: { [this.CLASS_ACTIVE]: page === this.internalPage }, "data-page": page }, h("a", { href: "javascript:void(0)" }, page))) : (h("li", { class: "ellipsis", key: `ellipsis-${i}` }, h("span", null, "..."))))), h("ifx-icon-button", { key: 'c3645817a9dbc92185d0eef3c71c2231246b3d90', class: "next", icon: "arrow-right-16", onClick: () => this.changePage(this.internalPage + 1) })))));
     }
     get el() { return this; }
     static get watchers() { return {
@@ -219,6 +219,6 @@ function defineCustomElement() {
 }
 
 export { Pagination as P, defineCustomElement as d };
-//# sourceMappingURL=p-CssgRUtq.js.map
+//# sourceMappingURL=p-B6Fm7iTY.js.map
 
-//# sourceMappingURL=p-CssgRUtq.js.map
+//# sourceMappingURL=p-B6Fm7iTY.js.map

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

@@ -0,0 +1 @@
+{"file":"p-B6Fm7iTY.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"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); // tokens.$ifxFontFamilyBody;\n\n\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, Watch } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n  tag: 'ifx-pagination',\n  styleUrl: 'pagination.scss',\n  shadow: true\n})\nexport class Pagination {\n  @Element() el: HTMLElement;\n  @Event() ifxPageChange: EventEmitter;\n  @Event() ifxItemsPerPageChange: EventEmitter;\n  @Prop() currentPage: number = 1;\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  @State() visiblePages: (number | string)[] = [];\n \n  private CLASS_DISABLED = \"disabled\";\n  private CLASS_ACTIVE = \"active\";\n  private prevInternalPage: number;\n\n  @Watch('total')\n  watchTotalHandler() {\n    this.calculateNumberOfPages();\n    this.updateVisiblePages();\n  }\n\n  @Watch('currentPage')\n  currentPageWatcher(newVal: number) {\n    this.internalPage = Math.max(1, Math.min(newVal, this.numberOfPages.length));\n    this.calculateNumberOfPages();\n    this.updateVisiblePages();\n  }\n\n    @Listen('ifxSelect')\n    setItemsPerPage(e: CustomEvent) {\n      const selectedValue = e.detail?.value || e.detail?.label; \n      const newItemsPerPage = parseInt(selectedValue) || 10;\n\n      if (newItemsPerPage === this.internalItemsPerPage) {\n        return;\n      }\n\n      this.internalItemsPerPage = newItemsPerPage;\n      this.internalPage = 1; \n      this.calculateNumberOfPages();\n      this.updateVisiblePages();\n      this.handleEventEmission();\n    }\n\n    emitItemsPerPage(e) { \n      this.ifxItemsPerPageChange.emit((e as any).detail.label)\n    }\n\n  async componentDidLoad() {\n    const select = this.el.shadowRoot.querySelector('#itemsPerPageSelect');\n    if(select) { \n      select.addEventListener('ifxSelect', (e) => this.emitItemsPerPage(e))\n    }\n\n    if(!isNestedInIfxComponent(this.el)) { \n      const framework = detectFramework();\n      trackComponent('ifx-pagination', await framework)\n    }\n    this.initPagination();\n  }\n\n  disconnectedCallback() {\n    const select = this.el.shadowRoot.querySelector('#itemsPerPageSelect');\n    if (select) {\n      select.removeEventListener('ifxSelect', (e) => this.emitItemsPerPage(e));\n    }\n  }\n\n  updateVisiblePages() {\n    const buffer = 2;\n    const totalPages = this.numberOfPages.length;\n    const current = this.internalPage;\n    let pages: (number | string)[] = [];\n  \n    if (totalPages <= 5) {\n      pages = [...this.numberOfPages];\n    } else {\n      pages.push(1);\n  \n      if (current > buffer + 1) pages.push('...');\n  \n      let start = Math.max(2, current - buffer);\n      let end = Math.min(totalPages - 1, current + buffer);\n  \n      if (current <= buffer + 1) end = buffer * 2 + 1;\n      if (current >= totalPages - buffer) start = totalPages - buffer * 2;\n  \n      for (let i = start; i <= end; i++) pages.push(i);\n  \n      if (current < totalPages - buffer) pages.push('...');\n      pages.push(totalPages);\n    }\n  \n    this.visiblePages = [...new Set(pages)];\n  }\n\n  calculateNumberOfPages() {\n    const totalPages = Math.ceil(this.total / this.internalItemsPerPage);\n    this.numberOfPages = Array.from({ length: totalPages }, (_, i) => i + 1);\n    this.internalPage = Math.max(1, Math.min(this.currentPage, totalPages));\n  }\n\n  filterOptionsArray() { \n    const items = typeof this.itemsPerPage === 'string' ? \n      JSON.parse(this.itemsPerPage) : this.itemsPerPage;\n    this.filteredItemsPerPage = items.map(item => ({\n      ...item,\n      label: item.label || item.value\n    }));\n  }\n\n  componentWillLoad() {\n    this.filterOptionsArray();\n  \n    const selectedOption = this.filteredItemsPerPage.find(option => option.selected);\n    if (selectedOption) {\n      this.internalItemsPerPage = Number(selectedOption.value);\n    } else if (this.filteredItemsPerPage.length > 0) {\n      this.internalItemsPerPage = Number(this.filteredItemsPerPage[0].value);\n    }\n\n    this.calculateNumberOfPages();\n    this.internalPage = Math.max(1, Math.min(this.currentPage, this.numberOfPages.length));\n    this.updateVisiblePages();\n  }\n\n  componentWillUpdate() { \n     if (this.prevInternalPage !== this.internalPage) {\n      this.updateVisiblePages();\n      this.prevInternalPage = this.internalPage;\n    }\n  }\n\n  componentDidUpdate() {\n    this.initPagination();\n  }\n\n  handleEventEmission() {\n    this.ifxPageChange.emit({\n      currentPage: this.internalPage,\n      totalPages: this.numberOfPages.length,\n      itemsPerPage: this.internalItemsPerPage\n    });\n  }\n\n  initPagination() {\n    const pagination = this.el.shadowRoot.querySelector('.pagination');\n    if (!pagination) return;\n\n    const updateButtons = () => {\n      const prev = pagination.querySelector<HTMLButtonElement>('.prev');\n      const next = pagination.querySelector<HTMLButtonElement>('.next');\n      if (prev) {\n        prev.disabled = this.internalPage === 1;\n        prev.classList.toggle(this.CLASS_DISABLED, this.internalPage === 1);\n      }\n      if (next) {\n        next.disabled = this.internalPage === this.numberOfPages.length;\n        next.classList.toggle(this.CLASS_DISABLED, this.internalPage === this.numberOfPages.length);\n      }\n    };\n\n    pagination.querySelectorAll('li').forEach(li => {\n      li.removeEventListener('click', this.handlePageClick);\n      li.addEventListener('click', this.handlePageClick);\n    });\n\n    updateButtons();\n  }\n\n  private handlePageClick = (e: Event) => {\n    const li = e.currentTarget as HTMLLIElement;\n    const page = parseInt(li.dataset.page);\n    if (!isNaN(page)) this.changePage(page);\n  };\n\n  changePage(newPage: number) {\n    newPage = Math.max(1, Math.min(newPage, this.numberOfPages.length));\n    if (newPage === this.internalPage) return;\n    \n    this.internalPage = newPage;\n    this.handleEventEmission();\n    this.initPagination();\n  }\n\n  render() {\n    return (\n      <div 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              id='itemsPerPageSelect'\n              placeholder='false'\n              show-search='false'\n              value={undefined}\n              disabled={false}\n              error={false}\n              size=\"s\"\n              options={this.filteredItemsPerPage}\n              placeholder-value=\"Select\"\n            ></ifx-select>\n          </div>\n        </div>\n        \n        <div class=\"items__total-wrapper\">\n          <div class=\"pagination\">\n            <ifx-icon-button\n              class=\"prev\"\n              icon=\"arrow-left-16\"\n              onClick={() => this.changePage(this.internalPage - 1)}\n            ></ifx-icon-button>\n            \n            <ol>\n            {this.visiblePages.map((page, i) => typeof page === 'number' ? (\n              <li \n                key={`page-${page}`}\n                class={{ [this.CLASS_ACTIVE]: page === this.internalPage }}\n                data-page={page}\n              >\n                <a href=\"javascript:void(0)\">{page}</a>\n              </li>\n            ) : (\n              <li class=\"ellipsis\" key={`ellipsis-${i}`}>\n                <span>...</span>\n              </li>\n            ))}\n            </ol>\n            \n            <ifx-icon-button\n              class=\"next\"\n              icon=\"arrow-right-16\"\n              onClick={() => this.changePage(this.internalPage + 1)}\n            ></ifx-icon-button>\n          </div>\n        </div>\n      </div>\n    );\n  }\n}"],"version":3}

package/dist/components/{p-aoMMugzu.js → p-B8kacvl9.js}

@@ -27,7 +27,7 @@ const ProgressBar = /*@__PURE__*/ proxyCustomElement(class ProgressBar extends H
         }
     }
     render() {
-        return (h("div", { key: '8fca691ec07d456af7fb2559047d88dfecd00b68', role: "progressbar", "aria-valuenow": this.internalValue, "aria-valuemin": "0", "aria-valuemax": "100", "aria-label": `Progress: ${this.internalValue}%`, class: `progress-bar ${this.size}` }, h("div", { key: 'd481b45e3bb67f6a3bbfaa2b31fd529941abb976', class: "progress", style: { width: `${this.internalValue}%` } }, this.showLabel && this.size !== "s" && this.internalValue !== 0 && h("span", { key: '17f2a5a50a42bba13e780b3a14e2f5e6046eb02e', class: "label" }, `${this.internalValue}%`))));
+        return (h("div", { key: '8b85b9583b257c2bb08471502ec81eaf18240299', "aria-label": 'a progress bar', "aria-value": this.value, class: `progress-bar ${this.size}` }, h("div", { key: '4d4ab3b145e47f2ef34b9515d85916bb27d7b2ce', class: "progress", style: { width: `${this.internalValue}%` } }, this.showLabel && this.size !== "s" && this.internalValue !== 0 && h("span", { key: '43ea3c707df2f815321e7d6a757cb164fbe11500', class: "label" }, `${this.internalValue}%`))));
     }
     get el() { return this; }
     static get watchers() { return {
@@ -57,6 +57,6 @@ function defineCustomElement() {
 }
 
 export { ProgressBar as P, defineCustomElement as d };
-//# sourceMappingURL=p-aoMMugzu.js.map
+//# sourceMappingURL=p-B8kacvl9.js.map
 
-//# sourceMappingURL=p-aoMMugzu.js.map
+//# sourceMappingURL=p-B8kacvl9.js.map

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

@@ -0,0 +1 @@
+{"file":"p-B8kacvl9.js","mappings":";;;;AAAA,MAAM,cAAc,GAAG,ukBAAukB;;MCUjlB,WAAW,iBAAAA,kBAAA,CAAA,MAAA,WAAA,SAAAC,CAAA,CAAA;AALxB,IAAA,WAAA,GAAA;;;;AAOU,QAAA,IAAK,CAAA,KAAA,GAAW,CAAC;AAEjB,QAAA,IAAS,CAAA,SAAA,GAAY,KAAK;AA+BnC;IA1BC,YAAY,CAAC,QAAgB,EAAE,QAAgB,EAAA;AAC7C,QAAA,IAAI,QAAQ,KAAK,QAAQ,EAAE;AACzB,YAAA,IAAI,CAAC,aAAa,GAAG,QAAQ;;;IAIjC,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK;;AAGjC,IAAA,MAAM,gBAAgB,GAAA;QACpB,IAAG,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;AACnC,YAAA,MAAM,SAAS,GAAG,eAAe,EAAE;AACnC,YAAA,cAAc,CAAC,kBAAkB,EAAE,MAAM,SAAS,CAAC;;;IAIvD,MAAM,GAAA;QACJ,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,YAAA,EAAgB,gBAAgB,EAAA,YAAA,EAAa,IAAI,CAAC,KAAK,EAAG,KAAK,EAAE,gBAAgB,IAAI,CAAC,IAAI,CAAE,CAAA,EAAA,EAC1F,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,UAAU,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,aAAa,CAAG,CAAA,CAAA,EAAE,EAAA,EAC7D,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,IAAI,KAAK,GAAG,IAAI,IAAI,CAAC,aAAa,KAAK,CAAC,IAAI,6DAAM,KAAK,EAAC,OAAO,EAAE,EAAA,CAAA,EAAG,IAAI,CAAC,aAAa,GAAG,CAAQ,CACrH,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/progress-bar/progress-bar.scss?tag=ifx-progress-bar&encapsulation=shadow","src/components/progress-bar/progress-bar.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: flex;\n  width: 100%;\n}\n\n.progress-bar {\n  height: tokens.$ifxSize200;\n  bottom: 0;\n  right: 0;\n  top: 0;\n  left: 0;\n  display: flex;\n  height: tokens.$ifxSize250;\n  border-radius: tokens.$ifxBorderRadius12;\n  width: 100%; // Ensure the bar itself can grow up to 100% width\n  overflow: hidden; // Ensures that the inner progress bar doesn't exceed the width of the outer progress bar\n  background-color: tokens.$ifxColorEngineering200;\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n  \n  \n  &.s {\n    height: 4px;\n  }\n\n  .label {\n    font-style: normal;\n    font-size: tokens.$ifxFontSizeS;\n    font-weight: 400;\n    line-height: tokens.$ifxLineHeightS;\n    color: tokens.$ifxColorBaseWhite;\n  }\n  \n  .progress {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-width: fit-content;\n    height: 100%;\n    background-color: #0A8276;\n    transition: width 0.2s ease;\n  }\n}","import { Component, Prop, h, State, Watch, Element } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n  tag: 'ifx-progress-bar',\n  styleUrl: 'progress-bar.scss',\n  shadow: true\n})\nexport class ProgressBar {\n  @Element() el: HTMLElement;\n  @Prop() value: number = 0;\n  @Prop() size: string;\n  @Prop() showLabel: boolean = false;\n\n  @State() internalValue: number;\n\n  @Watch('value')\n  valueChanged(newValue: number, oldValue: number) {\n    if (newValue !== oldValue) {\n      this.internalValue = newValue;\n    }\n  }\n\n  componentWillLoad() {\n    this.internalValue = this.value;\n  }\n\n  async componentDidLoad() { \n    if(!isNestedInIfxComponent(this.el)) { \n      const framework = detectFramework();\n      trackComponent('ifx-progress-bar', await framework)\n    }\n  }\n\n  render() {\n    return (\n      <div aria-label='a progress bar' aria-value={this.value}  class={`progress-bar ${this.size}`}>\n        <div class=\"progress\" style={{ width: `${this.internalValue}%` }}>\n          {this.showLabel && this.size !== \"s\" && this.internalValue !== 0 && <span class=\"label\">{`${this.internalValue}%`}</span>}\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-hknsKJbL.js → p-B9dL8SWq.js}

@@ -46,7 +46,7 @@ const Link = /*@__PURE__*/ proxyCustomElement(class Link extends H {
         }
     }
     render() {
-        return (h("a", { key: '592e216911ae25b9072dce1a3e9be118d6a54c7a', tabindex: "0", role: "link", "aria-label": this.ariaLabel, "aria-disabled": this.disabled || !this.internalHref, href: this.disabled ? undefined : this.internalHref, download: this.download, target: this.internalTarget, class: this.linkClassNames() }, h("slot", { key: '6c7c1523957f3b1f8ef3d2a96ae8f80590fda81a' })));
+        return (h("a", { key: 'f098d66659a77be6340147c30e6eb569255becab', role: "link", "aria-label": this.ariaLabel, "aria-disabled": this.disabled || !this.internalHref, href: this.disabled ? undefined : this.internalHref, download: this.download, target: this.internalTarget, class: this.linkClassNames() }, h("slot", { key: '175931b8f7124700616bf2a86087c04a3958a227' })));
     }
     getSizeClass() {
         const small = this.size === 's' ? 'small' : null;
@@ -123,6 +123,6 @@ function defineCustomElement() {
 }
 
 export { Link as L, defineCustomElement as d };
-//# sourceMappingURL=p-hknsKJbL.js.map
+//# sourceMappingURL=p-B9dL8SWq.js.map
 
-//# sourceMappingURL=p-hknsKJbL.js.map
+//# sourceMappingURL=p-B9dL8SWq.js.map

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

@@ -0,0 +1 @@
+{"file":"p-B9dL8SWq.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"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); // tokens.$ifxFontFamilyBody;\n\n\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, Element } from \"@stencil/core\";\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\nimport classNames from 'classnames';\n \n@Component({\n  tag: 'ifx-link',\n  styleUrl: 'link.scss',\n  shadow: true\n})\n\nexport class Link {\n  @Element() el;\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 | null;\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      event.preventDefault();\n    }\n  }\n\n  async componentDidLoad() { \n    if(!isNestedInIfxComponent(this.el)) { \n      const framework = detectFramework();\n      trackComponent('ifx-link', await framework)\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-CLgcoxeD.js → p-BUTrT3Q6.js}

@@ -29,8 +29,8 @@ const Indicator = /*@__PURE__*/ proxyCustomElement(class Indicator extends H {
         this.handleNumber();
     }
     render() {
-        return (h("div", { key: '1a3c26dd11d7ad1c6b9b97ce64b040f4a87ac54f', "aria-label": this.ariaLabel, class: 'indicator__container' }, this.variant === 'number' &&
-            h("div", { key: '067fa054ca187a9e9d204ed43e1c53a26a75d904', class: `number__container ${this.inverted ? 'inverted' : ""}` }, h("div", { key: '602388e6b132f92cc5b5675fe041942e9895cbda', class: "number__wrapper" }, this.filteredNumber)), this.variant === 'dot' && h("div", { key: 'cb0a25df4c2319ad7572c9c350bbd930b8fc8165', class: "dot__wrapper" })));
+        return (h("div", { key: 'a3fa219731e584a4c373dc94ec482d1d0bccd5c6', "aria-label": this.ariaLabel, class: 'indicator__container' }, this.variant === 'number' &&
+            h("div", { key: '5f771d6e50ef636a6b92940605a8698bcd2663a9', class: `number__container ${this.inverted ? 'inverted' : ""}` }, h("div", { key: '2a4b273b0b70304594b962d4c8c1dac87a989e18', class: "number__wrapper" }, this.filteredNumber)), this.variant === 'dot' && h("div", { key: '600a4c61b0baf296a4e6abeb02b5d7b9148828c4', class: "dot__wrapper" })));
     }
     get el() { return this; }
     static get style() { return indicatorCss; }
@@ -56,6 +56,6 @@ function defineCustomElement() {
 }
 
 export { Indicator as I, defineCustomElement as d };
-//# sourceMappingURL=p-CLgcoxeD.js.map
+//# sourceMappingURL=p-BUTrT3Q6.js.map
 
-//# sourceMappingURL=p-CLgcoxeD.js.map
+//# sourceMappingURL=p-BUTrT3Q6.js.map

package/dist/components/{p-CLgcoxeD.js.map → p-BUTrT3Q6.js.map}

@@ -1 +1 @@
-{"file":"p-CLgcoxeD.js","mappings":";;;;AAAA,MAAM,YAAY,GAAG,ywBAAywB;;MCUjxB,SAAS,iBAAAA,kBAAA,CAAA,MAAA,SAAA,SAAAC,CAAA,CAAA;AALtB,IAAA,WAAA,GAAA;;;;AAQU,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAEzB,QAAA,IAAO,CAAA,OAAA,GAAW,QAAQ;AAC1B,QAAA,IAAM,CAAA,MAAA,GAAW,CAAC;AAkC3B;IAhCC,YAAY,GAAA;QACV,IAAI,CAAC,cAAc,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,MAAM,GAAG,EAAE,GAAG,KAAK,GAAG,IAAI,CAAC,MAAM;;IAGrF,iBAAiB,GAAA;QACf,IAAI,CAAC,YAAY,EAAE;;AAGrB,IAAA,MAAM,gBAAgB,GAAA;QACpB,IAAG,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;AACnC,YAAA,MAAM,SAAS,GAAG,eAAe,EAAE;AACnC,YAAA,cAAc,CAAC,eAAe,EAAE,MAAM,SAAS,CAAC;;;IAIpD,mBAAmB,GAAA;QACjB,IAAI,CAAC,YAAY,EAAE;;IAGrB,MAAM,GAAA;QACJ,QACE,0EAAiB,IAAI,CAAC,SAAS,EAAE,KAAK,EAAC,sBAAsB,EAAA,EAC3D,IAAI,CAAC,OAAO,KAAK,QAAQ;AAC1B,YAAA,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,CAAqB,kBAAA,EAAA,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,CAAE,CAAA,EAAA,EAC/D,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EACzB,IAAI,CAAC,cAAc,CAChB,CACH,EACL,IAAI,CAAC,OAAO,KAAK,KAAK,IAAI,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,cAAc,EAAA,CAAO,CACtD;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/indicator/indicator.scss?tag=ifx-indicator&encapsulation=shadow","src/components/indicator/indicator.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: inline-flex;\n}\n\n.indicator__container { \n  & .dot__wrapper { \n  display: flex;\n  width: 8px;\n  height: 8px;\n  justify-content: center;\n  align-items: center;\n  flex-shrink: 0;\n  border-radius: 50%;\n  background-color: tokens.$ifxColorOcean500;\n  }\n\n  & .number__container {\n  height: 16px;\n  display: inline-flex;\n  padding: 0; \n  min-width: 16px; \n  justify-content: center;\n  align-items: center;\n  border-radius: 100px;\n  background-color: tokens.$ifxColorOcean500;\n\n    & .number__wrapper {\n      padding: 0 4px;\n      color: tokens.$ifxColorBaseWhite;\n      text-align: center;\n      font-size: tokens.$ifxFontSizeS;\n      font-style: normal;\n      font-weight: tokens.$ifxFontWeightSemibold;\n      line-height: 16px;\n    }\n\n    &.inverted {\n      background-color: tokens.$ifxColorBaseWhite;\n\n      & .number__wrapper {\n        color: tokens.$ifxColorOcean500;\n      }\n    }\n  }\n}\n\n\n","import { Component, h, Prop, Element, State } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking'; \nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n  tag: 'ifx-indicator',\n  styleUrl: 'indicator.scss',\n  shadow: true\n})\nexport class Indicator {\n  @Element() el;\n  @State() filteredNumber: string | number;\n  @Prop() inverted: boolean = false;\n  @Prop() ariaLabel: string | null;\n  @Prop() variant: string = 'number'\n  @Prop() number: number = 0;\n\n  handleNumber() {\n    this.filteredNumber = !isNaN(this.number) && this.number > 99 ? '99+' : this.number;\n  }\n\n  componentWillLoad() { \n    this.handleNumber()\n  }\n\n  async componentDidLoad() { \n    if(!isNestedInIfxComponent(this.el)) { \n      const framework = detectFramework();\n      trackComponent('ifx-indicator', await framework)\n    }\n  }\n\n  componentWillUpdate() {\n    this.handleNumber()\n  }\n\n  render() {\n    return (\n      <div aria-label={this.ariaLabel} class='indicator__container'>\n       {this.variant === 'number' && \n       <div class={`number__container ${this.inverted ? 'inverted' : \"\"}`}>\n          <div class=\"number__wrapper\">\n            {this.filteredNumber}\n          </div> \n       </div>}\n       {this.variant === 'dot' && <div class=\"dot__wrapper\"></div>}\n      </div>\n    );\n  }\n}"],"version":3}
+{"file":"p-BUTrT3Q6.js","mappings":";;;;AAAA,MAAM,YAAY,GAAG,ywBAAywB;;MCUjxB,SAAS,iBAAAA,kBAAA,CAAA,MAAA,SAAA,SAAAC,CAAA,CAAA;AALtB,IAAA,WAAA,GAAA;;;;AAQU,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAEzB,QAAA,IAAO,CAAA,OAAA,GAAW,QAAQ;AAC1B,QAAA,IAAM,CAAA,MAAA,GAAW,CAAC;AAkC3B;IAhCC,YAAY,GAAA;QACV,IAAI,CAAC,cAAc,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,MAAM,GAAG,EAAE,GAAG,KAAK,GAAG,IAAI,CAAC,MAAM;;IAGrF,iBAAiB,GAAA;QACf,IAAI,CAAC,YAAY,EAAE;;AAGrB,IAAA,MAAM,gBAAgB,GAAA;QACpB,IAAG,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;AACnC,YAAA,MAAM,SAAS,GAAG,eAAe,EAAE;AACnC,YAAA,cAAc,CAAC,eAAe,EAAE,MAAM,SAAS,CAAC;;;IAIpD,mBAAmB,GAAA;QACjB,IAAI,CAAC,YAAY,EAAE;;IAGrB,MAAM,GAAA;QACJ,QACE,0EAAiB,IAAI,CAAC,SAAS,EAAE,KAAK,EAAC,sBAAsB,EAAA,EAC3D,IAAI,CAAC,OAAO,KAAK,QAAQ;AAC1B,YAAA,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,CAAqB,kBAAA,EAAA,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,CAAE,CAAA,EAAA,EAC/D,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EACzB,IAAI,CAAC,cAAc,CAChB,CACH,EACL,IAAI,CAAC,OAAO,KAAK,KAAK,IAAI,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,cAAc,EAAA,CAAO,CACtD;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/indicator/indicator.scss?tag=ifx-indicator&encapsulation=shadow","src/components/indicator/indicator.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: inline-flex;\n}\n\n.indicator__container { \n  & .dot__wrapper { \n  display: flex;\n  width: 8px;\n  height: 8px;\n  justify-content: center;\n  align-items: center;\n  flex-shrink: 0;\n  border-radius: 50%;\n  background-color: tokens.$ifxColorOcean500;\n  }\n\n  & .number__container {\n  height: 16px;\n  display: inline-flex;\n  padding: 0; \n  min-width: 16px; \n  justify-content: center;\n  align-items: center;\n  border-radius: 100px;\n  background-color: tokens.$ifxColorOcean500;\n\n    & .number__wrapper {\n      padding: 0 4px;\n      color: tokens.$ifxColorBaseWhite;\n      text-align: center;\n      font-size: tokens.$ifxFontSizeS;\n      font-style: normal;\n      font-weight: tokens.$ifxFontWeightSemibold;\n      line-height: 16px;\n    }\n\n    &.inverted {\n      background-color: tokens.$ifxColorBaseWhite;\n\n      & .number__wrapper {\n        color: tokens.$ifxColorOcean500;\n      }\n    }\n  }\n}\n\n\n","import { Component, h, Prop, Element, State } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking'; \nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n  tag: 'ifx-indicator',\n  styleUrl: 'indicator.scss',\n  shadow: true\n})\nexport class Indicator {\n  @Element() el;\n  @State() filteredNumber: string | number;\n  @Prop() inverted: boolean = false;\n  @Prop() ariaLabel: string | null;\n  @Prop() variant: string = 'number'\n  @Prop() number: number = 0;\n\n  handleNumber() {\n    this.filteredNumber = !isNaN(this.number) && this.number > 99 ? '99+' : this.number;\n  }\n\n  componentWillLoad() { \n    this.handleNumber()\n  }\n\n  async componentDidLoad() { \n    if(!isNestedInIfxComponent(this.el)) { \n      const framework = detectFramework();\n      trackComponent('ifx-indicator', await framework)\n    }\n  }\n\n  componentWillUpdate() {\n    this.handleNumber()\n  }\n\n  render() {\n    return (\n      <div aria-label={this.ariaLabel} class='indicator__container'>\n       {this.variant === 'number' && \n       <div class={`number__container ${this.inverted ? 'inverted' : \"\"}`}>\n          <div class=\"number__wrapper\">\n            {this.filteredNumber}\n          </div> \n       </div>}\n       {this.variant === 'dot' && <div class=\"dot__wrapper\"></div>}\n      </div>\n    );\n  }\n}"],"version":3}

package/dist/components/{p-Dt9X9aqI.js → p-BWgf6L-y.js}

@@ -2,7 +2,7 @@ import { p as proxyCustomElement, H, c as createEvent, h } from './index.js';
 import { d as detectFramework, t as trackComponent } from './p-DcmcuUOA.js';
 import { i as isNestedInIfxComponent } from './p-Bw2fh5LT.js';
 import { c as classNames } from './p-DMLRPGid.js';
-import { d as defineCustomElement$1 } from './p-Bq-GdSe7.js';
+import { d as defineCustomElement$1 } from './p-BctmSAbW.js';
 
 const searchFieldCss = ":root {\n  --ifx-font-family: \"Source Sans 3\", \"Arial, sans-serif\";\n}\n\n:host {\n  display: flex;\n}\n\n.search-field {\n  box-sizing: border-box;\n  background-color: #FFFFFF;\n  width: 100%;\n  font-family: var(--ifx-font-family);\n  position: relative;\n}\n.search-field .search-field__wrapper {\n  box-sizing: border-box;\n  height: 40px;\n  display: flex;\n  align-items: center;\n  border: 1px solid #8D8786;\n  border-radius: 1px;\n  padding: 8px 16px;\n  gap: 12px;\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: #8D8786;\n}\n.search-field .search-field__wrapper.focused {\n  border: 2px solid #0A8276;\n}\n.search-field .search-field__wrapper.focused ifx-icon {\n  color: #575352;\n}\n.search-field .search-field__wrapper.search-field__wrapper-s {\n  height: 36px;\n}\n.search-field .search-field__wrapper:hover:not(.focused, :focus) {\n  border: 1px solid #3C3A39;\n}\n.search-field .search-field__wrapper:focus {\n  outline: none;\n  border: 2px solid #0A8276;\n}\n.search-field .search-field__wrapper .delete-icon {\n  right: 12px;\n  cursor: pointer;\n}\n.search-field .search-field__wrapper .delete-icon:focus {\n  outline: none;\n  border: 2px solid #0A8276;\n  border-radius: 12px;\n}\n.search-field .search-field__wrapper input[type=text] {\n  font-style: normal;\n  font-weight: 400;\n  font-size: 16px;\n  color: #8D8786;\n  border: none;\n  width: 100%;\n  outline: none;\n  height: 16px;\n}\n.search-field .search-field__wrapper input[type=text]:focus {\n  outline: none;\n  color: #1d1d1d;\n}\n.search-field .search-field__wrapper input[type=text]:disabled {\n  background-color: #EEEDED;\n}\n.search-field .search-field__wrapper:has(input[disabled]) {\n  background-color: #EEEDED;\n}\n.search-field .suggestions-dropdown {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  right: 0;\n  background: #FFFFFF;\n  margin-top: 4px;\n  border: 1px solid #EEEDED;\n  box-shadow: 0px 6px 9px 0px rgba(29, 29, 29, 0.1);\n  z-index: 1000;\n  max-height: 300px;\n  overflow-y: auto;\n  container-type: inline-size;\n}\n.search-field .suggestions-dropdown .suggestions-header {\n  font-family: Source Sans 3;\n  font-size: 0.8125rem;\n  font-weight: 600;\n  line-height: 1.25rem;\n  letter-spacing: 0.25em;\n  text-transform: uppercase;\n  color: #575352;\n  border-bottom: 1px solid #EEEDED;\n  padding: 12px 16px;\n}\n.search-field .suggestions-dropdown .suggestion-item {\n  padding: 12px 16px;\n  cursor: pointer;\n  transition: background-color 0.2s ease;\n}\n.search-field .suggestions-dropdown .suggestion-item:last-child {\n  border-bottom: none;\n}\n.search-field .suggestions-dropdown .suggestion-item:hover, .search-field .suggestions-dropdown .suggestion-item--selected {\n  background-color: #EEEDED;\n}\n.search-field .suggestions-dropdown .suggestion-item .suggestion-content {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n.search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-icon {\n  color: #575352;\n  flex-shrink: 0;\n}\n.search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-icon--history {\n  color: #575352;\n}\n.search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-text {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  min-width: 0;\n}\n.search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-text .suggestion-main-text {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  flex-shrink: 1;\n  min-width: 0;\n}\n.search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-text .suggestion-scope {\n  color: #8D8786;\n  flex-shrink: 0;\n  white-space: nowrap;\n  margin-left: 2px;\n  font-weight: 600;\n  font-size: 0.75rem;\n}\n@container (max-width: 320px) {\n  .search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-text {\n    flex-direction: column;\n    align-items: flex-start;\n  }\n  .search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-text .suggestion-main-text {\n    width: 100%;\n    max-width: 100%;\n  }\n  .search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-text .suggestion-scope {\n    margin-left: 0;\n    margin-top: 0;\n    width: 100%;\n    max-width: 100%;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    flex-shrink: 1;\n  }\n}\n.search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-count {\n  color: #8D8786;\n  margin-left: auto;\n  flex-shrink: 0;\n}\n.search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-delete-icon {\n  opacity: 0;\n  visibility: hidden;\n  transition: opacity 0.2s ease, visibility 0.2s ease;\n  cursor: pointer;\n  margin-left: auto;\n  flex-shrink: 0;\n  color: #575352;\n}\n.search-field .suggestions-dropdown .suggestion-item .suggestion-content .suggestion-delete-icon:hover {\n  color: #3C3A39;\n}\n.search-field .suggestions-dropdown .suggestion-item:hover .suggestion-delete-icon {\n  opacity: 1;\n  visibility: visible;\n}\n.search-field .search-field__wrapper.dropdown-open {\n  border-radius: 1px 1px 0 0;\n  border-color: #0A8276;\n}";
 
@@ -377,12 +377,12 @@ const SearchField = /*@__PURE__*/ proxyCustomElement(class SearchField extends H
             this.showDeleteIconInternalState = false;
     }
     render() {
-        return (h("div", { key: '1464337ac84aa2707e9c17d6d21af2087253c233', "aria-disabled": this.disabled, "aria-value": this.value, class: 'search-field' }, h("div", { key: 'd7bace664f3b66a42feff790959c83d3cd86fbe0', class: this.getWrapperClassNames(), tabindex: 1, onClick: () => this.focusInput() }, h("ifx-icon", { key: 'deb5c77cf9ebde1146afdffc5279b260da4f757a', icon: "search-16", class: "search-icon" }), h("input", { key: 'cc247404c0d78ca0e8d163e9a1b315abd279f093', ref: (el) => (this.inputElement = el), type: "text", autocomplete: this.autocomplete, onInput: () => this.handleInput(), onFocus: () => this.focusInput(), onBlur: () => this.blurInput(), placeholder: this.placeholder, disabled: this.disabled, maxlength: this.maxlength, value: this.value, role: "combobox", "aria-expanded": this.showDropdown, "aria-autocomplete": "list", "aria-haspopup": "listbox", "aria-label": this.ariaLabel, "aria-labelledby": this.ariaLabelledBy, "aria-describedby": this.ariaDescribedBy, "aria-owns": this.showDropdown ? 'suggestions-dropdown' : undefined, "aria-activedescendant": this.selectedSuggestionIndex >= 0 ? `suggestion-${this.selectedSuggestionIndex}` : undefined }), this.showDeleteIcon && this.showDeleteIconInternalState ? (h("ifx-icon", { icon: "cRemove16", class: "delete-icon", onClick: this.handleDelete, role: "button", tabindex: "0", "aria-label": this.deleteIconAriaLabel, onKeyDown: (event) => {
+        return (h("div", { key: '63db140a599cfc988bcf0ea60a362bc84dbf830d', "aria-disabled": this.disabled, "aria-value": this.value, class: 'search-field' }, h("div", { key: 'a5e8dda10cf69739331c68da2f3caf42006ab0d9', class: this.getWrapperClassNames(), tabindex: 1, onClick: () => this.focusInput() }, h("ifx-icon", { key: 'fcb9692cc68524a3efcd6ec177f504a653c872d0', icon: "search-16", class: "search-icon" }), h("input", { key: '0ca39241326c6af91fd2f8d193f4f6e8aab49b07', ref: (el) => (this.inputElement = el), type: "text", autocomplete: this.autocomplete, onInput: () => this.handleInput(), onFocus: () => this.focusInput(), onBlur: () => this.blurInput(), placeholder: this.placeholder, disabled: this.disabled, maxlength: this.maxlength, value: this.value, role: "combobox", "aria-expanded": this.showDropdown, "aria-autocomplete": "list", "aria-haspopup": "listbox", "aria-label": this.ariaLabel, "aria-labelledby": this.ariaLabelledBy, "aria-describedby": this.ariaDescribedBy, "aria-owns": this.showDropdown ? 'suggestions-dropdown' : undefined, "aria-activedescendant": this.selectedSuggestionIndex >= 0 ? `suggestion-${this.selectedSuggestionIndex}` : undefined }), this.showDeleteIcon && this.showDeleteIconInternalState ? (h("ifx-icon", { icon: "cRemove16", class: "delete-icon", onClick: this.handleDelete, role: "button", tabindex: "0", "aria-label": this.deleteIconAriaLabel, onKeyDown: (event) => {
                 if (event.key === 'Enter' || event.key === ' ') {
                     event.preventDefault();
                     this.handleDelete();
                 }
-            } })) : null), this.showDropdown && this.filteredSuggestions.length > 0 && (h("div", { key: '641b84e82bd07d44f6a657ac4e3af27af33f868a', ref: (el) => (this.dropdownElement = el), id: "suggestions-dropdown", class: "suggestions-dropdown", role: "listbox", "aria-label": this.dropdownAriaLabel }, this.isShowingOnlyHistory() && (h("div", { key: '66dbc2db67478154a79cc6a10796086e0ce819c3', class: "suggestions-header" }, this.historyHeaderText)), this.filteredSuggestions.map((suggestion, index) => (h("div", { key: suggestion.id, id: `suggestion-${index}`, class: this.getSuggestionClassNames(index), role: "option", "aria-selected": index === this.selectedSuggestionIndex, "aria-label": `${suggestion.type === 'history' ? this.historyItemAriaLabel : this.suggestionAriaLabel}: ${suggestion.text}${suggestion.scope ? `, ${suggestion.scope}` : ''}${suggestion.resultCount ? `, ${suggestion.resultCount} results` : ''}`, onClick: () => this.selectSuggestion(suggestion), onMouseEnter: () => this.selectedSuggestionIndex = index }, h("div", { class: "suggestion-content" }, suggestion.type === 'history' && (h("ifx-icon", { icon: "history-16", class: "suggestion-icon suggestion-icon--history" })), suggestion.type === 'suggestion' && (h("ifx-icon", { icon: "search-16", class: "suggestion-icon suggestion-icon--suggestion" })), h("span", { class: "suggestion-text" }, h("span", { class: "suggestion-main-text" }, this.renderHighlightedText(suggestion.text, this.value)), suggestion.scope && (h("span", { class: "suggestion-scope" }, "\u2013 ", suggestion.scope))), suggestion.resultCount !== undefined && suggestion.scope && (h("span", { class: "suggestion-count" }, suggestion.resultCount)), suggestion.type === 'history' && (h("ifx-icon", { icon: "cross16", class: "suggestion-delete-icon", role: "button", tabindex: "0", "aria-label": `${this.historyDeleteAriaLabel}: ${suggestion.text}`, onClick: (event) => this.handleHistoryDelete(event, suggestion.text), onKeyDown: (event) => {
+            } })) : null), this.showDropdown && this.filteredSuggestions.length > 0 && (h("div", { key: 'e02b8183ecc5a2a146d8a9c9f19e8b0c74a8c48a', ref: (el) => (this.dropdownElement = el), id: "suggestions-dropdown", class: "suggestions-dropdown", role: "listbox", "aria-label": this.dropdownAriaLabel }, this.isShowingOnlyHistory() && (h("div", { key: '0d77206d8a2e599a389d3df1a66151102390d9fe', class: "suggestions-header" }, this.historyHeaderText)), this.filteredSuggestions.map((suggestion, index) => (h("div", { key: suggestion.id, id: `suggestion-${index}`, class: this.getSuggestionClassNames(index), role: "option", "aria-selected": index === this.selectedSuggestionIndex, "aria-label": `${suggestion.type === 'history' ? this.historyItemAriaLabel : this.suggestionAriaLabel}: ${suggestion.text}${suggestion.scope ? `, ${suggestion.scope}` : ''}${suggestion.resultCount ? `, ${suggestion.resultCount} results` : ''}`, onClick: () => this.selectSuggestion(suggestion), onMouseEnter: () => this.selectedSuggestionIndex = index }, h("div", { class: "suggestion-content" }, suggestion.type === 'history' && (h("ifx-icon", { icon: "history-16", class: "suggestion-icon suggestion-icon--history" })), suggestion.type === 'suggestion' && (h("ifx-icon", { icon: "search-16", class: "suggestion-icon suggestion-icon--suggestion" })), h("span", { class: "suggestion-text" }, h("span", { class: "suggestion-main-text" }, this.renderHighlightedText(suggestion.text, this.value)), suggestion.scope && (h("span", { class: "suggestion-scope" }, "\u2013 ", suggestion.scope))), suggestion.resultCount !== undefined && suggestion.scope && (h("span", { class: "suggestion-count" }, suggestion.resultCount)), suggestion.type === 'history' && (h("ifx-icon", { icon: "cross16", class: "suggestion-delete-icon", role: "button", tabindex: "0", "aria-label": `${this.historyDeleteAriaLabel}: ${suggestion.text}`, onClick: (event) => this.handleHistoryDelete(event, suggestion.text), onKeyDown: (event) => {
                 if (event.key === 'Enter' || event.key === ' ') {
                     event.preventDefault();
                     this.handleHistoryDelete(event, suggestion.text);
@@ -463,6 +463,6 @@ function defineCustomElement() {
 }
 
 export { SearchField as S, defineCustomElement as d };
-//# sourceMappingURL=p-Dt9X9aqI.js.map
+//# sourceMappingURL=p-BWgf6L-y.js.map
 
-//# sourceMappingURL=p-Dt9X9aqI.js.map
+//# sourceMappingURL=p-BWgf6L-y.js.map