{"version":3,"file":"BButton-BJEME-3t.js","sources":["../../../frontend/common/components/BButton/BButton.constants.js","../../../frontend/common/components/BButton/BButton.vue"],"sourcesContent":["export const COLORS = {\n  primary: 'primary',\n  danger: 'danger',\n  base: 'base',\n  inverted: 'inverted',\n}\n\nexport const VARIANTS = {\n  fill: 'fill',\n  light: 'light',\n  text: 'text',\n}\n\nexport const SIZES = {\n  sm: 'sm',\n  base: 'base',\n  lg: 'lg',\n}\n","<template>\n  <component\n    :is=\"component\"\n    class=\"b-button box-border inline-flex items-center text-base leading-normal font-medium cursor-pointer transition duration-200\"\n    :class=\"[style, blockStyle, roundedStyle, {'icon-alone': $slots.icon}]\"\n    :href=\"linkHref\"\n    :to=\"to\"\n    :type=\"buttonType\"\n    :disabled=\"loading || disabled\"\n    v-bind=\"$attrs\"\n    v-on=\"$listeners\"\n  >\n    <slot name=\"icon\" />\n    <img\n      v-if=\"icon\"\n      :src=\"icon\"\n      alt=\"icon\"\n      class=\"h-4 w-4 m-h-4 m-w-4\"\n      :class=\"iconClass\"\n      aria-hidden=\"true\"\n      data-test=\"icon\"\n    >\n    <span\n      v-if=\"loading && withLoadingText\"\n      class=\"flex\"\n    >\n      <slot\n        name=\"loadingText\"\n      />\n      <span\n        class=\"block m-auto spinner ml-2 rounded-full w-4 h-4 border-solid\"\n      />\n    </span>\n    <slot\n      v-else\n    />\n  </component>\n</template>\n\n<script>\nimport { COLORS, SIZES, VARIANTS } from './BButton.constants'\n\nexport default {\n  name: 'BButton',\n  props: {\n    /**\n     * Allow to render the button as custom component (e.g. router-link)\n     */\n    as: {\n      type: String,\n      default: null,\n    },\n    /**\n     * This prop is delegated to the `type` attribute of the internal `<button>` element\n     */\n    type: {\n      type: String,\n      default: 'button',\n      validator: value => ['button', 'reset', 'submit'].includes(value),\n    },\n    /**\n     * This prop makes element <a> link and is delegated to `href` attribute of the `<a>` element\n     */\n    href: {\n      type: String,\n      default: null,\n    },\n    /**\n     * This prop makes element <inertia-link> and is delegated to `href` attribute of the `<inertia-link>` element\n     */\n    to: {\n      type: [String, Object],\n      default: null,\n    },\n    variant: {\n      type: String,\n      default: VARIANTS.light,\n      validator: value => Object.values(VARIANTS).includes(value),\n    },\n    /**\n     * Button color. Possible values: `base`, `primary`, `danger`,\n     */\n    color: {\n      type: String,\n      default: COLORS.primary,\n      validator: value => Object.values(COLORS).includes(value),\n    },\n    /**\n     * Button size. Possible values: `sm`, `base`, `lg`\n     */\n    size: {\n      type: String,\n      default: 'base',\n      validator: value => Object.values(SIZES).includes(value),\n    },\n    /**\n     * Set button width to 100%\n     */\n    block: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * Renders `<button>` with disabled attribute and disabled style\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * Src attribute of the icon displayed at the left of the button\n     */\n    icon: {\n      type: String,\n      default: '',\n    },\n    /**\n     * Icon is placed before or after button's title\n     */\n    iconPosition: {\n      type: String,\n      default: 'start',\n      validate: val => ['start', 'end'].includes(val),\n    },\n    /**\n     * Renders `<button>` with disabled attribute and loading spinner\n     */\n    loading: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * Set button width to 100%\n     */\n    rounded: {\n      type: Boolean,\n      default: false,\n    },\n\n    isAdaptive: {\n      type: Boolean,\n      default: false,\n    },\n  },\n  computed: {\n    style() {\n      const classes = []\n\n      classes.push(`color-${this.color}`)\n      classes.push(`size-${this.size}`)\n      classes.push(`variant-${this.variant}`)\n\n      if (this.disabled) {\n        classes.push('disabled')\n      }\n\n      if (this.isAdaptive) {\n        classes.push('adaptive')\n      }\n\n      if (this.loading) {\n        classes.push('opacity-50 cursor-wait')\n      }\n\n      return classes\n    },\n    blockStyle() {\n      return this.block ? 'w-full justify-center' : ''\n    },\n    roundedStyle() {\n      return this.rounded ? 'rounded-full' : 'rounded'\n    },\n    iconClass() {\n      return [\n        `icon-${this.iconPosition}`,\n        `icon-${this.size}`,\n      ]\n    },\n    component() {\n      if (this.as) {\n        return this.as\n      }\n\n      if (this.isLink) {\n        return 'a'\n      }\n\n      return this.isInertiaLink ? 'inertia-link' : 'button'\n    },\n    isLink() {\n      return !!this.href\n    },\n    isInertiaLink() {\n      return !this.as && !!this.to\n    },\n    buttonType() {\n      return this.component === 'button'\n        ? (this.type || 'button')\n        : null\n    },\n    linkHref() {\n      if (this.isLink && !this.disabled) {\n        return this.href\n      }\n\n      return (this.isInertiaLink) ? this.to : null\n    },\n    withLoadingText() {\n      return !!this.$slots.loadingText\n    },\n  },\n}\n</script>\n\n<style scoped>\n.b-button {\n  &.disabled {\n    &:not(.variant-text) {\n      background: var(--gray-500) !important;\n      border-color: var(--gray-500) !important;\n      color: var(--light) !important;\n    }\n\n    color: var(--gray-500) !important;\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n}\n\n.variant-fill {\n  color: var(--contrast-text-color, var(--light));\n\n  &.color-primary {\n    background: var(--primary);\n\n    &:hover {\n      background: rgba(var(--primary-rgb), 0.8);\n    }\n\n    &:active {\n      background: rgba(var(--primary-rgb), 0.7);\n    }\n  }\n\n  &.color-danger {\n    background: var(--danger);\n\n    &:hover {\n      background: rgba(var(--danger-rgb), 0.8);\n    }\n\n    &:active {\n      background: rgba(var(--danger-rgb), 0.7);\n    }\n  }\n\n  &.color-base {\n    background: var(--dark);\n\n    &:hover {\n      background: rgba(var(--dark-rgb), 0.8);\n    }\n\n    &:active {\n      background: rgba(var(--dark-rgb), 0.7);\n    }\n  }\n\n  &.color-inverted {\n    background: var(--light);\n    color: var(--black);\n\n    &:hover {\n      background: rgba(var(--light-rgb), 0.8);\n    }\n\n    &:active {\n      background: rgba(var(--light-rgb), 0.7);\n    }\n  }\n}\n\n.variant-light {\n  &.color-primary {\n    background: rgba(var(--primary-rgb), 0.1);\n    color: var(--primary);\n\n    &:hover {\n      background: rgba(var(--primary-rgb), 0.15);\n    }\n\n    &:active {\n      background: rgba(var(--primary-rgb), 0.3);\n    }\n  }\n\n  &.color-danger {\n    background: rgba(var(--danger-rgb), 0.1);\n    color: var(--danger);\n\n    &:hover {\n      background: rgba(var(--danger-rgb), 0.15);\n    }\n\n    &:active {\n      background: rgba(var(--danger-rgb), 0.3);\n    }\n  }\n\n  &.color-base {\n    background: rgba(var(--dark-rgb), 0.05);\n    color: var(--dark);\n\n    &:hover {\n      background: rgba(var(--dark-rgb), 0.1);\n    }\n\n    &:active {\n      background: rgba(var(--dark-rgb), 0.15);\n    }\n  }\n\n  &.color-inverted {\n    background: rgba(var(--light-rgb), 0.1);\n    color: var(--light);\n\n    &:hover {\n      background: rgba(var(--light-rgb), 0.15);\n    }\n\n    &:active {\n      background: rgba(var(--light-rgb), 0.3);\n    }\n  }\n}\n\n.variant-text {\n  &.color-primary {\n    color: var(--primary);\n\n    &:hover {\n      color: rgba(var(--primary-rgb), 0.8);\n    }\n\n    &:active {\n      color: rgba(var(--primary-rgb), 0.7);\n    }\n  }\n\n  &.color-danger {\n    color: var(--danger);\n\n    &:hover {\n      color: rgba(var(--danger-rgb), 0.8);\n    }\n\n    &:active {\n      color: rgba(var(--danger-rgb), 0.7);\n    }\n  }\n\n  &.color-base {\n    color: var(--dark);\n\n    &:hover {\n      color: rgba(var(--dark-rgb), 0.8);\n    }\n\n    &:active {\n      color: rgba(var(--dark-rgb), 0.7);\n    }\n  }\n\n  &.color-inverted {\n    color: var(--light);\n\n    &:hover {\n      color: rgba(var(--light-rgb), 0.8);\n    }\n\n    &:active {\n      color: rgba(var(--light-rgb), 0.7);\n    }\n  }\n}\n\n.icon-alone {\n  @apply items-center justify-center;\n}\n\n.size-sm {\n  @apply text-sm leading-4;\n\n  &:not(.variant-text, .icon-alone) {\n    min-height: 2rem;\n    padding: 0.5rem 0.75rem;\n\n    &.adaptive {\n      @apply h-8 px-3 py-2 text-sm;\n\n      @media screen and (min-width: 640px) {\n        & {\n          @apply h-10 px-4 text-base;\n        }\n      }\n    }\n  }\n\n  &.icon-alone {\n    @apply h-8 w-8;\n  }\n}\n\n.size-base {\n  &:not(.variant-text, .icon-alone) {\n    min-height: 2.5rem;\n    padding: 0.5rem 1rem;\n  }\n\n  &.icon-alone {\n    @apply h-10 w-10;\n  }\n}\n\n.size-lg {\n  @apply text-lg leading-6;\n\n  &:not(.variant-text, .icon-alone) {\n    min-height: 3rem;\n    padding: 0.75rem 1.5rem;\n  }\n\n  &.icon-alone {\n    @apply h-12 w-12;\n  }\n}\n\n.icon-start {\n  &.icon-sm {\n    @apply mr-1;\n  }\n\n  &.icon-base {\n    @apply mr-2;\n  }\n\n  &.icon-lg {\n    @apply mr-3;\n  }\n}\n\n.icon-end {\n  @apply order-last;\n\n  &.icon-sm {\n    @apply ml-1;\n  }\n\n  &.icon-base {\n    @apply ml-2;\n  }\n\n  &.icon-lg {\n    @apply ml-3;\n  }\n}\n\n.dark {\n  .variant-fill {\n    &.color-base {\n      background: var(--light);\n      color: var(--black);\n\n      &:hover {\n        background: rgba(var(--light-rgb), 0.8);\n      }\n\n      &:active {\n        background: rgba(var(--light-rgb), 0.7);\n      }\n    }\n\n    &.color-inverted {\n      background: var(--dark);\n      color: var(--light);\n\n      &:hover {\n        background: rgba(var(--dark-rgb), 0.8);\n      }\n\n      &:active {\n        background: rgba(var(--dark-rgb), 0.7);\n      }\n    }\n  }\n\n  .variant-light {\n    &.color-primary {\n      background: rgba(var(--primary-rgb), 0.24);\n      color: var(--primary);\n\n      &:hover {\n        background: rgba(var(--primary-rgb), 0.3);\n      }\n\n      &:active {\n        background: rgba(var(--primary-rgb), 0.4);\n      }\n    }\n\n    &.color-danger {\n      background: rgba(var(--danger-rgb), 0.24);\n      color: var(--danger);\n\n      &:hover {\n        background: rgba(var(--danger-rgb), 0.3);\n      }\n\n      &:active {\n        background: rgba(var(--danger-rgb), 0.4);\n      }\n    }\n\n    &.color-base {\n      background: rgba(var(--light-rgb), 0.1);\n      color: var(--gray-100);\n\n      &:hover {\n        background: rgba(var(--light-rgb), 0.15);\n      }\n\n      &:active {\n        background: rgba(var(--light-rgb), 0.3);\n      }\n    }\n\n    &.color-inverted {\n      background: rgba(var(--dark-rgb), 0.05);\n      color: var(--dark);\n\n      &:hover {\n        background: rgba(var(--dark-rgb), 0.1);\n      }\n\n      &:active {\n        background: rgba(var(--dark-rgb), 0.15);\n      }\n    }\n  }\n\n  .variant-text {\n    &.color-base {\n      color: var(--light);\n\n      &:hover {\n        background: rgba(var(--light-rgb), 0.1);\n      }\n\n      &:active {\n        background: rgba(var(--light-rgb), 0.15);\n      }\n    }\n\n    &.color-inverted {\n      color: var(--dark);\n\n      &:hover {\n        background: rgba(var(--dark-rgb), 0.1);\n      }\n\n      &:active {\n        background: rgba(var(--dark-rgb), 0.15);\n      }\n    }\n  }\n}\n\n.spinner {\n  border: 2px solid currentColor;\n  border-right-color: transparent;\n  animation: rotate 0.9s linear infinite;\n}\n\n@keyframes rotate {\n  to {\n    transform: rotate(360deg);\n  }\n}\n</style>\n"],"names":["COLORS","VARIANTS","SIZES","_sfc_main","value","val","classes"],"mappings":"0DAAO,MAAMA,EAAS,CACpB,QAAS,UACT,OAAQ,SACR,KAAM,OACN,SAAU,UACZ,EACaC,EAAW,CACtB,KAAM,OACN,MAAO,QACP,KAAM,MACR,EACaC,EAAQ,CACnB,GAAI,KACJ,KAAM,OACN,GAAI,IACN,EC2BAC,EAAA,CACA,KAAA,UACA,MAAA,CAIA,GAAA,CACA,KAAA,OACA,QAAA,IACA,EAIA,KAAA,CACA,KAAA,OACA,QAAA,SACA,UAAAC,GAAA,CAAA,SAAA,QAAA,QAAA,EAAA,SAAAA,CAAA,CACA,EAIA,KAAA,CACA,KAAA,OACA,QAAA,IACA,EAIA,GAAA,CACA,KAAA,CAAA,OAAA,MAAA,EACA,QAAA,IACA,EACA,QAAA,CACA,KAAA,OACA,QAAAH,EAAA,MACA,UAAAG,GAAA,OAAA,OAAAH,CAAA,EAAA,SAAAG,CAAA,CACA,EAIA,MAAA,CACA,KAAA,OACA,QAAAJ,EAAA,QACA,UAAAI,GAAA,OAAA,OAAAJ,CAAA,EAAA,SAAAI,CAAA,CACA,EAIA,KAAA,CACA,KAAA,OACA,QAAA,OACA,UAAAA,GAAA,OAAA,OAAAF,CAAA,EAAA,SAAAE,CAAA,CACA,EAIA,MAAA,CACA,KAAA,QACA,QAAA,EACA,EAIA,SAAA,CACA,KAAA,QACA,QAAA,EACA,EAIA,KAAA,CACA,KAAA,OACA,QAAA,EACA,EAIA,aAAA,CACA,KAAA,OACA,QAAA,QACA,SAAAC,GAAA,CAAA,QAAA,KAAA,EAAA,SAAAA,CAAA,CACA,EAIA,QAAA,CACA,KAAA,QACA,QAAA,EACA,EAIA,QAAA,CACA,KAAA,QACA,QAAA,EACA,EAEA,WAAA,CACA,KAAA,QACA,QAAA,EACA,CACA,EACA,SAAA,CACA,OAAA,CACA,MAAAC,EAAA,CAAA,EAEA,OAAAA,EAAA,KAAA,SAAA,KAAA,KAAA,EAAA,EACAA,EAAA,KAAA,QAAA,KAAA,IAAA,EAAA,EACAA,EAAA,KAAA,WAAA,KAAA,OAAA,EAAA,EAEA,KAAA,UACAA,EAAA,KAAA,UAAA,EAGA,KAAA,YACAA,EAAA,KAAA,UAAA,EAGA,KAAA,SACAA,EAAA,KAAA,wBAAA,EAGAA,CACA,EACA,YAAA,CACA,OAAA,KAAA,MAAA,wBAAA,EACA,EACA,cAAA,CACA,OAAA,KAAA,QAAA,eAAA,SACA,EACA,WAAA,CACA,MAAA,CACA,QAAA,KAAA,YAAA,GACA,QAAA,KAAA,IAAA,EACA,CACA,EACA,WAAA,CACA,OAAA,KAAA,GACA,KAAA,GAGA,KAAA,OACA,IAGA,KAAA,cAAA,eAAA,QACA,EACA,QAAA,CACA,MAAA,CAAA,CAAA,KAAA,IACA,EACA,eAAA,CACA,MAAA,CAAA,KAAA,IAAA,CAAA,CAAA,KAAA,EACA,EACA,YAAA,CACA,OAAA,KAAA,YAAA,SACA,KAAA,MAAA,SACA,IACA,EACA,UAAA,CACA,OAAA,KAAA,QAAA,CAAA,KAAA,SACA,KAAA,KAGA,KAAA,cAAA,KAAA,GAAA,IACA,EACA,iBAAA,CACA,MAAA,CAAA,CAAA,KAAA,OAAA,WACA,CACA,CACA"}