{"version":3,"file":"TextareaWithLimit.vue_vue_type_script_setup_true_lang-5813798e.js","sources":["../../client/packages/shared/components/TextareaWithLimit.vue"],"sourcesContent":["<template>\n    <div class=\"form-group textAreaWithLimit\" :class=\"wrapperClass\">\n        <textarea\n            ref=\"textarea\"\n            v-bind=\"$attrs\"\n            class=\"form-control\"\n            :value=\"modelValue\"\n            :minlength=\"minlengthValue\"\n            :maxlength=\"maxlength\"\n            @input=\"update\"\n        />\n        <div v-show=\"showLimits\" class=\"@flex @text-sfc-medium-grey l10 @py-[3px]\">\n            <span v-if=\"(+minlength)\" class=\"@lowercase charsRequired\">{{minlength}} characters required</span>\n            <span class=\"@ml-auto charsMax\">{{modelValue?.length || 0}} / {{maxlength}}</span>\n        </div>\n    </div>\n</template>\n\n<script lang=\"ts\" setup>\n    import {ref, computed, onMounted, onBeforeUnmount} from \"vue\";\n    import {debounce} from \"lodash-es\";\n\n    defineOptions({\n        inheritAttrs: false\n    });\n\n    const props = defineProps({\n        modelValue: {type: String, default: \"\"},\n        maxlength: {type: [Number, String], default: null},\n        minlength: {type: [Number, String], default: 0},\n        wrapperClass: {type: String, default: \"\"},\n        fitContent: {type: Boolean, default: true},\n        showLimits: {type: Boolean, default: true}\n    });\n\n    const emit = defineEmits([\"update:modelValue\"]);\n\n    const debounceFunc = ref();\n    const textarea = ref();\n\n    const minlengthValue = computed(()=> {\n        return props.modelValue ? props.minlength : undefined;\n    });\n\n    const resizeToFit = () => {\n        if (props.fitContent && textarea.value) {\n            const textareaRef = textarea.value;\n            textareaRef.style.height = \"\";\n            textareaRef.style.height = (textareaRef.scrollHeight + 5) + \"px\";\n        }\n    };\n\n    const update = (e: Event) => {\n        textarea.value?.setCustomValidity(\"\");\n        resizeToFit();\n        emit(\"update:modelValue\", (e.target as HTMLTextAreaElement).value);\n    };\n\n    onMounted(() => {\n        if (props.modelValue && props.minlength > props.modelValue.length) {\n            textarea.value?.setCustomValidity(`${props.minlength} characters required`);\n        }\n        resizeToFit();\n        debounceFunc.value = debounce(resizeToFit, 500);\n        window.addEventListener(\"resize\", debounceFunc.value);\n    });\n\n    onBeforeUnmount(() => {\n        window.removeEventListener(\"resize\", debounceFunc.value);\n    });\n</script>\n"],"names":["props","__props","emit","__emit","debounceFunc","ref","textarea","minlengthValue","computed","resizeToFit","textareaRef","update","e","_a","onMounted","debounce","onBeforeUnmount"],"mappings":"8wCA0BI,MAAMA,EAAQC,EASRC,EAAOC,EAEPC,EAAeC,IACfC,EAAWD,IAEXE,EAAiBC,EAAS,IACrBR,EAAM,WAAaA,EAAM,UAAY,MAC/C,EAEKS,EAAc,IAAM,CAClB,GAAAT,EAAM,YAAcM,EAAS,MAAO,CACpC,MAAMI,EAAcJ,EAAS,MAC7BI,EAAY,MAAM,OAAS,GAC3BA,EAAY,MAAM,OAAUA,EAAY,aAAe,EAAK,IAChE,CAAA,EAGEC,EAAUC,GAAa,QAChBC,EAAAP,EAAA,QAAA,MAAAO,EAAO,kBAAkB,IACtBJ,IACPP,EAAA,oBAAsBU,EAAE,OAA+B,KAAK,CAAA,EAGrE,OAAAE,EAAU,IAAM,OACRd,EAAM,YAAcA,EAAM,UAAYA,EAAM,WAAW,UACvDa,EAAAP,EAAS,QAAT,MAAAO,EAAgB,kBAAkB,GAAGb,EAAM,SAAS,yBAE5CS,IACCL,EAAA,MAAQW,EAASN,EAAa,GAAG,EACvC,OAAA,iBAAiB,SAAUL,EAAa,KAAK,CAAA,CACvD,EAEDY,EAAgB,IAAM,CACX,OAAA,oBAAoB,SAAUZ,EAAa,KAAK,CAAA,CAC1D"}