'use client';
'use strict';

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

var tslib = require('tslib');
var lit = require('lit');
var decorators_js = require('lit/decorators.js');
var ref_js = require('lit/directives/ref.js');
var dropdownListElement = require('../../base/dropdown-list-element.cjs.js');
var watch = require('../../utils/watch.cjs.js');
var dropdownMenu = require('./dropdown-menu.cjs.js');
var dropdown = require('./dropdown.cjs.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.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_js.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 lit.html `
      <div class="dropdown">
        <div
          class="toggler-container"
          ${ref_js.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_js.ref(this.menuRef)}>
          <slot id="default" @click=${this.handleSelectSlot}></slot>
        </div>
      </div>
    `;
    }
}
SgdsDropdown.styles = [...dropdownListElement.DropdownListElement.styles, dropdown["default"], dropdownMenu["default"]];
tslib.__decorate([
    decorators_js.property({ type: Boolean, reflect: true, state: false })
], SgdsDropdown.prototype, "noFlip", void 0);
tslib.__decorate([
    decorators_js.property({ type: Boolean, reflect: true, state: false })
], SgdsDropdown.prototype, "menuAlignRight", void 0);
tslib.__decorate([
    decorators_js.property({ type: String, reflect: true, state: false })
], SgdsDropdown.prototype, "drop", void 0);
tslib.__decorate([
    decorators_js.queryAssignedElements({ slot: "toggler", flatten: true })
], SgdsDropdown.prototype, "_toggler", void 0);
tslib.__decorate([
    watch.watch("disabled", { waitUntilFirstUpdate: true })
], SgdsDropdown.prototype, "_handleDisabled", null);

exports.SgdsDropdown = SgdsDropdown;
exports["default"] = SgdsDropdown;
//# sourceMappingURL=sgds-dropdown.cjs.js.map
