import { r as registerInstance, d as createEvent, h, c as getElement } from './core-3f33e631.js';

const DROPDOWN_ITEM_CLASS = 'anj-dropdown-item';
const DropdownItem = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.active = false;
        /**
         * Is the item disabled
         */
        this.disabled = false;
        this.anjDropdownItemSelect = createEvent(this, "anjDropdownItemSelect", 7);
    }
    onDisabled() {
        if (this.anchor) {
            this.anchor.setAttribute('tabindex', this.disabled ? '-1' : undefined);
            this.anchor.setAttribute('aria-disabled', this.disabled ? `${this.disabled}` : undefined);
        }
    }
    componentWillLoad() {
        this.anchor = this.element.querySelector('a') || undefined;
        if (this.anchor) {
            this.anchor.classList.add(DROPDOWN_ITEM_CLASS);
            this.onDisabled();
        }
    }
    onMouseDown(event) {
        if (this.disabled) {
            event.preventDefault();
            event.stopPropagation();
        }
    }
    onClick(event) {
        if (this.disabled) {
            return this.onMouseDown(event);
        }
        this.anjDropdownItemSelect.emit(this.payload);
    }
    render() {
        return this.anchor ? h("slot", null) :
            h("button", { type: "button", "aria-disabled": this.disabled, disabled: this.disabled, class: DROPDOWN_ITEM_CLASS }, h("slot", null));
    }
    get element() { return getElement(this); }
    static get watchers() { return {
        "disabled": ["onDisabled"]
    }; }
    static get style() { return "anj-dropdown-item .anj-dropdown-item {\n  display: block;\n  font-size: 0.875rem;\n  font-family: var(--anj-font-family);\n  font-weight: normal;\n  line-height: 1.5;\n  outline: none;\n  background-color: transparent;\n  border: 0;\n  color: var(--anj-text);\n  clear: both;\n  cursor: pointer;\n  font-weight: 400;\n  padding: 0.25rem 0.75rem;\n  text-align: inherit;\n  white-space: nowrap;\n  width: 100%;\n}\nanj-dropdown-item .anj-dropdown-item, anj-dropdown-item .anj-dropdown-item::before, anj-dropdown-item .anj-dropdown-item::after {\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  outline: none;\n}\nanj-dropdown-item .anj-dropdown-item:focus, anj-dropdown-item .anj-dropdown-item:active, anj-dropdown-item .anj-dropdown-item *:focus, anj-dropdown-item .anj-dropdown-item *:active {\n  outline: none;\n}\nanj-dropdown-item .anj-dropdown-item:active, anj-dropdown-item .anj-dropdown-item:hover, anj-dropdown-item .anj-dropdown-item:focus {\n  background-color: var(--anj-background);\n  color: var(--anj-text);\n  text-decoration: none;\n  outline: none;\n}\nanj-dropdown-item[active] .anj-dropdown-item, anj-dropdown-item[active] .anj-dropdown-item:hover, anj-dropdown-item[active] .anj-dropdown-item:active {\n  background-color: var(--anj-highlight);\n  color: var(--anj-light);\n}\nanj-dropdown-item[disabled] .anj-dropdown-item, anj-dropdown-item[disabled] .anj-dropdown-item:hover, anj-dropdown-item[disabled] .anj-dropdown-item:active {\n  background-color: var(--anj-light);\n  color: var(--anj-neutral);\n  pointer-events: none;\n}"; }
};

export { DropdownItem as anj_dropdown_item };
