{"version":3,"sources":["webpack:///./src/components/controls/ImageCropper.vue?5c79","webpack:///src/components/controls/ImageCropper.vue","webpack:///./src/components/controls/ImageCropper.vue?c135","webpack:///./src/components/controls/ImageCropper.vue?5dd0","webpack:///./src/components/controls/ImageCropper.vue?0cd1"],"names":["render","_vm","this","_h","$createElement","_c","_self","staticClass","imgSrc","ref","attrs","aspectRatio","_e","_l","button","key","AspectRatio","on","$event","setAspactRatio","_v","_s","DisplayName","_m","staticRenderFns","name","data","aspectRatios","mounted","created","methods","CropImage","computed","watch","components","props","type","component"],"mappings":"+IAAA,IAAIA,EAAS,WAAa,IAAIC,EAAIC,KAASC,EAAGF,EAAIG,eAAmBC,EAAGJ,EAAIK,MAAMD,IAAIF,EAAG,OAAOE,EAAG,MAAM,CAACE,YAAY,kBAAkB,CAACF,EAAG,MAAM,CAACE,YAAY,OAAO,CAACF,EAAG,MAAM,CAACE,YAAY,mBAAmB,CAAgB,MAAdN,EAAIO,OAAgBH,EAAG,cAAc,CAACI,IAAI,UAAUC,MAAM,CAAC,IAAMT,EAAIO,OAAO,eAAeP,EAAIU,YAAY,QAAS,EAAM,QAAU,cAAcV,EAAIW,KAAKP,EAAG,MAAM,CAACE,YAAY,iCAAiCN,EAAIY,GAAIZ,EAAgB,cAAE,SAASa,GAAQ,OAAOT,EAAG,WAAW,CAACU,IAAID,EAAOE,YAAYT,YAAY,eAAeG,MAAM,CAAC,KAAO,MAAMO,GAAG,CAAC,MAAQ,SAASC,GAAQ,OAAOjB,EAAIkB,eAAeL,EAAOE,gBAAgB,CAACf,EAAImB,GAAG,IAAInB,EAAIoB,GAAGP,EAAOQ,aAAa,UAAS,IAAI,GAAGrB,EAAIsB,GAAG,QACnrBC,EAAkB,CAAC,WAAa,IAAIvB,EAAIC,KAASC,EAAGF,EAAIG,eAAmBC,EAAGJ,EAAIK,MAAMD,IAAIF,EAAG,OAAOE,EAAG,MAAM,CAACE,YAAY,mBAAmB,CAACF,EAAG,KAAK,CAACE,YAAY,QAAQ,CAACN,EAAImB,GAAG,mBAAmBf,EAAG,MAAM,CAACE,YAAY,mCCiCnN,GACfkB,qBACAC,gBACA,OACAf,cACAgB,cACA,CACAX,cACAM,mBAEA,CACAN,gBACAM,mBAEA,CACAN,gBACAM,mBAEA,CACAN,iBACAM,oBAEA,CACAN,iBACAM,uBAKAM,qBACAC,qBACAC,SACAX,2BACA,sCAEAY,qBACA,wDACA,6BAGAC,YACAC,SACAC,cACAC,OACA3B,QACA4B,eC/EqW,I,wBCQjWC,EAAY,eACd,EACArC,EACAwB,GACA,EACA,KACA,WACA,MAIa,aAAAa,E,2CCnBf","file":"js/chunk-5ac3269b.67e3a51a.js","sourcesContent":["var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"px-2 container\"},[_c('div',{staticClass:\"row\"},[_c('div',{staticClass:\"col-12 col-sm-8\"},[(_vm.imgSrc != null)?_c('vue-cropper',{ref:\"cropper\",attrs:{\"src\":_vm.imgSrc,\"aspect-ratio\":_vm.aspectRatio,\"guides\":false,\"preview\":\".preview\"}}):_vm._e(),_c('div',{staticClass:\"actions my-3 d-flex flex-wrap\"},_vm._l((_vm.aspectRatios),function(button){return _c('k-button',{key:button.AspectRatio,staticClass:\"mb-2 mb-sm-0\",attrs:{\"size\":\"sm\"},on:{\"click\":function($event){return _vm.setAspactRatio(button.AspectRatio)}}},[_vm._v(\" \"+_vm._s(button.DisplayName)+\" \")])}),1)],1),_vm._m(0)])])}\nvar staticRenderFns = [function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"col-12 col-sm-4\"},[_c('h4',{staticClass:\"mb-2\"},[_vm._v(\"Kép előnézete\")]),_c('div',{staticClass:\"preview cropped-image mb-3\"})])}]\n\nexport { render, staticRenderFns }","<template>\r\n  <div class=\"px-2 container\">\r\n    <div class=\"row\">\r\n      <div class=\"col-12 col-sm-8\">\r\n        <vue-cropper\r\n          ref=\"cropper\"\r\n          :src=\"imgSrc\"\r\n          :aspect-ratio=\"aspectRatio\"\r\n          :guides=\"false\"\r\n          v-if=\"imgSrc != null\"\r\n          preview=\".preview\"\r\n        >\r\n        </vue-cropper>\r\n        <div class=\"actions my-3 d-flex flex-wrap\">\r\n          <k-button\r\n            size=\"sm\"\r\n            class=\"mb-2 mb-sm-0\"\r\n            v-for=\"button in aspectRatios\"\r\n            :key=\"button.AspectRatio\"\r\n            @click=\"setAspactRatio(button.AspectRatio)\"\r\n          >\r\n            {{ button.DisplayName }}\r\n          </k-button>\r\n        </div>\r\n      </div>\r\n      <div class=\"col-12 col-sm-4\">\r\n        <h4 class=\"mb-2\">Kép előnézete</h4>\r\n        <div class=\"preview cropped-image mb-3\"></div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nexport default {\r\n  name: 'image-cropper',\r\n  data() {\r\n    return {\r\n      aspectRatio: 1 / 1,\r\n      aspectRatios: [\r\n        {\r\n          AspectRatio: 1 / 1,\r\n          DisplayName: '1:1',\r\n        },\r\n        {\r\n          AspectRatio: 3 / 4,\r\n          DisplayName: '3:4',\r\n        },\r\n        {\r\n          AspectRatio: 4 / 3,\r\n          DisplayName: '4:3',\r\n        },\r\n        {\r\n          AspectRatio: 16 / 9,\r\n          DisplayName: '16:9',\r\n        },\r\n        {\r\n          AspectRatio: 9 / 16,\r\n          DisplayName: '9:16',\r\n        },\r\n      ],\r\n    };\r\n  },\r\n  mounted() {},\r\n  created() {},\r\n  methods: {\r\n    setAspactRatio(number) {\r\n      this.$refs.cropper.setAspectRatio(number);\r\n    },\r\n    CropImage() {\r\n      let croppedImg = this.$refs.cropper.getCroppedCanvas().toDataURL();\r\n      this.$emit('crop-image', croppedImg);\r\n    },\r\n  },\r\n  computed: {},\r\n  watch: {},\r\n  components: {},\r\n  props: {\r\n    imgSrc: {\r\n      type: String,\r\n    },\r\n  },\r\n};\r\n</script>\r\n<style scoped>\r\n.actions::v-deep .k-btn {\r\n  margin-right: 8px;\r\n  min-width: 50px;\r\n}\r\n.cropped-image::v-deep {\r\n  max-width: 100%;\r\n}\r\n.cropped-image::v-deep img {\r\n  max-width: 100%;\r\n}\r\n.preview {\r\n  width: 100%;\r\n  height: 200px;\r\n  margin: 0 auto;\r\n  overflow: hidden;\r\n}\r\n</style>\r\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!./ImageCropper.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!./ImageCropper.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./ImageCropper.vue?vue&type=template&id=34021ff2&scoped=true&\"\nimport script from \"./ImageCropper.vue?vue&type=script&lang=js&\"\nexport * from \"./ImageCropper.vue?vue&type=script&lang=js&\"\nimport style0 from \"./ImageCropper.vue?vue&type=style&index=0&id=34021ff2&prod&scoped=true&lang=css&\"\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  \"34021ff2\",\n  null\n  \n)\n\nexport default component.exports","export * from \"-!../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--7-oneOf-1-0!../../../node_modules/css-loader/dist/cjs.js??ref--7-oneOf-1-1!../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/postcss-loader/src/index.js??ref--7-oneOf-1-2!../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ImageCropper.vue?vue&type=style&index=0&id=34021ff2&prod&scoped=true&lang=css&\""],"sourceRoot":""}