@paraboly/pwc-sliding-panel/dist/esm/pwc-sliding-panel_3.entry.js

A panel that slides open from the sides of the page when you click a handle.

import { r as registerInstance, h, g as getElement, c as createEvent } from './core-95ed22b2.js';

const PwcSlidingPanel = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.active = false;
        this.anchor = "left";
    }
    activeWatchHandler(newValue) {
        if (newValue) {
            this.root.classList.add("pwc-sliding-panel___active");
        }
        else {
            this.root.classList.remove("pwc-sliding-panel___active");
        }
    }
    toggledListener() {
        this.active = !this.active;
    }
    render() {
        return h("slot", null);
    }
    get root() { return getElement(this); }
    static get watchers() { return {
        "active": ["activeWatchHandler"]
    }; }
    static get style() { return ":root{--pwc-sliding-panel___content-width:200px;--pwc-sliding-panel___toggle-width:30px;--pwc-sliding-panel___toggle-height:30px;--pwc-sliding-panel___transition-duration:0.25s}pwc-sliding-panel{display:block;position:absolute;-webkit-transition:all var(--pwc-sliding-panel___transition-duration) ease;transition:all var(--pwc-sliding-panel___transition-duration) ease;-webkit-box-sizing:border-box;box-sizing:border-box}pwc-sliding-panel[anchor=left]{left:calc(var(--pwc-sliding-panel___content-width) * -1)}pwc-sliding-panel[anchor=left].pwc-sliding-panel___active{left:0}pwc-sliding-panel[anchor=right]{right:calc(var(--pwc-sliding-panel___content-width) * -1)}pwc-sliding-panel[anchor=right].pwc-sliding-panel___active{right:0}"; }
};

const PwcSlidingPanelContent = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
    }
    render() {
        return h("slot", null);
    }
    get root() { return getElement(this); }
    static get style() { return "pwc-sliding-panel-content{display:block;width:var(--pwc-sliding-panel___content-width);background:#fff;border:1px solid #000;-webkit-box-sizing:border-box;box-sizing:border-box}"; }
};

const PwcSlidingPanelToggle = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.toggled = createEvent(this, "toggled", 7);
    }
    clickListener(event) {
        if (event.target === this.root) {
            this.toggled.emit();
        }
    }
    render() {
        return h("slot", null);
    }
    get root() { return getElement(this); }
    static get style() { return "pwc-sliding-panel-toggle{width:var(--pwc-sliding-panel___toggle-width);height:var(--pwc-sliding-panel___toggle-height);position:absolute;top:0;display:block;background:#fff;border:1px solid #000;cursor:pointer;-webkit-box-sizing:border-box;box-sizing:border-box}pwc-sliding-panel[anchor=left]>pwc-sliding-panel-toggle{right:calc(var(--pwc-sliding-panel___toggle-width) * -1)}pwc-sliding-panel[anchor=right]>pwc-sliding-panel-toggle{left:calc(var(--pwc-sliding-panel___toggle-width) * -1)}"; }
};

export { PwcSlidingPanel as pwc_sliding_panel, PwcSlidingPanelContent as pwc_sliding_panel_content, PwcSlidingPanelToggle as pwc_sliding_panel_toggle };