@nanahoshi/mona-ui 0.1.0

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

@@ -0,0 +1,497 @@
+import * as i0 from '@angular/core';
+import { signal, Injectable, inject, ApplicationRef, DestroyRef, ElementRef, Injector, Renderer2, computed, input, model, effect, untracked, afterNextRender, createComponent, Directive } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { IndicatorIconComponent } from '@nanahoshi/mona-ui/internal/indicator-icon';
+import { ThemeService } from '@nanahoshi/mona-ui/theme';
+import { Subject, fromEvent, takeWhile } from 'rxjs';
+import { twMerge } from 'tailwind-merge';
+import { cva } from 'class-variance-authority';
+
+class ButtonService {
+    constructor() {
+        this.buttonClick$ = new Subject();
+        this.buttonSelect$ = new Subject();
+        this.groupDisabled = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "groupDisabled" }] : /* istanbul ignore next */ []));
+        this.groupLook = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "groupLook" }] : /* istanbul ignore next */ []));
+        this.groupRounded = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "groupRounded" }] : /* istanbul ignore next */ []));
+        this.groupSize = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "groupSize" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ButtonService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ButtonService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ButtonService, decorators: [{
+            type: Injectable
+        }] });
+
+const buttonVariants = cva(`
+        inline-flex items-center justify-center gap-2
+        text-sm font-medium cursor-pointer whitespace-nowrap
+        outline-none shadow-xs
+        focus-visible:outline-none focus-visible:shadow
+        transition-colors duration-100 ease-in-out
+    `, {
+    variants: {
+        disabled: {
+            true: "pointer-events-none opacity-50 cursor-not-allowed select-none",
+            false: ""
+        },
+        iconOnly: {
+            true: "aspect-square",
+            false: "aspect-auto"
+        },
+        loading: {
+            true: "pointer-events-none",
+            false: ""
+        },
+        look: {
+            default: `
+                    bg-background text-foreground
+                    border border-input-border
+                    hover:bg-hover active:bg-active
+                    focus-visible:ring-2 focus-visible:ring-primary/40
+                `,
+            primary: `
+                    bg-primary text-primary-foreground
+                    hover:bg-primary-hover active:bg-primary-active
+                    focus-visible:ring-2 focus-visible:ring-primary/40
+                `,
+            success: `
+                    bg-success text-success-foreground
+                    hover:bg-success-hover
+                    active:bg-success-active
+                    focus-visible:ring-2 focus-visible:ring-success/40
+                `,
+            error: `
+                    bg-error text-error-foreground
+                    hover:bg-error-hover
+                    active:bg-error-active
+                    focus-visible:ring-2 focus-visible:ring-error/40
+                `,
+            warning: `
+                    bg-warning text-warning-foreground
+                    hover:bg-warning-hover
+                    active:bg-warning-active
+                    focus-visible:ring-2 focus-visible:ring-warning/40
+                `,
+            info: `
+                    bg-info text-info-foreground
+                    hover:bg-info-hover
+                    active:bg-info-active
+                    focus-visible:ring-2 focus-visible:ring-info/40
+                `,
+            outline: `
+                    border border-border
+                    hover:bg-accent
+                    active:bg-accent-dark
+                    focus-visible:ring-2 focus-visible:ring-primary/40
+                `,
+            secondary: `
+                    bg-secondary text-secondary-foreground
+                    hover:bg-secondary-hover
+                    active:bg-secondary-active
+                    focus-visible:ring-2 focus-visible:ring-primary/40
+                `,
+            ghost: `
+                    shadow-none
+                    hover:bg-secondary-hover
+                    active:bg-secondary-active
+                    focus-visible:ring-2 focus-visible:ring-primary/40
+                `,
+            link: `
+                    shadow-none
+                    underline-offset-4 hover:underline
+                    focus-visible:ring-2 focus-visible:ring-primary/40
+                `,
+            clear: `
+                    bg-transparent border-0 shadow-none
+                    hover:bg-transparent active:bg-transparent
+                    focus-visible:ring-2 focus-visible:ring-primary/40
+                `
+        },
+        rounded: {
+            full: "rounded-full",
+            large: "rounded-lg",
+            medium: "rounded-md",
+            none: "rounded-none",
+            small: "rounded-sm"
+        },
+        size: {
+            large: "px-6 h-10",
+            medium: "px-4 h-9",
+            small: "px-3 text-xs h-8"
+        },
+        selected: {
+            true: "bg-accent text-accent-foreground hover:bg-accent/90 hover:text-accent-foreground"
+        }
+    },
+    compoundVariants: [
+        {
+            look: "default",
+            selected: true,
+            class: `
+                    bg-selected text-foreground
+                     hover:bg-selected/95 hover:text-foreground
+                    active:bg-selected/100 active:text-foreground
+                `
+        },
+        {
+            look: "primary",
+            selected: true,
+            class: `
+                    bg-primary-selected text-primary-foreground
+                    hover:bg-primary-selected/95 hover:text-primary-foreground
+                    active:bg-primary-selected/100 active:text-primary-foreground
+                `
+        },
+        {
+            look: "secondary",
+            selected: true,
+            class: `
+                    bg-secondary-selected text-secondary-foreground
+                    hover:bg-secondary-selected/95 hover:text-secondary-foreground
+                    active:bg-secondary-selected/100 active:text-secondary-foreground
+                `
+        },
+        {
+            look: "success",
+            selected: true,
+            class: `
+                    bg-success-selected text-success-foreground
+                    hover:bg-success-selected/95 hover:text-success-foreground
+                    active:bg-success-selected/100 active:text-success-foreground
+                `
+        },
+        {
+            look: "error",
+            selected: true,
+            class: `
+                    bg-error-selected text-error-foreground
+                    hover:bg-error-selected/95 hover:text-error-foreground
+                    active:bg-error-selected/100 active:text-error-foreground
+                `
+        },
+        {
+            look: "warning",
+            selected: true,
+            class: `
+                    bg-warning-selected text-warning-foreground
+                    hover:bg-warning-selected/95 hover:text-warning-foreground
+                    active:bg-warning-selected/100 active:text-warning-foreground
+                `
+        },
+        {
+            look: "info",
+            selected: true,
+            class: `
+                    bg-info-selected text-info-foreground
+                    hover:bg-info-selected/95 hover:text-info-foreground
+                    active:bg-info-selected/100 active:text-info-foreground
+                `
+        },
+        {
+            look: "outline",
+            selected: true,
+            class: `
+                    bg-primary-selected text-primary-foreground
+                    hover:bg-primary-selected/95 hover:text-primary-foreground
+                    active:bg-primary-selected/100 active:text-primary-foreground
+                `
+        },
+        {
+            look: "ghost",
+            selected: true,
+            class: `
+                    bg-secondary-selected text-secondary-foreground
+                    hover:bg-secondary-selected/95 hover:text-secondary-foreground
+                    active:bg-secondary-selected/100 active:text-secondary-foreground
+                `
+        },
+        {
+            look: "link",
+            selected: true,
+            class: `
+                    bg-secondary-selected text-secondary-foreground
+                    hover:bg-secondary-selected/95 hover:text-secondary-foreground
+                    active:bg-secondary-selected/100 active:text-secondary-foreground
+                `
+        },
+        {
+            look: "clear",
+            selected: true,
+            class: `
+                    bg-transparent border-0
+                    hover:bg-transparent active:bg-transparent
+                `
+        },
+        {
+            iconOnly: true,
+            loading: false,
+            size: "small",
+            class: "w-8 h-8 p-0"
+        },
+        {
+            iconOnly: true,
+            loading: false,
+            size: "medium",
+            class: "w-9 h-9 p-0"
+        },
+        {
+            iconOnly: true,
+            loading: false,
+            size: "large",
+            class: "w-10 h-10 p-0"
+        }
+    ],
+    defaultVariants: {
+        look: "default",
+        rounded: "medium",
+        size: "medium"
+    }
+});
+
+const buttonThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return buttonVariants;
+        default:
+            return buttonVariants;
+    }
+};
+
+class ButtonDirective {
+    #appRef;
+    #buttonService;
+    #destroyRef;
+    #hostElementRef;
+    #injector;
+    #renderer;
+    #themeService;
+    #loaderComponentRef;
+    #toggleSubscription;
+    constructor() {
+        this.#appRef = inject(ApplicationRef);
+        this.#buttonService = inject(ButtonService, { optional: true });
+        this.#destroyRef = inject(DestroyRef);
+        this.#hostElementRef = inject(ElementRef);
+        this.#injector = inject(Injector);
+        this.#renderer = inject(Renderer2);
+        this.#themeService = inject(ThemeService);
+        this.#loaderComponentRef = null;
+        this.#toggleSubscription = null;
+        this.effectiveDisabled = computed(() => this.#buttonService?.groupDisabled() || this.disabled(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "effectiveDisabled" }] : /* istanbul ignore next */ []));
+        this.effectiveLook = computed(() => this.#buttonService?.groupLook() ?? this.look(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "effectiveLook" }] : /* istanbul ignore next */ []));
+        this.effectiveRounded = computed(() => this.#buttonService?.groupRounded() ?? this.rounded(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "effectiveRounded" }] : /* istanbul ignore next */ []));
+        this.effectiveSize = computed(() => this.#buttonService?.groupSize() ?? this.size(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "effectiveSize" }] : /* istanbul ignore next */ []));
+        this.effectiveToggleable = computed(() => this.isInButtonGroup() || this.toggleable(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "effectiveToggleable" }] : /* istanbul ignore next */ []));
+        this.isInButtonGroup = computed(() => !!this.#buttonService, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isInButtonGroup" }] : /* istanbul ignore next */ []));
+        this.baseClass = computed(() => {
+            const disabled = this.effectiveDisabled();
+            const iconOnly = this.iconOnly();
+            const loading = this.loading();
+            const look = this.effectiveLook();
+            const rounded = this.effectiveRounded();
+            const size = this.effectiveSize();
+            const selected = this.selected();
+            const userClass = this.userClass();
+            const theme = this.#themeService.theme();
+            const variants = buttonThemeVariants(theme);
+            const variantClasses = variants({ disabled, iconOnly, loading, look, rounded, selected, size });
+            return twMerge(variantClasses, userClass);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
+        this.loadingSize = computed(() => {
+            const size = this.effectiveSize();
+            switch (size) {
+                case "small":
+                    return 12;
+                case "large":
+                    return 16;
+                case "medium":
+                default:
+                    return 14;
+            }
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "loadingSize" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Value forwarded to the `aria-haspopup` attribute. Set when this button triggers a popup, menu,
+         * listbox, tree, grid, or dialog. Omit or leave as `"false"` for plain action buttons.
+         * @default "false"
+         */
+        this.ariaHasPopup = input("false", { ...(ngDevMode ? { debugName: "ariaHasPopup" } : /* istanbul ignore next */ {}), alias: "aria-haspopup" });
+        /**
+         * @description Renders the component with reduced visual emphasis and removes pointer interaction.
+         * When inside a `ButtonGroup`, the group's disabled state takes precedence.
+         * @default false
+         */
+        this.disabled = model(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Removes horizontal padding and fixes a square aspect ratio sized to match `size`.
+         * Provide `aria-label` on the host when using icon-only buttons.
+         * @default false
+         */
+        this.iconOnly = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "iconOnly" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Displays a loading indicator and prevents interaction while an operation is in progress.
+         * Sets `aria-busy="true"` on the host.
+         * @default false
+         */
+        this.loading = model(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Visual style variant of the button. When inside a `ButtonGroup`, the group's look takes precedence.
+         * @default "default"
+         */
+        this.look = model("default", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "look" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Border-radius preset applied to the component.
+         * When inside a `ButtonGroup`, the group's value takes precedence.
+         * @default "medium"
+         */
+        this.rounded = input("medium", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rounded" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Whether the button is in the selected/pressed state. Drives `aria-pressed` when the button is toggleable.
+         * Managed by `toggleable` click handling or by `ButtonGroup` selection policy.
+         * @default false
+         */
+        this.selected = model(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Size preset controlling the button's height and horizontal padding.
+         * When inside a `ButtonGroup`, the group's value takes precedence.
+         * @default "medium"
+         */
+        this.size = input("medium", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Tab index of the host element. Automatically overridden to `-1` when the button is disabled or loading.
+         * Accepts a numeric string and converts it to a number.
+         * @default 0
+         */
+        this.tabindex = input(0, { ...(ngDevMode ? { debugName: "tabindex" } : /* istanbul ignore next */ {}), transform: (value) => (typeof value === "string" ? parseInt(value, 10) : value) });
+        /**
+         * @description Enables toggle behavior — each click flips the `selected` state and `aria-pressed` is managed.
+         * Must use `[toggleable]="true"` binding syntax, not bare attribute form.
+         * @default false
+         */
+        this.toggleable = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "toggleable" }] : /* 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" });
+        effect(() => {
+            const toggleable = this.effectiveToggleable();
+            if (toggleable) {
+                untracked(() => this.#setToggleableEvent());
+            }
+        });
+        effect(() => {
+            const loading = this.loading();
+            const loaderSize = this.loadingSize();
+            untracked(() => {
+                if (loading) {
+                    this.#createLoader(loaderSize);
+                }
+                else {
+                    this.#removeLoader();
+                }
+            });
+        });
+        afterNextRender({
+            read: () => this.#setSubscriptions()
+        });
+    }
+    #createLoader(size) {
+        if (this.#loaderComponentRef) {
+            return;
+        }
+        this.#loaderComponentRef = createComponent(IndicatorIconComponent, {
+            environmentInjector: this.#appRef.injector,
+            elementInjector: this.#injector
+        });
+        this.#loaderComponentRef.setInput("preset", "loading");
+        this.#loaderComponentRef.setInput("size", size);
+        this.#loaderComponentRef.setInput("class", "self-center h-auto");
+        this.#appRef.attachView(this.#loaderComponentRef.hostView);
+        const loaderElement = this.#loaderComponentRef.location.nativeElement;
+        this.#renderer.insertBefore(this.#hostElementRef.nativeElement, loaderElement, this.#hostElementRef.nativeElement.firstChild);
+    }
+    #removeLoader() {
+        if (this.#loaderComponentRef) {
+            this.#appRef.detachView(this.#loaderComponentRef.hostView);
+            this.#loaderComponentRef.destroy();
+            this.#loaderComponentRef = null;
+        }
+    }
+    #setSubscriptions() {
+        this.#buttonService?.buttonSelect$.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe(result => {
+            const [button, selected] = result;
+            if (button === this) {
+                this.selected.set(selected);
+            }
+        });
+    }
+    #setToggleableEvent() {
+        this.#toggleSubscription?.unsubscribe();
+        this.#toggleSubscription = fromEvent(this.#hostElementRef.nativeElement, "click")
+            .pipe(takeUntilDestroyed(this.#destroyRef), takeWhile(() => this.effectiveToggleable()))
+            .subscribe(() => {
+            if (this.effectiveDisabled()) {
+                return;
+            }
+            const wasSelected = this.selected();
+            if (this.#buttonService) {
+                this.#buttonService.buttonClick$.next([this, wasSelected]);
+            }
+            else {
+                this.selected.set(!this.selected());
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: ButtonDirective, isStandalone: true, selector: "button[monaButton]", inputs: { ariaHasPopup: { classPropertyName: "ariaHasPopup", publicName: "aria-haspopup", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", 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 }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: true, isRequired: false, transformFunction: null }, toggleable: { classPropertyName: "toggleable", publicName: "toggleable", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", loading: "loadingChange", look: "lookChange", selected: "selectedChange" }, host: { properties: { "attr.aria-busy": "loading() ? 'true' : undefined", "attr.aria-disabled": "effectiveDisabled() || loading() ? 'true' : undefined", "attr.aria-haspopup": "ariaHasPopup() !== 'false' ? ariaHasPopup() : null", "attr.aria-pressed": "effectiveToggleable() ? (selected() ? 'true' : 'false') : undefined", "attr.data-look": "effectiveLook()", "attr.data-size": "effectiveSize()", "attr.disabled": "effectiveDisabled() || loading() ? '' : undefined", "attr.tabindex": "effectiveDisabled() || loading() ? -1 : tabindex()", "attr.type": "'button'", "class": "baseClass()" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ButtonDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "button[monaButton]",
+                    host: {
+                        "[attr.aria-busy]": "loading() ? 'true' : undefined",
+                        "[attr.aria-disabled]": "effectiveDisabled() || loading() ? 'true' : undefined",
+                        "[attr.aria-haspopup]": "ariaHasPopup() !== 'false' ? ariaHasPopup() : null",
+                        "[attr.aria-pressed]": "effectiveToggleable() ? (selected() ? 'true' : 'false') : undefined",
+                        "[attr.data-look]": "effectiveLook()",
+                        "[attr.data-size]": "effectiveSize()",
+                        "[attr.disabled]": "effectiveDisabled() || loading() ? '' : undefined",
+                        "[attr.tabindex]": "effectiveDisabled() || loading() ? -1 : tabindex()",
+                        "[attr.type]": "'button'",
+                        "[class]": "baseClass()"
+                    }
+                }]
+        }], ctorParameters: () => [], propDecorators: { ariaHasPopup: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-haspopup", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], iconOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOnly", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }, { type: i0.Output, args: ["loadingChange"] }], look: [{ type: i0.Input, args: [{ isSignal: true, alias: "look", required: false }] }, { type: i0.Output, args: ["lookChange"] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }, { type: i0.Output, args: ["selectedChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], tabindex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabindex", required: false }] }], toggleable: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleable", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+/*
+ * Public API Surface of @nanahoshi/mona-ui/button
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ButtonDirective, ButtonService };
+//# sourceMappingURL=nanahoshi-mona-ui-button.mjs.map