{"version":3,"file":"Btn-DExEvtgD.js","sources":["../../../app/javascript/components/shared/Btn.vue"],"sourcesContent":["<template>\n  <a\n    :class=\"[className, { 'themed-button': theme }]\"\n    href=\"#\"\n    class=\"btn btn-has-state\"\n    :disabled=\"disabled ? 'disabled' : null\"\n    :style=\"buttonTheme\"\n    @click.exact.prevent.stop=\"handleClick\"\n    @click.alt.prevent=\"$emit('alt-click')\">\n    <span class=\"btn-text-node flex justify-center items-center\">\n      <slot></slot>\n    </span>\n    <fade-transition>\n      <span\n        v-if=\"state === 'loading'\"\n        class=\"btn-state btn-loading-state\">\n        <div class=\"loading-dot loading-dot-1\"></div>\n        <div class=\"loading-dot loading-dot-2\"></div>\n        <div class=\"loading-dot loading-dot-3\"></div>\n      </span>\n    </fade-transition>\n    <fade-transition>\n      <span\n        v-if=\"state === 'error'\"\n        class=\"btn-state btn-success-state\">\n        <svgIcon name=\"cross\" />\n      </span>\n    </fade-transition>\n    <fade-transition>\n      <span\n        v-if=\"state === 'success'\"\n        class=\"btn-state btn-success-state\">\n        <svgIcon name=\"tick\" />\n      </span>\n    </fade-transition>\n  </a>\n</template>\n\n<script>\nimport FadeTransition from \"../transitions/FadeTransition.vue\";\nimport SvgIcon from \"./SvgIcon.vue\";\n\nexport default {\n  name: \"Btn\",\n  components: {\n    FadeTransition,\n    SvgIcon\n  },\n  props: {\n    type: {\n      type: String,\n      default: \"primary\"\n    },\n    promise: {\n      type: Function,\n      default: null\n    },\n    theme: {\n      type: Object,\n      default: () => {}\n    },\n    disabled: {\n      type: Boolean,\n      default: null\n    }\n  },\n  emits: [\"click\", \"alt-click\", \"promise-fulfilled\"],\n  data() {\n    return {\n      state: \"\"\n    };\n  },\n  computed: {\n    className() {\n      return {\n        [`btn-${this.type}`]: !this.theme,\n        \"btn-loading\": this.state === \"loading\",\n        \"btn-loading-error\": this.state === \"error\",\n        \"btn-loading-success\": this.state === \"success\"\n      };\n    },\n    buttonTheme() {\n      if (this.theme) {\n        return {\n          borderRadius: this.theme.button.borderRadius,\n          textTransform: this.theme.button.textTransform,\n          fontFamily: this.theme.button.fontFamily,\n          outline: this.theme.button.outline,\n          letterSpacing: this.theme.button.letterSpacing,\n          \"--button-color\": this.theme.button.color,\n          \"--button-background-color\": this.theme.button.backgroundColor,\n          \"--button-border-color\": this.theme.button.backgroundColor,\n          \"--button-box-shadow\": this.theme.button.boxShadow,\n          \"--button-hover-color\": this.theme.button.hover.color,\n          \"--button-hover-background-color\":\n            this.theme.button.hover.backgroundColor,\n          \"--button-hover-border-color\": this.theme.button.hover.borderColor,\n          \"--button-hover-box-shadow\": this.theme.button.hover.boxShadow,\n          \"--button-focus-color\": this.theme.button.focus.color,\n          \"--button-focus-background-color\":\n            this.theme.button.focus.backgroundColor,\n          \"--button-focus-border-color\": this.theme.button.focus.borderColor,\n          \"--button-focus-box-shadow\": this.theme.button.focus.boxShadow\n        };\n      }\n      return null;\n    }\n  },\n  methods: {\n    showLoader() {\n      this.state = \"loading\";\n    },\n    hideLoader() {\n      this.state = \"\";\n    },\n    handleClick() {\n      if (this.state === \"loading\" || this.state === \"success\") {\n        // stop double click issues\n        // if button has any state then that means it has just been clicked\n        // state resets to null two seconds after promise executes\n        // this is when we can click the button again\n      } else if (this.promise) {\n        this.callPromise();\n      } else {\n        this.$emit(\"click\");\n      }\n    },\n    callPromise() {\n      const vm = this;\n      this.state = \"loading\";\n      this.promise\n        .call()\n        .then(() => {\n          vm.state = \"success\";\n          setTimeout(() => {\n            vm.state = null;\n            vm.$emit(\"promise-fulfilled\");\n          }, 2000);\n        })\n        .catch(() => {\n          vm.state = \"error\";\n          setTimeout(() => {\n            vm.state = null;\n          }, 2000);\n        });\n    }\n  }\n};\n</script>\n\n<style lang=\"scss\">\n.btn-text-node {\n  visibility: visible;\n  transition: opacity 0.2s linear;\n}\n\n.btn-has-state {\n  position: relative;\n\n  .icon-tick,\n  .icon-cross {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n  }\n\n  .icon-tick {\n    margin-top: -5px;\n    margin-left: -4px;\n  }\n\n  .icon-cross {\n    margin-top: -5px;\n    margin-left: -5px;\n  }\n}\n\n.btn-loading,\n.btn-loading-success,\n.btn-loading-error {\n  .btn-text-node {\n    opacity: 0;\n  }\n}\n\n.btn-loading-state {\n  .loading-dot {\n    height: 4px;\n    width: 4px;\n    border-radius: 50%;\n    background-color: currentColor;\n    position: absolute;\n    top: 50%;\n    margin-top: 5px;\n    left: 50%;\n    animation: loading-bounce 0.45s cubic-bezier(0, 0, 0.15, 1) alternate\n      infinite;\n  }\n\n  .loading-dot-1 {\n    margin-left: -10px;\n  }\n\n  .loading-dot-2 {\n    margin-left: -2px;\n    animation-delay: 0.15s;\n  }\n\n  .loading-dot-3 {\n    margin-left: 6px;\n    animation-delay: 0.3s;\n  }\n}\n\n.btn-primary {\n  .btn-loading-state .loading-dot {\n    background-color: #fff;\n  }\n}\n\n@keyframes loading-bounce {\n  0% {\n    transform: translateY(0) scaleY(0.8);\n  }\n\n  100% {\n    transform: translateY(-10px);\n  }\n}\n\n.themed-button {\n  // Set some defaults, these can be overridden in the buttonTheme\n  --button-color: #343434;\n  --button-background-color: #efefef;\n  --button-border-color: #efefef;\n  --button-hover-color: #343434;\n  --button-hover-background-color: #121212;\n  --button-hover-border-color: #121212;\n  --button-font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto,\n    Arial, sans-serif;\n\n  // We don't want to change some things in a theme\n  border-radius: 3px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-weight: unset;\n  transition: background 0.1s ease;\n  font-family: var(--button-font-family);\n  color: var(--button-color);\n  background-color: var(--button-background-color);\n  border-color: var(--button-border-color);\n  box-shadow: var(--button-box-shadow);\n\n  // Hover/focus styles must use css variables\n  &:hover {\n    color: var(--button-hover-color);\n    background-color: var(--button-hover-background-color);\n    border-color: var(--button-hover-border-color);\n    box-shadow: var(--button-hover-box-shadow);\n  }\n\n  &:focus {\n    color: var(--button-focus-color);\n    background-color: var(--button-focus-background-color);\n    border-color: var(--button-focus-border-color);\n    box-shadow: var(--button-focus-box-shadow);\n  }\n}\n</style>\n"],"names":["_sfc_main","FadeTransition","SvgIcon","vm","_hoisted_1","_hoisted_2","_createElementBlock","_normalizeClass","$options","$props","_normalizeStyle","_cache","_withModifiers","args","$event","_ctx","_createElementVNode","_renderSlot","_createVNode","_component_fade_transition","_withCtx","$data","_openBlock","_hoisted_3","_createCommentVNode","_hoisted_4","_component_svgIcon","_hoisted_5"],"mappings":"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"}