{"version":3,"sources":["webpack:///src/components/imageManipulation/ImageCropperForProfile.vue","webpack:///src/components/imageManipulation/ImagePreviewerProfile.vue","webpack:///./src/components/imageManipulation/ImageCropperForProfile.vue","webpack:///./src/components/imageManipulation/ImagePreviewerProfile.vue","webpack:///./src/components/imageManipulation/ImageCropperForProfile.vue?c17e","webpack:///./src/components/imageManipulation/ImagePreviewerProfile.vue?1585","webpack:///./src/components/imageManipulation/ImageCropperForProfile.vue?86f0","webpack:///./src/components/imageManipulation/ImagePreviewerProfile.vue?3fe2","webpack:///./src/components/imageManipulation/ImageCropperForProfile.vue?ab3f","webpack:///./src/components/imageManipulation/ImageCropperForProfile.vue?9485","webpack:///./src/components/imageManipulation/ImageCropperForProfile.vue?451f","webpack:///./src/components/imageManipulation/ImageCropperForProfile.vue?479d","webpack:///./src/components/imageManipulation/ImagePreviewerProfile.vue?4f8e","webpack:///./src/components/imageManipulation/ImagePreviewerProfile.vue?c035","webpack:///./src/components/imageManipulation/ImagePreviewerProfile.vue?9665","webpack:///./src/components/imageManipulation/ImagePreviewerProfile.vue?33da"],"names":["render","_vm","_c","_self","staticClass","_v","attrs","type","name","accept","on","change","setImage","imgSrc","click","$event","preventDefault","rotate","apply","arguments","_e","directives","rawName","value","expression","ref","guides","aspectRatio","background","rotatable","src","alt","cropend","cropImage","ready","width","height","profile","profileData","cropImg","copy","callback","selectedImage","staticRenderFns","_withStripped","style","setBackgroundImage"],"mappings":"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","file":"8.js","sourcesContent":["<template>\r\n  <div class=\"imageCropperForProfile\">\r\n    <div class=\"title\">Thumbnail Previewer and Uploader</div>\r\n    <input type=\"file\" name=\"image\" accept=\"image/*\"\r\n           class=\"uploadFile\"\r\n           @change=\"setImage\" />\r\n    <div class=\"ImageCropperBtn\" @click.prevent=\"rotate\" v-if=\"imgSrc != ''\">Rotate</div>\r\n    <div class=\"cropperContainer\">\r\n      <vue-cropper ref='cropper' v-show=\"imgSrc != ''\"\r\n                   :guides=\"true\"\r\n                   :view-mode=\"2\"\r\n                   drag-mode=\"none\"\r\n                   :aspectRatio=\"aspectRatio\"\r\n                   :auto-crop-area=\"0.5\"\r\n                   :min-container-width=\"100\"\r\n                   :min-container-height=\"100\"\r\n                   :background=\"true\"\r\n                   :rotatable=\"true\"\r\n                   :src=\"imgSrc\"\r\n                   alt=\"\"\r\n                   :cropend=\"cropImage\"\r\n                   :ready=\"cropImage\"\r\n                   :img-style=\"{ 'width': '400px', 'height': '400px' }\">\r\n      </vue-cropper>\r\n    </div>\r\n    <ImagePreviewerProfile :profile=\"profileData\" :cropImg=\"cropImg\" />\r\n    <ButtonSubmit v-show=\"cropImg\"\r\n                  :copy=\"'Save Image'\"\r\n                  @callback=\"selectedImage\" />\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nimport VueCropper from 'vue-cropperjs';\r\n// eslint-disable-next-line import/no-extraneous-dependencies\r\nimport 'cropperjs/dist/cropper.css';\r\n\r\nimport ButtonSubmit from '../formElements/buttons/buttonSubmit.vue';\r\n\r\nimport ImagePreviewerProfile from './ImagePreviewerProfile.vue';\r\n\r\nexport default {\r\n  name: 'imageCropperForProfile',\r\n  props: ['profileData'],\r\n  components: {\r\n    VueCropper,\r\n    ImagePreviewerProfile,\r\n    ButtonSubmit,\r\n  },\r\n  data() {\r\n    return {\r\n      imgSrc: '',\r\n      cropImg: this.profileData.thumbnailImage,\r\n      newWidth: 100,\r\n      aspectRatio: 1,\r\n      story: this.profileData,\r\n      resizedCanvas: null,\r\n      fileName: null,\r\n      fileType: null,\r\n    };\r\n  },\r\n  methods: {\r\n    setImage(e) {\r\n      const file = e.target.files[0];\r\n      this.fileName = file.name;\r\n      this.fileType = file.type;\r\n      if (!file.type.includes('image/')) {\r\n        return;\r\n      }\r\n      if (typeof FileReader === 'function') {\r\n        const reader = new FileReader();\r\n        reader.onload = (event) => {\r\n          this.imgSrc = event.target.result;\r\n          this.$refs.cropper.replace(event.target.result);\r\n        };\r\n        reader.readAsDataURL(file);\r\n      }\r\n    },\r\n    cropImage() {\r\n      const croppedCanvas = this.$refs.cropper.getCroppedCanvas();\r\n\r\n      this.resizedCanvas = document.createElement('canvas');\r\n      const resizedContext = this.resizedCanvas.getContext('2d');\r\n\r\n      const aspectRatio = croppedCanvas.width / croppedCanvas.height;\r\n      const newHeight = this.newWidth / aspectRatio;\r\n\r\n      this.resizedCanvas.height = newHeight;\r\n      this.resizedCanvas.width = this.newWidth;\r\n\r\n      const canvas = croppedCanvas;\r\n\r\n      resizedContext.drawImage(canvas, 0, 0, this.newWidth, newHeight);\r\n      this.cropImg = this.resizedCanvas.toDataURL();\r\n    },\r\n    rotate() {\r\n      this.$refs.cropper.rotate(90);\r\n    },\r\n    async selectedImage() {\r\n      this.resizedCanvas.toBlob(this.gotBlob);\r\n    },\r\n    async gotBlob(blob) {\r\n      const blobObject = blob;\r\n      const formData = new FormData();\r\n      blobObject.FileName = this.fileName;\r\n      blobObject.ModifiedOn = new Date();\r\n      formData.append('file', blob, this.fileName);\r\n      await this.$emit('updatedImage', formData);\r\n      this.$store.dispatch('buttonSubmitStore/done');\r\n    },\r\n  },\r\n};\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n  .imageCropperForProfile {\r\n    border: .5px solid $LincolnOrange;\r\n    padding: 10px;\r\n    margin-top: 10px;\r\n    margin-bottom: 10px;\r\n    .title {\r\n      text-transform: uppercase;\r\n      padding-bottom: 10px;\r\n    }\r\n    .uploadFile {\r\n      font-size: 1.2em;\r\n      padding: 10px 0;\r\n    }\r\n    .cropperContainer {\r\n      width: 400px;\r\n      height: 400px;\r\n      border: 1px solid gray;\r\n    }\r\n    .imgPreviewContainer {\r\n      display: flex;\r\n      flex-direction: row;\r\n    }\r\n    .imgPreviewContainer > * {\r\n      padding: 10px;\r\n    }\r\n    .ImageCropperBtn {\r\n      background-color: $LincolnOrange;\r\n      color: white;\r\n      width: 100px;\r\n      text-align: center;\r\n      text-transform: uppercase;\r\n      padding: 5px;\r\n      margin-bottom: 5px;\r\n    }\r\n  }\r\n</style>\r\n","<template>\r\n  <div class=\"imgPreviewContainer\">\r\n    <div class=\"titlePreview\">\r\n      Full View\r\n      <div class=\"img sizeFull\"\r\n           :style=\"setBackgroundImage\">\r\n      </div>\r\n    </div>\r\n    <div class=\"titlePreview\">\r\n      Medium View\r\n      <div class=\"img sizeMedium\"\r\n           :style=\"setBackgroundImage\">\r\n      </div>\r\n    </div>\r\n    <div class=\"titlePreview\">\r\n      Small View\r\n      <div class=\"img sizeSmall\"\r\n           :style=\"setBackgroundImage\">\r\n      </div>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\n/* eslint-disable global-require */\r\nexport default {\r\n  name: 'ImagePreviewerProfile',\r\n  props: ['profile', 'cropImg'],\r\n  data() {\r\n    return {\r\n      downloadedImage: null,\r\n      defaultImage: require('../../assets/images/temp/LEEDefaultProfileImage.png'),\r\n    };\r\n  },\r\n  computed: {\r\n    setBackgroundImage() {\r\n      let tempPath = '';\r\n      const backgroundImage = {};\r\n      // If there already is an image\r\n      if (this.downloadedImage) {\r\n        tempPath = this.downloadedImage;\r\n      }\r\n      // If a new image is being added\r\n      if (this.cropImg) {\r\n        tempPath = this.cropImg;\r\n      }\r\n      if (this.profile.profileImageStatus === 3 || tempPath === '') {\r\n        tempPath = this.defaultImage;\r\n      }\r\n      backgroundImage['background-image'] = `url(${tempPath})`;\r\n      return backgroundImage;\r\n    },\r\n  },\r\n  methods: {\r\n    async getImage(id) {\r\n      const asset = await this.$store.dispatch(\r\n        'assetStore/downloadAsset',\r\n        id,\r\n      );\r\n      if (asset) {\r\n        this.downloadedImage = window.URL.createObjectURL(new Blob([asset.data]));\r\n      }\r\n    },\r\n  },\r\n  async created() {\r\n    if (this.profile.thumbnailAsset) {\r\n      await this.getImage(this.profile.thumbnailAsset.id);\r\n    }\r\n  },\r\n};\r\n/* eslint-enable global-require */\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n  .imgPreviewContainer {\r\n    display: flex;\r\n    flex-direction: row;\r\n  }\r\n\r\n    .imgPreviewContainer > * {\r\n      padding: 10px;\r\n      width: 100px;\r\n    }\r\n  .img {\r\n    background-size: cover;\r\n    background-repeat: no-repeat;\r\n    background-position: top;\r\n    background-color: $LincolnGrayLighter;\r\n    &.sizeFull {\r\n      height: 100px;\r\n    }\r\n    &.sizeMedium {\r\n      width: 80px;\r\n      height: 80px;\r\n    }\r\n    &.sizeSmall {\r\n      width: 50px;\r\n      height: 50px;\r\n    }\r\n  }\r\n</style>\r\n","var render = function render() {\n  var _vm = this,\n    _c = _vm._self._c\n  return _c(\n    \"div\",\n    { staticClass: \"imageCropperForProfile\" },\n    [\n      _c(\"div\", { staticClass: \"title\" }, [\n        _vm._v(\"Thumbnail Previewer and Uploader\"),\n      ]),\n      _c(\"input\", {\n        staticClass: \"uploadFile\",\n        attrs: { type: \"file\", name: \"image\", accept: \"image/*\" },\n        on: { change: _vm.setImage },\n      }),\n      _vm.imgSrc != \"\"\n        ? _c(\n            \"div\",\n            {\n              staticClass: \"ImageCropperBtn\",\n              on: {\n                click: function ($event) {\n                  $event.preventDefault()\n                  return _vm.rotate.apply(null, arguments)\n                },\n              },\n            },\n            [_vm._v(\"Rotate\")]\n          )\n        : _vm._e(),\n      _c(\n        \"div\",\n        { staticClass: \"cropperContainer\" },\n        [\n          _c(\"vue-cropper\", {\n            directives: [\n              {\n                name: \"show\",\n                rawName: \"v-show\",\n                value: _vm.imgSrc != \"\",\n                expression: \"imgSrc != ''\",\n              },\n            ],\n            ref: \"cropper\",\n            attrs: {\n              guides: true,\n              \"view-mode\": 2,\n              \"drag-mode\": \"none\",\n              aspectRatio: _vm.aspectRatio,\n              \"auto-crop-area\": 0.5,\n              \"min-container-width\": 100,\n              \"min-container-height\": 100,\n              background: true,\n              rotatable: true,\n              src: _vm.imgSrc,\n              alt: \"\",\n              cropend: _vm.cropImage,\n              ready: _vm.cropImage,\n              \"img-style\": { width: \"400px\", height: \"400px\" },\n            },\n          }),\n        ],\n        1\n      ),\n      _c(\"ImagePreviewerProfile\", {\n        attrs: { profile: _vm.profileData, cropImg: _vm.cropImg },\n      }),\n      _c(\"ButtonSubmit\", {\n        directives: [\n          {\n            name: \"show\",\n            rawName: \"v-show\",\n            value: _vm.cropImg,\n            expression: \"cropImg\",\n          },\n        ],\n        attrs: { copy: \"Save Image\" },\n        on: { callback: _vm.selectedImage },\n      }),\n    ],\n    1\n  )\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\nexport { render, staticRenderFns }","var render = function render() {\n  var _vm = this,\n    _c = _vm._self._c\n  return _c(\"div\", { staticClass: \"imgPreviewContainer\" }, [\n    _c(\"div\", { staticClass: \"titlePreview\" }, [\n      _vm._v(\"\\n    Full View\\n    \"),\n      _c(\"div\", { staticClass: \"img sizeFull\", style: _vm.setBackgroundImage }),\n    ]),\n    _c(\"div\", { staticClass: \"titlePreview\" }, [\n      _vm._v(\"\\n    Medium View\\n    \"),\n      _c(\"div\", {\n        staticClass: \"img sizeMedium\",\n        style: _vm.setBackgroundImage,\n      }),\n    ]),\n    _c(\"div\", { staticClass: \"titlePreview\" }, [\n      _vm._v(\"\\n    Small View\\n    \"),\n      _c(\"div\", {\n        staticClass: \"img sizeSmall\",\n        style: _vm.setBackgroundImage,\n      }),\n    ]),\n  ])\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\nexport { render, staticRenderFns }","exports = module.exports = require(\"../../../node_modules/css-loader/lib/css-base.js\")(false);\n// imports\nexports.push([module.id, \"@import url(https://use.typekit.net/srv0wme.css);\", \"\"]);\n\n// module\nexports.push([module.id, \"/*\\r\\n$breakpoint argument choices:\\r\\n- xs\\r\\n- sm\\r\\n- md\\r\\n- lg\\r\\n- xl\\r\\n*/\\n.imageCropperForProfile[data-v-deb8a00e] {\\n  border: 0.5px solid #f55f40;\\n  padding: 10px;\\n  margin-top: 10px;\\n  margin-bottom: 10px;\\n}\\n.imageCropperForProfile .title[data-v-deb8a00e] {\\n    text-transform: uppercase;\\n    padding-bottom: 10px;\\n}\\n.imageCropperForProfile .uploadFile[data-v-deb8a00e] {\\n    font-size: 1.2em;\\n    padding: 10px 0;\\n}\\n.imageCropperForProfile .cropperContainer[data-v-deb8a00e] {\\n    width: 400px;\\n    height: 400px;\\n    border: 1px solid gray;\\n}\\n.imageCropperForProfile .imgPreviewContainer[data-v-deb8a00e] {\\n    display: -webkit-box;\\n    display: -ms-flexbox;\\n    display: flex;\\n    -webkit-box-orient: horizontal;\\n    -webkit-box-direction: normal;\\n        -ms-flex-direction: row;\\n            flex-direction: row;\\n}\\n.imageCropperForProfile .imgPreviewContainer > *[data-v-deb8a00e] {\\n    padding: 10px;\\n}\\n.imageCropperForProfile .ImageCropperBtn[data-v-deb8a00e] {\\n    background-color: #f55f40;\\n    color: white;\\n    width: 100px;\\n    text-align: center;\\n    text-transform: uppercase;\\n    padding: 5px;\\n    margin-bottom: 5px;\\n}\\n\", \"\"]);\n\n// exports\n","exports = module.exports = require(\"../../../node_modules/css-loader/lib/css-base.js\")(false);\n// imports\nexports.push([module.id, \"@import url(https://use.typekit.net/srv0wme.css);\", \"\"]);\n\n// module\nexports.push([module.id, \"/*\\r\\n$breakpoint argument choices:\\r\\n- xs\\r\\n- sm\\r\\n- md\\r\\n- lg\\r\\n- xl\\r\\n*/\\n.imgPreviewContainer[data-v-222e1690] {\\n  display: -webkit-box;\\n  display: -ms-flexbox;\\n  display: flex;\\n  -webkit-box-orient: horizontal;\\n  -webkit-box-direction: normal;\\n      -ms-flex-direction: row;\\n          flex-direction: row;\\n}\\n.imgPreviewContainer > *[data-v-222e1690] {\\n  padding: 10px;\\n  width: 100px;\\n}\\n.img[data-v-222e1690] {\\n  background-size: cover;\\n  background-repeat: no-repeat;\\n  background-position: top;\\n  background-color: #ebe6e3;\\n}\\n.img.sizeFull[data-v-222e1690] {\\n    height: 100px;\\n}\\n.img.sizeMedium[data-v-222e1690] {\\n    width: 80px;\\n    height: 80px;\\n}\\n.img.sizeSmall[data-v-222e1690] {\\n    width: 50px;\\n    height: 50px;\\n}\\n\", \"\"]);\n\n// exports\n","// style-loader: Adds some css to the DOM by adding a <style> tag\n\n// load the styles\nvar content = require(\"!!../../../node_modules/css-loader/index.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/lib/loader.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!./ImageCropperForProfile.vue?vue&type=style&index=0&id=deb8a00e&lang=scss&scoped=true\");\nif(typeof content === 'string') content = [[module.id, content, '']];\nif(content.locals) module.exports = content.locals;\n// add the styles to the DOM\nvar add = require(\"!../../../node_modules/vue-style-loader/lib/addStylesClient.js\").default\nvar update = add(\"815fe34c\", content, false, {\"sourceMap\":false,\"shadowMode\":false});\n// Hot Module Replacement\nif(module.hot) {\n // When the styles change, update the <style> tags\n if(!content.locals) {\n   module.hot.accept(\"!!../../../node_modules/css-loader/index.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/lib/loader.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!./ImageCropperForProfile.vue?vue&type=style&index=0&id=deb8a00e&lang=scss&scoped=true\", function() {\n     var newContent = require(\"!!../../../node_modules/css-loader/index.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/lib/loader.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!./ImageCropperForProfile.vue?vue&type=style&index=0&id=deb8a00e&lang=scss&scoped=true\");\n     if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];\n     update(newContent);\n   });\n }\n // When the module is disposed, remove the <style> tags\n module.hot.dispose(function() { update(); });\n}","// style-loader: Adds some css to the DOM by adding a <style> tag\n\n// load the styles\nvar content = require(\"!!../../../node_modules/css-loader/index.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/lib/loader.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!./ImagePreviewerProfile.vue?vue&type=style&index=0&id=222e1690&lang=scss&scoped=true\");\nif(typeof content === 'string') content = [[module.id, content, '']];\nif(content.locals) module.exports = content.locals;\n// add the styles to the DOM\nvar add = require(\"!../../../node_modules/vue-style-loader/lib/addStylesClient.js\").default\nvar update = add(\"e3eed668\", content, false, {\"sourceMap\":false,\"shadowMode\":false});\n// Hot Module Replacement\nif(module.hot) {\n // When the styles change, update the <style> tags\n if(!content.locals) {\n   module.hot.accept(\"!!../../../node_modules/css-loader/index.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/lib/loader.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!./ImagePreviewerProfile.vue?vue&type=style&index=0&id=222e1690&lang=scss&scoped=true\", function() {\n     var newContent = require(\"!!../../../node_modules/css-loader/index.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/lib/loader.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!./ImagePreviewerProfile.vue?vue&type=style&index=0&id=222e1690&lang=scss&scoped=true\");\n     if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];\n     update(newContent);\n   });\n }\n // When the module is disposed, remove the <style> tags\n module.hot.dispose(function() { update(); });\n}","import { render, staticRenderFns } from \"./ImageCropperForProfile.vue?vue&type=template&id=deb8a00e&scoped=true\"\nimport script from \"./ImageCropperForProfile.vue?vue&type=script&lang=js\"\nexport * from \"./ImageCropperForProfile.vue?vue&type=script&lang=js\"\nimport style0 from \"./ImageCropperForProfile.vue?vue&type=style&index=0&id=deb8a00e&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  \"deb8a00e\",\n  null\n  \n)\n\n/* hot reload */\nif (module.hot) {\n  var api = require(\"c:\\\\VSTSAgentPreProd\\\\_work\\\\103\\\\s\\\\effortless-guide-site\\\\node_modules\\\\vue-hot-reload-api\\\\dist\\\\index.js\")\n  api.install(require('vue'))\n  if (api.compatible) {\n    module.hot.accept()\n    if (!api.isRecorded('deb8a00e')) {\n      api.createRecord('deb8a00e', component.options)\n    } else {\n      api.reload('deb8a00e', component.options)\n    }\n    module.hot.accept(\"./ImageCropperForProfile.vue?vue&type=template&id=deb8a00e&scoped=true\", function () {\n      api.rerender('deb8a00e', {\n        render: render,\n        staticRenderFns: staticRenderFns\n      })\n    })\n  }\n}\ncomponent.options.__file = \"src/components/imageManipulation/ImageCropperForProfile.vue\"\nexport default component.exports","import mod from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../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!./ImageCropperForProfile.vue?vue&type=script&lang=js\"; export default mod; export * from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../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!./ImageCropperForProfile.vue?vue&type=script&lang=js\"","export * from \"-!../../../node_modules/vue-style-loader/index.js??ref--8-oneOf-1-0!../../../node_modules/css-loader/index.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/lib/loader.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!./ImageCropperForProfile.vue?vue&type=style&index=0&id=deb8a00e&lang=scss&scoped=true\"","export * from \"-!../../../node_modules/cache-loader/dist/cjs.js?{\\\"cacheDirectory\\\":\\\"node_modules/.cache/vue-loader\\\",\\\"cacheIdentifier\\\":\\\"44074d8e-vue-loader-template\\\"}!../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/vue-loader/lib/loaders/templateLoader.js??ref--6!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ImageCropperForProfile.vue?vue&type=template&id=deb8a00e&scoped=true\"","import { render, staticRenderFns } from \"./ImagePreviewerProfile.vue?vue&type=template&id=222e1690&scoped=true\"\nimport script from \"./ImagePreviewerProfile.vue?vue&type=script&lang=js\"\nexport * from \"./ImagePreviewerProfile.vue?vue&type=script&lang=js\"\nimport style0 from \"./ImagePreviewerProfile.vue?vue&type=style&index=0&id=222e1690&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  \"222e1690\",\n  null\n  \n)\n\n/* hot reload */\nif (module.hot) {\n  var api = require(\"c:\\\\VSTSAgentPreProd\\\\_work\\\\103\\\\s\\\\effortless-guide-site\\\\node_modules\\\\vue-hot-reload-api\\\\dist\\\\index.js\")\n  api.install(require('vue'))\n  if (api.compatible) {\n    module.hot.accept()\n    if (!api.isRecorded('222e1690')) {\n      api.createRecord('222e1690', component.options)\n    } else {\n      api.reload('222e1690', component.options)\n    }\n    module.hot.accept(\"./ImagePreviewerProfile.vue?vue&type=template&id=222e1690&scoped=true\", function () {\n      api.rerender('222e1690', {\n        render: render,\n        staticRenderFns: staticRenderFns\n      })\n    })\n  }\n}\ncomponent.options.__file = \"src/components/imageManipulation/ImagePreviewerProfile.vue\"\nexport default component.exports","import mod from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../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!./ImagePreviewerProfile.vue?vue&type=script&lang=js\"; export default mod; export * from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../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!./ImagePreviewerProfile.vue?vue&type=script&lang=js\"","export * from \"-!../../../node_modules/vue-style-loader/index.js??ref--8-oneOf-1-0!../../../node_modules/css-loader/index.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/lib/loader.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!./ImagePreviewerProfile.vue?vue&type=style&index=0&id=222e1690&lang=scss&scoped=true\"","export * from \"-!../../../node_modules/cache-loader/dist/cjs.js?{\\\"cacheDirectory\\\":\\\"node_modules/.cache/vue-loader\\\",\\\"cacheIdentifier\\\":\\\"44074d8e-vue-loader-template\\\"}!../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/vue-loader/lib/loaders/templateLoader.js??ref--6!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ImagePreviewerProfile.vue?vue&type=template&id=222e1690&scoped=true\""],"sourceRoot":""}