@kelvininc/ui-components
Version:
Kelvin UI Components
1 lines • 5.43 kB
JavaScript
import{r as t,c as e,h as a,H as r}from"./p-WTwLUJcM.js";import{g as i}from"./p-BJ9G-v5a.js";import"./p-COrzvkrr.js";import"./p-GpUjqmUL.js";import"./p-Dkd2PDJ-.js";const o=class{constructor(a){t(this,a),this.textChange=e(this,"textChange",7),this.counter=!0,this.counterAlwaysVisible=!1,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 e=this.getTextLength();this.maxCharLength&&this.maxCharLength<=e&&t.preventDefault()},this.onClipboardPaste=t=>{const e=this.getTextLength(),a=t.clipboardData.getData("text/plain");this.maxCharLength&&e+i(a)<=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 e=this.inputRef.innerText;this.showPlaceholder=0===e.length,this.curCharLength=i(e)}render(){var t;return a(r,{key:"b56d4fb997b44de796195497602ade6785d471f3"},a("div",{key:"014fe46012e917e90cf33a8e0c08ffb68cbe43c3",class:{"text-area-container":!0,disabled:this.disabled,"counter-always-visible":this.counterAlwaysVisible}},this.icon&&a("kv-icon",{key:"8da0a8dcb26dab7a70c4499d58b3cbf01ee6ada1",name:this.icon}),a("div",{key:"6b53a57b132a8ab425f5bb4ce23ce5313d1ca07e",class:"text-area",onClick:this.focusTextArea},a("div",{key:"2bcd8247240c9058c7959968dc5313b7ad749875",class:{"text-area-wrapper":!0,"has-text":(null===(t=this.inputRef)||void 0===t?void 0:t.innerText.length)>0}},a("div",{key:"f6788ced3de05148443ccd27abec9d92b1aa41a6",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&&a("div",{key:"eb82a34cd9520d8b8ac6f92b721da56cd44e444c",class:"character-counter"},"Max. character: ",this.curCharLength,"/",this.maxCharLength))))}};o.style='@property --rotation{syntax:"<angle>";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}kv-dropdown-base:not(.hydrated)>[slot=list]{display:none}:host{--height-default:var(--text-area-height-default);--height-active:100px}.text-area-container{display:flex;gap:var(--text-area-gap-default);align-items:flex-start}.text-area-container kv-icon{--icon-color:var(--text-area-icon-color-default);--icon-width:var(--text-area-icon-size-default);--icon-height:var(--text-area-icon-size-default);margin-top:var(--text-area-gap-default)}.text-area-container .text-area{display:flex;flex-direction:column;flex:1;gap:var(--spacing-md)}.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(--scrollbar-thumb-default);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(--text-area-padding-y-default) var(--text-area-padding-x-default);border:var(--text-area-border-thickness-default) solid var(--text-area-border-color-default);border-radius:var(--text-area-radius-default);height:var(--height-default);overflow:auto;transition:height 0.25s ease-in-out}.text-area-container .text-area .text-area-wrapper .input{font-family:Proxima Nova;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0;outline:none;height:inherit;color:var(--text-area-text-default);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.has-text{height:var(--height-active);border-color:var(--text-area-border-color-filled)}.text-area-container .text-area .text-area-wrapper.has-text .input{color:var(--text-area-text-filled)}.text-area-container .text-area .text-area-wrapper:hover{border-color:var(--text-area-border-color-hover)}.text-area-container .text-area .text-area-wrapper:hover .input{color:var(--text-area-text-hover)}.text-area-container .text-area .text-area-wrapper:has(.input:focus){border-color:var(--text-area-border-color-selected)}.text-area-container .text-area .text-area-wrapper:has(.input:focus) .input{color:var(--text-area-text-selected)}.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:Proxima Nova;font-weight:400;font-size:12px;line-height:16px;letter-spacing:0;color:var(--text-area-helper-text-default);margin-left:var(--spacing-xl);display:none}.text-area-container.counter-always-visible .text-area .character-counter{display:block}.text-area-container.disabled .text-area .text-area-wrapper{border-color:var(--border-interactive-input-disabled)}.text-area-container.disabled .text-area .text-area-wrapper .input{color:var(--text-interactive-input-disabled)}.text-area-container.disabled .text-area .text-area-wrapper:hover:not(:has(.input:focus)){cursor:not-allowed}';export{o as kv_text_area}