{"version":3,"file":"DkAmGPWP.js","sources":["../../../../node_modules/@smenaspace/ui-layer/components/textarea/Textarea.vue"],"sourcesContent":["<script setup lang=\"ts\">\ntype Props = {\n  label?: string\n  rows?: string | number\n  placeholder?: string\n  counter?: string | number\n  disabled?: boolean\n  loading?: boolean\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  rows: 2,\n  label: '',\n  placeholder: '',\n  counter: '',\n})\n\nconst attrs = useAttrs()\n\nconst model = defineModel<string>({ default: '' })\n\nconst counterContent = computed(() => {\n  return `${model.value.length}/${props.counter}`\n})\n\nconst fieldStyles = computed(() => {\n  if (attrs.width) {\n    return { width: `${attrs.width}px` }\n  }\n\n  return {}\n})\n</script>\n\n<template>\n  <div class=\"app-textarea\">\n    <div v-if=\"label\" data-test-id=\"textarea-label\" class=\"app-textarea__label\">\n      {{ label }}\n    </div>\n\n    <textarea\n      v-model=\"model\"\n      data-test-id=\"textarea-field\"\n      class=\"app-textarea__field\"\n      :style=\"fieldStyles\"\n      v-bind=\"$attrs\"\n      :placeholder=\"placeholder\"\n      :aria-disabled=\"disabled\"\n      :disabled=\"disabled\"\n      :maxlength=\"counter\"\n      :rows=\"rows\"\n    />\n\n    <div\n      v-if=\"counter\"\n      data-test-id=\"textarea-counter\"\n      class=\"app-textarea__counter\"\n    >\n      {{ counterContent }}\n    </div>\n\n    <div\n      v-if=\"loading\"\n      data-test-id=\"textarea-loader\"\n      class=\"app-textarea__loader\"\n      role=\"progressbar\"\n    >\n      <the-loader variant=\"linear\" />\n    </div>\n  </div>\n</template>\n\n<style scoped lang=\"scss\">\n@use '../../assets/ui-layer/styles/mixins' as *;\n\n.app-textarea {\n  position: relative;\n\n  &__label {\n    margin-bottom: 2px;\n    font-size: 12px;\n    font-weight: 600;\n    line-height: 16px;\n    color: var(--ui-text-primary);\n  }\n\n  &__counter {\n    position: absolute;\n    right: 4px;\n    bottom: -2px;\n    z-index: 1;\n    font-size: 12px;\n    font-weight: 600;\n    line-height: 16px;\n    color: var(--ui-text-secondary);\n    text-align: right;\n    visibility: hidden;\n    user-select: none;\n    opacity: 0;\n    transition: all 0.2s ease-in-out;\n  }\n\n  &__field {\n    position: relative;\n    z-index: 2;\n    display: block;\n    width: 100%;\n    min-height: 58px;\n    padding: 12px 12px 10px;\n    font-family: inherit;\n    font-size: 14px;\n    font-weight: 600;\n    line-height: 18px;\n    color: var(--ui-text-primary);\n    resize: none;\n    background-color: var(--ui-grey);\n    border: none;\n    border-radius: 10px;\n    outline: none;\n    transition: background-color 0.3s ease;\n\n    &:disabled {\n      opacity: 0.5;\n    }\n\n    &:hover {\n      background-color: var(--ui-grey--hover);\n    }\n\n    &:focus,\n    &:focus-visible {\n      & ~ .app-textarea__counter {\n        visibility: visible;\n        opacity: 1;\n        transform: translateY(100%);\n      }\n    }\n\n    &::placeholder {\n      font-size: inherit;\n      font-weight: inherit;\n      line-height: inherit;\n      color: var(--ui-text-secondary);\n    }\n  }\n\n  &__loader {\n    position: absolute;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    height: 2px;\n  }\n}\n</style>\n"],"names":["props","__props","attrs","useAttrs","model","_useModel","counterContent","computed","fieldStyles"],"mappings":";;8iCAUA,MAAMA,EAAQC,EAORC,EAAQC,EAAS,EAEjBC,EAAQC,EAAmCJ,EAAA,YAAA,EAE3CK,EAAiBC,EAAS,IACvB,GAAGH,EAAM,MAAM,MAAM,IAAIJ,EAAM,OAAO,EAC9C,EAEKQ,EAAcD,EAAS,IACvBL,EAAM,MACD,CAAE,MAAO,GAAGA,EAAM,KAAK,IAAK,EAG9B,CAAC,CACT","debug_id":"1ab56758-c89b-5452-be2b-855697240dd4"}