{"version":3,"file":"BInput-B9VFg7bb.js","sources":["../../../frontend/common/components/BInput/BInput.constants.js","../../../frontend/common/components/BInput/BInput.vue"],"sourcesContent":["export const SIZES = {\n  sm: 'sm',\n  base: 'base',\n  lg: 'lg',\n}\n","<template>\n  <div>\n    <div\n      class=\"flex\"\n      :class=\"`size-${size}`\"\n    >\n      <slot name=\"before\" />\n      <div\n        v-if=\"prefix\"\n        :class=\"focused ? 'border-primary focused' : ''\"\n        class=\"prefix whitespace-nowrap bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-white dark:border-gray-700\"\n        :title=\"prefix\"\n        data-test=\"prefix\"\n      >\n        <span\n          class=\"w-full truncate\"\n        >\n          {{ prefix }}\n        </span>\n      </div>\n      <input\n        :id=\"inputId\"\n        ref=\"input\"\n        class=\"b-input form-input focus:border-primary rounded dark:bg-gray-800 dark:border-gray-700 dark:text-white\"\n        :class=\"{\n          'rounded-r-none': (suffix && !rtl) || (prefix && rtl),\n          'bg-gray-100': disabled,\n          'bg-white': !disabled,\n          'w-full': block,\n          'rounded-l-none': (prefix && !rtl) || (suffix && rtl),\n          'border-red-500 dark:border-red-500': errors.length > 0 || hasErrors,\n        }\"\n        :value=\"value\"\n        :disabled=\"disabled\"\n        :type=\"type\"\n        :placeholder=\"placeholder\"\n        v-bind=\"$attrs\"\n        v-on=\"listeners\"\n      >\n      <div\n        v-if=\"suffix\"\n        :class=\"focused ? 'border-primary focused' : ''\"\n        class=\"suffix bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-white whitespace-nowrap\"\n        data-test=\"suffix\"\n        :title=\"suffix\"\n      >\n        <span\n          class=\"w-full truncate\"\n        >\n          {{ suffix }}\n        </span>\n      </div>\n      <slot name=\"after\" />\n    </div>\n    <div class=\"flex justify-between\">\n      <ul\n        v-if=\"errors.length > 0\"\n        data-test=\"errors\"\n      >\n        <li\n          v-for=\"error in errors\"\n          :key=\"error\"\n          class=\"text-red-500 text-sm mt-1\"\n          data-test=\"error\"\n        >\n          {{ error }}\n        </li>\n      </ul>\n      <div\n        v-if=\"maxlength\"\n        class=\"text-gray-700 text-sm ml-auto mt-1 font-light\"\n      >\n        Characters left:\n        <span\n          :class=\"[ counter <= 0 ? 'text-red-500' : counter < 11 ? 'text-orange-500' : '' ]\"\n          data-test=\"max-length-counter\"\n        >\n          {{ counter }}\n        </span>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\nimport { SIZES } from './BInput.constants'\n\nfunction isRtl() {\n  if (document) {\n    return document.body.hasAttribute('dir')\n      && document.body.getAttribute('dir') === 'rtl'\n  }\n  return false\n}\n\nexport default {\n  name: 'BInput',\n  props: {\n    /**\n     * Whether it has errors or not\n     */\n    hasErrors: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * Input value\n     */\n    value: {\n      type: [String, Number],\n      default: '',\n    },\n    /**\n     * An array of errors\n     */\n    errors: {\n      type: Array,\n      default: () => [],\n    },\n    /**\n     * Value to be passed to `<input>`'s type\n     */\n    type: {\n      type: String,\n      default: 'text',\n    },\n    /**\n     * Text to be displayed on the left side of the input\n     */\n    size: {\n      type: String,\n      default: SIZES.base,\n      validator: value => Object.values(SIZES).includes(value),\n    },\n    /**\n     * Text to be displayed on the left side of the input\n     */\n    suffix: {\n      type: String,\n      default: '',\n    },\n    /**\n     * Text to be displayed on the right side of the input\n     */\n    prefix: {\n      type: String,\n      default: '',\n    },\n    /**\n     * Value to be passed to `<input>`'s disabled\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n    /**\n     * It takes the full width if this prop is `true`\n     */\n    block: {\n      type: Boolean,\n      default: true,\n    },\n    /**\n     * Displays a counter on the footer and limits input to the value of this prop.\n     */\n    maxlength: {\n      type: Number,\n      default: null,\n    },\n    inputId: {\n      type: String,\n      default: null,\n    },\n    customErrors: {\n      type: Object,\n      default: () => ({}),\n    },\n    placeholder: {\n      type: String,\n      default: null,\n    },\n  },\n  data() {\n    return {\n      focused: false,\n      counter: 0,\n      rtl: false,\n    }\n  },\n  computed: {\n    listeners() {\n      return {\n        ...this.$listeners,\n        input: this.onInputChange,\n        focusin: this.onInputFocusIn,\n        focusout: this.onInputFocusOut,\n      }\n    },\n  },\n  async mounted() {\n    await this.$nextTick()\n\n    const counter = this.value ? this.value : ''\n    this.updateCounter(counter)\n    this.rtl = isRtl()\n  },\n  methods: {\n    focus() {\n      this.$refs.input.focus()\n    },\n    updateCounter(value) {\n      if (this.maxlength) {\n        this.counter = this.maxlength - value.length\n      }\n    },\n    onInputFocusIn() {\n      this.focused = true\n    },\n    onInputFocusOut() {\n      this.focused = false\n    },\n    onInputChange({ target }) {\n      if (this.type === 'number') {\n        const eventValue = parseFloat(target.value)\n        this.$emit('input', eventValue)\n        return\n      }\n\n      this.updateCounter(target.value)\n      this.$emit('input', target.value)\n    },\n  },\n}\n</script>\n\n<style scoped>\n.b-input {\n  text-align: inherit;\n}\n\n.size-sm {\n  > .b-input,\n  > .suffix,\n  > .prefix {\n    @apply text-sm leading-4;\n\n    padding: calc(0.5rem - 1px) calc(0.5rem - 1px);\n  }\n}\n\n.size-base {\n  > .b-input,\n  > .suffix,\n  > .prefix {\n    @apply text-base leading-6;\n\n    padding: calc(0.5rem - 1px) calc(0.75rem - 1px);\n  }\n}\n\n.size-lg {\n  > .b-input,\n  > .suffix,\n  > .prefix {\n    @apply leading-6;\n\n    padding: calc(0.75rem - 1px) calc(1rem - 1px);\n  }\n}\n\n.focused {\n  box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);\n}\n\n.prefix {\n  @apply flex items-center px-3 border rounded-l border-r-0;\n\n  max-width: 50%;\n}\n\n.suffix {\n  max-width: 50%;\n\n  @apply flex items-center flex-none;\n  @apply px-3;\n  @apply border rounded-r border-l-0;\n}\n\nbody[dir=rtl] {\n  .prefix {\n    @apply border-r rounded-r border-l-0 rounded-l-none;\n  }\n\n  .suffix {\n    @apply border-l rounded-l border-r-0 rounded-r-none;\n  }\n}\n</style>\n"],"names":["SIZES","isRtl","_sfc_main","value","counter","target","eventValue"],"mappings":"qDAAO,MAAMA,EAAQ,CACnB,GAAI,KACJ,KAAM,OACN,GAAI,IACN,ECmFA,SAAAC,GAAA,CACA,OAAA,SACA,SAAA,KAAA,aAAA,KAAA,GACA,SAAA,KAAA,aAAA,KAAA,IAAA,MAEA,EACA,CAEA,MAAAC,EAAA,CACA,KAAA,SACA,MAAA,CAIA,UAAA,CACA,KAAA,QACA,QAAA,EACA,EAIA,MAAA,CACA,KAAA,CAAA,OAAA,MAAA,EACA,QAAA,EACA,EAIA,OAAA,CACA,KAAA,MACA,QAAA,IAAA,CAAA,CACA,EAIA,KAAA,CACA,KAAA,OACA,QAAA,MACA,EAIA,KAAA,CACA,KAAA,OACA,QAAAF,EAAA,KACA,UAAAG,GAAA,OAAA,OAAAH,CAAA,EAAA,SAAAG,CAAA,CACA,EAIA,OAAA,CACA,KAAA,OACA,QAAA,EACA,EAIA,OAAA,CACA,KAAA,OACA,QAAA,EACA,EAIA,SAAA,CACA,KAAA,QACA,QAAA,EACA,EAIA,MAAA,CACA,KAAA,QACA,QAAA,EACA,EAIA,UAAA,CACA,KAAA,OACA,QAAA,IACA,EACA,QAAA,CACA,KAAA,OACA,QAAA,IACA,EACA,aAAA,CACA,KAAA,OACA,QAAA,KAAA,CAAA,EACA,EACA,YAAA,CACA,KAAA,OACA,QAAA,IACA,CACA,EACA,MAAA,CACA,MAAA,CACA,QAAA,GACA,QAAA,EACA,IAAA,EACA,CACA,EACA,SAAA,CACA,WAAA,CACA,MAAA,CACA,GAAA,KAAA,WACA,MAAA,KAAA,cACA,QAAA,KAAA,eACA,SAAA,KAAA,eACA,CACA,CACA,EACA,MAAA,SAAA,CACA,MAAA,KAAA,UAAA,EAEA,MAAAC,EAAA,KAAA,MAAA,KAAA,MAAA,GACA,KAAA,cAAAA,CAAA,EACA,KAAA,IAAAH,EAAA,CACA,EACA,QAAA,CACA,OAAA,CACA,KAAA,MAAA,MAAA,MAAA,CACA,EACA,cAAAE,EAAA,CACA,KAAA,YACA,KAAA,QAAA,KAAA,UAAAA,EAAA,OAEA,EACA,gBAAA,CACA,KAAA,QAAA,EACA,EACA,iBAAA,CACA,KAAA,QAAA,EACA,EACA,cAAA,CAAA,OAAAE,GAAA,CACA,GAAA,KAAA,OAAA,SAAA,CACA,MAAAC,EAAA,WAAAD,EAAA,KAAA,EACA,KAAA,MAAA,QAAAC,CAAA,EACA,MACA,CAEA,KAAA,cAAAD,EAAA,KAAA,EACA,KAAA,MAAA,QAAAA,EAAA,KAAA,CACA,CACA,CACA"}