@nanahoshi/mona-ui 0.1.0

package/fesm2022/nanahoshi-mona-ui-popup-menu.mjs

@@ -0,0 +1,1559 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, signal, computed, inject, DestroyRef, ElementRef, afterNextRender, Component, contentChild, contentChildren, input, output, afterRenderEffect, ChangeDetectionStrategy, linkedSignal, forwardRef, model, TemplateRef, Directive } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { createElementControlId, isNavigationKey, isTypeaheadKey, setupTypeahead, toCssValue, rxTimeout } from '@nanahoshi/mona-ui/internal';
+import { PopupDataInjectionToken, PopupService } from '@nanahoshi/mona-ui/popup';
+import { forEach, select, groupBy, selectMany, any } from '@mirei/ts-collections';
+import { Subject, take, tap, fromEvent, takeUntil, filter, switchMap } from 'rxjs';
+import { PreventableEvent } from '@nanahoshi/mona-ui/common';
+import { v4 } from 'uuid';
+import { NgTemplateOutlet } from '@angular/common';
+import { LucideChevronRight, LucideCheck } from '@lucide/angular';
+import { ThemeService } from '@nanahoshi/mona-ui/theme';
+import { twMerge } from 'tailwind-merge';
+import { cva } from 'class-variance-authority';
+
+class PopupMenuCloseEvent extends PreventableEvent {
+    constructor(originalEvent) {
+        super("popupMenuCloseEvent", originalEvent?.originalEvent);
+    }
+}
+
+const PopupMenuToken = new InjectionToken("MONA_POPUP_MENU");
+const PopupMenuRadioItemToken = new InjectionToken("MONA_POPUP_MENU_RADIO_ITEM");
+const PopupMenuGroupTemplateToken = new InjectionToken("MONA_POPUP_MENU_GROUP_TEMPLATE");
+const PopupMenuIconTemplateToken = new InjectionToken("MONA_POPUP_MENU_ICON_TEMPLATE");
+const PopupMenuShortcutTemplateToken = new InjectionToken("MONA_POPUP_MENU_SHORTCUT_TEMPLATE");
+const PopupMenuTextTemplateToken = new InjectionToken("MONA_POPUP_MENU_TEXT_TEMPLATE");
+var PopupMenuOrigin;
+(function (PopupMenuOrigin) {
+    PopupMenuOrigin[PopupMenuOrigin["Popup"] = 1] = "Popup";
+    PopupMenuOrigin[PopupMenuOrigin["ContextMenu"] = 2] = "ContextMenu";
+    PopupMenuOrigin[PopupMenuOrigin["DropdownButton"] = 3] = "DropdownButton";
+    PopupMenuOrigin[PopupMenuOrigin["SplitButton"] = 4] = "SplitButton";
+    PopupMenuOrigin[PopupMenuOrigin["MenubarMenu"] = 5] = "MenubarMenu";
+})(PopupMenuOrigin || (PopupMenuOrigin = {}));
+var PopupMenuItemType;
+(function (PopupMenuItemType) {
+    PopupMenuItemType[PopupMenuItemType["CheckboxMenuItem"] = 1] = "CheckboxMenuItem";
+    PopupMenuItemType[PopupMenuItemType["MenuItem"] = 2] = "MenuItem";
+    PopupMenuItemType[PopupMenuItemType["MenuGroup"] = 3] = "MenuGroup";
+    PopupMenuItemType[PopupMenuItemType["RadioGroup"] = 4] = "RadioGroup";
+    PopupMenuItemType[PopupMenuItemType["RadioItem"] = 5] = "RadioItem";
+    PopupMenuItemType[PopupMenuItemType["Separator"] = 6] = "Separator";
+})(PopupMenuItemType || (PopupMenuItemType = {}));
+var PopupMenuTemplateOrigin;
+(function (PopupMenuTemplateOrigin) {
+    PopupMenuTemplateOrigin[PopupMenuTemplateOrigin["Popup"] = 1] = "Popup";
+    PopupMenuTemplateOrigin[PopupMenuTemplateOrigin["ContextMenu"] = 2] = "ContextMenu";
+    PopupMenuTemplateOrigin[PopupMenuTemplateOrigin["DropdownButton"] = 3] = "DropdownButton";
+    PopupMenuTemplateOrigin[PopupMenuTemplateOrigin["SplitButton"] = 4] = "SplitButton";
+    PopupMenuTemplateOrigin[PopupMenuTemplateOrigin["MenubarMenu"] = 5] = "MenubarMenu";
+})(PopupMenuTemplateOrigin || (PopupMenuTemplateOrigin = {}));
+var PopupMenuTemplateType;
+(function (PopupMenuTemplateType) {
+    PopupMenuTemplateType[PopupMenuTemplateType["Group"] = 1] = "Group";
+    PopupMenuTemplateType[PopupMenuTemplateType["Icon"] = 2] = "Icon";
+    PopupMenuTemplateType[PopupMenuTemplateType["Shortcut"] = 3] = "Shortcut";
+    PopupMenuTemplateType[PopupMenuTemplateType["Text"] = 4] = "Text";
+})(PopupMenuTemplateType || (PopupMenuTemplateType = {}));
+
+const itemTypeMap = {
+    [PopupMenuItemType.CheckboxMenuItem]: "checkbox",
+    [PopupMenuItemType.MenuGroup]: "group",
+    [PopupMenuItemType.MenuItem]: "item",
+    [PopupMenuItemType.RadioGroup]: "radio-group",
+    [PopupMenuItemType.RadioItem]: "radio",
+    [PopupMenuItemType.Separator]: "separator"
+};
+const templateItemTypeMap = {
+    [PopupMenuTemplateType.Group]: "group",
+    [PopupMenuTemplateType.Icon]: "icon",
+    [PopupMenuTemplateType.Shortcut]: "shortcut",
+    [PopupMenuTemplateType.Text]: "text"
+};
+const ensurePopupComponentTypes = (params) => {
+    forEach(params.components, item => {
+        if (item.origin !== params.origin) {
+            const type = item.type;
+            const expectedItemType = itemTypeMap[type];
+            const expectedComponentType = params.componentTypeMap[type];
+            throw new Error(`${params.prefix}: The ${expectedItemType} must be defined with ${expectedComponentType}.`);
+        }
+    });
+};
+const ensurePopupTemplateTypes = (params) => {
+    forEach(params.templates, item => {
+        if (item.origin !== params.origin) {
+            const type = item.type;
+            const expectedTemplateType = params.templateTypeMap[type];
+            throw new Error(`${params.prefix}: The ${templateItemTypeMap[type]} template must be defined with ${expectedTemplateType}.`);
+        }
+    });
+};
+const preparePopupMenuItems = (items) => {
+    return select(items, item => {
+        const popupItem = {
+            checkable: item.checkable ?? false,
+            checked: signal(item.checked ?? false),
+            click$: new Subject(),
+            disabled: item.disabled ?? false,
+            group: item.group ?? "",
+            groupTemplate: null,
+            iconTemplate: null,
+            items: preparePopupMenuItems(item.items ?? []),
+            label: item.label ?? "",
+            separator: item.separator ?? false,
+            shortcutTemplate: null,
+            textTemplate: null,
+            uid: v4()
+        };
+        return popupItem;
+    }).toArray();
+};
+const convertToMenuItem = (item) => {
+    return {
+        checkable: item.checkable,
+        checked: item.checked ? item.checked() : false,
+        disabled: item.disabled,
+        group: item.group ? String(item.group) : undefined,
+        items: select(item.items, i => convertToMenuItem(i)).toArray(),
+        label: item.label,
+        separator: item.separator
+    };
+};
+
+class PopupMenuItemClickEvent extends PreventableEvent {
+    #item;
+    constructor(item, originalEvent) {
+        super("popupMenuItemClick", originalEvent);
+        this.#item = item;
+    }
+    get item() {
+        return this.#item;
+    }
+}
+
+const popupMenuBaseVariants = cva(`w-full h-full overflow-hidden`, {
+    variants: {
+        rounded: {
+            small: "rounded-sm",
+            medium: "rounded-md",
+            large: "rounded-lg",
+            none: "rounded-none"
+        }
+    }
+});
+const popupMenuContainerVariants = cva(`
+        flex flex-col
+        bg-background text-foreground
+        border border-border
+        outline-none
+        p-1 shadow-md
+    `, {
+    variants: {
+        rounded: {
+            small: "rounded-sm",
+            medium: "rounded-md",
+            large: "rounded-lg",
+            none: "rounded-none"
+        }
+    }
+});
+const popupMenuGroupHeaderVariants = cva(`font-bold inline-flex select-none px-2 py-1 w-full`, {
+    variants: {
+        size: {
+            small: "text-xs",
+            medium: "text-sm",
+            large: "text-md"
+        }
+    }
+});
+const popupMenuIconContainerVariants = cva(`absolute left-2 flex items-center justify-center`);
+const popupMenuItemVariants = cva(`
+        relative flex gap-2
+        cursor-pointer select-none items-center pl-8 pr-2 py-1
+        outline-none
+
+        hover:bg-hover
+        hover:text-hover-foreground
+
+        focus-within:bg-accent
+        focus-within:text-accent-foreground
+        focus-within:outline-none
+
+        data-[disabled='true']:pointer-events-none
+        data-[disabled='true']:cursor-not-allowed
+        data-[disabled='true']:opacity-50
+
+        data-[active='true']:bg-hover
+        data-[active='true']:text-hover-foreground
+    `, {
+    variants: {
+        rounded: {
+            small: "rounded-sm",
+            medium: "rounded-md",
+            large: "rounded-lg",
+            none: "rounded-none"
+        },
+        size: {
+            small: "text-xs",
+            medium: "text-sm",
+            large: "text-md"
+        }
+    }
+});
+const popupMenuLinkVariants = cva(`flex items-center justify-center`);
+
+const popupMenuBaseThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return popupMenuBaseVariants;
+        default:
+            return popupMenuBaseVariants;
+    }
+};
+const popupMenuContainerThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return popupMenuContainerVariants;
+        default:
+            return popupMenuContainerVariants;
+    }
+};
+const popupMenuGroupHeaderThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return popupMenuGroupHeaderVariants;
+        default:
+            return popupMenuGroupHeaderVariants;
+    }
+};
+const popupMenuIconContainerThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return popupMenuIconContainerVariants;
+        default:
+            return popupMenuIconContainerVariants;
+    }
+};
+const popupMenuItemThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return popupMenuItemVariants;
+        default:
+            return popupMenuItemVariants;
+    }
+};
+const popupMenuLinkThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return popupMenuLinkVariants;
+        default:
+            return popupMenuLinkVariants;
+    }
+};
+
+class PopupMenuListComponent {
+    #childCloseRequest$;
+    #childMenuItems;
+    #close$;
+    #config;
+    #destroyRef;
+    #host;
+    #navigationItems;
+    #parentConfig;
+    #popupService;
+    #themeService;
+    #typeaheadKey$;
+    #viaKeyboardNavigation;
+    constructor() {
+        this.#childCloseRequest$ = new Subject();
+        this.#childMenuItems = computed(() => {
+            const activeMenuItem = this.activeMenuItem();
+            if (activeMenuItem) {
+                return groupBy(activeMenuItem.items, item => item.group).toArray();
+            }
+            return [];
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#childMenuItems" }] : /* istanbul ignore next */ []));
+        this.#close$ = new Subject();
+        this.#config = computed(() => {
+            const data = {
+                childCloseRequest$: this.#childCloseRequest$,
+                isRoot: false,
+                items: this.#childMenuItems(),
+                level: this.#parentConfig.level + 1,
+                menuId: createElementControlId(this.#parentConfig.level + 1),
+                menuItemClick$: this.#parentConfig.menuItemClick$,
+                minWidth: this.#parentConfig.minWidth,
+                navigate$: this.#parentConfig.navigate$,
+                parentClose$: this.#close$,
+                popupGroupTemplate: this.#parentConfig.popupGroupTemplate,
+                popupIconTemplate: this.#parentConfig.popupIconTemplate,
+                popupShortcutTemplate: this.#parentConfig.popupShortcutTemplate,
+                popupTextTemplate: this.#parentConfig.popupTextTemplate,
+                rounded: this.#parentConfig.rounded,
+                size: this.#parentConfig.size,
+                viaKeyboardNavigation: this.#viaKeyboardNavigation(),
+                width: this.#parentConfig.width
+            };
+            return data;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#config" }] : /* istanbul ignore next */ []));
+        this.#destroyRef = inject(DestroyRef);
+        this.#host = inject((ElementRef));
+        this.#navigationItems = computed(() => {
+            const items = this.#parentConfig.items;
+            return selectMany(items, i => i.source)
+                .where(i => !i.separator && !i.disabled)
+                .toImmutableSet();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#navigationItems" }] : /* istanbul ignore next */ []));
+        this.#parentConfig = inject(PopupDataInjectionToken);
+        this.#popupService = inject(PopupService);
+        this.#themeService = inject(ThemeService);
+        this.#typeaheadKey$ = new Subject();
+        this.#viaKeyboardNavigation = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#viaKeyboardNavigation" }] : /* istanbul ignore next */ []));
+        this.activeMenuItem = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "activeMenuItem" }] : /* istanbul ignore next */ []));
+        this.baseClasses = computed(() => {
+            const theme = this.#themeService.theme();
+            const rounded = this.#parentConfig.rounded();
+            return popupMenuBaseThemeVariants(theme)({ rounded });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "baseClasses" }] : /* istanbul ignore next */ []));
+        this.containerClasses = computed(() => {
+            const theme = this.#themeService.theme();
+            const rounded = this.#parentConfig.rounded();
+            return popupMenuContainerThemeVariants(theme)({ rounded });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "containerClasses" }] : /* istanbul ignore next */ []));
+        this.groupHeaderClasses = computed(() => {
+            const theme = this.#themeService.theme();
+            const size = this.#parentConfig.size();
+            const hasIcon = this.iconAreaVisible();
+            const variantClasses = popupMenuGroupHeaderThemeVariants(theme)({ size });
+            const iconClasses = hasIcon ? "pl-8" : "pl-2";
+            return twMerge(variantClasses, iconClasses);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "groupHeaderClasses" }] : /* istanbul ignore next */ []));
+        this.iconAreaVisible = computed(() => {
+            const items = this.#parentConfig.items;
+            const hasIconsOrSelectable = selectMany(items, i => i.source).any(i => i.iconTemplate?.() != null || i.checkable === true || i.radio === true);
+            return hasIconsOrSelectable || !!this.#parentConfig.popupIconTemplate?.();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "iconAreaVisible" }] : /* istanbul ignore next */ []));
+        this.iconContainerClasses = computed(() => {
+            const theme = this.#themeService.theme();
+            return popupMenuIconContainerThemeVariants(theme)();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "iconContainerClasses" }] : /* istanbul ignore next */ []));
+        this.linkContainerClasses = computed(() => {
+            const theme = this.#themeService.theme();
+            return popupMenuLinkThemeVariants(theme)();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "linkContainerClasses" }] : /* istanbul ignore next */ []));
+        this.menuId = computed(() => this.#parentConfig.menuId, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "menuId" }] : /* istanbul ignore next */ []));
+        this.menuItemClasses = computed(() => {
+            const theme = this.#themeService.theme();
+            const rounded = this.#parentConfig.rounded();
+            const size = this.#parentConfig.size();
+            const hasIcon = this.iconAreaVisible();
+            const variantClasses = popupMenuItemThemeVariants(theme)({ rounded, size });
+            const iconClasses = hasIcon ? "pl-8" : "pl-2";
+            return twMerge(variantClasses, iconClasses);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "menuItemClasses" }] : /* istanbul ignore next */ []));
+        this.menuItems = computed(() => this.#parentConfig.items, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "menuItems" }] : /* istanbul ignore next */ []));
+        this.pointerEnter$ = new Subject();
+        this.pointerLeave$ = new Subject();
+        this.popupGroupTemplate = computed(() => this.#parentConfig.popupGroupTemplate?.() ?? null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "popupGroupTemplate" }] : /* istanbul ignore next */ []));
+        this.popupIconTemplate = computed(() => this.#parentConfig.popupIconTemplate?.() ?? null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "popupIconTemplate" }] : /* istanbul ignore next */ []));
+        this.popupShortcutTemplate = computed(() => this.#parentConfig.popupShortcutTemplate?.() ?? null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "popupShortcutTemplate" }] : /* istanbul ignore next */ []));
+        this.popupTextTemplate = computed(() => this.#parentConfig.popupTextTemplate?.(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "popupTextTemplate" }] : /* istanbul ignore next */ []));
+        this.popupRef = null;
+        afterNextRender({
+            read: () => {
+                this.#host.nativeElement.firstElementChild?.focus();
+                if (!this.#parentConfig.isRoot && this.#parentConfig.viaKeyboardNavigation) {
+                    const item = this.focusFirstItem();
+                    this.notifyNavigation(item, "right");
+                }
+            }
+        });
+    }
+    ngOnInit() {
+        this.setSubscriptions();
+    }
+    onItemClick(event, item) {
+        const popupMenuItemClickEvent = new PopupMenuItemClickEvent(item, event);
+        item.click$?.next(popupMenuItemClickEvent);
+        if (popupMenuItemClickEvent.isDefaultPrevented()) {
+            return;
+        }
+        this.#parentConfig.menuItemClick$.next(popupMenuItemClickEvent);
+    }
+    createSubmenu(target, viaKeyboard) {
+        this.#viaKeyboardNavigation.set(viaKeyboard);
+        const minWidth = this.#parentConfig.minWidth?.() ?? undefined;
+        const width = this.#parentConfig.width?.() ?? undefined;
+        this.popupRef = this.#popupService.create({
+            anchor: target,
+            anchorConnectionPoint: "topright",
+            closeOnScroll: true,
+            content: PopupMenuListComponent,
+            data: this.#config(),
+            minWidth,
+            popupConnectionPoint: "topleft",
+            restoreFocus: false,
+            width
+        });
+        return this.popupRef.closed.pipe(take(1), tap(() => {
+            this.popupRef = null;
+            this.#host.nativeElement.firstElementChild?.focus();
+            this.#close$.next();
+            if (!viaKeyboard) {
+                this.activeMenuItem.set(null);
+            }
+        }));
+    }
+    cycleThroughMatchedItems(buffer) {
+        const matchedItems = this.#navigationItems()
+            .where(i => i.label.toLowerCase().startsWith(buffer))
+            .toArray();
+        const activeMenuItem = this.activeMenuItem();
+        if (matchedItems.length === 0) {
+            this.activeMenuItem.set(null);
+            return;
+        }
+        if (matchedItems.length === 1) {
+            this.activeMenuItem.set(matchedItems[0]);
+            return;
+        }
+        if (matchedItems.length > 1) {
+            const currentIndex = activeMenuItem ? matchedItems.indexOf(activeMenuItem) : -1;
+            const nextIndex = (currentIndex + 1) % matchedItems.length;
+            this.activeMenuItem.set(matchedItems[nextIndex]);
+        }
+    }
+    focusFirstItem() {
+        const firstItem = this.#navigationItems().firstOrDefault();
+        if (firstItem) {
+            this.activeMenuItem.set(firstItem);
+        }
+        return firstItem;
+    }
+    handleArrowDownKey() {
+        if (!this.activeMenuItem()) {
+            const firstItem = this.#navigationItems().firstOrDefault();
+            if (firstItem) {
+                this.activeMenuItem.set(firstItem);
+            }
+            return firstItem;
+        }
+        const nextItems = this.#navigationItems().skipWhile(i => i !== this.activeMenuItem());
+        const nextItem = nextItems.skip(1).firstOrDefault();
+        if (nextItem) {
+            this.activeMenuItem.set(nextItem);
+            return nextItem;
+        }
+        const firstItem = this.#navigationItems().firstOrDefault();
+        if (firstItem) {
+            this.activeMenuItem.set(firstItem);
+        }
+        return firstItem;
+    }
+    handleArrowLeftKey() {
+        this.#parentConfig.childCloseRequest$?.next();
+    }
+    handleArrowRightKey() {
+        const activeItem = this.activeMenuItem();
+        if (!activeItem) {
+            return { item: null, hasChild: false };
+        }
+        const target = this.#host.nativeElement.querySelector('[data-active="true"]');
+        if (target && activeItem.items.length > 0) {
+            this.createSubmenu(target, true).subscribe();
+            return { item: activeItem, hasChild: true };
+        }
+        if (activeItem && activeItem.items.length > 0) {
+            return { item: activeItem, hasChild: true };
+        }
+        return { item: null, hasChild: false };
+    }
+    handleArrowUpKey() {
+        if (!this.activeMenuItem()) {
+            const lastItem = this.#navigationItems().lastOrDefault();
+            if (lastItem) {
+                this.activeMenuItem.set(lastItem);
+            }
+            return lastItem;
+        }
+        const items = this.#navigationItems().takeWhile(i => i !== this.activeMenuItem());
+        const previousItem = items.lastOrDefault();
+        if (previousItem) {
+            this.activeMenuItem.set(previousItem);
+            return previousItem;
+        }
+        const lastItem = this.#navigationItems().lastOrDefault();
+        if (lastItem) {
+            this.activeMenuItem.set(lastItem);
+        }
+        return lastItem;
+    }
+    handleEndKey() {
+        const lastItem = this.#navigationItems().lastOrDefault();
+        if (lastItem) {
+            this.activeMenuItem.set(lastItem);
+        }
+    }
+    handleEnterKey() {
+        const activeItem = this.activeMenuItem();
+        if (activeItem && activeItem.items.length > 0) {
+            const target = this.#host.nativeElement.querySelector('[data-active="true"]');
+            if (target) {
+                this.createSubmenu(target, true).subscribe();
+            }
+        }
+        else if (activeItem) {
+            const syntheticEvent = new MouseEvent("click", {
+                bubbles: true,
+                cancelable: true,
+                composed: true
+            });
+            this.onItemClick(syntheticEvent, activeItem);
+        }
+    }
+    handleEscapeKey() {
+        if (this.popupRef) {
+            this.popupRef.close();
+            this.popupRef = null;
+        }
+    }
+    handleHomeKey() {
+        const firstItem = this.#navigationItems().firstOrDefault();
+        if (firstItem) {
+            this.activeMenuItem.set(firstItem);
+        }
+    }
+    handleNavigationKey(event) {
+        let item = null;
+        if (event.key === "ArrowDown") {
+            item = this.handleArrowDownKey();
+            this.notifyNavigation(item, "down");
+        }
+        else if (event.key === "ArrowLeft") {
+            this.handleArrowLeftKey();
+            if (this.#parentConfig.level === 0) {
+                this.notifyNavigation(null, "left");
+            }
+        }
+        else if (event.key === "ArrowRight") {
+            const result = this.handleArrowRightKey();
+            if (!result.hasChild) {
+                this.notifyNavigation(item, "right");
+            }
+        }
+        else if (event.key === "ArrowUp") {
+            item = this.handleArrowUpKey();
+            this.notifyNavigation(item, "up");
+        }
+        else if (event.key === "End") {
+            this.handleEndKey();
+        }
+        else if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            this.handleEnterKey();
+        }
+        else if (event.key === "Escape") {
+            this.handleEscapeKey();
+        }
+        else if (event.key === "Home") {
+            this.handleHomeKey();
+        }
+    }
+    handleTypeaheadKey(event) {
+        this.#typeaheadKey$.next(event.key);
+    }
+    notifyNavigation(item, direction) {
+        this.#parentConfig.navigate$.next({
+            direction,
+            item,
+            level: this.#parentConfig.level
+        });
+    }
+    setKeyboardEvents() {
+        const element = this.#host.nativeElement.firstElementChild;
+        fromEvent(element, "keydown")
+            .pipe(takeUntilDestroyed(this.#destroyRef), tap(e => {
+            if (isNavigationKey(e.key)) {
+                e.preventDefault();
+                this.#typeaheadKey$.next("");
+                this.handleNavigationKey(e);
+            }
+            else if (isTypeaheadKey(e.key)) {
+                e.preventDefault();
+                this.handleTypeaheadKey(e);
+            }
+        }))
+            .subscribe();
+    }
+    setPopupCloseSubscription() {
+        this.#parentConfig.parentClose$
+            .pipe(takeUntilDestroyed(this.#destroyRef), tap(() => {
+            if (this.popupRef) {
+                this.popupRef.close();
+                this.popupRef = null;
+            }
+        }))
+            .subscribe();
+        this.#childCloseRequest$
+            .pipe(takeUntilDestroyed(this.#destroyRef), tap(() => {
+            const activeItem = this.activeMenuItem();
+            this.notifyNavigation(activeItem, "left");
+            if (this.popupRef) {
+                this.popupRef.close();
+                this.popupRef = null;
+            }
+        }))
+            .subscribe();
+    }
+    setPointerSubscriptions() {
+        this.pointerEnter$
+            .pipe(takeUntilDestroyed(this.#destroyRef), takeUntil(this.#parentConfig.parentClose$), filter(e => e.item !== this.activeMenuItem()), tap(e => {
+            this.popupRef?.close();
+            if (e.item.items.length === 0) {
+                this.activeMenuItem.set(null);
+            }
+        }), filter(e => e.item.items.length > 0), switchMap(e => {
+            this.activeMenuItem.set(e.item);
+            return this.createSubmenu(e.event.currentTarget, false);
+        }))
+            .subscribe();
+        this.pointerLeave$
+            .pipe(takeUntilDestroyed(this.#destroyRef), takeUntil(this.pointerEnter$))
+            .subscribe(() => this.popupRef?.close());
+    }
+    setSubscriptions() {
+        this.setKeyboardEvents();
+        this.setPointerSubscriptions();
+        this.setPopupCloseSubscription();
+        this.setTypeaheadSubscription();
+    }
+    setTypeaheadSubscription() {
+        setupTypeahead(this.#typeaheadKey$)
+            .pipe(takeUntilDestroyed(this.#destroyRef))
+            .subscribe(buffer => this.cycleThroughMatchedItems(buffer));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PopupMenuListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: PopupMenuListComponent, isStandalone: true, selector: "mona-popup-menu-list", host: { properties: { "class": "baseClasses()" } }, ngImport: i0, template: "<div\r\n    role=\"menu\"\r\n    [attr.tabindex]=\"0\"\r\n    [attr.aria-orientation]=\"'vertical'\"\r\n    [attr.aria-activedescendant]=\"activeMenuItem()?.uid\"\r\n    [attr.id]=\"menuId()\"\r\n    [class]=\"containerClasses()\">\r\n    @for (group of menuItems(); track $index) {\r\n        @if (typeof group.key === \"string\") {\r\n            @let groupTemplate = group.first().groupTemplate?.() ?? popupGroupTemplate() ?? null;\r\n            <div role=\"group\" [attr.aria-labelledby]=\"`${group.key}-${$index}`\" [class]=\"groupHeaderClasses()\">\r\n                <div [id]=\"`${group.key}-${$index}`\" role=\"presentation\">\r\n                    @if (groupTemplate) {\r\n                        <ng-container\r\n                            [ngTemplateOutlet]=\"groupTemplate\"\r\n                            [ngTemplateOutletContext]=\"{ $implicit: group.key }\"></ng-container>\r\n                    } @else {\r\n                        <span>{{ group.key }}</span>\r\n                    }\r\n                </div>\r\n            </div>\r\n        }\r\n        @for (item of group.source; track $index) {\r\n            @if (item.separator) {\r\n                <div role=\"separator\" class=\"bg-border my-1 h-px\"></div>\r\n            } @else {\r\n                @let iconTemplate = item.iconTemplate?.() ?? popupIconTemplate() ?? null;\r\n                @let shortcutTemplate = item.shortcutTemplate?.() ?? popupShortcutTemplate() ?? null;\r\n                @let textTemplate = item.textTemplate?.() ?? popupTextTemplate() ?? null;\r\n                <div\r\n                    role=\"menuitem\"\r\n                    [id]=\"item.uid\"\r\n                    (pointerenter)=\"pointerEnter$.next({ event: $event, item: item })\"\r\n                    (pointerleave)=\"pointerLeave$.next({ event: $event, item: item })\"\r\n                    (click)=\"onItemClick($event, item)\"\r\n                    [attr.data-active]=\"item === activeMenuItem()\"\r\n                    [attr.aria-disabled]=\"item.disabled\"\r\n                    [attr.aria-expanded]=\"item.items.length > 0 && item === activeMenuItem() && !!popupRef\"\r\n                    [attr.aria-haspopup]=\"item.items.length > 0 ? 'menu' : null\"\r\n                    [attr.aria-label]=\"item.label || null\"\r\n                    [attr.data-disabled]=\"item.disabled\"\r\n                    [class]=\"menuItemClasses()\">\r\n                    @if (iconAreaVisible()) {\r\n                        <div [class]=\"iconContainerClasses()\">\r\n                            @if (!item.checkable && !item.radio) {\r\n                                <ng-container\r\n                                    [ngTemplateOutlet]=\"iconTemplate\"\r\n                                    [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n                            } @else if (item.checkable) {\r\n                                @if (item.checked?.()) {\r\n                                    <svg lucideCheck [size]=\"14\"></svg>\r\n                                }\r\n                            } @else if (item.radio) {\r\n                                @if (item.selected?.()) {\r\n                                    <svg\r\n                                        xmlns=\"http://www.w3.org/2000/svg\"\r\n                                        width=\"24\"\r\n                                        height=\"24\"\r\n                                        viewBox=\"0 0 24 24\"\r\n                                        fill=\"none\"\r\n                                        stroke=\"currentColor\"\r\n                                        stroke-width=\"2\"\r\n                                        stroke-linecap=\"round\"\r\n                                        stroke-linejoin=\"round\"\r\n                                        class=\"lucide lucide-circle size-2 fill-current\">\r\n                                        <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\r\n                                    </svg>\r\n                                }\r\n                            }\r\n                        </div>\r\n                    }\r\n                    <div class=\"flex-1\">\r\n                        @if (textTemplate) {\r\n                            <ng-container\r\n                                [ngTemplateOutlet]=\"textTemplate\"\r\n                                [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n                        } @else {\r\n                            {{ item.label }}\r\n                        }\r\n                    </div>\r\n                    @if (item.items.length > 0) {\r\n                        @if (!item.checkable) {\r\n                            <div [class]=\"linkContainerClasses()\">\r\n                                <svg lucideChevronRight [size]=\"16\"></svg>\r\n                            </div>\r\n                        }\r\n                    } @else if (shortcutTemplate) {\r\n                        <ng-container\r\n                            [ngTemplateOutlet]=\"shortcutTemplate\"\r\n                            [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n                    }\r\n                </div>\r\n            }\r\n        }\r\n    }\r\n</div>\r\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LucideChevronRight, selector: "svg[lucideChevronRight]" }, { kind: "component", type: LucideCheck, selector: "svg[lucideCheck]" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PopupMenuListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mona-popup-menu-list", imports: [NgTemplateOutlet, LucideChevronRight, LucideCheck], host: {
+                        "[class]": "baseClasses()"
+                    }, template: "<div\r\n    role=\"menu\"\r\n    [attr.tabindex]=\"0\"\r\n    [attr.aria-orientation]=\"'vertical'\"\r\n    [attr.aria-activedescendant]=\"activeMenuItem()?.uid\"\r\n    [attr.id]=\"menuId()\"\r\n    [class]=\"containerClasses()\">\r\n    @for (group of menuItems(); track $index) {\r\n        @if (typeof group.key === \"string\") {\r\n            @let groupTemplate = group.first().groupTemplate?.() ?? popupGroupTemplate() ?? null;\r\n            <div role=\"group\" [attr.aria-labelledby]=\"`${group.key}-${$index}`\" [class]=\"groupHeaderClasses()\">\r\n                <div [id]=\"`${group.key}-${$index}`\" role=\"presentation\">\r\n                    @if (groupTemplate) {\r\n                        <ng-container\r\n                            [ngTemplateOutlet]=\"groupTemplate\"\r\n                            [ngTemplateOutletContext]=\"{ $implicit: group.key }\"></ng-container>\r\n                    } @else {\r\n                        <span>{{ group.key }}</span>\r\n                    }\r\n                </div>\r\n            </div>\r\n        }\r\n        @for (item of group.source; track $index) {\r\n            @if (item.separator) {\r\n                <div role=\"separator\" class=\"bg-border my-1 h-px\"></div>\r\n            } @else {\r\n                @let iconTemplate = item.iconTemplate?.() ?? popupIconTemplate() ?? null;\r\n                @let shortcutTemplate = item.shortcutTemplate?.() ?? popupShortcutTemplate() ?? null;\r\n                @let textTemplate = item.textTemplate?.() ?? popupTextTemplate() ?? null;\r\n                <div\r\n                    role=\"menuitem\"\r\n                    [id]=\"item.uid\"\r\n                    (pointerenter)=\"pointerEnter$.next({ event: $event, item: item })\"\r\n                    (pointerleave)=\"pointerLeave$.next({ event: $event, item: item })\"\r\n                    (click)=\"onItemClick($event, item)\"\r\n                    [attr.data-active]=\"item === activeMenuItem()\"\r\n                    [attr.aria-disabled]=\"item.disabled\"\r\n                    [attr.aria-expanded]=\"item.items.length > 0 && item === activeMenuItem() && !!popupRef\"\r\n                    [attr.aria-haspopup]=\"item.items.length > 0 ? 'menu' : null\"\r\n                    [attr.aria-label]=\"item.label || null\"\r\n                    [attr.data-disabled]=\"item.disabled\"\r\n                    [class]=\"menuItemClasses()\">\r\n                    @if (iconAreaVisible()) {\r\n                        <div [class]=\"iconContainerClasses()\">\r\n                            @if (!item.checkable && !item.radio) {\r\n                                <ng-container\r\n                                    [ngTemplateOutlet]=\"iconTemplate\"\r\n                                    [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n                            } @else if (item.checkable) {\r\n                                @if (item.checked?.()) {\r\n                                    <svg lucideCheck [size]=\"14\"></svg>\r\n                                }\r\n                            } @else if (item.radio) {\r\n                                @if (item.selected?.()) {\r\n                                    <svg\r\n                                        xmlns=\"http://www.w3.org/2000/svg\"\r\n                                        width=\"24\"\r\n                                        height=\"24\"\r\n                                        viewBox=\"0 0 24 24\"\r\n                                        fill=\"none\"\r\n                                        stroke=\"currentColor\"\r\n                                        stroke-width=\"2\"\r\n                                        stroke-linecap=\"round\"\r\n                                        stroke-linejoin=\"round\"\r\n                                        class=\"lucide lucide-circle size-2 fill-current\">\r\n                                        <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\r\n                                    </svg>\r\n                                }\r\n                            }\r\n                        </div>\r\n                    }\r\n                    <div class=\"flex-1\">\r\n                        @if (textTemplate) {\r\n                            <ng-container\r\n                                [ngTemplateOutlet]=\"textTemplate\"\r\n                                [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n                        } @else {\r\n                            {{ item.label }}\r\n                        }\r\n                    </div>\r\n                    @if (item.items.length > 0) {\r\n                        @if (!item.checkable) {\r\n                            <div [class]=\"linkContainerClasses()\">\r\n                                <svg lucideChevronRight [size]=\"16\"></svg>\r\n                            </div>\r\n                        }\r\n                    } @else if (shortcutTemplate) {\r\n                        <ng-container\r\n                            [ngTemplateOutlet]=\"shortcutTemplate\"\r\n                            [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n                    }\r\n                </div>\r\n            }\r\n        }\r\n    }\r\n</div>\r\n" }]
+        }], ctorParameters: () => [] });
+
+class PopupMenuComponent {
+    #close$;
+    #destroyRef;
+    #menuItemClick$;
+    #navigate$;
+    #popupMenuListConfig;
+    #popupService;
+    #triggerSubscription;
+    #shouldRestoreFocus;
+    #suppressNextTrustedContextMenu;
+    constructor() {
+        this.#close$ = new Subject();
+        this.#destroyRef = inject(DestroyRef);
+        this.#menuItemClick$ = new Subject();
+        this.#navigate$ = new Subject();
+        this.#popupMenuListConfig = computed(() => {
+            const data = {
+                isRoot: true,
+                items: this.menuItems(),
+                level: 0,
+                menuId: this.menuId(),
+                menuItemClick$: this.#menuItemClick$,
+                minWidth: computed(() => toCssValue(this.minWidth()) ?? null),
+                navigate$: this.#navigate$,
+                parentClose$: this.#close$,
+                popupGroupTemplate: computed(() => this.groupTemplateConfig()?.template ?? null),
+                popupIconTemplate: computed(() => this.iconTemplateConfig()?.template ?? null),
+                popupShortcutTemplate: computed(() => this.shortcutTemplateConfig()?.template ?? null),
+                popupTextTemplate: computed(() => this.textTemplateConfig()?.template ?? null),
+                rounded: computed(() => this.rounded()),
+                size: computed(() => this.size()),
+                width: computed(() => toCssValue(this.width()) ?? null)
+            };
+            return data;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#popupMenuListConfig" }] : /* istanbul ignore next */ []));
+        this.#popupService = inject(PopupService);
+        this.#triggerSubscription = null;
+        this.#shouldRestoreFocus = false;
+        this.#suppressNextTrustedContextMenu = false;
+        this.groupTemplateConfig = contentChild(PopupMenuGroupTemplateToken, { ...(ngDevMode ? { debugName: "groupTemplateConfig" } : /* istanbul ignore next */ {}), descendants: false });
+        this.iconTemplateConfig = contentChild(PopupMenuIconTemplateToken, { ...(ngDevMode ? { debugName: "iconTemplateConfig" } : /* istanbul ignore next */ {}), descendants: false });
+        this.nestedComponents = contentChildren(PopupMenuToken, { ...(ngDevMode ? { debugName: "nestedComponents" } : /* istanbul ignore next */ {}), descendants: false });
+        this.shortcutTemplateConfig = contentChild(PopupMenuShortcutTemplateToken, { ...(ngDevMode ? { debugName: "shortcutTemplateConfig" } : /* istanbul ignore next */ {}), descendants: false });
+        this.textTemplateConfig = contentChild(PopupMenuTextTemplateToken, { ...(ngDevMode ? { debugName: "textTemplateConfig" } : /* istanbul ignore next */ {}), descendants: false });
+        this.menuItems = computed(() => {
+            const inputItems = this.items();
+            if (any(inputItems)) {
+                const items = select(inputItems, i => Object.hasOwn(i, "uid") ? i : preparePopupMenuItems([i])[0]);
+                return groupBy(items, i => i.group).toImmutableSet();
+            }
+            const items = this.nestedComponents().flatMap(i => i.getPopupMenuItem());
+            return groupBy(items, i => i.group).toImmutableSet();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "menuItems" }] : /* istanbul ignore next */ []));
+        this.popupRef = null;
+        /**
+         * @description The anchor element that the context menu will be anchored to.
+         * Only applicable when `precise` is set to `false`.
+         */
+        this.anchor = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "anchor" }] : /* istanbul ignore next */ []));
+        /**
+         * @description The anchor connection point of the popup menu.
+         * Only applicable when `precise` is set to `false`.
+         */
+        this.anchorConnectionPoint = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "anchorConnectionPoint" }] : /* istanbul ignore next */ []));
+        /**
+         * @description The event that is emitted when the popup menu is closed.
+         */
+        this.close = output();
+        /**
+         * @description The items to render in the popup menu.
+         * If provided, it will override the menu items defined by projected menu item components.
+         */
+        this.items = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+        /**
+         * @description The event that is emitted when a menu item is clicked.
+         */
+        this.menuClick = output();
+        /**
+         * @description The id of the popup menu's root element.
+         */
+        this.menuId = input("", { ...(ngDevMode ? { debugName: "menuId" } : /* istanbul ignore next */ {}), alias: "id" });
+        /**
+         * @description Sets the minimum width of the popup menu.
+         * This will be applied to the root menu and all submenus.
+         */
+        this.minWidth = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "minWidth" }] : /* istanbul ignore next */ []));
+        /**
+         * @description The event that is emitted when the popup menu is navigated.
+         * This is used to handle keyboard navigation within the popup menu.
+         */
+        this.navigate = output();
+        /**
+         * @description The offset of the popup menu from the anchor element.
+         */
+        this.offset = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "offset" }] : /* istanbul ignore next */ []));
+        /**
+         * @description The event that is emitted when the popup menu is opened.
+         */
+        this.open = output();
+        /**
+         * @description The connection point of the popup element to which the anchor will be connected.
+         * Only applicable when `precise` is set to `false`.
+         */
+        this.popupConnectionPoint = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "popupConnectionPoint" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Whether the context menu should be opened with precise positioning.
+         * If true, the context menu will be positioned at the mouse cursor position.
+         * If false, it will be positioned at the target element. If an anchor is provided, it will be anchored to that element.
+         */
+        this.precise = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "precise" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Sets the border radius of the popup menu.
+         * This will be applied to the root menu and all submenus.
+         */
+        this.rounded = input("medium", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rounded" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Sets the size of the popup menu.
+         * This will be applied to the root menu and all submenus.
+         */
+        this.size = input("medium", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        /**
+         * @description The target element that will be used to trigger the popup menu.
+         */
+        this.target = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "target" }] : /* istanbul ignore next */ []));
+        /**
+         * @description The event that triggers the popup menu.
+         */
+        this.trigger = input("click", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "trigger" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Sets the width of the popup menu.
+         * This will be applied to the root menu and all submenus.
+         */
+        this.width = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "width" }] : /* istanbul ignore next */ []));
+        afterNextRender({
+            read: () => this.setSubscriptions()
+        });
+        afterRenderEffect({
+            read: () => {
+                rxTimeout(this.#destroyRef, () => {
+                    this.anchor();
+                    this.target();
+                    this.trigger();
+                    if (this.#triggerSubscription) {
+                        this.#triggerSubscription.unsubscribe();
+                        this.#triggerSubscription = null;
+                    }
+                    this.setTriggerSubscription();
+                });
+            }
+        });
+    }
+    clearFocusRestoration() {
+        this.#shouldRestoreFocus = false;
+    }
+    closeMenu() {
+        if (this.popupRef) {
+            this.popupRef.close();
+            this.popupRef = null;
+        }
+    }
+    openMenu(viaContextMenuKey) {
+        const target = this.target();
+        const targetElement = target instanceof ElementRef ? target.nativeElement : target;
+        if (!targetElement) {
+            return;
+        }
+        const center = targetElement.getBoundingClientRect();
+        // Create a fake event to pass the center of the target element as the mouse position.
+        // This is useful when precise is true, but we want to open the menu via keyboard
+        // or some other non-mouse event.
+        if (viaContextMenuKey) {
+            const contextMenuEvent = new MouseEvent("contextmenu", {
+                bubbles: true,
+                cancelable: true,
+                clientX: center.left + center.width / 2,
+                clientY: center.top + center.height / 2,
+                button: -1
+            });
+            const ownerDocument = targetElement.ownerDocument;
+            const suppressNativeContextMenu = (nativeEvent) => {
+                if (nativeEvent.isTrusted) {
+                    nativeEvent.preventDefault();
+                    ownerDocument.removeEventListener("contextmenu", suppressNativeContextMenu, { capture: true });
+                }
+            };
+            this.#suppressNextTrustedContextMenu = true;
+            ownerDocument.addEventListener("contextmenu", suppressNativeContextMenu, { capture: true });
+            targetElement.dispatchEvent(contextMenuEvent);
+            rxTimeout(this.#destroyRef, () => {
+                this.#suppressNextTrustedContextMenu = false;
+                ownerDocument.removeEventListener("contextmenu", suppressNativeContextMenu, { capture: true });
+            }, 500);
+            return;
+        }
+        const event = new MouseEvent(this.trigger(), { bubbles: true, cancelable: true });
+        targetElement.dispatchEvent(event);
+    }
+    openMenuViaKeyboard(viaContextMenuKey = false) {
+        this.#shouldRestoreFocus = true;
+        this.openMenu(viaContextMenuKey);
+    }
+    setRestoreFocusForKeyboard() {
+        this.#shouldRestoreFocus = true;
+    }
+    createMenu(event) {
+        const anchor = this.getPopupAnchor(event);
+        const anchorConnectionPoint = this.precise() ? undefined : this.anchorConnectionPoint();
+        const closeOnScroll = true;
+        const content = PopupMenuListComponent;
+        const data = this.#popupMenuListConfig();
+        const minWidth = toCssValue(this.minWidth());
+        const offset = this.offset();
+        const popupConnectionPoint = this.precise() ? undefined : this.popupConnectionPoint();
+        const width = toCssValue(this.width());
+        const popupRef = this.#popupService.create({
+            anchor,
+            anchorConnectionPoint,
+            closeOnScroll,
+            content,
+            data,
+            minWidth,
+            offset,
+            popupConnectionPoint,
+            restoreFocus: false,
+            width
+        });
+        popupRef.closeStart.pipe(take(1)).subscribe(() => this.#close$.next());
+        return popupRef;
+    }
+    getPopupAnchor(event) {
+        const anchorElement = this.anchor();
+        const targetElement = this.target();
+        const targetInput = anchorElement ?? targetElement;
+        const precise = this.precise();
+        const actualTargetElement = targetInput instanceof ElementRef ? targetInput.nativeElement : targetInput;
+        let anchor;
+        if (precise) {
+            if (event.button < 0) {
+                const rect = actualTargetElement.getBoundingClientRect();
+                anchor = { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 };
+            }
+            else {
+                anchor = { x: event.x, y: event.y };
+            }
+        }
+        else {
+            anchor = actualTargetElement;
+        }
+        return anchor;
+    }
+    setMenuItemClickSubscription() {
+        this.#menuItemClick$
+            .pipe(takeUntilDestroyed(this.#destroyRef), tap(event => {
+            this.menuClick.emit(event);
+            if (event.isDefaultPrevented()) {
+                return;
+            }
+            this.popupRef?.close();
+        }))
+            .subscribe();
+    }
+    setNavigationSubscription() {
+        this.#navigate$
+            .pipe(takeUntilDestroyed(this.#destroyRef), tap(e => this.navigate.emit(e)))
+            .subscribe();
+    }
+    setSubscriptions() {
+        this.setMenuItemClickSubscription();
+        this.setNavigationSubscription();
+        this.setTriggerSubscription();
+    }
+    setTriggerSubscription() {
+        const element = this.target();
+        const trigger = this.trigger();
+        const targetElement = element instanceof ElementRef ? element.nativeElement : element;
+        this.#triggerSubscription = fromEvent(targetElement, trigger)
+            .pipe(takeUntilDestroyed(this.#destroyRef), tap(e => e.preventDefault()))
+            .subscribe(e => {
+            if (e.isTrusted && this.#suppressNextTrustedContextMenu) {
+                this.#suppressNextTrustedContextMenu = false;
+                return;
+            }
+            if (this.popupRef) {
+                this.popupRef.close();
+                this.popupRef = null;
+                return;
+            }
+            this.popupRef = this.createMenu(e);
+            this.open.emit();
+            this.popupRef.beforeClose.pipe(takeUntil(this.popupRef.closed)).subscribe(e => {
+                const popupCloseEvent = e.result;
+                const closeEvent = new PopupMenuCloseEvent(popupCloseEvent);
+                this.close.emit(closeEvent);
+                if (closeEvent.isDefaultPrevented()) {
+                    e.preventDefault();
+                    return;
+                }
+            });
+            this.popupRef.closed.pipe(take(1)).subscribe(() => {
+                if (this.#shouldRestoreFocus) {
+                    const target = this.target();
+                    const targetElement = target instanceof ElementRef ? target.nativeElement : target;
+                    if (targetElement && "focus" in targetElement) {
+                        targetElement.focus();
+                    }
+                }
+                this.popupRef = null;
+                this.#close$.next();
+                this.#shouldRestoreFocus = false;
+            });
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PopupMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.6", type: PopupMenuComponent, isStandalone: true, selector: "mona-popup-menu", inputs: { anchor: { classPropertyName: "anchor", publicName: "anchor", isSignal: true, isRequired: false, transformFunction: null }, anchorConnectionPoint: { classPropertyName: "anchorConnectionPoint", publicName: "anchorConnectionPoint", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, menuId: { classPropertyName: "menuId", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null }, popupConnectionPoint: { classPropertyName: "popupConnectionPoint", publicName: "popupConnectionPoint", isSignal: true, isRequired: false, transformFunction: null }, precise: { classPropertyName: "precise", publicName: "precise", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: true, transformFunction: null }, trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close", menuClick: "menuClick", navigate: "navigate", open: "open" }, queries: [{ propertyName: "groupTemplateConfig", first: true, predicate: PopupMenuGroupTemplateToken, isSignal: true }, { propertyName: "iconTemplateConfig", first: true, predicate: PopupMenuIconTemplateToken, isSignal: true }, { propertyName: "nestedComponents", predicate: PopupMenuToken, isSignal: true }, { propertyName: "shortcutTemplateConfig", first: true, predicate: PopupMenuShortcutTemplateToken, isSignal: true }, { propertyName: "textTemplateConfig", first: true, predicate: PopupMenuTextTemplateToken, isSignal: true }], ngImport: i0, template: "", isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PopupMenuComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "mona-popup-menu",
+                    template: "",
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }], ctorParameters: () => [], propDecorators: { groupTemplateConfig: [{ type: i0.ContentChild, args: [i0.forwardRef(() => PopupMenuGroupTemplateToken), { ...{
+                            descendants: false
+                        }, isSignal: true }] }], iconTemplateConfig: [{ type: i0.ContentChild, args: [i0.forwardRef(() => PopupMenuIconTemplateToken), { ...{
+                            descendants: false
+                        }, isSignal: true }] }], nestedComponents: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => PopupMenuToken), { ...{ descendants: false }, isSignal: true }] }], shortcutTemplateConfig: [{ type: i0.ContentChild, args: [i0.forwardRef(() => PopupMenuShortcutTemplateToken), { ...{
+                            descendants: false
+                        }, isSignal: true }] }], textTemplateConfig: [{ type: i0.ContentChild, args: [i0.forwardRef(() => PopupMenuTextTemplateToken), { ...{
+                            descendants: false
+                        }, isSignal: true }] }], anchor: [{ type: i0.Input, args: [{ isSignal: true, alias: "anchor", required: false }] }], anchorConnectionPoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "anchorConnectionPoint", required: false }] }], close: [{ type: i0.Output, args: ["close"] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], menuClick: [{ type: i0.Output, args: ["menuClick"] }], menuId: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], minWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidth", required: false }] }], navigate: [{ type: i0.Output, args: ["navigate"] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "offset", required: false }] }], open: [{ type: i0.Output, args: ["open"] }], popupConnectionPoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupConnectionPoint", required: false }] }], precise: [{ type: i0.Input, args: [{ isSignal: true, alias: "precise", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: true }] }], trigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "trigger", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }] } });
+
+class PopupMenuCheckboxItemComponent {
+    constructor() {
+        this.#checked = linkedSignal(() => this.checked(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#checked" }] : /* istanbul ignore next */ []));
+        this.#click$ = new Subject();
+        this.#destroyRef = inject(DestroyRef);
+        this.shortcutTemplateConfig = contentChild(PopupMenuShortcutTemplateToken, { ...(ngDevMode ? { debugName: "shortcutTemplateConfig" } : /* istanbul ignore next */ {}), descendants: false });
+        this.textTemplateConfig = contentChild(PopupMenuTextTemplateToken, { ...(ngDevMode ? { debugName: "textTemplateConfig" } : /* istanbul ignore next */ {}), descendants: false });
+        /**
+         * @description Sets the checked state of the menu item.
+         */
+        this.checked = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Emits when the checked state of the menu item changes.
+         */
+        this.checkedChange = output();
+        /**
+         * @description Sets the disabled state of the menu item.
+         */
+        this.disabled = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        /**
+         * @description The text of the menu item.
+         */
+        this.label = input("", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+        /**
+         * @description The click event of the menu item.
+         * Emits when the menu item is selected by keyboard or mouse.
+         */
+        this.menuClick = output();
+        this.origin = PopupMenuOrigin.Popup;
+        this.type = PopupMenuItemType.CheckboxMenuItem;
+    }
+    #checked;
+    #click$;
+    #destroyRef;
+    getPopupMenuItem() {
+        return [
+            {
+                checkable: true,
+                checked: computed(() => this.#checked()),
+                click$: this.#click$,
+                disabled: this.disabled(),
+                group: Symbol(),
+                groupTemplate: null,
+                iconTemplate: null,
+                items: [],
+                label: this.label(),
+                shortcutTemplate: computed(() => this.shortcutTemplateConfig()?.template ?? null),
+                textTemplate: computed(() => this.textTemplateConfig()?.template ?? null),
+                uid: v4()
+            }
+        ];
+    }
+    ngOnInit() {
+        this.setSubscriptions();
+    }
+    setSubscriptions() {
+        this.#click$
+            .pipe(takeUntilDestroyed(this.#destroyRef), tap(e => {
+            this.menuClick.emit(e);
+            if (!e.isDefaultPrevented()) {
+                this.checkedChange.emit(!this.#checked());
+            }
+        }))
+            .subscribe();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PopupMenuCheckboxItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.6", type: PopupMenuCheckboxItemComponent, isStandalone: true, selector: "mona-popup-menu-checkbox-item", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checkedChange: "checkedChange", menuClick: "menuClick" }, providers: [
+            {
+                provide: PopupMenuToken,
+                useExisting: forwardRef(() => PopupMenuCheckboxItemComponent)
+            }
+        ], queries: [{ propertyName: "shortcutTemplateConfig", first: true, predicate: PopupMenuShortcutTemplateToken, isSignal: true }, { propertyName: "textTemplateConfig", first: true, predicate: PopupMenuTextTemplateToken, isSignal: true }], ngImport: i0, template: "", isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PopupMenuCheckboxItemComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "mona-popup-menu-checkbox-item",
+                    template: "",
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [
+                        {
+                            provide: PopupMenuToken,
+                            useExisting: forwardRef(() => PopupMenuCheckboxItemComponent)
+                        }
+                    ]
+                }]
+        }], propDecorators: { shortcutTemplateConfig: [{ type: i0.ContentChild, args: [i0.forwardRef(() => PopupMenuShortcutTemplateToken), { ...{
+                            descendants: false
+                        }, isSignal: true }] }], textTemplateConfig: [{ type: i0.ContentChild, args: [i0.forwardRef(() => PopupMenuTextTemplateToken), { ...{
+                            descendants: false
+                        }, isSignal: true }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }], checkedChange: [{ type: i0.Output, args: ["checkedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], menuClick: [{ type: i0.Output, args: ["menuClick"] }] } });
+
+class PopupMenuItemComponent {
+    constructor() {
+        this.#click$ = new Subject();
+        this.#destroyRef = inject(DestroyRef);
+        this.iconTemplateConfig = contentChild(PopupMenuIconTemplateToken, { ...(ngDevMode ? { debugName: "iconTemplateConfig" } : /* istanbul ignore next */ {}), descendants: false });
+        this.items = contentChildren(PopupMenuToken, { ...(ngDevMode ? { debugName: "items" } : /* istanbul ignore next */ {}), descendants: false });
+        this.shortcutTemplateConfig = contentChild(PopupMenuShortcutTemplateToken, { ...(ngDevMode ? { debugName: "shortcutTemplateConfig" } : /* istanbul ignore next */ {}), descendants: false });
+        this.textTemplateConfig = contentChild(PopupMenuTextTemplateToken, { ...(ngDevMode ? { debugName: "textTemplateConfig" } : /* istanbul ignore next */ {}), descendants: false });
+        /**
+         * @description Sets the disabled state of the menu item.
+         */
+        this.disabled = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        /**
+         * @description The text of the menu item.
+         */
+        this.label = input("", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+        /**
+         * @description The click event of the menu item.
+         * Emits when the menu item is selected by keyboard or mouse.
+         */
+        this.menuClick = output();
+        this.origin = PopupMenuOrigin.Popup;
+        this.type = PopupMenuItemType.MenuItem;
+    }
+    #click$;
+    #destroyRef;
+    getPopupMenuItem() {
+        return [
+            {
+                click$: this.#click$,
+                disabled: this.disabled(),
+                group: Symbol(),
+                groupTemplate: null,
+                iconTemplate: computed(() => this.iconTemplateConfig()?.template ?? null),
+                items: selectMany(this.items().map(item => item.getPopupMenuItem()), i => i).toArray(),
+                label: this.label(),
+                shortcutTemplate: computed(() => this.shortcutTemplateConfig()?.template ?? null),
+                textTemplate: computed(() => this.textTemplateConfig()?.template ?? null),
+                uid: v4()
+            }
+        ];
+    }
+    ngOnInit() {
+        this.setSubscriptions();
+    }
+    setSubscriptions() {
+        this.#click$
+            .pipe(takeUntilDestroyed(this.#destroyRef), tap(e => this.menuClick.emit(e)))
+            .subscribe();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PopupMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.6", type: PopupMenuItemComponent, isStandalone: true, selector: "mona-popup-menu-item", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { menuClick: "menuClick" }, providers: [
+            {
+                provide: PopupMenuToken,
+                useExisting: forwardRef(() => PopupMenuItemComponent)
+            }
+        ], queries: [{ propertyName: "iconTemplateConfig", first: true, predicate: PopupMenuIconTemplateToken, isSignal: true }, { propertyName: "items", predicate: PopupMenuToken, isSignal: true }, { propertyName: "shortcutTemplateConfig", first: true, predicate: PopupMenuShortcutTemplateToken, isSignal: true }, { propertyName: "textTemplateConfig", first: true, predicate: PopupMenuTextTemplateToken, isSignal: true }], ngImport: i0, template: "", isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PopupMenuItemComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "mona-popup-menu-item",
+                    template: "",
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [
+                        {
+                            provide: PopupMenuToken,
+                            useExisting: forwardRef(() => PopupMenuItemComponent)
+                        }
+                    ]
+                }]
+        }], propDecorators: { iconTemplateConfig: [{ type: i0.ContentChild, args: [i0.forwardRef(() => PopupMenuIconTemplateToken), { ...{
+                            descendants: false
+                        }, isSignal: true }] }], items: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => PopupMenuToken), { ...{ descendants: false }, isSignal: true }] }], shortcutTemplateConfig: [{ type: i0.ContentChild, args: [i0.forwardRef(() => PopupMenuShortcutTemplateToken), { ...{
+                            descendants: false
+                        }, isSignal: true }] }], textTemplateConfig: [{ type: i0.ContentChild, args: [i0.forwardRef(() => PopupMenuTextTemplateToken), { ...{
+                            descendants: false
+                        }, isSignal: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], menuClick: [{ type: i0.Output, args: ["menuClick"] }] } });
+
+class PopupMenuGroupComponent {
+    constructor() {
+        this.groupTemplateConfig = contentChild(PopupMenuGroupTemplateToken, { ...(ngDevMode ? { debugName: "groupTemplateConfig" } : /* istanbul ignore next */ {}), descendants: false });
+        this.items = contentChildren(PopupMenuToken, { ...(ngDevMode ? { debugName: "items" } : /* istanbul ignore next */ {}), descendants: false });
+        this.origin = PopupMenuOrigin.Popup;
+        /**
+         * @description Sets the title of the menu group.
+         */
+        this.title = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+        this.type = PopupMenuItemType.MenuGroup;
+    }
+    getPopupMenuItem() {
+        const menuItems = this.items().map(i => i.getPopupMenuItem().map(item => ({
+            ...item,
+            group: this.title(),
+            groupTemplate: computed(() => this.groupTemplateConfig()?.template ?? null)
+        })));
+        return selectMany(menuItems, i => i).toArray();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PopupMenuGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.6", type: PopupMenuGroupComponent, isStandalone: true, selector: "mona-popup-menu-group", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null } }, providers: [
+            {
+                provide: PopupMenuToken,
+                useExisting: forwardRef(() => PopupMenuGroupComponent)
+            }
+        ], queries: [{ propertyName: "groupTemplateConfig", first: true, predicate: PopupMenuGroupTemplateToken, isSignal: true }, { propertyName: "items", predicate: PopupMenuToken, isSignal: true }], ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PopupMenuGroupComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "mona-popup-menu-group",
+                    template: ``,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [
+                        {
+                            provide: PopupMenuToken,
+                            useExisting: forwardRef(() => PopupMenuGroupComponent)
+                        }
+                    ]
+                }]
+        }], propDecorators: { groupTemplateConfig: [{ type: i0.ContentChild, args: [i0.forwardRef(() => PopupMenuGroupTemplateToken), { ...{
+                            descendants: false
+                        }, isSignal: true }] }], items: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => PopupMenuToken), { ...{ descendants: false }, isSignal: true }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }] } });
+
+class PopupMenuRadioGroupComponent {
+    constructor() {
+        this.#click$ = new Subject();
+        this.#destroyRef = inject(DestroyRef);
+        this.groupTemplateConfig = contentChild(PopupMenuGroupTemplateToken, { ...(ngDevMode ? { debugName: "groupTemplateConfig" } : /* istanbul ignore next */ {}), descendants: false });
+        this.items = contentChildren(PopupMenuRadioItemToken, { ...(ngDevMode ? { debugName: "items" } : /* istanbul ignore next */ {}), descendants: false });
+        this.origin = PopupMenuOrigin.Popup;
+        /**
+         * @description The title of the radio group.
+         */
+        this.title = input("", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+        this.type = PopupMenuItemType.RadioGroup;
+        /**
+         * @description The value of the selected radio item.
+         */
+        this.value = model("", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    }
+    #click$;
+    #destroyRef;
+    getPopupMenuItem() {
+        const menuItems = this.items().map(i => i.getPopupMenuItem().map(item => ({
+            ...item,
+            click$: this.#click$,
+            group: this.title() || Symbol(),
+            groupTemplate: computed(() => this.groupTemplateConfig()?.template ?? null),
+            radio: true,
+            selected: computed(() => item.value?.() === this.value())
+        })));
+        return selectMany(menuItems, i => i).toArray();
+    }
+    ngOnInit() {
+        this.setSubscription();
+    }
+    setSubscription() {
+        this.#click$
+            .pipe(takeUntilDestroyed(this.#destroyRef), filter(e => e.item.radio == true), tap(event => {
+            if (event.isDefaultPrevented()) {
+                return;
+            }
+            const value = event.item.value?.();
+            if (value != null) {
+                this.value.set(value);
+            }
+        }))
+            .subscribe();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PopupMenuRadioGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.6", type: PopupMenuRadioGroupComponent, isStandalone: true, selector: "mona-popup-menu-radio-group", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, providers: [
+            {
+                provide: PopupMenuToken,
+                useExisting: forwardRef(() => PopupMenuRadioGroupComponent)
+            }
+        ], queries: [{ propertyName: "groupTemplateConfig", first: true, predicate: PopupMenuGroupTemplateToken, isSignal: true }, { propertyName: "items", predicate: PopupMenuRadioItemToken, isSignal: true }], ngImport: i0, template: "", isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PopupMenuRadioGroupComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "mona-popup-menu-radio-group",
+                    template: "",
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [
+                        {
+                            provide: PopupMenuToken,
+                            useExisting: forwardRef(() => PopupMenuRadioGroupComponent)
+                        }
+                    ]
+                }]
+        }], propDecorators: { groupTemplateConfig: [{ type: i0.ContentChild, args: [i0.forwardRef(() => PopupMenuGroupTemplateToken), { ...{
+                            descendants: false
+                        }, isSignal: true }] }], items: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => PopupMenuRadioItemToken), { ...{ descendants: false }, isSignal: true }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
+
+class PopupMenuRadioItemComponent {
+    constructor() {
+        this.#click$ = new Subject();
+        this.#destroyRef = inject(DestroyRef);
+        this.shortcutTemplateConfig = contentChild(PopupMenuShortcutTemplateToken, { ...(ngDevMode ? { debugName: "shortcutTemplateConfig" } : /* istanbul ignore next */ {}), descendants: false });
+        this.textTemplateConfig = contentChild(PopupMenuTextTemplateToken, { ...(ngDevMode ? { debugName: "textTemplateConfig" } : /* istanbul ignore next */ {}), descendants: false });
+        /**
+         * @description Sets the disabled state of the menu item.
+         */
+        this.disabled = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        /**
+         * @description The text of the menu item.
+         */
+        this.label = input("", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+        /**
+         * @description The click event of the menu item.
+         * Emits when the menu item is selected by keyboard or mouse.
+         */
+        this.menuClick = output();
+        this.origin = PopupMenuOrigin.Popup;
+        this.type = PopupMenuItemType.RadioItem;
+        /**
+         * @description The value of the radio item.
+         */
+        this.value = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    }
+    #click$;
+    #destroyRef;
+    getPopupMenuItem() {
+        return [
+            {
+                disabled: this.disabled(),
+                group: Symbol(),
+                groupTemplate: null,
+                iconTemplate: null,
+                items: [],
+                label: this.label(),
+                radio: true,
+                shortcutTemplate: computed(() => this.shortcutTemplateConfig()?.template ?? null),
+                textTemplate: computed(() => this.textTemplateConfig()?.template ?? null),
+                uid: v4(),
+                value: computed(() => this.value())
+            }
+        ];
+    }
+    ngOnInit() {
+        this.setSubscription();
+    }
+    setSubscription() {
+        this.#click$
+            .pipe(takeUntilDestroyed(this.#destroyRef), tap(e => this.menuClick.emit(e)))
+            .subscribe();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PopupMenuRadioItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.6", type: PopupMenuRadioItemComponent, isStandalone: true, selector: "mona-popup-menu-radio-item", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { menuClick: "menuClick" }, providers: [
+            {
+                provide: PopupMenuToken,
+                useExisting: forwardRef(() => PopupMenuRadioItemComponent)
+            },
+            {
+                provide: PopupMenuRadioItemToken,
+                useExisting: forwardRef(() => PopupMenuRadioItemComponent)
+            }
+        ], queries: [{ propertyName: "shortcutTemplateConfig", first: true, predicate: PopupMenuShortcutTemplateToken, isSignal: true }, { propertyName: "textTemplateConfig", first: true, predicate: PopupMenuTextTemplateToken, isSignal: true }], ngImport: i0, template: "", isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PopupMenuRadioItemComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "mona-popup-menu-radio-item",
+                    template: "",
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [
+                        {
+                            provide: PopupMenuToken,
+                            useExisting: forwardRef(() => PopupMenuRadioItemComponent)
+                        },
+                        {
+                            provide: PopupMenuRadioItemToken,
+                            useExisting: forwardRef(() => PopupMenuRadioItemComponent)
+                        }
+                    ]
+                }]
+        }], propDecorators: { shortcutTemplateConfig: [{ type: i0.ContentChild, args: [i0.forwardRef(() => PopupMenuShortcutTemplateToken), { ...{
+                            descendants: false
+                        }, isSignal: true }] }], textTemplateConfig: [{ type: i0.ContentChild, args: [i0.forwardRef(() => PopupMenuTextTemplateToken), { ...{
+                            descendants: false
+                        }, isSignal: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], menuClick: [{ type: i0.Output, args: ["menuClick"] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }] } });
+
+class PopupMenuSeparatorComponent {
+    constructor() {
+        this.origin = PopupMenuOrigin.Popup;
+        this.type = PopupMenuItemType.Separator;
+    }
+    getPopupMenuItem() {
+        return [
+            {
+                disabled: true,
+                group: Symbol(),
+                groupTemplate: null,
+                iconTemplate: null,
+                items: [],
+                label: "",
+                separator: true,
+                shortcutTemplate: null,
+                textTemplate: null,
+                uid: ""
+            }
+        ];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PopupMenuSeparatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: PopupMenuSeparatorComponent, isStandalone: true, selector: "mona-popup-menu-separator", providers: [
+            {
+                provide: PopupMenuToken,
+                useExisting: forwardRef(() => PopupMenuSeparatorComponent)
+            }
+        ], ngImport: i0, template: "", isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PopupMenuSeparatorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "mona-popup-menu-separator",
+                    template: "",
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [
+                        {
+                            provide: PopupMenuToken,
+                            useExisting: forwardRef(() => PopupMenuSeparatorComponent)
+                        }
+                    ]
+                }]
+        }] });
+
+class PopupMenuGroupTemplateDirective {
+    constructor() {
+        this.origin = PopupMenuTemplateOrigin.Popup;
+        this.template = inject(TemplateRef);
+        this.type = PopupMenuTemplateType.Group;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PopupMenuGroupTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: PopupMenuGroupTemplateDirective, isStandalone: true, selector: "ng-template[monaPopupMenuGroupTemplate]", providers: [
+            {
+                provide: PopupMenuGroupTemplateToken,
+                useExisting: forwardRef(() => PopupMenuGroupTemplateDirective)
+            }
+        ], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PopupMenuGroupTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "ng-template[monaPopupMenuGroupTemplate]",
+                    providers: [
+                        {
+                            provide: PopupMenuGroupTemplateToken,
+                            useExisting: forwardRef(() => PopupMenuGroupTemplateDirective)
+                        }
+                    ]
+                }]
+        }] });
+
+class PopupMenuIconTemplateDirective {
+    constructor() {
+        this.origin = PopupMenuTemplateOrigin.Popup;
+        this.template = inject(TemplateRef);
+        this.type = PopupMenuTemplateType.Icon;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PopupMenuIconTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: PopupMenuIconTemplateDirective, isStandalone: true, selector: "ng-template[monaPopupMenuIconTemplate]", providers: [
+            {
+                provide: PopupMenuIconTemplateToken,
+                useExisting: forwardRef(() => PopupMenuIconTemplateDirective)
+            }
+        ], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PopupMenuIconTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "ng-template[monaPopupMenuIconTemplate]",
+                    providers: [
+                        {
+                            provide: PopupMenuIconTemplateToken,
+                            useExisting: forwardRef(() => PopupMenuIconTemplateDirective)
+                        }
+                    ]
+                }]
+        }] });
+
+class PopupMenuShortcutTemplateDirective {
+    constructor() {
+        this.origin = PopupMenuTemplateOrigin.Popup;
+        this.template = inject(TemplateRef);
+        this.type = PopupMenuTemplateType.Shortcut;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PopupMenuShortcutTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: PopupMenuShortcutTemplateDirective, isStandalone: true, selector: "ng-template[monaPopupMenuShortcutTemplate]", providers: [
+            {
+                provide: PopupMenuShortcutTemplateToken,
+                useExisting: forwardRef(() => PopupMenuShortcutTemplateDirective)
+            }
+        ], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PopupMenuShortcutTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "ng-template[monaPopupMenuShortcutTemplate]",
+                    providers: [
+                        {
+                            provide: PopupMenuShortcutTemplateToken,
+                            useExisting: forwardRef(() => PopupMenuShortcutTemplateDirective)
+                        }
+                    ]
+                }]
+        }] });
+
+class PopupMenuTextTemplateDirective {
+    constructor() {
+        this.origin = PopupMenuTemplateOrigin.Popup;
+        this.template = inject(TemplateRef);
+        this.type = PopupMenuTemplateType.Text;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PopupMenuTextTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: PopupMenuTextTemplateDirective, isStandalone: true, selector: "ng-template[monaPopupMenuTextTemplate]", providers: [
+            {
+                provide: PopupMenuTextTemplateToken,
+                useExisting: forwardRef(() => PopupMenuTextTemplateDirective)
+            }
+        ], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PopupMenuTextTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "ng-template[monaPopupMenuTextTemplate]",
+                    providers: [
+                        {
+                            provide: PopupMenuTextTemplateToken,
+                            useExisting: forwardRef(() => PopupMenuTextTemplateDirective)
+                        }
+                    ]
+                }]
+        }] });
+
+/*
+ * Public API Surface of @nanahoshi/mona-ui/popup-menu
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { PopupMenuCheckboxItemComponent, PopupMenuCloseEvent, PopupMenuComponent, PopupMenuGroupComponent, PopupMenuGroupTemplateDirective, PopupMenuGroupTemplateToken, PopupMenuIconTemplateDirective, PopupMenuIconTemplateToken, PopupMenuItemClickEvent, PopupMenuItemComponent, PopupMenuItemType, PopupMenuOrigin, PopupMenuRadioGroupComponent, PopupMenuRadioItemComponent, PopupMenuRadioItemToken, PopupMenuSeparatorComponent, PopupMenuShortcutTemplateDirective, PopupMenuShortcutTemplateToken, PopupMenuTemplateOrigin, PopupMenuTemplateType, PopupMenuTextTemplateDirective, PopupMenuTextTemplateToken, PopupMenuToken, ensurePopupComponentTypes, ensurePopupTemplateTypes, preparePopupMenuItems };
+//# sourceMappingURL=nanahoshi-mona-ui-popup-menu.mjs.map