'use client';
'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var tslib = require('tslib');
var decorators_js = require('lit/decorators.js');
var dropdownElement = require('./dropdown-element.cjs.js');

const TAB = "Tab";
const ARROW_DOWN = "ArrowDown";
const ARROW_UP = "ArrowUp";
const ENTER = "Enter";
/**
 * @event sgds-select - Emitted event when a slot item is selected
 */
class DropdownListElement extends dropdownElement.DropdownElement {
    constructor() {
        super(...arguments);
        /** @internal */
        this.nextDropdownItemNo = 0;
        /** @internal */
        this.prevDropdownItemNo = -1;
        this.hidden = false;
    }
    connectedCallback() {
        super.connectedCallback();
        this.addEventListener("sgds-hide", this._resetMenu);
    }
    disconnectedCallback() {
        super.disconnectedCallback();
        this.removeEventListener("sgds-hide", this._resetMenu);
    }
    firstUpdated(changedProperties) {
        super.firstUpdated(changedProperties);
        this.addEventListener("keydown", this._handleKeyboardMenuItemsEvent);
    }
    handleSelectSlot(e) {
        const items = this._getActiveMenuItems();
        const currentItemNo = items.indexOf(e.target);
        this.nextDropdownItemNo = currentItemNo + 1;
        this.prevDropdownItemNo = currentItemNo <= 0 ? items.length - 1 : currentItemNo - 1;
        /** Emitted event from SgdsDropdown element when a slot item is selected */
        const selectedItem = e.target;
        if (!selectedItem.disabled) {
            this.emit("sgds-select");
            if (this.close !== "outside") {
                this.hideMenu(); // <-- Use new API
            }
        }
    }
    _resetMenu() {
        this.nextDropdownItemNo = 0;
        this.prevDropdownItemNo = -1;
        // reset the tabindex
        const items = this._getMenuItems();
        items.forEach(item => {
            var _a;
            const dropdownItem = (_a = item === null || item === void 0 ? void 0 : item.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".dropdown-item");
            dropdownItem && dropdownItem.removeAttribute("tabindex");
        });
    }
    _handleKeyboardMenuItemsEvent(e) {
        if (this.readonly)
            return;
        const menuItems = this._getActiveMenuItems();
        if (menuItems.length === 0)
            return;
        switch (e.key) {
            case ARROW_DOWN:
                e.preventDefault();
                this._setMenuItem(this.nextDropdownItemNo);
                break;
            case ARROW_UP:
                e.preventDefault();
                this._setMenuItem(this.prevDropdownItemNo);
                break;
            case TAB:
                if (!this.menuIsOpen)
                    return;
                e.preventDefault();
                if (e.shiftKey) {
                    this._setMenuItem(this.prevDropdownItemNo);
                }
                else {
                    this._setMenuItem(this.nextDropdownItemNo);
                }
                break;
            case ENTER:
                if (menuItems.includes(e.target)) {
                    this.handleSelectSlot(e);
                }
                break;
        }
    }
    _getMenuItems() {
        var _a, _b;
        const defaultSlot = this.shadowRoot.querySelector("slot#default");
        // for case when default slot is used e.g. dropdown, mainnavdropdown
        if (defaultSlot) {
            const defaultSlotItems = (_a = this.shadowRoot.querySelector("slot#default")) === null || _a === void 0 ? void 0 : _a.assignedElements({
                flatten: true
            }).filter(el => !el.classList.contains("empty-menu") && !el.hasAttribute("hidden"));
            return defaultSlotItems;
        }
        // for case when there is no slot e.g. combobox
        if ((_b = this.menu) === null || _b === void 0 ? void 0 : _b.hasChildNodes()) {
            const menuItems = Array.from(this.menu.children);
            return [...menuItems];
        }
        return [];
    }
    _getActiveMenuItems() {
        return this._getMenuItems().filter(item => !item.disabled && !item.hidden);
    }
    _setMenuItem(currentItemIdx) {
        const items = this._getActiveMenuItems();
        if (items.length === 0)
            return;
        // Use modulo for looping
        const idx = ((currentItemIdx % items.length) + items.length) % items.length;
        const activeItem = items[idx];
        this.emit("i-sgds-option-focus", { detail: { option: activeItem } });
        this.nextDropdownItemNo = (idx + 1) % items.length;
        this.prevDropdownItemNo = (idx - 1 + items.length) % items.length;
        items.forEach(item => {
            const dropdownItem = item.shadowRoot.querySelector(".dropdown-item");
            dropdownItem.setAttribute("tabindex", item === activeItem ? "0" : "-1");
            if (item === activeItem)
                dropdownItem.focus();
        });
    }
}
DropdownListElement.styles = dropdownElement.DropdownElement.styles;
tslib.__decorate([
    decorators_js.query("ul.dropdown-menu")
], DropdownListElement.prototype, "menu", void 0);
tslib.__decorate([
    decorators_js.state()
], DropdownListElement.prototype, "nextDropdownItemNo", void 0);
tslib.__decorate([
    decorators_js.state()
], DropdownListElement.prototype, "prevDropdownItemNo", void 0);
tslib.__decorate([
    decorators_js.property({ type: Boolean, reflect: true })
], DropdownListElement.prototype, "hidden", void 0);

exports.DropdownListElement = DropdownListElement;
//# sourceMappingURL=dropdown-list-element.cjs.js.map
