@infineon/infineon-design-system-stencil 20.20.1 → 20.21.0

package/dist/cjs/ifx-button.cjs.entry.js

@@ -3,8 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b797e11e.js');
-const index$1 = require('./index-93f0ddc3.js');
-require('./_commonjsHelpers-4213291f.js');
+const index$1 = require('./index-db78fac7.js');
 
 const buttonCss = "*{font-family:\"Source Sans 3\"}:host{vertical-align:bottom}.btn{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0px 16px;gap:8px;color:#FFFFFF;font-weight:600;border-radius:1px;line-height:1.5rem;font-family:\"Source Sans 3\";font-style:normal;text-decoration:none;user-select:none;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.disabled{pointer-events:none}.btn-default{color:#FFFFFF;background-color:#0A8276}.btn-default:disabled,.btn-default.disabled{background-color:#BFBBBB;color:#FFFFFF;pointer-events:none}.btn-secondary-default{background-color:#FFFFFF;color:#0A8276;border:1px solid #0A8276}.btn-secondary-default:disabled,.btn-secondary-default.disabled{background-color:#FFFFFF;border:1px solid #BFBBBB;color:#BFBBBB;pointer-events:none}.btn-tertiary-default{background-color:transparent;color:#0A8276}.btn-tertiary-default:disabled,.btn-tertiary-default.disabled{color:#BFBBBB;pointer-events:none}.btn-danger{color:#FFFFFF;background-color:#CD002F;border-color:#CD002F}.btn-danger:disabled,.btn-danger.disabled{background-color:#BFBBBB;color:#FFFFFF;pointer-events:none}.btn-secondary-danger{background-color:#FFFFFF;color:#CD002F;border:1px solid #CD002F}.btn-secondary-danger:disabled,.btn-secondary-danger.disabled{background-color:#FFFFFF;border:1px solid #BFBBBB;color:#BFBBBB;pointer-events:none}.btn-tertiary-danger{background-color:transparent;color:#CD002F}.btn-tertiary-danger:disabled,.btn-tertiary-danger.disabled{background-color:#FFFFFF;color:#BFBBBB;pointer-events:none}.btn-inverse{color:#0A8276;background-color:#FFFFFF}.btn-inverse:disabled,.btn-inverse.disabled{opacity:1;background-color:#FFFFFF;color:#0A8276;pointer-events:none}.btn-secondary-inverse{color:#FFFFFF;border:1px solid #FFFFFF}.btn-secondary-inverse:disabled,.btn-secondary-inverse.disabled{border:1px solid #FFFFFF;color:#FFFFFF;pointer-events:none}.btn-tertiary-inverse{color:#FFFFFF}.btn-tertiary-inverse:disabled,.btn-tertiary-inverse.disabled{color:#FFFFFF;opacity:1;pointer-events:none}.btn ifx-icon:empty{display:none}.btn.btn-xs{font-size:0.875rem;height:32px;line-height:1rem}.btn.btn-s{font-size:0.875rem;height:36px;line-height:1.25rem}.btn.btn-l{font-size:1.25rem;height:48px;line-height:1.75rem}.btn.btn-default:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276}.btn.btn-default:not(:disabled,.disabled):hover{background-color:#08665C}.btn.btn-default:not(:disabled,.disabled):active,.btn.btn-default:not(:disabled,.disabled).active{background-color:#06534B}.btn.btn-secondary-default:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276}.btn.btn-secondary-default:not(:disabled,.disabled):hover{color:#FFFFFF;background-color:#08665C}.btn.btn-secondary-default:not(:disabled,.disabled):active,.btn.btn-secondary-default:not(:disabled,.disabled).active{background-color:#06534B}.btn.btn-secondary:not(:disabled,.disabled):hover{background-color:#9C216E}.btn.btn-secondary:not(:disabled,.disabled):active,.btn.btn-secondary:not(:disabled,.disabled).active{background-color:#9C216E}.btn.btn-danger:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276}.btn.btn-danger:not(:disabled,.disabled):hover{background-color:#A2001E}.btn.btn-danger:not(:disabled,.disabled):active,.btn.btn-danger:not(:disabled,.disabled).active{background-color:#900021}.btn.btn-secondary-danger:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276}.btn.btn-secondary-danger:not(:disabled,.disabled):hover{color:#FFFFFF;background-color:#A2001E}.btn.btn-secondary-danger:not(:disabled,.disabled):active,.btn.btn-secondary-danger:not(:disabled,.disabled).active{background-color:#900021}.btn.btn-inverse:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #0A8276, 0 0 0 4px #FFFFFF}.btn.btn-inverse:not(:disabled,.disabled):hover{background-color:#EEEDED}.btn.btn-inverse:not(:disabled,.disabled):active,.btn.btn-inverse:not(:disabled,.disabled).active{background-color:#BFBBBB}.btn.btn-secondary-inverse:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #0A8276, 0 0 0 4px #FFFFFF}.btn.btn-secondary-inverse:not(:disabled,.disabled):hover{color:#0A8276;background-color:#EEEDED}.btn.btn-secondary-inverse:not(:disabled,.disabled):active,.btn.btn-secondary-inverse:not(:disabled,.disabled).active{color:#0A8276;background-color:#BFBBBB}.btn.btn-tertiary-default:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #08665C}.btn.btn-tertiary-default:not(:disabled,.disabled):hover{color:#08665C}.btn.btn-tertiary-default:not(:disabled,.disabled):active,.btn.btn-tertiary-default:not(:disabled,.disabled).active{color:#06534B}.btn.btn-tertiary-danger:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #A2001E}.btn.btn-tertiary-danger:not(:disabled,.disabled):hover{color:#A2001E}.btn.btn-tertiary-danger:not(:disabled,.disabled):active,.btn.btn-tertiary-danger:not(:disabled,.disabled).active{color:#900021}.btn.btn-tertiary-inverse:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #0A8276, 0 0 0 4px #FFFFFF}.btn.btn-tertiary-inverse:not(:disabled,.disabled):hover{color:#EEEDED}.btn.btn-tertiary-inverse:not(:disabled,.disabled):active,.btn.btn-tertiary-inverse:not(:disabled,.disabled).active{color:#BFBBBB}";
 

