@postnord/web-components
Version:
PostNord Web Components
290 lines (289 loc) • 10.9 kB
JavaScript
/*!
* Built with Stencil
* By PostNord.
*/
import { h, Host } from "@stencil/core";
import { uuidv4 } from "../../../index";
/**
* The `pn-toggle-switch` 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 switch state is being toggled.
*/
export class PnToggleSwitch {
id = `pn-toggle-${uuidv4()}`;
idHelper = `${this.id}-helper`;
hostElement;
/** A label for the toggle switch. */
label;
/** Provide a helpertext for the toggle. */
helpertext;
/** Precheck the toggle. */
checked = false;
/** Set a unique HTML id. */
toggleid = this.id;
/** HTML toggle name. @category HTML */
name = null;
/** HTML toggle value. @category HTML */
value = null;
/** Make the toggle smaller. @category Visual */
small = false;
/** Make the toggle larger. @category Visual */
large = false;
/** Disable the toggle. @category State */
disabled = false;
/** Set the loading state. @category State */
loading = false;
handleHelperId() {
if (this.id !== this.toggleid)
this.idHelper = `${this.toggleid}-helper`;
}
componentWillLoad() {
this.handleHelperId();
}
describedBy() {
return !!this.helpertext ? this.idHelper : null;
}
render() {
return (h(Host, { key: '849343d45019c502267bd1e10713595ed11f6c3a' }, h("div", { key: '67513a0a9964fc585ac2cbd3d0c35dd11aa2ea15', class: "pn-toggle" }, this.label && (h("div", { key: '117ecdb9da2dde2cbf23db7ed6115f617f497f8c', class: "pn-toggle-content" }, h("label", { key: 'a99fcdd53e2120fd2e4b2b7681ecc850c6bcab29', htmlFor: this.toggleid, class: "pn-toggle-label" }, h("span", { key: 'af7c068eb67c15d10bffcb45ee395dd53d86a065' }, this.label)), !!this.helpertext && (h("p", { key: 'de0d29016f3443bdea507cf96aadbb31c04b13a8', id: this.idHelper, class: "pn-toggle-helper" }, h("span", { key: 'b4c8f84144fdc23285170b37cc9440adf00aa3bd' }, this.helpertext))))), h("div", { key: 'a36c02dd73ba366e3d1583fa94d9be865f5f4a40', class: "pn-toggle-button", "data-small": this.small, "data-large": this.large, "data-loading": this.loading }, h("input", { key: '4e1cf5cb654664cb76d95c58dbb2a4eeb65b029c', id: this.toggleid, class: "pn-toggle-element", type: "checkbox", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, "aria-describedby": this.describedBy() }), h("div", { key: '04de98b8852cfe1e716152aa74786b3cb02a06e4', class: "pn-toggle-bg" }), h("div", { key: '85c377d1950aa8d055cb06c69f8565a7c7dbd8c6', class: "pn-toggle-circle" }, h("svg", { key: '3cb659fecc89f66bf3659bbd84f3046ffa455e11', class: "pn-toggle-check", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none" }, h("polyline", { key: 'f624a1c901e71e52a24aa0686d77c3701b2d09da', points: "4,12 9,17 20,6", "stroke-width": "3" })), h("pn-spinner", { key: '28312c5ff48f392024cd24f1d8cf06cce00e73ed' }))))));
}
static get is() { return "pn-toggle-switch"; }
static get originalStyleUrls() {
return {
"$": ["pn-toggle-switch.scss"]
};
}
static get styleUrls() {
return {
"$": ["pn-toggle-switch.css"]
};
}
static get properties() {
return {
"label": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": true,
"optional": false,
"docs": {
"tags": [],
"text": "A label for the toggle switch."
},
"getter": false,
"setter": false,
"attribute": "label",
"reflect": false
},
"helpertext": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Provide a helpertext for the toggle."
},
"getter": false,
"setter": false,
"attribute": "helpertext",
"reflect": false
},
"checked": {
"type": "boolean",
"mutable": true,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Precheck the toggle."
},
"getter": false,
"setter": false,
"attribute": "checked",
"reflect": false,
"defaultValue": "false"
},
"toggleid": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Set a unique HTML id."
},
"getter": false,
"setter": false,
"attribute": "toggleid",
"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"
}],
"text": "HTML toggle name."
},
"getter": false,
"setter": false,
"attribute": "name",
"reflect": false,
"defaultValue": "null"
},
"value": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "category",
"text": "HTML"
}],
"text": "HTML toggle value."
},
"getter": false,
"setter": false,
"attribute": "value",
"reflect": false,
"defaultValue": "null"
},
"small": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "category",
"text": "Visual"
}],
"text": "Make the toggle smaller."
},
"getter": false,
"setter": false,
"attribute": "small",
"reflect": false,
"defaultValue": "false"
},
"large": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "category",
"text": "Visual"
}],
"text": "Make the toggle larger."
},
"getter": false,
"setter": false,
"attribute": "large",
"reflect": false,
"defaultValue": "false"
},
"disabled": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "category",
"text": "State"
}],
"text": "Disable the toggle."
},
"getter": false,
"setter": false,
"attribute": "disabled",
"reflect": false,
"defaultValue": "false"
},
"loading": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "category",
"text": "State"
}],
"text": "Set the loading state."
},
"getter": false,
"setter": false,
"attribute": "loading",
"reflect": false,
"defaultValue": "false"
}
};
}
static get elementRef() { return "hostElement"; }
static get watchers() {
return [{
"propName": "toggleid",
"methodName": "handleHelperId"
}];
}
}
//# sourceMappingURL=pn-toggle-switch.js.map