@utrecht/web-component-library-stencil
Version:
Stencil component library bundle for the Municipality of Utrecht based on the NL Design System architecture
254 lines (253 loc) • 9.79 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";
export class FormFieldCheckbox {
constructor() {
this.label = '';
this.disabled = false;
this.checked = false;
this.invalid = false;
this.required = false;
this.name = '';
this.value = '';
}
render() {
const { checked, disabled, hostElement, label, name, invalid, required, 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 = checked ? value || '' : '';
}
return (h("div", { key: '7265518f80f0130af29119b1ab263bad6972d57d', class: clsx('utrecht-form-field', 'utrecht-form-field--checkbox', {
'utrecht-form-field--invalid': invalid,
}) }, h("p", { key: 'f0e5dafe658a41a7b46a32274a5fcd3041af6d47', class: "utrecht-form-field__label utrecht-form-field__label--checkbox" }, h("label", { key: 'e064334dbcf1f4ec998d12faf365936b5aba9d42', class: clsx('utrecht-form-label', {
'utrecht-form-label--disabled': disabled,
}), htmlFor: "input" }, h("input", { key: '15b4f5e5217fe962298cfeea1e31c693c1552c8b', id: "input", type: "checkbox", class: clsx('utrecht-form-field__input', 'utrecht-checkbox', 'utrecht-checkbox--custom', 'utrecht-checkbox--html-input', {
'utrecht-checkbox--disabled': disabled,
'utrecht-checkbox--invalid': invalid,
'utrecht-checkbox--required': required,
}), "aria-invalid": invalid || undefined, disabled: disabled, required: required, checked: checked, value: value, onBlur: (evt) => this.utrechtBlur.emit(evt), onChange: (evt) => this.utrechtChange.emit(evt), onFocus: (evt) => this.utrechtFocus.emit(evt), onInput: (evt) => {
this.checked = evt.target.checked;
this.utrechtInput.emit(evt);
} }), ' ', label, h("slot", { key: '71619a76ec68689e8b4ac06bf36495383764bb80', name: "label" })), invalid && (h("utrecht-form-field-description", { key: '94319c88090ae3d2c7b9b39889304c7897b4824e', status: "invalid", class: "utrecht-form-field__description utrecht-form-field__description--invalid", id: "error-message" }, h("slot", { key: 'fbc66084c8d5d258189aa9bff7161d9f5cd9ddbf', name: "error-message" })))), h("utrecht-form-field-description", { key: 'a72db09134635683fd1637aafdc97bcd056c5901', class: "utrecht-form-field__description", id: "description" }, h("slot", { key: 'fb6e2a4ae14b820aa5ed87f2bd684ac63fa57f17', name: "description" })), h("div", { key: '30338d3eebee35ec2bb4570297cd91960630074d', class: "utrecht-form-field__status", id: "status" }, h("div", { key: '7b418c8102f32e432ef2f1d46738340c10b79914', class: "utrecht-form-field-description utrecht-form-field-description--status" }, h("slot", { key: '775a5a6596ccad32aa32ce7b371a3d980ce8da55', name: "status" })))));
}
static get is() { return "utrecht-form-field-checkbox"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["form-field-checkbox.scss"]
};
}
static get styleUrls() {
return {
"$": ["form-field-checkbox.css"]
};
}
static get properties() {
return {
"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": true,
"defaultValue": "false"
},
"checked": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "checked",
"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"
},
"required": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "required",
"reflect": true,
"defaultValue": "false"
},
"name": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "name",
"reflect": false,
"defaultValue": "''"
},
"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-checkbox.js.map