@paraboly/pwc-sliding-panel/dist/cjs/pwc-sliding-panel.cjs.entry.js

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

'use strict';

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

const core = require('./core-ae965e22.js');

const PwcSlidingPanel = class {
    constructor(hostRef) {
        core.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 core.h("slot", null);
    }
    get root() { return core.getElement(this); }
    static get watchers() { return {
        "active": ["activeWatchHandler"]
    }; }
    static get style() { return ":root {\n  --pwc-sliding-panel___content-width: 200px;\n  --pwc-sliding-panel___toggle-width: 30px;\n  --pwc-sliding-panel___toggle-height: 30px;\n  --pwc-sliding-panel___transition-duration: 0.25s;\n}\n\npwc-sliding-panel {\n  display: block;\n  position: absolute;\n  -webkit-transition: all var(--pwc-sliding-panel___transition-duration) ease;\n  transition: all var(--pwc-sliding-panel___transition-duration) ease;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n}\n\n/** left **/\npwc-sliding-panel[anchor=left] {\n  left: calc(var(--pwc-sliding-panel___content-width) * -1);\n}\n\npwc-sliding-panel[anchor=left].pwc-sliding-panel___active {\n  left: 0px;\n}\n\n/** right **/\npwc-sliding-panel[anchor=right] {\n  right: calc(var(--pwc-sliding-panel___content-width) * -1);\n}\n\npwc-sliding-panel[anchor=right].pwc-sliding-panel___active {\n  right: 0px;\n}"; }
};

exports.pwc_sliding_panel = PwcSlidingPanel;