@kelvininc/ui-components
Version:
Kelvin UI Components
260 lines (259 loc) • 9.74 kB
JavaScript
import { Host, h } from "@stencil/core";
import { getUTF8StringLength } from "../../utils/string.helper";
export class KvTextArea {
constructor() {
/** @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 is() { return "kv-text-area"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["text-area.scss"]
};
}
static get styleUrls() {
return {
"$": ["text-area.css"]
};
}
static get properties() {
return {
"icon": {
"type": "string",
"attribute": "icon",
"mutable": false,
"complexType": {
"original": "EIconName",
"resolved": "EIconName",
"references": {
"EIconName": {
"location": "import",
"path": "../icon/icon.types",
"id": "src/components/icon/icon.types.ts::EIconName"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Icon to show to the left of the text field"
},
"getter": false,
"setter": false,
"reflect": true
},
"text": {
"type": "string",
"attribute": "text",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) The text to show inside the text area"
},
"getter": false,
"setter": false,
"reflect": true
},
"placeholder": {
"type": "string",
"attribute": "placeholder",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) The placeholder to show in the text area"
},
"getter": false,
"setter": false,
"reflect": true
},
"maxCharLength": {
"type": "number",
"attribute": "max-char-length",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) The maximum number of characters allowed"
},
"getter": false,
"setter": false,
"reflect": true
},
"counter": {
"type": "boolean",
"attribute": "counter",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) If `true` the chars counter is displayed. Default: `true`"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "true"
},
"disabled": {
"type": "boolean",
"attribute": "disabled",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) If `true` the text area is disabled. Default: `false`."
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "false"
}
};
}
static get states() {
return {
"curCharLength": {},
"showPlaceholder": {}
};
}
static get events() {
return [{
"method": "textChange",
"name": "textChange",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "Emits the current text when there's a change"
},
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
}
}];
}
static get listeners() {
return [{
"name": "keydown",
"method": "handleKeyDown",
"target": undefined,
"capture": false,
"passive": true
}];
}
}