{"version":3,"sources":["webpack:///./src/components/contextMenu/widgets/inputFieldWidgetPanel.vue?97d4","webpack:///./src/assets/img/fonts-panel/textPosLeft.svg","webpack:///./src/assets/img/select_arrow.svg","webpack:///./src/assets/img/fonts-panel/textPosCenter.svg","webpack:///./src/components/contextMenu/fontFamilyInput.vue?1b5d","webpack:///./src/assets/img/fonts-panel/textPosRigth.svg","webpack:///./src/components/contextMenu/widgets/inputFieldWidgetPanel.vue","webpack:///src/components/contextMenu/widgets/inputFieldWidgetPanel.vue","webpack:///./src/components/contextMenu/widgets/inputFieldWidgetPanel.vue?6fdf","webpack:///./src/components/contextMenu/widgets/inputFieldWidgetPanel.vue?501c","webpack:///./src/components/contextMenu/fontFamilyInput.vue","webpack:///src/components/contextMenu/fontFamilyInput.vue","webpack:///./src/components/contextMenu/fontFamilyInput.vue?93d5","webpack:///./src/components/contextMenu/fontFamilyInput.vue?19f2","webpack:///./src/assets/img/qr/Rectangle_radius.svg"],"names":["module","exports","render","_vm","this","_c","_self","staticClass","attrs","_v","_s","fieldType","require","slot","_l","fieldTypes","t","key","nativeOn","$event","onChangeFieldType","staticStyle","domProps","mandatory","on","onChangeMandatory","directives","name","rawName","value","inputPlaceholder","expression","target","composing","updateInputPlaceholder","fontFamily","updateFontFamily","updateFontSize","fontSize","fontStyles","idx","checked","Array","isArray","_i","$$a","$$el","$$c","$$v","$$i","$set","concat","slice","updateFontStyle","device","class","underline","title","textAlignMock","textAlign","_q","updateTextAlign","n","style","backgroundColor","border","getColorBorder","onUpdateColor","hideScaleControllers","updateBtnRadius","model","borderRadius","callback","staticRenderFns","components","ChromePicker","fontFamilyInput","data","colorChecker","timeoutId","color","left","center","right","bold","italic","computed","mapGetters","survey","activeWidget","_objects","fill","inputTextItem","configs","inputBackgroundItem","mounted","init","methods","text","get","Math","round","rx","set","ry","renderAll","fire","opend","hasControls","calculatePosition","clearTimeout","setTimeout","paramName","param","fetchCanvasFont","size","_size$target$valueAsN","_size$target","_size","valueAsNumber","isActiveObj","fontLink","content","setSurveyStepParam","type","needRerendering","active","addWidget","objects","fontWeight","fontStyle","top","angle","remove","setCoords","e","width","groupHeight","height","groupWidth","dynamicMinWidth","colorIdx","hex","setColor","watch","component","onHideDropdown","fontInput","ref","activeFontFamily","fontFamilyList","onChangeFontFamily","__typename","preview","length","showLoader","props","preloader","allFonts","fontsListMod","currentPage","maxPerPage","disableObserve","fonts","myFonts","interactionMode","canvas","_canvas","serializedMyFonts","map","f","replace","scrollTrigger","$emit","rating","incrementRating","id","v","$refs","blur","observer","IntersectionObserver","entries","forEach","entry","intersectionRatio","fetchPathFontsList","observe","infinityScrollTrigger","partFontList","promiseList","push","Promise","all","filter","toLowerCase","includes"],"mappings":"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","file":"js/inputFieldWidgetPanel.6e1fe359.js","sourcesContent":["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!./inputFieldWidgetPanel.vue?vue&type=style&index=0&id=29a994d6&prod&scoped=true&lang=css&\"","module.exports = __webpack_public_path__ + \"img/textPosLeft.985af18d.svg\";","module.exports = __webpack_public_path__ + \"img/select_arrow.c1529dcc.svg\";","module.exports = __webpack_public_path__ + \"img/textPosCenter.68bbb8e9.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!./fontFamilyInput.vue?vue&type=style&index=0&id=438dff51&prod&scoped=true&lang=css&\"","module.exports = __webpack_public_path__ + \"img/textPosRigth.6d07de6c.svg\";","var render = function render(){var _vm=this,_c=_vm._self._c;return _c('div',{staticClass:\"context-panel-container\"},[_c('div',{staticClass:\"context-panel-scroll\"},[_c('div',{staticClass:\"context-panel-group\"},[_c('el-dropdown',{attrs:{\"placement\":\"bottom\",\"trigger\":\"click\"}},[_c('div',{staticClass:\"field-dropdown-container\"},[_c('div',{staticClass:\"active-dropdown-item\"},[_c('div',[_vm._v(_vm._s(_vm.fieldType))]),_c('img',{attrs:{\"alt\":\"img\",\"src\":require(\"@/assets/img/select_arrow.svg\")}})]),_c('div',{staticClass:\"field-name\"},[_vm._v(\"field type\")])]),_c('el-dropdown-menu',{staticClass:\"dropdown-menu\",attrs:{\"slot\":\"dropdown\"},slot:\"dropdown\"},_vm._l((_vm.fieldTypes),function(t){return _c('el-dropdown-item',{key:t,staticClass:\"dropdown-item\",nativeOn:{\"click\":function($event){return _vm.onChangeFieldType(t)}}},[_vm._v(\" \"+_vm._s(t)+\" \")])}),1)],1),_c('div',{staticClass:\"required-field\"},[_c('label',{staticStyle:{\"display\":\"flex\"}},[_c('input',{attrs:{\"type\":\"checkbox\",\"hidden\":\"\"},domProps:{\"checked\":_vm.mandatory,\"value\":_vm.mandatory},on:{\"change\":function($event){return _vm.onChangeMandatory($event)}}}),_c('div',{staticClass:\"checkbbox\"})]),_c('div',{staticClass:\"field-name\"},[_vm._v(\"mandatory\")])]),_c('div',{staticClass:\"input-field-text-container\"},[_c('input',{directives:[{name:\"model\",rawName:\"v-model\",value:(_vm.inputPlaceholder),expression:\"inputPlaceholder\"}],attrs:{\"type\":\"text\"},domProps:{\"value\":(_vm.inputPlaceholder)},on:{\"input\":[function($event){if($event.target.composing)return;_vm.inputPlaceholder=$event.target.value},_vm.updateInputPlaceholder]}}),_c('div',{staticClass:\"field-name\"},[_vm._v(\"field name\")])]),_c('font-family-input',{staticClass:\"font-family-container\",attrs:{\"activeFontFamily\":_vm.fontFamily},on:{\"on-change-font-family\":_vm.updateFontFamily}})],1),_c('div',{staticClass:\"mob-separator\"}),_c('div',{staticClass:\"context-panel-group font-styles-container\"},[_c('div',{staticClass:\"font-size text-settings-wraper\"},[_c('div',{staticClass:\"font-size-controllers minus\",on:{\"click\":function($event){return _vm.updateFontSize(--_vm.fontSize)}}},[_vm._v(\" - \")]),_c('input',{staticClass:\"font-size-input\",attrs:{\"type\":\"number\"},domProps:{\"value\":_vm.fontSize},on:{\"input\":function($event){return _vm.updateFontSize($event)}}}),_c('div',{staticClass:\"font-size-controllers plus\",on:{\"click\":function($event){return _vm.updateFontSize(++_vm.fontSize)}}},[_vm._v(\" + \")])]),_c('div',{staticClass:\"font-style text-settings-wraper\"},_vm._l((_vm.fontStyles),function(value,key,idx){return _c('label',{key:idx,staticClass:\"label\"},[_c('input',{directives:[{name:\"model\",rawName:\"v-model\",value:(_vm.fontStyles[key].checked),expression:\"fontStyles[key].checked\"}],staticClass:\"checkbox-button\",attrs:{\"type\":\"checkbox\"},domProps:{\"checked\":Array.isArray(_vm.fontStyles[key].checked)?_vm._i(_vm.fontStyles[key].checked,null)>-1:(_vm.fontStyles[key].checked)},on:{\"change\":[function($event){var $$a=_vm.fontStyles[key].checked,$$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.$set(_vm.fontStyles[key], \"checked\", $$a.concat([$$v])))}else{$$i>-1&&(_vm.$set(_vm.fontStyles[key], \"checked\", $$a.slice(0,$$i).concat($$a.slice($$i+1))))}}else{_vm.$set(_vm.fontStyles[key], \"checked\", $$c)}},function($event){return _vm.updateFontStyle({ key, value })}]}}),_c('el-tooltip',{attrs:{\"placement\":\"bottom\",\"content\":key,\"transition\":\"fade-tooltip\",\"disabled\":_vm.device === 'mobile'}},[_c('span',{staticClass:\"input-wrapper fs\",class:{ underline: idx === 2 }},[_vm._v(_vm._s(value.title))])])],1)}),0),_c('div',{staticClass:\"text-align\"},_vm._l((_vm.textAlignMock),function(value,key,idx){return _c('label',{key:idx,staticClass:\"label\"},[_c('input',{directives:[{name:\"model\",rawName:\"v-model\",value:(_vm.textAlign),expression:\"textAlign\"}],staticClass:\"radio-button\",attrs:{\"type\":\"radio\",\"name\":\"text-align\"},domProps:{\"value\":key,\"checked\":_vm._q(_vm.textAlign,key)},on:{\"change\":[function($event){_vm.textAlign=key},_vm.updateTextAlign]}}),_c('el-tooltip',{attrs:{\"placement\":\"bottom\",\"content\":key,\"transition\":\"fade-tooltip\",\"disabled\":_vm.device === 'mobile'}},[_c('span',{staticClass:\"input-wrapper\"},[_c('img',{attrs:{\"alt\":\"img\",\"src\":value}})])])],1)}),0),_c('div',{staticClass:\"colors-container\"},_vm._l((2),function(n){return _c('div',{key:n,staticClass:\"border-color\"},[_c('el-dropdown',{attrs:{\"placement\":\"bottom\",\"trigger\":\"click\"}},[_c('span',{staticClass:\"picker-button\"},[_c('div',{staticClass:\"color-picker-wraper\",style:({\n                  backgroundColor: _vm.backgroundColor[n - 1],\n                  border: _vm.getColorBorder(_vm.backgroundColor[n - 1])\n                })})]),_c('el-dropdown-menu',{attrs:{\"slot\":\"dropdown\"},slot:\"dropdown\"},[_c('chrome-picker',{staticClass:\"picker-element\",attrs:{\"value\":_vm.backgroundColor[n - 1]},on:{\"input\":function($event){return _vm.onUpdateColor(n - 1, $event)}}})],1)],1)],1)}),0),_c('div',{staticClass:\"field-name\"},[_vm._v(\"color\")]),_c('div',{staticClass:\"button-colors-container\",staticStyle:{\"width\":\"50px\"}},[_c('el-dropdown',{staticClass:\"dropdown-radius\",attrs:{\"placement\":\"bottom\",\"trigger\":\"click\"},on:{\"visible-change\":_vm.hideScaleControllers}},[_c('img',{attrs:{\"alt\":\"img\",\"src\":require(\"@/assets/img/qr/Rectangle_radius.svg\")}}),_c('el-dropdown-menu',{attrs:{\"slot\":\"dropdown\"},slot:\"dropdown\"},[_c('el-slider',{staticClass:\"slider\",attrs:{\"show-tooltip\":false,\"min\":0,\"max\":30},on:{\"input\":_vm.updateBtnRadius},model:{value:(_vm.borderRadius),callback:function ($$v) {_vm.borderRadius=$$v},expression:\"borderRadius\"}})],1)],1)],1),_c('div',{staticClass:\"field-name\"},[_vm._v(\"radius\")])])])])\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <div class=\"context-panel-container\">\n    <div class=\"context-panel-scroll\">\n      <div class=\"context-panel-group\">\n        <el-dropdown placement=\"bottom\" trigger=\"click\">\n          <div class=\"field-dropdown-container\">\n            <div class=\"active-dropdown-item\">\n              <div>{{ fieldType }}</div>\n              <img alt=\"img\" src=\"@/assets/img/select_arrow.svg\" />\n            </div>\n            <div class=\"field-name\">field type</div>\n          </div>\n          <el-dropdown-menu slot=\"dropdown\" class=\"dropdown-menu\">\n            <el-dropdown-item\n              @click.native=\"onChangeFieldType(t)\"\n              class=\"dropdown-item\"\n              v-for=\"t in fieldTypes\"\n              :key=\"t\"\n            >\n              {{ t }}\n            </el-dropdown-item>\n          </el-dropdown-menu>\n        </el-dropdown>\n        <div class=\"required-field\">\n          <label style=\"display: flex;\">\n            <input\n              type=\"checkbox\"\n              hidden\n              :checked=\"mandatory\"\n              :value=\"mandatory\"\n              @change=\"onChangeMandatory($event)\"\n            />\n            <div class=\"checkbbox\"></div>\n          </label>\n          <div class=\"field-name\">mandatory</div>\n        </div>\n        <div class=\"input-field-text-container\">\n          <input\n            type=\"text\"\n            v-model=\"inputPlaceholder\"\n            @input=\"updateInputPlaceholder\"\n          />\n          <div class=\"field-name\">field name</div>\n        </div>\n        <!-- font-family -->\n        <font-family-input\n          class=\"font-family-container\"\n          @on-change-font-family=\"updateFontFamily\"\n          :activeFontFamily=\"fontFamily\"\n        />\n      </div>\n      <div class=\"mob-separator\"></div>\n      <div class=\"context-panel-group font-styles-container\">\n        <!-- font size -->\n        <div class=\"font-size text-settings-wraper\">\n          <div\n            class=\"font-size-controllers minus\"\n            @click=\"updateFontSize(--fontSize)\"\n          >\n            -\n          </div>\n          <input\n            type=\"number\"\n            class=\"font-size-input\"\n            :value=\"fontSize\"\n            @input=\"updateFontSize($event)\"\n          />\n          <div\n            class=\"font-size-controllers plus\"\n            @click=\"updateFontSize(++fontSize)\"\n          >\n            +\n          </div>\n        </div>\n        <!-- font-style -->\n        <div class=\"font-style text-settings-wraper\">\n          <label\n            class=\"label\"\n            v-for=\"(value, key, idx) of fontStyles\"\n            :key=\"idx\"\n          >\n            <input\n              class=\"checkbox-button\"\n              v-model=\"fontStyles[key].checked\"\n              type=\"checkbox\"\n              @change=\"updateFontStyle({ key, value })\"\n            />\n            <el-tooltip\n              placement=\"bottom\"\n              :content=\"key\"\n              transition=\"fade-tooltip\"\n              :disabled=\"device === 'mobile'\"\n            >\n              <span\n                class=\"input-wrapper fs\"\n                :class=\"{ underline: idx === 2 }\"\n                >{{ value.title }}</span\n              >\n            </el-tooltip>\n          </label>\n        </div>\n        <!-- text-align -->\n        <div class=\"text-align\">\n          <label\n            class=\"label\"\n            v-for=\"(value, key, idx) of textAlignMock\"\n            :key=\"idx\"\n          >\n            <input\n              @change=\"updateTextAlign\"\n              class=\"radio-button\"\n              v-model=\"textAlign\"\n              type=\"radio\"\n              name=\"text-align\"\n              :value=\"key\"\n            />\n            <el-tooltip\n              placement=\"bottom\"\n              :content=\"key\"\n              transition=\"fade-tooltip\"\n              :disabled=\"device === 'mobile'\"\n            >\n              <span class=\"input-wrapper\">\n                <img alt=\"img\" :src=\"value\" />\n              </span>\n            </el-tooltip>\n          </label>\n        </div>\n        <!-- colors -->\n        <div class=\"colors-container\">\n          <div class=\"border-color \" v-for=\"n in 2\" :key=\"n\">\n            <el-dropdown placement=\"bottom\" trigger=\"click\">\n              <span class=\"picker-button\">\n                <div\n                  :style=\"{\n                    backgroundColor: backgroundColor[n - 1],\n                    border: getColorBorder(backgroundColor[n - 1])\n                  }\"\n                  class=\"color-picker-wraper\"\n                ></div>\n              </span>\n\n              <el-dropdown-menu slot=\"dropdown\">\n                <chrome-picker\n                  class=\"picker-element\"\n                  @input=\"onUpdateColor(n - 1, $event)\"\n                  :value=\"backgroundColor[n - 1]\"\n                />\n              </el-dropdown-menu>\n            </el-dropdown>\n          </div>\n        </div>\n        <div class=\"field-name\">color</div>\n        <!-- radius -->\n        <div class=\"button-colors-container\" style=\"width: 50px;\">\n          <el-dropdown\n            @visible-change=\"hideScaleControllers\"\n            placement=\"bottom\"\n            trigger=\"click\"\n            class=\"dropdown-radius\"\n          >\n            <img alt=\"img\" src=\"@/assets/img/qr/Rectangle_radius.svg\" />\n            <el-dropdown-menu slot=\"dropdown\">\n              <el-slider\n                class=\"slider\"\n                :show-tooltip=\"false\"\n                :min=\"0\"\n                :max=\"30\"\n                v-model=\"borderRadius\"\n                @input=\"updateBtnRadius\"\n              />\n            </el-dropdown-menu>\n          </el-dropdown>\n        </div>\n        <div class=\"field-name\">radius</div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\nimport { getColorBorder } from \"@/helpers/hex\";\nimport ChromePicker from \"vue-color/src/components/Chrome\";\nimport fontFamilyInput from \"@/components/contextMenu/fontFamilyInput\";\nimport { fetchCanvasFont } from \"@/helpers/fontsHelper\";\nimport { mapGetters } from \"vuex\";\nimport { setSurveyStepParam } from \"@/util/survey/markSurveyObject\";\nimport { addWidget } from \"@/util/survey/widgets\";\nimport \"@/assets/css/contextMenu.css\";\n\nexport default {\n  name: \"PilInputFieldWidgetPanel\",\n  components: {\n    ChromePicker,\n    fontFamilyInput\n  },\n  data() {\n    return {\n      getColorBorder,\n      colorChecker: null,\n      timeoutId: null,\n      fontSize: 16,\n      fontFamily: \"Monserrat\",\n      color: {},\n      borderRadius: 0,\n      inputPlaceholder: \"\",\n      fieldTypes: [\"text\", \"email\", \"phone\", \"date\", \"number\", \"time\"],\n      textAlign: \"center\",\n      textAlignMock: {\n        left: require(\"@/assets/img/fonts-panel/textPosLeft.svg\"),\n        center: require(\"@/assets/img/fonts-panel/textPosCenter.svg\"),\n        right: require(\"@/assets/img/fonts-panel/textPosRigth.svg\")\n      },\n      fontStyles: {\n        bold: {\n          title: \"B\",\n          checked: false\n        },\n        italic: {\n          title: \"I\",\n          checked: false\n        },\n        underline: {\n          title: \"U\",\n          checked: false\n        }\n      }\n    };\n  },\n  computed: {\n    ...mapGetters({\n      device: \"workSpace/device\",\n      survey: \"workSpace/survey\",\n      activeWidget: \"workSpace/activeWidget\"\n    }),\n    backgroundColor() {\n      return [\n        this.activeWidget._objects[0].fill,\n        this.activeWidget._objects[1].fill\n      ];\n    },\n    inputTextItem() {\n      return this.activeWidget._objects[1];\n    },\n    configs() {\n      return this.activeWidget.configs;\n    },\n    inputBackgroundItem() {\n      return this.activeWidget._objects[0];\n    },\n    fieldType() {\n      return this.configs.fieldType;\n    },\n    mandatory() {\n      return this.configs.mandatory;\n    }\n  },\n  mounted() {\n    this.init();\n  },\n  methods: {\n    init() {\n      this.inputPlaceholder = this.inputTextItem.text;\n      this.fontStyles.bold.checked =\n        this.inputTextItem.get(\"fontWeight\") === \"bold\";\n      this.fontStyles.italic.checked =\n        this.inputTextItem.get(\"fontStyle\") === \"italic\";\n      this.fontStyles.underline.checked = this.inputTextItem.get(\"underline\");\n      this.fontFamily = this.inputTextItem.get(\"fontFamily\");\n      this.fontSize = Math.round(\n        this.inputTextItem.get(\"fontSize\") * this.activeWidget.get(\"scaleY\")\n      );\n      this.textAlign = this.inputTextItem.get(\"textAlign\");\n      this.borderRadius = this.inputBackgroundItem.rx;\n    },\n    updateBtnRadius() {\n      this.inputBackgroundItem.set({\n        rx: this.borderRadius,\n        ry: this.borderRadius\n      });\n      this.survey.renderAll();\n      this.survey.fire(\"canvas:changes\");\n    },\n    hideScaleControllers(opend) {\n      if (opend) {\n        this.activeWidget.hasControls = false;\n      } else {\n        this.activeWidget.hasControls = true;\n      }\n      this.survey.renderAll();\n    },\n    updateInputPlaceholder() {\n      this.inputTextItem.set(\"text\", this.inputPlaceholder);\n      this.calculatePosition();\n      this.survey.renderAll();\n      if (this.timeoutId) clearTimeout(this.timeoutId);\n      this.timeoutId = setTimeout(() => {\n        this.survey.fire(\"canvas:changes\");\n      }, 1000);\n    },\n    updateFontStyle({ key, value }) {\n      fetchCanvasFont(this.inputTextItem.fontFamily, { survey: true });\n      let paramName, param;\n      if (key === \"bold\")\n        [paramName, param] = [\"fontWeight\", value.checked ? \"bold\" : \"normal\"];\n      if (key === \"italic\")\n        [paramName, param] = [\"fontStyle\", value.checked ? \"italic\" : \"normal\"];\n      if (key === \"underline\")\n        [paramName, param] = [\"underline\", value.checked];\n      this.inputTextItem.set(paramName, param);\n      this.survey.renderAll();\n      this.calculatePosition();\n      this.survey.fire(\"canvas:changes\");\n    },\n    updateFontSize(size) {\n      const _size = size?.target?.valueAsNumber ?? size;\n      const fontSize = Math.round(\n        _size / this.activeWidget.get(\"scaleY\") ? _size : 1\n      );\n      this.fontSize = _size > 0 ? _size : 1;\n      this.inputTextItem.set(\"fontSize\", fontSize);\n      this.survey.renderAll();\n      this.calculatePosition();\n      this.survey.fire(\"canvas:changes\");\n    },\n    async updateFontFamily(fontFamily) {\n      await fetchCanvasFont(fontFamily, { isActiveObj: false });\n      this.inputTextItem.set(\"fontFamily\", fontFamily.name);\n      this.fontFamily = fontFamily.name;\n      this.survey.renderAll();\n      this.calculatePosition();\n      this.configs.fontLink = fontFamily.content;\n      setSurveyStepParam(\"configs\", this.activeWidget, this.configs);\n      this.survey.fire(\"canvas:changes\");\n    },\n    async onChangeFieldType(type) {\n      if (type === this.fieldType) return;\n      // ? update placeholder\n      this.inputPlaceholder = type;\n      this.updateInputPlaceholder();\n      // ? update widget if it changes (from/on) text\n      const needRerendering = type === \"text\" || this.fieldType === \"text\";\n      this.configs.fieldType = type;\n      if (needRerendering) {\n        const active = this.activeWidget;\n        await addWidget(\"input-field\", this.survey, {\n          configs: this.configs,\n          objects: [\n            { fill: this.backgroundColor[0] },\n            {\n              text: this.inputTextItem.text,\n              fill: this.backgroundColor[1],\n              fontWeight: this.inputTextItem.get(\"fontWeight\"),\n              fontStyle: this.inputTextItem.get(\"fontStyle\"),\n              underline: this.inputTextItem.get(\"underline\"),\n              fontSize: this.fontSize,\n              fontFamily: this.fontFamily,\n              textAlign: this.textAlign\n            }\n          ]\n        });\n        this.activeWidget.set({\n          top: active.top < 0 ? 0 : active.top,\n          left: active.left < 0 ? 0 : active.left,\n          angle: active.angle\n        });\n        this.survey.remove(active);\n        this.activeWidget.setCoords();\n        this.survey.renderAll();\n        this.calculatePosition();\n      }\n      setSurveyStepParam(\"configs\", this.activeWidget, this.configs);\n      this.survey.fire(\"canvas:changes\");\n    },\n    onChangeMandatory(e) {\n      this.configs.mandatory = e.target.checked;\n      setSurveyStepParam(\"configs\", this.activeWidget, this.configs);\n      this.survey.fire(\"canvas:changes\");\n    },\n    updateTextAlign(e) {\n      const textAlign = e.target.value;\n      let left = 0;\n      if (this.fieldType !== \"text\") {\n        if (textAlign === \"left\") {\n          left = -(this.activeWidget.width / 2) + this.inputTextItem.width / 2;\n        } else if (textAlign === \"right\") {\n          left = this.activeWidget.width / 2 - this.inputTextItem.width / 2;\n        }\n      }\n\n      this.inputTextItem.set({ left, textAlign });\n      this.survey.renderAll();\n      this.survey.fire(\"canvas:changes\");\n    },\n    calculatePosition() {\n      const groupHeight = this.activeWidget.height;\n      const groupWidth = this.activeWidget.width;\n      const width =\n        this.inputTextItem.dynamicMinWidth || this.inputTextItem.width;\n      const height = this.inputTextItem.height;\n      if (height >= groupHeight) {\n        this.inputBackgroundItem.set(\"height\", height);\n        this.activeWidget.set(\"height\", height);\n        this.activeWidget.setCoords();\n      }\n      if (width > groupWidth) {\n        this.updateFontSize(--this.fontSize);\n        return;\n      }\n      if (this.fieldType === \"text\") {\n        this.inputTextItem.set({\n          width: groupWidth\n          // top: -(groupHeight / 2 - height / 2),\n        });\n      } else {\n        let left = 0;\n        if (this.textAlign === \"left\") {\n          left = -(this.activeWidget.width / 2) + this.inputTextItem.width / 2;\n        } else if (this.textAlign === \"right\") {\n          left = this.activeWidget.width / 2 - this.inputTextItem.width / 2;\n        }\n        this.inputTextItem.set({ left });\n      }\n    },\n    onUpdateColor(colorIdx, { hex }) {\n      this.activeWidget._objects[colorIdx].setColor(hex);\n      this.survey.renderAll();\n      if (this.timeoutId) clearTimeout(this.timeoutId);\n      this.timeoutId = setTimeout(() => {\n        this.survey.fire(\"canvas:changes\");\n      }, 500);\n    }\n  },\n  watch: {\n    activeWidget() {\n      this.init();\n    }\n  }\n};\n</script>\n\n<style scoped>\n.input-field-panel-wraper {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: 100%;\n  padding-left: 7px;\n  box-sizing: border-box;\n}\n.input-field-text-container input {\n  background: #f8f8f5;\n  border: none;\n  line-height: 25px;\n  height: 25px;\n  width: 200px;\n  font-size: 12px;\n  text-align: center;\n}\n.items-container {\n  margin-top: 20px;\n  width: 100%;\n  padding: 0 20px;\n  box-sizing: border-box;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: column;\n}\n.panel-title {\n  color: #1d2d36;\n  font-size: 12px;\n  font-weight: 600;\n  text-align: center;\n  margin-top: 10px;\n}\n.colors-container {\n  display: flex;\n  background: #f8f8f5;\n  border-radius: 6px;\n  align-items: center;\n  width: 113px;\n  height: 30px;\n  justify-content: space-around;\n}\n\n.border-color {\n  display: flex;\n  cursor: pointer;\n  position: relative;\n}\n.picker-label {\n  width: 24px;\n  height: 24px;\n  border: 1px solid black;\n}\n.fz-conter {\n  margin-top: 12px;\n}\n.font-style,\n.text-align,\n.color {\n  display: flex;\n  justify-content: space-between;\n  width: 120px;\n}\n\n.label {\n  display: flex;\n  text-align: center;\n  justify-content: center;\n  min-width: 26px;\n  background: #f8f8f5;\n  height: 26px;\n  border-radius: 4px;\n  /* align-items: center; */\n}\n.font-style,\n.text-align {\n  margin-bottom: 20px;\n}\n\n.input-wrapper::after {\n  width: 15px;\n}\n.slider {\n  width: 200px;\n}\n.dropdown-radius img {\n  height: 22px;\n}\n.button-colors-container {\n  margin: 0 auto;\n  background: #f8f8f5;\n  display: flex;\n  width: 115px;\n  height: 30px;\n  display: flex;\n  border-radius: 5px;\n  align-items: center;\n  justify-content: space-around;\n}\n.active-dropdown-item {\n  background: #f8f8f5;\n  border: none;\n  line-height: 25px;\n  height: 25px;\n  width: 200px;\n  text-align: center;\n  padding: 0 5px;\n  box-sizing: border-box;\n  justify-content: space-between;\n  display: flex;\n  align-items: center;\n  border-radius: 5px;\n  font-size: 12px;\n}\n.active-dropdown-item div {\n  width: 100%;\n}\n.active-dropdown-item img {\n  height: 5px;\n}\n.required-field,\n.field-dropdown-container {\n  display: grid;\n  justify-items: center;\n  width: 250px;\n}\n.dropdown-label {\n  font-size: 12px;\n  margin-left: 5px;\n}\n.dropdown-menu {\n  padding: 5px 0;\n  border-radius: 9px;\n  box-shadow: 0 3px 6px rgb(0 0 0 / 16%);\n  max-height: 100vh;\n  overflow: auto;\n}\n.dropdown-item {\n  padding: 0 15px;\n  box-sizing: border-box;\n  font-size: 12px;\n  color: #000;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  width: 280px;\n  white-space: nowrap;\n}\n.dropdown-item:hover {\n  background: #f8f8f5;\n  color: #000;\n}\n\n.checkbbox {\n  box-sizing: border-box;\n  width: 18px;\n  height: 18px;\n  border-radius: 2px;\n  background: #f8f8f5;\n  position: relative;\n}\n.font-size {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-bottom: 20px;\n}\ninput[type=\"checkbox\"]:checked + .checkbbox {\n  background: #ffe000;\n}\n@media screen and (max-width: 990px) {\n  .fz-conter,\n  .field-dropdown-container {\n    margin-top: 0;\n  }\n  .context-panel-group {\n    padding: 0;\n  }\n  .field-dropdown-container,\n  .required-field {\n    width: auto;\n  }\n  .dropdown-item {\n    width: 200px;\n  }\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!./inputFieldWidgetPanel.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!./inputFieldWidgetPanel.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./inputFieldWidgetPanel.vue?vue&type=template&id=29a994d6&scoped=true&\"\nimport script from \"./inputFieldWidgetPanel.vue?vue&type=script&lang=js&\"\nexport * from \"./inputFieldWidgetPanel.vue?vue&type=script&lang=js&\"\nimport style0 from \"./inputFieldWidgetPanel.vue?vue&type=style&index=0&id=29a994d6&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  \"29a994d6\",\n  null\n  \n)\n\nexport default component.exports","var render = function render(){var _vm=this,_c=_vm._self._c;return _c('el-dropdown',{attrs:{\"trigger\":\"click\",\"placement\":'bottom'},on:{\"visible-change\":_vm.onHideDropdown}},[_c('div',{staticClass:\"el-dropdown-link\"},[_c('label',{staticClass:\"fonts-input-label\"},[_c('input',{directives:[{name:\"model\",rawName:\"v-model\",value:(_vm.fontInput),expression:\"fontInput\"}],ref:\"fontFamilyInput\",staticClass:\"fonts-input\",attrs:{\"placeholder\":_vm.activeFontFamily,\"type\":\"text\"},domProps:{\"value\":(_vm.fontInput)},on:{\"input\":function($event){if($event.target.composing)return;_vm.fontInput=$event.target.value}}}),_c('img',{staticClass:\"fonts-input-arrow\",attrs:{\"alt\":\"img\",\"g\":\"\",\"src\":require(\"@/assets/img/select_arrow.svg\")}})]),_c('div',{staticClass:\"field-name\"},[_vm._v(\"font\")])]),_c('el-dropdown-menu',{staticClass:\"dropdown-menu-wraper\",attrs:{\"slot\":\"dropdown\"},slot:\"dropdown\"},[_c('el-dropdown-item',[_vm._l((_vm.fontFamilyList),function(n,idx){return _c('div',{key:idx,staticClass:\"font-family-item\",on:{\"click\":function($event){return _vm.onChangeFontFamily(n)}}},[(n.__typename === 'font')?_c('img',{attrs:{\"alt\":\"img\",\"src\":n.preview}}):_c('div',{staticClass:\"font-family-name\",class:{ 'custom-font': n.__typename === 'upload_my_font' },style:({ 'font-family': n.name })},[_vm._v(\" \"+_vm._s(n.name)+\" \")])])}),_c('div',{directives:[{name:\"show\",rawName:\"v-show\",value:(!_vm.fontFamilyList.length && !_vm.showLoader),expression:\"!fontFamilyList.length && !showLoader\"}],staticClass:\"t-not-found\"},[_vm._v(\" font \"+_vm._s(_vm.fontInput)+\" not found \")]),_c('div',{staticClass:\"loader\"},[_c('div',{ref:\"infinityScrollTrigger\",attrs:{\"id\":\"scroll-trigger\"}}),_c('preloader',{staticClass:\"preloader\",attrs:{\"visible\":_vm.showLoader}})],1)],2)],1)],1)\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <el-dropdown\n    trigger=\"click\"\n    :placement=\"'bottom'\"\n    @visible-change=\"onHideDropdown\"\n  >\n    <div class=\"el-dropdown-link\">\n      <label class=\"fonts-input-label\">\n        <input\n          :placeholder=\"activeFontFamily\"\n          class=\"fonts-input\"\n          type=\"text\"\n          v-model=\"fontInput\"\n          ref=\"fontFamilyInput\"\n        />\n        <img\n          alt=\"img\"\n          g\n          class=\"fonts-input-arrow\"\n          src=\"@/assets/img/select_arrow.svg\"\n        />\n      </label>\n      <div class=\"field-name\">font</div>\n    </div>\n    <el-dropdown-menu class=\"dropdown-menu-wraper\" slot=\"dropdown\">\n      <el-dropdown-item>\n        <div\n          class=\"font-family-item\"\n          v-for=\"(n, idx) of fontFamilyList\"\n          :key=\"idx\"\n          @click=\"onChangeFontFamily(n)\"\n        >\n          <img alt=\"img\" v-if=\"n.__typename === 'font'\" :src=\"n.preview\" />\n          <div\n            class=\"font-family-name\"\n            v-else\n            :style=\"{ 'font-family': n.name }\"\n            :class=\"{ 'custom-font': n.__typename === 'upload_my_font' }\"\n          >\n            {{ n.name }}\n          </div>\n        </div>\n        <div class=\"t-not-found\" v-show=\"!fontFamilyList.length && !showLoader\">\n          font {{ fontInput }} not found\n        </div>\n        <div class=\"loader\">\n          <div ref=\"infinityScrollTrigger\" id=\"scroll-trigger\"></div>\n          <preloader class=\"preloader\" :visible=\"showLoader\" />\n        </div>\n      </el-dropdown-item>\n    </el-dropdown-menu>\n  </el-dropdown>\n</template>\n\n<script>\nimport preloader from \"@/components/preloaderMenu\";\nimport { fetchCanvasFont } from \"@/helpers/fontsHelper\";\nimport rating from \"@/services/catalog/RatingsService\";\nimport { mapGetters } from \"vuex\";\nexport default {\n  name: \"PilFontFamilyInput\",\n  props: [\"activeFontFamily\"],\n  components: {\n    preloader\n  },\n  data() {\n    return {\n      fontFamilyList: [],\n      allFonts: [],\n      fontsListMod: [],\n      currentPage: 0,\n      maxPerPage: 50,\n      fontInput: \"\",\n      showLoader: false,\n      disableObserve: false\n    };\n  },\n  computed: {\n    ...mapGetters({\n      fonts: \"feed/fonts\",\n      myFonts: \"customContent/myFonts\",\n      device: \"workSpace/device\",\n      interactionMode: \"workSpace/interactionMode\",\n      survey: \"workSpace/survey\",\n      canvas: \"workSpace/canvas\"\n    }),\n    _canvas() {\n      return this.interactionMode ? this.survey : this.canvas;\n    }\n  },\n  mounted() {\n    const serializedMyFonts = this.myFonts.map(f => ({\n      ...f,\n      name: f.name.replace(/\\.ttf/g, \"\").replace(/\\.otf/g, \"\")\n    }));\n    this.fontsListMod = this.allFonts = [...serializedMyFonts, ...this.fonts];\n    this.scrollTrigger();\n  },\n  methods: {\n    async onChangeFontFamily(fontFamily) {\n      await fetchCanvasFont(fontFamily.name, { isActiveObj: false });\n      this._canvas.fire(\"canvas:changes\");\n      this.$emit(\"on-change-font-family\", fontFamily);\n      if (fontFamily.__typename === \"font\") {\n        rating.incrementRating(fontFamily.id, \"font\");\n      }\n    },\n    onHideDropdown(v) {\n      if (!v) this.$refs.fontFamilyInput.blur();\n    },\n    scrollTrigger() {\n      this.observer = new IntersectionObserver(entries => {\n        entries.forEach(async entry => {\n          if (entry.intersectionRatio > 0) {\n            await this.fetchPathFontsList();\n          }\n        });\n      });\n      this.observer.observe(this.$refs.infinityScrollTrigger);\n    },\n    async fetchPathFontsList() {\n      if (this.disableObserve) {\n        this.disableObserve = false;\n        return;\n      }\n      this.showLoader = true;\n      const partFontList = this.fontsListMod.slice(\n        this.maxPerPage * this.currentPage,\n        this.maxPerPage * this.currentPage + this.maxPerPage\n      );\n      const promiseList = [];\n      for (let f of partFontList) {\n        if (f.__typename === \"upload_my_font\") {\n          promiseList.push(fetchCanvasFont(f.name, { isActiveObj: false }));\n        }\n      }\n      await Promise.all(promiseList);\n      this.currentPage += 1;\n      this.showLoader = false;\n      this.fontFamilyList.push(...partFontList);\n    }\n  },\n  watch: {\n    fontInput(value) {\n      this.disableObserve = false;\n      this.currentPage = 0;\n      this.fontFamilyList = [];\n      if (!value) this.fontsListMod = this.allFonts;\n      else\n        this.fontsListMod = this.allFonts.filter(f =>\n          f.name.toLowerCase().includes(this.fontInput.toLowerCase())\n        );\n      this.fetchPathFontsList();\n      this.disableObserve = true;\n    }\n  }\n};\n</script>\n\n<style scoped>\n.el-dropdown-link {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n.fonts-input {\n  padding: 0 20px 0 5px;\n  box-sizing: border-box;\n  width: 200px;\n  height: 25px;\n  background: #f8f8f5;\n  border: none;\n  text-align: center;\n  color: #1d2d36;\n  font-size: 12px;\n  border-radius: 7px;\n}\n.fonts-input-arrow {\n  cursor: pointer;\n  position: absolute;\n  right: 0;\n  top: 1px;\n  padding: 9px 5px;\n}\n.dropdown-menu-wraper {\n  margin: 0;\n  padding: 0;\n}\n.dropdown-menu-wraper >>> .el-dropdown-menu__item:focus,\n.dropdown-menu-wraper >>> .el-dropdown-menu__item:not(.is-disabled):hover {\n  background-color: white !important;\n  color: black !important;\n}\n.lang-cecker-wraper {\n  display: flex;\n  align-items: center;\n  /* width: 100%; */\n}\n.lang-cecker-wraper span {\n  font-size: 12px;\n  margin-right: 4px;\n}\n.checkbbox {\n  box-sizing: border-box;\n  width: 18px;\n  height: 18px;\n  border-radius: 2px;\n  border: 2px solid black;\n  position: relative;\n  margin: 3px 5px;\n}\n.is-checked {\n  display: none;\n  position: absolute;\n  top: -8px;\n  left: -3px;\n  width: 24px;\n  height: 24px;\n}\ninput[type=\"checkbox\"]:checked + .checkbbox > .is-checked {\n  display: block;\n}\n.font-family-item {\n  display: flex;\n  padding: 0 7px;\n  cursor: pointer;\n}\n.font-family-item:hover {\n  background: #f8f8f5;\n}\n.font-family-name {\n  font-size: 14px;\n  line-height: 22px;\n  min-width: 100%;\n  overflow: hidden;\n  white-space: nowrap;\n  margin-right: 10px;\n}\n.t-not-found {\n  height: auto;\n  margin: 0;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 100px;\n}\n.preloader {\n  position: absolute;\n  height: 100px;\n}\n.loader {\n  height: 5px;\n  position: relative;\n}\n.custom-font {\n  color: #ffe000;\n}\n.dropdown-menu-wraper {\n  min-height: 200px;\n  height: calc(100vh - 350px);\n  max-height: 1000px;\n  width: 280px;\n  border-radius: 10px;\n  overflow: auto;\n}\n.dropdown-menu-wraper >>> .el-dropdown-menu__item {\n  padding: 0;\n}\n.font-family-item img {\n  padding: 3px 0;\n  max-height: 16px;\n}\n@media screen and (max-width: 990px) {\n  .dropdown-menu-wraper {\n    width: 250px;\n    max-height: calc(100vh - 150px);\n  }\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!./fontFamilyInput.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!./fontFamilyInput.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./fontFamilyInput.vue?vue&type=template&id=438dff51&scoped=true&\"\nimport script from \"./fontFamilyInput.vue?vue&type=script&lang=js&\"\nexport * from \"./fontFamilyInput.vue?vue&type=script&lang=js&\"\nimport style0 from \"./fontFamilyInput.vue?vue&type=style&index=0&id=438dff51&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  \"438dff51\",\n  null\n  \n)\n\nexport default component.exports","module.exports = __webpack_public_path__ + \"img/Rectangle_radius.a4dd30ac.svg\";"],"sourceRoot":""}