import { r as registerInstance, d as createEvent, h, H as Host, c as getElement } from './core-34fac203.js';
import { a as ActionKeys, A as ActionKey } from './utils-3aef1637.js';

const OptionList = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        /**
         * Tracks the active option
         */
        this.expanded = false;
        this.anjOptionsChange = createEvent(this, "anjOptionsChange", 7);
    }
    updateActive(newOpt, oldOpt) {
        if (oldOpt) {
            oldOpt.active = false;
        }
        if (newOpt) {
            newOpt.active = true;
            this.scrollToActive(newOpt);
        }
    }
    async componentDidLoad() {
        await this.loadOptions();
    }
    /**
     * Responds to a given keydown event
     */
    async onKeyAction(event) {
        if (ActionKeys.includes(event.key)) {
            event.preventDefault();
            switch (event.key) {
                case ActionKey.ArrowDown:
                    this.activate();
                    break;
                case ActionKey.ArrowUp:
                    this.activate(-1);
                    break;
                case ActionKey.Enter:
                    this.select();
                    break;
                case ActionKey.Escape:
                    this.element.blur();
                    break;
            }
        }
        return this.active;
    }
    /**
     * Hack until https://github.com/ionic-team/stencil/issues/1218 is fixed
     * Once it is, completely remove the observer and use the commented-out events -r
     */
    // @Listen('anjOptionDidLoad')
    // @Listen('anjOptionDidUnload')
    async onOptionsChanged() {
        await this.loadOptions();
        return new Promise(resolve => {
            window.setTimeout(() => {
                if (this.options.length > 0) {
                    this.reset();
                }
                resolve();
            }, 20);
        });
    }
    /**
     * Reset the list
     */
    async reset(active = this.options[0]) {
        this.active = active;
        return this.active;
    }
    async select() {
        return this.active.select();
    }
    activate(increment = 1) {
        const selectable = this.options.filter(opt => !opt.disabled);
        const next = selectable[selectable.findIndex(opt => opt.active) + increment];
        if (next) {
            this.active = next;
        }
    }
    scrollToActive(option) {
        if (option.offsetTop + option.clientHeight > this.element.clientHeight + this.element.scrollTop) {
            this.element.scrollTop = option.offsetTop + option.clientHeight - this.element.clientHeight;
        }
        else if (option.offsetTop + option.clientHeight < this.element.scrollTop + this.element.clientHeight) {
            this.element.scrollTop = this.element.scrollTop - option.clientHeight > -1 ? this.element.scrollTop - option.clientHeight : 0;
        }
    }
    async loadOptions() {
        this.options = await Promise.all(Array.from(this.element.querySelectorAll('anj-option')).map(opt => opt.componentOnReady()));
        this.anjOptionsChange.emit(this.options);
    }
    render() {
        return (h(Host, { "aria-activedescendant": this.expanded && this.active ? this.active.id : null, role: "listbox", tabindex: "-1" }, h("anj-observer", { incattrs: false }, h("slot", null))));
    }
    get element() { return getElement(this); }
    static get watchers() { return {
        "active": ["updateActive"]
    }; }
    static get style() { return "anj-dropdown {\n  display: inline-block;\n}\nanj-dropdown .anj-dropdown-toggle > anj-button {\n  margin: 0 !important;\n  white-space: nowrap;\n}\nanj-dropdown .anj-dropdown-toggle anj-button:last-child:not(:first-child) .anj-button {\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n  border-left: 0 !important;\n  padding-left: 0.75rem;\n  padding-right: 0.75rem;\n}\nanj-dropdown .anj-dropdown-toggle anj-button:first-child:not(:last-child) .anj-button {\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0;\n  padding-right: 0.75rem;\n}\nanj-dropdown .anj-dropdown-toggle anj-button:first-child:not(:last-child)[context=primary] .anj-button {\n  border-right: 1px solid var(--anj-light-medium);\n}\nanj-dropdown anj-icon-opener {\n  font-size: 0.7rem;\n  margin-left: 0.5rem;\n}\n\nanj-option-list {\n  display: block;\n  max-height: 125px;\n  overflow-y: auto;\n  position: relative;\n  scroll-behavior: smooth;\n}\n\@media (min-width: 576px) {\n  anj-option-list {\n    max-height: 174px;\n  }\n}"; }
};

export { OptionList as anj_option_list };
