{"version":3,"file":"BGwxA6Hj.js","sources":["../../../../node_modules/@smenaspace/ui-layer/components/transition/TransitionHeight.vue","../../../../node_modules/@smenaspace/ui-layer/components/input/Input.vue"],"sourcesContent":["<script setup lang=\"ts\">\nconst startTransition = (element: HTMLElement) => {\n  element.style.height = `${element.scrollHeight}px`\n}\n\nconst endTransition = (element: HTMLElement) => {\n  element.style.height = ''\n}\n</script>\n\n<template>\n  <transition\n    name=\"height\"\n    @enter=\"startTransition\"\n    @after-enter=\"endTransition\"\n    @before-leave=\"startTransition\"\n    @after-leave=\"endTransition\"\n  >\n    <slot />\n  </transition>\n</template>\n\n<style lang=\"scss\" scoped>\n.height-enter-active,\n.height-leave-active {\n  overflow: hidden;\n  transition: height 0.3s ease, opacity 0.3s ease;\n  will-change: height, opacity;\n}\n\n.height-enter-from,\n.height-leave-to {\n  height: 0 !important;\n  opacity: 0;\n}\n</style>\n","<script setup lang=\"ts\">\nimport TransitionHeight from '../transition/TransitionHeight.vue'\nimport type { InputType } from './types'\n\ntype Props = {\n  label?: string\n  clearable?: 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  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'])\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\nconst onBlurInput = () => {\n  isFieldFocused.value = false\n}\n\nconst isActive = computed(() => {\n  return isFieldFocused.value || model.value\n})\n\nconst errorMessage = computed(() => {\n  if (!props.errorMessages) {\n    return null\n  }\n\n  if (Array.isArray(props.errorMessages)) {\n    return props.errorMessages[0]\n  }\n\n  return props.errorMessages\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--error': errorMessage.value,\n    'app-input--loading': props.loading,\n  },\n])\n\nconst inputType = ref(props.type)\n\nconst onChangeInputType = (type: InputType) => {\n  inputType.value = type\n}\n\nconst detailsClasses = computed(() => [\n  'app-input__details',\n  {\n    // Если нужно отображать подсказку динамически, при наличии ошибок\n    'app-input__details--dynamic-height': props.dynamicDetails,\n  },\n])\n</script>\n\n<template>\n  <div :class=\"inputClasses\" :style=\"inputStyles\">\n    <div v-if=\"label\" class=\"app-input__label\">{{ label }}</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            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            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 v-if=\"loading\" class=\"app-input__loader\" role=\"progressbar\">\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              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              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=\"modelValue\"\n              class=\"app-input__action-icon\"\n              name=\"close\"\n              color=\"var(--ui-unactive-gray)\"\n              clickable\n              @click=\"clear\"\n            />\n          </transition>\n        </div>\n      </div>\n\n      <div v-if=\"!props.hideDetails\" :class=\"detailsClasses\">\n        <TransitionHeight>\n          <div v-if=\"errorMessage\" class=\"app-input__message\">\n            {{ errorMessage }}\n          </div>\n        </TransitionHeight>\n      </div>\n    </div>\n  </div>\n</template>\n\n<style scoped lang=\"scss\">\n@import '../../assets/ui-layer/styles/mixins';\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\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  &__details {\n    display: flex;\n    min-height: 16px;\n    padding: 0;\n    margin-top: 2px;\n    overflow: hidden;\n\n    &--dynamic-height {\n      min-height: 0;\n      margin: 0;\n\n      .app-input__message {\n        padding-top: 2px;\n      }\n    }\n  }\n\n  .app-input__message {\n    font-size: 12px;\n    font-weight: 600;\n    line-height: 16px;\n    color: var(--ui-error);\n    word-break: break-word;\n  }\n\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":["startTransition","element","endTransition","props","__props","emit","__emit","model","_useModel","clear","inputEl","ref","onMounted","onClickControl","isFieldFocused","onFocusInput","onBlurInput","isActive","computed","errorMessage","inputStyles","styles","inputClasses","inputType","onChangeInputType","type","detailsClasses"],"mappings":";;unBACM,MAAAA,EAAmBC,GAAyB,CAChDA,EAAQ,MAAM,OAAS,GAAGA,EAAQ,YAAY,IAAA,EAG1CC,EAAiBD,GAAyB,CAC9CA,EAAQ,MAAM,OAAS,EAAA,opCCiBzB,MAAME,EAAQC,EAcRC,EAAOC,EAEPC,EAAQC,EAAmBJ,EAAA,YAAC,EAE5BK,EAAQ,IAAM,CAClBF,EAAM,MAAQ,GACdF,EAAK,OAAO,CAAA,EAGRK,EAAUC,EAAwB,IAAI,EAE5CC,EAAU,IAAM,CACVT,EAAM,WAAaO,EAAQ,OAC7BA,EAAQ,MAAM,OAChB,CACD,EAED,MAAMG,EAAiB,IAAM,CACtBH,EAAQ,OAIbA,EAAQ,MAAM,OAAM,EAGhBI,EAAiBH,EAAI,EAAK,EAE1BI,EAAe,IAAM,CACzBD,EAAe,MAAQ,EAAA,EAGnBE,EAAc,IAAM,CACxBF,EAAe,MAAQ,EAAA,EAGnBG,EAAWC,EAAS,IACjBJ,EAAe,OAASP,EAAM,KACtC,EAEKY,EAAeD,EAAS,IACvBf,EAAM,cAIP,MAAM,QAAQA,EAAM,aAAa,EAC5BA,EAAM,cAAc,CAAC,EAGvBA,EAAM,cAPJ,IAQV,EAEKiB,EAAcF,EAAS,IAAM,CACjC,MAAMG,EAAS,CAAA,EAEf,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,KACJ,CAGK,OAAAkB,CAAA,CACR,EAEKC,EAAeJ,EAAS,IAAM,CAClC,YACAf,EAAM,MACN,CACE,oBAAqBc,EAAS,MAC9B,mBAAoBE,EAAa,MACjC,qBAAsBhB,EAAM,OAC9B,CAAA,CACD,EAEKoB,EAAYZ,EAAIR,EAAM,IAAI,EAE1BqB,EAAqBC,GAAoB,CAC7CF,EAAU,MAAQE,CAAA,EAGdC,EAAiBR,EAAS,IAAM,CACpC,qBACA,CAEE,qCAAsCf,EAAM,cAC9C,CAAA,CACD","debug_id":"01e985e2-61e7-5ac2-8221-fb68f4f121bb"}