import { __esDecorate, __runInitializers } from "tslib";
import { randomString } from '@api-client/core/lib/math/Random.js';
import { query } from 'lit/decorators.js';
import UiList from '../../list/internals/List.js';
let UiListbox = (() => {
    let _classSuper = UiList;
    let _ariaSelectedElement_decorators;
    let _ariaSelectedElement_initializers = [];
    let _ariaSelectedElement_extraInitializers = [];
    return class UiListbox extends _classSuper {
        static {
            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
            _ariaSelectedElement_decorators = [query('[aria-selected=true]')];
            __esDecorate(this, null, _ariaSelectedElement_decorators, { kind: "accessor", name: "ariaSelectedElement", static: false, private: false, access: { has: obj => "ariaSelectedElement" in obj, get: obj => obj.ariaSelectedElement, set: (obj, value) => { obj.ariaSelectedElement = value; } }, metadata: _metadata }, _ariaSelectedElement_initializers, _ariaSelectedElement_extraInitializers);
            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
        }
        #ariaSelectedElement_accessor_storage = __runInitializers(this, _ariaSelectedElement_initializers, void 0);
        get ariaSelectedElement() { return this.#ariaSelectedElement_accessor_storage; }
        set ariaSelectedElement(value) { this.#ariaSelectedElement_accessor_storage = value; }
        connectedCallback() {
            super.connectedCallback();
            this.setAttribute('role', 'listbox');
        }
        updateItems() {
            super.updateItems();
            this.items.forEach((i) => {
                if (!this.isListItem(i)) {
                    return;
                }
                if (i.getAttribute('role') !== 'option') {
                    i.setAttribute('role', 'option');
                }
                if (i.hasAttribute('aria-selected')) {
                    i.setAttribute('aria-selected', 'false');
                }
            });
        }
        beforeActivation() {
            this.removeAttribute('aria-activedescendant');
            const active = this.ariaSelectedElement;
            if (active) {
                active.setAttribute('aria-selected', 'false');
            }
        }
        afterActivation(item) {
            if (!item) {
                return;
            }
            item.setAttribute('aria-selected', 'true');
            if (!item.id) {
                item.id = `option-${randomString(4)}`;
            }
            this.setAttribute('aria-activedescendant', item.id);
        }
        highlightItem(item) {
            this.beforeActivation();
            super.highlightItem(item);
            this.afterActivation(this.highlightListItem);
        }
        activateListItem(item) {
            this.beforeActivation();
            super.activateListItem(item);
            this.afterActivation(this.activeListItem);
        }
        constructor() {
            super(...arguments);
            __runInitializers(this, _ariaSelectedElement_extraInitializers);
        }
    };
})();
/**
 * The listbox is used for lists from which a user may select one or more items which are static and,
 * unlike HTML <select> elements, may contain images.
 *
 * Note, this will automatically set `role` to `option` and `aria-selected` to `false` on each child
 * that is a valid list item.
 *
 * TODO:
 * - define a checkbox item, space toggle a checkbox.
 */
export default UiListbox;
//# sourceMappingURL=Listbox.js.map