'use client';
import { __decorate } from 'tslib';
import { html } from 'lit';
import { property, queryAssignedElements } from 'lit/decorators.js';
import { ref } from 'lit/directives/ref.js';
import { DropdownListElement } from '../../base/dropdown-list-element.js';
import { watch } from '../../utils/watch.js';
import css_248z$1 from './dropdown-menu.js';
import css_248z from './dropdown.js';

/**
 * @summary `SgdsDropdown` toggles contextual overlays for displaying lists of links.
 * @slot default - slot for sgds-dropdown-item passed into dropdown's menu
 * @slot toggler - slot for the toggler that triggers the open and closing of menu, typically a button. Only pass in a single element into this slot
 *
 */
class SgdsDropdown extends DropdownListElement {
    constructor() {
        super();
        /** Controls auto-flipping of menu */
        this.noFlip = false;
        /** When true, aligns right edge of menu with right edge of button */
        this.menuAlignRight = false;
        /** The drop position of menu relative to the toggle button */
        this.drop = "down";
        this.menuRef = ref();
    }
    async _handleClick() {
        if (this.disabled) {
            return;
        }
        this.toggleMenu();
    }
    _handleCloseMenu() {
        const button = this._toggler[0];
        button === null || button === void 0 ? void 0 : button.focus();
    }
    async connectedCallback() {
        super.connectedCallback();
        this.addEventListener("sgds-hide", this._handleCloseMenu);
    }
    async disconnectedCallback() {
        this.removeEventListener("sgds-hide", this._handleCloseMenu);
    }
    async firstUpdated(changedProperties) {
        super.firstUpdated(changedProperties);
        if (this.menuIsOpen) {
            await this.showMenu();
        }
        this._handleDisabled();
    }
    _handleDisabled() {
        const button = this._toggler[0];
        if (button) {
            if (this.disabled) {
                button.setAttribute("disabled", "true");
            }
            else {
                button.hasAttribute("disabled") && button.removeAttribute("disabled");
            }
        }
    }
    render() {
        return html `
      <div class="dropdown">
        <div
          class="toggler-container"
          ${ref(this.myDropdown)}
          @click=${this._handleClick}
          aria-expanded="${this.menuIsOpen}"
          aria-haspopup="menu"
        >
          <slot name="toggler"></slot>
        </div>
        <div class="dropdown-menu" role="menu" ${ref(this.menuRef)}>
          <slot id="default" @click=${this.handleSelectSlot}></slot>
        </div>
      </div>
    `;
    }
}
SgdsDropdown.styles = [...DropdownListElement.styles, css_248z, css_248z$1];
__decorate([
    property({ type: Boolean, reflect: true, state: false })
], SgdsDropdown.prototype, "noFlip", void 0);
__decorate([
    property({ type: Boolean, reflect: true, state: false })
], SgdsDropdown.prototype, "menuAlignRight", void 0);
__decorate([
    property({ type: String, reflect: true, state: false })
], SgdsDropdown.prototype, "drop", void 0);
__decorate([
    queryAssignedElements({ slot: "toggler", flatten: true })
], SgdsDropdown.prototype, "_toggler", void 0);
__decorate([
    watch("disabled", { waitUntilFirstUpdate: true })
], SgdsDropdown.prototype, "_handleDisabled", null);

export { SgdsDropdown, SgdsDropdown as default };
//# sourceMappingURL=sgds-dropdown.js.map
