{"version":3,"file":"Input-pfAE6h-8.js","sources":["../../../app/javascript/src/components/Theme/Input.vue"],"sourcesContent":["<template>\n  <div class=\"theme-input\" :class=\"{ 'theme-input_disabled': disabled, 'theme-input_required': required }\">\n    <label v-if=\"label\">\n      {{ label }}\n    </label>\n    <label v-if=\"$slots.label\">\n      <slot name=\"label\"></slot>\n    </label>\n    <div class=\"theme-input__body\">\n      <slot name=\"left\"></slot>\n      <input\n        ref=\"input\"\n        :type=\"type\"\n        class=\"theme-input__input\"\n        :placeholder=\"placeholder\"\n        :disabled=\"disabled\"\n        :value=\"value\"\n        @change=\"$emit('change', $event)\"\n        @input=\"$emit('input', $event.target.value)\"\n        :name=\"name\"\n        @keydown=\"$emit('keydown', $event)\"\n        :inputmode=\"inputmode\"\n        @focus=\"$emit('focus', $event)\"\n        @blur=\"$emit('blur', $event)\"\n        :readonly=\"readonly\"\n        :id=\"id\"\n      />\n      <slot></slot>\n    </div>\n  </div>\n</template>\n\n<script setup>\nimport { onMounted, ref } from \"vue\";\n\nconst props = defineProps({\n  type: {type: String, default: 'text'},\n  placeholder: String,\n  disabled: {type: Boolean, default: false},\n  value: [String, Number],\n  label: {type: String, default: ''},\n  name: {type: String, default: ''},\n  inputmode: {type: String, default: ''},\n  readonly: {type: Boolean, default: false},\n  autoFocus: {type: Boolean, default: false},\n  required: {type: Boolean, default: false},\n  id: String\n});\ndefineEmits(['change', 'input', 'keydown', 'focus', 'blur']);\nconst input = ref(null);\n\nonMounted(() => {\n  if (props.autoFocus) {\n    input.value.focus();\n  }\n});\n</script>\n\n\n<style lang=\"scss\" scoped>\n.theme-input {\n  display: inline-block;\n  width: 100%;\n\n  label {\n    color: $gray;\n    text-transform: uppercase;\n    font-weight: $font-bold;\n    font-size: $text-xs;\n    display: block;\n    margin-bottom: $spacing-2;\n  }\n\n  &_disabled {\n    background-color: $gray-lighter;\n  }\n}\n.theme-input_required {\n  label::after {\n    content: '*';\n    color: $brand-secondary;\n    margin-left: $spacing-1;\n  }\n}\n.theme-input__body {\n  padding: $spacing-3 $spacing-5;\n  border: 1px solid $gray-lighter;\n  border-radius: $spacing-1;\n  display: flex;\n  align-items: center;\n  &:focus-within {\n    border: 1px solid $brand-tertiary;\n  }\n\n  .icon {\n    flex-grow: 0;\n    flex-shrink: 1;\n    margin-left: $spacing-2;\n    color: $gray;\n  }\n}\n.theme-input__input {\n  padding: 0;\n  border: 0;\n  border-radius: 0;\n  font-size: $text-base;\n  -webkit-appearance: none;\n  width: 100%;\n  flex-grow: 1;\n\n  &[disabled] {\n    background-color: $gray-lighter;\n  }\n\n  &::placeholder {\n    color: $gray;\n  }\n  &:focus-visible {\n    outline: 0;\n  }\n  &:focus {\n    outline: 0;\n    box-shadow: none;\n  }\n}\n</style>\n"],"names":["props","__props","input","ref","onMounted"],"mappings":"wxBAmCA,MAAMA,EAAQC,EAcRC,EAAQC,EAAI,IAAI,EAEtB,OAAAC,EAAU,IAAM,CACVJ,EAAM,WACRE,EAAM,MAAM,MAAO,CAEvB,CAAC"}