'use client';
import { __decorate } from 'tslib';
import { html } from 'lit';
import { queryAssignedElements, property } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import SgdsElement from '../../base/sgds-element.js';
import { SgdsIcon } from '../Icon/sgds-icon.js';
import css_248z$1 from './dropdown-item.js';
import css_248z from './dropdown.js';

/**
 * @summary `SgdsDropdownItem` are navigation links built with `HTMLAnchorElement`. It should be used in the default slot of `SgdsDropdown`
 * @slot default - The default slot for SgdsDropdownItem. Pass in a single anchor tag per dropdown item directly for navigation items.
 */
class SgdsDropdownItem extends SgdsElement {
    constructor() {
        super(...arguments);
        /** when true, sets the active stylings of dropdown item */
        this.active = false;
        /** Disables the SgdsMainnavItem */
        this.disabled = false;
    }
    connectedCallback() {
        super.connectedCallback();
        this.addEventListener("keydown", (e) => {
            if (e.key === "Enter") {
                this.anchor[0].click();
            }
        });
        this.addEventListener("click", () => {
            this.anchor.length > 0 && this.anchor[0].click();
        });
        this.setAttribute("role", "menuitem");
        this.setAttribute("aria-disabled", `${this.disabled}`);
    }
    render() {
        return html `
      <div
        class="dropdown-item ${classMap({
            disabled: this.disabled,
            active: this.active
        })}"
        tabindex=${this.disabled ? "-1" : "0"}
      >
        <slot></slot>
      </div>
    `;
    }
}
SgdsDropdownItem.styles = [css_248z, css_248z$1];
SgdsDropdownItem.dependencies = {
    "sgds-icon": SgdsIcon
};
__decorate([
    queryAssignedElements({ flatten: true })
], SgdsDropdownItem.prototype, "anchor", void 0);
__decorate([
    property({ type: Boolean })
], SgdsDropdownItem.prototype, "active", void 0);
__decorate([
    property({ type: Boolean, reflect: true })
], SgdsDropdownItem.prototype, "disabled", void 0);

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