import { __esDecorate, __runInitializers } from "tslib";
import { html } from 'lit';
import { property } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import Menu from './Menu.js';
import { findElementInShadowRoots } from '../../../lib/Dom.js';
let UiSubMenu = (() => {
    let _classSuper = Menu;
    let _anchor_decorators;
    let _anchor_initializers = [];
    let _anchor_extraInitializers = [];
    return class UiSubMenu extends _classSuper {
        static {
            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
            _anchor_decorators = [property({ type: String })];
            __esDecorate(this, null, _anchor_decorators, { kind: "accessor", name: "anchor", static: false, private: false, access: { has: obj => "anchor" in obj, get: obj => obj.anchor, set: (obj, value) => { obj.anchor = value; } }, metadata: _metadata }, _anchor_initializers, _anchor_extraInitializers);
            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
        }
        #anchor_accessor_storage = __runInitializers(this, _anchor_initializers, void 0);
        /**
         * The ID of the anchor element (parent menu item)
         * @attribute
         */
        get anchor() { return this.#anchor_accessor_storage; }
        set anchor(value) { this.#anchor_accessor_storage = value; }
        /**
         * Reference to the parent menu
         */
        parentMenu = (__runInitializers(this, _anchor_extraInitializers), null);
        /**
         * Reference to the anchor element
         */
        get anchorElement() {
            if (!this.anchor)
                return null;
            return findElementInShadowRoots(this.anchor, this);
        }
        connectedCallback() {
            super.connectedCallback();
            this.setAttribute('role', 'menu');
            this.setAttribute('aria-label', 'Submenu');
        }
        updated(changedProperties) {
            super.updated(changedProperties);
            if (changedProperties.has('anchor')) {
                this.updateAnchorPositioning();
            }
        }
        /**
         * Updates anchor positioning using CSS Anchor Positioning API
         */
        updateAnchorPositioning() {
            const anchor = this.anchorElement;
            if (!anchor)
                return;
            const anchorName = `--anchor-${this.id}`;
            // Set anchor name on the parent menu item
            anchor.style.setProperty('anchor-name', anchorName);
            // Set anchor positioning on the submenu
            this.style.setProperty('position-anchor', anchorName);
        }
        /**
         * Shows the submenu
         */
        show() {
            if (!this.anchorElement) {
                return;
            }
            // Update positioning before showing
            this.updateAnchorPositioning();
            // Close any other open submenus in the parent menu
            if (this.parentMenu) {
                this.parentMenu.closeSubMenu();
                this.parentMenu.setActiveSubMenu(this);
            }
            // Show the popover
            this.showPopover();
            this.open = true;
            this.focus();
            this.dispatchEvent(new CustomEvent('open', {
                bubbles: true,
                composed: true,
                detail: { submenu: this },
            }));
        }
        /**
         * Hides the submenu
         */
        hide() {
            super.hide();
            // Clear parent menu's active submenu reference
            const parentMenu = this.parentMenu;
            if (parentMenu) {
                parentMenu.setActiveSubMenu(null);
            }
            const anchor = this.anchorElement;
            if (anchor) {
                anchor.closeSubMenu();
            }
        }
        /**
         * Sets the parent menu reference
         */
        setParentMenu(menu) {
            this.parentMenu = menu;
        }
        /**
         * Handles selection events - bubbles them up to parent menu
         */
        notifySelect(item) {
            // First hide this submenu
            this.hide();
            // If we have a parent menu, hide it too and bubble the selection
            if (this.parentMenu) {
                this.parentMenu.hide();
            }
            // Call parent implementation to dispatch the select event
            return super.notifySelect(item);
        }
        /**
         * Handles keyboard navigation specific to submenus
         */
        handleKeydown(e) {
            if (!this.open || e.defaultPrevented)
                return;
            switch (e.key) {
                case 'Escape':
                    e.preventDefault();
                    this.hide();
                    // Return focus to parent menu item
                    if (this.anchorElement) {
                        this.anchorElement.focus();
                    }
                    break;
                case 'ArrowLeft':
                    e.preventDefault();
                    this.hide();
                    // Return focus to parent menu item
                    if (this.anchorElement) {
                        this.anchorElement.focus();
                    }
                    break;
                default:
                    // Let the parent handle other keys
                    super.handleKeydown(e);
            }
        }
        render() {
            const classes = classMap({
                'submenu-container': true,
                'submenu-open': this.open,
            });
            return html `
      <div class=${classes}>
        <slot></slot>
      </div>
    `;
        }
    };
})();
/**
 * Material Design 3 Sub-Menu component.
 * Extends the main Menu component to provide sub-menu functionality.
 * Uses Popover API and Anchor Positioning API for modern positioning.
 *
 * @slot - The sub-menu items
 * @fires select - Dispatched when a sub-menu item is selected
 * @fires close - Dispatched when the sub-menu is closed
 */
export default UiSubMenu;
//# sourceMappingURL=SubMenu.js.map