{"version":3,"sources":["webpack:///./src/components/contextMenu/qrGroupPanel.vue","webpack:///./src/components/contextMenu/qr/FrameSettings.vue","webpack:///src/components/contextMenu/qr/FrameSettings.vue","webpack:///./src/components/contextMenu/qr/FrameSettings.vue?67c8","webpack:///./src/components/contextMenu/qr/FrameSettings.vue?c268","webpack:///./src/components/contextMenu/qr/Transparency.vue","webpack:///src/components/contextMenu/qr/Transparency.vue","webpack:///./src/components/contextMenu/qr/Transparency.vue?a2bd","webpack:///./src/components/contextMenu/qr/Transparency.vue?7ce1","webpack:///src/components/contextMenu/qrGroupPanel.vue","webpack:///./src/components/contextMenu/qrGroupPanel.vue?f2e3","webpack:///./src/components/contextMenu/qrGroupPanel.vue?9464","webpack:///./src/components/contextMenu/qr/Transparency.vue?5f5e","webpack:///./src/assets/img/select_arrow.svg","webpack:///./src/components/contextMenu/qr/FrameSettings.vue?0213","webpack:///./src/assets/img/qr/transparency.svg","webpack:///./src/components/contextMenu/qrGroupPanel.vue?edac","webpack:///./src/assets/img/qr/no-frame.svg","webpack:///./src/assets/img/qr/Rectangle_radius.svg"],"names":["render","_vm","this","_c","_self","staticClass","attrs","domProps","qrCode","qrValue","on","onInputQrValue","require","slot","_l","myInteractions","i","idx","directives","name","rawName","value","length","expression","key","nativeOn","$event","onSelectInteraction","link","_v","_s","device","style","backgroundColor","color","obj","hex","border","getColorBorder","updateAllColors","model","callback","$$v","$set","staticRenderFns","class","selected","frame","onShowFrame","frameParams","minWidth","maxWidth","frameWidth","onChangeFrameWidth","minRadius","maxRadius","frameRadius","onChangeFrameRadius","stopPropagation","computed","mapGetters","canvas","activeCanvasObject","withTextOnCanvas","qrBorder","_objects","find","bgRect","_this$qrBorder","opacity","_this$qrBorder$stroke","_this$qrBorder2","strokeWidth","_this$qrBorder$rx","_this$qrBorder3","rx","methods","set","setSizeQrGroup","renderAll","fire","radius","ry","computeQr","getBgSize","getBorderRectSize","addWithUpdate","component","transparency","Array","isArray","_i","$$a","$$el","target","$$c","checked","$$i","concat","slice","get","_this$bgRect","components","ChromePicker","frameSettings","data","groupColors","groupColorsObj","svgStrokeObj","_this$groupColors","o","beforeCreate","$store","dispatch","interactionLink","historySaveAction","timeoutId","clearTimeout","setTimeout","updateStoke","updateGroupColor","colorsList","forEach","el","setColor","e","trim","then","fabric","loadSVGFromString","objects","options","_this$qrCode$_objects","svg","util","groupSVGElements","fill","nameCanvasObject","remove","add","watch","newObj","module","exports"],"mappings":"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","file":"js/qrGroupPanel.658275fb.js","sourcesContent":["var render = function render(){var _vm=this,_c=_vm._self._c;return _c('div',[_c('el-dropdown',{staticClass:\"input-left-panel-wraper\",attrs:{\"placement\":\"bottom\",\"trigger\":\"click\"}},[_c('div',{staticClass:\"search-input-wraper\"},[_c('input',{staticClass:\"search-input\",attrs:{\"type\":\"text\"},domProps:{\"value\":_vm.qrCode && _vm.qrCode.qrValue},on:{\"input\":_vm.onInputQrValue}}),_c('img',{staticClass:\"search-arrow\",attrs:{\"alt\":\"img\",\"src\":require(\"@/assets/img/select_arrow.svg\")}})]),_c('el-dropdown-menu',{staticClass:\"items-container\",attrs:{\"slot\":\"dropdown\"},slot:\"dropdown\"},[_c('div',_vm._l((_vm.myInteractions),function(i,idx){return _c('el-dropdown-item',{directives:[{name:\"show\",rawName:\"v-show\",value:(_vm.myInteractions.length),expression:\"myInteractions.length\"}],key:idx,staticClass:\"item\",nativeOn:{\"click\":function($event){return _vm.onSelectInteraction(i.link)}}},[_vm._v(\" \"+_vm._s(i.name)+\" \")])}),1),_c('div',{directives:[{name:\"show\",rawName:\"v-show\",value:(!_vm.myInteractions.length),expression:\"!myInteractions.length\"}],staticClass:\"msg\"},[_vm._v(\" you have no interactions \")])])],1),_c('div',{staticClass:\"settings-container\"},[_c('frameSettings'),_c('transparency'),_c('div',{staticClass:\"colors-wraper\"},[_c('el-dropdown',{attrs:{\"trigger\":\"click\"}},[_c('span',{staticClass:\"el-dropdown-link\"},[_c('el-tooltip',{attrs:{\"placement\":\"bottom\",\"content\":\"color\",\"transition\":\"fade-tooltip\",\"disabled\":_vm.device === 'mobile'}},[_c('div',{staticClass:\"color-picker-wraper\",style:({\n                backgroundColor: _vm.color.obj.hex,\n                border: _vm.getColorBorder(_vm.color.obj)\n              })})])],1),_c('el-dropdown-menu',{attrs:{\"slot\":\"dropdown\"},slot:\"dropdown\"},[_c('chrome-picker',{staticClass:\"picker-element\",on:{\"input\":function($event){return _vm.updateAllColors(_vm.color)}},model:{value:(_vm.color.obj),callback:function ($$v) {_vm.$set(_vm.color, \"obj\", $$v)},expression:\"color.obj\"}})],1)],1)],1)],1)],1)\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","var render = function render(){var _vm=this,_c=_vm._self._c;return _c('div',{staticClass:\"frame-radio\"},[_c('el-tooltip',{attrs:{\"placement\":\"bottom\",\"content\":\"frame\",\"transition\":\"fade-tooltip\",\"disabled\":_vm.device === 'mobile'}},[_c('el-dropdown',{class:{ selected: _vm.frame === 'radius-frame' },attrs:{\"placement\":\"bottom\",\"trigger\":\"click\"}},[_c('img',{staticClass:\"icons\",attrs:{\"alt\":\"img\",\"src\":require(\"@/assets/img/qr/Rectangle_radius.svg\")},on:{\"click\":function($event){return _vm.onShowFrame('no-frame')}}}),_c('el-dropdown-menu',{staticClass:\"frame-sliders\",attrs:{\"slot\":\"dropdown\"},slot:\"dropdown\"},[_c('el-slider',{staticClass:\"slider\",attrs:{\"show-tooltip\":false,\"min\":_vm.frameParams.minWidth,\"max\":_vm.frameParams.maxWidth,\"value\":_vm.frameWidth},on:{\"input\":_vm.onChangeFrameWidth}}),_c('el-slider',{staticClass:\"slider\",attrs:{\"show-tooltip\":false,\"min\":_vm.frameParams.minRadius * 2,\"max\":_vm.frameParams.maxRadius * 2,\"value\":_vm.frameRadius},on:{\"input\":_vm.onChangeFrameRadius}}),_c('el-dropdown-item',{staticClass:\"dropdown-item\",nativeOn:{\"click\":function($event){$event.stopPropagation();}}},[_c('img',{staticClass:\"icons no-frame\",attrs:{\"alt\":\"img\",\"src\":require(\"@/assets/img/qr/no-frame.svg\")},on:{\"click\":function($event){return _vm.onShowFrame('radius-frame')}}})])],1)],1)],1)],1)\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <div class=\"frame-radio\">\n    <!-- frame -->\n    <el-tooltip\n      placement=\"bottom\"\n      content=\"frame\"\n      transition=\"fade-tooltip\"\n      :disabled=\"device === 'mobile'\"\n    >\n      <el-dropdown\n        placement=\"bottom\"\n        :class=\"{ selected: frame === 'radius-frame' }\"\n        trigger=\"click\"\n      >\n        <img\n          alt=\"img\"\n          @click=\"onShowFrame('no-frame')\"\n          class=\"icons\"\n          src=\"@/assets/img/qr/Rectangle_radius.svg\"\n        />\n        <el-dropdown-menu class=\"frame-sliders\" slot=\"dropdown\">\n          <el-slider\n            class=\"slider\"\n            :show-tooltip=\"false\"\n            :min=\"frameParams.minWidth\"\n            :max=\"frameParams.maxWidth\"\n            :value=\"frameWidth\"\n            @input=\"onChangeFrameWidth\"\n          />\n          <el-slider\n            class=\"slider\"\n            :show-tooltip=\"false\"\n            :min=\"frameParams.minRadius * 2\"\n            :max=\"frameParams.maxRadius * 2\"\n            :value=\"frameRadius\"\n            @input=\"onChangeFrameRadius\"\n          />\n          <el-dropdown-item @click.native.stop class=\"dropdown-item\">\n            <img\n              alt=\"img\"\n              @click=\"onShowFrame('radius-frame')\"\n              class=\"icons no-frame\"\n              src=\"@/assets/img/qr/no-frame.svg\"\n            />\n          </el-dropdown-item>\n        </el-dropdown-menu>\n      </el-dropdown>\n    </el-tooltip>\n  </div>\n</template>\n\n<script>\nimport { mapGetters } from \"vuex\";\nimport computeQr from \"@/util/canvas/qr/computeParams\";\n\nexport default {\n  name: \"frameSettings\",\n  computed: {\n    ...mapGetters({\n      canvas: \"workSpace/canvas\",\n      activeCanvasObject: \"workSpace/activeCanvasObject\",\n      device: \"workSpace/device\",\n      frameParams: \"qr/frameParams\",\n      withTextOnCanvas: \"qr/withTextOnCanvas\"\n    }),\n    qrBorder() {\n      return this.activeCanvasObject._objects.find(\n        obj => obj.name === \"qrBorder\"\n      );\n    },\n    bgRect() {\n      return this.activeCanvasObject._objects.find(\n        obj => obj.name === \"bgRect\"\n      );\n    },\n    frame() {\n      const opacity = this.qrBorder?.opacity;\n      return opacity ? \"radius-frame\" : \"no-frame\";\n    },\n    frameWidth() {\n      return this.qrBorder?.strokeWidth ?? 0;\n    },\n    frameRadius() {\n      return this.qrBorder?.rx ?? 1;\n    }\n  },\n  methods: {\n    onChangeFrameWidth(strokeWidth) {\n      this.qrBorder.set({\n        strokeWidth\n      });\n      this.setSizeQrGroup();\n      this.canvas.renderAll();\n      this.canvas.fire(\"canvas:changes\");\n    },\n    onChangeFrameRadius(radius) {\n      this.qrBorder.set({\n        rx: radius,\n        ry: radius\n      });\n      this.setSizeQrGroup();\n      this.canvas.renderAll();\n      this.canvas.fire(\"canvas:changes\");\n    },\n    onShowFrame(value) {\n      this.qrBorder.set({\n        opacity: value === \"no-frame\" ? 1 : 0\n      });\n      this.setSizeQrGroup();\n      this.canvas.renderAll();\n      this.canvas.fire(\"canvas:changes\");\n    },\n    setSizeQrGroup() {\n      this.bgRect.set({\n        ...computeQr.getBgSize(this.frameWidth, this.frameRadius, this.frame)\n      });\n      this.qrBorder.set({\n        ...computeQr.getBorderRectSize(this.frameWidth, this.frameRadius)\n      });\n      this.activeCanvasObject.addWithUpdate();\n    }\n  }\n};\n</script>\n\n<style scoped>\n.el-dropdown-menu__item {\n  display: flex;\n  flex-direction: column;\n}\n.slider {\n  padding: 0 10px;\n  box-sizing: border-box;\n}\n.no-frame {\n  margin: auto;\n  padding: 3px;\n}\n.transparent,\n.color-picker,\n.el-dropdown {\n  display: flex;\n  padding: 5px;\n  border-radius: 7px;\n  border: 1px solid #ffffff00;\n  cursor: pointer;\n}\n.selected {\n  border-color: #ffe000;\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!./FrameSettings.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!./FrameSettings.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./FrameSettings.vue?vue&type=template&id=bb10277c&scoped=true&\"\nimport script from \"./FrameSettings.vue?vue&type=script&lang=js&\"\nexport * from \"./FrameSettings.vue?vue&type=script&lang=js&\"\nimport style0 from \"./FrameSettings.vue?vue&type=style&index=0&id=bb10277c&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  \"bb10277c\",\n  null\n  \n)\n\nexport default component.exports","var render = function render(){var _vm=this,_c=_vm._self._c;return _c('el-tooltip',{attrs:{\"placement\":\"bottom\",\"content\":\"transparency\",\"transition\":\"fade-tooltip\",\"disabled\":_vm.device === 'mobile'}},[_c('label',{staticClass:\"transparent\",class:{ selected: _vm.transparency }},[_c('input',{directives:[{name:\"model\",rawName:\"v-model\",value:(_vm.transparency),expression:\"transparency\"}],attrs:{\"type\":\"checkbox\",\"hidden\":\"\"},domProps:{\"checked\":Array.isArray(_vm.transparency)?_vm._i(_vm.transparency,null)>-1:(_vm.transparency)},on:{\"change\":function($event){var $$a=_vm.transparency,$$el=$event.target,$$c=$$el.checked?(true):(false);if(Array.isArray($$a)){var $$v=null,$$i=_vm._i($$a,$$v);if($$el.checked){$$i<0&&(_vm.transparency=$$a.concat([$$v]))}else{$$i>-1&&(_vm.transparency=$$a.slice(0,$$i).concat($$a.slice($$i+1)))}}else{_vm.transparency=$$c}}}}),_c('img',{staticClass:\"icons\",attrs:{\"alt\":\"img\",\"src\":require(\"@/assets/img/qr/transparency.svg\")}})])])\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <!-- transparent -->\n  <el-tooltip\n    placement=\"bottom\"\n    content=\"transparency\"\n    transition=\"fade-tooltip\"\n    :disabled=\"device === 'mobile'\"\n  >\n    <label class=\"transparent\" :class=\"{ selected: transparency }\">\n      <input type=\"checkbox\" hidden v-model=\"transparency\" />\n      <img alt=\"img\" class=\"icons\" src=\"@/assets/img/qr/transparency.svg\" />\n    </label>\n  </el-tooltip>\n</template>\n\n<script>\nimport { mapGetters } from \"vuex\";\n\nexport default {\n  name: \"transparency\",\n  computed: {\n    ...mapGetters({\n      canvas: \"workSpace/canvas\",\n      activeCanvasObject: \"workSpace/activeCanvasObject\",\n      device: \"workSpace/device\"\n    }),\n    ...mapGetters(\"fontParams\", [\"fontParams\"]),\n    bgRect() {\n      return this.activeCanvasObject._objects.find(\n        obj => obj.name === \"bgRect\"\n      );\n    },\n    transparency: {\n      get() {\n        return !this.bgRect?.opacity;\n      },\n      set(value) {\n        this.bgRect.set({ opacity: value ? 0 : 1 });\n        this.canvas.renderAll();\n        this.canvas.fire(\"canvas:changes\");\n      }\n    }\n  }\n};\n</script>\n\n<style scoped>\n.flex-column-center {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: start;\n}\n.transparent {\n  cursor: pointer;\n}\n.transparent,\n.color-picker,\n.el-dropdown {\n  display: flex;\n  padding: 5px;\n  border-radius: 7px;\n  border: 1px solid #ffffff00;\n  cursor: pointer;\n}\n.selected {\n  border-color: #ffe000;\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!./Transparency.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!./Transparency.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./Transparency.vue?vue&type=template&id=232c4d85&scoped=true&\"\nimport script from \"./Transparency.vue?vue&type=script&lang=js&\"\nexport * from \"./Transparency.vue?vue&type=script&lang=js&\"\nimport style0 from \"./Transparency.vue?vue&type=style&index=0&id=232c4d85&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  \"232c4d85\",\n  null\n  \n)\n\nexport default component.exports","<template>\n  <div>\n    <el-dropdown\n      placement=\"bottom\"\n      trigger=\"click\"\n      class=\"input-left-panel-wraper\"\n    >\n      <div class=\"search-input-wraper\">\n        <input\n          class=\"search-input\"\n          type=\"text\"\n          :value=\"qrCode && qrCode.qrValue\"\n          @input=\"onInputQrValue\"\n        />\n        <img\n          alt=\"img\"\n          src=\"@/assets/img/select_arrow.svg\"\n          class=\"search-arrow\"\n        />\n      </div>\n      <el-dropdown-menu class=\"items-container\" slot=\"dropdown\">\n        <div>\n          <el-dropdown-item\n            v-show=\"myInteractions.length\"\n            class=\"item\"\n            @click.native=\"onSelectInteraction(i.link)\"\n            v-for=\"(i, idx) of myInteractions\"\n            :key=\"idx\"\n          >\n            {{ i.name }}\n          </el-dropdown-item>\n        </div>\n        <div v-show=\"!myInteractions.length\" class=\"msg\">\n          you have no interactions\n        </div>\n      </el-dropdown-menu>\n    </el-dropdown>\n    <div class=\"settings-container\">\n      <frameSettings />\n      <transparency />\n      <div class=\"colors-wraper\">\n        <el-dropdown trigger=\"click\">\n          <span class=\"el-dropdown-link\">\n            <el-tooltip\n              placement=\"bottom\"\n              content=\"color\"\n              transition=\"fade-tooltip\"\n              :disabled=\"device === 'mobile'\"\n            >\n              <div\n                class=\"color-picker-wraper\"\n                :style=\"{\n                  backgroundColor: color.obj.hex,\n                  border: getColorBorder(color.obj)\n                }\"\n              ></div>\n            </el-tooltip>\n          </span>\n          <el-dropdown-menu slot=\"dropdown\">\n            <chrome-picker\n              class=\"picker-element\"\n              @input=\"updateAllColors(color)\"\n              v-model=\"color.obj\"\n            />\n          </el-dropdown-menu>\n        </el-dropdown>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\nimport ChromePicker from \"vue-color/src/components/Chrome\";\nimport { fabric } from \"fabric\";\nimport { mapGetters } from \"vuex\";\nimport frameSettings from \"./qr/FrameSettings\";\nimport transparency from \"./qr/Transparency\";\nimport { getColorBorder } from \"@/helpers/hex\";\nimport nameCanvasObject from \"@/util/canvas/nameCanvasObject\";\nimport \"@/assets/css/contextMenu.css\";\nimport \"@/assets/css/qr/settingsStyle.css\";\n\nexport default {\n  name: \"qrGroupPanel\",\n  components: {\n    ChromePicker,\n    frameSettings,\n    transparency\n  },\n  data() {\n    return {\n      getColorBorder\n    };\n  },\n  computed: {\n    ...mapGetters({\n      canvas: \"workSpace/canvas\",\n      activeCanvasObject: \"workSpace/activeCanvasObject\",\n      device: \"workSpace/device\",\n      myInteractions: \"customContent/myInteractions\",\n      groupColors: \"colorPicker/groupColors\",\n      groupColorsObj: \"colorPicker/groupColorsObj\",\n      svgStrokeObj: \"colorPicker/svgStrokeObj\"\n    }),\n\n    color() {\n      return this.groupColors?.[0];\n    },\n    qrCode() {\n      return this.activeCanvasObject._objects.find(o => o.name === \"qrCode\");\n    },\n    bgRect() {\n      return this.activeCanvasObject._objects.find(o => o.name === \"bgRect\");\n    }\n  },\n  beforeCreate() {\n    this.$store.dispatch(\"colorPicker/defineColors\");\n  },\n  methods: {\n    onSelectInteraction(link) {\n      const interactionLink = `${process.env.VUE_APP_SURVEY_URL}/${link}`;\n      this.onInputQrValue({ target: { value: interactionLink } });\n    },\n\n    historySaveAction() {\n      this.timeoutId && clearTimeout(this.timeoutId);\n      this.timeoutId = setTimeout(() => {\n        this.canvas.fire(\"canvas:changes\");\n      }, 1000);\n    },\n    updateAllColors(color) {\n      this.updateStoke(color);\n      this.updateGroupColor(color);\n      this.historySaveAction();\n    },\n    updateStoke(color) {\n      const colorsList = this.svgStrokeObj[color.hex];\n      colorsList.forEach(el => el.set(\"stroke\", color.obj.hex));\n      this.canvas.renderAll();\n    },\n    updateGroupColor(color) {\n      const colorsList = this.groupColorsObj[color.hex];\n      colorsList.forEach(el => el.setColor(color.obj.hex));\n      this.canvas.renderAll();\n    },\n    onInputQrValue(e) {\n      const value = e.target.value.trim();\n      this.qrCode.qrValue = value;\n      this.$store.dispatch(\"qr/generateQr\", value).then(qrCode => {\n        fabric.loadSVGFromString(qrCode, (objects, options) => {\n          const svg = fabric.util.groupSVGElements(objects, options);\n          const color = this.qrCode._objects.find(o => o.fill)?.fill;\n          svg._objects.forEach(o => o.setColor(color));\n          delete this.qrCode._objects;\n          svg.set({ ...this.qrCode });\n          nameCanvasObject(svg, \"qrCode\", false, { qrValue: value });\n          this.activeCanvasObject.remove(this.qrCode);\n          this.activeCanvasObject.add(svg);\n          this.canvas.renderAll();\n          this.$store.dispatch(\"colorPicker/defineColors\");\n        });\n      });\n    }\n  },\n  watch: {\n    activeCanvasObject(newObj) {\n      newObj && this.$store.dispatch(\"colorPicker/defineColors\");\n    }\n  }\n};\n</script>\n\n<style scoped>\n.search-input-wraper {\n  padding-top: 0;\n}\n.colors-wraper {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: center;\n}\n.el-dropdown-link {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n.color-wrap {\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  margin: 0;\n  padding: 8px 16px 14px;\n}\n.color-wrap:first-child {\n  margin-left: 0;\n}\n.color-picker-wraper {\n  width: 24px;\n  height: 24px;\n}\n.span {\n  font-size: 8px;\n  margin-top: 2px;\n  color: #1d2d36;\n  text-align: center;\n}\n\n.settings-container {\n  margin: 20px auto;\n  display: flex;\n  justify-content: space-around;\n  align-items: center;\n  background: #f8f8f5;\n  border-radius: 6px;\n  width: 200px;\n  box-sizing: border-box;\n  padding: 0 8px;\n  height: 50px;\n}\n\n.z-index-wraper {\n  justify-content: space-around;\n}\n.menu-title {\n  text-align: center;\n  font-size: 12px;\n  font-weight: 600;\n  margin: 12px 0 7px;\n}\n.copy-paste {\n  width: 100%;\n  display: flex;\n}\n.copy-paste img {\n  margin: 0 auto 24px;\n  cursor: pointer;\n}\n.input-field {\n  border-radius: 7px;\n}\n\n.input-left-panel-wraper {\n  margin: auto;\n  width: 100%;\n  box-sizing: border-box;\n  position: relative;\n  padding: 0 20px;\n}\n.input-left-panel-wraper img {\n  position: absolute;\n  padding: 10px;\n  background: #f8f8f5;\n  border-radius: 7px;\n  right: 20px;\n  top: 0px;\n  cursor: pointer;\n}\n.msg {\n  padding: 30px 10px;\n  text-align: center;\n  font-size: 12px;\n}\n.items-container {\n  box-sizing: border-box;\n  padding: 10px 0;\n  width: 270px;\n}\n.item {\n  padding: 5px 10px;\n  font-size: 12px;\n  line-height: 16px;\n}\n.item:hover {\n  background: #f8f8f5;\n  color: #000;\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!./qrGroupPanel.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!./qrGroupPanel.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./qrGroupPanel.vue?vue&type=template&id=d9543e16&scoped=true&\"\nimport script from \"./qrGroupPanel.vue?vue&type=script&lang=js&\"\nexport * from \"./qrGroupPanel.vue?vue&type=script&lang=js&\"\nimport style0 from \"./qrGroupPanel.vue?vue&type=style&index=0&id=d9543e16&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  \"d9543e16\",\n  null\n  \n)\n\nexport default component.exports","export * from \"-!../../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--6-oneOf-1-0!../../../../node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-1!../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../node_modules/postcss-loader/src/index.js??ref--6-oneOf-1-2!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Transparency.vue?vue&type=style&index=0&id=232c4d85&prod&scoped=true&lang=css&\"","module.exports = __webpack_public_path__ + \"img/select_arrow.c1529dcc.svg\";","export * from \"-!../../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--6-oneOf-1-0!../../../../node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-1!../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../node_modules/postcss-loader/src/index.js??ref--6-oneOf-1-2!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./FrameSettings.vue?vue&type=style&index=0&id=bb10277c&prod&scoped=true&lang=css&\"","module.exports = __webpack_public_path__ + \"img/transparency.54216516.svg\";","export * from \"-!../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--6-oneOf-1-0!../../../node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-1!../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/postcss-loader/src/index.js??ref--6-oneOf-1-2!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./qrGroupPanel.vue?vue&type=style&index=0&id=d9543e16&prod&scoped=true&lang=css&\"","module.exports = __webpack_public_path__ + \"img/no-frame.a2cb74bf.svg\";","module.exports = __webpack_public_path__ + \"img/Rectangle_radius.a4dd30ac.svg\";"],"sourceRoot":""}