@nanahoshi/mona-ui 0.1.0

package/fesm2022/nanahoshi-mona-ui-dropdown-button.mjs

@@ -0,0 +1,523 @@
+import { NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { forwardRef, Directive, inject, DestroyRef, contentChildren, viewChild, computed, signal, contentChild, TemplateRef, input, output, afterNextRender, Component, effect } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { fromEvent } from 'rxjs';
+import { PopupMenuGroupTemplateDirective, PopupMenuTemplateOrigin, PopupMenuGroupTemplateToken, PopupMenuIconTemplateDirective, PopupMenuIconTemplateToken, PopupMenuShortcutTemplateDirective, PopupMenuShortcutTemplateToken, PopupMenuTextTemplateDirective, PopupMenuTextTemplateToken, PopupMenuToken, PopupMenuComponent, PopupMenuItemType, PopupMenuTemplateType, ensurePopupComponentTypes, PopupMenuOrigin, ensurePopupTemplateTypes, PopupMenuCheckboxItemComponent, PopupMenuGroupComponent, PopupMenuItemComponent, PopupMenuRadioGroupComponent, PopupMenuRadioItemComponent, PopupMenuRadioItemToken, PopupMenuSeparatorComponent } from '@nanahoshi/mona-ui/popup-menu';
+import { createElementControlId } from '@nanahoshi/mona-ui/internal';
+import { ButtonDirective } from '@nanahoshi/mona-ui/button';
+
+class DropdownButtonMenuGroupTemplateDirective extends PopupMenuGroupTemplateDirective {
+    constructor() {
+        super(...arguments);
+        this.origin = PopupMenuTemplateOrigin.DropdownButton;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DropdownButtonMenuGroupTemplateDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: DropdownButtonMenuGroupTemplateDirective, isStandalone: true, selector: "ng-template[monaDropdownButtonMenuGroupTemplate]", providers: [
+            {
+                provide: PopupMenuGroupTemplateToken,
+                useExisting: forwardRef(() => DropdownButtonMenuGroupTemplateDirective)
+            }
+        ], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DropdownButtonMenuGroupTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "ng-template[monaDropdownButtonMenuGroupTemplate]",
+                    providers: [
+                        {
+                            provide: PopupMenuGroupTemplateToken,
+                            useExisting: forwardRef(() => DropdownButtonMenuGroupTemplateDirective)
+                        }
+                    ]
+                }]
+        }] });
+
+class DropdownButtonMenuItemIconTemplateDirective extends PopupMenuIconTemplateDirective {
+    constructor() {
+        super(...arguments);
+        this.origin = PopupMenuTemplateOrigin.DropdownButton;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DropdownButtonMenuItemIconTemplateDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: DropdownButtonMenuItemIconTemplateDirective, isStandalone: true, selector: "ng-template[monaDropdownButtonMenuItemIconTemplate]", providers: [
+            {
+                provide: PopupMenuIconTemplateToken,
+                useExisting: forwardRef(() => DropdownButtonMenuItemIconTemplateDirective)
+            }
+        ], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DropdownButtonMenuItemIconTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "ng-template[monaDropdownButtonMenuItemIconTemplate]",
+                    providers: [
+                        {
+                            provide: PopupMenuIconTemplateToken,
+                            useExisting: forwardRef(() => DropdownButtonMenuItemIconTemplateDirective)
+                        }
+                    ]
+                }]
+        }] });
+
+class DropdownButtonMenuItemShortcutTemplateDirective extends PopupMenuShortcutTemplateDirective {
+    constructor() {
+        super(...arguments);
+        this.origin = PopupMenuTemplateOrigin.DropdownButton;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DropdownButtonMenuItemShortcutTemplateDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: DropdownButtonMenuItemShortcutTemplateDirective, isStandalone: true, selector: "ng-template[monaDropdownButtonMenuItemShortcutTemplate]", providers: [
+            {
+                provide: PopupMenuShortcutTemplateToken,
+                useExisting: forwardRef(() => DropdownButtonMenuItemShortcutTemplateDirective)
+            }
+        ], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DropdownButtonMenuItemShortcutTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "ng-template[monaDropdownButtonMenuItemShortcutTemplate]",
+                    providers: [
+                        {
+                            provide: PopupMenuShortcutTemplateToken,
+                            useExisting: forwardRef(() => DropdownButtonMenuItemShortcutTemplateDirective)
+                        }
+                    ]
+                }]
+        }] });
+
+class DropdownButtonMenuItemTextTemplateDirective extends PopupMenuTextTemplateDirective {
+    constructor() {
+        super(...arguments);
+        this.origin = PopupMenuTemplateOrigin.DropdownButton;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DropdownButtonMenuItemTextTemplateDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: DropdownButtonMenuItemTextTemplateDirective, isStandalone: true, selector: "ng-template[monaDropdownButtonMenuItemTextTemplate]", providers: [
+            {
+                provide: PopupMenuTextTemplateToken,
+                useExisting: forwardRef(() => DropdownButtonMenuItemTextTemplateDirective)
+            }
+        ], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DropdownButtonMenuItemTextTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "ng-template[monaDropdownButtonMenuItemTextTemplate]",
+                    providers: [
+                        {
+                            provide: PopupMenuTextTemplateToken,
+                            useExisting: forwardRef(() => DropdownButtonMenuItemTextTemplateDirective)
+                        }
+                    ]
+                }]
+        }] });
+
+class DropdownButtonTextTemplateDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DropdownButtonTextTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: DropdownButtonTextTemplateDirective, isStandalone: true, selector: "ng-template[monaDropdownButtonTextTemplate]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DropdownButtonTextTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "ng-template[monaDropdownButtonTextTemplate]"
+                }]
+        }] });
+
+class DropdownButtonComponent {
+    #destroyRef;
+    constructor() {
+        this.#destroyRef = inject(DestroyRef);
+        this.menuItemComponents = contentChildren(PopupMenuToken, { ...(ngDevMode ? { debugName: "menuItemComponents" } : /* istanbul ignore next */ {}), descendants: false });
+        this.buttonRef = viewChild("dropdownButton", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "buttonRef" }] : /* istanbul ignore next */ []));
+        this.dropdownButtonAriaLabel = computed(() => {
+            const ariaLabel = this.ariaLabel();
+            const text = this.text();
+            return ariaLabel || `${text} dropdown button`.trim();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "dropdownButtonAriaLabel" }] : /* istanbul ignore next */ []));
+        this.isMenuOpen = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isMenuOpen" }] : /* istanbul ignore next */ []));
+        this.menuId = createElementControlId();
+        this.groupTemplate = contentChild(DropdownButtonMenuGroupTemplateDirective, { ...(ngDevMode ? { debugName: "groupTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef,
+            descendants: false });
+        this.menuItemIconTemplate = contentChild(DropdownButtonMenuItemIconTemplateDirective, { ...(ngDevMode ? { debugName: "menuItemIconTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef,
+            descendants: false });
+        this.menuItems = computed(() => {
+            return this.menuItemComponents()
+                .map(item => item.getPopupMenuItem())
+                .flatMap(i => i);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "menuItems" }] : /* istanbul ignore next */ []));
+        this.menuItemShortcutTemplate = contentChild(DropdownButtonMenuItemShortcutTemplateDirective, { ...(ngDevMode ? { debugName: "menuItemShortcutTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef,
+            descendants: false });
+        this.menuItemTextTemplate = contentChild(DropdownButtonMenuItemTextTemplateDirective, { ...(ngDevMode ? { debugName: "menuItemTextTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef,
+            descendants: false });
+        this.popupMenuRef = viewChild("popupMenu", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "popupMenuRef" }] : /* istanbul ignore next */ []));
+        this.textTemplate = contentChild(DropdownButtonTextTemplateDirective, { ...(ngDevMode ? { debugName: "textTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
+        /**
+         * @description Accessible name for the dropdown button.
+         * Falls back to `"{text} dropdown button"` when empty; provide an explicit value when no visible text is present.
+         * @default ""
+         */
+        this.ariaLabel = input("", { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: "aria-label" });
+        /**
+         * @description ID of an external element that provides the accessible name for the dropdown button.
+         * Takes precedence over `ariaLabel` when both are set.
+         * @default ""
+         */
+        this.ariaLabelledby = input("", { ...(ngDevMode ? { debugName: "ariaLabelledby" } : /* istanbul ignore next */ {}), alias: "aria-labelledby" });
+        /**
+         * @description Renders the button as a square for icon-only usage, removing horizontal text padding.
+         * Set `ariaLabel` when no visible text is present to ensure an accessible name.
+         * @default false
+         */
+        this.iconOnly = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "iconOnly" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Renders the button with reduced visual emphasis and removes pointer interaction.
+         * @default false
+         */
+        this.disabled = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Displays a loading indicator and prevents interaction while an operation is in progress.
+         * @default false
+         */
+        this.loading = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Visual style preset applied to the button.
+         * @default "default"
+         */
+        this.look = input("default", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "look" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Emitted when a menu item in the dropdown menu is clicked.
+         */
+        this.menuItemClick = output();
+        /**
+         * @description Border-radius preset applied to the button.
+         * @default "medium"
+         */
+        this.rounded = input("medium", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rounded" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Size preset controlling the button's dimensions.
+         * @default "medium"
+         */
+        this.size = input("medium", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Primary text content displayed inside the dropdown button.
+         * Passed as `$implicit` to a `monaDropdownButtonTextTemplate` when one is provided.
+         * @default ""
+         */
+        this.text = input("", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Additional CSS classes merged onto the host element via `tailwind-merge`.
+         * @default ""
+         */
+        this.userClass = input("", { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: "class" });
+        afterNextRender({
+            read: () => this.#setKeyboardEvents()
+        });
+    }
+    onMenuClose() {
+        this.isMenuOpen.set(false);
+    }
+    onMenuItemClick(event) {
+        this.menuItemClick.emit(event);
+    }
+    onMenuOpen() {
+        this.isMenuOpen.set(true);
+    }
+    #closeMenu() {
+        const popupMenu = this.popupMenuRef();
+        if (popupMenu && this.isMenuOpen()) {
+            popupMenu.closeMenu();
+            this.buttonRef()?.nativeElement?.focus();
+        }
+    }
+    #openMenuViaKeyboard() {
+        const popupMenu = this.popupMenuRef();
+        if (popupMenu && !this.isMenuOpen()) {
+            popupMenu.openMenuViaKeyboard();
+        }
+    }
+    #setKeyboardEvents() {
+        const buttonElement = this.buttonRef()?.nativeElement;
+        if (!buttonElement) {
+            return;
+        }
+        fromEvent(buttonElement, "keydown")
+            .pipe(takeUntilDestroyed(this.#destroyRef))
+            .subscribe(event => {
+            switch (event.key) {
+                case "ArrowDown":
+                case "ArrowUp":
+                case " ":
+                case "Enter":
+                    event.preventDefault();
+                    this.#openMenuViaKeyboard();
+                    break;
+                case "Escape":
+                    if (this.isMenuOpen()) {
+                        this.#closeMenu();
+                    }
+                    break;
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DropdownButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: DropdownButtonComponent, isStandalone: true, selector: "mona-dropdown-button", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", 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 }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { menuItemClick: "menuItemClick" }, host: { properties: { "class": "userClass()" } }, queries: [{ propertyName: "menuItemComponents", predicate: PopupMenuToken, isSignal: true }, { propertyName: "groupTemplate", first: true, predicate: DropdownButtonMenuGroupTemplateDirective, read: TemplateRef, isSignal: true }, { propertyName: "menuItemIconTemplate", first: true, predicate: DropdownButtonMenuItemIconTemplateDirective, read: TemplateRef, isSignal: true }, { propertyName: "menuItemShortcutTemplate", first: true, predicate: DropdownButtonMenuItemShortcutTemplateDirective, read: TemplateRef, isSignal: true }, { propertyName: "menuItemTextTemplate", first: true, predicate: DropdownButtonMenuItemTextTemplateDirective, read: TemplateRef, isSignal: true }, { propertyName: "textTemplate", first: true, predicate: DropdownButtonTextTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "buttonRef", first: true, predicate: ["dropdownButton"], descendants: true, isSignal: true }, { propertyName: "popupMenuRef", first: true, predicate: ["popupMenu"], descendants: true, isSignal: true }], ngImport: i0, template: "<button\n    monaButton\n    [look]=\"look()\"\n    [size]=\"size()\"\n    [iconOnly]=\"iconOnly()\"\n    [loading]=\"loading()\"\n    [rounded]=\"rounded()\"\n    [disabled]=\"disabled()\"\n    [attr.aria-label]=\"ariaLabelledby() ? null : dropdownButtonAriaLabel() || null\"\n    [attr.aria-labelledby]=\"ariaLabelledby() || null\"\n    [attr.aria-haspopup]=\"'menu'\"\n    [attr.aria-expanded]=\"isMenuOpen()\"\n    [attr.aria-controls]=\"menuId\"\n    #dropdownButton>\n    @if (textTemplate()) {\n        <ng-container\n            [ngTemplateOutlet]=\"textTemplate()\"\n            [ngTemplateOutletContext]=\"{ $implicit: text() }\"></ng-container>\n    } @else {\n        {{ text() }}\n    }\n</button>\n\n<mona-popup-menu\n    #popupMenu\n    (close)=\"onMenuClose()\"\n    (menuClick)=\"onMenuItemClick($event)\"\n    (open)=\"onMenuOpen()\"\n    [anchorConnectionPoint]=\"'bottomcenter'\"\n    [id]=\"menuId\"\n    [items]=\"menuItems()\"\n    [offset]=\"{ horizontal: 0, vertical: 2 }\"\n    [popupConnectionPoint]=\"'topcenter'\"\n    [size]=\"size()\"\n    [target]=\"dropdownButton\"\n    [trigger]=\"'click'\">\n    @if (groupTemplate()) {\n        <ng-template monaPopupMenuGroupTemplate let-group>\n            <ng-container\n                [ngTemplateOutlet]=\"groupTemplate()\"\n                [ngTemplateOutletContext]=\"{ $implicit: group }\"></ng-container>\n        </ng-template>\n    }\n    @if (menuItemIconTemplate()) {\n        <ng-template monaPopupMenuIconTemplate let-item>\n            <ng-container\n                [ngTemplateOutlet]=\"menuItemIconTemplate()\"\n                [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n        </ng-template>\n    }\n    @if (menuItemShortcutTemplate()) {\n        <ng-template monaPopupMenuShortcutTemplate let-item>\n            <ng-container\n                [ngTemplateOutlet]=\"menuItemShortcutTemplate()\"\n                [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n        </ng-template>\n    }\n    @if (menuItemTextTemplate()) {\n        <ng-template monaPopupMenuTextTemplate let-item>\n            <ng-container\n                [ngTemplateOutlet]=\"menuItemTextTemplate()\"\n                [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n        </ng-template>\n    }\n</mona-popup-menu>\n", dependencies: [{ kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "component", type: PopupMenuComponent, selector: "mona-popup-menu", inputs: ["anchor", "anchorConnectionPoint", "items", "id", "minWidth", "offset", "popupConnectionPoint", "precise", "rounded", "size", "target", "trigger", "width"], outputs: ["close", "menuClick", "navigate", "open"] }, { kind: "directive", type: PopupMenuGroupTemplateDirective, selector: "ng-template[monaPopupMenuGroupTemplate]" }, { kind: "directive", type: PopupMenuIconTemplateDirective, selector: "ng-template[monaPopupMenuIconTemplate]" }, { kind: "directive", type: PopupMenuShortcutTemplateDirective, selector: "ng-template[monaPopupMenuShortcutTemplate]" }, { kind: "directive", type: PopupMenuTextTemplateDirective, selector: "ng-template[monaPopupMenuTextTemplate]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DropdownButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mona-dropdown-button", host: {
+                        "[class]": "userClass()"
+                    }, imports: [
+                        ButtonDirective,
+                        PopupMenuComponent,
+                        PopupMenuGroupTemplateDirective,
+                        PopupMenuIconTemplateDirective,
+                        PopupMenuShortcutTemplateDirective,
+                        PopupMenuTextTemplateDirective,
+                        NgTemplateOutlet
+                    ], template: "<button\n    monaButton\n    [look]=\"look()\"\n    [size]=\"size()\"\n    [iconOnly]=\"iconOnly()\"\n    [loading]=\"loading()\"\n    [rounded]=\"rounded()\"\n    [disabled]=\"disabled()\"\n    [attr.aria-label]=\"ariaLabelledby() ? null : dropdownButtonAriaLabel() || null\"\n    [attr.aria-labelledby]=\"ariaLabelledby() || null\"\n    [attr.aria-haspopup]=\"'menu'\"\n    [attr.aria-expanded]=\"isMenuOpen()\"\n    [attr.aria-controls]=\"menuId\"\n    #dropdownButton>\n    @if (textTemplate()) {\n        <ng-container\n            [ngTemplateOutlet]=\"textTemplate()\"\n            [ngTemplateOutletContext]=\"{ $implicit: text() }\"></ng-container>\n    } @else {\n        {{ text() }}\n    }\n</button>\n\n<mona-popup-menu\n    #popupMenu\n    (close)=\"onMenuClose()\"\n    (menuClick)=\"onMenuItemClick($event)\"\n    (open)=\"onMenuOpen()\"\n    [anchorConnectionPoint]=\"'bottomcenter'\"\n    [id]=\"menuId\"\n    [items]=\"menuItems()\"\n    [offset]=\"{ horizontal: 0, vertical: 2 }\"\n    [popupConnectionPoint]=\"'topcenter'\"\n    [size]=\"size()\"\n    [target]=\"dropdownButton\"\n    [trigger]=\"'click'\">\n    @if (groupTemplate()) {\n        <ng-template monaPopupMenuGroupTemplate let-group>\n            <ng-container\n                [ngTemplateOutlet]=\"groupTemplate()\"\n                [ngTemplateOutletContext]=\"{ $implicit: group }\"></ng-container>\n        </ng-template>\n    }\n    @if (menuItemIconTemplate()) {\n        <ng-template monaPopupMenuIconTemplate let-item>\n            <ng-container\n                [ngTemplateOutlet]=\"menuItemIconTemplate()\"\n                [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n        </ng-template>\n    }\n    @if (menuItemShortcutTemplate()) {\n        <ng-template monaPopupMenuShortcutTemplate let-item>\n            <ng-container\n                [ngTemplateOutlet]=\"menuItemShortcutTemplate()\"\n                [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n        </ng-template>\n    }\n    @if (menuItemTextTemplate()) {\n        <ng-template monaPopupMenuTextTemplate let-item>\n            <ng-container\n                [ngTemplateOutlet]=\"menuItemTextTemplate()\"\n                [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n        </ng-template>\n    }\n</mona-popup-menu>\n" }]
+        }], ctorParameters: () => [], propDecorators: { menuItemComponents: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => PopupMenuToken), { ...{ descendants: false }, isSignal: true }] }], buttonRef: [{ type: i0.ViewChild, args: ["dropdownButton", { isSignal: true }] }], groupTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DropdownButtonMenuGroupTemplateDirective), { ...{
+                            read: TemplateRef,
+                            descendants: false
+                        }, isSignal: true }] }], menuItemIconTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DropdownButtonMenuItemIconTemplateDirective), { ...{
+                            read: TemplateRef,
+                            descendants: false
+                        }, isSignal: true }] }], menuItemShortcutTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DropdownButtonMenuItemShortcutTemplateDirective), { ...{
+                            read: TemplateRef,
+                            descendants: false
+                        }, isSignal: true }] }], menuItemTextTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DropdownButtonMenuItemTextTemplateDirective), { ...{
+                            read: TemplateRef,
+                            descendants: false
+                        }, isSignal: true }] }], popupMenuRef: [{ type: i0.ViewChild, args: ["popupMenu", { isSignal: true }] }], textTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DropdownButtonTextTemplateDirective), { ...{
+                            read: TemplateRef
+                        }, isSignal: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], iconOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOnly", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], look: [{ type: i0.Input, args: [{ isSignal: true, alias: "look", required: false }] }], menuItemClick: [{ type: i0.Output, args: ["menuItemClick"] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+const componentTypeMap = {
+    [PopupMenuItemType.CheckboxMenuItem]: "mona-dropdown-button-checkbox-item",
+    [PopupMenuItemType.MenuGroup]: "mona-dropdown-button-group",
+    [PopupMenuItemType.MenuItem]: "mona-dropdown-button-item",
+    [PopupMenuItemType.RadioGroup]: "mona-dropdown-button-radio-group",
+    [PopupMenuItemType.RadioItem]: "mona-dropdown-button-radio-item",
+    [PopupMenuItemType.Separator]: "mona-dropdown-button-separator"
+};
+const templateTypeMap = {
+    [PopupMenuTemplateType.Group]: "monaDropdownButtonMenuGroupTemplate",
+    [PopupMenuTemplateType.Icon]: "monaDropdownButtonMenuItemIconTemplate",
+    [PopupMenuTemplateType.Shortcut]: "monaDropdownButtonMenuItemShortcutTemplate",
+    [PopupMenuTemplateType.Text]: "monaDropdownButtonMenuItemTextTemplate"
+};
+const ensureDropdownButtonComponentTypes = (components) => {
+    ensurePopupComponentTypes({
+        components,
+        componentTypeMap,
+        origin: PopupMenuOrigin.DropdownButton,
+        prefix: "mona-dropdown-button"
+    });
+};
+const ensureDropdownButtonTemplateTypes = (templates) => {
+    ensurePopupTemplateTypes({
+        templates,
+        templateTypeMap,
+        origin: PopupMenuTemplateOrigin.DropdownButton,
+        prefix: "mona-dropdown-button"
+    });
+};
+
+class DropdownButtonCheckboxItemComponent extends PopupMenuCheckboxItemComponent {
+    constructor() {
+        super();
+        this.origin = PopupMenuOrigin.DropdownButton;
+        effect(() => ensureDropdownButtonTemplateTypes([this.shortcutTemplateConfig(), this.textTemplateConfig()].filter(t => t !== undefined)));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DropdownButtonCheckboxItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: DropdownButtonCheckboxItemComponent, isStandalone: true, selector: "mona-dropdown-button-checkbox-item", providers: [
+            {
+                provide: PopupMenuToken,
+                useExisting: forwardRef(() => DropdownButtonCheckboxItemComponent)
+            }
+        ], usesInheritance: true, ngImport: i0, template: "", isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DropdownButtonCheckboxItemComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "mona-dropdown-button-checkbox-item",
+                    template: "",
+                    providers: [
+                        {
+                            provide: PopupMenuToken,
+                            useExisting: forwardRef(() => DropdownButtonCheckboxItemComponent)
+                        }
+                    ]
+                }]
+        }], ctorParameters: () => [] });
+
+class DropdownButtonGroupComponent extends PopupMenuGroupComponent {
+    constructor() {
+        super();
+        this.origin = PopupMenuOrigin.DropdownButton;
+        effect(() => ensureDropdownButtonComponentTypes(this.items()));
+        effect(() => ensureDropdownButtonTemplateTypes([this.groupTemplateConfig()].filter(t => t !== undefined)));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DropdownButtonGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: DropdownButtonGroupComponent, isStandalone: true, selector: "mona-dropdown-button-group", providers: [
+            {
+                provide: PopupMenuToken,
+                useExisting: forwardRef(() => DropdownButtonGroupComponent)
+            }
+        ], usesInheritance: true, ngImport: i0, template: "", isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DropdownButtonGroupComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "mona-dropdown-button-group",
+                    template: "",
+                    providers: [
+                        {
+                            provide: PopupMenuToken,
+                            useExisting: forwardRef(() => DropdownButtonGroupComponent)
+                        }
+                    ]
+                }]
+        }], ctorParameters: () => [] });
+
+class DropdownButtonItemComponent extends PopupMenuItemComponent {
+    constructor() {
+        super();
+        this.origin = PopupMenuOrigin.DropdownButton;
+        effect(() => ensureDropdownButtonComponentTypes(this.items()));
+        effect(() => ensureDropdownButtonTemplateTypes([this.iconTemplateConfig(), this.shortcutTemplateConfig(), this.textTemplateConfig()].filter(t => t !== undefined)));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DropdownButtonItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: DropdownButtonItemComponent, isStandalone: true, selector: "mona-dropdown-button-item", providers: [
+            {
+                provide: PopupMenuToken,
+                useExisting: forwardRef(() => DropdownButtonItemComponent)
+            }
+        ], usesInheritance: true, ngImport: i0, template: "", isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DropdownButtonItemComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "mona-dropdown-button-item",
+                    template: "",
+                    providers: [
+                        {
+                            provide: PopupMenuToken,
+                            useExisting: forwardRef(() => DropdownButtonItemComponent)
+                        }
+                    ]
+                }]
+        }], ctorParameters: () => [] });
+
+class DropdownButtonRadioGroupComponent extends PopupMenuRadioGroupComponent {
+    constructor() {
+        super();
+        this.origin = PopupMenuOrigin.DropdownButton;
+        effect(() => ensureDropdownButtonComponentTypes(this.items()));
+        effect(() => ensureDropdownButtonTemplateTypes([this.groupTemplateConfig()].filter(t => t !== undefined)));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DropdownButtonRadioGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: DropdownButtonRadioGroupComponent, isStandalone: true, selector: "mona-dropdown-button-radio-group", providers: [
+            {
+                provide: PopupMenuToken,
+                useExisting: forwardRef(() => DropdownButtonRadioGroupComponent)
+            }
+        ], usesInheritance: true, ngImport: i0, template: "", isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DropdownButtonRadioGroupComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "mona-dropdown-button-radio-group",
+                    template: "",
+                    providers: [
+                        {
+                            provide: PopupMenuToken,
+                            useExisting: forwardRef(() => DropdownButtonRadioGroupComponent)
+                        }
+                    ]
+                }]
+        }], ctorParameters: () => [] });
+
+class DropdownButtonRadioItemComponent extends PopupMenuRadioItemComponent {
+    constructor() {
+        super();
+        this.origin = PopupMenuOrigin.DropdownButton;
+        effect(() => ensureDropdownButtonTemplateTypes([this.shortcutTemplateConfig(), this.textTemplateConfig()].filter(t => t !== undefined)));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DropdownButtonRadioItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: DropdownButtonRadioItemComponent, isStandalone: true, selector: "mona-dropdown-button-radio-item", providers: [
+            {
+                provide: PopupMenuToken,
+                useExisting: forwardRef(() => DropdownButtonRadioItemComponent)
+            },
+            {
+                provide: PopupMenuRadioItemToken,
+                useExisting: forwardRef(() => DropdownButtonRadioItemComponent)
+            }
+        ], usesInheritance: true, ngImport: i0, template: "", isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DropdownButtonRadioItemComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "mona-dropdown-button-radio-item",
+                    template: "",
+                    providers: [
+                        {
+                            provide: PopupMenuToken,
+                            useExisting: forwardRef(() => DropdownButtonRadioItemComponent)
+                        },
+                        {
+                            provide: PopupMenuRadioItemToken,
+                            useExisting: forwardRef(() => DropdownButtonRadioItemComponent)
+                        }
+                    ]
+                }]
+        }], ctorParameters: () => [] });
+
+class DropdownButtonSeparatorComponent extends PopupMenuSeparatorComponent {
+    constructor() {
+        super(...arguments);
+        this.origin = PopupMenuOrigin.DropdownButton;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DropdownButtonSeparatorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: DropdownButtonSeparatorComponent, isStandalone: true, selector: "mona-dropdown-button-separator", providers: [
+            {
+                provide: PopupMenuToken,
+                useExisting: forwardRef(() => DropdownButtonSeparatorComponent)
+            }
+        ], usesInheritance: true, ngImport: i0, template: "", isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DropdownButtonSeparatorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "mona-dropdown-button-separator",
+                    template: "",
+                    providers: [
+                        {
+                            provide: PopupMenuToken,
+                            useExisting: forwardRef(() => DropdownButtonSeparatorComponent)
+                        }
+                    ]
+                }]
+        }] });
+
+/*
+ * Public API Surface of @nanahoshi/mona-ui/dropdown-button
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DropdownButtonCheckboxItemComponent, DropdownButtonComponent, DropdownButtonGroupComponent, DropdownButtonItemComponent, DropdownButtonMenuGroupTemplateDirective, DropdownButtonMenuItemIconTemplateDirective, DropdownButtonMenuItemShortcutTemplateDirective, DropdownButtonMenuItemTextTemplateDirective, DropdownButtonRadioGroupComponent, DropdownButtonRadioItemComponent, DropdownButtonSeparatorComponent, DropdownButtonTextTemplateDirective };
+//# sourceMappingURL=nanahoshi-mona-ui-dropdown-button.mjs.map