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

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-78a59ba0.js');
const helpers = require('./helpers-2e2349b4.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) {
        index.registerInstance(this, hostRef);
    }
    id = `pn-toggle-${helpers.uuidv4()}`;
    idHelper = `${this.id}-helper`;
    get hostElement() { return index.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 (index.h(index.Host, { key: '849343d45019c502267bd1e10713595ed11f6c3a' }, index.h("div", { key: '67513a0a9964fc585ac2cbd3d0c35dd11aa2ea15', class: "pn-toggle" }, this.label && (index.h("div", { key: '117ecdb9da2dde2cbf23db7ed6115f617f497f8c', class: "pn-toggle-content" }, index.h("label", { key: 'a99fcdd53e2120fd2e4b2b7681ecc850c6bcab29', htmlFor: this.toggleid, class: "pn-toggle-label" }, index.h("span", { key: 'af7c068eb67c15d10bffcb45ee395dd53d86a065' }, this.label)), !!this.helpertext && (index.h("p", { key: 'de0d29016f3443bdea507cf96aadbb31c04b13a8', id: this.idHelper, class: "pn-toggle-helper" }, index.h("span", { key: 'b4c8f84144fdc23285170b37cc9440adf00aa3bd' }, this.helpertext))))), index.h("div", { key: 'a36c02dd73ba366e3d1583fa94d9be865f5f4a40', class: "pn-toggle-button", "data-small": this.small, "data-large": this.large, "data-loading": this.loading }, index.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() }), index.h("div", { key: '04de98b8852cfe1e716152aa74786b3cb02a06e4', class: "pn-toggle-bg" }), index.h("div", { key: '85c377d1950aa8d055cb06c69f8565a7c7dbd8c6', class: "pn-toggle-circle" }, index.h("svg", { key: '3cb659fecc89f66bf3659bbd84f3046ffa455e11', class: "pn-toggle-check", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none" }, index.h("polyline", { key: 'f624a1c901e71e52a24aa0686d77c3701b2d09da', points: "4,12 9,17 20,6", "stroke-width": "3" })), index.h("pn-spinner", { key: '28312c5ff48f392024cd24f1d8cf06cce00e73ed' }))))));
    }
    static get watchers() { return {
        "toggleid": ["handleHelperId"]
    }; }
};
PnToggleSwitch.style = PnToggleSwitchStyle0;

exports.pn_toggle_switch = PnToggleSwitch;

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