{"version":3,"sources":["webpack:///./src/components/base/BaseButton.vue","webpack:///src/components/base/BaseButton.vue","webpack:///./src/components/base/BaseButton.vue?18e1","webpack:///./src/components/base/BaseButton.vue?3917","webpack:///./src/components/base/BaseButton.vue?26f2"],"names":["_c","_self","class","_vm","btnType","$attrs","staticClass","attrs","loaderSize","staticRenderFns","name","props","type","String","default","validator","val","includes","loading","Boolean","keepSlot","Number","dark","light","computed","currentColor","toString","methods","buttonClick","e","setTimeout","document","activeElement","blur","$emit","component"],"mappings":"yIAA4CA,EAAOC,WAAS,MAAU,KAAiBC,EAAK,EAAEC,MAAIC,G,OAA+C,EAAC,e,MAAC,CAAM,EAAC,mCAAQ,MAAC,CAAG,KAAC,UAAwB,IAAG,MAASD,EAAIE,cAAqE,SAAS,EAAC,iCAACC,YAAY,gBAAcJ,GAAK,MAAC,C,YAAa,cAAc,OAAIC,YAAO,EAAU,UAA2EI,GAAK,GAAC,mC,YAAC,kB,MAAmB,CAAyB,cAAWC,GAAW,MAAQ,eAAC,kBAAG,MAAS,KAAyE,YAAgB,CAAE,oB,MAAC,CAAyB,cAAWA,GAAW,MAAQ,eAAC,kBAAK,MAAG,KAAjE,kBAE/mBC,I,KCkCW,G,kDAAA,CACfC,KAAA,aACAC,MAAA,CACAP,QAAA,CACAQ,KAAAC,OACAC,QAAA,cACAC,UAAA,SAAAC,GAAA,MACA,CACA,cACA,iBACA,kBACA,gBACA,kBACAC,SAAAD,KAEAE,QAAA,CACAN,KAAAO,QACAL,SAAA,GAEAM,SAAAD,QACAX,WAAA,CACAI,KAAAS,OACAP,QAAA,IAEAQ,KAAA,CACAV,KAAAO,QACAL,SAAA,GAEAS,MAAA,CACAX,KAAAO,QACAL,SAAA,IAGAU,SAAA,CACAC,aAAA,WACA,YAAAF,MAAA,QACA,KAAAD,MACA,KAAAlB,QAAAsB,WAAAT,SAAA,QADA,QACA,UAGAU,QAAA,CACAC,YAAA,SAAAC,GACAC,YAAA,WACAC,SAAAC,cAAAC,SACA,KACA,KAAAC,MAAA,QAAAL,OCjFkW,I,wBCQ9VM,EAAY,eACd,EACA,EACA1B,GACA,EACA,KACA,WACA,MAIa,aAAA0B,E,kECnBf","file":"js/chunk-633df0cc.85a320fd.js","sourcesContent":["var render = function render(){var _vm=this,_c=_vm._self._c;return _c('button',_vm._b({class:[_vm.btnType, _vm.loading ? 'is-loading' : ''],attrs:{\"type\":\"button\"},on:{\"click\":_vm.buttonClick}},'button',_vm.$attrs,false),[(_vm.keepSlot)?[_c('div',{staticClass:\"slot-wrapper\"},[_c('div',{staticClass:\"button-slot\",class:{ 'opacity-0': _vm.loading }},[_vm._t(\"default\")],2),(_vm.loading)?_c('v-progress-circular',{staticClass:\"progress-loader\",attrs:{\"indeterminate\":\"\",\"color\":_vm.currentColor,\"size\":_vm.loaderSize,\"width\":2}}):_vm._e()],1)]:[(!_vm.loading)?_vm._t(\"default\"):_c('v-progress-circular',{attrs:{\"indeterminate\":\"\",\"color\":_vm.currentColor,\"size\":_vm.loaderSize,\"width\":2}})]],2)\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <button\n    :class=\"[btnType, loading ? 'is-loading' : '']\"\n    type=\"button\"\n    v-bind=\"$attrs\"\n    @click=\"buttonClick\"\n  >\n    <!-- Adding opacity to slot to save button width -->\n    <template v-if=\"keepSlot\">\n      <div class=\"slot-wrapper\">\n        <div class=\"button-slot\" :class=\"{ 'opacity-0': loading }\">\n          <slot></slot>\n        </div>\n        <v-progress-circular\n          v-if=\"loading\"\n          class=\"progress-loader\"\n          indeterminate\n          :color=\"currentColor\"\n          :size=\"loaderSize\"\n          :width=\"2\"\n        />\n      </div>\n    </template>\n    <template v-else>\n      <slot v-if=\"!loading\"></slot>\n      <v-progress-circular\n        v-else\n        indeterminate\n        :color=\"currentColor\"\n        :size=\"loaderSize\"\n        :width=\"2\"\n      />\n    </template>\n  </button>\n</template>\n<script>\nexport default {\n  name: \"BaseButton\",\n  props: {\n    btnType: {\n      type: String,\n      default: \"mem-primary\",\n      validator: (val) =>\n        [\n          \"mem-primary\",\n          \"secondary-dark\",\n          \"secondary-light\",\n          \"tertiary-dark\",\n          \"tertiary-light\",\n        ].includes(val),\n    },\n    loading: {\n      type: Boolean,\n      default: false,\n    },\n    keepSlot: Boolean,\n    loaderSize: {\n      type: Number,\n      default: 32,\n    },\n    dark: {\n      type: Boolean,\n      default: false,\n    },\n    light: {\n      type: Boolean,\n      default: false,\n    },\n  },\n  computed: {\n    currentColor() {\n      if (this.light) return \"black\";\n      if (this.dark) return \"white\";\n      return this.btnType.toString().includes(\"dark\") ? \"white\" : \"black\";\n    },\n  },\n  methods: {\n    buttonClick(e) {\n      setTimeout(() => {\n        document.activeElement.blur();\n      }, 200);\n      this.$emit(\"click\", e);\n    },\n  },\n};\n</script>\n<style lang=\"scss\" scoped>\n.base-button {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.opacity-0 {\n  opacity: 0;\n}\nbutton {\n  height: 44px;\n  font-weight: bold;\n  text-transform: uppercase;\n  border-radius: 22.7053px;\n  padding: 0 24px;\n  letter-spacing: 0.04em;\n  font-size: 14px;\n  transition: box-shadow 0.18s ease-in-out;\n  .slot-wrapper {\n    position: relative;\n    .progress-loader {\n      position: absolute;\n      top: 2.5px;\n      left: 0;\n      right: 0;\n      margin-inline: auto;\n      z-index: $zindex-page-element;\n    }\n  }\n}\nbutton:disabled {\n  pointer-events: none;\n}\nbutton:not(.is-disabled):focus {\n  box-shadow: 0px 0px 20px #2596ff;\n  outline: none;\n}\n.mem-primary {\n  color: #ffffff;\n  background: #cf1019;\n  opacity: 1;\n  transition: opacity 0.2s ease-in;\n\n  &:disabled {\n    background-color: #e0e0e0;\n    color: #aaaaaa;\n  }\n}\n.mem-primary:hover {\n  opacity: 0.7;\n}\n\n.secondary-dark {\n  color: #191818 !important;\n  background: #ffffff;\n}\n.secondary-dark:disabled {\n  background-color: transparent;\n  border: 1px solid #999999;\n  color: #999999 !important;\n}\n.secondary-dark:hover:not(:disabled) {\n  color: #ffffff !important;\n  background: #cf1019;\n  // transition: 150ms linear;\n}\n\n.secondary-light {\n  color: #ffffff;\n  background: #121212;\n}\n.secondary-light:hover:not(:disabled) {\n  color: #ffffff;\n  background: #cf1019;\n}\n.secondary-light:disabled {\n  background: #d0d0d0;\n}\n\n.tertiary-dark {\n  border: 1px solid rgba(255, 255, 255, 0.4);\n}\n.tertiary-dark:hover {\n  color: #191818;\n  background: #ffffff;\n  border: 1px solid #ffffff;\n}\n.tertiary-dark:disabled {\n  border: 1px solid rgba(255, 255, 255, 0.21);\n  background: inherit;\n  color: rgba(255, 255, 255, 0.2);\n  cursor: default !important;\n}\n\n.tertiary-light {\n  color: #121212;\n  border: 1px solid rgba(0, 0, 0, 0.4);\n}\n.tertiary-light:hover {\n  color: #ffffff;\n  background: #121212;\n  border: 1px solid #121212;\n}\n.tertiary-light:disabled {\n  // border: 1px solid rgba(255, 255, 255, 0.21);\n  // background: inherit;\n  // color: rgba(255, 255, 255, 0.2);\n  // cursor: default !important;\n}\n.is-loading {\n  pointer-events: none;\n  .slot-wrapper {\n    height: 100%;\n  }\n}\n.is-loading,\n.is-loading:hover,\n.is-loading:focus {\n  display: block;\n  background: transparent !important;\n  cursor: default;\n  box-shadow: none !important;\n}\n</style>\n","import mod from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./BaseButton.vue?vue&type=script&lang=js\"; export default mod; export * from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./BaseButton.vue?vue&type=script&lang=js\"","import { render, staticRenderFns } from \"./BaseButton.vue?vue&type=template&id=b789a2ee&scoped=true\"\nimport script from \"./BaseButton.vue?vue&type=script&lang=js\"\nexport * from \"./BaseButton.vue?vue&type=script&lang=js\"\nimport style0 from \"./BaseButton.vue?vue&type=style&index=0&id=b789a2ee&prod&lang=scss&scoped=true\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  \"b789a2ee\",\n  null\n  \n)\n\nexport default component.exports","export * from \"-!../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--9-oneOf-1-0!../../../node_modules/css-loader/dist/cjs.js??ref--9-oneOf-1-1!../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/postcss-loader/src/index.js??ref--9-oneOf-1-2!../../../node_modules/sass-loader/dist/cjs.js??ref--9-oneOf-1-3!../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./BaseButton.vue?vue&type=style&index=0&id=b789a2ee&prod&lang=scss&scoped=true\""],"sourceRoot":""}