package/dist/cjs/ifx-button.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"ifx-button.entry.cjs.js","mappings":"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","names":["h","Host","classNames"],"sources":["./src/components/button/button.scss?tag=ifx-button&encapsulation=shadow","./src/components/button/button.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  vertical-align: bottom;\n}\n\n.btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  height: tokens.$ifxSize500;\n  padding: 0px tokens.$ifxSpace200;\n  gap: tokens.$ifxSpace100;\n  color: tokens.$ifxColorBaseWhite;\n  font-weight: tokens.$ifxFontWeightSemibold;\n  border-radius: tokens.$ifxBorderRadius12;\n  line-height: tokens.$ifxLineHeightM;\n  font-family: tokens.$ifxFontFamilyBody;\n  font-style: normal;\n  text-decoration: none;\n  user-select: none;\n  font-size: tokens.$ifxFontSizeM;\n  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;\n}\n\n.btn:not(.disabled) {\n  cursor: pointer;\n}\n\n.btn.disabled {\n  pointer-events: none;\n}\n\n.btn-default {\n  //default variant=primary; default color=default\n  color: tokens.$ifxColorBaseWhite;\n  background-color: tokens.$ifxColorOcean500;\n\n  &:disabled,\n  &.disabled {\n    background-color: tokens.$ifxColorEngineering300;\n    color: tokens.$ifxColorBaseWhite;\n    pointer-events: none;\n\n  }\n}\n\n.btn-secondary-default {\n  background-color: tokens.$ifxColorBaseWhite;\n  color: tokens.$ifxColorOcean500;\n  border: 1px solid tokens.$ifxColorOcean500;\n\n  &:disabled,\n  &.disabled {\n    background-color: tokens.$ifxColorBaseWhite;\n    border: 1px solid tokens.$ifxColorEngineering300;\n    color: tokens.$ifxColorEngineering300;\n    pointer-events: none;\n\n  }\n}\n\n.btn-tertiary-default {\n  background-color: tokens.$ifxColorBaseTransparent;\n  color: tokens.$ifxColorOcean500;\n\n  &:disabled,\n  &.disabled {\n    color: tokens.$ifxColorEngineering300;\n    pointer-events: none;\n\n  }\n}\n\n\n.btn-danger {\n  color: tokens.$ifxColorBaseWhite;\n  background-color: tokens.$ifxColorRed500;\n  border-color: tokens.$ifxColorRed500;\n\n  &:disabled,\n  &.disabled {\n    background-color: tokens.$ifxColorEngineering300;\n    color: tokens.$ifxColorBaseWhite;\n    pointer-events: none;\n\n  }\n}\n\n.btn-secondary-danger {\n  background-color: tokens.$ifxColorBaseWhite;\n  color: tokens.$ifxColorRed500;\n  border: 1px solid tokens.$ifxColorRed500;\n\n  &:disabled,\n  &.disabled {\n    background-color: tokens.$ifxColorBaseWhite;\n    border: 1px solid tokens.$ifxColorEngineering300;\n    color: tokens.$ifxColorEngineering300;\n    pointer-events: none;\n\n  }\n}\n\n.btn-tertiary-danger {\n  //combination tertiary + danger not in design\n  background-color: tokens.$ifxColorBaseTransparent;\n  color: tokens.$ifxColorRed500;\n\n  &:disabled,\n  &.disabled {\n    background-color: tokens.$ifxColorBaseWhite;\n    color: tokens.$ifxColorEngineering300;\n    pointer-events: none;\n\n  }\n}\n\n.btn-inverse {\n  color: tokens.$ifxColorOcean500;\n  background-color: tokens.$ifxColorBaseWhite;\n\n  &:disabled,\n  &.disabled {\n    opacity: tokens.$ifxOpacity100;\n    background-color: tokens.$ifxColorBaseWhite;\n    color: tokens.$ifxColorOcean500;\n    pointer-events: none;\n  }\n}\n\n.btn-secondary-inverse {\n  color: tokens.$ifxColorBaseWhite;\n  border: 1px solid tokens.$ifxColorBaseWhite;\n\n  &:disabled,\n  &.disabled {\n    border: 1px solid tokens.$ifxColorBaseWhite;\n    color: tokens.$ifxColorBaseWhite;\n    pointer-events: none;\n\n  }\n}\n\n\n.btn-tertiary-inverse {\n  color: tokens.$ifxColorBaseWhite;\n\n  &:disabled,\n  &.disabled {\n    color: tokens.$ifxColorBaseWhite;\n    opacity: tokens.$ifxOpacity100;\n    pointer-events: none;\n\n  }\n}\n\n.btn {\n  & ifx-icon:empty {\n    display: none;\n  }\n\n  &.btn-xs {\n    font-size: tokens.$ifxFontSizeS;\n    height: tokens.$ifxSize400;\n    line-height: tokens.$ifxLineHeightXs;\n  }\n\n  &.btn-s {\n    font-size: tokens.$ifxFontSizeS;\n    height: tokens.$ifxSize450;\n    line-height: tokens.$ifxLineHeightS;\n  }\n\n  // &.btn-m { //default\n  //   font-size: tokens.$ifxFontSizeM;\n  //   height: tokens.$ifxSize400;\n  //   line-height: tokens.$ifxLineHeightM;\n  // }\n\n\n  &.btn-l {\n    font-size: tokens.$ifxFontSizeXl;\n    height: tokens.$ifxSize600;\n    line-height: tokens.$ifxLineHeightXl;\n  }\n\n\n\n  &.btn-default:not(:disabled, .disabled) {\n    &:focus:not(:active, .active) {\n      outline: none;\n      box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean500;\n    }\n\n    &:hover {\n      background-color: tokens.$ifxColorOcean600;\n    }\n\n    &:active,\n    &.active {\n      background-color: tokens.$ifxColorOcean700;\n    }\n  }\n\n  &.btn-secondary-default:not(:disabled, .disabled) {\n    &:focus:not(:active, .active) {\n      outline: none;\n      box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean500;\n    }\n\n    &:hover {\n      color: tokens.$ifxColorBaseWhite;\n      background-color: tokens.$ifxColorOcean600;\n    }\n\n    &:active,\n    &.active {\n      background-color: tokens.$ifxColorOcean700;\n    }\n  }\n\n  &.btn-secondary:not(:disabled, .disabled) {\n\n    &:hover {\n      background-color: tokens.$ifxColorBerry500;\n    }\n\n    &:active,\n    &.active {\n      background-color: tokens.$ifxColorBerry500;\n    }\n  }\n\n\n\n  &.btn-danger:not(:disabled, .disabled) {\n    &:focus:not(:active, .active) {\n      outline: none;\n      box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean500;\n    }\n\n    &:hover {\n      background-color: tokens.$ifxColorRed600;\n    }\n\n    &:active,\n    &.active {\n      background-color: tokens.$ifxColorRed700;\n    }\n  }\n\n  &.btn-secondary-danger:not(:disabled, .disabled) {\n\n    &:focus:not(:active, .active) {\n      outline: none;\n      box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean500;\n    }\n\n    &:hover {\n      color: tokens.$ifxColorBaseWhite;\n      background-color: tokens.$ifxColorRed600;\n    }\n\n    &:active,\n    &.active {\n      background-color: tokens.$ifxColorRed700;\n    }\n  }\n\n\n  &.btn-inverse:not(:disabled, .disabled) {\n    &:focus:not(:active, .active) {\n      outline: none;\n      box-shadow: 0 0 0 2px tokens.$ifxColorOcean500, 0 0 0 4px tokens.$ifxColorBaseWhite;\n    }\n\n    &:hover {\n      background-color: tokens.$ifxColorEngineering200;\n    }\n\n    &:active,\n    &.active {\n      background-color: tokens.$ifxColorEngineering300;\n    }\n  }\n\n  &.btn-secondary-inverse:not(:disabled, .disabled) {\n    &:focus:not(:active, .active) {\n      outline: none;\n      box-shadow: 0 0 0 2px tokens.$ifxColorOcean500, 0 0 0 4px tokens.$ifxColorBaseWhite;\n    }\n\n    &:hover {\n      color: tokens.$ifxColorOcean500;\n      background-color: tokens.$ifxColorEngineering200;\n    }\n\n    &:active,\n    &.active {\n      color: tokens.$ifxColorOcean500;\n      background-color: tokens.$ifxColorEngineering300;\n    }\n  }\n\n\n\n  &.btn-tertiary-default:not(:disabled, .disabled) {\n    &:focus:not(:active, .active) {\n      outline: none;\n      box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean600;\n    }\n\n    &:hover {\n      color: tokens.$ifxColorOcean600;\n    }\n\n    &:active,\n    &.active {\n      color: tokens.$ifxColorOcean700;\n    }\n\n\n  }\n\n\n\n\n\n  &.btn-tertiary-danger:not(:disabled, .disabled) {\n    &:focus:not(:active, .active) {\n      outline: none;\n      box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorRed600;\n    }\n\n    &:hover {\n      color: tokens.$ifxColorRed600;\n    }\n\n    &:active,\n    &.active {\n      color: tokens.$ifxColorRed700;\n    }\n\n  }\n\n\n  &.btn-tertiary-inverse:not(:disabled, .disabled) {\n    &:focus:not(:active, .active) {\n      outline: none;\n      box-shadow: 0 0 0 2px tokens.$ifxColorOcean500, 0 0 0 4px tokens.$ifxColorBaseWhite;\n    }\n\n    &:hover {\n      color: tokens.$ifxColorEngineering200;\n\n    }\n\n    &:active,\n    &.active {\n      color: tokens.$ifxColorEngineering300;\n    }\n  }\n}","import { Component, Prop, h, Host, Method, Element, Watch, State } from '@stencil/core';\nimport classNames from 'classnames';\n\n@Component({\n  tag: 'ifx-button',\n  styleUrl: 'button.scss',\n  shadow: true,\n})\n\nexport class Button {\n  @Prop() variant: 'primary' | 'secondary' | 'tertiary' = 'primary';\n  @Prop() theme: 'default' | 'danger' | 'inverse' = 'default';\n  @Prop() size: string = 'm';\n  @Prop() disabled: boolean = false;\n  @State() internalHref: string;\n  @Prop() href: string;\n  @Prop() target: string = '_self';\n  @Element() el;\n\n  private focusableElement: HTMLElement;\n  private nativeButton: HTMLButtonElement;\n\n  @Watch('href')\n  setInternalHref(newValue: string) {\n    this.internalHref = newValue;\n  }\n\n  @Method()\n  async setFocus() {\n    this.focusableElement.focus();\n  }\n\n  protected componentDidLoad() {\n    this.addEventListenersToHandleCustomFocusAndActiveState();\n  }\n\n  private addEventListenersToHandleCustomFocusAndActiveState() {\n    const element = this.el.shadowRoot.firstChild;\n\n    if (!element) {\n      console.error('element not found');\n      return;\n    }\n\n    element.tabIndex = 0;\n\n    element.addEventListener('focus', () => {\n      if (!this.disabled) {\n        element.classList.add('focus');\n      }\n    });\n\n    element.addEventListener('blur', () => {\n      element.classList.remove('focus');\n    });\n  }\n\n  componentWillLoad() {\n    if (this.el.closest('form')) {\n      if (this.el.href) {\n        this.el.internalHref = undefined;\n      }\n      this.nativeButton = document.createElement('button');\n      this.nativeButton.type = 'submit';\n      this.nativeButton.style.display = 'none';\n      this.el.closest('form').appendChild(this.nativeButton);\n    } else {\n      this.internalHref = this.href;\n    }\n  }\n\n  handleClick() {\n    if (this.nativeButton) {\n      this.nativeButton.click();\n    }\n  }\n\n  handleFocus(event: FocusEvent) { // the anchor element should not be focusable when it's disabled\n    if (this.disabled) {\n      event.preventDefault();\n      this.focusableElement.blur();\n    }\n  }\n\n\n  render() {\n    return (\n      <Host>\n        <a\n          ref={(el) => (this.focusableElement = el)}\n          class={this.getClassNames()}\n          href={!this.disabled ? this.internalHref : undefined}\n          target={this.target}\n          onClick={this.handleClick.bind(this)}\n          rel={this.target === '_blank' ? 'noopener noreferrer' : undefined}\n          onFocus={(event) => this.handleFocus(event)}\n\n        >\n          <slot></slot>\n        </a>\n      </Host>\n    );\n  }\n\n\n  getVariantClass() {\n    return `${this.variant}` === \"secondary\"\n      ? `secondary-${this.theme}`\n      : `${this.variant}` === 'tertiary'\n        ? `tertiary-${this.theme}`\n        : `${this.theme}`;\n  }\n\n  getSizeClass() {\n    if (`${this.size}` === \"xs\") {\n      return \"xs\"\n    }\n    else if (`${this.size}` === \"s\") {\n      return \"s\"\n    }\n    else if (`${this.size}` === \"l\") {\n      return \"l\"\n    }\n    else return \"\";\n  }\n\n  getClassNames() {\n    return classNames(\n      'btn',\n      this.size && `btn-${this.getSizeClass()}`,\n      `btn-${this.getVariantClass()}`,\n      this.disabled ? 'disabled' : '',\n\n    );\n  }\n}"],"version":3}
+{"file":"ifx-button.entry.cjs.js","mappings":"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","names":["h","Host","classNames"],"sources":["./src/components/button/button.scss?tag=ifx-button&encapsulation=shadow","./src/components/button/button.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  vertical-align: bottom;\n}\n\n.btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  height: tokens.$ifxSize500;\n  padding: 0px tokens.$ifxSpace200;\n  gap: tokens.$ifxSpace100;\n  color: tokens.$ifxColorBaseWhite;\n  font-weight: tokens.$ifxFontWeightSemibold;\n  border-radius: tokens.$ifxBorderRadius12;\n  line-height: tokens.$ifxLineHeightM;\n  font-family: tokens.$ifxFontFamilyBody;\n  font-style: normal;\n  text-decoration: none;\n  user-select: none;\n  font-size: tokens.$ifxFontSizeM;\n  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;\n}\n\n.btn:not(.disabled) {\n  cursor: pointer;\n}\n\n.btn.disabled {\n  pointer-events: none;\n}\n\n.btn-default {\n  //default variant=primary; default color=default\n  color: tokens.$ifxColorBaseWhite;\n  background-color: tokens.$ifxColorOcean500;\n\n  &:disabled,\n  &.disabled {\n    background-color: tokens.$ifxColorEngineering300;\n    color: tokens.$ifxColorBaseWhite;\n    pointer-events: none;\n\n  }\n}\n\n.btn-secondary-default {\n  background-color: tokens.$ifxColorBaseWhite;\n  color: tokens.$ifxColorOcean500;\n  border: 1px solid tokens.$ifxColorOcean500;\n\n  &:disabled,\n  &.disabled {\n    background-color: tokens.$ifxColorBaseWhite;\n    border: 1px solid tokens.$ifxColorEngineering300;\n    color: tokens.$ifxColorEngineering300;\n    pointer-events: none;\n\n  }\n}\n\n.btn-tertiary-default {\n  background-color: tokens.$ifxColorBaseTransparent;\n  color: tokens.$ifxColorOcean500;\n\n  &:disabled,\n  &.disabled {\n    color: tokens.$ifxColorEngineering300;\n    pointer-events: none;\n\n  }\n}\n\n\n.btn-danger {\n  color: tokens.$ifxColorBaseWhite;\n  background-color: tokens.$ifxColorRed500;\n  border-color: tokens.$ifxColorRed500;\n\n  &:disabled,\n  &.disabled {\n    background-color: tokens.$ifxColorEngineering300;\n    color: tokens.$ifxColorBaseWhite;\n    pointer-events: none;\n\n  }\n}\n\n.btn-secondary-danger {\n  background-color: tokens.$ifxColorBaseWhite;\n  color: tokens.$ifxColorRed500;\n  border: 1px solid tokens.$ifxColorRed500;\n\n  &:disabled,\n  &.disabled {\n    background-color: tokens.$ifxColorBaseWhite;\n    border: 1px solid tokens.$ifxColorEngineering300;\n    color: tokens.$ifxColorEngineering300;\n    pointer-events: none;\n\n  }\n}\n\n.btn-tertiary-danger {\n  //combination tertiary + danger not in design\n  background-color: tokens.$ifxColorBaseTransparent;\n  color: tokens.$ifxColorRed500;\n\n  &:disabled,\n  &.disabled {\n    background-color: tokens.$ifxColorBaseWhite;\n    color: tokens.$ifxColorEngineering300;\n    pointer-events: none;\n\n  }\n}\n\n.btn-inverse {\n  color: tokens.$ifxColorOcean500;\n  background-color: tokens.$ifxColorBaseWhite;\n\n  &:disabled,\n  &.disabled {\n    opacity: tokens.$ifxOpacity100;\n    background-color: tokens.$ifxColorBaseWhite;\n    color: tokens.$ifxColorOcean500;\n    pointer-events: none;\n  }\n}\n\n.btn-secondary-inverse {\n  color: tokens.$ifxColorBaseWhite;\n  border: 1px solid tokens.$ifxColorBaseWhite;\n\n  &:disabled,\n  &.disabled {\n    border: 1px solid tokens.$ifxColorBaseWhite;\n    color: tokens.$ifxColorBaseWhite;\n    pointer-events: none;\n\n  }\n}\n\n\n.btn-tertiary-inverse {\n  color: tokens.$ifxColorBaseWhite;\n\n  &:disabled,\n  &.disabled {\n    color: tokens.$ifxColorBaseWhite;\n    opacity: tokens.$ifxOpacity100;\n    pointer-events: none;\n\n  }\n}\n\n.btn {\n  & ifx-icon:empty {\n    display: none;\n  }\n\n  &.btn-xs {\n    font-size: tokens.$ifxFontSizeS;\n    height: tokens.$ifxSize400;\n    line-height: tokens.$ifxLineHeightXs;\n  }\n\n  &.btn-s {\n    font-size: tokens.$ifxFontSizeS;\n    height: tokens.$ifxSize450;\n    line-height: tokens.$ifxLineHeightS;\n  }\n\n  // &.btn-m { //default\n  //   font-size: tokens.$ifxFontSizeM;\n  //   height: tokens.$ifxSize400;\n  //   line-height: tokens.$ifxLineHeightM;\n  // }\n\n\n  &.btn-l {\n    font-size: tokens.$ifxFontSizeXl;\n    height: tokens.$ifxSize600;\n    line-height: tokens.$ifxLineHeightXl;\n  }\n\n\n\n  &.btn-default:not(:disabled, .disabled) {\n    &:focus:not(:active, .active) {\n      outline: none;\n      box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean500;\n    }\n\n    &:hover {\n      background-color: tokens.$ifxColorOcean600;\n    }\n\n    &:active,\n    &.active {\n      background-color: tokens.$ifxColorOcean700;\n    }\n  }\n\n  &.btn-secondary-default:not(:disabled, .disabled) {\n    &:focus:not(:active, .active) {\n      outline: none;\n      box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean500;\n    }\n\n    &:hover {\n      color: tokens.$ifxColorBaseWhite;\n      background-color: tokens.$ifxColorOcean600;\n    }\n\n    &:active,\n    &.active {\n      background-color: tokens.$ifxColorOcean700;\n    }\n  }\n\n  &.btn-secondary:not(:disabled, .disabled) {\n\n    &:hover {\n      background-color: tokens.$ifxColorBerry500;\n    }\n\n    &:active,\n    &.active {\n      background-color: tokens.$ifxColorBerry500;\n    }\n  }\n\n\n\n  &.btn-danger:not(:disabled, .disabled) {\n    &:focus:not(:active, .active) {\n      outline: none;\n      box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean500;\n    }\n\n    &:hover {\n      background-color: tokens.$ifxColorRed600;\n    }\n\n    &:active,\n    &.active {\n      background-color: tokens.$ifxColorRed700;\n    }\n  }\n\n  &.btn-secondary-danger:not(:disabled, .disabled) {\n\n    &:focus:not(:active, .active) {\n      outline: none;\n      box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean500;\n    }\n\n    &:hover {\n      color: tokens.$ifxColorBaseWhite;\n      background-color: tokens.$ifxColorRed600;\n    }\n\n    &:active,\n    &.active {\n      background-color: tokens.$ifxColorRed700;\n    }\n  }\n\n\n  &.btn-inverse:not(:disabled, .disabled) {\n    &:focus:not(:active, .active) {\n      outline: none;\n      box-shadow: 0 0 0 2px tokens.$ifxColorOcean500, 0 0 0 4px tokens.$ifxColorBaseWhite;\n    }\n\n    &:hover {\n      background-color: tokens.$ifxColorEngineering200;\n    }\n\n    &:active,\n    &.active {\n      background-color: tokens.$ifxColorEngineering300;\n    }\n  }\n\n  &.btn-secondary-inverse:not(:disabled, .disabled) {\n    &:focus:not(:active, .active) {\n      outline: none;\n      box-shadow: 0 0 0 2px tokens.$ifxColorOcean500, 0 0 0 4px tokens.$ifxColorBaseWhite;\n    }\n\n    &:hover {\n      color: tokens.$ifxColorOcean500;\n      background-color: tokens.$ifxColorEngineering200;\n    }\n\n    &:active,\n    &.active {\n      color: tokens.$ifxColorOcean500;\n      background-color: tokens.$ifxColorEngineering300;\n    }\n  }\n\n\n\n  &.btn-tertiary-default:not(:disabled, .disabled) {\n    &:focus:not(:active, .active) {\n      outline: none;\n      box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean600;\n    }\n\n    &:hover {\n      color: tokens.$ifxColorOcean600;\n    }\n\n    &:active,\n    &.active {\n      color: tokens.$ifxColorOcean700;\n    }\n\n\n  }\n\n\n\n\n\n  &.btn-tertiary-danger:not(:disabled, .disabled) {\n    &:focus:not(:active, .active) {\n      outline: none;\n      box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorRed600;\n    }\n\n    &:hover {\n      color: tokens.$ifxColorRed600;\n    }\n\n    &:active,\n    &.active {\n      color: tokens.$ifxColorRed700;\n    }\n\n  }\n\n\n  &.btn-tertiary-inverse:not(:disabled, .disabled) {\n    &:focus:not(:active, .active) {\n      outline: none;\n      box-shadow: 0 0 0 2px tokens.$ifxColorOcean500, 0 0 0 4px tokens.$ifxColorBaseWhite;\n    }\n\n    &:hover {\n      color: tokens.$ifxColorEngineering200;\n\n    }\n\n    &:active,\n    &.active {\n      color: tokens.$ifxColorEngineering300;\n    }\n  }\n}","import { Component, Prop, h, Host, Method, Element, Watch, State } from '@stencil/core';\nimport classNames from 'classnames';\n\n@Component({\n  tag: 'ifx-button',\n  styleUrl: 'button.scss',\n  shadow: true,\n})\n\nexport class Button {\n  @Prop() variant: 'primary' | 'secondary' | 'tertiary' = 'primary';\n  @Prop() theme: 'default' | 'danger' | 'inverse' = 'default';\n  @Prop() size: string = 'm';\n  @Prop() disabled: boolean = false;\n  @State() internalHref: string;\n  @Prop() href: string;\n  @Prop() target: string = '_self';\n  @Element() el;\n\n  private focusableElement: HTMLElement;\n  private nativeButton: HTMLButtonElement;\n\n  @Watch('href')\n  setInternalHref(newValue: string) {\n    this.internalHref = newValue;\n  }\n\n  @Method()\n  async setFocus() {\n    this.focusableElement.focus();\n  }\n\n  protected componentDidLoad() {\n    this.addEventListenersToHandleCustomFocusAndActiveState();\n  }\n\n  private addEventListenersToHandleCustomFocusAndActiveState() {\n    const element = this.el.shadowRoot.firstChild;\n\n    if (!element) {\n      console.error('element not found');\n      return;\n    }\n\n    element.tabIndex = 0;\n\n    element.addEventListener('focus', () => {\n      if (!this.disabled) {\n        element.classList.add('focus');\n      }\n    });\n\n    element.addEventListener('blur', () => {\n      element.classList.remove('focus');\n    });\n  }\n\n  componentWillLoad() {\n    if (this.el.closest('form')) {\n      if (this.el.href) {\n        this.el.internalHref = undefined;\n      }\n      this.nativeButton = document.createElement('button');\n      this.nativeButton.type = 'submit';\n      this.nativeButton.style.display = 'none';\n      this.el.closest('form').appendChild(this.nativeButton);\n    } else {\n      this.internalHref = this.href;\n    }\n  }\n\n  handleClick() {\n    if (this.nativeButton) {\n      this.nativeButton.click();\n    }\n  }\n\n  handleFocus(event: FocusEvent) { // the anchor element should not be focusable when it's disabled\n    if (this.disabled) {\n      event.preventDefault();\n      this.focusableElement.blur();\n    }\n  }\n\n\n  render() {\n    return (\n      <Host>\n        <a\n          ref={(el) => (this.focusableElement = el)}\n          class={this.getClassNames()}\n          href={!this.disabled ? this.internalHref : undefined}\n          target={this.target}\n          onClick={this.handleClick.bind(this)}\n          rel={this.target === '_blank' ? 'noopener noreferrer' : undefined}\n          onFocus={(event) => this.handleFocus(event)}\n\n        >\n          <slot></slot>\n        </a>\n      </Host>\n    );\n  }\n\n\n  getVariantClass() {\n    return `${this.variant}` === \"secondary\"\n      ? `secondary-${this.theme}`\n      : `${this.variant}` === 'tertiary'\n        ? `tertiary-${this.theme}`\n        : `${this.theme}`;\n  }\n\n  getSizeClass() {\n    if (`${this.size}` === \"xs\") {\n      return \"xs\"\n    }\n    else if (`${this.size}` === \"s\") {\n      return \"s\"\n    }\n    else if (`${this.size}` === \"l\") {\n      return \"l\"\n    }\n    else return \"\";\n  }\n\n  getClassNames() {\n    return classNames(\n      'btn',\n      this.size && `btn-${this.getSizeClass()}`,\n      `btn-${this.getVariantClass()}`,\n      this.disabled ? 'disabled' : '',\n\n    );\n  }\n}"],"version":3}

