{"version":3,"file":"7F54Uc0d.js","sources":["../../../../node_modules/@smenaspace/ui-layer/components/input/Input.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { InputType } from './types'\n\ntype Props = {\n  label?: string\n  clearable?: boolean\n  fixedClearIcon?: boolean\n  disabled?: boolean\n  placeholder?: string\n  errorMessages?: string | string[] | null\n  loading?: boolean\n  type?: InputType\n  width?: string | number\n  hideDetails?: boolean\n  dynamicDetails?: boolean\n  autocomplete?: string\n  autofocus?: boolean\n  maxlength?: string | number\n  minlength?: string | number\n  prefix?: string\n  class?: string\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  clearable: true,\n  fixedClearIcon: false,\n  placeholder: '',\n  label: '',\n  errorMessages: null,\n  type: 'text',\n  width: '',\n  autocomplete: 'on',\n  maxlength: undefined,\n  minlength: undefined,\n  prefix: undefined,\n  class: '',\n})\n\nconst emit = defineEmits(['update:model-value', 'clear', 'focus', 'blur'])\n\nconst model = defineModel<string>()\n\nconst clear = () => {\n  model.value = ''\n  emit('clear')\n}\n\nconst inputEl = ref<HTMLElement | null>(null)\n\nonMounted(() => {\n  if (props.autofocus && inputEl.value) {\n    inputEl.value.focus()\n  }\n})\n\nconst onClickControl = () => {\n  if (!inputEl.value) {\n    return\n  }\n\n  inputEl.value.focus()\n}\n\nconst isFieldFocused = ref(false)\n\nconst onFocusInput = () => {\n  isFieldFocused.value = true\n\n  emit('focus')\n}\n\nconst onBlurInput = () => {\n  isFieldFocused.value = false\n\n  emit('blur')\n}\n\nconst isActive = computed(() => {\n  return isFieldFocused.value || model.value\n})\n\nconst showClearIcon = computed(() => {\n  return props.fixedClearIcon || model.value\n})\n\nconst inputStyles = computed(() => {\n  const styles = []\n\n  if (props.width) {\n    switch (typeof props.width) {\n      case 'string':\n        if (props.width.includes('px') || props.width.includes('%')) {\n          styles.push(`width: ${props.width}`)\n        } else {\n          styles.push(`width: ${props.width}px`)\n        }\n        break\n\n      case 'number':\n        styles.push(`width: ${props.width}px`)\n        break\n    }\n  }\n\n  return styles\n})\n\nconst inputClasses = computed(() => [\n  'app-input',\n  props.class,\n  {\n    'app-input--active': isActive.value,\n    'app-input--loading': props.loading,\n    'app-input--error': props.errorMessages?.length,\n  },\n])\n\nconst inputType = ref(props.type)\n\nconst onChangeInputType = (type: InputType) => {\n  inputType.value = type\n}\n</script>\n\n<template>\n  <div data-test-id=\"input\" :class=\"inputClasses\" :style=\"inputStyles\">\n    <div v-if=\"label\" data-test-id=\"input-label\" class=\"app-input__label\">\n      {{ label }}\n    </div>\n\n    <div class=\"app-input__input\">\n      <div class=\"app-input__control\" @click=\"onClickControl\">\n        <div v-if=\"$slots['prepend-inner']\" class=\"app-input__prepend\">\n          <slot name=\"prepend-inner\" />\n        </div>\n\n        <div class=\"app-input__text\">\n          <div\n            v-if=\"prefix\"\n            data-test-id=\"input-prefix\"\n            class=\"app-input__prefix\"\n            :class=\"{\n              'app-input__prefix--active': model,\n            }\"\n          >\n            {{ prefix }}\n          </div>\n\n          <input\n            ref=\"inputEl\"\n            v-model=\"model\"\n            v-bind=\"$attrs\"\n            data-test-id=\"input-field\"\n            class=\"app-input__field\"\n            :type=\"inputType\"\n            :disabled=\"disabled\"\n            :placeholder=\"placeholder\"\n            :autocomplete=\"autocomplete\"\n            :maxlength=\"maxlength\"\n            :minlength=\"minlength\"\n            @focus=\"onFocusInput\"\n            @blur=\"onBlurInput\"\n          />\n        </div>\n\n        <div\n          v-if=\"loading\"\n          data-test-id=\"input-loader\"\n          class=\"app-input__loader\"\n          role=\"progressbar\"\n        >\n          <the-loader variant=\"linear\" />\n        </div>\n\n        <div v-if=\"$slots['append-inner']\" class=\"app-input__append\">\n          <slot name=\"append-inner\" />\n        </div>\n\n        <div v-else-if=\"type === 'password'\" class=\"app-input__password-icon\">\n          <transition name=\"ui-fade\" mode=\"out-in\">\n            <the-icon\n              v-if=\"inputType === 'password'\"\n              data-test-id=\"input-password\"\n              class=\"app-input__action-icon\"\n              name=\"view\"\n              color=\"var(--ui-dark-grey)\"\n              clickable\n              @click=\"onChangeInputType('text')\"\n            />\n\n            <the-icon\n              v-else\n              data-test-id=\"input-password\"\n              class=\"app-input__action-icon\"\n              name=\"view-off\"\n              color=\"var(--ui-dark-grey)\"\n              clickable\n              @click=\"onChangeInputType('password')\"\n            />\n          </transition>\n        </div>\n\n        <div v-else-if=\"clearable && !disabled\" class=\"app-input__clear-icon\">\n          <transition name=\"ui-fade\">\n            <the-icon\n              v-show=\"showClearIcon\"\n              class=\"app-input__action-icon\"\n              data-test-id=\"input-clear\"\n              name=\"close\"\n              color=\"var(--ui-dark-grey)\"\n              clickable\n              @click=\"clear\"\n            />\n          </transition>\n        </div>\n      </div>\n\n      <the-input-error\n        v-if=\"!hideDetails\"\n        :dynamic-height=\"dynamicDetails\"\n        :error-messages=\"errorMessages\"\n      />\n    </div>\n  </div>\n</template>\n\n<style scoped lang=\"scss\">\n@use '../../assets/ui-layer/styles/mixins' as *;\n\n.app-input {\n  width: 100%;\n  color: var(--ui-text-primary);\n\n  &__label {\n    margin-bottom: 2px;\n    font-size: 12px;\n    font-weight: 600;\n    line-height: 16px;\n  }\n\n  /* Default */\n  &__control {\n    position: relative;\n    display: flex;\n    gap: 8px;\n    align-items: center;\n    padding-right: 8px;\n    padding-left: 12px;\n    overflow: hidden;\n    font-weight: 600;\n    cursor: text;\n    background-color: var(--ui-grey);\n    border: 1px solid var(--ui-grey);\n    border-radius: 10px;\n    box-shadow: unset;\n    transition: border-color 0.3s ease, color 0.3s ease,\n      background-color 0.3s ease;\n\n    &:hover {\n      background-color: var(--ui-grey--hover);\n    }\n\n    @include media('>=desktop-mini') {\n      padding-left: 8px;\n    }\n  }\n\n  &__text {\n    display: flex;\n    gap: 4px;\n    align-items: center;\n    width: 100%;\n  }\n\n  &__prefix {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 14px;\n    line-height: 38px;\n    color: var(--ui-text-secondary);\n    cursor: default;\n    transition: color 0.3s ease;\n\n    &--active {\n      color: var(--ui-text-primary);\n    }\n  }\n\n  &__field {\n    all: unset;\n    width: 100%;\n    height: 38px;\n    min-height: unset;\n    padding: 0;\n    font-size: 14px;\n    line-height: 40px;\n    color: var(--ui-text-primary);\n\n    &::placeholder {\n      font-size: 14px;\n      line-height: 40px;\n      color: var(--ui-text-secondary);\n    }\n\n    &[type='number'] {\n      -moz-appearance: textfield;\n\n      &::-webkit-outer-spin-button,\n      &::-webkit-inner-spin-button {\n        margin: 0;\n        -webkit-appearance: none;\n      }\n    }\n  }\n\n  /* Loading */\n  &__loader {\n    position: absolute;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    height: 2px;\n  }\n\n  /* Icons */\n  &__prepend,\n  &__append {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    :deep(svg) {\n      fill: var(--ui-dark-grey);\n      stroke: var(--ui-dark-grey);\n    }\n  }\n\n  &--active {\n    .app-input__prepend,\n    .app-input__append,\n    .app-input__password-icon {\n      :deep(svg) {\n        fill: var(--ui-secondary);\n        stroke: var(--ui-secondary);\n      }\n    }\n  }\n\n  &__clear-icon,\n  &__password-icon {\n    width: 24px;\n    height: 24px;\n    user-select: none;\n  }\n\n  &__action-icon {\n    &:hover {\n      --fillColor: var(--ui-secondary) !important;\n      --strokeColor: var(--ui-secondary) !important;\n    }\n  }\n\n  /* Error */\n  &--error {\n    .app-input__control {\n      border-color: var(--ui-error);\n    }\n  }\n\n  /* Disabled */\n  &__input:has(input:disabled) {\n    pointer-events: none;\n    user-select: none;\n    opacity: 0.5;\n\n    .app-input__control {\n      cursor: unset;\n\n      &:hover {\n        background-color: var(--ui-grey);\n      }\n    }\n  }\n}\n</style>\n"],"names":["props","__props","emit","__emit","model","_useModel","clear","inputEl","ref","onMounted","onClickControl","isFieldFocused","onFocusInput","onBlurInput","isActive","computed","showClearIcon","inputStyles","styles","inputClasses","_a","inputType","onChangeInputType","type"],"mappings":";;8kDAuBA,MAAMA,EAAQC,EAeRC,EAAOC,EAEPC,EAAQC,EAAoBJ,EAAA,YAAA,EAE5BK,EAAQ,IAAM,CAClBF,EAAM,MAAQ,GACdF,EAAK,OAAO,CACd,EAEMK,EAAUC,EAAwB,IAAI,EAE5CC,EAAU,IAAM,CACVT,EAAM,WAAaO,EAAQ,OAC7BA,EAAQ,MAAM,MAAM,CACtB,CACD,EAED,MAAMG,EAAiB,IAAM,CACtBH,EAAQ,OAIbA,EAAQ,MAAM,MAAM,CACtB,EAEMI,EAAiBH,EAAI,EAAK,EAE1BI,EAAe,IAAM,CACzBD,EAAe,MAAQ,GAEvBT,EAAK,OAAO,CACd,EAEMW,EAAc,IAAM,CACxBF,EAAe,MAAQ,GAEvBT,EAAK,MAAM,CACb,EAEMY,EAAWC,EAAS,IACjBJ,EAAe,OAASP,EAAM,KACtC,EAEKY,EAAgBD,EAAS,IACtBf,EAAM,gBAAkBI,EAAM,KACtC,EAEKa,EAAcF,EAAS,IAAM,CACjC,MAAMG,EAAS,CAAC,EAEhB,GAAIlB,EAAM,MACA,OAAA,OAAOA,EAAM,MAAO,CAC1B,IAAK,SACCA,EAAM,MAAM,SAAS,IAAI,GAAKA,EAAM,MAAM,SAAS,GAAG,EACxDkB,EAAO,KAAK,UAAUlB,EAAM,KAAK,EAAE,EAEnCkB,EAAO,KAAK,UAAUlB,EAAM,KAAK,IAAI,EAEvC,MAEF,IAAK,SACHkB,EAAO,KAAK,UAAUlB,EAAM,KAAK,IAAI,EACrC,KAAA,CAIC,OAAAkB,CAAA,CACR,EAEKC,EAAeJ,EAAS,IAAM,OAAA,OAClC,YACAf,EAAM,MACN,CACE,oBAAqBc,EAAS,MAC9B,qBAAsBd,EAAM,QAC5B,oBAAoBoB,EAAApB,EAAM,gBAAN,YAAAoB,EAAqB,MAAA,CAC3C,EACD,EAEKC,EAAYb,EAAIR,EAAM,IAAI,EAE1BsB,EAAqBC,GAAoB,CAC7CF,EAAU,MAAQE,CACpB","debug_id":"f3c5a63c-f6cc-55ae-85f2-3b3913e94758"}