@kelvininc/ui-components
Version:
Kelvin UI Components
285 lines (284 loc) • 10.7 kB
JavaScript
import { Host, h } from "@stencil/core";
import { getUTF8StringLength } from "../../utils/string.helper";
export class KvTextArea {
constructor() {
/** @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))))));
}
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"
},
"counterAlwaysVisible": {
"type": "boolean",
"attribute": "counter-always-visible",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) If `true` the counter is always visible (not only on focus). Default: `false`"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "false"
},
"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
}];
}
}