import { r as registerInstance, h, a as getElement } from './index-ytAlchvh.js';

const eclMenuItemCss = () => `ecl-menu-item{display:flex;flex-grow:1}ecl-menu-item>*{flex-grow:1}@media (width >= 1140px){ecl-menu-item{flex-grow:0}ecl-menu-item>*{display:flex;flex-grow:0}}`;

const EclMenuItem = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.external = false;
        this.current = false;
        this.hasChildren = false;
        this.child = false;
    }
    getClass() {
        let styleClasses = [
            'ecl-menu__item',
            `sc-ecl-menu-${this.theme}`,
            this.styleClass
        ];
        if (this.current) {
            styleClasses.push('ecl-menu__item--current');
        }
        if (this.child) {
            styleClasses = [
                'ecl-menu__subitem',
                `sc-ecl-menu-${this.theme}`,
                this.styleClass
            ];
            if (this.current) {
                styleClasses.push('ecl-menu__subitem--current');
            }
        }
        return styleClasses.join(' ');
    }
    getAttrs() {
        let attrs = {
            'data-ecl-menu-item': true,
            'aria-expanded': "false",
        };
        if (this.hasChildren) {
            attrs['data-ecl-has-children'] = true;
        }
        if (this.child) {
            delete attrs['data-ecl-menu-item'];
            attrs['data-ecl-menu-subitem'] = true;
        }
        return attrs;
    }
    getLinkClass() {
        let linkClasses = [
            'ecl-menu__link',
            'ecl-link--standalone',
            `sc-ecl-link-${this.theme}`,
            `sc-ecl-menu-${this.theme}`,
        ];
        if (this.child) {
            linkClasses = [
                'ecl-menu__sublink',
                'ecl-link--standalone',
                `sc-ecl-link-${this.theme}`,
                `sc-ecl-menu-${this.theme}`,
            ];
            if (this.current) {
                linkClasses.push('ecl-menu__sublink--current');
            }
            if (this.external) {
                linkClasses.push('ecl-link--icon-after');
            }
        }
        return linkClasses.join(' ');
    }
    componentWillLoad() {
        var _a;
        this.theme = (_a = document.documentElement.getAttribute('data-ecl-theme')) !== null && _a !== void 0 ? _a : (this.theme || 'ec');
    }
    render() {
        const buttonAttrs = this.hasChildren ? { 'data-ecl-menu-caret': true } : {};
        return (h("li", Object.assign({ key: '2a078bedbe74eda693b08dc999aca73bcc45e6a8', class: this.getClass() }, this.getAttrs()), h("a", { key: '5fef3c4572a1f0c7c92d7f98c6dfd18038f3cab4', href: this.link, class: this.getLinkClass(), "data-ecl-menu-link": true }, h("slot", { key: '9ecf355491a2938e279740cd2bf188ea79715137' }), this.external ?
            h("ecl-icon", { icon: "external", size: "xs", styleClass: `sc-ecl-icon-${this.theme} sc-ecl-menu-${this.theme} ecl-menu__link-icon--external ${this.child ? 'ecl-menu__sublink-icon' : 'ecl-menu__link-icon'}` }) : ''), this.hasChildren ?
            h("ecl-button", Object.assign({ styleClass: `ecl-menu__button-caret sc-ecl-menu-${this.theme}`, type: "button", size: "m", theme: this.theme, variant: "tertiary", buttonStyle: "neutral", hideLabel: true }, buttonAttrs), h("ecl-icon", { icon: "corner-arrow", size: "xs", rotate: "180", slot: "icon-after", styleClass: `sc-ecl-icon-${this.theme} sc-ecl-menu-${this.theme}` })) : '', this.hasChildren ?
            h("div", { class: `ecl-menu__mega sc-ecl-menu-${this.theme}`, "data-ecl-menu-mega": true }, h("ul", { class: `ecl-menu__sublist sc-ecl-menu-${this.theme}` }, h("slot", { name: "sublist" }))) : ''));
    }
    get el() { return getElement(this); }
};
EclMenuItem.style = eclMenuItemCss();

export { EclMenuItem as ecl_menu_item };
