@tailng-ui/primitives 0.1.0

package/src/lib/navigation/menu/tng-menu.js

@@ -0,0 +1,1026 @@
+var TngMenu_1;
+import { __decorate } from "tslib";
+import { ChangeDetectorRef, Directive, ElementRef, HostBinding, HostListener, inject, input, NgZone, output, } from '@angular/core';
+import { createTngIdFactory } from '@tailng-ui/cdk';
+function getNextIndex(currentIndex, total) {
+    if (currentIndex < 0) {
+        return 0;
+    }
+    return currentIndex + 1 >= total ? 0 : currentIndex + 1;
+}
+function getPrevIndex(currentIndex, total) {
+    if (currentIndex < 0) {
+        return total - 1;
+    }
+    return currentIndex - 1 < 0 ? total - 1 : currentIndex - 1;
+}
+function resolveMenuFocusAction(key) {
+    switch (key) {
+        case 'ArrowDown':
+            return 'next';
+        case 'ArrowUp':
+            return 'prev';
+        case 'Home':
+            return 'first';
+        case 'End':
+            return 'last';
+        default:
+            return null;
+    }
+}
+function resolveFocusIndex(action, currentIndex, total, loop) {
+    switch (action) {
+        case 'next':
+            if (!loop && currentIndex >= total - 1) {
+                return total - 1;
+            }
+            return getNextIndex(currentIndex, total);
+        case 'prev':
+            if (!loop) {
+                if (currentIndex < 0) {
+                    return 0;
+                }
+                if (currentIndex <= 0) {
+                    return 0;
+                }
+            }
+            return getPrevIndex(currentIndex, total);
+        case 'first':
+            return 0;
+        case 'last':
+            return total - 1;
+    }
+}
+const createMenuId = createTngIdFactory('tng-menu');
+const createMenuItemId = createTngIdFactory('tng-menu-item');
+const createMenuTriggerId = createTngIdFactory('tng-menu-trigger');
+const TYPEAHEAD_RESET_MS = 500;
+let TngMenu = class TngMenu {
+    static { TngMenu_1 = this; }
+    static openRootMenu = null;
+    changeDetectorRef = inject(ChangeDetectorRef);
+    hostRef = inject(ElementRef);
+    ngZone = inject(NgZone);
+    resolvedId = this.hostRef.nativeElement.getAttribute('id') ?? createMenuId();
+    itemsById = new Map();
+    outsidePointerdownCleanup = null;
+    typeaheadResetHandle = null;
+    menubarArrowHandler = null;
+    menubarTabHandler = null;
+    restoreFocusOnOutsideClick = false;
+    triggerStateSync = null;
+    triggerElement = null;
+    activeItemId = null;
+    parentMenu = null;
+    parentMenuItem = null;
+    openSubmenu = null;
+    openState = false;
+    typeaheadBuffer = '';
+    loop = input(true);
+    disabled = input(false);
+    closeOnSelect = input(true);
+    dismissOnOutsideClick = input(true);
+    dismissOnFocusout = input(false);
+    tngMenuOpened = output();
+    tngMenuClosed = output();
+    tngMenuSelect = output();
+    dataSlot = 'menu';
+    role = 'menu';
+    id = this.resolvedId;
+    get tabIndex() {
+        return this.hostRef.nativeElement.getAttribute('tabindex') ?? '-1';
+    }
+    get dataState() {
+        return this.openState ? 'open' : 'closed';
+    }
+    get hidden() {
+        return this.openState ? null : '';
+    }
+    get ariaActiveDescendant() {
+        return this.activeItemId;
+    }
+    setTriggerElement(triggerElement, triggerStateSync) {
+        this.triggerElement = triggerElement;
+        this.triggerStateSync = triggerStateSync ?? this.triggerStateSync;
+        this.syncAriaLabelledby();
+    }
+    clearTriggerLink(triggerElement) {
+        if (triggerElement !== undefined && this.triggerElement !== triggerElement) {
+            return;
+        }
+        this.triggerElement = null;
+        this.triggerStateSync = null;
+        this.menubarArrowHandler = null;
+        this.menubarTabHandler = null;
+        this.syncAriaLabelledby();
+    }
+    setRestoreFocusOnOutsideClick(restoreFocusOnOutsideClick) {
+        this.restoreFocusOnOutsideClick = restoreFocusOnOutsideClick;
+    }
+    setMenubarArrowHandler(menubarArrowHandler) {
+        this.menubarArrowHandler = menubarArrowHandler;
+    }
+    setMenubarTabHandler(menubarTabHandler) {
+        this.menubarTabHandler = menubarTabHandler;
+    }
+    setParentMenu(parentMenu, parentMenuItem) {
+        this.parentMenu = parentMenu;
+        this.parentMenuItem = parentMenuItem;
+    }
+    focusPanel() {
+        this.hostRef.nativeElement.focus();
+    }
+    focusPanelAndMoveActiveItem(action) {
+        if (!this.openState) {
+            return;
+        }
+        this.moveActiveItem(action);
+        this.hostRef.nativeElement.focus();
+        this.changeDetectorRef.detectChanges();
+    }
+    isOpen() {
+        return this.openState;
+    }
+    isDisabled() {
+        return this.disabled();
+    }
+    isItemActive(itemId) {
+        return this.activeItemId === itemId;
+    }
+    registerItem(item) {
+        this.itemsById.set(item.getItemId(), item);
+    }
+    unregisterItem(item) {
+        const orderedItems = Array.from(this.itemsById.values());
+        const itemIndex = orderedItems.findIndex((registeredItem) => registeredItem === item);
+        if (this.itemsById.get(item.getItemId()) === item) {
+            this.itemsById.delete(item.getItemId());
+        }
+        if (this.activeItemId === item.getItemId()) {
+            this.activeItemId =
+                itemIndex < 0
+                    ? this.resolveAdjacentEnabledItemId(item.getItemId())
+                    : this.resolveAdjacentEnabledItemIdFromRegisteredItems(orderedItems, itemIndex);
+        }
+    }
+    onItemDisabledStateChange(item) {
+        if (!item.isDisabled() || this.activeItemId !== item.getItemId()) {
+            return;
+        }
+        this.activeItemId = this.resolveAdjacentEnabledItemId(item.getItemId());
+    }
+    onItemNavigabilityStateChange(item) {
+        if (item.isNavigable() || this.activeItemId !== item.getItemId()) {
+            return;
+        }
+        this.activeItemId = this.resolveAdjacentEnabledItemId(item.getItemId());
+    }
+    open(focusAction = 'none') {
+        if (this.openState || this.disabled()) {
+            return;
+        }
+        if (this.parentMenu === null) {
+            if (TngMenu_1.openRootMenu !== null && TngMenu_1.openRootMenu !== this) {
+                TngMenu_1.openRootMenu.close(false);
+            }
+        }
+        else {
+            this.parentMenu.openChildSubmenu(this);
+        }
+        this.openState = true;
+        if (this.parentMenu === null) {
+            TngMenu_1.openRootMenu = this;
+        }
+        if (focusAction === 'first') {
+            this.moveActiveItem('next');
+        }
+        else if (focusAction === 'last') {
+            this.moveActiveItem('prev');
+        }
+        else {
+            this.activeItemId = null;
+        }
+        this.tngMenuOpened.emit();
+        this.triggerStateSync?.();
+        this.attachOutsidePointerdownListener();
+        this.changeDetectorRef.detectChanges();
+        this.hostRef.nativeElement.focus();
+    }
+    close(restoreFocus) {
+        if (!this.openState) {
+            return;
+        }
+        if (this.openSubmenu !== null) {
+            this.openSubmenu.close(false);
+            this.openSubmenu = null;
+        }
+        this.openState = false;
+        this.activeItemId = null;
+        this.clearTypeaheadBuffer();
+        this.detachOutsidePointerdownListener();
+        this.triggerStateSync?.();
+        if (this.parentMenu !== null) {
+            this.parentMenu.notifySubmenuClosed(this);
+        }
+        else if (TngMenu_1.openRootMenu === this) {
+            TngMenu_1.openRootMenu = null;
+        }
+        this.tngMenuClosed.emit();
+        if (restoreFocus) {
+            this.triggerElement?.focus();
+        }
+        this.changeDetectorRef.detectChanges();
+    }
+    ngOnDestroy() {
+        const wasOpen = this.openState;
+        this.openState = false;
+        this.activeItemId = null;
+        this.clearTypeaheadBuffer();
+        this.detachOutsidePointerdownListener();
+        this.openSubmenu = null;
+        if (wasOpen) {
+            if (this.parentMenu !== null) {
+                this.parentMenu.notifySubmenuClosed(this);
+            }
+            else if (TngMenu_1.openRootMenu === this) {
+                TngMenu_1.openRootMenu = null;
+            }
+            this.triggerStateSync?.();
+        }
+        this.clearTriggerLink();
+    }
+    requestSelect(item, trigger) {
+        if (!this.openState || !item.isNavigable()) {
+            return;
+        }
+        item.applySelectionState();
+        this.activeItemId = item.getItemId();
+        this.tngMenuSelect.emit({
+            value: item.getValue(),
+            itemId: item.getItemId(),
+            trigger,
+        });
+        if (this.closeOnSelect()) {
+            this.closeSelfAndAncestorMenus(false);
+        }
+    }
+    setActiveItem(item) {
+        if (!this.openState || !item.isNavigable()) {
+            return;
+        }
+        this.activeItemId = item.getItemId();
+        this.syncOpenSubmenuWithActiveItem();
+        this.changeDetectorRef.detectChanges();
+    }
+    setSelectedRadioItem(selectedItem) {
+        for (const item of this.itemsById.values()) {
+            if (item.getRole() !== 'menuitemradio') {
+                continue;
+            }
+            item.setCheckedState(item === selectedItem);
+        }
+    }
+    openChildSubmenu(submenu) {
+        if (this.openSubmenu !== null && this.openSubmenu !== submenu) {
+            this.openSubmenu.close(false);
+        }
+        this.openSubmenu = submenu;
+    }
+    notifySubmenuClosed(submenu) {
+        if (this.openSubmenu === submenu) {
+            this.openSubmenu = null;
+        }
+    }
+    closeSelfAndAncestorMenus(restoreFocusAtRoot) {
+        let menuToClose = this;
+        while (menuToClose !== null) {
+            const nextAncestorMenu = menuToClose.parentMenu;
+            const shouldRestoreFocus = nextAncestorMenu === null && restoreFocusAtRoot;
+            menuToClose.close(shouldRestoreFocus);
+            menuToClose = nextAncestorMenu;
+        }
+    }
+    getEnabledMenuItems() {
+        const items = Array.from(this.hostRef.nativeElement.querySelectorAll('[tngMenuItem]'));
+        const enabledItems = [];
+        for (const item of items) {
+            if (this.isNavigableItemElement(item)) {
+                enabledItems.push(item);
+            }
+        }
+        return enabledItems;
+    }
+    resolveAdjacentEnabledItemId(referenceItemId) {
+        const items = Array.from(this.hostRef.nativeElement.querySelectorAll('[tngMenuItem]'));
+        if (items.length === 0) {
+            return null;
+        }
+        const referenceIndex = items.findIndex((item) => item.id === referenceItemId);
+        if (referenceIndex < 0) {
+            return this.getEnabledMenuItems()[0]?.id ?? null;
+        }
+        for (let index = referenceIndex + 1; index < items.length; index += 1) {
+            const candidate = items[index];
+            if (this.isNavigableItemElement(candidate)) {
+                return candidate.id;
+            }
+        }
+        for (let index = referenceIndex - 1; index >= 0; index -= 1) {
+            const candidate = items[index];
+            if (this.isNavigableItemElement(candidate)) {
+                return candidate.id;
+            }
+        }
+        return null;
+    }
+    resolveAdjacentEnabledItemIdFromRegisteredItems(items, referenceIndex) {
+        for (let index = referenceIndex + 1; index < items.length; index += 1) {
+            const candidate = items[index];
+            if (candidate.isNavigable() && this.itemsById.get(candidate.getItemId()) === candidate) {
+                return candidate.getItemId();
+            }
+        }
+        for (let index = referenceIndex - 1; index >= 0; index -= 1) {
+            const candidate = items[index];
+            if (candidate.isNavigable() && this.itemsById.get(candidate.getItemId()) === candidate) {
+                return candidate.getItemId();
+            }
+        }
+        return null;
+    }
+    isNavigableItemElement(item) {
+        const registeredItem = this.itemsById.get(item.id);
+        return registeredItem !== undefined && registeredItem.isNavigable();
+    }
+    onDocumentPointerdown(event) {
+        if (!this.openState || !this.dismissOnOutsideClick()) {
+            return;
+        }
+        const target = event.target;
+        if (!(target instanceof Node)) {
+            return;
+        }
+        if (this.isTargetInsideOpenMenuTree(target)) {
+            return;
+        }
+        this.close(this.restoreFocusOnOutsideClick);
+    }
+    isTargetInsideOpenMenuTree(target) {
+        if (this.hostRef.nativeElement.contains(target)) {
+            return true;
+        }
+        if (this.triggerElement?.contains(target) === true) {
+            return true;
+        }
+        return this.openSubmenu?.isTargetInsideOpenMenuTree(target) ?? false;
+    }
+    onFocusout(event) {
+        if (!this.openState || !this.dismissOnFocusout()) {
+            return;
+        }
+        const relatedTarget = event.relatedTarget;
+        if (relatedTarget instanceof Node && this.hostRef.nativeElement.contains(relatedTarget)) {
+            return;
+        }
+        this.close(false);
+    }
+    attachOutsidePointerdownListener() {
+        this.detachOutsidePointerdownListener();
+        if (!this.dismissOnOutsideClick()) {
+            return;
+        }
+        const handler = (event) => {
+            this.onDocumentPointerdown(event);
+        };
+        this.ngZone.runOutsideAngular(() => {
+            document.addEventListener('pointerdown', handler);
+            this.outsidePointerdownCleanup = () => {
+                document.removeEventListener('pointerdown', handler);
+            };
+        });
+    }
+    syncAriaLabelledby() {
+        const triggerId = this.triggerElement?.id;
+        if (triggerId === undefined || triggerId.length === 0) {
+            this.hostRef.nativeElement.removeAttribute('aria-labelledby');
+            return;
+        }
+        this.hostRef.nativeElement.setAttribute('aria-labelledby', triggerId);
+    }
+    detachOutsidePointerdownListener() {
+        this.outsidePointerdownCleanup?.();
+        this.outsidePointerdownCleanup = null;
+    }
+    moveActiveItem(action) {
+        const items = this.getEnabledMenuItems();
+        if (items.length === 0) {
+            this.activeItemId = null;
+            return;
+        }
+        let currentIndex = -1;
+        for (let index = 0; index < items.length; index += 1) {
+            if (items[index].id === this.activeItemId) {
+                currentIndex = index;
+                break;
+            }
+        }
+        const targetIndex = resolveFocusIndex(action, currentIndex, items.length, this.loop());
+        this.activeItemId = items[targetIndex]?.id ?? null;
+        this.syncOpenSubmenuWithActiveItem();
+    }
+    syncOpenSubmenuWithActiveItem() {
+        if (this.openSubmenu !== null && this.parentMenuItem?.getOwnedSubmenu() !== this.openSubmenu) {
+            // no-op safeguard for submenu instances
+        }
+        const activeItem = this.activeItemId === null ? null : this.itemsById.get(this.activeItemId) ?? null;
+        if (this.openSubmenu !== null && activeItem !== this.openSubmenu.parentMenuItem) {
+            this.openSubmenu.close(false);
+        }
+    }
+    moveActiveItemByTypeahead(key) {
+        const items = this.getEnabledMenuItems();
+        if (items.length === 0) {
+            return false;
+        }
+        const normalizedKey = key.trim().toLowerCase();
+        if (normalizedKey.length !== 1) {
+            return false;
+        }
+        const repeatingSingleChar = this.typeaheadBuffer.length > 0 &&
+            this.typeaheadBuffer.split('').every((char) => char === normalizedKey);
+        let query = repeatingSingleChar ? normalizedKey : `${this.typeaheadBuffer}${normalizedKey}`;
+        let match = this.findTypeaheadMatch(items, query, repeatingSingleChar);
+        if (match === null && query !== normalizedKey) {
+            query = normalizedKey;
+            match = this.findTypeaheadMatch(items, query, true);
+        }
+        if (match === null) {
+            return false;
+        }
+        this.activeItemId = match.id;
+        this.resetTypeaheadBuffer(query);
+        return true;
+    }
+    findTypeaheadMatch(items, query, cycleFromActiveItem) {
+        const currentIndex = items.findIndex((item) => item.id === this.activeItemId);
+        const startIndex = cycleFromActiveItem && currentIndex >= 0 ? (currentIndex + 1) % items.length : 0;
+        for (let offset = 0; offset < items.length; offset += 1) {
+            const index = (startIndex + offset) % items.length;
+            const item = items[index];
+            const label = item.textContent?.trim().toLowerCase() ?? '';
+            if (label.startsWith(query)) {
+                return item;
+            }
+        }
+        return null;
+    }
+    resetTypeaheadBuffer(nextBuffer) {
+        this.typeaheadBuffer = nextBuffer;
+        if (this.typeaheadResetHandle !== null) {
+            clearTimeout(this.typeaheadResetHandle);
+        }
+        this.typeaheadResetHandle = setTimeout(() => {
+            this.typeaheadBuffer = '';
+            this.typeaheadResetHandle = null;
+        }, TYPEAHEAD_RESET_MS);
+    }
+    clearTypeaheadBuffer() {
+        this.typeaheadBuffer = '';
+        if (this.typeaheadResetHandle !== null) {
+            clearTimeout(this.typeaheadResetHandle);
+            this.typeaheadResetHandle = null;
+        }
+    }
+    isEventFromNestedMenu(event) {
+        const target = event.target;
+        if (!(target instanceof Element)) {
+            return false;
+        }
+        const closestMenu = target.closest('[data-slot="menu"]');
+        return closestMenu !== null && closestMenu !== this.hostRef.nativeElement;
+    }
+    onKeydown(event) {
+        if (this.isEventFromNestedMenu(event)) {
+            return;
+        }
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            if (this.parentMenu !== null) {
+                this.close(false);
+                this.parentMenu.focusPanel();
+                return;
+            }
+            this.close(true);
+            return;
+        }
+        if (event.key === 'Tab') {
+            if (this.parentMenu === null && this.menubarTabHandler !== null && this.menubarTabHandler(event.shiftKey)) {
+                event.preventDefault();
+                return;
+            }
+            this.close(false);
+            return;
+        }
+        if (event.key === 'ArrowRight') {
+            const activeItem = this.activeItemId === null ? null : this.itemsById.get(this.activeItemId) ?? null;
+            if (activeItem !== null && activeItem.getOwnedSubmenu() !== null) {
+                event.preventDefault();
+                activeItem.openOwnedSubmenu('first');
+            }
+            else if (this.parentMenu === null && this.menubarArrowHandler !== null) {
+                event.preventDefault();
+                this.menubarArrowHandler('ArrowRight');
+            }
+            return;
+        }
+        if (event.key === 'ArrowLeft') {
+            if (this.parentMenu !== null) {
+                event.preventDefault();
+                this.close(false);
+                this.parentMenu.focusPanel();
+            }
+            else if (this.menubarArrowHandler !== null) {
+                event.preventDefault();
+                this.menubarArrowHandler('ArrowLeft');
+            }
+            return;
+        }
+        if (event.key === 'Enter' || event.key === ' ') {
+            const activeItem = this.activeItemId === null ? null : this.itemsById.get(this.activeItemId) ?? null;
+            if (activeItem !== null) {
+                event.preventDefault();
+                this.requestSelect(activeItem, 'keyboard');
+            }
+            return;
+        }
+        const action = resolveMenuFocusAction(event.key);
+        if (action === null) {
+            if (event.key.length === 1 && this.moveActiveItemByTypeahead(event.key)) {
+                event.preventDefault();
+            }
+            return;
+        }
+        event.preventDefault();
+        this.moveActiveItem(action);
+    }
+};
+__decorate([
+    HostBinding('attr.data-slot')
+], TngMenu.prototype, "dataSlot", void 0);
+__decorate([
+    HostBinding('attr.role')
+], TngMenu.prototype, "role", void 0);
+__decorate([
+    HostBinding('attr.id')
+], TngMenu.prototype, "id", void 0);
+__decorate([
+    HostBinding('attr.tabindex')
+], TngMenu.prototype, "tabIndex", null);
+__decorate([
+    HostBinding('attr.data-state')
+], TngMenu.prototype, "dataState", null);
+__decorate([
+    HostBinding('attr.hidden')
+], TngMenu.prototype, "hidden", null);
+__decorate([
+    HostBinding('attr.aria-activedescendant')
+], TngMenu.prototype, "ariaActiveDescendant", null);
+__decorate([
+    HostListener('focusout', ['$event'])
+], TngMenu.prototype, "onFocusout", null);
+__decorate([
+    HostListener('keydown', ['$event'])
+], TngMenu.prototype, "onKeydown", null);
+TngMenu = TngMenu_1 = __decorate([
+    Directive({
+        selector: '[tngMenu]',
+        exportAs: 'tngMenu',
+        standalone: true,
+    })
+], TngMenu);
+export { TngMenu };
+let TngMenuItem = class TngMenuItem {
+    hostRef = inject(ElementRef);
+    menu = inject(TngMenu, { optional: true, skipSelf: true });
+    resolvedId = this.hostRef.nativeElement.getAttribute('id') ?? createMenuItemId();
+    lastDisabledState = false;
+    lastNavigableState = true;
+    lastCheckedInput = false;
+    checkedOverride = null;
+    value = input(undefined, {
+        alias: 'tngMenuItemValue',
+    });
+    itemRole = input('menuitem', {
+        alias: 'tngMenuItemRole',
+    });
+    checked = input(false, {
+        alias: 'tngMenuItemChecked',
+    });
+    submenu = input(null, {
+        alias: 'tngMenuItemSubmenu',
+    });
+    constructor() {
+        this.lastDisabledState = this.isDisabled();
+        this.lastNavigableState = this.isNavigable();
+        this.menu?.registerItem(this);
+    }
+    ngOnInit() {
+        this.syncHostId();
+        this.lastCheckedInput = this.checked();
+        this.syncOwnedSubmenuLink();
+        this.syncSubmenuState();
+    }
+    dataSlot = 'menu-item';
+    get role() {
+        return this.itemRole();
+    }
+    id = this.resolvedId;
+    tabIndex = -1;
+    get ariaDisabled() {
+        return this.isDisabled() ? 'true' : null;
+    }
+    get ariaChecked() {
+        if (this.itemRole() === 'menuitem') {
+            return null;
+        }
+        return this.isChecked() ? 'true' : 'false';
+    }
+    get dataActive() {
+        return this.menu?.isItemActive(this.id) ? '' : null;
+    }
+    get ariaHaspopup() {
+        return this.submenu() === null ? null : 'menu';
+    }
+    get ariaControls() {
+        return this.submenu()?.id ?? null;
+    }
+    onClick(event) {
+        if (this.shouldIgnoreNestedInteractiveClick(event)) {
+            return;
+        }
+        if (this.submenu() !== null) {
+            this.menu?.setActiveItem(this);
+            this.openOwnedSubmenu('first');
+            return;
+        }
+        this.select('pointer');
+    }
+    ngOnDestroy() {
+        this.menu?.unregisterItem(this);
+    }
+    ngDoCheck() {
+        const currentDisabledState = this.isDisabled();
+        if (currentDisabledState !== this.lastDisabledState) {
+            this.lastDisabledState = currentDisabledState;
+            this.menu?.onItemDisabledStateChange(this);
+        }
+        const currentNavigableState = this.isNavigable();
+        if (currentNavigableState !== this.lastNavigableState) {
+            this.lastNavigableState = currentNavigableState;
+            this.menu?.onItemNavigabilityStateChange(this);
+        }
+        const currentCheckedInput = this.checked();
+        if (currentCheckedInput !== this.lastCheckedInput) {
+            this.lastCheckedInput = currentCheckedInput;
+            this.checkedOverride = null;
+        }
+    }
+    getItemId() {
+        return this.id;
+    }
+    getValue() {
+        return this.value();
+    }
+    getOwnedSubmenu() {
+        return this.submenu();
+    }
+    getRole() {
+        return this.itemRole();
+    }
+    isDisabled() {
+        const element = this.hostRef.nativeElement;
+        return element.disabled || element.hasAttribute('disabled');
+    }
+    isNavigable() {
+        return !this.isDisabled() && !this.isHiddenOrInert();
+    }
+    select(trigger) {
+        this.menu?.requestSelect(this, trigger);
+    }
+    isChecked() {
+        return this.checkedOverride ?? this.checked();
+    }
+    setCheckedState(checked) {
+        this.checkedOverride = checked;
+    }
+    applySelectionState() {
+        if (this.itemRole() === 'menuitemcheckbox') {
+            this.checkedOverride = !this.isChecked();
+            return;
+        }
+        if (this.itemRole() === 'menuitemradio') {
+            this.menu?.setSelectedRadioItem(this);
+        }
+    }
+    openOwnedSubmenu(focusAction) {
+        const submenu = this.submenu();
+        if (submenu === null) {
+            return;
+        }
+        this.syncOwnedSubmenuLink();
+        submenu.open(focusAction);
+    }
+    syncOwnedSubmenuLink() {
+        const submenu = this.submenu();
+        if (submenu === null || this.menu === null) {
+            return;
+        }
+        this.syncHostId();
+        submenu.setTriggerElement(this.hostRef.nativeElement, () => this.syncSubmenuState());
+        submenu.setRestoreFocusOnOutsideClick(false);
+        submenu.setParentMenu(this.menu, this);
+    }
+    syncHostId() {
+        if (this.hostRef.nativeElement.id === this.id) {
+            return;
+        }
+        this.hostRef.nativeElement.id = this.id;
+    }
+    syncSubmenuState() {
+        const submenu = this.submenu();
+        if (submenu === null) {
+            this.hostRef.nativeElement.removeAttribute('aria-expanded');
+            return;
+        }
+        this.hostRef.nativeElement.setAttribute('aria-expanded', submenu.isOpen() ? 'true' : 'false');
+    }
+    shouldIgnoreNestedInteractiveClick(event) {
+        const target = event.target;
+        if (!(target instanceof Element)) {
+            return false;
+        }
+        const host = this.hostRef.nativeElement;
+        const interactiveTarget = target.closest('button, input, select, textarea, a[href], [role="button"], [role="link"], [role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]');
+        return interactiveTarget !== null && interactiveTarget !== host;
+    }
+    isHiddenOrInert() {
+        const element = this.hostRef.nativeElement;
+        return element.hidden || Boolean(element.inert) || element.hasAttribute('hidden') || element.hasAttribute('inert');
+    }
+};
+__decorate([
+    HostBinding('attr.data-slot')
+], TngMenuItem.prototype, "dataSlot", void 0);
+__decorate([
+    HostBinding('attr.role')
+], TngMenuItem.prototype, "role", null);
+__decorate([
+    HostBinding('attr.id')
+], TngMenuItem.prototype, "id", void 0);
+__decorate([
+    HostBinding('attr.tabindex')
+], TngMenuItem.prototype, "tabIndex", void 0);
+__decorate([
+    HostBinding('attr.aria-disabled')
+], TngMenuItem.prototype, "ariaDisabled", null);
+__decorate([
+    HostBinding('attr.aria-checked')
+], TngMenuItem.prototype, "ariaChecked", null);
+__decorate([
+    HostBinding('attr.data-active')
+], TngMenuItem.prototype, "dataActive", null);
+__decorate([
+    HostBinding('attr.aria-haspopup')
+], TngMenuItem.prototype, "ariaHaspopup", null);
+__decorate([
+    HostBinding('attr.aria-controls')
+], TngMenuItem.prototype, "ariaControls", null);
+__decorate([
+    HostListener('click', ['$event'])
+], TngMenuItem.prototype, "onClick", null);
+TngMenuItem = __decorate([
+    Directive({
+        selector: '[tngMenuItem]',
+        exportAs: 'tngMenuItem',
+        standalone: true,
+    })
+], TngMenuItem);
+export { TngMenuItem };
+let TngMenuSeparator = class TngMenuSeparator {
+    dataSlot = 'menu-separator';
+    role = 'separator';
+};
+__decorate([
+    HostBinding('attr.data-slot')
+], TngMenuSeparator.prototype, "dataSlot", void 0);
+__decorate([
+    HostBinding('attr.role')
+], TngMenuSeparator.prototype, "role", void 0);
+TngMenuSeparator = __decorate([
+    Directive({
+        selector: '[tngMenuSeparator]',
+        exportAs: 'tngMenuSeparator',
+        standalone: true,
+    })
+], TngMenuSeparator);
+export { TngMenuSeparator };
+let TngMenuGroupLabel = class TngMenuGroupLabel {
+    dataSlot = 'menu-group-label';
+    role = 'presentation';
+};
+__decorate([
+    HostBinding('attr.data-slot')
+], TngMenuGroupLabel.prototype, "dataSlot", void 0);
+__decorate([
+    HostBinding('attr.role')
+], TngMenuGroupLabel.prototype, "role", void 0);
+TngMenuGroupLabel = __decorate([
+    Directive({
+        selector: '[tngMenuGroupLabel]',
+        exportAs: 'tngMenuGroupLabel',
+        standalone: true,
+    })
+], TngMenuGroupLabel);
+export { TngMenuGroupLabel };
+let TngMenuBackdrop = class TngMenuBackdrop {
+    menu = input(null, {
+        alias: 'tngMenuBackdrop',
+    });
+    dataSlot = 'menu-backdrop';
+    onClick() {
+        const menu = this.menu();
+        if (menu?.isOpen()) {
+            menu.close(false);
+        }
+    }
+};
+__decorate([
+    HostBinding('attr.data-slot')
+], TngMenuBackdrop.prototype, "dataSlot", void 0);
+__decorate([
+    HostListener('click')
+], TngMenuBackdrop.prototype, "onClick", null);
+TngMenuBackdrop = __decorate([
+    Directive({
+        selector: '[tngMenuBackdrop]',
+        exportAs: 'tngMenuBackdrop',
+        standalone: true,
+    })
+], TngMenuBackdrop);
+export { TngMenuBackdrop };
+let TngMenuTrigger = class TngMenuTrigger {
+    hostRef = inject(ElementRef);
+    resolvedId = this.hostRef.nativeElement.getAttribute('id') ?? createMenuTriggerId();
+    linkedMenu = null;
+    menu = input(null, {
+        alias: 'tngMenuTrigger',
+    });
+    dataSlot = 'menu-trigger';
+    id = this.resolvedId;
+    ariaHaspopup = 'menu';
+    get ariaControls() {
+        return this.menu()?.id ?? null;
+    }
+    ngOnInit() {
+        this.syncHostId();
+        this.syncMenuLink();
+        this.syncAriaExpanded();
+    }
+    ngDoCheck() {
+        this.syncHostId();
+        this.syncMenuLink();
+        this.syncAriaExpanded();
+    }
+    ngOnDestroy() {
+        if (this.linkedMenu === null) {
+            return;
+        }
+        const linkedMenu = this.linkedMenu;
+        linkedMenu.clearTriggerLink(this.hostRef.nativeElement);
+        if (linkedMenu.isOpen()) {
+            linkedMenu.close(false);
+        }
+        this.linkedMenu = null;
+    }
+    onClick() {
+        if (this.isDisabled()) {
+            return;
+        }
+        const menu = this.syncMenuLink();
+        if (menu === null || menu.isDisabled()) {
+            return;
+        }
+        if (menu.isOpen()) {
+            menu.close(true);
+            return;
+        }
+        this.openMenu('none');
+    }
+    onKeydown(event) {
+        if (this.isDisabled()) {
+            return;
+        }
+        const menu = this.syncMenuLink();
+        switch (event.key) {
+            case 'Enter':
+            case ' ':
+                if (menu === null || menu.isDisabled()) {
+                    return;
+                }
+                event.preventDefault();
+                this.openMenu('none');
+                return;
+            case 'ArrowDown':
+                if (menu === null || menu.isDisabled()) {
+                    return;
+                }
+                event.preventDefault();
+                this.openMenu('first');
+                return;
+            case 'ArrowUp':
+                if (menu === null || menu.isDisabled()) {
+                    return;
+                }
+                event.preventDefault();
+                this.openMenu('last');
+                return;
+            case 'Escape':
+                if (menu?.isOpen()) {
+                    event.preventDefault();
+                    menu.close(true);
+                }
+                return;
+            default:
+                return;
+        }
+    }
+    openMenu(focusAction) {
+        const menu = this.syncMenuLink();
+        if (menu === null) {
+            return;
+        }
+        menu.open(focusAction);
+    }
+    syncAriaExpanded() {
+        const menu = this.menu();
+        if (menu === null) {
+            this.hostRef.nativeElement.removeAttribute('aria-expanded');
+            return;
+        }
+        this.hostRef.nativeElement.setAttribute('aria-expanded', menu.isOpen() ? 'true' : 'false');
+    }
+    syncHostId() {
+        if (this.hostRef.nativeElement.id === this.id) {
+            return;
+        }
+        this.hostRef.nativeElement.id = this.id;
+    }
+    isDisabled() {
+        const element = this.hostRef.nativeElement;
+        return element.disabled || element.hasAttribute('disabled') || element.getAttribute('aria-disabled') === 'true';
+    }
+    syncMenuLink() {
+        const menu = this.menu();
+        if (menu === null) {
+            this.linkedMenu?.clearTriggerLink(this.hostRef.nativeElement);
+            this.linkedMenu = null;
+            return null;
+        }
+        if (this.linkedMenu === menu) {
+            return menu;
+        }
+        this.linkedMenu?.clearTriggerLink(this.hostRef.nativeElement);
+        this.linkedMenu = menu;
+        menu.setTriggerElement(this.hostRef.nativeElement, () => this.syncAriaExpanded());
+        menu.setRestoreFocusOnOutsideClick(false);
+        this.syncAriaExpanded();
+        return menu;
+    }
+};
+__decorate([
+    HostBinding('attr.data-slot')
+], TngMenuTrigger.prototype, "dataSlot", void 0);
+__decorate([
+    HostBinding('attr.id')
+], TngMenuTrigger.prototype, "id", void 0);
+__decorate([
+    HostBinding('attr.aria-haspopup')
+], TngMenuTrigger.prototype, "ariaHaspopup", void 0);
+__decorate([
+    HostBinding('attr.aria-controls')
+], TngMenuTrigger.prototype, "ariaControls", null);
+__decorate([
+    HostListener('click')
+], TngMenuTrigger.prototype, "onClick", null);
+__decorate([
+    HostListener('keydown', ['$event'])
+], TngMenuTrigger.prototype, "onKeydown", null);
+TngMenuTrigger = __decorate([
+    Directive({
+        selector: '[tngMenuTrigger]',
+        exportAs: 'tngMenuTrigger',
+        standalone: true,
+    })
+], TngMenuTrigger);
+export { TngMenuTrigger };
+//# sourceMappingURL=tng-menu.js.map