'use strict';

var index = require('./index-pX0sBY0-.js');

const dropdownItemCss = () => `.dropdown-item{text-decoration:none;color:#1D1D1D;display:flex;align-items:center;padding:8px 16px;gap:8px;font-family:var(--ifx-font-family)}.dropdown-item:focus{outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276}.dropdown-item.hide{display:none}.dropdown-item span{color:#1D1D1D;font-size:16px;font-style:normal;font-weight:400;line-height:24px;}.dropdown-item.small span{font-size:14px}.dropdown-item:hover{cursor:pointer;background-color:#EEEDED}.dropdown-item:active{background-color:#BFBBBB}.dropdown-item.error{color:#CD002F}.dropdown-item.error span{color:#CD002F}.icon{margin-right:4px}`;

const DropdownItem = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.ifxDropdownItem = index.createEvent(this, "ifxDropdownItem", 7);
    }
    /** Icon to show in the dropdown item. */
    icon;
    /** Link the dropdown item should navigate to when clicked. */
    href = "";
    /** Where to open the link. */
    target = "_self";
    /** If true, this dropdown item is hidden. */
    hide = false;
    /** If true, this item is shown in an error style. */
    error = false;
    size = 'l';
    /** Fired when the dropdown item is clicked or selected. */
    ifxDropdownItem;
    get el() { return index.getElement(this); }
    handleMenuSize(event) {
        this.size = event.detail;
    }
    handleEventEmission() {
        this.ifxDropdownItem.emit(this.el.textContent);
    }
    render() {
        const hasHref = this.href !== undefined && this.href !== null && this.href !== '';
        const common = {
            class: `dropdown-item ${this.size === 's' ? 'small' : ""} ${this.hide ? 'hide' : ""} ${this.error ? 'error' : ""}`,
            onClick: () => this.handleEventEmission(),
            role: 'menuitem'
        };
        if (!hasHref)
            common.tabIndex = 0;
        return (index.h("a", { key: '97d71de191bc99ad5419c53fc5c02c4f0b72ebe3', ...common, ...(hasHref ? { href: this.href, target: this.target, error: this.error } : {}) }, this.icon && index.h("ifx-icon", { key: '0fe37b2bb72b04af588f6a767717c2e3a03dd056', class: "icon", icon: this.icon }), index.h("span", { key: 'f23fddda13075d96e982b6c03f43498c74d23a69' }, index.h("slot", { key: '487e72e6372de61439a444e0c9c460555344eaf7' }))));
    }
};
DropdownItem.style = dropdownItemCss();

exports.ifx_dropdown_item = DropdownItem;
