{"version":3,"sources":["webpack:///./src/components/UiInputText.vue?368c","webpack:///src/components/UiInputText.vue","webpack:///./src/components/UiInputText.vue?2a76","webpack:///./src/components/UiInputText.vue","webpack:///./src/components/UiInputText.vue?683d"],"names":["render","_vm","this","_h","$createElement","_c","_self","staticClass","$slots","_t","_e","_g","_b","directives","name","rawName","value","$attrs","expression","ref","class","inputClasses","attrs","type","listeners","staticPlaceholder","_v","_s","placeholder","staticRenderFns","components","UiInputPasswordTypeSwitcher","inheritAttrs","props","Boolean","default","String","includes","computed","before","after","isPasswordReveal","hasValue","toString","length","input","component"],"mappings":"yHAAA,IAAIA,EAAS,WAAa,IAAIC,EAAIC,KAASC,EAAGF,EAAIG,eAAmBC,EAAGJ,EAAIK,MAAMD,IAAIF,EAAG,OAAOE,EAAG,MAAM,CAACE,YAAY,2BAA2B,CAAEN,EAAIO,OAAa,OAAEH,EAAG,MAAM,CAACE,YAAY,eAAe,CAACN,EAAIQ,GAAG,WAAW,GAAGR,EAAIS,KAAKL,EAAG,QAAQJ,EAAIU,GAAGV,EAAIW,GAAG,CAACC,WAAW,CAAC,CAACC,KAAK,QAAQC,QAAQ,UAAUC,MAAOf,EAAIgB,OAAY,MAAEC,WAAW,iBAAiBC,IAAI,QAAQC,MAAMnB,EAAIoB,aAAaC,MAAM,CAAC,KAAOrB,EAAIsB,OAAO,QAAQtB,EAAIqB,OAAM,GAAOrB,EAAIuB,YAAcvB,EAAIwB,kBAAqExB,EAAIS,KAAtDL,EAAG,QAAQ,CAACJ,EAAIyB,GAAGzB,EAAI0B,GAAG1B,EAAI2B,aAAa,OAAiB3B,EAAIO,OAAa,OAAEH,EAAG,MAAM,CAACE,YAAY,eAAe,CAACN,EAAIQ,GAAG,WAAW,GAAGR,EAAIS,KAAMT,EAAoB,iBAAEI,EAAG,MAAM,CAACE,YAAY,cAAc,CAACF,EAAG,MAAM,CAACA,EAAG,gCAAgC,KAAKJ,EAAIS,KAAMT,EAAIO,OAAY,MAAEH,EAAG,MAAM,CAACE,YAAY,cAAc,CAACN,EAAIQ,GAAG,UAAU,GAAGR,EAAIS,QACzzBmB,EAAkB,G,YCgCtB,GACEf,KAAM,cACND,WAAY,CAAd,cACEiB,WAAY,CACVC,4BAA6B,IAAM,EAAvC,+CAEEC,cAAc,EACdC,MAAO,CACLL,YAAa,CAAjB,iCACIH,kBAAmB,CACjBF,KAAMW,QACNC,SAAS,GAEXZ,KAAM,CACJA,KAAMa,OACND,QAAS,OACT,UAAUnB,GACR,MAAO,CAAC,QAAS,SAAU,WAAY,SAAU,MAAO,OAAQ,OAAOqB,SAASrB,MAItFsB,SAAU,CACR,eACE,MAAO,CACL,uBAAwBpC,KAAKM,OAAO+B,OACpC,qBAAsBrC,KAAKM,OAAOgC,QAAUtC,KAAKuC,iBACjD,aAAcvC,KAAKwC,SACnB,qBAAsBxC,KAAKuB,oBAG/B,mBACE,MAAO,oBAAqBvB,KAAKe,QAEnC,WACE,OAAOf,KAAKe,QAAUf,KAAKe,OAAOD,OAASd,KAAKe,OAAOD,MAAM2B,WAAWC,QAE1E,QACE,MAAO,IACb,YACQhB,YAAa1B,KAAKuB,kBAAoBvB,KAAK0B,YAAc,OAG7D,YACE,MAAO,IACb,gBACQiB,MAAO,GAAf,uCC9EqV,I,wBCQjVC,EAAY,eACd,EACA9C,EACA6B,GACA,EACA,KACA,WACA,MAIa,aAAAiB,E,6CCnBf,W","file":"assets/js/chunk-47165dd0.cb342d74.js","sourcesContent":["var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"ui-input-text component\"},[(_vm.$slots.before)?_c('div',{staticClass:\"slot-before\"},[_vm._t(\"before\")],2):_vm._e(),_c('input',_vm._g(_vm._b({directives:[{name:\"maska\",rawName:\"v-maska\",value:(_vm.$attrs.maska),expression:\"$attrs.maska\"}],ref:\"input\",class:_vm.inputClasses,attrs:{\"type\":_vm.type}},'input',_vm.attrs,false),_vm.listeners)),(!_vm.staticPlaceholder)?_c('label',[_vm._v(_vm._s(_vm.placeholder)+\" \")]):_vm._e(),(_vm.$slots.bottom)?_c('div',{staticClass:\"slot-bottom\"},[_vm._t(\"bottom\")],2):_vm._e(),(_vm.isPasswordReveal)?_c('div',{staticClass:\"slot-after\"},[_c('div',[_c('UiInputPasswordTypeSwitcher')],1)]):_vm._e(),(_vm.$slots.after)?_c('div',{staticClass:\"slot-after\"},[_vm._t(\"after\")],2):_vm._e()])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <div class=\"ui-input-text component\">\n    <div v-if=\"$slots.before\" class=\"slot-before\">\n      <slot name=\"before\"></slot>\n    </div>\n\n    <input\n      ref=\"input\"\n      v-maska=\"$attrs.maska\"\n      :class=\"inputClasses\"\n      v-bind=\"attrs\"\n      :type=\"type\"\n      v-on=\"listeners\"\n    />\n    <label v-if=\"!staticPlaceholder\">{{ placeholder }} </label>\n\n    <div v-if=\"$slots.bottom\" class=\"slot-bottom\">\n      <slot name=\"bottom\" />\n    </div>\n\n    <div v-if=\"isPasswordReveal\" class=\"slot-after\">\n      <div> <UiInputPasswordTypeSwitcher /> </div>\n    </div>\n\n    <div v-if=\"$slots.after\" class=\"slot-after\">\n      <slot name=\"after\" />\n    </div>\n  </div>\n</template>\n\n<script>\nimport { maska } from 'maska'\n\nexport default {\n  name: 'UiInputText',\n  directives: { maska },\n  components: {\n    UiInputPasswordTypeSwitcher: () => import('@/components/UiInputPasswordTypeSwitcher.vue'),\n  },\n  inheritAttrs: false,\n  props: {\n    placeholder: { type: String, default: 'Ваш текст' },\n    staticPlaceholder: {\n      type: Boolean,\n      default: false,\n    },\n    type: {\n      type: String,\n      default: 'text',\n      validator(value) {\n        return ['email', 'number', 'password', 'search', 'tel', 'text', 'url'].includes(value)\n      },\n    },\n  },\n  computed: {\n    inputClasses() {\n      return {\n        'border-radius-start': !this.$slots.before,\n        'border-radius-end': !this.$slots.after && !this.isPasswordReveal,\n        'is-focused': this.hasValue,\n        'static-placeholder': this.staticPlaceholder,\n      }\n    },\n    isPasswordReveal() {\n      return 'password-reveal' in this.$attrs\n    },\n    hasValue() {\n      return this.$attrs && this.$attrs.value && this.$attrs.value.toString().length\n    },\n    attrs() {\n      return {\n        ...this.$attrs,\n        placeholder: this.staticPlaceholder ? this.placeholder : null,\n      }\n    },\n    listeners() {\n      return {\n        ...this.$listeners,\n        input: (event) => this.$emit('input', event.target.value),\n      }\n    },\n  },\n}\n</script>\n\n<style lang=\"scss\" scoped>\n$color-gray: #b3b3b3;\n$radius: 5px;\n$padding: 5px;\n\n// Selectors for manipulate input borders\n$borders: '\n  &.border-radius-start,\n  &.border-radius-end,\n  ~ .slot-before,\n  ~ .slot-after\n';\n\n.ui-input-text.component {\n  position: relative;\n  box-shadow: none;\n\n  @include createFlex(flexbox, nowrap, row, flex-start, stretch, stretch);\n\n  .slot-bottom {\n    padding-top: $padding;\n    font-size: rem(13px);\n    color: $color-gray;\n  }\n  .slot-after,\n  .slot-before {\n    cursor: pointer;\n    border: 1px solid transparent;\n\n    @include unselectable();\n\n    > div {\n      @include square(44px);\n      @include createFlex(flexbox, nowrap, row, center, center, center);\n    }\n  }\n\n  .slot-before {\n    border: 1px solid transparent;\n    border-right: 0;\n    border-top-left-radius: $radius;\n    border-bottom-left-radius: $radius;\n  }\n  .slot-after {\n    background-color: $input-background;\n    border: 1px solid transparent;\n    border-left: 0;\n    border-top-right-radius: $radius;\n    border-bottom-right-radius: $radius;\n  }\n\n  label {\n    position: absolute;\n    top: rem(18px);\n    left: rem(16px);\n    font-size: rem(11px);\n    color: $color-gray;\n    pointer-events: none;\n    cursor: text;\n\n    @include unselectable();\n  }\n\n  .static-placeholder {\n    height: 32px;\n    padding: rem(8px) rem(12px);\n  }\n\n  input {\n    width: 100%;\n    height: 46px;\n    padding: rem(22px) rem(16px) rem(6px);\n    font-family: 'SF Pro Text', Lato, Helvetica, Arial, sans-serif;\n    font-size: rem(12px);\n    color: $color-gray-600;\n    background-color: $input-background;\n    border: 1px solid transparent;\n    border-right: 0;\n    border-left: 0;\n    outline: none;\n    box-shadow: none;\n    -webkit-appearance: none;\n    -moz-appearance: none;\n    appearance: none;\n\n    &.border-radius-start {\n      border-left: 1px solid transparent;\n      -webkit-border-radius: $radius;\n      -moz-border-radius: $radius;\n      border-radius: $radius;\n      -webkit-border-top-right-radius: 0;\n      border-top-right-radius: 0;\n      -webkit-border-bottom-right-radius: 0;\n      border-bottom-right-radius: 0;\n      -moz-border-radius-topright: 0;\n      -moz-border-radius-bottomright: 0;\n    }\n    &.border-radius-end {\n      border-right: 1px solid transparent;\n      -webkit-border-radius: 0;\n      -moz-border-radius: 0;\n      border-radius: $radius;\n      -webkit-border-top-right-radius: $radius;\n      border-top-right-radius: $radius;\n      -webkit-border-bottom-right-radius: $radius;\n      border-bottom-right-radius: $radius;\n      -moz-border-radius-topright: $radius;\n      -moz-border-radius-bottomright: $radius;\n    }\n\n    &:hover {\n      border-color: darken($input-background, 2%);\n\n      #{$borders} {\n        border-color: darken($input-background, 2%);\n      }\n    }\n    &:focus {\n      border-color: darken($input-background, 4%);\n\n      #{$borders} {\n        border-color: darken($input-background, 4%);\n      }\n\n      ~ label {\n        @extend .focused-input;\n      }\n    }\n\n    &.is-focused {\n      ~ label {\n        @extend .focused-input;\n      }\n    }\n  }\n\n  // stylelint-disable no-descending-specificity\n  &.is-invalid-input {\n    label {\n      color: $color-error;\n    }\n\n    input {\n      background-color: lighten($color-error, 29%);\n      border-color: $color-error;\n\n      #{$borders} {\n        background-color: lighten($color-error, 29%);\n        border-color: $color-error;\n      }\n\n      &:hover {\n        border-color: darken($color-error, 1%);\n\n        #{$borders} {\n          border-color: darken($color-error, 1%);\n        }\n      }\n      &:focus {\n        border-color: darken($color-error, 3%);\n\n        #{$borders} {\n          border-color: darken($color-error, 3%);\n        }\n      }\n    }\n  }\n\n  /* Chrome, Safari, Edge, Opera */\n  input::-webkit-outer-spin-button,\n  input::-webkit-inner-spin-button {\n    margin: 0;\n    -webkit-appearance: none;\n  }\n\n  /* Firefox */\n  input[type='number'] {\n    -moz-appearance: textfield;\n  }\n\n  .focused-input {\n    top: rem(6px);\n    left: rem(16px);\n\n    @include transition(all 0.225s ease);\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!./UiInputText.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!./UiInputText.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./UiInputText.vue?vue&type=template&id=14473ad8&scoped=true&\"\nimport script from \"./UiInputText.vue?vue&type=script&lang=js&\"\nexport * from \"./UiInputText.vue?vue&type=script&lang=js&\"\nimport style0 from \"./UiInputText.vue?vue&type=style&index=0&id=14473ad8&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  \"14473ad8\",\n  null\n  \n)\n\nexport default component.exports","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!./UiInputText.vue?vue&type=style&index=0&id=14473ad8&lang=scss&scoped=true&\""],"sourceRoot":""}