v4web-components
Version:
Stencil Component Starter
249 lines (248 loc) • 6.72 kB
JavaScript
import { h } from '@stencil/core';
export class LabDsTextArea {
constructor() {
this.value = undefined;
this.valueState = this.value;
this.maxLength = 100;
this.minLength = 0;
this.rows = 5;
this.cols = 30;
this.titleInput = '';
this.label = '';
this.disabled = false;
this.helperText = '';
this.state = 'default';
}
handleChange(event) {
this.changeInput.emit(event.target.value);
this.valueState = event.target.value;
}
render() {
var _a;
const iconHelper = {
error: { icon: 'error' },
success: { icon: 'check_circle' },
default: { icon: '' },
};
return (h("div", { class: `v4-input ${this.state} ${this.disabled && 'disabled'}` }, h("div", { class: "title-count" }, h("span", { class: "title-text" }, this.titleInput), h("span", { class: "title-counter" }, this.valueState ? (_a = this.valueState) === null || _a === void 0 ? void 0 : _a.length : '0', "/", this.maxLength)), h("div", { class: "input-helper" }, h("div", { class: "input-icon" }, h("textarea", { rows: this.rows, cols: this.cols, disabled: this.disabled, placeholder: this.label, class: "input-field", maxLength: this.maxLength, minLength: this.minLength, value: this.value, onInput: event => this.handleChange(event) }), iconHelper[this.state].icon && h("lab-ds-icon-not-selectable", { class: "icon right", size: "small", icon: iconHelper[this.state].icon })), this.helperText && (h("span", { class: "helper-text" }, iconHelper[this.state].icon && h("lab-ds-icon-not-selectable", { class: "icon", size: "x-small", icon: iconHelper[this.state].icon }), this.helperText)))));
}
static get is() { return "lab-ds-text-area"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["lab-ds-text-area.css"]
};
}
static get styleUrls() {
return {
"$": ["lab-ds-text-area.css"]
};
}
static get properties() {
return {
"value": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": true,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "value",
"reflect": false
},
"maxLength": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "max-length",
"reflect": false,
"defaultValue": "100"
},
"minLength": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "min-length",
"reflect": false,
"defaultValue": "0"
},
"rows": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "rows",
"reflect": false,
"defaultValue": "5"
},
"cols": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "cols",
"reflect": false,
"defaultValue": "30"
},
"titleInput": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "title-input",
"reflect": false,
"defaultValue": "''"
},
"label": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "label",
"reflect": false,
"defaultValue": "''"
},
"disabled": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "disabled",
"reflect": false,
"defaultValue": "false"
},
"helperText": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "helper-text",
"reflect": false,
"defaultValue": "''"
},
"state": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'error' | 'success' | 'default'",
"resolved": "\"default\" | \"error\" | \"success\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "state",
"reflect": false,
"defaultValue": "'default'"
}
};
}
static get states() {
return {
"valueState": {}
};
}
static get events() {
return [{
"method": "changeInput",
"name": "changeInput",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
}
}];
}
}
//# sourceMappingURL=lab-ds-text-area.js.map