@nanahoshi/mona-ui 0.13.1 → 0.14.0

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

@@ -0,0 +1,580 @@
+import * as i0 from '@angular/core';
+import { computed, input, Component, output, inject, ApplicationRef, DOCUMENT, Injector, RendererFactory2, createComponent, Injectable } from '@angular/core';
+import { LucideLoader, LucideDynamicIcon } from '@lucide/angular';
+import { classInputToClass } from '@nanahoshi/mona-ui/common';
+import { twMerge } from 'tailwind-merge';
+import { cva } from 'class-variance-authority';
+import { Subject, defer, finalize } from 'rxjs';
+import { v4 } from 'uuid';
+
+const spinnerThemeVariants = cva("inline-flex items-center justify-center flex-none aspect-square relative text-current select-none", {
+    variants: {
+        size: {
+            small: "w-3 h-3",
+            medium: "w-4 h-4",
+            large: "w-6 h-6"
+        }
+    },
+    defaultVariants: {
+        size: "medium"
+    }
+});
+
+/**
+ * @description
+ * An indeterminate loading indicator primitive for communicating ongoing activity.
+ * Supports multiple appearances, standard sizes, and accessible status announcements.
+ */
+class SpinnerComponent {
+    constructor() {
+        this.baseClass = computed(() => {
+            const variantClass = spinnerThemeVariants({ size: this.size() });
+            return twMerge(variantClass, this.userClass());
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
+        this.loaderIcon = LucideLoader;
+        this.pixelSize = computed(() => {
+            switch (this.size()) {
+                case "small":
+                    return 12;
+                case "large":
+                    return 24;
+                case "medium":
+                default:
+                    return 16;
+            }
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pixelSize" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Visual appearance of the spinner animation.
+         * @default "default"
+         */
+        this.appearance = input("default", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Accessible text announced by assistive technology when the spinner is not decorative.
+         * @default "Loading"
+         */
+        this.ariaLabel = input("Loading", { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: "aria-label" });
+        /**
+         * @description When `true`, removes the `status` role and hides the spinner from assistive technology with `aria-hidden="true"`.
+         * Useful when a parent element already manages loading semantics (such as `aria-busy="true"` on a button).
+         * @default false
+         */
+        this.decorative = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "decorative" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Size preset controlling the dimensions of the indicator.
+         * @default "medium"
+         */
+        this.size = input("medium", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "size" }] : /* 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",
+            transform: value => classInputToClass(value) });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: SpinnerComponent, isStandalone: true, selector: "mona-spinner", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, decorative: { classPropertyName: "decorative", publicName: "decorative", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.aria-hidden": "decorative() ? 'true' : null", "attr.aria-label": "decorative() ? null : (ariaLabel() || 'Loading')", "attr.role": "decorative() ? null : 'status'", "class": "baseClass()" } }, ngImport: i0, template: "@switch (appearance()) {\n    @case (\"default\") {\n        <svg [lucideIcon]=\"loaderIcon\" [size]=\"pixelSize()\" class=\"animate-[spin_1.5s_linear_infinite] motion-reduce:animate-none\"></svg>\n    }\n    @case (\"pulsing\") {\n        <span class=\"mona-spinner-pulsing-container\">\n            <span data-segment class=\"mona-spinner-pulsing-segment mona-spinner-pulsing-1\"></span>\n            <span data-segment class=\"mona-spinner-pulsing-segment mona-spinner-pulsing-2\"></span>\n        </span>\n    }\n    @case (\"pulsing-triad\") {\n        <span class=\"mona-spinner-pulsing-triad-container\">\n            <span data-segment class=\"mona-spinner-pulsing-triad-segment mona-spinner-pulsing-triad-1\"></span>\n            <span data-segment class=\"mona-spinner-pulsing-triad-segment mona-spinner-pulsing-triad-2\"></span>\n            <span data-segment class=\"mona-spinner-pulsing-triad-segment mona-spinner-pulsing-triad-3\"></span>\n        </span>\n    }\n    @case (\"pulsing-ring\") {\n        <span class=\"mona-spinner-pulsing-ring-container\">\n            <span data-segment class=\"mona-spinner-pulsing-ring-segment mona-spinner-pulsing-ring-1\"></span>\n            <span data-segment class=\"mona-spinner-pulsing-ring-segment mona-spinner-pulsing-ring-2\"></span>\n            <span data-segment class=\"mona-spinner-pulsing-ring-segment mona-spinner-pulsing-ring-3\"></span>\n            <span data-segment class=\"mona-spinner-pulsing-ring-segment mona-spinner-pulsing-ring-4\"></span>\n            <span data-segment class=\"mona-spinner-pulsing-ring-segment mona-spinner-pulsing-ring-5\"></span>\n            <span data-segment class=\"mona-spinner-pulsing-ring-segment mona-spinner-pulsing-ring-6\"></span>\n            <span data-segment class=\"mona-spinner-pulsing-ring-segment mona-spinner-pulsing-ring-7\"></span>\n            <span data-segment class=\"mona-spinner-pulsing-ring-segment mona-spinner-pulsing-ring-8\"></span>\n        </span>\n    }\n    @case (\"converging-spinner\") {\n        <span class=\"mona-spinner-converge-container\">\n            <span data-segment class=\"mona-spinner-converge-segment mona-spinner-converge-1\"></span>\n            <span data-segment class=\"mona-spinner-converge-segment mona-spinner-converge-2\"></span>\n            <span data-segment class=\"mona-spinner-converge-segment mona-spinner-converge-3\"></span>\n            <span data-segment class=\"mona-spinner-converge-segment mona-spinner-converge-4\"></span>\n        </span>\n    }\n}\n", styles: [":host{display:inline-flex;vertical-align:middle}.mona-spinner-pulsing-container{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}.mona-spinner-pulsing-segment{position:absolute;inset:0;border-radius:9999px;background-color:currentColor;opacity:.6;animation:mona-spinner-pulse 1.2s cubic-bezier(0,.2,.8,1) infinite}.mona-spinner-pulsing-2{animation-delay:-.6s}@keyframes mona-spinner-pulse{0%{transform:scale(.1);opacity:.9}50%{transform:scale(.6);opacity:.5}to{transform:scale(1);opacity:0}}.mona-spinner-pulsing-triad-container{position:relative;width:100%;height:100%}.mona-spinner-pulsing-triad-segment{position:absolute;width:32%;height:32%;border-radius:9999px;background-color:currentColor;animation:mona-spinner-dot-pulse 1.4s ease-in-out infinite}.mona-spinner-pulsing-triad-1{top:0;left:34%;animation-delay:-.933s}.mona-spinner-pulsing-triad-2{bottom:0;left:0;animation-delay:-.467s}.mona-spinner-pulsing-triad-3{bottom:0;right:0;animation-delay:0s}@keyframes mona-spinner-dot-pulse{0%,to{transform:scale(.4);opacity:.4}50%{transform:scale(1);opacity:1}}.mona-spinner-pulsing-ring-container{position:relative;width:100%;height:100%}.mona-spinner-pulsing-ring-segment{position:absolute;width:22%;height:22%;border-radius:9999px;background-color:currentColor;animation:mona-spinner-dot-pulse 1.6s ease-in-out infinite}.mona-spinner-pulsing-ring-1{top:5%;left:39%;animation-delay:0s}.mona-spinner-pulsing-ring-2{top:14.96%;left:63.04%;animation-delay:-.2s}.mona-spinner-pulsing-ring-3{top:39%;left:73%;animation-delay:-.4s}.mona-spinner-pulsing-ring-4{top:63.04%;left:63.04%;animation-delay:-.6s}.mona-spinner-pulsing-ring-5{top:73%;left:39%;animation-delay:-.8s}.mona-spinner-pulsing-ring-6{top:63.04%;left:14.96%;animation-delay:-1s}.mona-spinner-pulsing-ring-7{top:39%;left:5%;animation-delay:-1.2s}.mona-spinner-pulsing-ring-8{top:14.96%;left:14.96%;animation-delay:-1.4s}.mona-spinner-converge-container{position:relative;width:100%;height:100%;animation:mona-spinner-rotate 1.5s linear infinite}.mona-spinner-converge-segment{position:absolute;width:32%;height:32%;border-radius:9999px;background-color:currentColor;animation:mona-spinner-converge 1.5s ease-in-out infinite}.mona-spinner-converge-1{top:0;left:0}.mona-spinner-converge-2{top:0;right:0}.mona-spinner-converge-3{bottom:0;right:0}.mona-spinner-converge-4{bottom:0;left:0}@keyframes mona-spinner-rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes mona-spinner-converge{0%,to{transform:scale(1)}50%{transform:scale(.4)}}@media(prefers-reduced-motion:reduce){.mona-spinner-pulsing-segment,.mona-spinner-pulsing-triad-segment,.mona-spinner-pulsing-ring-segment,.mona-spinner-converge-container,.mona-spinner-converge-segment{animation:none!important}.mona-spinner-pulsing-segment{opacity:.6;transform:scale(.85)}.mona-spinner-pulsing-2{opacity:.3;transform:scale(.5)}.mona-spinner-pulsing-triad-segment,.mona-spinner-pulsing-ring-segment{opacity:.7;transform:scale(.8)}}\n"], dependencies: [{ kind: "component", type: LucideDynamicIcon, selector: "svg[lucideIcon]", inputs: ["lucideIcon"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SpinnerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mona-spinner", imports: [LucideDynamicIcon], host: {
+                        "[attr.aria-hidden]": "decorative() ? 'true' : null",
+                        "[attr.aria-label]": "decorative() ? null : (ariaLabel() || 'Loading')",
+                        "[attr.role]": "decorative() ? null : 'status'",
+                        "[class]": "baseClass()"
+                    }, template: "@switch (appearance()) {\n    @case (\"default\") {\n        <svg [lucideIcon]=\"loaderIcon\" [size]=\"pixelSize()\" class=\"animate-[spin_1.5s_linear_infinite] motion-reduce:animate-none\"></svg>\n    }\n    @case (\"pulsing\") {\n        <span class=\"mona-spinner-pulsing-container\">\n            <span data-segment class=\"mona-spinner-pulsing-segment mona-spinner-pulsing-1\"></span>\n            <span data-segment class=\"mona-spinner-pulsing-segment mona-spinner-pulsing-2\"></span>\n        </span>\n    }\n    @case (\"pulsing-triad\") {\n        <span class=\"mona-spinner-pulsing-triad-container\">\n            <span data-segment class=\"mona-spinner-pulsing-triad-segment mona-spinner-pulsing-triad-1\"></span>\n            <span data-segment class=\"mona-spinner-pulsing-triad-segment mona-spinner-pulsing-triad-2\"></span>\n            <span data-segment class=\"mona-spinner-pulsing-triad-segment mona-spinner-pulsing-triad-3\"></span>\n        </span>\n    }\n    @case (\"pulsing-ring\") {\n        <span class=\"mona-spinner-pulsing-ring-container\">\n            <span data-segment class=\"mona-spinner-pulsing-ring-segment mona-spinner-pulsing-ring-1\"></span>\n            <span data-segment class=\"mona-spinner-pulsing-ring-segment mona-spinner-pulsing-ring-2\"></span>\n            <span data-segment class=\"mona-spinner-pulsing-ring-segment mona-spinner-pulsing-ring-3\"></span>\n            <span data-segment class=\"mona-spinner-pulsing-ring-segment mona-spinner-pulsing-ring-4\"></span>\n            <span data-segment class=\"mona-spinner-pulsing-ring-segment mona-spinner-pulsing-ring-5\"></span>\n            <span data-segment class=\"mona-spinner-pulsing-ring-segment mona-spinner-pulsing-ring-6\"></span>\n            <span data-segment class=\"mona-spinner-pulsing-ring-segment mona-spinner-pulsing-ring-7\"></span>\n            <span data-segment class=\"mona-spinner-pulsing-ring-segment mona-spinner-pulsing-ring-8\"></span>\n        </span>\n    }\n    @case (\"converging-spinner\") {\n        <span class=\"mona-spinner-converge-container\">\n            <span data-segment class=\"mona-spinner-converge-segment mona-spinner-converge-1\"></span>\n            <span data-segment class=\"mona-spinner-converge-segment mona-spinner-converge-2\"></span>\n            <span data-segment class=\"mona-spinner-converge-segment mona-spinner-converge-3\"></span>\n            <span data-segment class=\"mona-spinner-converge-segment mona-spinner-converge-4\"></span>\n        </span>\n    }\n}\n", styles: [":host{display:inline-flex;vertical-align:middle}.mona-spinner-pulsing-container{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}.mona-spinner-pulsing-segment{position:absolute;inset:0;border-radius:9999px;background-color:currentColor;opacity:.6;animation:mona-spinner-pulse 1.2s cubic-bezier(0,.2,.8,1) infinite}.mona-spinner-pulsing-2{animation-delay:-.6s}@keyframes mona-spinner-pulse{0%{transform:scale(.1);opacity:.9}50%{transform:scale(.6);opacity:.5}to{transform:scale(1);opacity:0}}.mona-spinner-pulsing-triad-container{position:relative;width:100%;height:100%}.mona-spinner-pulsing-triad-segment{position:absolute;width:32%;height:32%;border-radius:9999px;background-color:currentColor;animation:mona-spinner-dot-pulse 1.4s ease-in-out infinite}.mona-spinner-pulsing-triad-1{top:0;left:34%;animation-delay:-.933s}.mona-spinner-pulsing-triad-2{bottom:0;left:0;animation-delay:-.467s}.mona-spinner-pulsing-triad-3{bottom:0;right:0;animation-delay:0s}@keyframes mona-spinner-dot-pulse{0%,to{transform:scale(.4);opacity:.4}50%{transform:scale(1);opacity:1}}.mona-spinner-pulsing-ring-container{position:relative;width:100%;height:100%}.mona-spinner-pulsing-ring-segment{position:absolute;width:22%;height:22%;border-radius:9999px;background-color:currentColor;animation:mona-spinner-dot-pulse 1.6s ease-in-out infinite}.mona-spinner-pulsing-ring-1{top:5%;left:39%;animation-delay:0s}.mona-spinner-pulsing-ring-2{top:14.96%;left:63.04%;animation-delay:-.2s}.mona-spinner-pulsing-ring-3{top:39%;left:73%;animation-delay:-.4s}.mona-spinner-pulsing-ring-4{top:63.04%;left:63.04%;animation-delay:-.6s}.mona-spinner-pulsing-ring-5{top:73%;left:39%;animation-delay:-.8s}.mona-spinner-pulsing-ring-6{top:63.04%;left:14.96%;animation-delay:-1s}.mona-spinner-pulsing-ring-7{top:39%;left:5%;animation-delay:-1.2s}.mona-spinner-pulsing-ring-8{top:14.96%;left:14.96%;animation-delay:-1.4s}.mona-spinner-converge-container{position:relative;width:100%;height:100%;animation:mona-spinner-rotate 1.5s linear infinite}.mona-spinner-converge-segment{position:absolute;width:32%;height:32%;border-radius:9999px;background-color:currentColor;animation:mona-spinner-converge 1.5s ease-in-out infinite}.mona-spinner-converge-1{top:0;left:0}.mona-spinner-converge-2{top:0;right:0}.mona-spinner-converge-3{bottom:0;right:0}.mona-spinner-converge-4{bottom:0;left:0}@keyframes mona-spinner-rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes mona-spinner-converge{0%,to{transform:scale(1)}50%{transform:scale(.4)}}@media(prefers-reduced-motion:reduce){.mona-spinner-pulsing-segment,.mona-spinner-pulsing-triad-segment,.mona-spinner-pulsing-ring-segment,.mona-spinner-converge-container,.mona-spinner-converge-segment{animation:none!important}.mona-spinner-pulsing-segment{opacity:.6;transform:scale(.85)}.mona-spinner-pulsing-2{opacity:.3;transform:scale(.5)}.mona-spinner-pulsing-triad-segment,.mona-spinner-pulsing-ring-segment{opacity:.7;transform:scale(.8)}}\n"] }]
+        }], propDecorators: { appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], decorative: [{ type: i0.Input, args: [{ isSignal: true, alias: "decorative", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+const spinnerOverlayThemeVariants = cva(`
+        isolate flex items-center justify-center
+        pointer-events-auto select-none
+        bg-background/60 backdrop-blur-xs
+        text-foreground
+    `, {
+    variants: {
+        fullPage: {
+            true: "fixed inset-0 z-50",
+            false: "absolute inset-0 z-1"
+        }
+    },
+    defaultVariants: {
+        fullPage: false
+    }
+});
+
+/**
+ * @description
+ * Internal overlay component managed exclusively by `SpinnerService`.
+ * Hosts a decorative `SpinnerComponent`, status message, and optional cancellation control.
+ */
+class SpinnerOverlayComponent {
+    constructor() {
+        this.baseClass = computed(() => {
+            return spinnerOverlayThemeVariants({ fullPage: this.fullPage() });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
+        this.effectiveZIndex = computed(() => {
+            const customZIndex = this.zIndex();
+            if (customZIndex !== undefined) {
+                return customZIndex;
+            }
+            return this.fullPage() ? 50 : 1;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "effectiveZIndex" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Visual appearance of the nested spinner animation.
+         * @default "default"
+         */
+        this.appearance = input("default", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Emits when the consumer clicks the cancellation action button.
+         */
+        this.cancel = output();
+        /**
+         * @description Whether the cancellation button is displayed in the overlay.
+         * @default false
+         */
+        this.cancellable = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "cancellable" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Label text displayed inside the cancellation button.
+         * @default "Cancel"
+         */
+        this.cancelText = input("Cancel", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "cancelText" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Whether the overlay is fixed across the viewport or absolute within a target container.
+         * @default false
+         */
+        this.fullPage = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "fullPage" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Size preset passed to the nested spinner.
+         * @default "medium"
+         */
+        this.size = input("medium", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Status text displayed below the spinner indicator.
+         * @default undefined
+         */
+        this.text = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Custom z-index value for unusual stacking contexts.
+         * @default undefined
+         */
+        this.zIndex = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "zIndex" }] : /* istanbul ignore next */ []));
+    }
+    onCancel() {
+        this.cancel.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SpinnerOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: SpinnerOverlayComponent, isStandalone: true, selector: "mona-spinner-overlay", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, cancellable: { classPropertyName: "cancellable", publicName: "cancellable", isSignal: true, isRequired: false, transformFunction: null }, cancelText: { classPropertyName: "cancelText", publicName: "cancelText", isSignal: true, isRequired: false, transformFunction: null }, fullPage: { classPropertyName: "fullPage", publicName: "fullPage", 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 }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cancel: "cancel" }, host: { properties: { "class": "baseClass()", "style.z-index": "effectiveZIndex()" } }, ngImport: i0, template: "<div class=\"flex flex-col items-center justify-center gap-2.5 p-4 text-sm font-medium text-foreground text-center\" role=\"status\" aria-live=\"polite\">\n    <mona-spinner [appearance]=\"appearance()\" [size]=\"size()\" [decorative]=\"true\"></mona-spinner>\n\n    @if (text()) {\n        <span class=\"max-w-xs truncate\">{{ text() }}</span>\n    } @else {\n        <span class=\"sr-only\">Loading</span>\n    }\n\n    @if (cancellable()) {\n        <button\n            type=\"button\"\n            (click)=\"onCancel()\"\n            class=\"mt-1 inline-flex items-center justify-center rounded-md border border-border bg-background px-2.5 py-1 text-xs font-medium text-foreground shadow-xs hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring cursor-pointer transition-colors\"\n        >\n            {{ cancelText() }}\n        </button>\n    }\n</div>\n", dependencies: [{ kind: "component", type: SpinnerComponent, selector: "mona-spinner", inputs: ["appearance", "aria-label", "decorative", "size", "class"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SpinnerOverlayComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mona-spinner-overlay", imports: [SpinnerComponent], host: {
+                        "[class]": "baseClass()",
+                        "[style.z-index]": "effectiveZIndex()"
+                    }, template: "<div class=\"flex flex-col items-center justify-center gap-2.5 p-4 text-sm font-medium text-foreground text-center\" role=\"status\" aria-live=\"polite\">\n    <mona-spinner [appearance]=\"appearance()\" [size]=\"size()\" [decorative]=\"true\"></mona-spinner>\n\n    @if (text()) {\n        <span class=\"max-w-xs truncate\">{{ text() }}</span>\n    } @else {\n        <span class=\"sr-only\">Loading</span>\n    }\n\n    @if (cancellable()) {\n        <button\n            type=\"button\"\n            (click)=\"onCancel()\"\n            class=\"mt-1 inline-flex items-center justify-center rounded-md border border-border bg-background px-2.5 py-1 text-xs font-medium text-foreground shadow-xs hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring cursor-pointer transition-colors\"\n        >\n            {{ cancelText() }}\n        </button>\n    }\n</div>\n" }]
+        }], propDecorators: { appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], cancel: [{ type: i0.Output, args: ["cancel"] }], cancellable: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancellable", required: false }] }], cancelText: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelText", required: false }] }], fullPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullPage", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], zIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "zIndex", required: false }] }] } });
+
+class SpinnerService {
+    #appRef = inject(ApplicationRef);
+    #document = inject(DOCUMENT);
+    #injector = inject(Injector);
+    #renderer = inject(RendererFactory2).createRenderer(null, null);
+    #requests = new Map();
+    #targetStates = new Set();
+    #targets = new WeakMap();
+    /**
+     * Hides and destroys the spinner associated with the given `SpinnerRef` or string `id`.
+     */
+    hide(refOrId) {
+        const id = typeof refOrId === "string" ? refOrId : refOrId.id;
+        this.#closeRequest(id);
+    }
+    /**
+     * Tears down every active/pending spinner request and physical overlay so
+     * nothing is left behind if the service outlives its consumers.
+     */
+    ngOnDestroy() {
+        for (const request of this.#requests.values()) {
+            if (request.delayTimer != null) {
+                clearTimeout(request.delayTimer);
+                request.delayTimer = null;
+            }
+            if (!request.cancellationHandled) {
+                request.cancelledSubject.complete();
+            }
+        }
+        this.#requests.clear();
+        for (const targetState of this.#targetStates) {
+            if (targetState.minDurationTimer != null) {
+                clearTimeout(targetState.minDurationTimer);
+                targetState.minDurationTimer = null;
+            }
+            targetState.cancelSubscription?.unsubscribe();
+            targetState.cancelSubscription = null;
+            if (targetState.componentRef != null) {
+                this.#appRef.detachView(targetState.componentRef.hostView);
+                targetState.componentRef.destroy();
+                targetState.componentRef = null;
+            }
+        }
+        this.#targetStates.clear();
+    }
+    /**
+     * Displays a spinner loading overlay according to the provided options.
+     * Returns a `SpinnerRef` handle for lifecycle management and updates.
+     */
+    show(options) {
+        const id = options?.id ?? `spinner-${v4()}`;
+        // If an existing request with the same ID exists, close it cleanly first
+        if (this.#requests.has(id)) {
+            this.#closeRequest(id);
+        }
+        const targets = this.#normalizeTargets(options?.target);
+        const isFullPage = !options?.target || targets.length === 0;
+        const resolvedTargets = isFullPage ? [this.#document.body] : targets;
+        const cancellableOpt = options?.cancellable;
+        const isCancellable = !!cancellableOpt;
+        const cancelText = typeof cancellableOpt === "object" && cancellableOpt.text ? cancellableOpt.text : "Cancel";
+        const onCancel = typeof cancellableOpt === "object" ? cancellableOpt.onCancel : undefined;
+        const cancelledSubject = new Subject();
+        const request = {
+            activatedAt: Date.now(),
+            appearance: options?.appearance ?? "default",
+            cancellationHandled: false,
+            cancellable: isCancellable,
+            cancelText,
+            delayTimer: null,
+            id,
+            isFullPage,
+            onCancel,
+            options: options ?? {},
+            registeredAt: Date.now(),
+            size: options?.size ?? "medium",
+            status: "PENDING",
+            cancelledSubject,
+            targets: resolvedTargets,
+            text: options?.text
+        };
+        this.#requests.set(id, request);
+        // Register request against all targets and set aria-busy. Targets that already
+        // have a visible overlay activate immediately; idle targets respect `delay`.
+        const immediateTargets = [];
+        const delayedTargets = [];
+        for (const target of resolvedTargets) {
+            const targetState = this.#getOrCreateTargetState(target, isFullPage);
+            targetState.pendingRequestIds.add(id);
+            if (targetState.componentRef != null) {
+                immediateTargets.push(target);
+            }
+            else {
+                delayedTargets.push(target);
+            }
+        }
+        if (immediateTargets.length > 0) {
+            this.#activateRequestOnTargets(request, immediateTargets);
+        }
+        const delay = options?.delay ?? 0;
+        if (delayedTargets.length > 0) {
+            if (delay > 0) {
+                request.delayTimer = setTimeout(() => {
+                    request.delayTimer = null;
+                    if (request.status !== "CLOSED") {
+                        this.#activateRequestOnTargets(request, delayedTargets);
+                    }
+                }, delay);
+            }
+            else {
+                this.#activateRequestOnTargets(request, delayedTargets);
+            }
+        }
+        return {
+            id,
+            cancelled$: cancelledSubject.asObservable(),
+            close: () => this.#closeRequest(id),
+            update: update => this.#updateRequest(id, update)
+        };
+    }
+    /**
+     * Wraps an Observable operation with a Spinner lifecycle.
+     * Shows the spinner on subscription and closes it when the observable completes, errors, or is unsubscribed.
+     */
+    track(source, options) {
+        return defer(() => {
+            const ref = this.show(options);
+            return source.pipe(finalize(() => ref.close()));
+        });
+    }
+    #activateRequestOnTargets(request, targets) {
+        if (request.status === "CLOSED") {
+            return;
+        }
+        request.status = "VISIBLE";
+        request.activatedAt = Date.now();
+        for (const target of targets) {
+            const targetState = this.#getOrCreateTargetState(target, request.isFullPage);
+            targetState.activeRequestIds.add(request.id);
+            this.#updateTargetOverlay(targetState);
+        }
+    }
+    #cancelRequest(requestId) {
+        const request = this.#requests.get(requestId);
+        if (!request || request.cancellationHandled || request.status === "CLOSED") {
+            return;
+        }
+        request.cancellationHandled = true;
+        request.cancelledSubject.next();
+        request.cancelledSubject.complete();
+        try {
+            if (request.onCancel) {
+                request.onCancel();
+            }
+        }
+        finally {
+            this.#closeRequest(requestId);
+        }
+    }
+    #closeRequest(requestId) {
+        const request = this.#requests.get(requestId);
+        if (!request || request.status === "CLOSED") {
+            return;
+        }
+        request.status = "CLOSED";
+        if (request.delayTimer != null) {
+            clearTimeout(request.delayTimer);
+            request.delayTimer = null;
+        }
+        if (!request.cancellationHandled) {
+            request.cancelledSubject.complete();
+        }
+        this.#requests.delete(requestId);
+        for (const target of request.targets) {
+            const targetState = this.#targets.get(target);
+            if (!targetState) {
+                continue;
+            }
+            targetState.pendingRequestIds.delete(requestId);
+            targetState.activeRequestIds.delete(requestId);
+            if (targetState.activeRequestIds.size > 0) {
+                // Other active requests remain; recompute winning presentation
+                this.#updateTargetOverlay(targetState);
+            }
+            else if (targetState.pendingRequestIds.size === 0) {
+                // No active or pending requests remain on this target
+                const minDuration = request.options.minimumVisibleDuration ?? 0;
+                if (minDuration > 0 && targetState.visibleSince != null && targetState.componentRef != null) {
+                    const elapsed = Date.now() - targetState.visibleSince;
+                    const remaining = minDuration - elapsed;
+                    if (remaining > 0) {
+                        if (targetState.minDurationTimer != null) {
+                            clearTimeout(targetState.minDurationTimer);
+                        }
+                        targetState.minDurationTimer = setTimeout(() => {
+                            targetState.minDurationTimer = null;
+                            if (targetState.activeRequestIds.size === 0 && targetState.pendingRequestIds.size === 0) {
+                                this.#teardownTarget(targetState);
+                            }
+                        }, remaining);
+                    }
+                    else {
+                        this.#teardownTarget(targetState);
+                    }
+                }
+                else {
+                    this.#teardownTarget(targetState);
+                }
+            }
+        }
+    }
+    #getOrCreateTargetState(target, isFullPage) {
+        let state = this.#targets.get(target);
+        if (!state) {
+            const originalAriaBusy = target.getAttribute("aria-busy");
+            const originalInlinePosition = target.style.position;
+            state = {
+                activeRequestIds: new Set(),
+                cancelSubscription: null,
+                changedPosition: false,
+                componentRef: null,
+                isFullPage,
+                minDurationTimer: null,
+                originalAriaBusy,
+                originalInlinePosition,
+                pendingRequestIds: new Set(),
+                target
+            };
+            this.#targets.set(target, state);
+            this.#targetStates.add(state);
+        }
+        // Apply aria-busy immediately while logically busy
+        this.#renderer.setAttribute(target, "aria-busy", "true");
+        // If a delayed teardown was pending, cancel it since new activity arrived
+        if (state.minDurationTimer != null) {
+            clearTimeout(state.minDurationTimer);
+            state.minDurationTimer = null;
+        }
+        return state;
+    }
+    #getWinningRequestForTarget(targetState) {
+        let winningRequest = null;
+        for (const requestId of targetState.activeRequestIds) {
+            const req = this.#requests.get(requestId);
+            if (req && req.status === "VISIBLE") {
+                if (!winningRequest || req.activatedAt >= winningRequest.activatedAt) {
+                    winningRequest = req;
+                }
+            }
+        }
+        return winningRequest;
+    }
+    #normalizeTargets(target) {
+        if (!target) {
+            return [];
+        }
+        const rawList = Array.isArray(target) ? target : [target];
+        const result = [];
+        for (const item of rawList) {
+            if (item instanceof HTMLElement) {
+                result.push(item);
+            }
+            else if (item && typeof item === "object" && "nativeElement" in item && item.nativeElement instanceof HTMLElement) {
+                result.push(item.nativeElement);
+            }
+        }
+        return result;
+    }
+    #teardownTarget(targetState) {
+        if (targetState.minDurationTimer != null) {
+            clearTimeout(targetState.minDurationTimer);
+            targetState.minDurationTimer = null;
+        }
+        targetState.cancelSubscription?.unsubscribe();
+        targetState.cancelSubscription = null;
+        if (targetState.componentRef != null) {
+            this.#appRef.detachView(targetState.componentRef.hostView);
+            targetState.componentRef.destroy();
+            targetState.componentRef = null;
+        }
+        targetState.visibleSince = undefined;
+        // Restore aria-busy attribute exactly
+        if (targetState.originalAriaBusy === null) {
+            this.#renderer.removeAttribute(targetState.target, "aria-busy");
+        }
+        else {
+            this.#renderer.setAttribute(targetState.target, "aria-busy", targetState.originalAriaBusy);
+        }
+        // Restore target positioning safely
+        if (targetState.changedPosition) {
+            if (targetState.target.style.position === "relative") {
+                this.#renderer.setStyle(targetState.target, "position", targetState.originalInlinePosition || null);
+            }
+            targetState.changedPosition = false;
+        }
+    }
+    #updateRequest(requestId, update) {
+        const request = this.#requests.get(requestId);
+        if (!request || request.status === "CLOSED") {
+            return;
+        }
+        if (update.appearance !== undefined) {
+            request.appearance = update.appearance;
+        }
+        if (update.size !== undefined) {
+            request.size = update.size;
+        }
+        if (update.text !== undefined) {
+            request.text = update.text;
+        }
+        for (const target of request.targets) {
+            const targetState = this.#targets.get(target);
+            if (targetState) {
+                this.#updateTargetOverlay(targetState);
+            }
+        }
+    }
+    #updateTargetOverlay(targetState) {
+        const winner = this.#getWinningRequestForTarget(targetState);
+        if (!winner) {
+            return;
+        }
+        if (!targetState.componentRef) {
+            // Need containing block for absolute local positioning
+            if (!targetState.isFullPage) {
+                const defaultView = this.#document.defaultView;
+                const computedPosition = defaultView ? defaultView.getComputedStyle(targetState.target).position : "static";
+                if (computedPosition === "static") {
+                    this.#renderer.setStyle(targetState.target, "position", "relative");
+                    targetState.changedPosition = true;
+                }
+            }
+            const compRef = createComponent(SpinnerOverlayComponent, {
+                environmentInjector: this.#appRef.injector,
+                elementInjector: this.#injector
+            });
+            compRef.setInput("appearance", winner.appearance);
+            compRef.setInput("size", winner.size);
+            compRef.setInput("text", winner.text);
+            compRef.setInput("cancellable", winner.cancellable);
+            compRef.setInput("cancelText", winner.cancelText);
+            compRef.setInput("fullPage", targetState.isFullPage);
+            if (winner.options.zIndex !== undefined) {
+                compRef.setInput("zIndex", winner.options.zIndex);
+            }
+            targetState.cancelSubscription = compRef.instance.cancel.subscribe(() => {
+                const currentWinner = this.#getWinningRequestForTarget(targetState);
+                if (currentWinner) {
+                    this.#cancelRequest(currentWinner.id);
+                }
+            });
+            this.#appRef.attachView(compRef.hostView);
+            this.#renderer.appendChild(targetState.target, compRef.location.nativeElement);
+            compRef.changeDetectorRef.detectChanges();
+            targetState.componentRef = compRef;
+            targetState.visibleSince = Date.now();
+        }
+        else {
+            // Physical overlay already exists: update its inputs dynamically
+            const compRef = targetState.componentRef;
+            compRef.setInput("appearance", winner.appearance);
+            compRef.setInput("size", winner.size);
+            compRef.setInput("text", winner.text);
+            compRef.setInput("cancellable", winner.cancellable);
+            compRef.setInput("cancelText", winner.cancelText);
+            compRef.setInput("fullPage", targetState.isFullPage);
+            if (winner.options.zIndex !== undefined) {
+                compRef.setInput("zIndex", winner.options.zIndex);
+            }
+            compRef.changeDetectorRef.detectChanges();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SpinnerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SpinnerService, providedIn: "root" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SpinnerService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: "root"
+                }]
+        }] });
+
+/*
+ * Public API Surface of @nanahoshi/mona-ui/spinner
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SpinnerComponent, SpinnerService };
+//# sourceMappingURL=nanahoshi-mona-ui-spinner.mjs.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nanahoshi/mona-ui",
-  "version": "0.13.1",
+  "version": "0.14.0",
   "description": "A very light Angular UI framework",
   "author": "Nanahoshi",
   "repository": {
@@ -289,6 +289,10 @@
       "types": "./types/nanahoshi-mona-ui-slider.d.ts",
       "default": "./fesm2022/nanahoshi-mona-ui-slider.mjs"
     },
+    "./spinner": {
+      "types": "./types/nanahoshi-mona-ui-spinner.d.ts",
+      "default": "./fesm2022/nanahoshi-mona-ui-spinner.mjs"
+    },
     "./split-button": {
       "types": "./types/nanahoshi-mona-ui-split-button.d.ts",
       "default": "./fesm2022/nanahoshi-mona-ui-split-button.mjs"

package/spinner/package.json

@@ -0,0 +1,4 @@
+{
+  "module": "../fesm2022/nanahoshi-mona-ui-spinner.mjs",
+  "typings": "../types/nanahoshi-mona-ui-spinner.d.ts"
+}

package/types/nanahoshi-mona-ui-spinner.d.ts

@@ -0,0 +1,114 @@
+import * as _angular_core from '@angular/core';
+import { ElementRef, OnDestroy } from '@angular/core';
+import { LucideLoader } from '@lucide/angular';
+import { ClassInputType } from '@nanahoshi/mona-ui/common';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+import { VariantInputs } from '@nanahoshi/mona-ui/internal';
+import { Observable } from 'rxjs';
+
+type SpinnerAppearance = "default" | "pulsing" | "pulsing-triad" | "pulsing-ring" | "converging-spinner";
+
+type SpinnerSize = "small" | "medium" | "large";
+
+declare const spinnerThemeVariants: (props?: ({
+    size?: "small" | "medium" | "large" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type SpinnerVariantProps = VariantProps<typeof spinnerThemeVariants>;
+type SpinnerVariantInput = VariantInputs<SpinnerVariantProps>;
+
+/**
+ * @description
+ * An indeterminate loading indicator primitive for communicating ongoing activity.
+ * Supports multiple appearances, standard sizes, and accessible status announcements.
+ */
+declare class SpinnerComponent implements SpinnerVariantInput {
+    protected readonly baseClass: _angular_core.Signal<string>;
+    protected readonly loaderIcon: typeof LucideLoader;
+    protected readonly pixelSize: _angular_core.Signal<12 | 24 | 16>;
+    /**
+     * @description Visual appearance of the spinner animation.
+     * @default "default"
+     */
+    readonly appearance: _angular_core.InputSignal<SpinnerAppearance>;
+    /**
+     * @description Accessible text announced by assistive technology when the spinner is not decorative.
+     * @default "Loading"
+     */
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    /**
+     * @description When `true`, removes the `status` role and hides the spinner from assistive technology with `aria-hidden="true"`.
+     * Useful when a parent element already manages loading semantics (such as `aria-busy="true"` on a button).
+     * @default false
+     */
+    readonly decorative: _angular_core.InputSignal<boolean>;
+    /**
+     * @description Size preset controlling the dimensions of the indicator.
+     * @default "medium"
+     */
+    readonly size: _angular_core.InputSignal<SpinnerSize>;
+    /**
+     * @description Additional CSS classes merged onto the host element via `tailwind-merge`.
+     * @default ""
+     */
+    readonly userClass: _angular_core.InputSignalWithTransform<string, ClassInputType>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SpinnerComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SpinnerComponent, "mona-spinner", never, { "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "decorative": { "alias": "decorative"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+interface SpinnerCancelOptions {
+    onCancel?: () => void;
+    text?: string;
+}
+interface SpinnerOptions {
+    appearance?: SpinnerAppearance;
+    cancellable?: boolean | SpinnerCancelOptions;
+    delay?: number;
+    id?: string;
+    minimumVisibleDuration?: number;
+    size?: SpinnerSize;
+    target?: HTMLElement | ElementRef<HTMLElement> | readonly (HTMLElement | ElementRef<HTMLElement>)[];
+    text?: string;
+    zIndex?: number;
+}
+
+interface SpinnerUpdate {
+    appearance?: SpinnerAppearance;
+    size?: SpinnerSize;
+    text?: string;
+}
+
+interface SpinnerRef {
+    readonly cancelled$: Observable<void>;
+    readonly id: string;
+    close(): void;
+    update(update: SpinnerUpdate): void;
+}
+
+declare class SpinnerService implements OnDestroy {
+    #private;
+    /**
+     * Hides and destroys the spinner associated with the given `SpinnerRef` or string `id`.
+     */
+    hide(refOrId: SpinnerRef | string): void;
+    /**
+     * Tears down every active/pending spinner request and physical overlay so
+     * nothing is left behind if the service outlives its consumers.
+     */
+    ngOnDestroy(): void;
+    /**
+     * Displays a spinner loading overlay according to the provided options.
+     * Returns a `SpinnerRef` handle for lifecycle management and updates.
+     */
+    show(options?: SpinnerOptions): SpinnerRef;
+    /**
+     * Wraps an Observable operation with a Spinner lifecycle.
+     * Shows the spinner on subscription and closes it when the observable completes, errors, or is unsubscribed.
+     */
+    track<T>(source: Observable<T>, options?: SpinnerOptions): Observable<T>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SpinnerService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<SpinnerService>;
+}
+
+export { SpinnerComponent, SpinnerService };
+export type { SpinnerAppearance, SpinnerCancelOptions, SpinnerOptions, SpinnerRef, SpinnerSize, SpinnerUpdate, SpinnerVariantProps };