import { h } from "@stencil/core";
import { ripple } from '../../utils/ripple';
export class NavButton {
    constructor() {
        this.handleMouseDown = (event) => {
            ripple(event.target, event);
        };
        this.handleClick = (e) => {
            e.stopPropagation();
            const o = { composed: true, cancelable: true, bubbles: true };
            const event = new Event(e.type, o);
            if (!this.el.dispatchEvent(event))
                return;
            const r = this.root;
            const n = r.querySelector('bce-side-bar') || r.querySelector('bce-nav');
            if (n)
                n.toggle();
        };
    }
    get root() {
        const shadow = this.el.parentNode;
        const header = 'host' in shadow && shadow.host.closest('bce-header');
        return header || this.el.closest('bce-root') || document;
    }
    render() {
        return (h("button", { onClick: this.handleClick, onMouseDown: this.handleMouseDown },
            h("span", null),
            h("span", null),
            h("span", null)));
    }
    static get is() { return "bce-nav-button"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() { return {
        "$": ["bce-nav-button.scss"]
    }; }
    static get styleUrls() { return {
        "$": ["bce-nav-button.css"]
    }; }
    static get elementRef() { return "el"; }
}
