{"version":3,"sources":["webpack:///./src/components/common/CustomTextArea.vue?6a28","webpack:///./src/components/common/CustomTextArea.vue?7643","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","$event","trimInputValue","validateLength","textareaFocus","validateDescription","textareaBlur","validateMaxlength","model","callback","$$v","_v","_e","_s","helperText","staticRenderFns","components","FloatLabel","Banner","inheritAttrs","prop","event","data","description","onFocus","isShowErr","props","type","Number","String","default","Boolean","isFocus","methods","$emit","length","emitInputValue","initTextPlaceholder","replace","$nextTick","component"],"mappings":"kHAAA,W,yCCAA,IAAIA,EAAS,WAAa,IAAIC,EAAIC,KAASC,EAAGF,EAAIG,eAAmBC,EAAGJ,EAAIK,MAAMD,IAAIF,EAAG,OAAOE,EAAG,MAAM,CAACE,MAAM,CAAQN,EAAIO,iBAAmB,MAAQ,KAAO,CAACH,EAAG,MAAM,CAACE,MAAM,CAAQN,EAAIO,iBAAmB,kBAAoB,KAAO,CAACH,EAAG,MAAM,CAACI,WAAW,CAAC,CAACC,KAAK,gBAAgBC,QAAQ,kBAAkBC,MAAOX,EAAgB,aAAEY,WAAW,iBAAiBC,YAAY,WAAW,CAACT,EAAG,aAAa,CAACU,MAAM,CAAC,MAAQd,EAAIe,MAAM,SAAWf,EAAIgB,WAAW,CAACZ,EAAG,MAAM,CAACS,YAAY,oBAAoBP,MAAM,CAAQN,EAAIiB,MAAQ,UAAY,KAAO,CAACb,EAAG,kBAAkB,CAACc,IAAI,iBAAiBL,YAAY,6DAA6DP,MAAM,CAAQN,EAAIiB,MAAQ,UAAY,IAAME,YAAY,CAAC,OAAS,mBAAmBL,MAAM,CAAC,GAAK,WAAW,KAAOd,EAAIS,KAAK,YAAY,GAAG,WAAa,QAAQ,YAAeT,EAAIoB,WAA+B,GAAlBpB,EAAIqB,YAAiB,KAAOrB,EAAIsB,KAAK,aAAe,OAAOC,GAAG,CAAC,MAAQ,SAASC,GAAQxB,EAAIyB,gBAAkBzB,EAAI0B,eAAeF,IAAS,MAAQ,SAASA,GAAQxB,EAAI2B,eAAiB3B,EAAI4B,oBAAoBJ,IAAS,KAAOxB,EAAI6B,aAAa,MAAQ,SAASL,GAAQ,OAAOxB,EAAI8B,kBAAkBN,KAAUO,MAAM,CAACpB,MAAOX,EAAc,WAAEgC,SAAS,SAAUC,GAAMjC,EAAIoB,WAAWa,GAAKrB,WAAW,iBAAiB,IAAKZ,EAAIoB,YAAcpB,EAAIO,iBAAkBH,EAAG,MAAM,CAACS,YAAY,sBAAsB,CAACT,EAAG,IAAI,CAACJ,EAAIkC,GAAG,0BAA0B9B,EAAG,KAAK,CAACA,EAAG,KAAK,CAACA,EAAG,SAAS,CAACJ,EAAIkC,GAAG,iBAAiBlC,EAAIkC,GAAG,qDAAqD9B,EAAG,KAAK,CAACA,EAAG,SAAS,CAACJ,EAAIkC,GAAG,YAAYlC,EAAIkC,GAAG,iCAAiClC,EAAImC,OAAO/B,EAAG,MAAM,CAACS,YAAY,kDAAkD,CAACb,EAAIkC,GAAG,IAAIlC,EAAIoC,GAAGpC,EAAIiB,MAAQjB,EAAIqC,WAAa,IAAI,QAAQ,KAAMrC,EAAIoB,YAAcpB,EAAIO,iBAAkBH,EAAG,QAAQ,CAACS,YAAY,yBAAyBC,MAAM,CAAC,KAAO,KAAK,GAAK,MAAM,CAACV,EAAG,SAAS,CAACU,MAAM,CAAC,UAAY,kBAAkB,CAACV,EAAG,IAAI,CAACJ,EAAIkC,GAAG,0BAA0B9B,EAAG,KAAK,CAACA,EAAG,KAAK,CAACA,EAAG,SAAS,CAACJ,EAAIkC,GAAG,iBAAiBlC,EAAIkC,GAAG,qDAAqD9B,EAAG,KAAK,CAACA,EAAG,SAAS,CAACJ,EAAIkC,GAAG,YAAYlC,EAAIkC,GAAG,kCAAkC,GAAGlC,EAAImC,MAAM,IACpmEG,EAAkB,GCqDtB,G,gFAAA,CACEC,WAAY,CACVC,WAAY,WAAhB,wDACIC,OAAQ,WAAZ,yDAEEhC,KAAM,iBACNiC,cAAc,EACdX,MAAO,CACLY,KAAM,cACNC,MAAO,UAETC,KAXF,WAYI,MAAO,CACLzB,WAAYnB,KAAK6C,YACjBC,SAAS,EACTC,WAAW,IAGfC,MAAO,CACLH,YAAa,CACXI,KAAM,CAACC,OAAQC,QACfC,QAAS,WAAf,WAEItC,MAAOqC,OACP3C,KAAM,CACJyC,KAAME,OACNC,QAAS,WAAf,WAEI/B,KAAM,CACJ4B,KAAME,OACNC,QAAS,WAAf,YAEIhC,YAAa,CACX6B,KAAME,OACNC,QAAS,WAAf,WAEIpC,MAAOqC,QACPjB,WAAYe,OACZG,QAASD,QACTtC,SAAUsC,QACV/C,iBAAkB,CAChB2C,KAAMI,QACND,QAAS,WAAf,YAGEG,QAAS,CACP1B,kBADJ,WAEM7B,KAAKwD,MAAM,QAASxD,KAAKmB,aAE3BQ,oBAJJ,WAKyB,yCAAf3B,KAAKc,QACPd,KAAK+C,WAAY,EACjB/C,KAAKwD,MAAM,QAASxD,KAAK+C,aAG7BtB,eAVJ,WAWyB,yCAAfzB,KAAKc,OAAoDd,KAAKmB,WAAWsC,QAAU,GAAKzD,KAAKmB,WAAWsC,OAAS,KACnHzD,KAAK+C,WAAY,EACjB/C,KAAKwD,MAAM,QAASxD,KAAK+C,YACjC,+GACQ/C,KAAK+C,WAAY,EACjB/C,KAAKwD,MAAM,QAASxD,KAAK+C,aAG7BrB,cAnBJ,WAoBM1B,KAAK8C,SAAU,GAEjBlB,aAtBJ,WAuBM5B,KAAK8C,SAAU,EACf9C,KAAK0D,kBAEPA,eA1BJ,WA2BU1D,KAAKmB,aAAenB,KAAK2D,qBAC3B3D,KAAKwD,MAAM,SAAUxD,KAAKmB,aAG9BK,eA/BJ,WA+BA,WACA,2CAEMxB,KAAKmB,WAAanB,KAAKmB,WAAWyC,QAAQ,aAAc,IAGxD5D,KAAK6D,WAAU,WACb,EAAR,mDCzIuW,I,wBCQnWC,EAAY,eACd,EACAhE,EACAuC,GACA,EACA,KACA,KACA,MAIa,aAAAyB,E","file":"js/chunk-5f6e6ee9.52767f5b.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',{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\":function($event){_vm.trimInputValue && _vm.validateLength($event)},\"focus\":function($event){_vm.textareaFocus && _vm.validateDescription($event)},\"blur\":_vm.textareaBlur,\"keyup\":function($event){return _vm.validateMaxlength($event)}},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 pb-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\">\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 && validateLength($event)\"\n              :rows=\"rows\"\n              :class=\"[`${error ? 'invalid' : ''}`]\"\n              autocomplete=\"off\"\n              style=\"height: auto !important\"\n              @focus=\"textareaFocus && validateDescription($event)\"\n              @blur=\"textareaBlur\"\n              @keyup=\"validateMaxlength($event)\"\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 pb-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      isShowErr: 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    validateMaxlength() {\n      this.$emit(\"keyup\", this.inputValue);\n    },\n    validateDescription() {\n      if (this.label === 'Car description - Damages and extras') {\n        this.isShowErr = true;\n        this.$emit(\"focus\", this.isShowErr);\n      }\n    },\n    validateLength() {\n      if (this.label === 'Car description - Damages and extras' && this.inputValue.length >= 1 && this.inputValue.length < 2000) {\n        this.isShowErr = false;\n        this.$emit(\"input\", this.isShowErr);\n      } else if (this.label === 'Car description - Damages and extras' && (this.inputValue.length < 1 || this.inputValue.length >= 2000)) {\n        this.isShowErr = true;\n        this.$emit(\"input\", this.isShowErr);\n      }\n    },\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  margin-bottom: 20px;\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: -10px;\n  }\n  .banner:has(p) {\n    padding: 13px;\n  }\n}\n@media screen and (min-width: 991px ) {\n  .car-description-banner {\n    margin-top: 0;\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=4d39dcc0&\"\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":""}