{"version":3,"sources":["webpack:///./src/components/StepIndicator.vue?ede8","webpack:///src/components/StepIndicator.vue","webpack:///./src/components/StepIndicator.vue?1f50","webpack:///./src/components/StepIndicator.vue?29ef","webpack:///./src/components/StepIndicator.vue?49bc","webpack:///./src/assets/svg/circle-check.svg"],"names":["render","_vm","this","_h","$createElement","_c","_self","staticClass","class","signup-design","signupDesign","style","width","_l","step","index","key","current","valid","visited","first-step","_e","done","showCheckmark","on","click","$event","goToStep","_v","_s","title","directives","name","rawName","value","expression","attrs","src","__webpack_require__","alt","tooltip","tooltipText","tooltip-placement","steps","length","mouseover","setTooltipText","staticRenderFns","StepIndicatorvue_type_script_lang_js_","props","type","required","disabled","default","data","methods","allowed","$emit","deniedAccessMsg","text","setTooltipPlacement","console","watch","handler","_this","find","s","components_StepIndicatorvue_type_script_lang_js_","component","Object","componentNormalizer","__webpack_exports__","_node_modules_mini_css_extract_plugin_dist_loader_js_ref_10_oneOf_1_0_node_modules_css_loader_index_js_ref_10_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_10_oneOf_1_2_node_modules_less_loader_dist_cjs_js_ref_10_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_StepIndicator_vue_vue_type_style_index_0_lang_less___WEBPACK_IMPORTED_MODULE_0__","_node_modules_mini_css_extract_plugin_dist_loader_js_ref_10_oneOf_1_0_node_modules_css_loader_index_js_ref_10_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_10_oneOf_1_2_node_modules_less_loader_dist_cjs_js_ref_10_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_StepIndicator_vue_vue_type_style_index_0_lang_less___WEBPACK_IMPORTED_MODULE_0___default","n","module","exports","p"],"mappings":"mLAAA,IAAAA,EAAA,WAA0B,IAAAC,EAAAC,KAAaC,EAAAF,EAAAG,eAA0BC,EAAAJ,EAAAK,MAAAD,IAAAF,EAAwB,OAAAE,EAAA,OAAiBE,YAAA,iBAAAC,MAAA,CAAoCC,gBAAAR,EAAAS,cAAoCC,MAAA,CAASC,MAAAX,EAAAW,QAAqBX,EAAAY,GAAAZ,EAAA,eAAAa,EAAAC,GAAyC,OAAAV,EAAA,OAAiBW,IAAAD,EAAAR,YAAA,OAAAC,MAAA,CAAoCS,QAAAhB,EAAAgB,SAAAH,OAAAI,MAAAJ,EAAAK,SAAAL,EAAAI,MAAAE,aAAA,GAAAL,IAAkG,IAAAA,EAAAV,EAAA,OAAyBE,YAAA,qBAA+BN,EAAAoB,KAAApB,EAAAS,aAAosBL,EAAA,OAAkBE,YAAA,wBAAAC,MAAA,CAA2Cc,KAAArB,EAAAsB,cAAAT,IAAgCU,GAAA,CAAKC,MAAA,SAAAC,GAAyB,OAAAzB,EAAA0B,SAAAb,MAA4B,CAAAT,EAAA,MAAWE,YAAA,SAAoB,CAAAN,EAAA2B,GAAA3B,EAAA4B,GAAAf,EAAAgB,UAAAzB,EAAA,QAA0C0B,WAAA,EAAaC,KAAA,OAAAC,QAAA,SAAAC,OAAAjC,EAAAsB,cAAAT,GAAAqB,WAAA,yBAAgG5B,YAAA,eAA4B,CAAAF,EAAA,KAAUE,YAAA,WAAAC,MAAA,cAAAO,EAAA,OAAwDV,EAAA,QAAe0B,WAAA,EAAaC,KAAA,OAAAC,QAAA,SAAAC,MAAAjC,EAAAsB,cAAAT,GAAAqB,WAAA,wBAA8F5B,YAAA,4BAAyC,CAAAF,EAAA,OAAY+B,MAAA,CAAOC,IAAMC,EAAQ,QAA+BC,IAAA,sBAAl1ClC,EAAA,OAAyCE,YAAA,eAAA6B,MAAA,CAAkCI,QAAAvC,EAAAS,aAAA,GAAAT,EAAAwC,YAAAC,oBAAA,GAAA3B,EAAA,eAAAA,GAAAd,EAAA0C,MAAAC,OAAA,0BAA6JpB,GAAA,CAAKC,MAAA,SAAAC,GAAyB,OAAAzB,EAAA0B,SAAAb,IAA0B+B,UAAA,SAAAnB,GAA8B,OAAAzB,EAAA6C,eAAAhC,EAAAgB,UAAwC,CAAAzB,EAAA,OAAAA,EAAA,QAAuB0B,WAAA,EAAaC,KAAA,OAAAC,QAAA,SAAAC,OAAAjC,EAAAsB,cAAAT,GAAAqB,WAAA,0BAAkG,CAAA9B,EAAA,KAAUE,YAAA,yBAAiCF,EAAA,QAAe0B,WAAA,EAAaC,KAAA,OAAAC,QAAA,SAAAC,MAAAjC,EAAAsB,cAAAT,GAAAqB,WAAA,yBAAgG,CAAA9B,EAAA,KAAUE,YAAA,uCAAqtB,IAC1zDwC,EAAA,GCwCeC,uBAAA,CACfC,OACAN,OACAO,WACAC,aAEAlC,eACAmC,iBACAxC,OACAsC,YACAG,gBAEA3C,sBAEA4C,gBACA,OACAb,mBAGAc,SACAhC,0BACA,OAAAT,EAAAK,SAAAL,EAAAI,OAEAS,qBACAb,QAAAZ,KAAAe,SAAA,GAAAH,EAAAsC,UAAA,GAAAlD,KAAAkD,WAGAtC,EAAA0C,QAIAtD,KAAAuD,MAAA,aAAA3C,QAHAZ,KAAA4C,eAAAhC,EAAA4C,mBAKAZ,2BACA5C,KAAAuC,YAAAkB,GAEAC,gCAEA,OADAC,eACA,GAAA9C,EAAA,eACAA,GAAAb,KAAAyC,MAAAC,OAAA,gBACA,WAGAkB,OACA7C,SACA8C,mBAAA,IAAAC,EAAA9D,KACAA,KAAAyC,MAAAsB,KAAA,SAAAC,GAAA,OAAAA,EAAApD,MAAAkD,EAAA/C,UAAAE,SAAA,OCvFuVgD,EAAA,0BCQvVC,EAAgBC,OAAAC,EAAA,KAAAD,CACdF,EACAnE,EACA+C,GACF,EACA,KACA,KACA,MAIewB,EAAA,WAAAH,+CCnBf,IAAAI,EAAAlC,EAAA,QAAAmC,EAAAnC,EAAAoC,EAAAF,GAAmhBC,EAAG,wBCAthBE,EAAAC,QAAiBtC,EAAAuC,EAAuB","file":"js/lazy-view-components-StepIndicator.7ab958df.js","sourcesContent":["var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"step-indicator\",class:{ 'signup-design': _vm.signupDesign },style:({ width: _vm.width })},_vm._l((_vm.steps),function(step,index){return _c('div',{key:index,staticClass:\"step\",class:{ current: _vm.current == step.step, valid: step.visited && step.valid, 'first-step': index == 0 }},[(index != 0)?_c('div',{staticClass:\"step-line before\"}):_vm._e(),(!_vm.signupDesign)?_c('div',{staticClass:\"icon-wrapper\",attrs:{\"tooltip\":_vm.signupDesign ? '' : _vm.tooltipText,\"tooltip-placement\":index == 0 ? 'bottom-right' : index == _vm.steps.length - 1 ? 'bottom-left' : 'bottom'},on:{\"click\":function($event){return _vm.goToStep(step)},\"mouseover\":function($event){return _vm.setTooltipText(step.title)}}},[_c('div',[_c('span',{directives:[{name:\"show\",rawName:\"v-show\",value:(!_vm.showCheckmark(step)),expression:\"!showCheckmark(step)\"}]},[_c('i',{staticClass:\"fa-light fa-circle\"})]),_c('span',{directives:[{name:\"show\",rawName:\"v-show\",value:(_vm.showCheckmark(step)),expression:\"showCheckmark(step)\"}]},[_c('i',{staticClass:\"fa-light fa-circle-check\"})])])]):_c('div',{staticClass:\"signup-design-wrapper\",class:{ done: _vm.showCheckmark(step) },on:{\"click\":function($event){return _vm.goToStep(step)}}},[_c('h4',{staticClass:\"title\"},[_vm._v(_vm._s(step.title))]),_c('span',{directives:[{name:\"show\",rawName:\"v-show\",value:(!_vm.showCheckmark(step)),expression:\"!showCheckmark(step)\"}],staticClass:\"step-number\"},[_c('i',{staticClass:\"fa-light\",class:'fa-circle-' + (index + 1)})]),_c('span',{directives:[{name:\"show\",rawName:\"v-show\",value:(_vm.showCheckmark(step)),expression:\"showCheckmark(step)\"}],staticClass:\"step-number signup-check\"},[_c('img',{attrs:{\"src\":require(\"@/assets/svg/circle-check.svg\"),\"alt\":\"Circle check\"}})])])])}),0)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <div class=\"step-indicator\" :style=\"{ width: width }\" :class=\"{ 'signup-design': signupDesign }\">\n    <div\n      v-for=\"(step, index) in steps\"\n      :key=\"index\"\n      class=\"step\"\n      :class=\"{ current: current == step.step, valid: step.visited && step.valid, 'first-step': index == 0 }\"\n    >\n      <div v-if=\"index != 0\" class=\"step-line before\"></div>\n      <div\n        v-if=\"!signupDesign\"\n        class=\"icon-wrapper\"\n        @click=\"goToStep(step)\"\n        :tooltip=\"signupDesign ? '' : tooltipText\"\n        @mouseover=\"setTooltipText(step.title)\"\n        :tooltip-placement=\"index == 0 ? 'bottom-right' : index == steps.length - 1 ? 'bottom-left' : 'bottom'\"\n      >\n        <div>\n          <span v-show=\"!showCheckmark(step)\">\n            <i class=\"fa-light fa-circle\"></i>\n          </span>\n          <span v-show=\"showCheckmark(step)\">\n            <i class=\"fa-light fa-circle-check\"></i>\n          </span>\n        </div>\n      </div>\n      <div v-else @click=\"goToStep(step)\" class=\"signup-design-wrapper\" :class=\"{ done: showCheckmark(step) }\">\n        <h4 class=\"title\">{{ step.title }}</h4>\n        <span class=\"step-number\" v-show=\"!showCheckmark(step)\">\n          <i class=\"fa-light\" :class=\"'fa-circle-' + (index + 1)\"></i>\n        </span>\n        <span class=\"step-number signup-check\" v-show=\"showCheckmark(step)\">\n          <!-- <i class=\"fa-light fa-circle-check\"></i> -->\n          <img src=\"@/assets/svg/circle-check.svg\" alt=\"Circle check\" />\n        </span>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  props: {\n    steps: {\n      type: Array,\n      required: true\n    },\n    current: Number,\n    disabled: Boolean,\n    width: {\n      type: String,\n      default: \"100%\"\n    },\n    signupDesign: Boolean\n  },\n  data() {\n    return {\n      tooltipText: null\n    };\n  },\n  methods: {\n    showCheckmark(step) {\n      return step.visited && step.valid;\n    },\n    goToStep(step) {\n      if (step.step == this.current || step.disabled == true || this.disabled == true) {\n        return;\n      }\n      if (!step.allowed) {\n        this.setTooltipText(step.deniedAccessMsg);\n        return;\n      }\n      this.$emit(\"click-step\", step.step);\n    },\n    setTooltipText(text) {\n      this.tooltipText = text;\n    },\n    setTooltipPlacement(index) {\n      console.log(index);\n      if (index == 0) return \"bottom-right\";\n      else if (index == this.steps.length - 1) return \"bottom-left\";\n      else return \"bottom\";\n    }\n  },\n  watch: {\n    current: {\n      handler: function() {\n        this.steps.find((s) => s.step == this.current).visited = true;\n      }\n    }\n  }\n};\n</script>\n\n<style lang=\"less\">\n:root {\n  --inactive-size: 1px;\n  --active-size: 1px;\n}\n.step-indicator {\n  margin: 0 auto;\n  display: flex;\n  flex-direction: row;\n  .step:not(.first-step) {\n    flex: 1 1 auto;\n    display: flex;\n    align-items: center;\n    gap: 2px;\n    flex-direction: row;\n\n    .line-wrapper {\n      display: flex;\n      flex-direction: row;\n    }\n    .step-line {\n      flex-grow: 1;\n      background-color: var(--charcoal-20);\n      height: var(--inactive-size);\n      border-radius: 4px;\n      margin-left: 2px;\n    }\n  }\n\n  .step {\n    .icon-wrapper {\n      color: var(--charcoal-20);\n    }\n\n    &.current {\n      .step-line {\n        height: var(--active-size);\n        background-color: var(--orange-web);\n      }\n      .icon-wrapper {\n        color: var(--orange-web);\n      }\n    }\n    &.valid {\n      .step-line {\n        height: var(--inactive-size);\n        background-color: var(--orange-web-40);\n      }\n      .icon-wrapper {\n        color: var(--orange-web-40);\n      }\n    }\n\n    &.current.valid {\n      .step-line {\n        height: var(--inactive-size);\n        background-color: var(--orange-web-40);\n      }\n      .icon-wrapper {\n        color: var(--orange-web);\n      }\n    }\n    &:not(.current).valid > .icon-wrapper:hover {\n      color: var(--orange-web);\n    }\n    &:not(.current, .valid) > .icon-wrapper:hover {\n      color: var(--charcoal-50);\n    }\n  }\n  &.signup-design {\n    .step-line {\n      opacity: 0;\n    }\n  }\n  .signup-design-wrapper {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    cursor: pointer;\n    h4.title {\n      font-size: 12px !important;\n    }\n\n    .step-number {\n      opacity: 0.4;\n\n      img {\n        width: 14px;\n      }\n    }\n\n    &.done {\n      .step-number {\n        opacity: 1;\n      }\n    }\n  }\n\n  .current {\n    .signup-design-wrapper {\n      .step-number {\n        opacity: 1;\n        color: var(--orange-web);\n      }\n    }\n  }\n}\n\n.first-enter-to .last-enter-to {\n  position: absolute;\n  opacity: 1;\n  transform: translateX(0);\n}\n.first-enter,\n.first-leave-to {\n  position: absolute;\n  opacity: 0;\n  transform: translateX(-100px);\n}\n\n.last-enter,\n.last-leave-to {\n  position: absolute;\n  opacity: 0;\n  transform: translateX(100px);\n}\n.first-enter-active,\n.first-leave-active {\n  transition: all 0.2s ease;\n}\n.last-leave-active,\n.last-enter-active {\n  transition: all 0.2s ease;\n  // transition-delay: 0.1s;\n}\n\n.mid-next-enter {\n  position: absolute;\n  opacity: 0;\n  transform: translateX(100px);\n}\n.mid-next-leave-to {\n  position: absolute;\n  opacity: 0;\n  transform: translateX(-100px);\n}\n.mid-next-leave-active,\n.mid-next-enter-active {\n  transition: all 0.2s ease;\n  // transition-delay: 0.1s;\n}\n\n.mid-previous-enter {\n  position: absolute;\n  opacity: 0;\n  transform: translateX(-100px);\n}\n.mid-previous-leave-to {\n  position: absolute;\n  opacity: 0;\n  transform: translateX(100px);\n}\n.mid-previous-leave-active,\n.mid-previous-enter-active {\n  transition: all 0.2s ease;\n  // transition-delay: 0.1s;\n}\n</style>\n","import mod from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./StepIndicator.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./StepIndicator.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./StepIndicator.vue?vue&type=template&id=9e554e56&\"\nimport script from \"./StepIndicator.vue?vue&type=script&lang=js&\"\nexport * from \"./StepIndicator.vue?vue&type=script&lang=js&\"\nimport style0 from \"./StepIndicator.vue?vue&type=style&index=0&lang=less&\"\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  null,\n  null\n  \n)\n\nexport default component.exports","import mod from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--10-oneOf-1-0!../../node_modules/css-loader/index.js??ref--10-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--10-oneOf-1-2!../../node_modules/less-loader/dist/cjs.js??ref--10-oneOf-1-3!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./StepIndicator.vue?vue&type=style&index=0&lang=less&\"; export default mod; export * from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--10-oneOf-1-0!../../node_modules/css-loader/index.js??ref--10-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--10-oneOf-1-2!../../node_modules/less-loader/dist/cjs.js??ref--10-oneOf-1-3!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./StepIndicator.vue?vue&type=style&index=0&lang=less&\"","module.exports = __webpack_public_path__ + \"img/circle-check.c410981a.svg\";"],"sourceRoot":""}