{"version":3,"sources":["webpack:///./src/components/common/CustomTextArea.vue?6a28","webpack:///./src/components/common/CustomTextArea.vue?eb47","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","textareaDisabled","attrs","label","optional","error","ref","staticStyle","inputValue","placeholder","rows","on","trimInputValue","textareaFocus","textareaBlur","$event","validateMaxlength","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","$emit","emitInputValue","initTextPlaceholder","replace","$nextTick","component"],"mappings":"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","file":"js/chunk-5f6e6ee9.dbf7432a.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.textareaDisabled ? 'float-label' : '')),attrs:{\"label\":_vm.label,\"optional\":_vm.optional}},[_c('div',{staticClass:\"text-area-wrapper\",class:[(\"\" + (_vm.error ? 'invalid' : '')), (\"\" + (_vm.textareaDisabled ? 'disabled' : ''))]},[_c('b-form-textarea',{ref:\"description\",staticClass:\"shadow-none form-control text-area-custom\",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\",\"disabled\":_vm.textareaDisabled},on:{\"input\":_vm.trimInputValue,\"focus\":_vm.textareaFocus,\"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()]),(_vm.error)?_c('div',{staticClass:\"fs-12 text-right mb-2 mt-n3 pr-2 err-text\"},[_vm._v(\" \"+_vm._s(_vm.error ? _vm.helperText : \"\")+\" \")]):_vm._e()],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=\"`${textareaDisabled ? 'float-label' : ''}`\">\n          <div :class=\"[`${error ? 'invalid' : ''}`, `${textareaDisabled ? 'disabled' : ''}`]\" class=\"text-area-wrapper\">\n            <b-form-textarea\n              id=\"textarea\"\n              class=\"shadow-none form-control text-area-custom\"\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              :disabled=\"textareaDisabled\"\n              @focus=\"textareaFocus\"\n              @blur=\"textareaBlur\"\n              @keyup=\"validateMaxlength($event)\"\n              ref=\"description\"\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\" v-if=\"error\">\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    textareaDisabled: {\n      type: Boolean,\n      default: () => false,\n    },\n    isCarDescription: {\n      type: Boolean,\n      default: () => false,\n    },\n  },\n  methods: {\n    validateMaxlength() {\n      this.$emit(\"keyup\", this.inputValue);\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.description.selectionStart;\n\n      this.inputValue = this.inputValue.replace(/^\\s+|\\s+$/g, '');\n\n      // Restore the cursor position\n      this.$nextTick(() => {\n        this.$refs.description.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  &.disabled {\n    border: none;\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: -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=5eba8e6c&\"\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":""}