@nanahoshi/mona-ui 0.1.0

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

@@ -0,0 +1,636 @@
+import { NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { Directive, forwardRef, inject, DestroyRef, contentChildren, viewChild, computed, contentChild, TemplateRef, signal, input, output, afterNextRender, Component, effect } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { LucideChevronDown } from '@lucide/angular';
+import { ButtonDirective } from '@nanahoshi/mona-ui/button';
+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 { ThemeService } from '@nanahoshi/mona-ui/theme';
+import { createElementControlId } from '@nanahoshi/mona-ui/internal';
+import { fromEvent } from 'rxjs';
+import { twMerge } from 'tailwind-merge';
+import { cva } from 'class-variance-authority';
+
+class SplitButtonMenuButtonTemplateDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SplitButtonMenuButtonTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: SplitButtonMenuButtonTemplateDirective, isStandalone: true, selector: "ng-template[monaSplitButtonMenuButtonTemplate]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SplitButtonMenuButtonTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "ng-template[monaSplitButtonMenuButtonTemplate]"
+                }]
+        }] });
+
+class SplitButtonMenuGroupTemplateDirective extends PopupMenuGroupTemplateDirective {
+    constructor() {
+        super(...arguments);
+        this.origin = PopupMenuTemplateOrigin.SplitButton;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SplitButtonMenuGroupTemplateDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: SplitButtonMenuGroupTemplateDirective, isStandalone: true, selector: "ng-template[monaSplitButtonMenuGroupTemplate]", providers: [
+            {
+                provide: PopupMenuGroupTemplateToken,
+                useExisting: forwardRef(() => SplitButtonMenuGroupTemplateDirective)
+            }
+        ], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SplitButtonMenuGroupTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "ng-template[monaSplitButtonMenuGroupTemplate]",
+                    providers: [
+                        {
+                            provide: PopupMenuGroupTemplateToken,
+                            useExisting: forwardRef(() => SplitButtonMenuGroupTemplateDirective)
+                        }
+                    ]
+                }]
+        }] });
+
+class SplitButtonMenuItemIconTemplateDirective extends PopupMenuIconTemplateDirective {
+    constructor() {
+        super(...arguments);
+        this.origin = PopupMenuTemplateOrigin.SplitButton;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SplitButtonMenuItemIconTemplateDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: SplitButtonMenuItemIconTemplateDirective, isStandalone: true, selector: "ng-template[monaSplitButtonMenuItemIconTemplate]", providers: [
+            {
+                provide: PopupMenuIconTemplateToken,
+                useExisting: forwardRef(() => SplitButtonMenuItemIconTemplateDirective)
+            }
+        ], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SplitButtonMenuItemIconTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "ng-template[monaSplitButtonMenuItemIconTemplate]",
+                    providers: [
+                        {
+                            provide: PopupMenuIconTemplateToken,
+                            useExisting: forwardRef(() => SplitButtonMenuItemIconTemplateDirective)
+                        }
+                    ]
+                }]
+        }] });
+
+class SplitButtonMenuItemShortcutTemplateDirective extends PopupMenuShortcutTemplateDirective {
+    constructor() {
+        super(...arguments);
+        this.origin = PopupMenuTemplateOrigin.SplitButton;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SplitButtonMenuItemShortcutTemplateDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: SplitButtonMenuItemShortcutTemplateDirective, isStandalone: true, selector: "ng-template[monaSplitButtonMenuItemShortcutTemplate]", providers: [
+            {
+                provide: PopupMenuShortcutTemplateToken,
+                useExisting: forwardRef(() => SplitButtonMenuItemShortcutTemplateDirective)
+            }
+        ], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SplitButtonMenuItemShortcutTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "ng-template[monaSplitButtonMenuItemShortcutTemplate]",
+                    providers: [
+                        {
+                            provide: PopupMenuShortcutTemplateToken,
+                            useExisting: forwardRef(() => SplitButtonMenuItemShortcutTemplateDirective)
+                        }
+                    ]
+                }]
+        }] });
+
+class SplitButtonMenuItemTextTemplateDirective extends PopupMenuTextTemplateDirective {
+    constructor() {
+        super(...arguments);
+        this.origin = PopupMenuTemplateOrigin.SplitButton;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SplitButtonMenuItemTextTemplateDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: SplitButtonMenuItemTextTemplateDirective, isStandalone: true, selector: "ng-template[monaSplitButtonMenuItemTextTemplate]", providers: [
+            {
+                provide: PopupMenuTextTemplateToken,
+                useExisting: forwardRef(() => SplitButtonMenuItemTextTemplateDirective)
+            }
+        ], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SplitButtonMenuItemTextTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "ng-template[monaSplitButtonMenuItemTextTemplate]",
+                    providers: [
+                        {
+                            provide: PopupMenuTextTemplateToken,
+                            useExisting: forwardRef(() => SplitButtonMenuItemTextTemplateDirective)
+                        }
+                    ]
+                }]
+        }] });
+
+class SplitButtonTextTemplateDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SplitButtonTextTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: SplitButtonTextTemplateDirective, isStandalone: true, selector: "ng-template[monaSplitButtonTextTemplate]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SplitButtonTextTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "ng-template[monaSplitButtonTextTemplate]"
+                }]
+        }] });
+
+const splitButtonVariants = cva(`
+        inline-flex flex-nowrap items-center
+        [&>button]:focus-visible:z-10
+        [&_svg]:w-5 [&_svg]:h-5
+    `, {
+    variants: {
+        look: {
+            default: "",
+            error: "",
+            ghost: "border-transparent",
+            info: "",
+            outline: "[&>button:not(:last-child)]:border-r",
+            primary: "",
+            secondary: "",
+            success: "",
+            warning: ""
+        },
+        rounded: {
+            full: `
+                    rounded-full
+                    [&>button]:first:rounded-tl-full [&>button]:first:rounded-bl-full
+                    [&>button]:last:rounded-tr-full [&>button]:last:rounded-br-full
+                `,
+            large: `
+                    rounded-lg
+                    [&>button]:first:rounded-tl-lg [&>button]:first:rounded-bl-lg
+                    [&>button]:last:rounded-tr-lg [&>button]:last:rounded-br-lg
+                `,
+            medium: `
+                    rounded-md
+                    [&>button]:first:rounded-tl-md [&>button]:first:rounded-bl-md
+                    [&>button]:last:rounded-tr-md [&>button]:last:rounded-br-md
+                `,
+            none: `
+                    rounded-none
+                `,
+            small: `
+                    rounded-sm
+                    [&>button]:first:rounded-tl-sm [&>button]:first:rounded-bl-sm
+                    [&>button]:last:rounded-tr-sm [&>button]:last:rounded-br-sm
+                `
+        },
+        size: {
+            large: `
+                    [&_svg]:w-5 [&_svg]:h-5
+                `,
+            medium: `
+                    [&_svg]:w-5 [&_svg]:h-5
+                `,
+            small: `
+                    [&_svg]:w-4 [&_svg]:h-4
+                `
+        }
+    },
+    defaultVariants: {
+        look: "default",
+        size: "medium",
+        rounded: "medium"
+    }
+});
+
+const splitButtonThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return splitButtonVariants;
+        default:
+            return splitButtonVariants; // Default to Mona styles
+    }
+};
+
+class SplitButtonComponent {
+    #destroyRef;
+    #themeService;
+    constructor() {
+        this.#destroyRef = inject(DestroyRef);
+        this.#themeService = inject(ThemeService);
+        this.menuItemComponents = contentChildren(PopupMenuToken, { ...(ngDevMode ? { debugName: "menuItemComponents" } : /* istanbul ignore next */ {}), descendants: false });
+        this.menuButtonRef = viewChild("menuButton", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "menuButtonRef" }] : /* istanbul ignore next */ []));
+        this.popupMenuRef = viewChild("popupMenu", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "popupMenuRef" }] : /* istanbul ignore next */ []));
+        this.classes = computed(() => {
+            const theme = this.#themeService.theme();
+            const look = this.look();
+            const rounded = this.rounded();
+            const size = this.size();
+            const classes = splitButtonThemeVariants(theme)({
+                look,
+                rounded,
+                size
+            });
+            const userClass = this.userClass();
+            return twMerge(classes, userClass);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+        this.groupTemplate = contentChild(SplitButtonMenuGroupTemplateDirective, { ...(ngDevMode ? { debugName: "groupTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef,
+            descendants: false });
+        this.iconTemplate = contentChild(SplitButtonMenuItemIconTemplateDirective, { ...(ngDevMode ? { debugName: "iconTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef,
+            descendants: false });
+        this.mainButtonTextTemplate = contentChild(SplitButtonTextTemplateDirective, { ...(ngDevMode ? { debugName: "mainButtonTextTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
+        this.menuButtonTemplate = contentChild(SplitButtonMenuButtonTemplateDirective, { ...(ngDevMode ? { debugName: "menuButtonTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
+        this.menuId = createElementControlId();
+        this.menuItems = computed(() => {
+            return this.menuItemComponents()
+                .map(item => item.getPopupMenuItem())
+                .flatMap(i => i);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "menuItems" }] : /* istanbul ignore next */ []));
+        this.menuOpen = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "menuOpen" }] : /* istanbul ignore next */ []));
+        this.popupMenuRounded = computed(() => {
+            const rounded = this.rounded();
+            return rounded === "full" ? "large" : rounded;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "popupMenuRounded" }] : /* istanbul ignore next */ []));
+        this.shortcutTemplate = contentChild(SplitButtonMenuItemShortcutTemplateDirective, { ...(ngDevMode ? { debugName: "shortcutTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef,
+            descendants: false });
+        this.splitButtonAriaLabel = computed(() => {
+            const ariaLabel = this.ariaLabel();
+            const text = this.text();
+            return ariaLabel || `${text} splitbutton`;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "splitButtonAriaLabel" }] : /* istanbul ignore next */ []));
+        this.textTemplate = contentChild(SplitButtonMenuItemTextTemplateDirective, { ...(ngDevMode ? { debugName: "textTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef,
+            descendants: false });
+        /**
+         * @description Accessible name for the main action button.
+         * Falls back to `"{text} splitbutton"` when empty.
+         * @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 main action button.
+         * Takes precedence over `ariaLabel` when both are set.
+         * @default ""
+         */
+        this.ariaLabelledby = input("", { ...(ngDevMode ? { debugName: "ariaLabelledby" } : /* istanbul ignore next */ {}), alias: "aria-labelledby" });
+        /**
+         * @description Emitted when the main action button is clicked.
+         */
+        this.buttonClick = output();
+        /**
+         * @description Renders the component with reduced visual emphasis
+         * and removes pointer interaction from both the main button and the menu toggle button.
+         * @default false
+         */
+        this.disabled = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "disabled" }] : /* 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 Accessible name for the menu toggle button.
+         * Override to provide a localized label for non-English applications.
+         * @default "Show menu options"
+         */
+        this.menuButtonAriaLabel = input("Show menu options", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "menuButtonAriaLabel" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Emitted when a menu item in the popup is clicked.
+         */
+        this.menuItemClick = output();
+        /**
+         * @description Minimum width of the popup menu in pixels.
+         * A value of `0` means no minimum width is applied.
+         * @default 0
+         */
+        this.popupWidth = input(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "popupWidth" }] : /* istanbul ignore next */ []));
+        /**
+         * @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 in the main action button.
+         * Ignored when a `monaSplitButtonTextTemplate` 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.menuOpen.set(false);
+    }
+    onMenuItemClick(event) {
+        this.menuItemClick.emit(event);
+    }
+    onMenuOpen() {
+        this.menuOpen.set(true);
+    }
+    #closeMenu() {
+        const popupMenu = this.popupMenuRef();
+        if (popupMenu && this.menuOpen()) {
+            popupMenu.closeMenu();
+            this.menuButtonRef()?.nativeElement?.focus();
+        }
+    }
+    #openMenuViaKeyboard() {
+        const popupMenu = this.popupMenuRef();
+        if (popupMenu && !this.menuOpen()) {
+            popupMenu.openMenuViaKeyboard();
+        }
+    }
+    #setKeyboardEvents() {
+        const menuButtonElement = this.menuButtonRef()?.nativeElement;
+        if (!menuButtonElement) {
+            return;
+        }
+        fromEvent(menuButtonElement, "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.menuOpen()) {
+                        this.#closeMenu();
+                    }
+                    break;
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SplitButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: SplitButtonComponent, isStandalone: true, selector: "mona-split-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 }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, menuButtonAriaLabel: { classPropertyName: "menuButtonAriaLabel", publicName: "menuButtonAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, popupWidth: { classPropertyName: "popupWidth", publicName: "popupWidth", 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: { buttonClick: "buttonClick", menuItemClick: "menuItemClick" }, host: { properties: { "class": "classes()" } }, queries: [{ propertyName: "menuItemComponents", predicate: PopupMenuToken, isSignal: true }, { propertyName: "groupTemplate", first: true, predicate: SplitButtonMenuGroupTemplateDirective, read: TemplateRef, isSignal: true }, { propertyName: "iconTemplate", first: true, predicate: SplitButtonMenuItemIconTemplateDirective, read: TemplateRef, isSignal: true }, { propertyName: "mainButtonTextTemplate", first: true, predicate: SplitButtonTextTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "menuButtonTemplate", first: true, predicate: SplitButtonMenuButtonTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "shortcutTemplate", first: true, predicate: SplitButtonMenuItemShortcutTemplateDirective, read: TemplateRef, isSignal: true }, { propertyName: "textTemplate", first: true, predicate: SplitButtonMenuItemTextTemplateDirective, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "menuButtonRef", first: true, predicate: ["menuButton"], descendants: true, isSignal: true }, { propertyName: "popupMenuRef", first: true, predicate: ["popupMenu"], descendants: true, isSignal: true }], ngImport: i0, template: "<button\r\n    monaButton\r\n    (click)=\"buttonClick.emit($event)\"\r\n    [disabled]=\"disabled()\"\r\n    [look]=\"look()\"\r\n    [size]=\"size()\"\r\n    [rounded]=\"rounded()\"\r\n    class=\"rounded-tr-none rounded-br-none\"\r\n    [attr.aria-label]=\"splitButtonAriaLabel() || null\"\r\n    [attr.aria-labelledby]=\"ariaLabelledby() || null\"\r\n    [tabindex]=\"disabled() ? -1 : 0\"\r\n    #mainButton>\r\n    @if (mainButtonTextTemplate()) {\r\n        <ng-container [ngTemplateOutlet]=\"mainButtonTextTemplate()\"></ng-container>\r\n    } @else {\r\n        <span>{{ text() }}</span>\r\n    }\r\n</button>\r\n<button\r\n    monaButton\r\n    [disabled]=\"disabled()\"\r\n    [iconOnly]=\"true\"\r\n    [look]=\"look()\"\r\n    [size]=\"size()\"\r\n    [rounded]=\"rounded()\"\r\n    class=\"rounded-tl-none rounded-bl-none border-l-0\"\r\n    [attr.aria-haspopup]=\"'menu'\"\r\n    [attr.aria-expanded]=\"menuOpen()\"\r\n    [attr.aria-controls]=\"menuId\"\r\n    [attr.aria-label]=\"menuButtonAriaLabel()\"\r\n    [tabindex]=\"disabled() ? -1 : 0\"\r\n    #menuButton>\r\n    @if (menuButtonTemplate()) {\r\n        <ng-container [ngTemplateOutlet]=\"menuButtonTemplate()\"></ng-container>\r\n    } @else {\r\n        <svg lucideChevronDown [size]=\"16\"></svg>\r\n    }\r\n</button>\r\n\r\n<mona-popup-menu\r\n    [anchorConnectionPoint]=\"'bottomleft'\"\r\n    [anchor]=\"mainButton\"\r\n    [items]=\"menuItems()\"\r\n    (menuClick)=\"onMenuItemClick($event)\"\r\n    (open)=\"onMenuOpen()\"\r\n    (close)=\"onMenuClose()\"\r\n    [offset]=\"{ horizontal: 0, vertical: 2 }\"\r\n    [popupConnectionPoint]=\"'topleft'\"\r\n    [rounded]=\"popupMenuRounded()\"\r\n    [size]=\"size()\"\r\n    [target]=\"menuButton\"\r\n    [trigger]=\"'click'\"\r\n    [id]=\"menuId\"\r\n    [minWidth]=\"popupWidth() || undefined\"\r\n    #popupMenu>\r\n    @if (groupTemplate()) {\r\n        <ng-template monaPopupMenuGroupTemplate let-group>\r\n            <ng-container\r\n                [ngTemplateOutlet]=\"groupTemplate()\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: group }\"></ng-container>\r\n        </ng-template>\r\n    }\r\n    @if (iconTemplate()) {\r\n        <ng-template monaPopupMenuIconTemplate let-item>\r\n            <ng-container\r\n                [ngTemplateOutlet]=\"iconTemplate()\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n        </ng-template>\r\n    }\r\n    @if (shortcutTemplate()) {\r\n        <ng-template monaPopupMenuShortcutTemplate let-item>\r\n            <ng-container\r\n                [ngTemplateOutlet]=\"shortcutTemplate()\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n        </ng-template>\r\n    }\r\n    @if (textTemplate()) {\r\n        <ng-template monaPopupMenuTextTemplate let-item>\r\n            <ng-container\r\n                [ngTemplateOutlet]=\"textTemplate()\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n        </ng-template>\r\n    }\r\n</mona-popup-menu>\r\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: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: "component", type: LucideChevronDown, selector: "svg[lucideChevronDown]" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SplitButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mona-split-button", imports: [
+                        ButtonDirective,
+                        NgTemplateOutlet,
+                        PopupMenuComponent,
+                        PopupMenuGroupTemplateDirective,
+                        PopupMenuIconTemplateDirective,
+                        PopupMenuShortcutTemplateDirective,
+                        PopupMenuTextTemplateDirective,
+                        LucideChevronDown
+                    ], host: {
+                        "[class]": "classes()"
+                    }, template: "<button\r\n    monaButton\r\n    (click)=\"buttonClick.emit($event)\"\r\n    [disabled]=\"disabled()\"\r\n    [look]=\"look()\"\r\n    [size]=\"size()\"\r\n    [rounded]=\"rounded()\"\r\n    class=\"rounded-tr-none rounded-br-none\"\r\n    [attr.aria-label]=\"splitButtonAriaLabel() || null\"\r\n    [attr.aria-labelledby]=\"ariaLabelledby() || null\"\r\n    [tabindex]=\"disabled() ? -1 : 0\"\r\n    #mainButton>\r\n    @if (mainButtonTextTemplate()) {\r\n        <ng-container [ngTemplateOutlet]=\"mainButtonTextTemplate()\"></ng-container>\r\n    } @else {\r\n        <span>{{ text() }}</span>\r\n    }\r\n</button>\r\n<button\r\n    monaButton\r\n    [disabled]=\"disabled()\"\r\n    [iconOnly]=\"true\"\r\n    [look]=\"look()\"\r\n    [size]=\"size()\"\r\n    [rounded]=\"rounded()\"\r\n    class=\"rounded-tl-none rounded-bl-none border-l-0\"\r\n    [attr.aria-haspopup]=\"'menu'\"\r\n    [attr.aria-expanded]=\"menuOpen()\"\r\n    [attr.aria-controls]=\"menuId\"\r\n    [attr.aria-label]=\"menuButtonAriaLabel()\"\r\n    [tabindex]=\"disabled() ? -1 : 0\"\r\n    #menuButton>\r\n    @if (menuButtonTemplate()) {\r\n        <ng-container [ngTemplateOutlet]=\"menuButtonTemplate()\"></ng-container>\r\n    } @else {\r\n        <svg lucideChevronDown [size]=\"16\"></svg>\r\n    }\r\n</button>\r\n\r\n<mona-popup-menu\r\n    [anchorConnectionPoint]=\"'bottomleft'\"\r\n    [anchor]=\"mainButton\"\r\n    [items]=\"menuItems()\"\r\n    (menuClick)=\"onMenuItemClick($event)\"\r\n    (open)=\"onMenuOpen()\"\r\n    (close)=\"onMenuClose()\"\r\n    [offset]=\"{ horizontal: 0, vertical: 2 }\"\r\n    [popupConnectionPoint]=\"'topleft'\"\r\n    [rounded]=\"popupMenuRounded()\"\r\n    [size]=\"size()\"\r\n    [target]=\"menuButton\"\r\n    [trigger]=\"'click'\"\r\n    [id]=\"menuId\"\r\n    [minWidth]=\"popupWidth() || undefined\"\r\n    #popupMenu>\r\n    @if (groupTemplate()) {\r\n        <ng-template monaPopupMenuGroupTemplate let-group>\r\n            <ng-container\r\n                [ngTemplateOutlet]=\"groupTemplate()\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: group }\"></ng-container>\r\n        </ng-template>\r\n    }\r\n    @if (iconTemplate()) {\r\n        <ng-template monaPopupMenuIconTemplate let-item>\r\n            <ng-container\r\n                [ngTemplateOutlet]=\"iconTemplate()\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n        </ng-template>\r\n    }\r\n    @if (shortcutTemplate()) {\r\n        <ng-template monaPopupMenuShortcutTemplate let-item>\r\n            <ng-container\r\n                [ngTemplateOutlet]=\"shortcutTemplate()\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n        </ng-template>\r\n    }\r\n    @if (textTemplate()) {\r\n        <ng-template monaPopupMenuTextTemplate let-item>\r\n            <ng-container\r\n                [ngTemplateOutlet]=\"textTemplate()\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n        </ng-template>\r\n    }\r\n</mona-popup-menu>\r\n" }]
+        }], ctorParameters: () => [], propDecorators: { menuItemComponents: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => PopupMenuToken), { ...{ descendants: false }, isSignal: true }] }], menuButtonRef: [{ type: i0.ViewChild, args: ["menuButton", { isSignal: true }] }], popupMenuRef: [{ type: i0.ViewChild, args: ["popupMenu", { isSignal: true }] }], groupTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SplitButtonMenuGroupTemplateDirective), { ...{
+                            read: TemplateRef,
+                            descendants: false
+                        }, isSignal: true }] }], iconTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SplitButtonMenuItemIconTemplateDirective), { ...{
+                            read: TemplateRef,
+                            descendants: false
+                        }, isSignal: true }] }], mainButtonTextTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SplitButtonTextTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], menuButtonTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SplitButtonMenuButtonTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], shortcutTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SplitButtonMenuItemShortcutTemplateDirective), { ...{
+                            read: TemplateRef,
+                            descendants: false
+                        }, isSignal: true }] }], textTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SplitButtonMenuItemTextTemplateDirective), { ...{
+                            read: TemplateRef,
+                            descendants: false
+                        }, 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 }] }], buttonClick: [{ type: i0.Output, args: ["buttonClick"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], look: [{ type: i0.Input, args: [{ isSignal: true, alias: "look", required: false }] }], menuButtonAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuButtonAriaLabel", required: false }] }], menuItemClick: [{ type: i0.Output, args: ["menuItemClick"] }], popupWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupWidth", required: false }] }], 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-split-button-checkbox-item",
+    [PopupMenuItemType.MenuGroup]: "mona-split-button-group",
+    [PopupMenuItemType.MenuItem]: "mona-split-button-item",
+    [PopupMenuItemType.RadioGroup]: "mona-split-button-radio-group",
+    [PopupMenuItemType.RadioItem]: "mona-split-button-radio-item",
+    [PopupMenuItemType.Separator]: "mona-split-button-separator"
+};
+const templateTypeMap = {
+    [PopupMenuTemplateType.Group]: "monaSplitButtonMenuGroupTemplate",
+    [PopupMenuTemplateType.Icon]: "monaSplitButtonMenuItemIconTemplate",
+    [PopupMenuTemplateType.Shortcut]: "monaSplitButtonMenuItemShortcutTemplate",
+    [PopupMenuTemplateType.Text]: "monaSplitButtonMenuItemTextTemplate"
+};
+const ensureSplitButtonComponentTypes = (components) => {
+    ensurePopupComponentTypes({
+        components,
+        componentTypeMap,
+        origin: PopupMenuOrigin.SplitButton,
+        prefix: "mona-split-button"
+    });
+};
+const ensureSplitButtonTemplateTypes = (templates) => {
+    ensurePopupTemplateTypes({
+        templates,
+        templateTypeMap,
+        origin: PopupMenuTemplateOrigin.SplitButton,
+        prefix: "mona-split-button"
+    });
+};
+
+class SplitButtonCheckboxItemComponent extends PopupMenuCheckboxItemComponent {
+    constructor() {
+        super();
+        this.origin = PopupMenuOrigin.SplitButton;
+        effect(() => ensureSplitButtonTemplateTypes([this.shortcutTemplateConfig(), this.textTemplateConfig()].filter(t => t !== undefined)));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SplitButtonCheckboxItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: SplitButtonCheckboxItemComponent, isStandalone: true, selector: "mona-split-button-checkbox-item", providers: [
+            {
+                provide: PopupMenuToken,
+                useExisting: forwardRef(() => SplitButtonCheckboxItemComponent)
+            }
+        ], usesInheritance: true, ngImport: i0, template: "", isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SplitButtonCheckboxItemComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "mona-split-button-checkbox-item",
+                    template: "",
+                    providers: [
+                        {
+                            provide: PopupMenuToken,
+                            useExisting: forwardRef(() => SplitButtonCheckboxItemComponent)
+                        }
+                    ]
+                }]
+        }], ctorParameters: () => [] });
+
+class SplitButtonGroupComponent extends PopupMenuGroupComponent {
+    constructor() {
+        super();
+        this.origin = PopupMenuOrigin.SplitButton;
+        effect(() => ensureSplitButtonComponentTypes(this.items()));
+        effect(() => ensureSplitButtonTemplateTypes([this.groupTemplateConfig()].filter(t => t !== undefined)));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SplitButtonGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: SplitButtonGroupComponent, isStandalone: true, selector: "mona-split-button-group", providers: [
+            {
+                provide: PopupMenuToken,
+                useExisting: forwardRef(() => SplitButtonGroupComponent)
+            }
+        ], usesInheritance: true, ngImport: i0, template: "", isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SplitButtonGroupComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "mona-split-button-group",
+                    template: "",
+                    providers: [
+                        {
+                            provide: PopupMenuToken,
+                            useExisting: forwardRef(() => SplitButtonGroupComponent)
+                        }
+                    ]
+                }]
+        }], ctorParameters: () => [] });
+
+class SplitButtonItemComponent extends PopupMenuItemComponent {
+    constructor() {
+        super();
+        this.origin = PopupMenuOrigin.SplitButton;
+        effect(() => ensureSplitButtonComponentTypes(this.items()));
+        effect(() => ensureSplitButtonTemplateTypes([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: SplitButtonItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: SplitButtonItemComponent, isStandalone: true, selector: "mona-split-button-item", providers: [
+            {
+                provide: PopupMenuToken,
+                useExisting: forwardRef(() => SplitButtonItemComponent)
+            }
+        ], usesInheritance: true, ngImport: i0, template: "", isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SplitButtonItemComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "mona-split-button-item",
+                    imports: [],
+                    template: "",
+                    providers: [
+                        {
+                            provide: PopupMenuToken,
+                            useExisting: forwardRef(() => SplitButtonItemComponent)
+                        }
+                    ]
+                }]
+        }], ctorParameters: () => [] });
+
+class SplitButtonRadioGroupComponent extends PopupMenuRadioGroupComponent {
+    constructor() {
+        super();
+        this.origin = PopupMenuOrigin.SplitButton;
+        effect(() => ensureSplitButtonComponentTypes(this.items()));
+        effect(() => ensureSplitButtonTemplateTypes([this.groupTemplateConfig()].filter(t => t !== undefined)));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SplitButtonRadioGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: SplitButtonRadioGroupComponent, isStandalone: true, selector: "mona-split-button-radio-group", providers: [
+            {
+                provide: PopupMenuToken,
+                useExisting: forwardRef(() => SplitButtonRadioGroupComponent)
+            }
+        ], usesInheritance: true, ngImport: i0, template: "", isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SplitButtonRadioGroupComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "mona-split-button-radio-group",
+                    template: "",
+                    providers: [
+                        {
+                            provide: PopupMenuToken,
+                            useExisting: forwardRef(() => SplitButtonRadioGroupComponent)
+                        }
+                    ]
+                }]
+        }], ctorParameters: () => [] });
+
+class SplitButtonRadioItemComponent extends PopupMenuRadioItemComponent {
+    constructor() {
+        super();
+        this.origin = PopupMenuOrigin.SplitButton;
+        effect(() => ensureSplitButtonTemplateTypes([this.shortcutTemplateConfig(), this.textTemplateConfig()].filter(t => t !== undefined)));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SplitButtonRadioItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: SplitButtonRadioItemComponent, isStandalone: true, selector: "mona-split-button-radio-item", providers: [
+            {
+                provide: PopupMenuToken,
+                useExisting: forwardRef(() => SplitButtonRadioItemComponent)
+            },
+            {
+                provide: PopupMenuRadioItemToken,
+                useExisting: forwardRef(() => SplitButtonRadioItemComponent)
+            }
+        ], usesInheritance: true, ngImport: i0, template: "", isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SplitButtonRadioItemComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "mona-split-button-radio-item",
+                    template: "",
+                    providers: [
+                        {
+                            provide: PopupMenuToken,
+                            useExisting: forwardRef(() => SplitButtonRadioItemComponent)
+                        },
+                        {
+                            provide: PopupMenuRadioItemToken,
+                            useExisting: forwardRef(() => SplitButtonRadioItemComponent)
+                        }
+                    ]
+                }]
+        }], ctorParameters: () => [] });
+
+class SplitButtonSeparatorComponent extends PopupMenuSeparatorComponent {
+    constructor() {
+        super(...arguments);
+        this.origin = PopupMenuOrigin.SplitButton;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SplitButtonSeparatorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: SplitButtonSeparatorComponent, isStandalone: true, selector: "mona-split-button-separator", providers: [
+            {
+                provide: PopupMenuToken,
+                useExisting: forwardRef(() => SplitButtonSeparatorComponent)
+            }
+        ], usesInheritance: true, ngImport: i0, template: "", isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SplitButtonSeparatorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "mona-split-button-separator",
+                    template: "",
+                    providers: [
+                        {
+                            provide: PopupMenuToken,
+                            useExisting: forwardRef(() => SplitButtonSeparatorComponent)
+                        }
+                    ]
+                }]
+        }] });
+
+/*
+ * Public API Surface of @nanahoshi/mona-ui/split-button
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SplitButtonCheckboxItemComponent, SplitButtonComponent, SplitButtonGroupComponent, SplitButtonItemComponent, SplitButtonMenuButtonTemplateDirective, SplitButtonMenuGroupTemplateDirective, SplitButtonMenuItemIconTemplateDirective, SplitButtonMenuItemShortcutTemplateDirective, SplitButtonMenuItemTextTemplateDirective, SplitButtonRadioGroupComponent, SplitButtonRadioItemComponent, SplitButtonSeparatorComponent, SplitButtonTextTemplateDirective };
+//# sourceMappingURL=nanahoshi-mona-ui-split-button.mjs.map