@scania/tegel
Version:
Tegel Design System
552 lines (551 loc) • 21.9 kB
JavaScript
import { h } from "@stencil/core";
import generateUniqueId from "../../utils/generateUniqueId";
import { getAriaInvalid } from "../../utils/getAriaInvalid";
export class TdsTextarea {
constructor() {
this.uuid = generateUniqueId();
/** Label text */
this.label = '';
/** Name attribute */
this.name = '';
/** Position of the label for the Textarea. */
this.labelPosition = 'no-label';
/** Placeholder text */
this.placeholder = '';
/** Value of the input text */
this.value = '';
/** Set input in disabled state */
this.disabled = false;
/** Set input in readonly state */
this.readOnly = false;
/** Hide the readonly icon */
this.hideReadOnlyIcon = false;
/** Error state of input */
this.state = 'default';
/** Mode variant of the Textarea */
this.modeVariant = null;
/** Control of autofocus */
this.autofocus = false;
/** Unset minimum width of 208px. */
this.noMinWidth = false;
/** Listen to the focus state of the input */
this.focusInput = false;
}
handleChange(event) {
this.tdsChange.emit(event);
}
handleBlur(event) {
this.tdsBlur.emit(event);
this.focusInput = false;
}
// Data input event in value prop
handleInput(event) {
if (event.target instanceof HTMLTextAreaElement) {
this.value = event.target.value;
this.tdsInput.emit(event);
}
}
/* Set the input as focus when clicking the whole textarea with suffix/prefix */
handleFocus(event) {
var _a;
(_a = this.textEl) === null || _a === void 0 ? void 0 : _a.focus();
this.focusInput = true;
this.tdsFocus.emit(event);
}
/** Method to programmatically focus the textarea element */
async focusElement() {
if (this.textEl) {
this.textEl.focus();
this.focusInput = true;
}
}
setModeVariant(modeVariant) {
if (this.readOnly && modeVariant === 'primary') {
return 'secondary';
}
if (this.readOnly && modeVariant === 'secondary') {
return 'primary';
}
return modeVariant;
}
render() {
var _a, _b;
return (h("div", { key: '2ccb72218895d827f951926844f7f5912f5e5981', class: {
'textarea-container': true,
'textarea-label-inside': this.labelPosition === 'inside',
'textarea-focus': this.focusInput,
'textarea-disabled': this.disabled,
'textarea-readonly': !this.disabled && this.readOnly,
[`tds-mode-variant-${this.setModeVariant(this.modeVariant)}`]: true,
'textarea-data': this.value !== '',
[`textarea-${this.state}`]: this.state === 'error' || this.state === 'success',
'no-min-width': this.noMinWidth,
} }, this.labelPosition !== 'no-label' && (h("label", { key: '55b640f946d5f3b553f0c8d6f458076e22675a3c', htmlFor: `textarea-element-${this.uuid}`, class: 'textarea-label' }, this.label)), h("div", { key: '716876e13a8f7ce5336410fef5d9b9de90f89e01', class: "textarea-wrapper" }, h("textarea", { key: '80041c04a5bce79615bb92bb3489ec9af9328cd8', id: `textarea-element-${this.uuid}`, class: 'textarea-input', ref: (inputEl) => {
this.textEl = inputEl;
}, disabled: this.disabled, readonly: !this.disabled && this.readOnly, placeholder: this.placeholder, value: this.value, name: this.name, autofocus: this.autofocus, maxlength: this.maxLength, cols: this.cols, rows: this.rows, onFocus: (event) => {
if (!this.readOnly) {
this.handleFocus(event);
}
}, onBlur: (event) => {
if (!this.readOnly) {
this.handleBlur(event);
}
}, onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event), "aria-invalid": getAriaInvalid(this.host, this.state), "aria-readonly": this.readOnly ? 'true' : 'false', "aria-label": this.tdsAriaLabel ? this.tdsAriaLabel : this.label, "aria-describedby": `textarea-helper-element-${this.uuid}` }), h("span", { key: '09fe37f55f352eb6a2e6482dd4a3fd1a5c2a5a4d', class: "textarea-resizer-icon" }, h("svg", { key: '7ddadcc0a6a6392b891fa93abbcb286b95123fbe', width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '486e21dc5f89ca182e3870c010d05f8d05dee56f', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.8536 0.853553C12.0488 0.658291 12.0488 0.341709 11.8536 0.146447C11.6583 -0.0488155 11.3417 -0.0488155 11.1464 0.146447L0.146447 11.1464C-0.0488155 11.3417 -0.0488155 11.6583 0.146447 11.8536C0.341709 12.0488 0.658291 12.0488 0.853553 11.8536L11.8536 0.853553ZM11.8536 4.64645C12.0488 4.84171 12.0488 5.15829 11.8536 5.35355L5.35355 11.8536C5.15829 12.0488 4.84171 12.0488 4.64645 11.8536C4.45118 11.6583 4.45118 11.3417 4.64645 11.1464L11.1464 4.64645C11.3417 4.45118 11.6583 4.45118 11.8536 4.64645ZM11.8536 8.64645C12.0488 8.84171 12.0488 9.15829 11.8536 9.35355L9.35355 11.8536C9.15829 12.0488 8.84171 12.0488 8.64645 11.8536C8.45118 11.6583 8.45118 11.3417 8.64645 11.1464L11.1464 8.64645C11.3417 8.45118 11.6583 8.45118 11.8536 8.64645Z", fill: "currentColor" }))), !this.disabled && !this.hideReadOnlyIcon && this.readOnly && (h("span", { key: 'bcaf8a2615483c20d5047dd182e46a3db316b745', class: "textarea-icon__readonly" }, h("tds-tooltip", { key: 'a70b88e3c48613f80c8c7d558732e3d51a2cb00c', placement: "top-end", text: "This field is non-editable", selector: "#readonly-tooltip" }), h("tds-icon", { key: '7bbe4e5b22c6b1cc6dca8880e03eb3079bc8fe6e', id: "readonly-tooltip", name: "edit_inactive", svgTitle: "inactive" })))), h("span", { key: 'feadff54f5c5fc884a5a7099878ee023a3c6f1c9', class: 'textarea-helper', "aria-live": "assertive", id: `textarea-helper-element-${this.uuid}` }, this.state === 'error' && this.helper && !this.readOnly && (h("tds-icon", { key: 'ea538dae22b40ae4aac1d96064a137d28dbe3a52', name: "error", size: "16px" })), this.helper), ((_a = this.maxLength) !== null && _a !== void 0 ? _a : 0) > 0 && (h("div", { key: '92db8cc03e82c34f47a7c331c871240150b60732', class: 'textarea-textcounter' }, this.value === null ? 0 : (_b = this.value) === null || _b === void 0 ? void 0 : _b.length, h("span", { key: '4788115dbd59ce70f37b2033f3a08a4f8329106e', class: "textfield-textcounter-divider" }, " / "), " ", this.maxLength))));
}
static get is() { return "tds-textarea"; }
static get encapsulation() { return "scoped"; }
static get originalStyleUrls() {
return {
"$": ["textarea.scss"]
};
}
static get styleUrls() {
return {
"$": ["textarea.css"]
};
}
static get properties() {
return {
"label": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Label text"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "label",
"defaultValue": "''"
},
"name": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Name attribute"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "name",
"defaultValue": "''"
},
"helper": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Helper text"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "helper"
},
"cols": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Textarea cols attribute"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "cols"
},
"rows": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Textarea rows attribute"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "rows"
},
"labelPosition": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'inside' | 'outside' | 'no-label'",
"resolved": "\"inside\" | \"no-label\" | \"outside\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Position of the label for the Textarea."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "label-position",
"defaultValue": "'no-label'"
},
"placeholder": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Placeholder text"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "placeholder",
"defaultValue": "''"
},
"value": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Value of the input text"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "value",
"defaultValue": "''"
},
"disabled": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Set input in disabled state"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "disabled",
"defaultValue": "false"
},
"readOnly": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Set input in readonly state"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "read-only",
"defaultValue": "false"
},
"hideReadOnlyIcon": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Hide the readonly icon"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "hide-read-only-icon",
"defaultValue": "false"
},
"state": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'error' | 'success' | 'default'",
"resolved": "\"default\" | \"error\" | \"success\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Error state of input"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "state",
"defaultValue": "'default'"
},
"maxLength": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Max length of input"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "max-length"
},
"modeVariant": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'primary' | 'secondary' | null",
"resolved": "\"primary\" | \"secondary\" | null",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Mode variant of the Textarea"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "mode-variant",
"defaultValue": "null"
},
"autofocus": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Control of autofocus"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "autofocus",
"defaultValue": "false"
},
"noMinWidth": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Unset minimum width of 208px."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "no-min-width",
"defaultValue": "false"
},
"tdsAriaLabel": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Value to be used for the aria-label attribute. Can be used for announcing that readOnly prop is set to true."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "tds-aria-label"
}
};
}
static get states() {
return {
"focusInput": {}
};
}
static get events() {
return [{
"method": "tdsChange",
"name": "tdsChange",
"bubbles": true,
"cancelable": false,
"composed": true,
"docs": {
"tags": [],
"text": "Change event for the Textarea"
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}, {
"method": "tdsBlur",
"name": "tdsBlur",
"bubbles": true,
"cancelable": false,
"composed": true,
"docs": {
"tags": [],
"text": "Blur event for the Textarea"
},
"complexType": {
"original": "FocusEvent",
"resolved": "FocusEvent",
"references": {
"FocusEvent": {
"location": "global",
"id": "global::FocusEvent"
}
}
}
}, {
"method": "tdsInput",
"name": "tdsInput",
"bubbles": true,
"cancelable": false,
"composed": true,
"docs": {
"tags": [],
"text": "Input event for the Textarea"
},
"complexType": {
"original": "InputEvent",
"resolved": "InputEvent",
"references": {
"InputEvent": {
"location": "global",
"id": "global::InputEvent"
}
}
}
}, {
"method": "tdsFocus",
"name": "tdsFocus",
"bubbles": true,
"cancelable": false,
"composed": true,
"docs": {
"tags": [],
"text": "Focus event for the Textarea"
},
"complexType": {
"original": "FocusEvent",
"resolved": "FocusEvent",
"references": {
"FocusEvent": {
"location": "global",
"id": "global::FocusEvent"
}
}
}
}];
}
static get methods() {
return {
"focusElement": {
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "Method to programmatically focus the textarea element",
"tags": []
}
}
};
}
static get elementRef() { return "host"; }
}