@kelvininc/ui-components
Version:
Kelvin UI Components
1 lines • 5.16 kB
JavaScript
import{r as t,c as a,h as e,H as r}from"./p-D-JVwta2.js";import{g as i}from"./p-DQfCDnBw.js";import"./p-BA_npyc9.js";import"./p-CiDQ1Z66.js";import"./p-DfPM2t43.js";import"./p-Dkd2PDJ-.js";const n=class{constructor(e){t(this,e),this.textChange=a(this,"textChange",7),this.counter=!0,this.disabled=!1,this.curCharLength=i(this.text),this.showPlaceholder=!this.text,this.getTextLength=()=>i(this.inputRef.innerText),this.onInput=()=>{this.syncTextValues(),this.textChange.emit(this.inputRef.innerText)},this.onKeyPress=t=>{const a=this.getTextLength();this.maxCharLength&&this.maxCharLength<=a&&t.preventDefault()},this.onClipboardPaste=t=>{const a=this.getTextLength(),e=t.clipboardData.getData("text/plain");this.maxCharLength&&a+i(e)<=this.maxCharLength||t.preventDefault()},this.focusTextArea=()=>{this.inputRef.focus()},this.blurTextArea=()=>{this.inputRef.blur()},this.updateInputRef=t=>{this.inputRef=t,this.syncTextValues(this.text)}}handleKeyDown(t){"Escape"===t.code&&this.blurTextArea()}syncTextValues(t){null!=t&&(this.inputRef.innerText=t);const a=this.inputRef.innerText;this.showPlaceholder=0===a.length,this.curCharLength=i(a)}render(){var t;return e(r,{key:"563361c81dd15676c6c75794d0d87d4d75891266"},e("div",{key:"695dc16e80e68d394c30fbb07833a4d363301c8c",class:{"text-area-container":!0,disabled:this.disabled}},this.icon&&e("kv-icon",{key:"ad6a95da82c4167d520cd738ca6d365fa6acef83",name:this.icon,customClass:"icon-20",class:"left-icon"}),e("div",{key:"c09451c47db18ecae4d6451917b977a8b51788d4",class:"text-area",onClick:this.focusTextArea},e("div",{key:"e54da08512d2021ff229f01efd15914b92d7c5bf",class:{"text-area-wrapper":!0,"has-text":(null===(t=this.inputRef)||void 0===t?void 0:t.innerText.length)>0}},e("div",{key:"b5525779604dcb6de6c9d2dc58c7bf8c3d47f43b",class:{input:!0,placeholder:this.showPlaceholder},"data-placeholder":this.placeholder,ref:this.updateInputRef,onPaste:this.onClipboardPaste,onKeyPress:this.onKeyPress,onInput:this.onInput,contentEditable:!this.disabled})),this.counter&&this.maxCharLength&&e("div",{key:"6f98c8f1ae5daa28c78194ac6521a6e5bbdae202",class:"character-counter"},"Max. character: ",this.curCharLength,"/",this.maxCharLength))))}};n.style='@property --rotation{syntax:"<angle>";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}:host{--height-default:36px;--height-active:100px}.text-area-container{display:flex;gap:var(--kv-spacing-2x, 8px);align-items:flex-start}.text-area-container .left-icon{margin-top:var(--kv-spacing-2x, 8px)}.text-area-container .text-area{display:flex;flex-direction:column;flex:1;gap:var(--kv-spacing-2x, 8px)}.text-area-container .text-area::-webkit-scrollbar{width:15px;height:15px}.text-area-container .text-area::-webkit-scrollbar-thumb{border-radius:10px;background-color:var(--kv-neutral-6, #3f3f3f);border:4px solid transparent;background-clip:content-box}.text-area-container .text-area::-webkit-scrollbar-corner{background-color:transparent}.text-area-container .text-area .text-area-wrapper{padding:var(--kv-spacing-2x, 8px) var(--kv-spacing-3x, 12px);border:1px solid var(--kv-neutral-7, #2a2a2a);border-radius:4px;height:var(--height-default);overflow:auto;transition:height 0.25s ease-in-out}.text-area-container .text-area .text-area-wrapper .input{font-family:var(--kv-primary-font, "proxima-nova", sans-serif, "Arial");font-size:14px;font-weight:400;font-stretch:normal;font-style:normal;line-height:21px;letter-spacing:normal;text-transform:none;outline:none;height:inherit;color:var(--kv-neutral-4, #bebebe);overflow-wrap:anywhere}.text-area-container .text-area .text-area-wrapper .input.placeholder::before{content:attr(data-placeholder)}.text-area-container .text-area .text-area-wrapper:hover,.text-area-container .text-area .text-area-wrapper:has(.input:focus),.text-area-container .text-area .text-area-wrapper.has-text{border:1px solid var(--kv-neutral-6, #3f3f3f)}.text-area-container .text-area .text-area-wrapper:hover .input,.text-area-container .text-area .text-area-wrapper:has(.input:focus) .input,.text-area-container .text-area .text-area-wrapper.has-text .input{color:var(--kv-neutral-2, #e5e5e5)}.text-area-container .text-area .text-area-wrapper:has(.input:focus),.text-area-container .text-area .text-area-wrapper.has-text{height:var(--height-active)}.text-area-container .text-area .text-area-wrapper:hover:not(:has(.input:focus)){cursor:pointer}.text-area-container .text-area:has(.input:focus) .character-counter{display:block}.text-area-container .text-area .character-counter{font-family:var(--kv-primary-font, "proxima-nova", sans-serif, "Arial");font-size:12px;font-weight:400;font-stretch:normal;font-style:normal;line-height:18px;letter-spacing:normal;text-transform:none;color:var(--kv-neutral-4, #bebebe);margin-left:var(--kv-spacing-3x, 12px);display:none}.text-area-container.disabled .text-area .text-area-wrapper{border-color:var(--kv-neutral-5, #707070)}.text-area-container.disabled .text-area .text-area-wrapper .input{color:var(--kv-neutral-5, #707070)}.text-area-container.disabled .text-area .text-area-wrapper:hover:not(:has(.input:focus)){cursor:not-allowed}';export{n as kv_text_area}