@postnord/web-components
Version:
PostNord Web Components
59 lines (55 loc) • 8.92 kB
JavaScript
/*!
* Built with Stencil
* By PostNord.
*/
import { r as registerInstance, g as getElement, h, a as Host } from './index-dc6e40e7.js';
import { u as uuidv4 } from './helpers-88f72b54.js';
const pnToggleSwitchCss = "pn-toggle-switch{display:inline-block;position:relative}pn-toggle-switch .pn-toggle{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1em}pn-toggle-switch .pn-toggle-label{cursor:pointer;display:flex;justify-content:space-between;align-items:flex-end;font-weight:500;color:#2d2013;margin:0;gap:0.5em;transition-property:color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1);-webkit-tap-highlight-color:transparent}pn-toggle-switch .pn-toggle-label>span{font-size:1em}pn-toggle-switch .pn-toggle-helper{color:#5e554a;font-weight:400;display:block;margin:0.25em 0 0 0}pn-toggle-switch .pn-toggle-helper>span{display:block;font-size:0.875em}pn-toggle-switch .pn-toggle-content{flex:1 0}pn-toggle-switch .pn-toggle-button{position:relative;font-size:1em;width:3.625em;height:2em;padding:0.1875em;transition-property:transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1);-webkit-tap-highlight-color:transparent}pn-toggle-switch .pn-toggle-button[data-small]{width:2.625em;height:1.5em}pn-toggle-switch .pn-toggle-button[data-small] .pn-toggle-circle{width:1.125em;height:1.125em}pn-toggle-switch .pn-toggle-button[data-small][data-loading]>.pn-toggle-bg{width:1.5em}pn-toggle-switch .pn-toggle-button[data-large]{width:4.625em;height:2.5em}pn-toggle-switch .pn-toggle-button[data-large] .pn-toggle-circle{width:2.125em;height:2.125em}pn-toggle-switch .pn-toggle-button[data-large][data-loading]>.pn-toggle-bg{width:2.5em}pn-toggle-switch .pn-toggle-button[data-loading] .pn-toggle-bg{width:2em}pn-toggle-switch .pn-toggle-button[data-loading] .pn-toggle-circle,pn-toggle-switch .pn-toggle-button[data-loading] .pn-toggle-element:checked~.pn-toggle-circle{transform:translateX(50%)}pn-toggle-switch .pn-toggle-button[data-loading] .pn-toggle-element:checked~.pn-toggle-circle .pn-toggle-check{opacity:0}pn-toggle-switch .pn-toggle-button[data-loading] .pn-toggle-element:checked~.pn-toggle-circle .pn-toggle-check polyline{stroke-dashoffset:23;transition-delay:0s}pn-toggle-switch .pn-toggle-button[data-loading] pn-spinner{opacity:1}pn-toggle-switch .pn-toggle-bg{position:absolute;top:0;left:50%;width:100%;height:100%;z-index:0;border-radius:2em;background-color:#969087;transform:translateX(-50%);outline:0.2rem solid transparent;outline-offset:0.2rem;transition-property:width, background-color, outline-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}pn-toggle-switch .pn-toggle-circle{position:relative;z-index:1;width:1.625em;height:1.625em;background-color:#ffffff;box-shadow:0 0.25em 0.5em rgba(0, 0, 0, 0.1);border-radius:50%;padding:0.25em;transition-property:transform, background-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1);transform:translateX(0%)}pn-toggle-switch .pn-toggle-element{position:absolute;z-index:3;top:0;left:0;cursor:pointer;width:100%;height:100%;opacity:0;margin:0;}pn-toggle-switch .pn-toggle-element:focus-visible+.pn-toggle-bg{outline-color:#005d92}pn-toggle-switch .pn-toggle-element:hover+.pn-toggle-bg{background-color:#5e554a}pn-toggle-switch .pn-toggle-element:hover:checked+.pn-toggle-bg{background-color:#0d234b}pn-toggle-switch .pn-toggle-element:hover:checked~.pn-toggle-circle .pn-toggle-check polyline{stroke:#0d234b}pn-toggle-switch .pn-toggle-element:checked~.pn-toggle-bg{background-color:#005d92}pn-toggle-switch .pn-toggle-element:checked~.pn-toggle-circle{transform:translateX(100%)}pn-toggle-switch .pn-toggle-element:checked~.pn-toggle-circle .pn-toggle-check{opacity:1}pn-toggle-switch .pn-toggle-element:checked~.pn-toggle-circle .pn-toggle-check polyline{transition-delay:0.2s, 0s;stroke-dashoffset:0}pn-toggle-switch .pn-toggle-element:disabled{cursor:not-allowed}pn-toggle-switch .pn-toggle-element:disabled+.pn-toggle-bg{background-color:#d3cecb;box-shadow:none}pn-toggle-switch .pn-toggle-element:disabled~.pn-toggle-circle{background-color:#f3f2f2}pn-toggle-switch .pn-toggle-element:disabled~.pn-toggle-circle .pn-toggle-check polyline{stroke:#969087}pn-toggle-switch .pn-toggle-element:disabled~.pn-toggle-circle pn-spinner .circle{stroke:#969087}pn-toggle-switch .pn-toggle-element:disabled~.pn-toggle-circle pn-spinner .dot{fill:#969087}pn-toggle-switch .pn-toggle-element:disabled:hover+.pn-toggle-bg,pn-toggle-switch .pn-toggle-element:disabled:hover:checked+.pn-toggle-bg{background-color:#d3cecb}pn-toggle-switch .pn-toggle-element:disabled:hover~.pn-toggle-circle .pn-toggle-check polyline,pn-toggle-switch .pn-toggle-element:disabled:hover:checked~.pn-toggle-circle .pn-toggle-check polyline{stroke:#969087}pn-toggle-switch .pn-toggle-check{position:absolute;left:50%;top:50%;height:1.5em;width:1.5em;padding:0.25em;transform:translate(-50%, -50%);opacity:0;transition-property:opacity;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}pn-toggle-switch .pn-toggle-check polyline{stroke:#005d92;stroke-linecap:round;stroke-dasharray:23;stroke-dashoffset:23;transition-property:stroke-dashoffset, stroke;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}pn-toggle-switch .pn-toggle pn-spinner{opacity:0;width:100%;height:100%;transition-property:opacity;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}pn-toggle-switch .pn-toggle pn-spinner .circle{transition-property:stroke;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}pn-toggle-switch .pn-toggle pn-spinner .dot{transition-property:fill;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}";
const PnToggleSwitchStyle0 = pnToggleSwitchCss;
const PnToggleSwitch = class {
constructor(hostRef) {
registerInstance(this, hostRef);
}
id = `pn-toggle-${uuidv4()}`;
idHelper = `${this.id}-helper`;
get hostElement() { return getElement(this); }
/** 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 watchers() { return {
"toggleid": ["handleHelperId"]
}; }
};
PnToggleSwitch.style = PnToggleSwitchStyle0;
export { PnToggleSwitch as pn_toggle_switch };
//# sourceMappingURL=pn-toggle-switch.entry.js.map