{"file":"vds-button.entry.js","mappings":";;;AAAA,MAAM,YAAY,GAAG,sqXAAsqX,CAAC;AAC5rX,wBAAe,YAAY;;MCOd,SAAS;;;QAiDZ,gBAAW,GAAG,CAAC,EAAS;YAC9B,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,IAAI,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;gBACnD,MAAM,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;gBACrC,IAAI,IAAI,EAAE;oBACR,EAAE,CAAC,cAAc,EAAE,CAAC;oBAEpB,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;oBACpD,UAAU,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;oBAC5B,UAAU,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;oBAClC,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;oBAC7B,UAAU,CAAC,KAAK,EAAE,CAAC;oBACnB,UAAU,CAAC,MAAM,EAAE,CAAC;iBACrB;aACF;SACF,CAAA;6BAxDuD,OAAO;qBAKlC,SAAS;oBAKF,QAAQ;;wBAUO,KAAK;;sBAUd,OAAO;sBAKvB,KAAK;2BAKA,KAAK;;IAkBpC,MAAM;QAEJ,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC;QAC1F,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,KAAK,SAAS,GAAG,QAAQ,GAAG,GAAU,CAAC;QAEhE,QACE,EAAC,IAAI,qDACH,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,KAAK,EAAE;gBACL,iBAAiB,EAAE,QAAQ;gBAC3B,QAAQ,EAAE,MAAM;aACjB,IACD,EAAC,OAAO,qDACR,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE;gBACL,wRAAwR,EAAE,IAAI;gBAC9R,gBAAgB,EAAE,KAAK,KAAK,SAAS;gBACrC,cAAc,EAAE,KAAK,KAAK,OAAO;gBACjC,oBAAoB,EAAE,WAAW;gBACjC,qBAAqB,EAAE,aAAa,KAAK,SAAS;gBAClD,mBAAmB,EAAE,aAAa,KAAK,OAAO;gBAC9C,oBAAoB,EAAE,aAAa,KAAK,QAAQ;gBAChD,sBAAsB,EAAE,MAAM;aAC/B,EACD,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAG,QAAQ,EACnB,IAAI,EAAG,IAAI,EACX,MAAM,EAAG,MAAM,IACb,6DAAM,KAAK,EAAC,gCAAgC,IACxC,KAAK,CACF,EACP,6DAAM,KAAK,EAAC,4CAA4C,IACtD,6DAAM,IAAI,EAAC,MAAM,GAAQ,CACpB,CACD,CACL,EACL;KACH;IAED,MAAM,kBAAkB;QACtB,IAAI,CAAC,YAAY,EAAE,CAAC;KACrB;IAEO,YAAY;QAClB,MAAM,GAAG,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QACzC,IAAI,GAAG,EAAE;YACP,GAAG,CAAC,KAAK,CAAC,OAAO,GAAG,SAAS,CAAC;YAC9B,GAAG,CAAC,KAAK,CAAC,aAAa,GAAG,QAAQ,CAAC;YACnC,GAAG,CAAC,KAAK,CAAC,QAAQ,GAAG,SAAS,CAAC;SAChC;KACF;;;;;;;","names":[],"sources":["src/components/vds-button/vds-button.scss?tag=vds-button&encapsulation=shadow","src/components/vds-button/vds-button.tsx"],"sourcesContent":[":host {\r\n  @apply block;\r\n}\r\n\r\n:host(.button-disabled) {\r\n  @apply cursor-default pointer-events-none;\r\n}\r\n\r\nbutton, a {\r\n  background-size: 220% 200% !important;\r\n  &:hover, &:focus, &:active {\r\n    background-position: -90% 0% !important;\r\n  }\r\n  // Icon Visible\r\n  &.button-icon-visible {\r\n    @apply pl-[15px] pr-[15px];\r\n    .button-label {\r\n      @apply relative text-left pr-[20px] -top-[2px];\r\n    }\r\n    .button-icon {\r\n      @apply inline;\r\n    }\r\n  }\r\n  // Icon Hover\r\n  &.button-icon-hover {\r\n    .button-label {\r\n      @apply pl-[35px] pr-0 relative -top-[2px];\r\n      transition: all 0.3s ease, color 0.1s ease;\r\n    }\r\n    .button-icon {\r\n      @apply inline text-white opacity-0 pr-[25px] ml-[-10px] pl-0 transition-all duration-[300ms];\r\n    }\r\n    &:hover {\r\n      .button-label {\r\n        @apply sm:text-left sm:pl-[15px] sm:pr-[5px];\r\n      }\r\n      .button-icon {\r\n        @apply sm:opacity-100 sm:ml-0 sm:pr-[10px] sm:pl-[15px];\r\n      }\r\n    }\r\n  }\r\n  // Icon Hidden\r\n  &.button-icon-hidden {\r\n    .button-label {\r\n      @apply px-[35px] relative -top-[2px];\r\n    }\r\n    .button-icon {\r\n      @apply hidden;\r\n    }\r\n  }\r\n  // Color Default\r\n  &.button-default {\r\n    @apply text-grey border-grey;\r\n    background: linear-gradient(90deg, var(--vt-color-white, #fff) 50%, var(--vt-color-grey-default, #4B4B46) 50%);\r\n    &:hover, &:focus, &:active {\r\n      @apply text-white bg-grey;\r\n    }\r\n  }\r\n  // Color Berry\r\n  &.button-berry {\r\n    @apply text-berry border-berry;\r\n    background: linear-gradient(90deg, var(--vt-color-white, #fff) 50%, var(--vt-color-berry-default, #D7004B) 50%);\r\n    &:hover, &:focus, &:active {\r\n      @apply text-white bg-berry;\r\n    }\r\n  }\r\n  // Background Transparent\r\n  &.button-transparent {\r\n    background: transparent !important;\r\n    &.button-default {\r\n      color: #4B4B46 !important;\r\n      .button-icon {\r\n        color: #4B4B46 !important;;\r\n      }\r\n    }\r\n    &.button-berry {\r\n      color: #D7004B !important;\r\n      .button-icon {\r\n        color: #D7004B !important;;\r\n      }\r\n    }\r\n  }\r\n}\r\n","import { Component, h, Element, Host, Prop } from '@stencil/core';\nimport { HTMLAnchorElementTarget, ButtonColor, hasShadowDom } from '../../utils/helpers';\n\n@Component({\n  tag: 'vds-button',\n  styleUrl: 'vds-button.scss',\n  shadow: true,\n})\nexport class VdsButton {\n\n  @Element() el!: HTMLElement;\n\n  /**\n   * Behavior of the icon (showing always or only on hover)\n   */\n  @Prop() iconBehaviour: 'visible' | 'hover' | 'hidden' = 'hover';\n\n  /**\n   * Button coloring\n   */\n  @Prop() color: ButtonColor = 'default';\n\n  /**\n   * The type of the button.\n   */\n  @Prop() type: 'submit' | 'button' = 'button';\n\n  /**\n   * Label of the button\n   */\n  @Prop() label: string;\n\n  /**\n   * Toggles disabled status on and off\n   */\n  @Prop({ reflect: true, mutable: true }) disabled = false;\n\n  /**\n   * Href of anchor\n   */\n  @Prop() href: string;\n\n  /**\n   * Target of anchor\n   */\n  @Prop() target: HTMLAnchorElementTarget = '_self';\n\n  /**\n   * Sets a min-width for the button to apply a standard width\n   */\n  @Prop() expand: boolean = false;\n\n  /**\n   * Toggles background tranparency\n   */\n  @Prop() transparent: boolean = false;\n\n  private handleClick = (ev: Event) => {\n    if (this.type === 'submit' && hasShadowDom(this.el)) {\n      const form = this.el.closest('form');\n      if (form) {\n        ev.preventDefault();\n\n        const fakeButton = document.createElement('button');\n        fakeButton.type = this.type;\n        fakeButton.style.display = 'none';\n        form.appendChild(fakeButton);\n        fakeButton.click();\n        fakeButton.remove();\n      }\n    }\n  }\n\n  render() {\n\n    const { disabled, color, iconBehaviour, label, href, target, expand, transparent } = this;\n    const TagType = this.href === undefined ? 'button' : 'a' as any;\n\n    return(\n      <Host\n        onClick={this.handleClick}\n        class={{\n          'button-disabled': disabled,\n          'w-full': expand\n        }}>\n        <TagType\n        part=\"button\"\n        class={{\n          \"inline-block border-solid text-center no-underline m-0 normal-case overflow-visible box-border align-middle sm:leading-[36px] leading-[26px] font-bold rounded-[22px] border-2 text-[15px] transition-all ease-out bg-left-top disabled:text-grey-lighter disabled:border-grey-lighter\": true,\n          \"button-default\": color === \"default\",\n          \"button-berry\": color === \"berry\",\n          \"button-transparent\": transparent,\n          \"button-icon-visible\": iconBehaviour === \"visible\",\n          \"button-icon-hover\": iconBehaviour === \"hover\",\n          \"button-icon-hidden\": iconBehaviour === \"hidden\",\n          \"min-w-[100px] w-full\": expand\n        }}\n        type=\"button\"\n        disabled={ disabled }\n        href={ href }\n        target={ target }>\n          <span class=\"button-label whitespace-nowrap\">\n            { label }\n          </span>\n          <span class=\"button-icon relative text-right -top-[2px]\">\n            <slot name=\"icon\"></slot>\n          </span>\n      </TagType>\n    </Host>\n    );\n  }\n\n  async componentDidRender() : Promise<void> {\n    this.setSvgStyles();\n  }\n\n  private setSvgStyles() {\n    const svg = this.el.querySelector('svg');\n    if (svg) {\n      svg.style.display = `initial`;\n      svg.style.verticalAlign = `middle`;\n      svg.style.overflow = `visible`;\n    }\n  }\n}\n"],"version":3}