@kelvininc/ui-components
Version:
Kelvin UI Components
81 lines (77 loc) • 6.92 kB
JavaScript
import { r as registerInstance, c as createEvent, h, H as Host } from './index-BOTigrTZ.js';
import { g as getUTF8StringLength } from './string.helper-rZ6JCPsX.js';
import './wizard.types-COrzvkrr.js';
import './isEmpty-DYR6-7ab.js';
import './isObject-Dkd2PDJ-.js';
const textAreaCss = "@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}";
const KvTextArea = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.textChange = createEvent(this, "textChange", 7);
/** @inheritdoc */
this.counter = true;
/** @inheritdoc */
this.counterAlwaysVisible = false;
/** @inheritdoc */
this.disabled = false;
this.curCharLength = getUTF8StringLength(this.text);
this.showPlaceholder = !this.text ? true : false;
this.getTextLength = () => {
return getUTF8StringLength(this.inputRef.innerText);
};
this.onInput = () => {
this.syncTextValues();
this.textChange.emit(this.inputRef.innerText);
};
this.onKeyPress = (event) => {
const textLength = this.getTextLength();
if (this.maxCharLength && this.maxCharLength <= textLength) {
event.preventDefault();
}
};
this.onClipboardPaste = (event) => {
const textLength = this.getTextLength();
const pasteData = event.clipboardData.getData('text/plain');
const shouldPaste = this.maxCharLength && textLength + getUTF8StringLength(pasteData) <= this.maxCharLength;
if (!shouldPaste) {
event.preventDefault();
return;
}
};
this.focusTextArea = () => {
this.inputRef.focus();
};
this.blurTextArea = () => {
this.inputRef.blur();
};
this.updateInputRef = (ref) => {
this.inputRef = ref;
this.syncTextValues(this.text);
};
}
handleKeyDown(ev) {
if (ev.code === 'Escape') {
this.blurTextArea();
}
}
syncTextValues(text) {
if (text != null) {
this.inputRef.innerText = text;
}
const textValue = this.inputRef.innerText;
this.showPlaceholder = textValue.length === 0 ? true : false;
this.curCharLength = getUTF8StringLength(textValue);
}
render() {
var _a;
return (h(Host, { key: 'b56d4fb997b44de796195497602ade6785d471f3' }, h("div", { key: '014fe46012e917e90cf33a8e0c08ffb68cbe43c3', class: { 'text-area-container': true, 'disabled': this.disabled, 'counter-always-visible': this.counterAlwaysVisible } }, this.icon && h("kv-icon", { key: '8da0a8dcb26dab7a70c4499d58b3cbf01ee6ada1', name: this.icon }), h("div", { key: '6b53a57b132a8ab425f5bb4ce23ce5313d1ca07e', class: "text-area", onClick: this.focusTextArea }, h("div", { key: '2bcd8247240c9058c7959968dc5313b7ad749875', class: {
'text-area-wrapper': true,
'has-text': ((_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.innerText.length) > 0
} }, h("div", { key: 'f6788ced3de05148443ccd27abec9d92b1aa41a6', class: {
input: true,
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 && (h("div", { key: 'eb82a34cd9520d8b8ac6f92b721da56cd44e444c', class: "character-counter" }, "Max. character: ", this.curCharLength, "/", this.maxCharLength))))));
}
};
KvTextArea.style = textAreaCss;
export { KvTextArea as kv_text_area };