package/dist/cjs/ifx-example.cjs.entry.js

@@ -3,8 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b797e11e.js');
-const index$1 = require('./index-93f0ddc3.js');
-require('./_commonjsHelpers-4213291f.js');
+const index$1 = require('./index-db78fac7.js');
 
 const exampleCss = ".btn{display:inline-flex;justify-content:center;align-items:center;min-width:80px;min-height:40px;padding:0px 16px;gap:8px;color:#FFFFFF;flex-direction:row;font-weight:600;border-radius:1px;line-height:1.5rem;outline:none;font-family:\"Source Sans 3\";text-align:center;text-decoration:none;vertical-align:middle;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;border-color:#0A8276}.btn-primary svg{stroke:#FFFFFF}.btn-secondary-primary{background-color:#FFFFFF;color:#0A8276;border-color:#0A8276}.btn-secondary-primary svg{stroke:#0A8276}.btn-secondary{color:#FFFFFF;background-color:#9C216E;border-color:#9C216E}.btn-secondary svg{stroke:#FFFFFF}.btn-secondary-secondary{background-color:#FFFFFF;color:#9C216E;border-color:#9C216E}.btn-secondary-secondary svg{stroke:#9C216E}.btn-success{color:#1D1D1D;background-color:#4CA460;border-color:#4CA460}.btn-success svg{stroke:#1D1D1D}.btn-secondary-success{background-color:#FFFFFF;border-color:#4CA460}.btn-secondary-success svg{stroke:#1D1D1D}.btn-danger{color:#FFFFFF;background-color:#CD002F;border-color:#CD002F}.btn-danger svg{stroke:#FFFFFF}.btn-secondary-danger{background-color:#FFFFFF;color:#CD002F;border-color:#CD002F}.btn-secondary-danger svg{stroke:#CD002F}.btn-warning{color:#1D1D1D;background-color:#E16B25;border-color:#E16B25}.btn-warning svg{stroke:#1D1D1D}.btn-secondary-warning{background-color:#FFFFFF;border-color:#E16B25}.btn-secondary-warning svg{stroke:#1D1D1D}.btn.btn-xs{font-size:0.875rem;min-width:71px;min-height:32px;line-height:1rem}.btn.btn-primary:focus,.btn.btn-secondary-primary:focus,.btn.btn-secondary:focus,.btn.btn-secondary-secondary:focus,.btn.btn-success:focus,.btn.btn-secondary-success:focus,.btn.btn-danger:focus,.btn.btn-secondary-danger:focus,.btn.btn-warning:focus,.btn.btn-secondary-warning:focus,.btn.btn-tertiary:focus{box-shadow:none}.btn.btn-primary:focus-visible,.btn.btn-secondary-primary:focus-visible,.btn.btn-secondary:focus-visible,.btn.btn-secondary-secondary:focus-visible,.btn.btn-success:focus-visible,.btn.btn-secondary-success:focus-visible,.btn.btn-danger:focus-visible,.btn.btn-secondary-danger:focus-visible,.btn.btn-warning:focus-visible,.btn.btn-secondary-warning:focus-visible,.btn.btn-tertiary:focus-visible{box-shadow:0 0 0 3px #B4DDD8}.btn:disabled,.btn.disabled{opacity:1;background-color:#BFBBBB;border-color:#BFBBBB;color:#FFFFFF}.btn.btn-primary:not(:disabled,.disabled):focus{background-color:#0A8276;border-color:#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-primary:not(:disabled,.disabled):focus{background-color:transparent}.btn.btn-secondary-primary:not(:disabled,.disabled):hover{color:#FFFFFF;background-color:#08665C;border-color:#08665C}.btn.btn-secondary-primary:not(:disabled,.disabled):active,.btn.btn-secondary-primary:not(:disabled,.disabled).active{background-color:#06534B;border-color:#06534B}.btn.btn-secondary:not(:disabled,.disabled):focus{background-color:#9C216E;border-color:#9C216E}.btn.btn-secondary:not(:disabled,.disabled):hover{background-color:#9C216E;border-color:#9C216E}.btn.btn-secondary:not(:disabled,.disabled):active,.btn.btn-secondary:not(:disabled,.disabled).active{background-color:#9C216E;border-color:#9C216E}.btn.btn-secondary-secondary:not(:disabled,.disabled):focus{background-color:transparent}.btn.btn-secondary-secondary:not(:disabled,.disabled):hover{color:#FFFFFF;background-color:#9C216E;border-color:#9C216E}.btn.btn-secondary-secondary:not(:disabled,.disabled):active,.btn.btn-secondary-secondary:not(:disabled,.disabled).active{background-color:#9C216E;border-color:#9C216E}.btn.btn-success:not(:disabled,.disabled):focus{background-color:#4CA460;border-color:#4CA460}.btn.btn-success:not(:disabled,.disabled):hover{background-color:#4CA460;border-color:#4CA460}.btn.btn-success:not(:disabled,.disabled):active,.btn.btn-success:not(:disabled,.disabled).active{background-color:#4CA460;border-color:#4CA460}.btn.btn-secondary-success:not(:disabled,.disabled){color:#1D1D1D}.btn.btn-secondary-success:not(:disabled,.disabled):focus{background-color:transparent}.btn.btn-secondary-success:not(:disabled,.disabled):hover{background-color:#4CA460;border-color:#4CA460}.btn.btn-secondary-success:not(:disabled,.disabled):active,.btn.btn-secondary-success:not(:disabled,.disabled).active{background-color:#4CA460;border-color:#4CA460}.btn.btn-danger:not(:disabled,.disabled):focus{background-color:#CD002F;border-color:#CD002F}.btn.btn-danger:not(:disabled,.disabled):hover{background-color:#A2001E;border-color:#A2001E}.btn.btn-danger:not(:disabled,.disabled):active,.btn.btn-danger:not(:disabled,.disabled).active{background-color:#900021;border-color:#900021}.btn.btn-secondary-danger:not(:disabled,.disabled):focus{background-color:transparent}.btn.btn-secondary-danger:not(:disabled,.disabled):hover{color:#FFFFFF;background-color:#A2001E;border-color:#A2001E}.btn.btn-secondary-danger:not(:disabled,.disabled):active,.btn.btn-secondary-danger:not(:disabled,.disabled).active{background-color:#900021;border-color:#900021}.btn.btn-warning:not(:disabled,.disabled):focus{background-color:#E16B25;border-color:#E16B25}.btn.btn-warning:not(:disabled,.disabled):hover{background-color:#E16B25;border-color:#E16B25}.btn.btn-warning:not(:disabled,.disabled):active,.btn.btn-warning:not(:disabled,.disabled).active{background-color:#E16B25;border-color:#E16B25}.btn.btn-secondary-warning:not(:disabled,.disabled){color:#1D1D1D}.btn.btn-secondary-warning:not(:disabled,.disabled):focus{background-color:transparent}.btn.btn-secondary-warning:not(:disabled,.disabled):hover{background-color:#E16B25;border-color:#E16B25}.btn.btn-secondary-warning:not(:disabled,.disabled):active,.btn.btn-secondary-warning:not(:disabled,.disabled).active{background-color:#E16B25;border-color:#E16B25}.btn.btn-primary-tertiary{background-color:transparent;color:#0A8276}.btn.btn-primary-tertiary:hover{color:#08665C}.btn.btn-primary-tertiary:hover svg{stroke:#08665C}.btn.btn-primary-tertiary:active,.btn.btn-primary-tertiary.active{color:#06534B}.btn.btn-primary-tertiary:active svg,.btn.btn-primary-tertiary.active svg{stroke:#06534B}.btn.btn-primary-tertiary:disabled,.btn.btn-primary-tertiary.disabled{opacity:1;background-color:transparent;border-color:transparent;color:#BFBBBB}.btn.btn-primary-tertiary:disabled svg,.btn.btn-primary-tertiary.disabled svg{stroke:#BFBBBB}.btn.btn-primary-tertiary svg{stroke:#0A8276}.btn.btn-secondary-tertiary{background-color:transparent;color:#9C216E}.btn.btn-secondary-tertiary:hover{color:#9C216E}.btn.btn-secondary-tertiary:hover svg{stroke:#9C216E}.btn.btn-secondary-tertiary:active,.btn.btn-secondary-tertiary.active{color:#9C216E}.btn.btn-secondary-tertiary:active svg,.btn.btn-secondary-tertiary.active svg{stroke:#9C216E}.btn.btn-secondary-tertiary:disabled,.btn.btn-secondary-tertiary.disabled{opacity:1;background-color:transparent;border-color:transparent;color:#BFBBBB}.btn.btn-secondary-tertiary:disabled svg,.btn.btn-secondary-tertiary.disabled svg{stroke:#BFBBBB}.btn.btn-secondary-tertiary svg{stroke:#9C216E}.btn.btn-success-tertiary{background-color:transparent;color:#4CA460}.btn.btn-success-tertiary:hover{color:#4CA460}.btn.btn-success-tertiary:hover svg{stroke:#4CA460}.btn.btn-success-tertiary:active,.btn.btn-success-tertiary.active{color:#4CA460}.btn.btn-success-tertiary:active svg,.btn.btn-success-tertiary.active svg{stroke:#4CA460}.btn.btn-success-tertiary:disabled,.btn.btn-success-tertiary.disabled{opacity:1;background-color:transparent;border-color:transparent;color:#BFBBBB}.btn.btn-success-tertiary:disabled svg,.btn.btn-success-tertiary.disabled svg{stroke:#BFBBBB}.btn.btn-success-tertiary svg{stroke:#4CA460}.btn.btn-danger-tertiary{background-color:transparent;color:#CD002F}.btn.btn-danger-tertiary:hover{color:#A2001E}.btn.btn-danger-tertiary:hover svg{stroke:#A2001E}.btn.btn-danger-tertiary:active,.btn.btn-danger-tertiary.active{color:#900021}.btn.btn-danger-tertiary:active svg,.btn.btn-danger-tertiary.active svg{stroke:#900021}.btn.btn-danger-tertiary:disabled,.btn.btn-danger-tertiary.disabled{opacity:1;background-color:transparent;border-color:transparent;color:#BFBBBB}.btn.btn-danger-tertiary:disabled svg,.btn.btn-danger-tertiary.disabled svg{stroke:#BFBBBB}.btn.btn-danger-tertiary svg{stroke:#CD002F}.btn.btn-warning-tertiary{background-color:transparent;color:#E16B25}.btn.btn-warning-tertiary:hover{color:#E16B25}.btn.btn-warning-tertiary:hover svg{stroke:#E16B25}.btn.btn-warning-tertiary:active,.btn.btn-warning-tertiary.active{color:#E16B25}.btn.btn-warning-tertiary:active svg,.btn.btn-warning-tertiary.active svg{stroke:#E16B25}.btn.btn-warning-tertiary:disabled,.btn.btn-warning-tertiary.disabled{opacity:1;background-color:transparent;border-color:transparent;color:#BFBBBB}.btn.btn-warning-tertiary:disabled svg,.btn.btn-warning-tertiary.disabled svg{stroke:#BFBBBB}.btn.btn-warning-tertiary svg{stroke:#E16B25}.ifx__btn-icon--before{margin-right:10px}.ifx__btn-icon--after{margin-left:10px}";
 

