{"version":3,"file":"form-input-7df1c23d.js","sources":["../../../packages/frontend-common-lib/src/assets/images/info-apple-pay.svg?url","../../../packages/frontend-common-lib/src/assets/images/info-google-pay.svg?url","../../../packages/frontend-common-lib/src/assets/images/info-mastercard.svg?url","../../../packages/frontend-common-lib/src/assets/images/info-visa.svg?url","../../../packages/frontend-common-lib/src/components/CardTypeIcon.vue","../../../packages/frontend-common-lib/src/components/form/form-input.vue"],"sourcesContent":["export default \"__VITE_ASSET__9c9a359f__\"","export default \"__VITE_ASSET__9da62f48__\"","export default \"__VITE_ASSET__bd34be01__\"","export default \"__VITE_ASSET__5c0dd92a__\"","<template>\n  <img\n    :src=\"icon\"\n    :alt=\"type\"\n  />\n</template>\n\n<script setup lang=\"ts\">\nconst props = defineProps<{\n  type: string,\n}>();\n\nconst icon = new URL(`../assets/images/info-${ props.type }.svg`, import.meta.url).href;\n</script>\n","<template>\n  <div\n    class=\"form-input__wrapper\"\n    :class=\"{\n      'has-error': hasError,\n      'is-disabled': isDisabled,\n      'has-tip': hasTipSlot,\n      'relative-errors': relativeErrors,\n      'custom-height': height\n    }\"\n  >\n    <div v-if=\"label || hasTipSlot || hasFixedTipSlot\" class=\"form-input__top\">\n      <label v-if=\"label\" :for=\"id\" class=\"form-input__label\">\n        {{ label }}\n        <span v-if=\"mark\" class=\"form-input__mark\">\n          {{ mark }}\n        </span>\n      </label>\n\n      <span v-if=\"hasTipSlot\" class=\"form-input__tip\">\n        <slot name=\"tip\" />\n      </span>\n\n      <span v-if=\"hasFixedTipSlot\" class=\"form-input__fixed-tip\">\n        <slot name=\"fixedTip\" />\n      </span>\n    </div>\n\n    <slot\n        :attrs=\"attrs\"\n        :listeners=\"listeners\"\n    >\n      <input\n          ref=\"input\"\n          v-bind=\"attrs\"\n          v-on=\"listeners\"\n      >\n    </slot>\n\n    <div v-if=\"logo\" class=\"form-input__logo\">\n      <card-type-icon :type=\"logo\" />\n    </div>\n    <div v-if=\"showCounter\" class=\"form-input__counter\">\n      {{ valueLengthCounter }}\n    </div>\n\n    <div class=\"form-input__comment\">\n      <slot v-if=\"hasCommentSlot\" name=\"comment\" />\n    </div>\n\n    <span v-if=\"hasError\" class=\"form-input__error\" v-html=\"error\" />\n  </div>\n</template>\n\n<script>\nimport CardTypeIcon from \"../CardTypeIcon.vue\";\n\nexport default {\n  name: 'FormInput',\n  components: { CardTypeIcon },\n\n  props: {\n    id: { type: String, required: false, default: '' },\n    name: { type: String, required: false, default: '' },\n    placeholder: { type: String, required: false, default: '' },\n    type: { type: String, required: false, default: 'text' },\n    inputmode: { type: String, required: false, default: 'text' },\n    label: { type: String, required: false, default: '' },\n    mark: { type: String, required: false, default: '' },\n    hasError: { type: Boolean, required: false, default: false },\n    error: { type: String, required: false, default: '' },\n    value: { type: [String, Number], required: false, default: '' },\n    isRegular: { type: Boolean, required: false, default: false },\n    isDisabled: { type: Boolean, required: false, default: false },\n    displayUppercase: { type: Boolean, required: false, default: false },\n    minLength: { type: String, required: false },\n    maxLength: { type: String, required: false },\n    showCounter: { type: Boolean, required: false, default: false },\n    min: { type: String, required: false },\n    max: { type: String, required: false },\n    step: { type: String, required: false },\n    required: { type: Boolean, required: false },\n    autocomplete: { type: Boolean, required: false, default: true },\n    logo: { type: String, required: false, default: '' },\n    dataTestid: { type: String, required: false, default: null },\n    focus: { type: Boolean, required: false, default: false },\n    relativeErrors: { type: Boolean, required: false, default: false },\n    height: { type: String, required: false, default: false },\n  },\n\n  emits: ['focus', 'input'],\n\n  data() {\n    return {\n      customHeight: `${this.height}px`,\n    }\n  },\n\n  computed: {\n    valueLengthCounter() {\n      if (!this.showCounter || !this.maxLength || this.type !== 'text') {\n        return 0;\n      }\n\n      if (!this.value) {\n        return this.maxLength;\n      }\n\n      return parseInt(this.maxLength) - this.value.toString().length;\n    },\n\n    hasTipSlot() {\n      return !!this.$slots.tip;\n    },\n\n    hasFixedTipSlot() {\n      return !!this.$slots.fixedTip;\n    },\n\n    hasCommentSlot() {\n      return !!this.$slots.comment;\n    },\n\n    isAutocomplete() {\n      if (!this.autocomplete) {\n        return 'off';\n      }\n\n      return null;\n    },\n    attrs() {\n      return {\n        id: this.id,\n        value: this.value,\n        name: this.name,\n        type: this.type,\n        inputmode: this.inputmode,\n        placeholder: this.placeholder,\n        disabled:this.isDisabled,\n        class:{'form-input__input': true, 'is-regular': this.isRegular, 'is-uppercase': this.displayUppercase },\n        minlength: this.minLength,\n        maxlength: this.maxLength,\n        min: this.min,\n        max: this.max,\n        step: this.step,\n        required: this.required,\n        autocomplete: this.isAutocomplete,\n        'data-testid': this.dataTestid,\n      };\n    },\n    listeners() {\n      return {\n        focus: () => this.$emit('focus'),\n        blur: () => this.$emit('blur'),\n        input: ($event) => this.$emit('input', $event.target.value),\n      }\n    }\n  },\n\n  methods: {\n    disableAutoComplete() {\n      const element = this.$refs.input;\n      if (element.getAttribute('autocomplete')) {\n        // HACK: disable autocomplete\n        element.setAttribute('readonly', 'readonly');\n        element.style.backgroundColor = 'inherit';\n\n        setTimeout(() => {\n          element.removeAttribute('readonly');\n        }, 500);\n      }\n    },\n  },\n\n  mounted() {\n    if (this.$refs.input) {\n      this.disableAutoComplete();\n    }\n\n    if (this.$refs.input && this.focus) {\n      this.$refs.input.focus();\n    }\n  },\n\n  watch: {\n    focus(newFocus) {\n      if (!this.$refs.input || !newFocus) {\n        return;\n      }\n\n      const inputRef = this.$refs.input;\n\n      inputRef.focus();\n      inputRef.select();\n    },\n  },\n};\n</script>\n\n<style lang=\"scss\">\n.form-input {\n  &__wrapper {\n    width: 100%;\n    position: relative;\n  }\n\n  &__wrapper.custom-height .form-input__input {\n    height: v-bind(customHeight);\n  }\n\n  &__logo {\n    display: block;\n    position: relative;\n\n    img {\n      position: absolute;\n      right: rem(16);\n      bottom: rem(12);\n    }\n  }\n\n  &__counter {\n    position: absolute;\n    right: 16px;\n    top: 13px;\n    font-family: $font-regular;\n    color: $grey-30;\n  }\n\n  &__wrapper.is-small {\n    display: flex;\n    align-items: center;\n  }\n\n  &__top {\n    display: flex;\n    justify-content: space-between;\n  }\n\n  &__label {\n    font-size: rem(16);\n    line-height: 1.25;\n  }\n\n  &__mark {\n    margin-left: rem(2);\n    color: $grey-30;\n  }\n\n  &__tip {\n    color: $grey-30;\n    font-size: rem(14);\n    line-height: 1.14;\n  }\n\n  .is-disabled &__label {\n    color: $grey-30;\n  }\n\n  &__top + &__input {\n    margin-top: rem(4);\n  }\n\n  &__input {\n    display: block;\n    width: 100%;\n    background-color: $white;\n    border: none;\n    border-radius: rem(6);\n    font-family: $font-bold;\n    font-size: rem(16);\n    line-height: 1.25;\n    padding: rem(14);\n    box-shadow: 0 0 0 2px $black-10;\n    -webkit-appearance: none;\n    -moz-appearance: none;\n    appearance: none;\n    transition: box-shadow 0.2s linear;\n  }\n\n  &__input:hover {\n    box-shadow: 0 0 0 2px $black-20;\n  }\n\n  &__input:focus {\n    outline: none;\n    box-shadow: 0 0 0 1px $violet-60;\n  }\n\n  &__input:disabled {\n    background-color: $grey-04;\n    color: $grey;\n    box-shadow: 0 0 0 2px $grey-04;\n  }\n\n  &__input.is-regular {\n    font-family: $font-regular;\n  }\n\n  .is-small &__input {\n    padding: rem(4) rem(6);\n    max-width: rem(52);\n  }\n\n  .has-error &__input {\n    box-shadow: 0 0 0 2px $red;\n  }\n\n  .has-error &__input:hover {\n    box-shadow: 0 0 0 2px rgba(231, 60, 64, 0.25);\n  }\n\n  .relative-errors &__error {\n   float: left;\n  }\n\n  &__input::-webkit-inner-spin-button,\n  &__input::-webkit-outer-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n\n  &__input::-ms-clear {\n    display: none;\n  }\n\n  &__input::-webkit-input-placeholder {\n    font-family: $font-regular;\n    color: $grey-30;\n  }\n\n  &__input:-ms-input-placeholder {\n    font-family: $font-regular;\n    color: $grey-30;\n  }\n\n  &__input::placeholder {\n    font-family: $font-regular;\n    color: $grey-30;\n  }\n\n  &__error {\n    display: block;\n    margin-top: rem(4);\n    font-size: rem(12);\n    line-height: 1.33;\n    color: $red;\n  }\n\n  @media screen and (max-width: $screen-md-max) {\n    &__wrapper.has-tip {\n      padding-bottom: rem(28);\n    }\n\n    .has-tip &__tip {\n      position: absolute;\n      bottom: rem(2);\n    }\n\n    .is-small &__error {\n      margin-left: rem(8);\n    }\n  }\n\n  @media screen and (min-width: $screen-lg-min) {\n    &__wrapper.is-small {\n      flex-direction: column;\n      align-items: flex-end;\n    }\n  }\n\n  [dir='rtl'] & {\n    &__logo {\n      img {\n        right: auto;\n        left: rem(16);\n      }\n    }\n  }\n}\n</style>\n"],"names":["__vite_glob_0_0","__vite_glob_0_1","__vite_glob_0_2","__vite_glob_0_3","icon","props","__default__","CardTypeIcon","$event","element","newFocus","inputRef"],"mappings":"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"}