{"version":3,"sources":["webpack:///./src/components/ClickToPay/template/CieloInputV2.vue?1f84","webpack:///./src/components/ClickToPay/template/CieloInputV2.vue","webpack:///src/components/ClickToPay/template/CieloInputV2.vue","webpack:///./src/components/ClickToPay/template/CieloInputV2.vue?6810","webpack:///./src/components/ClickToPay/template/CieloInputV2.vue?b2a2"],"names":["render","_vm","this","_c","_self","staticClass","class","customClass","active","handleOnFocus","editing","error","borderless","dropdownisopen","dropdownIsOpen","value","placeholder","_v","_s","label","_e","mask","attrs","maxlength","type","name","disabled","on","handleOnBlur","$event","$emit","domProps","target","staticRenderFns","mounted","autofocus","$el","querySelector","focus","props","String","default","required","Number","Infinity","Array","Boolean","data","watch","methods","component"],"mappings":"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","file":"js/cielo-input.js","sourcesContent":["export * from \"-!../../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../../../node_modules/css-loader/index.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!./CieloInputV2.vue?vue&type=style&index=0&id=8fc6da36&prod&lang=scss&scoped=true&\"","var render = function render(){var _vm=this,_c=_vm._self._c;return _c('div',{staticClass:\"cielo-input\"},[_c('div',{staticClass:\"cielo-input-container\",class:[_vm.customClass, { active: !_vm.handleOnFocus, editing: _vm.editing, error: _vm.error, borderless: _vm.borderless, dropdownisopen: _vm.dropdownIsOpen }]},[(_vm.value || !_vm.placeholder)?_c('label',[_vm._v(_vm._s(_vm.label))]):_vm._e(),(_vm.mask)?_c('the-mask',{staticClass:\"form-control\",attrs:{\"autocomplete\":\"on\",\"max-length\":_vm.maxlength,\"type\":_vm.type,\"value\":_vm.value,\"name\":_vm.name,\"mask\":_vm.mask,\"placeholder\":_vm.placeholder,\"disabled\":_vm.disabled,\"aria-label\":_vm.label,\"aria-invalid\":_vm.error ? true : false,\"aria-describedby\":'error-'+_vm.name},on:{\"focus\":_vm.handleOnFocus,\"blur\":_vm.handleOnBlur,\"input\":function($event){return _vm.$emit('input', $event)}}}):_c('input',{staticClass:\"form-control\",attrs:{\"autocomplete\":\"on\",\"maxLength\":_vm.maxlength,\"type\":_vm.type,\"name\":_vm.name,\"placeholder\":_vm.placeholder,\"disabled\":_vm.disabled,\"aria-label\":_vm.label,\"aria-invalid\":_vm.error ? true : false,\"aria-describedby\":'error-'+_vm.name},domProps:{\"value\":_vm.value},on:{\"focus\":_vm.handleOnFocus,\"blur\":_vm.handleOnBlur,\"input\":function($event){return _vm.$emit('input', $event.target.value)},\"change\":function($event){return _vm.$emit('change', $event.target.value)}}})],1),(_vm.error)?_c('small',{staticClass:\"error-description\",attrs:{\"id\":'error-'+_vm.name,\"tabindex\":\"0\"}},[_vm._v(_vm._s(_vm.error))]):_vm._e()])\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\r\n    <div class=\"cielo-input\">\r\n        <div\r\n            class=\"cielo-input-container\"\r\n            :class=\"[customClass, { active: !handleOnFocus, editing: editing, error: error, borderless: borderless, dropdownisopen: dropdownIsOpen }]\"\r\n        >\r\n            <label v-if=\"value || !placeholder\">{{ label }}</label>\r\n            <the-mask\r\n                v-if=\"mask\"\r\n                class=\"form-control\"\r\n                autocomplete=\"on\"\r\n                :max-length=\"maxlength\"\r\n                :type=\"type\"\r\n                :value=\"value\"\r\n                :name=\"name\"\r\n                @focus=\"handleOnFocus\"\r\n                @blur=\"handleOnBlur\"\r\n                :mask=\"mask\"\r\n                :placeholder=\"placeholder\"\r\n                :disabled=\"disabled\"\r\n                @input=\"$emit('input', $event)\"\r\n                :aria-label=\"label\"\r\n                :aria-invalid=\"error ? true : false\"\r\n                :aria-describedby=\"'error-'+name\"\r\n            />\r\n            <input\r\n                v-else\r\n                class=\"form-control\"\r\n                autocomplete=\"on\"\r\n                :maxLength=\"maxlength\"\r\n                :type=\"type\"\r\n                :value=\"value\"\r\n                :name=\"name\"\r\n                @focus=\"handleOnFocus\"\r\n                @blur=\"handleOnBlur\"\r\n                :placeholder=\"placeholder\"\r\n                :disabled=\"disabled\"\r\n                @input=\"$emit('input', $event.target.value)\"\r\n                @change=\"$emit('change', $event.target.value)\"\r\n                :aria-label=\"label\"\r\n                :aria-invalid=\"error ? true : false\"\r\n                :aria-describedby=\"'error-'+name\"\r\n            />\r\n        </div>\r\n        <small v-if=\"error\" :id=\"'error-'+name\" class=\"error-description\" tabindex=\"0\">{{ error }}</small>\r\n    </div>\r\n</template>\r\n\r\n<script>\r\nexport default {\r\n  mounted: function () {\r\n    if (this.autofocus)\r\n      this.$el.querySelector('input').focus();\r\n  },\r\n\r\n  props: {\r\n    label: {\r\n      type: String,\r\n      default: ''\r\n    },\r\n    name: {\r\n      type: String,\r\n      default: ''\r\n    },\r\n    type: {\r\n      type: String,\r\n      required: true\r\n    },\r\n    value: {\r\n      type: String,\r\n      default: ''\r\n    },\r\n    maxlength: {\r\n      type: Number,\r\n      default: Infinity\r\n    },\r\n    error: {\r\n      type: String,\r\n      default: null\r\n    },\r\n    mask: {\r\n      type: [Array, String],\r\n      default: null\r\n    },\r\n    borderless: {\r\n      type: Boolean,\r\n      default: false\r\n    },\r\n    autofocus: {\r\n      type: Boolean,\r\n      default: false\r\n    },\r\n    disabled: {\r\n      type: Boolean,\r\n      default: false\r\n    },\r\n    dropdownIsOpen: {\r\n      type: Boolean\r\n    },\r\n\tcustomClass: {\r\n\t  type: String,\r\n\t  default: '',\r\n\t}\r\n  },\r\n\r\n  data() {\r\n    return {\r\n      placeholder: this.label,\r\n      editing: false\r\n    };\r\n  },\r\n\r\n  watch: {\r\n    label(value) {\r\n      this.placeholder = value;\r\n    }\r\n  },\r\n\r\n  methods: {\r\n    handleOnFocus() {\r\n      if (!this.value)\r\n        this.placeholder = null;\r\n\r\n      this.editing = true;\r\n    },\r\n\r\n    handleOnBlur() {\r\n      if (!this.value)\r\n        this.placeholder = this.label;\r\n\r\n      this.editing = false;\r\n    }\r\n  }\r\n};\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.cielo-input {\r\n  margin-bottom: 20px;\r\n}\r\n\r\n.cielo-input-container {\r\n  position: relative;\r\n  height: 50px;\r\n  border-radius: 8px;\r\n  color: #231F20;\r\n  border: 1px solid #C5CED7;\r\n  background: #FFFFFF;\r\n\r\n\t&__phone {\r\n\t\t// max-width: 468px; TODO - descomentar quando ajustar o portador Estrangeiro e for para produção definitivo\r\n\t\twidth: 100%;\r\n\t\theight: 50px;\r\n\t\tright: 1px;\r\n\t\tposition: absolute;\r\n\t\t// border-top-left-radius: 0; TODO - descomentar quando ajustar o portador Estrangeiro e for para produção definitivo\r\n    \t// border-bottom-left-radius: 0; TODO - descomentar quando ajustar o portador Estrangeiro e for para produção definitivo\r\n\r\n\t\t@media screen and (max-width: 1024px) {\r\n\t\t\tright: 0;\r\n\t\t\ttop: 0;\r\n\t\t\tposition: relative;\r\n\t\t}\r\n\t}\r\n\r\n  label,\r\n  input {\r\n    padding: 8px;\r\n  }\r\n\r\n  label {\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    font-size: 10px;\r\n    color: #231F20;\r\n    background: none;\r\n    display: block;\r\n    width: 100%;\r\n    line-height: 10px;\r\n    transition: all .3s ease-in-out;\r\n  }\r\n\r\n  input {\r\n    border: none;\r\n    background: none;\r\n    width: 100%;\r\n    height: 100%;\r\n    color: #231F20;\r\n    font-size: 16px;\r\n    border-radius: 8px;\r\n\r\n    &:disabled {\r\n      cursor: not-allowed;\r\n      background-color: #F7F7F7;\r\n      border-radius: 8px;\r\n    }\r\n\r\n    &::-webkit-input-placeholder,\r\n    &::-ms-input-placeholder,\r\n    &::-ms-input-placeholder,\r\n    &::-moz-placeholder,\r\n    &::placeholder {\r\n      color: #6D7783;\r\n    }\r\n\r\n    &:not(:placeholder-shown) {\r\n      padding-top: 20px;\r\n      padding-bottom: 2px;\r\n    }\r\n  }\r\n\r\n  &.active {\r\n    border-color: #017CEB !important;\r\n\r\n    label {\r\n      color: #017CEB !important;\r\n    }\r\n\r\n    input {\r\n      color: #231F20;\r\n    }\r\n  }\r\n\r\n  &.editing {\r\n    border-color: #017CEB !important;\r\n\r\n    label {\r\n      color: #017CEB !important;\r\n    }\r\n\r\n    input {\r\n      color: #231F20 !important;\r\n    }\r\n  }\r\n\r\n  &.borderless {\r\n    border-radius: 0;\r\n    border-width: 0px 0px 1px;\r\n  }\r\n\r\n  &.dropdownisopen {\r\n    border-bottom-right-radius: 0;\r\n    border-color: #0774E7;\r\n  }\r\n}\r\n\r\n//Errors\r\n.error-description {\r\n  color: #DC392A;\r\n  font-size: 12px;\r\n  font-weight: 500;\r\n  padding-left: 8px;\r\n}\r\n\r\n.error,\r\n.active.error {\r\n  border-color: #DA3E14 !important;\r\n}\r\n\r\n.error label,\r\n.error input,\r\n.active.error label,\r\n.active.error input {\r\n  color: #DA3E14 !important;\r\n}\r\n\r\n//bloco de css para resolver questões de layout envolvendo o seletor de paises, classe sendo colocada na view de contato\r\n.phone-custom {\r\n  flex: 1 1;\r\n\r\n  .cielo-input-container {\r\n    border-top-left-radius: 0;\r\n    border-bottom-left-radius: 0;\r\n\r\n    &.error {\r\n      margin-bottom: 30px;\r\n    }\r\n  }\r\n\r\n  .error-description {\r\n    position: absolute;\r\n    top: 54px;\r\n    left: 0;\r\n  }\r\n\r\n}\r\n\r\n//Bloco de css para resolver problema que impactava todos os inputs de telefone sem as questões específicas do estrangeiro\r\n.phone-custom--v2 {\r\n    #error-Phone {\r\n        position: absolute;\r\n        left: 0;\r\n        top: 55px;\r\n    }\r\n}\r\n</style>\r\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!./CieloInputV2.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!./CieloInputV2.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./CieloInputV2.vue?vue&type=template&id=8fc6da36&scoped=true&\"\nimport script from \"./CieloInputV2.vue?vue&type=script&lang=js&\"\nexport * from \"./CieloInputV2.vue?vue&type=script&lang=js&\"\nimport style0 from \"./CieloInputV2.vue?vue&type=style&index=0&id=8fc6da36&prod&lang=scss&scoped=true&\"\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  \"8fc6da36\",\n  null\n  \n)\n\nexport default component.exports"],"sourceRoot":""}