package/dist/cjs/ifx-example.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"ifx-example.entry.cjs.js","mappings":"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","names":["h","Host","classNames"],"sources":["./src/components/template-story-with-markdown/example.scss?tag=ifx-example&encapsulation=shadow","./src/components/template-story-with-markdown/example.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n\n.btn {\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  min-width: 80px;\n  min-height: tokens.$ifxSize500;\n  padding: 0px 16px;\n  gap: tokens.$ifxSpace100;\n  color: tokens.$ifxColorBaseWhite;\n  flex-direction: row;\n  font-weight: tokens.$ifxFontWeightSemibold;\n  border-radius: tokens.$ifxBorderRadius12;\n  line-height: tokens.$ifxLineHeightM;\n  outline: none;\n  font-family: tokens.$ifxFontFamilyBody;\n  text-align: center;\n  text-decoration: none;\n  vertical-align: middle;\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  border-color: tokens.$ifxColorOcean500;\n\n  & svg {\n    stroke: tokens.$ifxColorBaseWhite;\n  }\n\n}\n\n.btn-secondary-primary {\n  background-color: tokens.$ifxColorBaseWhite;\n  color: tokens.$ifxColorOcean500;\n  border-color: tokens.$ifxColorOcean500;\n\n  & svg {\n    stroke: tokens.$ifxColorOcean500;\n  }\n}\n\n.btn-secondary {\n  color: tokens.$ifxColorBaseWhite;\n  background-color: tokens.$ifxColorBerry500;\n  border-color: tokens.$ifxColorBerry500;\n\n  & svg {\n    stroke: tokens.$ifxColorBaseWhite;\n  }\n}\n\n.btn-secondary-secondary {\n  background-color: tokens.$ifxColorBaseWhite;\n  color: tokens.$ifxColorBerry500;\n  border-color: tokens.$ifxColorBerry500;\n\n  & svg {\n    stroke: tokens.$ifxColorBerry500;\n  }\n}\n\n.btn-success {\n  color: tokens.$ifxColorBaseBlack;\n  background-color: tokens.$ifxColorGreen500;\n  border-color: tokens.$ifxColorGreen500;\n\n  & svg {\n    stroke: tokens.$ifxColorBaseBlack;\n  }\n}\n\n.btn-secondary-success {\n  background-color: tokens.$ifxColorBaseWhite;\n  border-color: tokens.$ifxColorGreen500;\n\n  & svg {\n    stroke: tokens.$ifxColorBaseBlack;\n  }\n}\n\n.btn-danger {\n  color: tokens.$ifxColorBaseWhite;\n  background-color: tokens.$ifxColorRed500;\n  border-color: tokens.$ifxColorRed500;\n\n  & svg {\n    stroke: tokens.$ifxColorBaseWhite;\n  }\n}\n\n.btn-secondary-danger {\n  background-color: tokens.$ifxColorBaseWhite;\n  color: tokens.$ifxColorRed500;\n  border-color: tokens.$ifxColorRed500;\n\n  & svg {\n    stroke: tokens.$ifxColorRed500;\n  }\n}\n\n.btn-warning {\n  color: tokens.$ifxColorBaseBlack;\n  background-color: tokens.$ifxColorOrange500;\n  border-color: tokens.$ifxColorOrange500;\n\n  & svg {\n    stroke: tokens.$ifxColorBaseBlack;\n  }\n}\n\n.btn-secondary-warning {\n  background-color: tokens.$ifxColorBaseWhite;\n  border-color: tokens.$ifxColorOrange500;\n\n  & svg {\n    stroke: tokens.$ifxColorBaseBlack;\n  }\n}\n\n\n\n.btn {\n\n  &.btn-xs {\n    font-size: tokens.$ifxFontSizeS;\n    min-width: 71px;\n    min-height: tokens.$ifxSize400;\n    line-height: tokens.$ifxLineHeightXs;\n  }\n\n  &.btn-primary,\n  &.btn-secondary-primary,\n  &.btn-secondary,\n  &.btn-secondary-secondary,\n  &.btn-success,\n  &.btn-secondary-success,\n  &.btn-danger,\n  &.btn-secondary-danger,\n  &.btn-warning,\n  &.btn-secondary-warning,\n  &.btn-tertiary {\n    &:focus {\n      box-shadow: none;\n\n    }\n  }\n\n  &.btn-primary,\n  &.btn-secondary-primary,\n  &.btn-secondary,\n  &.btn-secondary-secondary,\n  &.btn-success,\n  &.btn-secondary-success,\n  &.btn-danger,\n  &.btn-secondary-danger,\n  &.btn-warning,\n  &.btn-secondary-warning,\n  &.btn-tertiary {\n    &:focus-visible {\n      box-shadow: 0 0 0 3px #B4DDD8;\n    }\n  }\n\n  &:disabled,\n  &.disabled {\n    opacity: tokens.$ifxOpacity100;\n    background-color: tokens.$ifxColorEngineering300;\n    border-color: tokens.$ifxColorEngineering300;\n    color: tokens.$ifxColorBaseWhite;\n  }\n\n\n  &.btn-primary:not(:disabled, .disabled) {\n    &:focus {\n      background-color: tokens.$ifxColorOcean500;\n      border-color: 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  &.btn-secondary-primary:not(:disabled, .disabled) {\n\n    &:focus {\n      background-color: tokens.$ifxColorBaseTransparent;\n    }\n\n    &:hover {\n      color: tokens.$ifxColorBaseWhite;\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  &.btn-secondary:not(:disabled, .disabled) {\n    &:focus {\n      background-color: tokens.$ifxColorBerry500;\n      border-color: tokens.$ifxColorBerry500;\n    }\n\n    &:hover {\n      background-color: tokens.$ifxColorBerry500;\n      border-color: tokens.$ifxColorBerry500;\n    }\n\n    &:active,\n    &.active {\n      background-color: tokens.$ifxColorBerry500;\n      border-color: tokens.$ifxColorBerry500;\n    }\n  }\n\n  &.btn-secondary-secondary:not(:disabled, .disabled) {\n\n    &:focus {\n      background-color: tokens.$ifxColorBaseTransparent;\n    }\n\n    &:hover {\n      color: tokens.$ifxColorBaseWhite;\n      background-color: tokens.$ifxColorBerry500;\n      border-color: tokens.$ifxColorBerry500;\n    }\n\n    &:active,\n    &.active {\n      background-color: tokens.$ifxColorBerry500;\n      border-color: tokens.$ifxColorBerry500;\n    }\n  }\n\n  &.btn-success:not(:disabled, .disabled) {\n\n    &:focus {\n      background-color: tokens.$ifxColorGreen500;\n      border-color: tokens.$ifxColorGreen500;\n    }\n\n    &:hover {\n      background-color: tokens.$ifxColorGreen500;\n      border-color: tokens.$ifxColorGreen500;\n    }\n\n    &:active,\n    &.active {\n      background-color: tokens.$ifxColorGreen500;\n      border-color: tokens.$ifxColorGreen500;\n    }\n  }\n\n  &.btn-secondary-success:not(:disabled, .disabled) {\n    color: tokens.$ifxColorBaseBlack;\n\n    &:focus {\n      background-color: tokens.$ifxColorBaseTransparent;\n    }\n\n    &:hover {\n      background-color: tokens.$ifxColorGreen500;\n      border-color: tokens.$ifxColorGreen500;\n    }\n\n    &:active,\n    &.active {\n      background-color: tokens.$ifxColorGreen500;\n      border-color: tokens.$ifxColorGreen500;\n    }\n  }\n\n  &.btn-danger:not(:disabled, .disabled) {\n    &:focus {\n      background-color: tokens.$ifxColorRed500;\n      border-color: tokens.$ifxColorRed500;\n    }\n\n    &:hover {\n      background-color: tokens.$ifxColorRed600;\n      border-color: tokens.$ifxColorRed600;\n    }\n\n    &:active,\n    &.active {\n      background-color: tokens.$ifxColorRed700;\n      border-color: tokens.$ifxColorRed700;\n    }\n  }\n\n  &.btn-secondary-danger:not(:disabled, .disabled) {\n\n    &:focus {\n      background-color: tokens.$ifxColorBaseTransparent;\n    }\n\n    &:hover {\n      color: tokens.$ifxColorBaseWhite;\n      background-color: tokens.$ifxColorRed600;\n      border-color: tokens.$ifxColorRed600;\n    }\n\n    &:active,\n    &.active {\n      background-color: tokens.$ifxColorRed700;\n      border-color: tokens.$ifxColorRed700;\n    }\n  }\n\n  &.btn-warning:not(:disabled, .disabled) {\n\n    &:focus {\n      background-color: tokens.$ifxColorOrange500;\n      border-color: tokens.$ifxColorOrange500;\n    }\n\n    &:hover {\n      background-color: tokens.$ifxColorOrange500;\n      border-color: tokens.$ifxColorOrange500;\n    }\n\n    &:active,\n    &.active {\n      background-color: tokens.$ifxColorOrange500;\n      border-color: tokens.$ifxColorOrange500;\n    }\n  }\n\n  &.btn-secondary-warning:not(:disabled, .disabled) {\n    color: tokens.$ifxColorBaseBlack;\n\n    &:focus {\n      background-color: tokens.$ifxColorBaseTransparent;\n    }\n\n    &:hover {\n      background-color: tokens.$ifxColorOrange500;\n      border-color: tokens.$ifxColorOrange500;\n    }\n\n    &:active,\n    &.active {\n      background-color: tokens.$ifxColorOrange500;\n      border-color: tokens.$ifxColorOrange500;\n    }\n  }\n\n  &.btn-primary-tertiary {\n    background-color: tokens.$ifxColorBaseTransparent;\n    color: tokens.$ifxColorOcean500;\n\n    &:hover {\n      color: tokens.$ifxColorOcean600;\n\n      & svg {\n        stroke: tokens.$ifxColorOcean600;\n      }\n    }\n\n    &:active,\n    &.active {\n      color: tokens.$ifxColorOcean700;\n\n      & svg {\n        stroke: tokens.$ifxColorOcean700;\n      }\n    }\n\n    &:disabled,\n    &.disabled {\n      opacity: tokens.$ifxOpacity100;\n      background-color: tokens.$ifxColorBaseTransparent;\n      border-color: tokens.$ifxColorBaseTransparent;\n      color: tokens.$ifxColorEngineering300;\n\n      & svg {\n        stroke: tokens.$ifxColorEngineering300;\n      }\n    }\n\n    & svg {\n      stroke: tokens.$ifxColorOcean500;\n    }\n  }\n\n  &.btn-secondary-tertiary {\n    background-color: tokens.$ifxColorBaseTransparent;\n    color: tokens.$ifxColorBerry500;\n\n    &:hover {\n      color: tokens.$ifxColorBerry500;\n\n      & svg {\n        stroke: tokens.$ifxColorBerry500;\n      }\n    }\n\n    &:active,\n    &.active {\n      color: tokens.$ifxColorBerry500;\n\n      & svg {\n        stroke: tokens.$ifxColorBerry500;\n      }\n    }\n\n    &:disabled,\n    &.disabled {\n      opacity: tokens.$ifxOpacity100;\n      background-color: tokens.$ifxColorBaseTransparent;\n      border-color: tokens.$ifxColorBaseTransparent;\n      color: tokens.$ifxColorEngineering300;\n\n      & svg {\n        stroke: tokens.$ifxColorEngineering300;\n      }\n    }\n\n    & svg {\n      stroke: tokens.$ifxColorBerry500;\n    }\n  }\n\n  &.btn-success-tertiary {\n    background-color: tokens.$ifxColorBaseTransparent;\n    color: tokens.$ifxColorGreen500;\n\n    &:hover {\n      color: tokens.$ifxColorGreen500;\n\n      & svg {\n        stroke: tokens.$ifxColorGreen500;\n      }\n    }\n\n    &:active,\n    &.active {\n      color: tokens.$ifxColorGreen500;\n\n      & svg {\n        stroke: tokens.$ifxColorGreen500;\n      }\n    }\n\n    &:disabled,\n    &.disabled {\n      opacity: tokens.$ifxOpacity100;\n      background-color: tokens.$ifxColorBaseTransparent;\n      border-color: tokens.$ifxColorBaseTransparent;\n      color: tokens.$ifxColorEngineering300;\n\n      & svg {\n        stroke: tokens.$ifxColorEngineering300;\n      }\n    }\n\n    & svg {\n      stroke: tokens.$ifxColorGreen500;\n    }\n  }\n\n  &.btn-danger-tertiary {\n    background-color: tokens.$ifxColorBaseTransparent;\n    color: tokens.$ifxColorRed500;\n\n    &:hover {\n      color: tokens.$ifxColorRed600;\n\n      & svg {\n        stroke: tokens.$ifxColorRed600;\n      }\n    }\n\n    &:active,\n    &.active {\n      color: tokens.$ifxColorRed700;\n\n      & svg {\n        stroke: tokens.$ifxColorRed700;\n      }\n    }\n\n    &:disabled,\n    &.disabled {\n      opacity: tokens.$ifxOpacity100;\n      background-color: tokens.$ifxColorBaseTransparent;\n      border-color: tokens.$ifxColorBaseTransparent;\n      color: tokens.$ifxColorEngineering300;\n\n      & svg {\n        stroke: tokens.$ifxColorEngineering300;\n      }\n    }\n\n    & svg {\n      stroke: tokens.$ifxColorRed500;\n    }\n  }\n\n  &.btn-warning-tertiary {\n    background-color: tokens.$ifxColorBaseTransparent;\n    color: tokens.$ifxColorOrange500;\n\n    &:hover {\n      color: tokens.$ifxColorOrange500;\n\n      & svg {\n        stroke: tokens.$ifxColorOrange500;\n      }\n    }\n\n    &:active,\n    &.active {\n      color: tokens.$ifxColorOrange500;\n\n      & svg {\n        stroke: tokens.$ifxColorOrange500;\n      }\n    }\n\n    &:disabled,\n    &.disabled {\n      opacity: tokens.$ifxOpacity100;\n      background-color: tokens.$ifxColorBaseTransparent;\n      border-color: tokens.$ifxColorBaseTransparent;\n      color: tokens.$ifxColorEngineering300;\n\n      & svg {\n        stroke: tokens.$ifxColorEngineering300;\n      }\n    }\n\n    & svg {\n      stroke: tokens.$ifxColorOrange500;\n    }\n  }\n}\n\n\n\n.ifx {\n  &__btn-icon {\n    &--before {\n      margin-right: 10px;\n    }\n\n    &--after {\n      margin-left: 10px;\n    }\n  }\n}","import { Component, Prop, h, Host, Method, Element, Watch, State } from '@stencil/core';\nimport classNames from 'classnames';\n\n@Component({\n  tag: 'ifx-example',\n  styleUrl: 'example.scss',\n  shadow: true,\n})\n\nexport class Example {\n  @Prop() variant: 'primary' | 'secondary' | 'tertiary' = 'primary';\n  @Prop() color: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' = 'primary';\n  @Prop() size: string = 'm';\n  @Prop() disabled: boolean = false;\n  @Prop() icon: string;\n  @Prop() position: string = 'left'\n  @State() internalPosition: string;\n  @Prop() href: string;\n  @Prop() target: string = '_self';\n  @Element() el;\n  @Prop() type: string = 'button'; // handle buttons of type button and of type submit\n\n  private focusableElement: HTMLElement;\n  private nativeButton: HTMLButtonElement;\n\n  @Watch('position')\n  reassignPosition(newValue: string) {\n    if (newValue && newValue !== this.internalPosition) {\n      if (newValue.toUpperCase() === \"LEFT\" || newValue.toUpperCase() === \"RIGHT\")\n        this.internalPosition = newValue;\n    }\n  }\n\n  @Method()\n  async setFocus() {\n    this.focusableElement.focus();\n  }\n\n  componentWillLoad() {\n    if (this.position.toUpperCase() !== \"LEFT\") {\n      this.internalPosition = 'left';\n    } else this.internalPosition = this.position;\n  }\n\n\n  componentDidLoad() {\n    if (this.type === 'submit' && this.el.closest('form')) {\n      this.nativeButton = document.createElement('button');\n      this.nativeButton.type = 'submit';\n      this.nativeButton.style.display = 'none';\n      this.el.closest('form').appendChild(this.nativeButton);\n    }\n  }\n\n  handleClick() {\n    if (this.nativeButton) {\n      this.nativeButton.click();\n    }\n  }\n\n\n  render() {\n    return (\n      <Host>\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            {this.icon && this.internalPosition.toUpperCase() === \"LEFT\" && <ifx-icon icon={this.icon}></ifx-icon>}\n            <slot></slot>\n            {this.icon && this.internalPosition.toUpperCase() === \"RIGHT\" && <ifx-icon icon={this.icon}></ifx-icon>}\n\n          </a>\n        ) : (\n          <button\n            class={this.getClassNames()}\n            type=\"button\"\n            onClick={this.handleClick.bind(this)} // Add click handler\n\n          >\n            {this.icon && this.internalPosition.toUpperCase() === \"LEFT\" && <ifx-icon icon={this.icon}></ifx-icon>}\n            <slot></slot>\n            {this.icon && this.internalPosition.toUpperCase() === \"RIGHT\" && <ifx-icon icon={this.icon}></ifx-icon>}\n          </button>\n        )}\n      </Host>\n    );\n  }\n\n\n  getVariantClass() {\n    return `${this.variant}` === \"secondary\"\n      ? `secondary-${this.color}`\n      : `${this.variant}` === 'tertiary'\n        ? `${this.color}-tertiary`\n        : `${this.color}`;\n  }\n\n  getSizeClass() {\n    return `${this.size}` === \"s\"\n      ? \"s\"\n      : \"\";\n  }\n\n  getClassNames() {\n    return classNames(\n      'btn',\n      this.size && `btn-${this.getSizeClass()}`,\n      `btn-${this.getVariantClass()}`,\n      this.disabled ? 'disabled' : ''\n    );\n  }\n}"],"version":3}
+{"file":"ifx-example.entry.cjs.js","mappings":"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","names":["h","Host","classNames"],"sources":["./src/components/template-story-with-markdown/example.scss?tag=ifx-example&encapsulation=shadow","./src/components/template-story-with-markdown/example.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n\n.btn {\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  min-width: 80px;\n  min-height: tokens.$ifxSize500;\n  padding: 0px 16px;\n  gap: tokens.$ifxSpace100;\n  color: tokens.$ifxColorBaseWhite;\n  flex-direction: row;\n  font-weight: tokens.$ifxFontWeightSemibold;\n  border-radius: tokens.$ifxBorderRadius12;\n  line-height: tokens.$ifxLineHeightM;\n  outline: none;\n  font-family: tokens.$ifxFontFamilyBody;\n  text-align: center;\n  text-decoration: none;\n  vertical-align: middle;\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  border-color: tokens.$ifxColorOcean500;\n\n  & svg {\n    stroke: tokens.$ifxColorBaseWhite;\n  }\n\n}\n\n.btn-secondary-primary {\n  background-color: tokens.$ifxColorBaseWhite;\n  color: tokens.$ifxColorOcean500;\n  border-color: tokens.$ifxColorOcean500;\n\n  & svg {\n    stroke: tokens.$ifxColorOcean500;\n  }\n}\n\n.btn-secondary {\n  color: tokens.$ifxColorBaseWhite;\n  background-color: tokens.$ifxColorBerry500;\n  border-color: tokens.$ifxColorBerry500;\n\n  & svg {\n    stroke: tokens.$ifxColorBaseWhite;\n  }\n}\n\n.btn-secondary-secondary {\n  background-color: tokens.$ifxColorBaseWhite;\n  color: tokens.$ifxColorBerry500;\n  border-color: tokens.$ifxColorBerry500;\n\n  & svg {\n    stroke: tokens.$ifxColorBerry500;\n  }\n}\n\n.btn-success {\n  color: tokens.$ifxColorBaseBlack;\n  background-color: tokens.$ifxColorGreen500;\n  border-color: tokens.$ifxColorGreen500;\n\n  & svg {\n    stroke: tokens.$ifxColorBaseBlack;\n  }\n}\n\n.btn-secondary-success {\n  background-color: tokens.$ifxColorBaseWhite;\n  border-color: tokens.$ifxColorGreen500;\n\n  & svg {\n    stroke: tokens.$ifxColorBaseBlack;\n  }\n}\n\n.btn-danger {\n  color: tokens.$ifxColorBaseWhite;\n  background-color: tokens.$ifxColorRed500;\n  border-color: tokens.$ifxColorRed500;\n\n  & svg {\n    stroke: tokens.$ifxColorBaseWhite;\n  }\n}\n\n.btn-secondary-danger {\n  background-color: tokens.$ifxColorBaseWhite;\n  color: tokens.$ifxColorRed500;\n  border-color: tokens.$ifxColorRed500;\n\n  & svg {\n    stroke: tokens.$ifxColorRed500;\n  }\n}\n\n.btn-warning {\n  color: tokens.$ifxColorBaseBlack;\n  background-color: tokens.$ifxColorOrange500;\n  border-color: tokens.$ifxColorOrange500;\n\n  & svg {\n    stroke: tokens.$ifxColorBaseBlack;\n  }\n}\n\n.btn-secondary-warning {\n  background-color: tokens.$ifxColorBaseWhite;\n  border-color: tokens.$ifxColorOrange500;\n\n  & svg {\n    stroke: tokens.$ifxColorBaseBlack;\n  }\n}\n\n\n\n.btn {\n\n  &.btn-xs {\n    font-size: tokens.$ifxFontSizeS;\n    min-width: 71px;\n    min-height: tokens.$ifxSize400;\n    line-height: tokens.$ifxLineHeightXs;\n  }\n\n  &.btn-primary,\n  &.btn-secondary-primary,\n  &.btn-secondary,\n  &.btn-secondary-secondary,\n  &.btn-success,\n  &.btn-secondary-success,\n  &.btn-danger,\n  &.btn-secondary-danger,\n  &.btn-warning,\n  &.btn-secondary-warning,\n  &.btn-tertiary {\n    &:focus {\n      box-shadow: none;\n\n    }\n  }\n\n  &.btn-primary,\n  &.btn-secondary-primary,\n  &.btn-secondary,\n  &.btn-secondary-secondary,\n  &.btn-success,\n  &.btn-secondary-success,\n  &.btn-danger,\n  &.btn-secondary-danger,\n  &.btn-warning,\n  &.btn-secondary-warning,\n  &.btn-tertiary {\n    &:focus-visible {\n      box-shadow: 0 0 0 3px #B4DDD8;\n    }\n  }\n\n  &:disabled,\n  &.disabled {\n    opacity: tokens.$ifxOpacity100;\n    background-color: tokens.$ifxColorEngineering300;\n    border-color: tokens.$ifxColorEngineering300;\n    color: tokens.$ifxColorBaseWhite;\n  }\n\n\n  &.btn-primary:not(:disabled, .disabled) {\n    &:focus {\n      background-color: tokens.$ifxColorOcean500;\n      border-color: 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  &.btn-secondary-primary:not(:disabled, .disabled) {\n\n    &:focus {\n      background-color: tokens.$ifxColorBaseTransparent;\n    }\n\n    &:hover {\n      color: tokens.$ifxColorBaseWhite;\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  &.btn-secondary:not(:disabled, .disabled) {\n    &:focus {\n      background-color: tokens.$ifxColorBerry500;\n      border-color: tokens.$ifxColorBerry500;\n    }\n\n    &:hover {\n      background-color: tokens.$ifxColorBerry500;\n      border-color: tokens.$ifxColorBerry500;\n    }\n\n    &:active,\n    &.active {\n      background-color: tokens.$ifxColorBerry500;\n      border-color: tokens.$ifxColorBerry500;\n    }\n  }\n\n  &.btn-secondary-secondary:not(:disabled, .disabled) {\n\n    &:focus {\n      background-color: tokens.$ifxColorBaseTransparent;\n    }\n\n    &:hover {\n      color: tokens.$ifxColorBaseWhite;\n      background-color: tokens.$ifxColorBerry500;\n      border-color: tokens.$ifxColorBerry500;\n    }\n\n    &:active,\n    &.active {\n      background-color: tokens.$ifxColorBerry500;\n      border-color: tokens.$ifxColorBerry500;\n    }\n  }\n\n  &.btn-success:not(:disabled, .disabled) {\n\n    &:focus {\n      background-color: tokens.$ifxColorGreen500;\n      border-color: tokens.$ifxColorGreen500;\n    }\n\n    &:hover {\n      background-color: tokens.$ifxColorGreen500;\n      border-color: tokens.$ifxColorGreen500;\n    }\n\n    &:active,\n    &.active {\n      background-color: tokens.$ifxColorGreen500;\n      border-color: tokens.$ifxColorGreen500;\n    }\n  }\n\n  &.btn-secondary-success:not(:disabled, .disabled) {\n    color: tokens.$ifxColorBaseBlack;\n\n    &:focus {\n      background-color: tokens.$ifxColorBaseTransparent;\n    }\n\n    &:hover {\n      background-color: tokens.$ifxColorGreen500;\n      border-color: tokens.$ifxColorGreen500;\n    }\n\n    &:active,\n    &.active {\n      background-color: tokens.$ifxColorGreen500;\n      border-color: tokens.$ifxColorGreen500;\n    }\n  }\n\n  &.btn-danger:not(:disabled, .disabled) {\n    &:focus {\n      background-color: tokens.$ifxColorRed500;\n      border-color: tokens.$ifxColorRed500;\n    }\n\n    &:hover {\n      background-color: tokens.$ifxColorRed600;\n      border-color: tokens.$ifxColorRed600;\n    }\n\n    &:active,\n    &.active {\n      background-color: tokens.$ifxColorRed700;\n      border-color: tokens.$ifxColorRed700;\n    }\n  }\n\n  &.btn-secondary-danger:not(:disabled, .disabled) {\n\n    &:focus {\n      background-color: tokens.$ifxColorBaseTransparent;\n    }\n\n    &:hover {\n      color: tokens.$ifxColorBaseWhite;\n      background-color: tokens.$ifxColorRed600;\n      border-color: tokens.$ifxColorRed600;\n    }\n\n    &:active,\n    &.active {\n      background-color: tokens.$ifxColorRed700;\n      border-color: tokens.$ifxColorRed700;\n    }\n  }\n\n  &.btn-warning:not(:disabled, .disabled) {\n\n    &:focus {\n      background-color: tokens.$ifxColorOrange500;\n      border-color: tokens.$ifxColorOrange500;\n    }\n\n    &:hover {\n      background-color: tokens.$ifxColorOrange500;\n      border-color: tokens.$ifxColorOrange500;\n    }\n\n    &:active,\n    &.active {\n      background-color: tokens.$ifxColorOrange500;\n      border-color: tokens.$ifxColorOrange500;\n    }\n  }\n\n  &.btn-secondary-warning:not(:disabled, .disabled) {\n    color: tokens.$ifxColorBaseBlack;\n\n    &:focus {\n      background-color: tokens.$ifxColorBaseTransparent;\n    }\n\n    &:hover {\n      background-color: tokens.$ifxColorOrange500;\n      border-color: tokens.$ifxColorOrange500;\n    }\n\n    &:active,\n    &.active {\n      background-color: tokens.$ifxColorOrange500;\n      border-color: tokens.$ifxColorOrange500;\n    }\n  }\n\n  &.btn-primary-tertiary {\n    background-color: tokens.$ifxColorBaseTransparent;\n    color: tokens.$ifxColorOcean500;\n\n    &:hover {\n      color: tokens.$ifxColorOcean600;\n\n      & svg {\n        stroke: tokens.$ifxColorOcean600;\n      }\n    }\n\n    &:active,\n    &.active {\n      color: tokens.$ifxColorOcean700;\n\n      & svg {\n        stroke: tokens.$ifxColorOcean700;\n      }\n    }\n\n    &:disabled,\n    &.disabled {\n      opacity: tokens.$ifxOpacity100;\n      background-color: tokens.$ifxColorBaseTransparent;\n      border-color: tokens.$ifxColorBaseTransparent;\n      color: tokens.$ifxColorEngineering300;\n\n      & svg {\n        stroke: tokens.$ifxColorEngineering300;\n      }\n    }\n\n    & svg {\n      stroke: tokens.$ifxColorOcean500;\n    }\n  }\n\n  &.btn-secondary-tertiary {\n    background-color: tokens.$ifxColorBaseTransparent;\n    color: tokens.$ifxColorBerry500;\n\n    &:hover {\n      color: tokens.$ifxColorBerry500;\n\n      & svg {\n        stroke: tokens.$ifxColorBerry500;\n      }\n    }\n\n    &:active,\n    &.active {\n      color: tokens.$ifxColorBerry500;\n\n      & svg {\n        stroke: tokens.$ifxColorBerry500;\n      }\n    }\n\n    &:disabled,\n    &.disabled {\n      opacity: tokens.$ifxOpacity100;\n      background-color: tokens.$ifxColorBaseTransparent;\n      border-color: tokens.$ifxColorBaseTransparent;\n      color: tokens.$ifxColorEngineering300;\n\n      & svg {\n        stroke: tokens.$ifxColorEngineering300;\n      }\n    }\n\n    & svg {\n      stroke: tokens.$ifxColorBerry500;\n    }\n  }\n\n  &.btn-success-tertiary {\n    background-color: tokens.$ifxColorBaseTransparent;\n    color: tokens.$ifxColorGreen500;\n\n    &:hover {\n      color: tokens.$ifxColorGreen500;\n\n      & svg {\n        stroke: tokens.$ifxColorGreen500;\n      }\n    }\n\n    &:active,\n    &.active {\n      color: tokens.$ifxColorGreen500;\n\n      & svg {\n        stroke: tokens.$ifxColorGreen500;\n      }\n    }\n\n    &:disabled,\n    &.disabled {\n      opacity: tokens.$ifxOpacity100;\n      background-color: tokens.$ifxColorBaseTransparent;\n      border-color: tokens.$ifxColorBaseTransparent;\n      color: tokens.$ifxColorEngineering300;\n\n      & svg {\n        stroke: tokens.$ifxColorEngineering300;\n      }\n    }\n\n    & svg {\n      stroke: tokens.$ifxColorGreen500;\n    }\n  }\n\n  &.btn-danger-tertiary {\n    background-color: tokens.$ifxColorBaseTransparent;\n    color: tokens.$ifxColorRed500;\n\n    &:hover {\n      color: tokens.$ifxColorRed600;\n\n      & svg {\n        stroke: tokens.$ifxColorRed600;\n      }\n    }\n\n    &:active,\n    &.active {\n      color: tokens.$ifxColorRed700;\n\n      & svg {\n        stroke: tokens.$ifxColorRed700;\n      }\n    }\n\n    &:disabled,\n    &.disabled {\n      opacity: tokens.$ifxOpacity100;\n      background-color: tokens.$ifxColorBaseTransparent;\n      border-color: tokens.$ifxColorBaseTransparent;\n      color: tokens.$ifxColorEngineering300;\n\n      & svg {\n        stroke: tokens.$ifxColorEngineering300;\n      }\n    }\n\n    & svg {\n      stroke: tokens.$ifxColorRed500;\n    }\n  }\n\n  &.btn-warning-tertiary {\n    background-color: tokens.$ifxColorBaseTransparent;\n    color: tokens.$ifxColorOrange500;\n\n    &:hover {\n      color: tokens.$ifxColorOrange500;\n\n      & svg {\n        stroke: tokens.$ifxColorOrange500;\n      }\n    }\n\n    &:active,\n    &.active {\n      color: tokens.$ifxColorOrange500;\n\n      & svg {\n        stroke: tokens.$ifxColorOrange500;\n      }\n    }\n\n    &:disabled,\n    &.disabled {\n      opacity: tokens.$ifxOpacity100;\n      background-color: tokens.$ifxColorBaseTransparent;\n      border-color: tokens.$ifxColorBaseTransparent;\n      color: tokens.$ifxColorEngineering300;\n\n      & svg {\n        stroke: tokens.$ifxColorEngineering300;\n      }\n    }\n\n    & svg {\n      stroke: tokens.$ifxColorOrange500;\n    }\n  }\n}\n\n\n\n.ifx {\n  &__btn-icon {\n    &--before {\n      margin-right: 10px;\n    }\n\n    &--after {\n      margin-left: 10px;\n    }\n  }\n}","import { Component, Prop, h, Host, Method, Element, Watch, State } from '@stencil/core';\nimport classNames from 'classnames';\n\n@Component({\n  tag: 'ifx-example',\n  styleUrl: 'example.scss',\n  shadow: true,\n})\n\nexport class Example {\n  @Prop() variant: 'primary' | 'secondary' | 'tertiary' = 'primary';\n  @Prop() color: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' = 'primary';\n  @Prop() size: string = 'm';\n  @Prop() disabled: boolean = false;\n  @Prop() icon: string;\n  @Prop() position: string = 'left'\n  @State() internalPosition: string;\n  @Prop() href: string;\n  @Prop() target: string = '_self';\n  @Element() el;\n  @Prop() type: string = 'button'; // handle buttons of type button and of type submit\n\n  private focusableElement: HTMLElement;\n  private nativeButton: HTMLButtonElement;\n\n  @Watch('position')\n  reassignPosition(newValue: string) {\n    if (newValue && newValue !== this.internalPosition) {\n      if (newValue.toUpperCase() === \"LEFT\" || newValue.toUpperCase() === \"RIGHT\")\n        this.internalPosition = newValue;\n    }\n  }\n\n  @Method()\n  async setFocus() {\n    this.focusableElement.focus();\n  }\n\n  componentWillLoad() {\n    if (this.position.toUpperCase() !== \"LEFT\") {\n      this.internalPosition = 'left';\n    } else this.internalPosition = this.position;\n  }\n\n\n  componentDidLoad() {\n    if (this.type === 'submit' && this.el.closest('form')) {\n      this.nativeButton = document.createElement('button');\n      this.nativeButton.type = 'submit';\n      this.nativeButton.style.display = 'none';\n      this.el.closest('form').appendChild(this.nativeButton);\n    }\n  }\n\n  handleClick() {\n    if (this.nativeButton) {\n      this.nativeButton.click();\n    }\n  }\n\n\n  render() {\n    return (\n      <Host>\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            {this.icon && this.internalPosition.toUpperCase() === \"LEFT\" && <ifx-icon icon={this.icon}></ifx-icon>}\n            <slot></slot>\n            {this.icon && this.internalPosition.toUpperCase() === \"RIGHT\" && <ifx-icon icon={this.icon}></ifx-icon>}\n\n          </a>\n        ) : (\n          <button\n            class={this.getClassNames()}\n            type=\"button\"\n            onClick={this.handleClick.bind(this)} // Add click handler\n\n          >\n            {this.icon && this.internalPosition.toUpperCase() === \"LEFT\" && <ifx-icon icon={this.icon}></ifx-icon>}\n            <slot></slot>\n            {this.icon && this.internalPosition.toUpperCase() === \"RIGHT\" && <ifx-icon icon={this.icon}></ifx-icon>}\n          </button>\n        )}\n      </Host>\n    );\n  }\n\n\n  getVariantClass() {\n    return `${this.variant}` === \"secondary\"\n      ? `secondary-${this.color}`\n      : `${this.variant}` === 'tertiary'\n        ? `${this.color}-tertiary`\n        : `${this.color}`;\n  }\n\n  getSizeClass() {\n    return `${this.size}` === \"s\"\n      ? \"s\"\n      : \"\";\n  }\n\n  getClassNames() {\n    return classNames(\n      'btn',\n      this.size && `btn-${this.getSizeClass()}`,\n      `btn-${this.getVariantClass()}`,\n      this.disabled ? 'disabled' : ''\n    );\n  }\n}"],"version":3}

