@postnord/web-components
Version:
PostNord Web Components
340 lines (339 loc) • 13.2 kB
JavaScript
/*!
* Built with Stencil
* By PostNord.
*/
import { uuidv4 } from "../../../globals/helpers";
import { h, Host } from "@stencil/core";
/**
* The `pn-checkbox` is built with a native `input[type="checkbox"]` in the background.
* This means you can use native events to listen to the changes.
*
* @nativeChange Use the `change` event to listen when the checkbox state is being toggled.
*/
export class PnCheckbox {
id = `pn-checkbox-${uuidv4()}`;
idHelpertext = `${this.id}-helpertext`;
hostElement;
/** The checkbox label */
label;
/** This will be emitted on change and input, like a native checkbox */
value;
/** The name of the checkbox group */
name;
/** Check the radio button. */
checked = false;
/** This adds an optional helpertext element under the label */
helpertext;
/** A unique HTML ID for the checkbox. */
checkboxid = this.id;
/** Disable the radio button. @category State */
disabled = false;
/** Set the checkbox as required. @category State */
required = false;
/** If set to true, color scheme will turn red, indicating that there is an issue or incorrect input related the checkbox. @category State */
invalid = false;
/** Sets the checkbox to an indeterminate state, allowing for a mixed or intermediate checkbox state. @category State */
indeterminate = false;
/** If set to true, this checkbox turns into a checkbox-tile. @category Tile */
tile = false;
/** Add an icon on the right of your checkbox tile. The `tile` prop must be `true` for the icon to work. @category Tile */
icon = null;
handleId() {
this.idHelpertext = `${this.checkboxid}-helpertext`;
}
handlechange() {
this.indeterminate = false;
}
componentWillLoad() {
this.handleId();
}
render() {
return (h(Host, { key: '82fd05eac2c3b7032222bc666436b2cb75f0b698' }, h("input", { key: 'd9fa733aed72eba31053b43d40f0a084b73014e8', type: "checkbox", id: this.checkboxid, value: this.value, name: this.name || this.checkboxid, disabled: this.disabled, checked: this.checked, required: this.required, indeterminate: this.indeterminate, "aria-describedby": this.helpertext && this.idHelpertext }), h("div", { key: 'cc4efde88d12e505aa335c1519190a61a028375a', class: "pn-checkbox", "data-tile": this.tile, "data-invalid": this.invalid }, h("div", { key: '8a9da5423636a98549ae1f729f3e250f7efab434', class: "pn-checkbox-outer" }, h("svg", { key: '4813aac4bd9825bbb8711fd8b257af1b09ecd949', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none" }, h("polyline", { key: '95d0f4c61f5dbe80b70f0ba6c49e16d1980b2754', class: "pn-checkbox-checkmark-path", points: "4,12 9,17 20,6", "stroke-width": "3" }), h("polyline", { key: '8f7571a453df0ac7e72c6c0be06de29e3f2b20e9', class: "pn-checkbox-indeterminate-path", points: "4,12 20,12", "stroke-width": "3" }))), (!!this.label || !!this.helpertext) && (h("p", { key: 'd54e21afdc3a4fe1921f5e8316647c2a47cdae00', class: "pn-checkbox-content" }, !!this.label && (h("label", { key: '14a4f4360a8ce9ea32507c955b7e09e6c5acb91a', htmlFor: this.checkboxid, class: "pn-checkbox-label" }, this.label)), !!this.helpertext && (h("span", { key: 'd9df6b05fa69617ba0badaf8afaecf1e5e076d62', id: this.idHelpertext, class: "pn-checkbox-helpertext" }, this.helpertext)))), this.tile && this.icon && h("pn-icon", { key: '2d3b1bf42f24679e1ce80db9d55189c9ccf49d59', icon: this.icon, color: "gray900" }))));
}
static get is() { return "pn-checkbox"; }
static get originalStyleUrls() {
return {
"$": ["pn-checkbox.scss"]
};
}
static get styleUrls() {
return {
"$": ["pn-checkbox.css"]
};
}
static get properties() {
return {
"label": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "The checkbox label"
},
"getter": false,
"setter": false,
"attribute": "label",
"reflect": false
},
"value": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": true,
"optional": false,
"docs": {
"tags": [],
"text": "This will be emitted on change and input, like a native checkbox"
},
"getter": false,
"setter": false,
"attribute": "value",
"reflect": true
},
"name": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The name of the checkbox group"
},
"getter": false,
"setter": false,
"attribute": "name",
"reflect": false
},
"checked": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Check the radio button."
},
"getter": false,
"setter": false,
"attribute": "checked",
"reflect": false,
"defaultValue": "false"
},
"helpertext": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "This adds an optional helpertext element under the label"
},
"getter": false,
"setter": false,
"attribute": "helpertext",
"reflect": false
},
"checkboxid": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "A unique HTML ID for the checkbox."
},
"getter": false,
"setter": false,
"attribute": "checkboxid",
"reflect": false,
"defaultValue": "this.id"
},
"disabled": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "category",
"text": "State"
}],
"text": "Disable the radio button."
},
"getter": false,
"setter": false,
"attribute": "disabled",
"reflect": false,
"defaultValue": "false"
},
"required": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "category",
"text": "State"
}],
"text": "Set the checkbox as required."
},
"getter": false,
"setter": false,
"attribute": "required",
"reflect": false,
"defaultValue": "false"
},
"invalid": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "category",
"text": "State"
}],
"text": "If set to true, color scheme will turn red, indicating that there is an issue or incorrect input related the checkbox."
},
"getter": false,
"setter": false,
"attribute": "invalid",
"reflect": false,
"defaultValue": "false"
},
"indeterminate": {
"type": "boolean",
"mutable": true,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "category",
"text": "State"
}],
"text": "Sets the checkbox to an indeterminate state, allowing for a mixed or intermediate checkbox state."
},
"getter": false,
"setter": false,
"attribute": "indeterminate",
"reflect": false,
"defaultValue": "false"
},
"tile": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "category",
"text": "Tile"
}],
"text": "If set to true, this checkbox turns into a checkbox-tile."
},
"getter": false,
"setter": false,
"attribute": "tile",
"reflect": false,
"defaultValue": "false"
},
"icon": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "category",
"text": "Tile"
}],
"text": "Add an icon on the right of your checkbox tile. The `tile` prop must be `true` for the icon to work."
},
"getter": false,
"setter": false,
"attribute": "icon",
"reflect": false,
"defaultValue": "null"
}
};
}
static get elementRef() { return "hostElement"; }
static get watchers() {
return [{
"propName": "checkboxid",
"methodName": "handleId"
}];
}
static get listeners() {
return [{
"name": "change",
"method": "handlechange",
"target": undefined,
"capture": false,
"passive": false
}];
}
}
//# sourceMappingURL=pn-checkbox.js.map