@postnord/web-components
Version:
PostNord Web Components
544 lines (543 loc) • 20.3 kB
JavaScript
/*!
* Built with Stencil
* By PostNord.
*/
import { Host, h } from "@stencil/core";
import { uuidv4 } from "../../../globals/helpers";
/**
* The `pn-textarea` is built with a native `textarea`.
* This means you can use native events to listen to the input.
*
* @nativeInput Use the `input` event to listen to content being modified by the user.
*/
export class PnTextarea {
id = `pn-textarea-${uuidv4()}`;
idHelper = `${this.id}-text`;
hostElement;
/** The textarea content */
content;
/** The label describing the textarea. */
label;
/** The textarea content, do not provide slotted content. */
value = '';
/** Helper text that will appear underneath the textarea. Will be overwritten if you set an `error` string */
helpertext;
/** A unique ID connecting the element to the label. @category HTML Textarea */
textareaid = this.id;
/** HTML name. @category HTML Textarea */
name;
/** Set the associated form. @category HTML Textarea*/
form;
/** Set the row count for the textarea. @category HTML Textarea */
rows = 2;
/** Set the col count for the textarea. @category HTML Textarea */
cols = 20;
/** Set the wrap control. @category HTML Textarea */
wrap = 'soft';
/** The maximum number of characters the user should be able to add, also adds a visible counter. @category HTML Textarea */
maxlength;
/** Allow the browser to autocomplete the textarea. @category HTML Textarea */
autocomplete = 'off';
/** Allow the browser to spellcheck the textarea. @category HTML Textarea */
spellcheck = false;
/** Placeholder for the textarea. @category HTML Textarea */
placeholder;
/** Allow the user to resize the textarea vertically. Handle width in your own layout. @category HTML Textarea */
resize = false;
/** Make the textarea required. @category HTML Textarea */
required = false;
/** Set the textarea as `valid`, will make the Label and focus rings green. @category State */
valid = false;
/** Set the textarea as `invalid`, will make the Label and focus rings red. @category State */
invalid = false;
/** Same as `invalid`, but will display the string as an error message under the textarea. @category State */
error;
/** Disable the textarea. @category State */
disabled = false;
/** Make the textarea readonly. @category State */
readonly = false;
componentWillLoad() {
if (this.textareaid !== this.id) {
this.idHelper = `${this.textareaid}-helper`;
}
}
setVal(event) {
const value = event.target.value;
this.value = value;
}
hasError() {
return this.invalid || !!this.error;
}
hasMessage() {
return !!(this.helpertext?.length || this.error?.length);
}
render() {
return (h(Host, { key: '5a142dbaa2f6ea08d868668bf3f12e43be23f935' }, h("div", { key: '2858929a5c5daedaa477dcb720a232e63e3c0c85', class: "pn-textarea", "data-valid": this.valid, "data-error": this.hasError(), "data-resize": this.resize }, h("label", { key: 'ea30152404c7dacafbac4f7bbede2a5e65245ef1', class: "pn-textarea-label", htmlFor: this.textareaid }, h("span", { key: 'd095e7a14076c808d6ae13684e5961ae74ce11e6' }, this.label), this.maxlength >= 1 && h("span", { key: 'd689bbda3d391099285f7d1609668647935e5f13' }, `${this.value?.length || 0}/${this.maxlength}`)), h("textarea", { key: 'f10f5a7a970171be0cf570bd64d5fdf99a16b1b2', class: "pn-textarea-element", id: this.textareaid, name: this.name, rows: this.rows, cols: this.cols, wrap: this.wrap, autocomplete: this.autocomplete, spellcheck: this.spellcheck, placeholder: this.placeholder, maxlength: this.maxlength, required: this.required, disabled: this.disabled, readonly: this.readonly, "aria-describedby": this.hasMessage() ? this.idHelper : null, onInput: e => this.setVal(e), value: this.value }), this.hasMessage() && (h("p", { key: '2baf7a99cdf2cc870572af6673396ab29f605822', id: this.idHelper, class: "pn-textarea-text", role: this.error?.length ? 'alert' : null }, h("span", { key: '83020c2c03bde268b582d3ec0a8fb8589d4b3e39' }, this.error || this.helpertext))))));
}
static get is() { return "pn-textarea"; }
static get originalStyleUrls() {
return {
"$": ["pn-textarea.scss"]
};
}
static get styleUrls() {
return {
"$": ["pn-textarea.css"]
};
}
static get properties() {
return {
"label": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": true,
"optional": false,
"docs": {
"tags": [],
"text": "The label describing the textarea."
},
"getter": false,
"setter": false,
"attribute": "label",
"reflect": false
},
"value": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The textarea content, do not provide slotted content."
},
"getter": false,
"setter": false,
"attribute": "value",
"reflect": false,
"defaultValue": "''"
},
"helpertext": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Helper text that will appear underneath the textarea. Will be overwritten if you set an `error` string"
},
"getter": false,
"setter": false,
"attribute": "helpertext",
"reflect": false
},
"textareaid": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "category",
"text": "HTML Textarea"
}],
"text": "A unique ID connecting the element to the label."
},
"getter": false,
"setter": false,
"attribute": "textareaid",
"reflect": false,
"defaultValue": "this.id"
},
"name": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "category",
"text": "HTML Textarea"
}],
"text": "HTML name."
},
"getter": false,
"setter": false,
"attribute": "name",
"reflect": false
},
"form": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "category",
"text": "HTML Textarea"
}],
"text": "Set the associated form."
},
"getter": false,
"setter": false,
"attribute": "form",
"reflect": false
},
"rows": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "category",
"text": "HTML Textarea"
}],
"text": "Set the row count for the textarea."
},
"getter": false,
"setter": false,
"attribute": "rows",
"reflect": false,
"defaultValue": "2"
},
"cols": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "category",
"text": "HTML Textarea"
}],
"text": "Set the col count for the textarea."
},
"getter": false,
"setter": false,
"attribute": "cols",
"reflect": false,
"defaultValue": "20"
},
"wrap": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "category",
"text": "HTML Textarea"
}],
"text": "Set the wrap control."
},
"getter": false,
"setter": false,
"attribute": "wrap",
"reflect": false,
"defaultValue": "'soft'"
},
"maxlength": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "category",
"text": "HTML Textarea"
}],
"text": "The maximum number of characters the user should be able to add, also adds a visible counter."
},
"getter": false,
"setter": false,
"attribute": "maxlength",
"reflect": false
},
"autocomplete": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "category",
"text": "HTML Textarea"
}],
"text": "Allow the browser to autocomplete the textarea."
},
"getter": false,
"setter": false,
"attribute": "autocomplete",
"reflect": false,
"defaultValue": "'off'"
},
"spellcheck": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "category",
"text": "HTML Textarea"
}],
"text": "Allow the browser to spellcheck the textarea."
},
"getter": false,
"setter": false,
"attribute": "spellcheck",
"reflect": false,
"defaultValue": "false"
},
"placeholder": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "category",
"text": "HTML Textarea"
}],
"text": "Placeholder for the textarea."
},
"getter": false,
"setter": false,
"attribute": "placeholder",
"reflect": false
},
"resize": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "category",
"text": "HTML Textarea"
}],
"text": "Allow the user to resize the textarea vertically. Handle width in your own layout."
},
"getter": false,
"setter": false,
"attribute": "resize",
"reflect": false,
"defaultValue": "false"
},
"required": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "category",
"text": "HTML Textarea"
}],
"text": "Make the textarea required."
},
"getter": false,
"setter": false,
"attribute": "required",
"reflect": false,
"defaultValue": "false"
},
"valid": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "category",
"text": "State"
}],
"text": "Set the textarea as `valid`, will make the Label and focus rings green."
},
"getter": false,
"setter": false,
"attribute": "valid",
"reflect": false,
"defaultValue": "false"
},
"invalid": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "category",
"text": "State"
}],
"text": "Set the textarea as `invalid`, will make the Label and focus rings red."
},
"getter": false,
"setter": false,
"attribute": "invalid",
"reflect": false,
"defaultValue": "false"
},
"error": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "category",
"text": "State"
}],
"text": "Same as `invalid`, but will display the string as an error message under the textarea."
},
"getter": false,
"setter": false,
"attribute": "error",
"reflect": false
},
"disabled": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "category",
"text": "State"
}],
"text": "Disable the textarea."
},
"getter": false,
"setter": false,
"attribute": "disabled",
"reflect": false,
"defaultValue": "false"
},
"readonly": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "category",
"text": "State"
}],
"text": "Make the textarea readonly."
},
"getter": false,
"setter": false,
"attribute": "readonly",
"reflect": false,
"defaultValue": "false"
}
};
}
static get states() {
return {
"content": {}
};
}
static get elementRef() { return "hostElement"; }
}
//# sourceMappingURL=pn-textarea.js.map