package/dist/cjs/{ifx-select.cjs.entry.js → ifx-icon-button_2.cjs.entry.js}

@@ -3,9 +3,60 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b797e11e.js');
-const _commonjsHelpers = require('./_commonjsHelpers-4213291f.js');
+const index$1 = require('./index-db78fac7.js');
 
-var choices = _commonjsHelpers.createCommonjsModule(function (module, exports) {
+const iconButtonCss = ".btn{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:8px;gap:8px;color:#FFFFFF;flex-direction:row;font-weight:600;border-radius:1px;line-height:1.5rem;outline:none;font-family:\"Source Sans 3\";text-decoration:none;user-select:none;border:1px solid rgba(0, 0, 0, 0);font-size:1rem;transition:color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out}.btn:not(.disabled){cursor:pointer}.btn-primary{color:#FFFFFF;background-color:#0A8276}.btn-primary:disabled,.btn-primary.disabled{background-color:#BFBBBB;color:#FFFFFF;pointer-events:none}.btn-secondary{color:#0A8276;background-color:#FFFFFF;border-color:#0A8276}.btn-secondary:disabled,.btn-secondary.disabled{background-color:#FFFFFF;border:1px solid #BFBBBB;color:#BFBBBB;pointer-events:none}.btn-tertiary{background-color:transparent;color:#1D1D1D}.btn-tertiary:disabled,.btn-tertiary.disabled{color:#BFBBBB;pointer-events:none}.btn.icon-button{min-width:initial;min-height:initial;width:40px;height:40px;padding:0;justify-content:center}.btn.icon-button.btn-round{border-radius:100px}.btn.icon-button.btn-square{border-radius:1px}.btn.icon-button.btn-s{width:32px;height:32px;padding:8px}.btn.icon-button.btn-l{width:48px;height:48px;padding:8px}.btn.btn-primary:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276}.btn.btn-primary:not(:disabled,.disabled):hover{background-color:#08665C;border-color:#08665C}.btn.btn-primary:not(:disabled,.disabled):active,.btn.btn-primary:not(:disabled,.disabled).active{background-color:#06534B;border-color:#06534B}.btn.btn-secondary:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276}.btn.btn-secondary:not(:disabled,.disabled):hover{background-color:#08665C;border-color:#08665C;color:#FFFFFF}.btn.btn-secondary:not(:disabled,.disabled):active,.btn.btn-secondary:not(:disabled,.disabled).active{background-color:#06534B;border-color:#06534B}.btn.btn-tertiary:not(:disabled,.disabled):focus:not(:active,.active){outline:none;color:#1D1D1D;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276}.btn.btn-tertiary:not(:disabled,.disabled):hover{color:#0A8276}.btn.btn-tertiary:not(:disabled,.disabled):active,.btn.btn-tertiary:not(:disabled,.disabled).active{color:#08665C}";
+
+const IconButton = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.variant = undefined;
+    this.size = undefined;
+    this.disabled = undefined;
+    this.icon = undefined;
+    this.href = undefined;
+    this.target = '_self';
+    this.shape = 'round';
+  }
+  async setFocus() {
+    this.focusableElement.focus();
+  }
+  componentWillLoad() {
+    if (this.shape === '') {
+      this.shape = 'round';
+    }
+  }
+  render() {
+    return (index.h(index.Host, null, this.href ? (index.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 }, index.h("ifx-icon", { icon: this.icon }))) : (index.h("button", { class: this.getClassNames(), type: "button" }, index.h("ifx-icon", { icon: this.icon })))));
+  }
+  getVariantClass() {
+    return `${this.variant}` === "secondary"
+      ? `secondary`
+      : `${this.variant}` === 'tertiary'
+        ? `tertiary`
+        : `primary`;
+  }
+  getSizeClass() {
+    if (`${this.size}` === "xs") {
+      return "xs";
+    }
+    else if (`${this.size}` === "s") {
+      return "s";
+    }
+    else if (`${this.size}` === "l") {
+      return "l";
+    }
+    else
+      return "";
+  }
+  getClassNames() {
+    return index$1.classnames('btn icon-button', `btn-${this.shape}`, this.size && `btn-${this.getSizeClass()}`, `btn-${this.getVariantClass()}`, this.disabled ? 'disabled' : '');
+  }
+  get el() { return index.getElement(this); }
+};
+IconButton.style = iconButtonCss;
+
+var choices = index$1.createCommonjsModule(function (module, exports) {
 /*! choices.js v10.2.0 | © 2022 Josh Johnson | https://github.com/jshjohnson/Choices#readme */
 (function webpackUniversalModuleDefinition(root, factory) {
 	module.exports = factory();
@@ -6785,7 +6836,7 @@ __webpack_exports__ = __webpack_exports__["default"];
 });
 });
 
-const ChoicesJs = /*@__PURE__*/_commonjsHelpers.getDefaultExportFromCjs(choices);
+const ChoicesJs = /*@__PURE__*/index$1.getDefaultExportFromCjs(choices);
 
 /**
  * Filter out entries from an object.
@@ -7377,6 +7428,7 @@ const Choices = class {
 };
 Choices.style = selectCss;
 
+exports.ifx_icon_button = IconButton;
 exports.ifx_select = Choices;
 
-//# sourceMappingURL=ifx-select.cjs.entry.js.map
+//# sourceMappingURL=ifx-icon-button_2.cjs.entry.js.map