@utrecht/web-component-library-stencil
Version:
Stencil component library bundle for the Municipality of Utrecht based on the NL Design System architecture
301 lines (300 loc) • 10.2 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";
/**
* I would prefer to set `rows` and `cols` only when the properties are actually set,
* and explicitly configure them when they are set.
*
* Currently Stencil offers no way to detect of the property value is the default value.
* `this.hasOwnProperty('cols')` does not work, for example.
*
* As a workaround, there is a check if `cols` and `rows` are equal to the
* `<textarea>` defaults of `2` and `20`.
*/
const HTML_DEFAULT_COLS = 20;
const HTML_DEFAULT_ROWS = 2;
export class Textarea {
constructor() {
this.autocomplete = '';
this.cols = HTML_DEFAULT_COLS;
this.spellcheck = false;
this.disabled = false;
this.invalid = false;
this.placeholder = '';
this.readOnly = false;
this.required = false;
this.rows = HTML_DEFAULT_ROWS;
this.value = '';
}
render() {
const { autocomplete, cols, disabled, invalid, placeholder, readOnly, required, rows, spellcheck, value } = this;
return (h("textarea", { key: 'a8d3de7b999f2821d39fe36f1be38e02ab2f5fbf', autoComplete: autocomplete || null, class: clsx('utrecht-textarea', 'utrecht-textarea--html-textarea', disabled && 'utrecht-textarea--disabled', invalid && 'utrecht-textarea--invalid', readOnly && 'utrecht-textarea--readonly'), cols: cols !== HTML_DEFAULT_COLS ? cols : null, disabled: disabled, dir: "auto", placeholder: placeholder || null, readonly: readOnly, required: required, spellcheck: spellcheck || null, rows: rows !== HTML_DEFAULT_ROWS ? rows : null, value: value, 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);
} }, h("slot", { key: 'b637306a6910010803832204ab9c2b6ea60765d1' })));
}
static get is() { return "utrecht-textarea"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["textarea.scss"]
};
}
static get styleUrls() {
return {
"$": ["textarea.css"]
};
}
static get properties() {
return {
"autocomplete": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "autocomplete",
"reflect": false,
"defaultValue": "''"
},
"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"
},
"spellcheck": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "spellcheck",
"reflect": false,
"defaultValue": "false"
},
"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"
},
"placeholder": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "placeholder",
"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"
},
"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": {}
}
}];
}
}
//# sourceMappingURL=textarea.js.map