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

const pnSidenavLevelCss = "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-level{display:block;flex-basis:100%}pn-sidenav-level[data-level=\"2\"]{padding-left:2.5em;overflow:hidden;transition:max-height ease 0.2s;max-height:40em}pn-sidenav-level[data-level=\"2\"][aria-hidden=true]{max-height:0}";
const PnSidenavLevelStyle0 = pnSidenavLevelCss;

const PnSidenavLevel$1 = /*@__PURE__*/ proxyCustomElement(class PnSidenavLevel extends HTMLElement {
    constructor() {
        super();
        this.__registerHost();
        this.level = 1;
        this.levelId = '';
        this.isOpen = false;
        this.parentName = '';
        this.parentHref = '';
        this.parentLinkId = '';
        this.alignment = 'right';
    }
    get hostElement() { return this; }
    async componentWillLoad() {
        const parent = this.hostElement.parentElement;
        if (parent.tagName.toLowerCase() !== 'nav') {
            this.level = 2;
        }
        if (parent.tagName.toLowerCase() === 'pn-sidenav-link') {
            this.parentName = parent.getAttribute('name') + '';
            this.parentHref = parent.getAttribute('href') + '';
            this.parentLinkId = parent.getAttribute('linkid') + '';
            const parentLinkName = this.parentName.toLowerCase().replace(/\W/gi, '_');
            this.levelId = `sidenav-lvl${this.level}-${parentLinkName}`;
            if (parent.getAttribute('current') + '' === 'true') {
                state.openLevel = this.levelId;
                this.onChangeOpenLevel();
            }
        }
        onChange('openLevel', () => {
            this.onChangeOpenLevel();
        });
    }
    onOpen() { }
    onChangeOpenLevel() {
        this.isOpen = state.openLevel === this.levelId;
    }
    render() {
        const attributes = {
            'aria-hidden': this.level > 1 ? !this.isOpen + '' : null,
            'data-level': this.level + '',
            'id': this.levelId ?? '',
        };
        return (h(Host, { key: '49181ad9c3005878ceb520b87ac1721f86f9d220', ...attributes, "data-asdfasdf": this.isOpen }, h("slot", { key: '43331c462c778d7dfaf5830bb7d4acccb4b9d3e6' })));
    }
    static get watchers() { return {
        "isOpen": ["onOpen"]
    }; }
    static get style() { return PnSidenavLevelStyle0; }
}, [4, "pn-sidenav-level", {
        "level": [32],
        "levelId": [32],
        "isOpen": [32],
        "parentName": [32],
        "parentHref": [32],
        "parentLinkId": [32],
        "alignment": [32]
    }, undefined, {
        "isOpen": ["onOpen"]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["pn-sidenav-level"];
    components.forEach(tagName => { switch (tagName) {
        case "pn-sidenav-level":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, PnSidenavLevel$1);
            }
            break;
    } });
}

const PnSidenavLevel = PnSidenavLevel$1;
const defineCustomElement = defineCustomElement$1;

export { PnSidenavLevel, defineCustomElement };

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