@postnord/web-components/components/pn-toggle-switch.js

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { u as uuidv4 } from './helpers.js';
import { d as defineCustomElement$2 } from './pn-spinner2.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-size:0.875em;font-weight:400;margin:0.25em 0 0 0;display:flex;flex-direction:column;gap:0.25em}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$1 = /*@__PURE__*/ proxyCustomElement(class PnToggleSwitch extends HTMLElement {
    constructor() {
        super();
        this.__registerHost();
        this.label = undefined;
        this.helpertext = undefined;
        this.checked = false;
        this.toggleid = this.id;
        this.name = null;
        this.value = null;
        this.small = false;
        this.large = false;
        this.disabled = false;
        this.loading = false;
    }
    id = `pn-toggle-${uuidv4()}`;
    idHelper = `${this.id}-helper`;
    get hostElement() { return this; }
    handleHelperId() {
        if (this.id !== this.toggleid)
            this.idHelper = `${this.toggleid}-helper`;
    }
    componentWillLoad() {
        this.handleHelperId();
    }
    hasHelpertextProp() {
        return !!this.helpertext;
    }
    hasHelpertextSlot() {
        return !!this.hostElement.querySelector('[slot="helpertext"]');
    }
    showHelpertext() {
        return this.hasHelpertextProp() || this.hasHelpertextSlot();
    }
    describedBy() {
        return this.showHelpertext() ? this.idHelper : null;
    }
    render() {
        return (h(Host, { key: 'eb01cdf69af35b174085bb005422ea6c8ac1e6a6' }, h("div", { key: '382f46a78c37378a688e984d01e65ce2f220edbc', class: "pn-toggle" }, this.label && (h("div", { key: 'd44b03002b18a367702fee99d6de2dc2e8d57d3b', class: "pn-toggle-content" }, h("label", { key: '065e6ad5f4b8061ac2dcf638d6494de28f574009', htmlFor: this.toggleid, class: "pn-toggle-label" }, h("span", { key: 'fe1da7bce587378eb568b907b8e083b000e8f902' }, this.label)), h("p", { key: '35d07fdf4d85beb676c2a4d4b66911cf9403a1b0', id: this.idHelper, class: "pn-toggle-helper", hidden: !this.showHelpertext() }, this.hasHelpertextProp() && h("span", { key: '3b730e80874b20385933b7e87c4d2298134bd420' }, this.helpertext), h("slot", { key: '7aec8e24f9c921667ccc8f9cd3098c03b9010a5b', name: "helpertext" })))), h("div", { key: 'e13b30af32359aaf51a7ed480a86e41bbb57bb96', class: "pn-toggle-button", "data-small": this.small, "data-large": this.large, "data-loading": this.loading }, h("input", { key: '49d52f49af798b9776aee2aa82c46c0d9e0ef6b6', 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: 'c8c6a22c5b69579691757998e2affc50949efc54', class: "pn-toggle-bg" }), h("div", { key: '087c3d9b47c828bd06b80b0529cd9ce644457355', class: "pn-toggle-circle" }, h("svg", { key: '9d4cc14302cc75917142c1e98ba93060ad85b5dd', class: "pn-toggle-check", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none" }, h("polyline", { key: 'f32ea9266474201495e4f461023528bc65bccd4d', points: "4,12 9,17 20,6", "stroke-width": "3" })), h("pn-spinner", { key: '3889ccc50a535e04d9bf91f5e3cb58d8458bc32a' }))))));
    }
    static get watchers() { return {
        "toggleid": ["handleHelperId"]
    }; }
    static get style() { return PnToggleSwitchStyle0; }
}, [4, "pn-toggle-switch", {
        "label": [1],
        "helpertext": [1],
        "checked": [1028],
        "toggleid": [1],
        "name": [1],
        "value": [1],
        "small": [4],
        "large": [4],
        "disabled": [4],
        "loading": [4]
    }, undefined, {
        "toggleid": ["handleHelperId"]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["pn-toggle-switch", "pn-spinner"];
    components.forEach(tagName => { switch (tagName) {
        case "pn-toggle-switch":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, PnToggleSwitch$1);
            }
            break;
        case "pn-spinner":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
    } });
}

const PnToggleSwitch = PnToggleSwitch$1;
const defineCustomElement = defineCustomElement$1;

export { PnToggleSwitch, defineCustomElement };

//# sourceMappingURL=pn-toggle-switch.js.map