import { r as registerInstance, d as createEvent, h, H as Host, c as getElement } from './core-1db051ba.js';

let optionId = 0;
const Option = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.optId = `anj-option-${optionId++}`;
        /**
         * Is the option active
         */
        this.active = false;
        /**
         * Is the option disabled
         */
        this.disabled = false;
        /**
         * Is the option selected
         */
        this.selected = false;
        this.anjSelect = createEvent(this, "anjSelect", 7);
    }
    onMouseDown(event) {
        // eat the event so that the select can decide to blur or not
        event.preventDefault();
        if (!this.disabled) {
            this.select();
        }
    }
    async select() {
        this.anjSelect.emit(this.value);
    }
    render() {
        return h(Host, { "aria-label": this.element.textContent, "aria-disabled": this.disabled ? `${this.disabled}` : null, "aria-selected": `${this.selected}`, id: this.optId, role: "option", tabindex: "0" });
    }
    get element() { return getElement(this); }
    static get style() { return "anj-option {\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-option, anj-option::before, anj-option::after {\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  outline: none;\n}\nanj-option:focus, anj-option:active, anj-option *:focus, anj-option *:active {\n  outline: none;\n}\nanj-option:active, anj-option:hover, anj-option:focus {\n  background-color: var(--anj-background);\n  color: var(--anj-text);\n  text-decoration: none;\n  outline: none;\n}\nanj-option:hover, anj-option[active], anj-option[active]:hover {\n  background-color: var(--anj-background);\n  color: var(--anj-dark);\n}\nanj-option[selected], anj-option[selected]:hover {\n  background-color: var(--anj-highlight);\n  color: var(--anj-light);\n}\nanj-option[disabled], anj-option[disabled]:hover {\n  background-color: var(--anj-light);\n  color: var(--anj-neutral);\n  cursor: default;\n}"; }
};

export { Option as anj_option };
