import {
  LocalizeController
} from "./chunk.X3FE7OHE.js";
import {
  SolidElement,
  customElement
} from "./chunk.H53WQBDK.js";
import {
  __decorateClass
} from "./chunk.S3NI7NKU.js";

// src/components/menu/menu.ts
import { css, html } from "lit";
import { query } from "lit/decorators.js";
var SdMenu = class extends SolidElement {
  constructor() {
    super(...arguments);
    this.localize = new LocalizeController(this);
    this.handleOutsideClick = (event) => {
      if (!this.contains(event.target)) {
        this.getAllItems().forEach((item) => item.classList.remove("menu-item-focus"));
      }
    };
  }
  connectedCallback() {
    super.connectedCallback();
    this.setAttribute("role", "menu");
    document.addEventListener("click", this.handleOutsideClick);
  }
  disconnectedCallback() {
    super.disconnectedCallback();
    document.removeEventListener("click", this.handleOutsideClick);
  }
  handleClick(event) {
    const menuItemTypes = ["menuitem", "menuitemcheckbox"];
    const composedPath = event.composedPath();
    const target = composedPath.find((el) => {
      var _a;
      return menuItemTypes.includes(((_a = el == null ? void 0 : el.getAttribute) == null ? void 0 : _a.call(el, "role")) || "");
    });
    if (!target) return;
    const closestMenu = composedPath.find((el) => {
      var _a;
      return ((_a = el == null ? void 0 : el.getAttribute) == null ? void 0 : _a.call(el, "role")) === "menu";
    });
    const clickHasSubmenu = closestMenu !== this;
    if (clickHasSubmenu) return;
    const item = target;
    if (item.type === "checkbox") {
      item.checked = !item.checked;
    }
    this.emit("sd-select", { detail: { item } });
  }
  handleKeyDown(event) {
    if (event.key === "Escape") {
      const item = this.getCurrentItem();
      item == null ? void 0 : item.classList.remove("menu-item-focus");
    } else if (event.key === "Enter" || event.key === " ") {
      const item = this.getCurrentItem();
      event.preventDefault();
      event.stopPropagation();
      item == null ? void 0 : item.classList.remove("menu-item-focus");
      item == null ? void 0 : item.click();
    } else if (["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) {
      const items = this.getAllItems();
      const activeItem = this.getCurrentItem();
      let index = activeItem ? items.indexOf(activeItem) : 0;
      activeItem == null ? void 0 : activeItem.classList.remove("menu-item-focus");
      if (items.length > 0) {
        event.preventDefault();
        event.stopPropagation();
        const move = (start, step) => {
          let i = start;
          for (const _ of items) {
            i = (i + step + items.length) % items.length;
            if (!items[i].disabled) return i;
          }
          return start;
        };
        if (event.key === "ArrowDown") {
          index = move(index, 1);
        } else if (event.key === "ArrowUp") {
          index = move(index, -1);
        } else if (event.key === "Home") {
          index = items.findIndex((item) => !item.disabled);
          if (index === -1) index = 0;
        } else if (event.key === "End") {
          index = items.length - 1;
          for (let i = items.length - 1; i >= 0; i--) {
            if (!items[i].disabled) {
              index = i;
              break;
            }
          }
        }
        this.setCurrentItem(items[index]);
        items[index].focus();
        items[index].classList.add("menu-item-focus");
      }
    }
  }
  handleMouseDown(event) {
    const target = event.target;
    if (this.isMenuItem(target)) {
      this.setCurrentItem(target);
    }
  }
  handleSlotChange() {
    const items = this.getAllItems();
    if (items.length > 0) {
      this.setCurrentItem(items[0]);
    }
  }
  isMenuItem(item) {
    var _a;
    return item.tagName.toLowerCase() === "sd-menu-item" || ["menuitem", "menuitemcheckbox", "menuitemradio"].includes((_a = item.getAttribute("role")) != null ? _a : "");
  }
  /** @internal Gets all slotted menu items, ignoring dividers, headers, and other elements. */
  getAllItems() {
    return [...this.defaultSlot.assignedElements({ flatten: true })].filter((el) => {
      if (!this.isMenuItem(el)) {
        return false;
      }
      return true;
    });
  }
  /**
   * @internal Gets the current menu item, which is the menu item that has `tabindex="0"` within the roving tab index.
   * The menu item may or may not have focus, but for keyboard interaction purposes it's considered the "active" item.
   */
  getCurrentItem() {
    return this.getAllItems().find((i) => i.getAttribute("tabindex") === "0");
  }
  /**
   * @internal Sets the current menu item to the specified element. This sets `tabindex="0"` on the target element and
   * `tabindex="-1"` to all other items. This method must be called prior to setting focus on a menu item.
   */
  setCurrentItem(item) {
    const items = this.getAllItems();
    items.forEach((i) => {
      i.setAttribute("tabindex", i === item ? "0" : "-1");
    });
  }
  render() {
    return html`<slot @slotchange="${this.handleSlotChange}" @click="${this.handleClick}" @keydown="${this.handleKeyDown}" @mousedown="${this.handleMouseDown}"></slot>`;
  }
};
SdMenu.styles = [
  ...SolidElement.styles,
  css`/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */@layer properties;@layer theme,base,components,utilities;
:host{position:relative;display:block;overflow:auto;overscroll-behavior:auto;border-radius:var(--sd-radius-md);padding-inline:var(--sd-spacing-2);padding-block:var(--sd-spacing-3);--tw-shadow:var(--sd-shadow)!important;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)!important}::slotted(sd-divider){padding-block:var(--sd-spacing-3)}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}`
];
__decorateClass([
  query("slot")
], SdMenu.prototype, "defaultSlot", 2);
SdMenu = __decorateClass([
  customElement("sd-menu")
], SdMenu);

export {
  SdMenu
};
