{"version":3,"sources":["webpack:///./src/components/photo-upload/PhotoUploadBox.vue?57ca","webpack:///./src/assets/images/icons/ic_plus_square.svg","webpack:///./src/components/photo-upload/PhotoUploadBox.vue?1b59","webpack:///src/components/photo-upload/PhotoUploadBox.vue","webpack:///./src/components/photo-upload/PhotoUploadBox.vue?e63f","webpack:///./src/components/photo-upload/PhotoUploadBox.vue","webpack:///./src/assets/images/icons/ic_digital_camera_black.svg","webpack:///./src/assets/images/icons/ic_close_x_gray.svg","webpack:///./src/assets/images/icons/ic_album_black.svg"],"names":["module","exports","render","_vm","this","_h","$createElement","_c","_self","staticClass","on","drop","dragEnter","dragLeave","dragOverArea","class","onDropArea","_v","_e","ref","$event","isMobile","isSpecialDeviceBrowser","showTray","initImgUploadFile","imageDeleting","staticStyle","attrs","uploadPhoto","target","currentTarget","closeTray","apply","arguments","activeTray","openGuidedCamera","staticRenderFns","name","data","isShowTray","props","type","Boolean","default","maxLength","Number","errImgType","Array","handleDrop","Function","initImgUploadCamera","methods","e","relatedTarget","$el","contains","doNothing","$refs","style","opacity","event","stopPropagation","preventDefault","$emit","fileinput","click","slideTray","setTimeout","component"],"mappings":"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","file":"js/chunk-017e3f01.7033a3ec.js","sourcesContent":["export * from \"-!../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./PhotoUploadBox.vue?vue&type=style&index=0&lang=scss&\"","module.exports = __webpack_public_path__ + \"img/ic_plus_square.052c3dd9.svg\";","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"upload-box-container\"},[_c('div',{staticClass:\"drop-area\",on:{\"drop\":_vm.drop,\"dragenter\":_vm.dragEnter,\"dragleave\":_vm.dragLeave,\"dragover\":_vm.dragOverArea}},[_c('div',{staticClass:\"drop-area-content\",class:{ 'on-drop': _vm.onDropArea }},[(_vm.onDropArea)?_c('span',{staticClass:\"drop-text\"},[_vm._v(\" Drop files here to upload... \")]):_vm._e(),_c('div',{ref:\"drop\",staticClass:\"upload-box\",on:{\"click\":function($event){_vm.isMobile && !_vm.isSpecialDeviceBrowser ? _vm.showTray() : _vm.initImgUploadFile()}}},[(!_vm.imageDeleting)?_c('input',{ref:\"fileinput\",staticStyle:{\"display\":\"none\"},attrs:{\"type\":\"file\",\"id\":\"files\",\"name\":\"files\",\"multiple\":\"\",\"accept\":\"image/*\"},on:{\"change\":_vm.uploadPhoto}}):_vm._e(),_c('div',{staticClass:\"upload-box-wrapper\"},[_c('img',{staticClass:\"mb-4\",attrs:{\"src\":require(\"@/assets/images/icons/ic_plus_square.svg\")}}),(_vm.isMobile)?_c('p',{staticClass:\"photo-text mb-0\"},[_c('span',{staticStyle:{\"color\":\"#1f8252\"}},[_vm._v(\"Add photos\")]),_vm._v(\" from your device \")]):_c('p',{staticClass:\"photo-text\"},[_vm._v(\" Drag and drop your images here, or \"),_c('span',{staticStyle:{\"color\":\"#1f8252\"}},[_vm._v(\"browse\")])]),_c('div',{staticClass:\"fs-14 cover-description-text font-weight-thin\"},[_vm._v(\" Supports: jpeg, png, tiff \")])])])])]),(_vm.isShowTray)?_c('div',{staticClass:\"tray-overlay\",on:{\"click\":function($event){if($event.target !== $event.currentTarget){ return null; }return _vm.closeTray.apply(null, arguments)}}},[_c('div',{staticClass:\"tray\",class:{ 'active-tray': _vm.activeTray }},[_c('div',{staticClass:\"tray-header\"},[_c('span',[_vm._v(\"Add photos\")]),_c('img',{attrs:{\"src\":require(\"@/assets/images/icons/ic_close_x_gray.svg\")},on:{\"click\":_vm.closeTray}})]),_c('div',{staticClass:\"tray-options\"},[_c('button',{staticClass:\"guided-camera-button right-arrow\",on:{\"click\":_vm.openGuidedCamera}},[_c('img',{attrs:{\"src\":require(\"@/assets/images/icons/ic_digital_camera_black.svg\")}}),_c('span',[_vm._v(\"Guided Camera\")])]),_c('button',{staticClass:\"gallery-button right-arrow\",on:{\"click\":_vm.initImgUploadFile}},[_c('img',{attrs:{\"src\":require(\"@/assets/images/icons/ic_album_black.svg\")}}),_c('span',[_vm._v(\"Gallery / Camera roll\")])])])])]):_vm._e()])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <div class=\"upload-box-container\">\n    <div\n      class=\"drop-area\"\n      @drop=\"drop\"\n      @dragenter=\"dragEnter\"\n      @dragleave=\"dragLeave\"\n      @dragover=\"dragOverArea\"\n    >\n      <div class=\"drop-area-content\" v-bind:class=\"{ 'on-drop': onDropArea }\">\n        <span class=\"drop-text\" v-if=\"onDropArea\">\n          Drop files here to upload...\n        </span>\n        <div class=\"upload-box\" @click=\"isMobile && !isSpecialDeviceBrowser ? showTray() : initImgUploadFile()\" ref=\"drop\">\n          <input\n            ref=\"fileinput\"\n            type=\"file\"\n            id=\"files\"\n            name=\"files\"\n            style=\"display: none\"\n            multiple\n            @change=\"uploadPhoto\"\n            v-if=\"!imageDeleting\"\n            accept=\"image/*\"\n          />\n          <div class=\"upload-box-wrapper\">\n            <img src=\"@/assets/images/icons/ic_plus_square.svg\" class=\"mb-4\" />\n            <p class=\"photo-text mb-0\" v-if=\"isMobile\">\n              <span style=\"color: #1f8252\">Add photos</span> from your device\n            </p>\n            <p class=\"photo-text\" v-else>\n              Drag and drop your images here, or\n              <span style=\"color: #1f8252\">browse</span>\n            </p>\n            <div class=\"fs-14 cover-description-text font-weight-thin\">\n              Supports: jpeg, png, tiff\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n    <!-- Bottom Tray -->\n    <div\n      v-if=\"isShowTray\"\n      class=\"tray-overlay\"\n      @click.self=\"closeTray\"\n    >\n      <div class=\"tray\" :class=\"{ 'active-tray': activeTray }\">\n        <div class=\"tray-header\">\n          <span>Add photos</span>\n          <img src=\"@/assets/images/icons/ic_close_x_gray.svg\" @click=\"closeTray\">\n        </div>\n\n        <div class=\"tray-options\">\n          <button @click=\"openGuidedCamera\" class=\"guided-camera-button right-arrow\">\n            <img src=\"@/assets/images/icons/ic_digital_camera_black.svg\">\n            <span>Guided Camera</span>\n          </button>\n\n          <button @click=\"initImgUploadFile\" class=\"gallery-button right-arrow\">\n            <img src=\"@/assets/images/icons/ic_album_black.svg\">\n            <span>Gallery / Camera roll</span>\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n<script>\nexport default {\n  name: \"PhotoUploadBox\",\n  data() {\n    return {\n      onDropArea: false,\n      isShowTray: false,\n      activeTray: false,\n    };\n  },\n  props: {\n    isMobile: {\n      type: Boolean,\n      default: true,\n    },\n    imageDeleting: {\n      type: Boolean,\n      default: false,\n    },\n    maxLength: {\n      type: Number,\n      default: 30,\n    },\n    errImgType: {\n      type: Array,\n      default: () => [],\n    },\n    handleDrop: {\n      type: Function,\n    },\n    initImgUploadCamera: { type: Function },\n    isSpecialDeviceBrowser: Boolean,\n  },\n  methods: {\n    dragEnter() {\n      this.onDropArea = true;\n    },\n    dragLeave: function(e) {\n      if (!e.relatedTarget || !this.$el.contains(e.relatedTarget) || e.relatedTarget === this.$el) {\n        this.onDropArea = false;\n        this.doNothing(e);\n        this.$refs.drop.style.opacity = 1;\n      }\n    },\n    dragOverArea: function(e) {\n      this.doNothing(e);\n      this.onDropArea = true;\n      this.$refs.drop.style.opacity = 0;\n    },\n    drop: function(e) {\n      this.onDropArea = false;\n      this.$refs.drop.style.opacity = 1;\n      this.handleDrop(e);\n    },\n    doNothing(event) {\n      event.stopPropagation();\n      event.preventDefault();\n    },\n    uploadPhoto(event) {\n      this.$emit(\"uploadPhoto\", event);\n    },\n    initImgUploadFile() {\n      this.$refs.fileinput.click();\n    },\n    showTray() {\n      this.isShowTray = !this.isShowTray;\n      this.slideTray();\n    },\n    closeTray() {\n      this.slideTray();\n      this.isShowTray = !this.isShowTray;\n    },\n    slideTray() {\n      setTimeout(() => {\n        this.activeTray = !this.activeTray;\n      }, 200);\n    },\n    openGuidedCamera() {\n      if (this.isMobile) {\n        this.closeTray();\n        this.initImgUploadCamera();\n      }\n    },\n  },\n};\n</script>\n<style lang=\"scss\">\n.upload-box-container {\n  width: 100%;\n  .drop-area {\n    .drop-area-content {\n      position: relative;\n\n      .drop-text {\n        position: absolute;\n        display: block;\n        color: #276ef1;\n        font-family: Avenir Next LT W05 Regular !important;\n        top: 50%;\n        left: 50%;\n        transform: translateY(-50%);\n        transform: translateX(-50%);\n      }\n\n      &.on-drop {\n        background-color: #eff3fe !important;\n        border: 2px dashed #276ef1 !important;\n        border-radius: 15px;\n        z-index: 9999 !important;\n      }\n\n      .upload-box {\n        width: 100%;\n        height: 175px;\n        background-color: #eeeeee;\n        border: 1px dashed #05b36d;\n        border-radius: 8px;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        cursor: pointer;\n      }\n    }\n  }\n}\n\n.tray-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(0, 0, 0, 0.5);\n  display: flex;\n  justify-content: center;\n  align-items: flex-end;\n  z-index: 100001;\n\n  .tray {\n    position: relative;\n    background-color: #FAFAFA;\n    width: 100%;\n    padding: 20px;\n    border-top-left-radius: 10px;\n    border-top-right-radius: 10px;\n    transform: translateY(100%);\n    opacity: 0;\n    transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;\n\n    .tray-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      margin-bottom: 24px;\n\n      span {\n        font-size: 24px;\n        line-height: 28px;\n        margin: 0;\n        color: #000000;\n      }\n    }\n\n    .tray-options {\n      .guided-camera-button, .gallery-button {\n        position: relative;\n        width: 100%;\n        padding: 15px;\n        margin-bottom: 10px;\n        border: none;\n        background-color: #FFFFFF;\n        font-size: 15px;\n        display: flex;\n        align-items: center;\n        margin-top: 8px;\n        font-weight: 400 !important;\n        font-family: Avenir Next LT W05 Regular !important;\n        color: #000000;\n\n        &::before {\n          content: '';\n          border-bottom-style: solid;\n          border-bottom-width: 2px;\n          border-right-style: solid;\n          border-right-width: 2px;\n          border-color:#3C3C4399;\n          position: absolute;\n          top: 40%;\n          height: 10px;\n          width: 10px;\n        }\n\n        &.right-arrow {\n          &::before {\n            right: 30px;\n            transform: rotate(315deg);\n          }\n        }\n      }\n\n      img {\n        margin-right: 10px;\n      }\n    }\n  }\n\n  .active-tray {\n    transform: translateY(0);\n    opacity: 1;\n  }\n}\n@media screen and(min-width: 768px) {\n  .upload-box-container .drop-area .drop-area-content .upload-box {\n    height: 250px;\n  }\n}\n@media screen and(min-width: 991px) {\n  .upload-box-container .drop-area .drop-area-content .upload-box {\n    height: 286px;\n  }\n}\n</style>","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!./PhotoUploadBox.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!./PhotoUploadBox.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./PhotoUploadBox.vue?vue&type=template&id=16e5ed40&\"\nimport script from \"./PhotoUploadBox.vue?vue&type=script&lang=js&\"\nexport * from \"./PhotoUploadBox.vue?vue&type=script&lang=js&\"\nimport style0 from \"./PhotoUploadBox.vue?vue&type=style&index=0&lang=scss&\"\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","module.exports = __webpack_public_path__ + \"img/ic_digital_camera_black.49d70ff2.svg\";","module.exports = __webpack_public_path__ + \"img/ic_close_x_gray.ddf4437b.svg\";","module.exports = __webpack_public_path__ + \"img/ic_album_black.da402d83.svg\";"],"sourceRoot":""}