import { h, Host } from "@stencil/core";
/**
 * Display a menu panel in a left or right sidebar. The panel will animate (slide)
 * as it appears, and an background will be shown over the rest of the page. If
 * the background overlay is present, it can be clicked to dismiss the panel.
 *
 * ```ts
 * <verdocs-menu-panel>
 *   <div style="padding: 20px;">Menu Panel</div>
 * </verdocs-menu-panel>
 * ```
 */
export class VerdocsMenuPanel {
    constructor() {
        this.moved = false;
        this.overlayId = `verdocs-menu-panel-overlay`;
        this.panelId = `verdocs-menu-panel`;
        /**
         * Which side of the screen to place the panel.
         */
        this.side = 'right';
        /**
         * Whether to show an overlay over the rest of the page.
         */
        this.overlay = true;
        /**
         * The width of the panel.
         */
        this.width = 300;
    }
    handleClick(e) {
        var _a;
        if (!this.element.contains(e.target)) {
            this.hide();
            (_a = this.close) === null || _a === void 0 ? void 0 : _a.emit();
        }
    }
    componentWillLoad() {
        this.hide();
        if (this.overlay) {
            this.portal = document.createElement('div');
            this.portal.setAttribute('id', this.overlayId);
            document.body.append(this.portal);
        }
        this.portal = document.createElement('div');
        this.portal.setAttribute('id', this.panelId);
        this.portal.style.top = `0px`;
        this.portal.style.bottom = `0px`;
        this.portal.style.width = `${this.width}px`;
        if (this.side === 'left') {
            this.portal.style.left = `0px`;
        }
        else {
            this.portal.style.right = `0px`;
        }
        document.body.append(this.portal);
    }
    componentDidLoad() {
        this.portal.appendChild(this.element);
    }
    disconnectedCallback() {
        this.moved ? this.portal.remove() : (this.moved = true);
    }
    hide() {
        var _a, _b;
        (_a = document.getElementById(this.overlayId)) === null || _a === void 0 ? void 0 : _a.remove();
        (_b = document.getElementById(this.panelId)) === null || _b === void 0 ? void 0 : _b.remove();
    }
    render() {
        return (h(Host, { key: '620b2d96ba41fcd87803da3c3d36436f17da02fd', ref: el => (this.element = el) }, h("slot", { key: '85ac66ee22cf9a5717f4fe5de2644c96c14afd65' })));
    }
    static get is() { return "verdocs-menu-panel"; }
    static get originalStyleUrls() {
        return {
            "$": ["verdocs-menu-panel.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["verdocs-menu-panel.css"]
        };
    }
    static get properties() {
        return {
            "side": {
                "type": "string",
                "attribute": "side",
                "mutable": false,
                "complexType": {
                    "original": "'left' | 'right'",
                    "resolved": "\"left\" | \"right\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Which side of the screen to place the panel."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "'right'"
            },
            "overlay": {
                "type": "boolean",
                "attribute": "overlay",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Whether to show an overlay over the rest of the page."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "true"
            },
            "width": {
                "type": "number",
                "attribute": "width",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The width of the panel."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "300"
            }
        };
    }
    static get events() {
        return [{
                "method": "close",
                "name": "close",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "void",
                    "resolved": "void",
                    "references": {}
                }
            }];
    }
    static get listeners() {
        return [{
                "name": "click",
                "method": "handleClick",
                "target": "document",
                "capture": false,
                "passive": false
            }];
    }
}
//# sourceMappingURL=verdocs-menu-panel.js.map
