@utrecht/web-component-library-stencil
Version:
Stencil component library bundle for the Municipality of Utrecht based on the NL Design System architecture
309 lines (308 loc) • 11.7 kB
JavaScript
/**
* @license EUPL-1.2
* Copyright (c) 2020-2024 Frameless B.V.
* Copyright (c) 2021-2024 Gemeente Utrecht
*/
import { h } from "@stencil/core";
import clsx from "clsx";
const HTML_DEFAULT_COLS = 20;
const HTML_DEFAULT_ROWS = 2;
export class FormFieldTextarea {
constructor() {
this.cols = HTML_DEFAULT_COLS;
this.disabled = false;
this.invalid = false;
this.label = '';
this.name = '';
this.readOnly = false;
this.placeholder = '';
this.required = false;
this.rows = HTML_DEFAULT_ROWS;
this.value = '';
}
render() {
const { cols, disabled, hostElement, invalid, label, name, placeholder, readOnly, required, rows, value } = this;
let input = hostElement.querySelector('input[type="hidden"]');
if (input && !name) {
input.parentNode.removeChild(input);
}
if (!input && name) {
input = hostElement.ownerDocument.createElement('input');
input.type = 'hidden';
hostElement.appendChild(input);
}
if (input && name) {
input.name = name;
input.value = value || '';
}
return (h("div", { key: 'cec777de54ce322910d51996873422fbbdca96ca', class: clsx('utrecht-form-field', 'utrecht-form-field--textbox', {
'utrecht-form-field--invalid': invalid,
}) }, h("p", { key: 'a3d6405682b62db03c9b199e0e61b746c47ed9f3', class: "utrecht-form-field__label" }, h("label", { key: 'a07ac189672740a83a793a098164f69ea42dcd4a', class: clsx('utrecht-form-label', {
'utrecht-form-label--disabled': disabled,
}), htmlFor: "input" }, label, h("slot", { key: '428b90a47576af81a35ae8d66b6fead6e9901f60', name: "label" }))), h("utrecht-form-field-description", { key: '64a99f6b92e22f7a603ae51fbbfd07928844ef34', id: "description" }, h("slot", { key: 'b13960601fd3d3d9dd6d9cfed6db7d31504c8220', name: "description" })), invalid && (h("utrecht-form-field-description", { key: 'bc9701b6db720c1b233b86de6693f0c55f1cc08f', status: "invalid", class: "utrecht-form-field__error-message", id: "error-message" }, h("slot", { key: '9f1fac2834ba2bb1bc6a0012b41d05293d7a0417', name: "error-message" }))), h("p", { key: 'e44c3e6317d0fcf562088403c301443c71893fec', class: "utrecht-form-field__input" }, h("textarea", { key: '39cfc14c30125954f77312c4b229780cf89fa5b8', id: "input", class: clsx('utrecht-textarea', 'utrecht-textarea--html-textarea', disabled && 'utrecht-textarea--disabled', invalid && 'utrecht-textarea--invalid', readOnly && 'utrecht-textarea--readonly'), "aria-invalid": invalid, cols: cols !== HTML_DEFAULT_COLS ? cols : null, disabled: disabled, dir: "auto", placeholder: placeholder || null, readonly: readOnly, required: required, rows: rows !== HTML_DEFAULT_ROWS ? rows : null, onBlur: (evt) => this.utrechtBlur.emit(evt), onChange: (evt) => this.utrechtChange.emit(evt), onFocus: (evt) => this.utrechtFocus.emit(evt), onInput: (evt) => {
this.value = evt.target.value;
this.utrechtInput.emit(evt);
} }, value)), h("div", { key: '9ba58f2acefdbaaaa776a3b243ba120df6819044', class: "utrecht-form-field__status", id: "status" }, h("div", { key: 'ea134ff87175685e16b444f4229262efc555ddde', class: "utrecht-form-field-description utrecht-form-field-description--status" }, h("slot", { key: '4eeb7d0d33c6d51288cbcb334e5b0642789dabab', name: "status" })))));
}
static get is() { return "utrecht-form-field-textarea"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["form-field-textarea.scss"]
};
}
static get styleUrls() {
return {
"$": ["form-field-textarea.css"]
};
}
static get properties() {
return {
"cols": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "cols",
"reflect": false,
"defaultValue": "HTML_DEFAULT_COLS"
},
"disabled": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "disabled",
"reflect": true,
"defaultValue": "false"
},
"invalid": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "invalid",
"reflect": true,
"defaultValue": "false"
},
"label": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "label",
"reflect": false,
"defaultValue": "''"
},
"name": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "name",
"reflect": false,
"defaultValue": "''"
},
"readOnly": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "readonly",
"reflect": true,
"defaultValue": "false"
},
"placeholder": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "placeholder",
"reflect": false,
"defaultValue": "''"
},
"required": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "required",
"reflect": true,
"defaultValue": "false"
},
"rows": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "rows",
"reflect": false,
"defaultValue": "HTML_DEFAULT_ROWS"
},
"value": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "value",
"reflect": false,
"defaultValue": "''"
}
};
}
static get events() {
return [{
"method": "utrechtBlur",
"name": "utrechtBlur",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}, {
"method": "utrechtChange",
"name": "utrechtChange",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}, {
"method": "utrechtFocus",
"name": "utrechtFocus",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}, {
"method": "utrechtInput",
"name": "utrechtInput",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}];
}
static get elementRef() { return "hostElement"; }
}
//# sourceMappingURL=form-field-textarea.js.map