@kelvininc/ui-components
Version:
Kelvin UI Components
110 lines (105 loc) • 7.61 kB
JavaScript
import { p as proxyCustomElement, H, d as createEvent, h, e as Host } from './p-D6GMjtmE.js';
import { g as getUTF8StringLength } from './p-BVsEG3aJ.js';
import { d as defineCustomElement$2 } from './p-B41PGLQm.js';
const textAreaCss = "@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}";
const KvTextArea$1 = /*@__PURE__*/ proxyCustomElement(class KvTextArea extends H {
constructor() {
super();
this.__registerHost();
this.__attachShadow();
this.textChange = createEvent(this, "textChange", 7);
/** @inheritdoc */
this.counter = true;
/** @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: '563361c81dd15676c6c75794d0d87d4d75891266' }, h("div", { key: '695dc16e80e68d394c30fbb07833a4d363301c8c', class: { 'text-area-container': true, 'disabled': this.disabled } }, this.icon && h("kv-icon", { key: 'ad6a95da82c4167d520cd738ca6d365fa6acef83', name: this.icon, customClass: "icon-20", class: "left-icon" }), h("div", { key: 'c09451c47db18ecae4d6451917b977a8b51788d4', class: "text-area", onClick: this.focusTextArea }, h("div", { key: 'e54da08512d2021ff229f01efd15914b92d7c5bf', class: {
'text-area-wrapper': true,
'has-text': ((_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.innerText.length) > 0
} }, h("div", { key: 'b5525779604dcb6de6c9d2dc58c7bf8c3d47f43b', 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: '6f98c8f1ae5daa28c78194ac6521a6e5bbdae202', class: "character-counter" }, "Max. character: ", this.curCharLength, "/", this.maxCharLength))))));
}
static get style() { return textAreaCss; }
}, [1, "kv-text-area", {
"icon": [513],
"text": [513],
"placeholder": [513],
"maxCharLength": [514, "max-char-length"],
"counter": [516],
"disabled": [516],
"curCharLength": [32],
"showPlaceholder": [32]
}, [[1, "keydown", "handleKeyDown"]]]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["kv-text-area", "kv-icon"];
components.forEach(tagName => { switch (tagName) {
case "kv-text-area":
if (!customElements.get(tagName)) {
customElements.define(tagName, KvTextArea$1);
}
break;
case "kv-icon":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
} });
}
defineCustomElement$1();
const KvTextArea = KvTextArea$1;
const defineCustomElement = defineCustomElement$1;
export { KvTextArea, defineCustomElement };