{"version":3,"sources":["webpack:///./src/components/common/CustomTextArea.vue?6a28","webpack:///./src/components/common/CustomTextArea.vue?9e73","webpack:///src/components/common/CustomTextArea.vue","webpack:///./src/components/common/CustomTextArea.vue?0ab6","webpack:///./src/components/common/CustomTextArea.vue"],"names":["render","_vm","this","_h","$createElement","_c","_self","class","isCarDescription","directives","name","rawName","value","expression","staticClass","attrs","label","optional","error","ref","staticStyle","inputValue","placeholder","rows","on","trimInputValue","textareaFocus","textareaBlur","model","callback","$$v","_v","_e","_s","helperText","staticRenderFns","components","FloatLabel","Banner","inheritAttrs","prop","event","data","description","onFocus","props","type","Number","String","default","Boolean","isFocus","methods","emitInputValue","initTextPlaceholder","$emit","replace","$nextTick","component"],"mappings":"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","file":"js/chunk-5f6e6ee9.4ac88b8c.js","sourcesContent":["export * from \"-!../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./CustomTextArea.vue?vue&type=style&index=0&lang=scss&\"","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{class:[(\"\" + (_vm.isCarDescription ? 'row' : ''))]},[_c('div',{class:[(\"\" + (_vm.isCarDescription ? 'col-md-6 col-12' : ''))]},[_c('div',{directives:[{name:\"click-outside\",rawName:\"v-click-outside\",value:(_vm.textareaBlur),expression:\"textareaBlur\"}],staticClass:\"wrapper\"},[_c('FloatLabel',{class:[(\"\" + (_vm.isCarDescription ? 'car-description-label' : ''))],attrs:{\"label\":_vm.label,\"optional\":_vm.optional}},[_c('div',{staticClass:\"text-area-wrapper\",class:[(\"\" + (_vm.error ? 'invalid' : ''))]},[_c('b-form-textarea',{ref:\"carDescription\",staticClass:\"shadow-none form-control text-area-custom custom-scrollbar\",class:[(\"\" + (_vm.error ? 'invalid' : ''))],staticStyle:{\"height\":\"auto !important\"},attrs:{\"id\":\"textarea\",\"name\":_vm.name,\"no-resize\":\"\",\"spellcheck\":\"false\",\"placeholder\":!_vm.inputValue ? _vm.placeholder : '',\"rows\":_vm.rows,\"autocomplete\":\"off\"},on:{\"input\":_vm.trimInputValue,\"focus\":_vm.textareaFocus,\"blur\":_vm.textareaBlur},model:{value:(_vm.inputValue),callback:function ($$v) {_vm.inputValue=$$v},expression:\"inputValue\"}})],1),(!_vm.inputValue && _vm.isCarDescription)?_c('div',{staticClass:\"custom-placeholder\"},[_c('p',[_vm._v(\"Don't forget to add:\")]),_c('ul',[_c('li',[_c('strong',[_vm._v(\"Any damages\")]),_vm._v(\", such as mechanical issues, scratches or dents\")]),_c('li',[_c('strong',[_vm._v(\"Extras\")]),_vm._v(\", such as tint, sunroof\")])])]):_vm._e()]),_c('div',{staticClass:\"fs-12 text-right mb-2 mt-n3 pr-2 err-text\"},[_vm._v(\" \"+_vm._s(_vm.error ? _vm.helperText : \"\")+\" \")])],1)]),(_vm.inputValue && _vm.isCarDescription)?_c('b-col',{staticClass:\"car-description-banner\",attrs:{\"cols\":\"12\",\"md\":\"6\"}},[_c('Banner',{attrs:{\"iconClass\":\"reminder-icon\"}},[_c('p',[_vm._v(\"Don't forget to add:\")]),_c('ul',[_c('li',[_c('strong',[_vm._v(\"Any damages\")]),_vm._v(\", such as mechanical issues, scratches or dents\")]),_c('li',[_c('strong',[_vm._v(\"Extras\")]),_vm._v(\", such as tint, sunroof\")])])])],1):_vm._e()],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <div :class=\"[`${isCarDescription ? 'row' : ''}`]\">\n    <div :class=\"[`${isCarDescription ? 'col-md-6 col-12' : ''}`]\">\n      <div class=\"wrapper\" v-click-outside=\"textareaBlur\">\n        <FloatLabel :label=\"label\" :optional=\"optional\" :class=\"[`${isCarDescription ? 'car-description-label' : ''}`]\">\n          <div :class=\"[`${error ? 'invalid' : ''}`]\" class=\"text-area-wrapper\">\n            <b-form-textarea\n              id=\"textarea\"\n              class=\"shadow-none form-control text-area-custom custom-scrollbar\"\n              :name=\"name\"\n              no-resize\n              spellcheck=\"false\"\n              :placeholder=\"!inputValue ? placeholder : ''\"\n              v-model=\"inputValue\"\n              @input=\"trimInputValue\"\n              :rows=\"rows\"\n              :class=\"[`${error ? 'invalid' : ''}`]\"\n              autocomplete=\"off\"\n              style=\"height: auto !important\"\n              @focus=\"textareaFocus\"\n              @blur=\"textareaBlur\"\n              ref=\"carDescription\"\n            ></b-form-textarea>\n          </div>\n          <!-- Custom rich-content placeholder -->\n          <div\n            v-if=\"!inputValue && isCarDescription\"\n            class=\"custom-placeholder\"\n          >\n            <p>Don't forget to add:</p>\n            <ul>\n              <li><strong>Any damages</strong>, such as mechanical issues, scratches or dents</li>\n              <li><strong>Extras</strong>, such as tint, sunroof</li>\n            </ul>\n          </div>\n        </FloatLabel>\n        <div class=\"fs-12 text-right mb-2 mt-n3 pr-2 err-text\">\n          {{ error ? helperText : \"\" }}\n        </div>\n      </div>\n    </div>\n    <b-col cols=\"12\" md=\"6\" v-if=\"inputValue && isCarDescription\" class=\"car-description-banner\">\n      <Banner iconClass=\"reminder-icon\">\n        <p>Don't forget to add:</p>\n        <ul>\n          <li><strong>Any damages</strong>, such as mechanical issues, scratches or dents</li>\n          <li><strong>Extras</strong>, such as tint, sunroof</li>\n        </ul>\n      </Banner>\n    </b-col>\n  </div>\n</template>\n<script>\nexport default {\n  components: {\n    FloatLabel: () => import(\"./FloatLabel.vue\"),\n    Banner: () => import(\"../../components/photo-upload/Banner.vue\"),\n  },\n  name: \"CustomTextArea\",\n  inheritAttrs: false,\n  model: {\n    prop: \"description\",\n    event: \"change\",\n  },\n  data() {\n    return {\n      inputValue: this.description,\n      onFocus: false,\n    };\n  },\n  props: {\n    description: {\n      type: [Number, String],\n      default: () => \"\",\n    },\n    label: String,\n    name: {\n      type: String,\n      default: () => \"\",\n    },\n    rows: {\n      type: String,\n      default: () => \"5\",\n    },\n    placeholder: {\n      type: String,\n      default: () => \"\",\n    },\n    error: Boolean,\n    helperText: String,\n    isFocus: Boolean,\n    optional: Boolean,\n    isCarDescription: {\n      type: Boolean,\n      default: () => false,\n    },\n  },\n  methods: {\n    textareaFocus() {\n      this.onFocus = true;\n    },\n    textareaBlur() {\n      this.onFocus = false;\n      this.emitInputValue();\n    },\n    emitInputValue() {\n      if (this.inputValue !== this.initTextPlaceholder) {\n        this.$emit(\"change\", this.inputValue);\n      }\n    },\n    trimInputValue() {\n      const cursorPos = this.$refs.carDescription.selectionStart;\n\n      this.inputValue = this.inputValue.replace(/^\\s+|\\s+$/g, '');\n\n      // Restore the cursor position\n      this.$nextTick(() => {\n        this.$refs.carDescription.setSelectionRange(cursorPos, cursorPos);\n      });\n    }\n  },\n};\n</script>\n\n<style lang=\"scss\">\n$gray-color: #ced4da;\nselect.form-control.invalid,\ninput.form-control.invalid {\n  border-color: red !important ;\n}\n.invalid {\n  border-color: red !important;\n}\n.err-text {\n  color: red;\n  font-style: italic;\n  min-height: 16px;\n}\n.text-area-wrapper {\n  border: 1px solid $gray-color;\n  border-radius: 8px;\n  position: relative;\n\n  .text-area-custom::placeholder {\n    color: #989898 !important;\n    font-weight: 600 !important;\n  }\n\n  .form-control {\n    border: none !important;\n    padding: 0.575rem 0.75rem;\n    &.blank {\n      color: #989898 !important;\n    }\n  }\n}\n.wrapper {\n  position: relative;\n}\n.custom-placeholder {\n  position: absolute;\n  top: 16px; \n  left: 16px;\n  z-index: 0;\n  pointer-events: none;\n  color: #989898 !important;\n  line-height: 1.5;\n  max-width: 408px;\n  font-size: 15px;\n  p {\n    margin-bottom: 5px;\n  }\n  ul {\n    padding-left: 20px;\n    margin: 0;\n    li {\n      margin-bottom: 5px;\n    }\n    strong {\n      font-family: 'Avenir Next LT W05 Bold';\n    }\n  }\n}\n.car-description-banner {\n  margin-top: -28px;\n}\n.banner {\n  align-items: flex-start !important;\n}\n.banner-content:has(p) {\n  font-size: 16px;\n  font-family: \"Avenir Next LT W05 Regular\";\n  font-weight: 600;\n  p {\n    margin-bottom: 5px;\n  }\n  ul {\n    padding-left: 20px;\n    margin: 0;\n    li {\n      margin-bottom: 10px;\n    }\n    strong {\n      font-family: 'Avenir Next LT W05 Bold';\n    }\n  }\n}\n@media screen and (min-width: 768px ) {\n  .car-description-banner {\n    margin-top: -20px;\n  }\n  .car-description-label span {\n    top: -1.05em;\n  }\n  .banner:has(p) {\n    padding: 13px;\n  }\n}\n@media screen and (min-width: 991px ) {\n  .car-description-label span {\n    top: -.5em;\n  }\n  .car-description-banner {\n    margin-top: 0;\n    max-width: 506px;\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!./CustomTextArea.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!./CustomTextArea.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./CustomTextArea.vue?vue&type=template&id=1f55d9e3&\"\nimport script from \"./CustomTextArea.vue?vue&type=script&lang=js&\"\nexport * from \"./CustomTextArea.vue?vue&type=script&lang=js&\"\nimport style0 from \"./CustomTextArea.vue?vue&type=style&index=0&lang=scss&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  null,\n  null\n  \n)\n\nexport default component.exports"],"sourceRoot":""}