import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { s as state } from './pn-sidenav-store.js';
import { b as bars } from './bars.js';
import { c as close_small } from './close_small.js';

const pnSidenavTogglebuttonCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}@media screen and (max-width: 767px){.sr-only-mobile{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}}pn-sidenav-togglebutton{display:block;width:100%;padding:0.8rem 1.6rem;background:#effbff}@media screen and (min-width: 64em){pn-sidenav-togglebutton{display:none}}";
const PnSidenavTogglebuttonStyle0 = pnSidenavTogglebuttonCss;

const PnSidenavTogglebutton$1 = /*@__PURE__*/ proxyCustomElement(class PnSidenavTogglebutton extends HTMLElement {
    constructor() {
        super();
        this.__registerHost();
        this.label = '';
        this.i18n = { open: '', close: '', navLabel: '' };
    }
    get hostElement() { return this; }
    onClick() {
        state.openMenu = !state.openMenu;
        const body = document.querySelector('body');
        body.setAttribute('data-siteheader-sidemenuopen', state.openMenu + '');
    }
    render() {
        return (h(Host, { key: '444f5c04c57aca3e2881615f1c3236c81bd60486' }, h("pn-button", { key: '2f19f74d213b2de945a48ce43dc0673e62ced181', appearance: "light", icon: state.openMenu ? close_small : bars, "left-icon": true, small: true, onclick: this.onClick.bind(this), label: this.label }, h("slot", { key: '3e0c702be8d037fb0fcb23b6eff3dd78689383e6' }))));
    }
    static get style() { return PnSidenavTogglebuttonStyle0; }
}, [4, "pn-sidenav-togglebutton", {
        "label": [1],
        "i18n": [32]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["pn-sidenav-togglebutton"];
    components.forEach(tagName => { switch (tagName) {
        case "pn-sidenav-togglebutton":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, PnSidenavTogglebutton$1);
            }
            break;
    } });
}

const PnSidenavTogglebutton = PnSidenavTogglebutton$1;
const defineCustomElement = defineCustomElement$1;

export { PnSidenavTogglebutton, defineCustomElement };

//# sourceMappingURL=pn-sidenav-togglebutton.js.map