@postnord/web-components
Version:
PostNord Web Components
449 lines (448 loc) • 17 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.
*
* @slot helpertext - Set the helpertext with a slot instead of prop. Use a `span` element as wrapper.
* Only use if you need HTML content, such as a link. {@since v7.12.0}
*/
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 switch. */
helpertext;
/** HTML toggle value. @category Native attributes */
value = null;
/** HTML toggle name. @category Native attributes */
name = null;
/** Precheck the toggle. @category Native attributes */
checked = false;
/** Set the switch as required. @since v7.25.0 @category Native attributes */
required = false;
/** Disable the toggle. @category Native attributes */
disabled = false;
/** Make the toggle smaller. @category Features */
small = false;
/** Make the toggle larger. @category Features */
large = false;
/** Set the loading state. @category Features */
loading = false;
/** Set a custom ID for the switch. @since v7.25.0 @category HTML attributes */
pnId;
/**
* Provide the label via an aria attribute.
* We strongly recommend you use the `label` prop instead.
* @since v7.25.0
* @category HTML attributes
*/
pnAriaLabel;
/**
* Provide the label from another element via its ID.
* We strongly recommend you use the `label` prop instead.
* @since v7.25.0
* @category HTML attributes
*/
pnAriaLabelledby;
/** Set a custom ID for the switch. @deprecated Use `pn-id` instead. @category HTML attributes */
toggleid;
handleHelperId() {
this.idHelper = `${this.getId()}-helper`;
}
getId() {
return this.pnId || this.toggleid || this.id;
}
getSpinnerSize() {
if (this.small)
return 1;
if (this.large)
return 1.25;
return 1.125;
}
hasHelpertextProp() {
return !!this.helpertext;
}
hasHelpertextSlot() {
return !!this.hostElement.querySelector('[slot="helpertext"]');
}
showHelpertext() {
return this.hasHelpertextProp() || this.hasHelpertextSlot();
}
describedBy() {
return this.showHelpertext() ? this.idHelper : null;
}
displayLabel() {
return !!this.label;
}
getAriaLabel() {
return !this.displayLabel() && !this.pnAriaLabelledby ? this.pnAriaLabel : null;
}
getAriaLabelledby() {
return !this.displayLabel() && !this.pnAriaLabel ? this.pnAriaLabelledby : null;
}
render() {
return (h(Host, { key: 'e6a6de7ded1a69b16843133338ba8a1ae1294b19' }, h("div", { key: '142125dd53902df30a93a5e5257650a7841a1644', class: "pn-toggle" }, h("div", { key: 'd4e35ed179dc5f1423cdf59cf0481ecbcb33021f', class: "pn-toggle-content" }, this.label && (h("label", { key: 'f38bdb380fb05349909e386dd6e22d841c0caf56', htmlFor: this.getId(), class: "pn-toggle-label" }, h("span", { key: '94a35b2682a039613dd0814a25ba30f954018dc6' }, this.label))), h("p", { key: 'c621112acea7f18b7943d9d07c0af52dd7455329', id: this.idHelper, class: "pn-toggle-helper", hidden: !this.showHelpertext() }, this.hasHelpertextProp() && h("span", { key: '1959f88dbe079595e3cd6bbb48098e2777ab642e' }, this.helpertext), h("slot", { key: 'e493dcb3022bd31c4ecfb349756d3d83bf51bf9a', name: "helpertext" }))), h("div", { key: '1f13bb2bcb798b5221d06e55640848034ad2b260', class: "pn-toggle-button", "data-small": this.small, "data-large": this.large, "data-loading": this.loading }, h("input", { key: 'ebf1c43df4b75f8df0769d2d458c04fbf17385f6', id: this.getId(), class: "pn-toggle-element", type: "checkbox", name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, "aria-label": this.getAriaLabel(), "aria-labelledby": this.getAriaLabelledby(), "aria-describedby": this.describedBy() }), h("div", { key: '51c67cb5c61e3d3b93bd49013594109772b7d796', class: "pn-toggle-bg" }), h("div", { key: '1932ea8d92b8ab57a47fdd3ced9795be78cc1620', class: "pn-toggle-circle" }, h("svg", { key: '67e5adc0818d3fe76de4dffa45bc8c1d5c9fba45', class: "pn-toggle-check", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none" }, h("polyline", { key: 'f1722e0d19629ea38eac2faa6d2ccaf007e78463', points: "4,12 9,17 20,6", "stroke-width": "3" })), h("pn-spinner", { key: '60ab6b2fea45ddbc8793b06f18032df94c858a9d', size: this.getSpinnerSize() }))))));
}
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": false,
"optional": true,
"docs": {
"tags": [],
"text": "A label for the toggle switch."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "label"
},
"helpertext": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Provide a helpertext for the toggle switch."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "helpertext"
},
"value": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "category",
"text": "Native attributes"
}],
"text": "HTML toggle value."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "value",
"defaultValue": "null"
},
"name": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "category",
"text": "Native attributes"
}],
"text": "HTML toggle name."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "name",
"defaultValue": "null"
},
"checked": {
"type": "boolean",
"mutable": true,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "category",
"text": "Native attributes"
}],
"text": "Precheck the toggle."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "checked",
"defaultValue": "false"
},
"required": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "since",
"text": "v7.25.0"
}, {
"name": "category",
"text": "Native attributes"
}],
"text": "Set the switch as required."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "required",
"defaultValue": "false"
},
"disabled": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "category",
"text": "Native attributes"
}],
"text": "Disable the toggle."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "disabled",
"defaultValue": "false"
},
"small": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "category",
"text": "Features"
}],
"text": "Make the toggle smaller."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "small",
"defaultValue": "false"
},
"large": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "category",
"text": "Features"
}],
"text": "Make the toggle larger."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "large",
"defaultValue": "false"
},
"loading": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "category",
"text": "Features"
}],
"text": "Set the loading state."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "loading",
"defaultValue": "false"
},
"pnId": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "since",
"text": "v7.25.0"
}, {
"name": "category",
"text": "HTML attributes"
}],
"text": "Set a custom ID for the switch."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "pn-id"
},
"pnAriaLabel": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "since",
"text": "v7.25.0"
}, {
"name": "category",
"text": "HTML attributes"
}],
"text": "Provide the label via an aria attribute.\nWe strongly recommend you use the `label` prop instead."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "pn-aria-label"
},
"pnAriaLabelledby": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "since",
"text": "v7.25.0"
}, {
"name": "category",
"text": "HTML attributes"
}],
"text": "Provide the label from another element via its ID.\nWe strongly recommend you use the `label` prop instead."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "pn-aria-labelledby"
},
"toggleid": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "deprecated",
"text": "Use `pn-id` instead."
}, {
"name": "category",
"text": "HTML attributes"
}],
"text": "Set a custom ID for the switch."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "toggleid"
}
};
}
static get elementRef() { return "hostElement"; }
static get watchers() {
return [{
"propName": "pnId",
"methodName": "handleHelperId"
}, {
"propName": "toggleid",
"methodName": "handleHelperId",
"handlerOptions": {
"immediate": true
}
}];
}
}