{"version":3,"file":"UiInput.b75f46de.js","sources":["../../../../components/global/ui/UiInput.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n      'ui-input',\n      {\n        'is-error': error,\n        'is-borderless': borderless,\n        'is-textarea': textarea,\n        'has-prefix': !!prefix,\n        'has-toggle': canToggle,\n      },\n    ]\"\n  >\n    <template v-if=\"prefix\">\n      <span class=\"ui-input__prefix\">{{ prefix }}</span>\n    </template>\n    <template v-if=\"textarea\">\n      <textarea\n        v-model=\"internalValue\"\n        class=\"ui-input__input\"\n        :placeholder=\"placeholderText\"\n        :required=\"required\"\n        v-bind=\"$attrs\"\n      />\n    </template>\n    <template v-else>\n      <input\n        v-model=\"internalValue\"\n        class=\"ui-input__input\"\n        :type=\"inputType\"\n        :placeholder=\"placeholderText\"\n        :required=\"required\"\n        v-bind=\"$attrs\"\n      />\n    </template>\n    <template v-if=\"canToggle\">\n      <button\n        ref=\"toggler\"\n        type=\"button\"\n        class=\"ui-input__toggler\"\n        role=\"presentation\"\n        @click=\"toggle\"\n      >\n        <icon-password-visible v-if=\"toggled\" />\n        <icon-password-hidden v-else />\n      </button>\n    </template>\n    <template v-else>\n      <span\n        v-if=\"!!$slots.icon\"\n        ref=\"inputIcon\"\n        class=\"ui-input__icon\"\n        role=\"presentation\"\n      >\n        <slot name=\"icon\" />\n      </span>\n    </template>\n  </div>\n</template>\n\n<script lang=\"ts\">\nexport default {\n  inheritAttrs: false,\n};\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, type PropType, ref, toRefs, watch } from 'vue';\nimport IconPasswordVisible from '@/components/global/elements/IconPasswordVisible.vue';\nimport IconPasswordHidden from '@/components/global/elements/IconPasswordHidden.vue';\n\nconst props = defineProps({\n  modelValue: { type: [String, Number] as PropType<string | number>, default: '' },\n  modelModifiers: { type: Object, default: () => ({}) },\n  borderless: { type: Boolean, default: false },\n  type: { type: String, default: 'text' },\n  prefix: { type: String, default: '' },\n  placeholder: { type: String, default: '' },\n  required: { type: Boolean, default: false },\n  canToggle: { type: Boolean, default: false },\n  textarea: { type: Boolean, default: false },\n  error: { type: Boolean, default: false },\n});\n\nconst emit = defineEmits(['update:modelValue']);\nconst { modelValue, type } = toRefs(props);\nconst toggled = ref(false);\nconst internalValue = ref(modelValue.value);\n\nconst inputType = computed(() => {\n  if (props.textarea) {\n    return undefined;\n  }\n  if (type.value === 'password' && toggled.value) {\n    return 'text';\n  }\n  return type.value;\n});\nconst placeholderText = computed(() => (props.required ? `${props.placeholder} *` : props.placeholder));\n\nwatch(internalValue, (val) => emit('update:modelValue', val));\nwatch(modelValue, (val) => (internalValue.value = val));\n\nconst toggle = () => (toggled.value = !toggled.value);\n</script>\n\n<style lang=\"scss\" scoped>\n@use '@/assets/mixins/__index' as mix;\n\n.ui-input {\n  position: relative;\n\n  &__icon,\n  &__toggler {\n    position: absolute;\n    right: 0;\n    top: 0;\n    bottom: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    @include mobile {\n      width: rem(80);\n    }\n  }\n\n  &__prefix {\n    position: absolute;\n    left: 0;\n    top: 0;\n    bottom: 0;\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n  }\n\n  &__prefix,\n  &__icon {\n    pointer-events: none;\n  }\n\n  &__toggler {\n    @include button-reset;\n  }\n\n  &__input {\n    @include mix.no-outline;\n    width: 100%;\n    color: black;\n\n    &:disabled {\n      cursor: not-allowed;\n    }\n\n    &::placeholder {\n      color: var(--lightgreen);\n    }\n\n    .is-tel & {\n      padding-left: rem(40);\n    }\n  }\n\n  &.has-prefix & {\n    &__input {\n      padding-left: rem(40);\n    }\n  }\n\n  &.is-borderless & {\n    &__input {\n      border-width: 0;\n    }\n  }\n\n  &.has-pointer &__input,\n  &__input.has-pointer {\n    cursor: pointer;\n  }\n\n  &.is-textarea & {\n    &__input {\n      display: block;\n      padding-top: rem(16);\n      height: rem(150);\n      resize: none;\n    }\n  }\n}\n</style>\n"],"names":["__default__","modelValue","type","toRefs","props","toggled","ref","internalValue","inputType","computed","placeholderText","watch","val","emit","toggle"],"mappings":"seA6DAA,EAAe,CACb,aAAc,EAChB,8cAsBM,CAAE,WAAAC,EAAY,KAAAC,CAAK,EAAIC,EAAOC,CAAK,EACnCC,EAAUC,EAAI,EAAK,EACnBC,EAAgBD,EAAIL,EAAW,KAAK,EAEpCO,EAAYC,EAAS,IAAM,CAC/B,GAAI,CAAAL,EAAM,SAGV,OAAIF,EAAK,QAAU,YAAcG,EAAQ,MAChC,OAEFH,EAAK,KAAA,CACb,EACKQ,EAAkBD,EAAS,IAAOL,EAAM,SAAW,GAAGA,EAAM,gBAAkBA,EAAM,WAAY,EAEtGO,EAAMJ,EAAgBK,GAAQC,EAAK,oBAAqBD,CAAG,CAAC,EAC5DD,EAAMV,EAAaW,GAASL,EAAc,MAAQK,CAAI,EAEtD,MAAME,EAAS,IAAOT,EAAQ,MAAQ,CAACA,EAAQ"}