@kelvininc/ui-components
Version:
Kelvin UI Components
82 lines (77 loc) • 6.68 kB
JavaScript
'use strict';
var index = require('./index-DpuMIXDY.js');
var string_helper = require('./string.helper-B1KQeZk_.js');
require('./isEmpty-C_HQvGy-.js');
require('./_Set-BIUoGFN6.js');
require('./_Map-DiT24PAz.js');
require('./isObject-COPdF2vE.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 = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.textChange = index.createEvent(this, "textChange", 7);
/** @inheritdoc */
this.counter = true;
/** @inheritdoc */
this.disabled = false;
this.curCharLength = string_helper.getUTF8StringLength(this.text);
this.showPlaceholder = !this.text ? true : false;
this.getTextLength = () => {
return string_helper.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 + string_helper.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 = string_helper.getUTF8StringLength(textValue);
}
render() {
var _a;
return (index.h(index.Host, { key: '563361c81dd15676c6c75794d0d87d4d75891266' }, index.h("div", { key: '695dc16e80e68d394c30fbb07833a4d363301c8c', class: { 'text-area-container': true, 'disabled': this.disabled } }, this.icon && index.h("kv-icon", { key: 'ad6a95da82c4167d520cd738ca6d365fa6acef83', name: this.icon, customClass: "icon-20", class: "left-icon" }), index.h("div", { key: 'c09451c47db18ecae4d6451917b977a8b51788d4', class: "text-area", onClick: this.focusTextArea }, index.h("div", { key: 'e54da08512d2021ff229f01efd15914b92d7c5bf', class: {
'text-area-wrapper': true,
'has-text': ((_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.innerText.length) > 0
} }, index.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 && (index.h("div", { key: '6f98c8f1ae5daa28c78194ac6521a6e5bbdae202', class: "character-counter" }, "Max. character: ", this.curCharLength, "/", this.maxCharLength))))));
}
};
KvTextArea.style = textAreaCss;
exports.kv_text_area = KvTextArea;