'use strict';

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

const index = require('./index-9a9efa1c.js');
const pnSidenavStore = require('./pn-sidenav-store-41848c2e.js');
const angle_small_down = require('./angle_small_down-f00f19b1.js');
require('./index-a8de2b09.js');

const icon = '<svg class="pn-icon-svg" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M11.293 8.293a1 1 0 0 1 1.414 0l6 6a1 1 0 0 1-1.414 1.414L12 10.414l-5.293 5.293a1 1 0 0 1-1.414-1.414z" clip-rule="evenodd"/></svg>';
const angle_small_up = icon;

const pnSidenavLinkCss = "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-link{display:flex;flex-wrap:wrap}.pn-sidenav-link{font-weight:normal;position:relative;border:0 none;display:flex;align-items:center;background-color:transparent;color:#005d92;font-size:1em;padding:1.1rem 1.5rem 1.1rem;overflow:hidden;text-decoration:none;cursor:pointer;flex-grow:1}.pn-sidenav-link::before{content:\"\";display:block;width:0.4rem;border-top-right-radius:0.3rem;border-bottom-right-radius:0.3rem;height:100%;position:absolute;left:0;top:0;bottom:0;transform:translateX(-0.4rem);background:#005d92;transition:transform linear 0.35s}.pn-sidenav-link:hover,.pn-sidenav-link:focus,[current=true]>.pn-sidenav-link{background-color:#e0f8ff;color:#005d92;outline:0;box-shadow:none}.pn-sidenav-link:hover::before,.pn-sidenav-link:focus::before,[current=true]>.pn-sidenav-link::before{transform:none}.pn-sidenav-link:active{background-color:#f3f2f2;color:#00a0d6;box-shadow:none}.pn-sidenav-link>pn-icon{padding-right:1em}.pn-sidenav-link-expand{margin-left:auto;border:0;font-size:1em;background:transparent;outline:0;padding:0 1em 0 0.5em;cursor:pointer}.pn-sidenav-link-expand:hover,.pn-sidenav-link-expand:focus,[current=true]>.pn-sidenav-link-expand{background-color:#e0f8ff;color:#005d92;outline:0;box-shadow:none}.pn-sidenav-link-expand:hover::before,.pn-sidenav-link-expand:focus::before,[current=true]>.pn-sidenav-link-expand::before{transform:none}button>.pn-sidenav-link-expand{padding-right:0}.pn-sidenav-link-expand pn-icon{width:14px}";
const PnSidenavLinkStyle0 = pnSidenavLinkCss;

const PnSidenavLink = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.name = '';
        this.href = '';
        this.target = null;
        this.linkid = null;
        this.icon = '';
        this.currentSelection = false;
        this.levelId = '';
        this.open = false;
        this.hasChildren = false;
    }
    get hostElement() { return index.getElement(this); }
    componentWillLoad() {
        this.hasChildren = this.hostElement.querySelectorAll('pn-sidenav-level').length > 0;
        const safeLevelName = this.name.toLowerCase().replace(/\W/gi, '_');
        if (this.hasChildren && this.name) {
            this.levelId = `sidenav-lvl${2}-${safeLevelName}`;
        }
        if (!this.linkid && this.name) {
            this.linkid = `sidenav-link-${safeLevelName}`;
        }
    }
    // onClick={this.setOpenMenuLevel.bind(this)}
    onExpandClick() {
        pnSidenavStore.state.openLevel = pnSidenavStore.state.openLevel + '' === this.levelId + '' ? '' : this.levelId;
    }
    getTagName() {
        return this.href ? 'a' : 'button';
    }
    render() {
        const TagName = this.getTagName();
        const linkAttributes = {
            href: this.href,
            target: this.target,
            id: this.linkid,
            class: 'pn-sidenav-link',
        };
        let buttonAttributes = {
            'aria-controls': this.levelId,
            'aria-label': (this.open ? pnSidenavStore.state.i18n.close : pnSidenavStore.state.i18n.open) + ' ' + this.name,
            'aria-expanded': (pnSidenavStore.state.openLevel + '' === this.levelId + '') + '',
            'onClick': this.onExpandClick.bind(this),
        };
        return (index.h(index.Host, { key: '27734f09ff2f1333ee2921aaa5175e17bdc8db4f', role: "listitem", name: this.name, href: this.href, linkid: this.linkid, current: this.currentSelection }, index.h(TagName, { key: 'f0f2a3e4e0c74f52b95ce882bf1fbc76cf90d7f3', ...linkAttributes, ...(TagName === 'button' && { ...buttonAttributes }) }, this.icon ? index.h("pn-icon", { icon: this.icon, color: "blue700" }) : null, index.h("span", { key: '543f9cfafc3f37ce4f94a4c5e6468222f251f860' }, this.name), this.hasChildren && TagName === 'button' ? (index.h("div", { class: "pn-sidenav-link-expand" }, this.open ? (index.h("pn-icon", { class: "first-level_icon", icon: angle_small_up, color: "blue700" })) : (index.h("pn-icon", { class: "first-level_icon", icon: angle_small_down.angle_small_down, color: "blue700" })))) : null), this.hasChildren && TagName === 'a' ? (index.h("button", { ...buttonAttributes, class: "pn-sidenav-link-expand" }, this.open ? index.h("pn-icon", { class: "first-level_icon", icon: angle_small_up, color: "blue700" }) : index.h("pn-icon", { class: "first-level_icon", icon: angle_small_down.angle_small_down, color: "blue700" }))) : null, index.h("slot", { key: '1385cf91c63369f307edbdb45bb639d4674cad80' })));
    }
};
PnSidenavLink.style = PnSidenavLinkStyle0;

exports.pn_sidenav_link = PnSidenavLink;

//# sourceMappingURL=pn-sidenav-link.cjs.entry.js.map