@nanahoshi/mona-ui 0.1.0

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

@@ -0,0 +1,536 @@
+import * as i0 from '@angular/core';
+import { inject, DestroyRef, computed, signal, TemplateRef, viewChild, ViewContainerRef, input, afterNextRender, Component, ApplicationRef, DOCUMENT as DOCUMENT$1, createComponent, Injectable } from '@angular/core';
+import { interval, takeWhile, asyncScheduler, Subject, take } from 'rxjs';
+import { v4 } from 'uuid';
+import { ThemeService } from '@nanahoshi/mona-ui/theme';
+import { cva } from 'class-variance-authority';
+import { DOCUMENT, NgTemplateOutlet } from '@angular/common';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { LucideOctagonX, LucideBadgeInfo, LucideCircleCheckBig, LucideOctagonAlert, LucideX } from '@lucide/angular';
+import { ButtonDirective } from '@nanahoshi/mona-ui/button';
+import { ProgressBarComponent } from '@nanahoshi/mona-ui/progress-bar';
+
+//---------------------------------
+// Notification Container Component
+//---------------------------------
+const notificationContainerBaseVariants = cva(`p-2 z-40000`, {
+    variants: {
+        position: {
+            bottom: "bottom-0 left-1/2 -translate-x-1/2",
+            bottomleft: "bottom-0 left-0",
+            bottomright: "bottom-0 right-0",
+            top: "top-0 left-1/2 -translate-x-1/2",
+            topleft: "top-0 left-0",
+            topright: "top-0 right-0"
+        },
+        positionType: {
+            fixed: "fixed",
+            absolute: "absolute"
+        }
+    },
+    defaultVariants: {
+        positionType: "fixed"
+    }
+});
+//-----------------------
+// Notification Component
+//-----------------------
+const notificationActionVariants = cva(`
+        absolute top-0 right-0
+        flex items-start h-auto
+        [&>svg.lucide]:cursor-pointer
+        [&>svg.lucide]:-mt-1
+    `);
+const notificationBaseVariants = cva(`
+        w-fit h-fit relative
+        overflow-hidden flex flex-col
+        mb-2 bg-background shadow-md
+        border border-border
+    `);
+const notificationBodyVariants = cva(`
+        flex flex-1 p-2 ps-0 pe-8
+    `);
+const notificationContentVariants = cva(`
+        flex flex-1 w-full items-center
+    `);
+const notificationHeaderVariants = cva(`
+        w-full flex flex-row items-center
+        flex-1 text-sm font-medium
+        select-none
+    `);
+const notificationIconVariants = cva(`
+        flex items-center justify-center px-4
+    `, {
+    variants: {
+        type: {
+            info: "text-info",
+            success: "text-success",
+            warning: "text-warning",
+            error: "text-error"
+        }
+    }
+});
+const notificationTextVariants = cva(`
+        text-sm text-foreground
+    `);
+
+const notificationContainerBaseThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return notificationContainerBaseVariants;
+        default:
+            return notificationContainerBaseVariants;
+    }
+};
+const notificationActionThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return notificationActionVariants;
+        default:
+            return notificationActionVariants;
+    }
+};
+const notificationBaseThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return notificationBaseVariants;
+        default:
+            return notificationBaseVariants;
+    }
+};
+const notificationBodyThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return notificationBodyVariants;
+        default:
+            return notificationBodyVariants;
+    }
+};
+const notificationContentThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return notificationContentVariants;
+        default:
+            return notificationContentVariants;
+    }
+};
+const notificationHeaderThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return notificationHeaderVariants;
+        default:
+            return notificationHeaderVariants;
+    }
+};
+const notificationIconThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return notificationIconVariants;
+        default:
+            return notificationIconVariants;
+    }
+};
+const notificationTextThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return notificationTextVariants;
+        default:
+            return notificationTextVariants;
+    }
+};
+// type NotificationBaseVariantProps = VariantProps<ReturnType<typeof notificationBaseThemeVariants>>;
+// type NotificationBaseVariantInput = VariantInputs<NotificationBaseVariantProps>;
+//
+// export type NotificationVariantProps = NotificationBaseVariantProps;
+// export type NotificationVariantInput = NotificationBaseVariantInput;
+
+class NotificationComponent {
+    #destroyRef;
+    #document;
+    #isUrgent;
+    #paused;
+    #themeService;
+    constructor() {
+        this.#destroyRef = inject(DestroyRef);
+        this.#document = inject(DOCUMENT);
+        this.#isUrgent = computed(() => this.type() === "error" || this.type() === "warning", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#isUrgent" }] : /* istanbul ignore next */ []));
+        this.#paused = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#paused" }] : /* istanbul ignore next */ []));
+        this.#themeService = inject(ThemeService);
+        this.actionClass = computed(() => {
+            const theme = this.#themeService.theme();
+            return notificationActionThemeVariants(theme)();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "actionClass" }] : /* istanbul ignore next */ []));
+        this.ariaLive = computed(() => (this.#isUrgent() ? "assertive" : "polite"), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ariaLive" }] : /* istanbul ignore next */ []));
+        this.baseClass = computed(() => {
+            const theme = this.#themeService.theme();
+            return notificationBaseThemeVariants(theme)();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
+        this.bodyClass = computed(() => {
+            const theme = this.#themeService.theme();
+            return notificationBodyThemeVariants(theme)();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "bodyClass" }] : /* istanbul ignore next */ []));
+        this.contentClass = computed(() => {
+            const theme = this.#themeService.theme();
+            return notificationContentThemeVariants(theme)();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "contentClass" }] : /* istanbul ignore next */ []));
+        this.contentComponent = computed(() => {
+            const content = this.data().options.content;
+            return typeof content !== "string" && !(content instanceof TemplateRef) ? content : null;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "contentComponent" }] : /* istanbul ignore next */ []));
+        this.contentTemplate = computed(() => {
+            const content = this.data().options.content;
+            return content instanceof TemplateRef ? content : null;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "contentTemplate" }] : /* istanbul ignore next */ []));
+        this.contentHost = viewChild("contentHost", { ...(ngDevMode ? { debugName: "contentHost" } : /* istanbul ignore next */ {}), read: ViewContainerRef });
+        this.headerClass = computed(() => {
+            const theme = this.#themeService.theme();
+            return notificationHeaderThemeVariants(theme)();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "headerClass" }] : /* istanbul ignore next */ []));
+        this.iconClass = computed(() => {
+            const theme = this.#themeService.theme();
+            const type = this.type();
+            return notificationIconThemeVariants(theme)({ type });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "iconClass" }] : /* istanbul ignore next */ []));
+        this.isStringContent = computed(() => typeof this.data().options.content === "string", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isStringContent" }] : /* istanbul ignore next */ []));
+        this.progressColor = computed(() => {
+            const type = this.type();
+            const propertyName = `--color-${type}`;
+            return getComputedStyle(this.#document.documentElement).getPropertyValue(propertyName);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "progressColor" }] : /* istanbul ignore next */ []));
+        this.progressValue = signal(100, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "progressValue" }] : /* istanbul ignore next */ []));
+        this.role = computed(() => (this.#isUrgent() ? "alert" : "status"), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "role" }] : /* istanbul ignore next */ []));
+        this.textClass = computed(() => {
+            const theme = this.#themeService.theme();
+            return notificationTextThemeVariants(theme)();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "textClass" }] : /* istanbul ignore next */ []));
+        this.type = computed(() => this.data().options.type ?? "info", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+        /**
+         * @description The notification's internal state, created and managed by `NotificationService`. Not intended to be provided directly by consumers.
+         */
+        this.data = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+        afterNextRender({
+            write: () => {
+                this.#setupProgressBar();
+                const type = this.contentComponent();
+                const vcr = this.contentHost();
+                if (type && vcr) {
+                    this.data().contentComponentRef.set(vcr.createComponent(type));
+                }
+            }
+        });
+        this.#destroyRef.onDestroy(() => this.data().componentDestroy$.next(this.data().options.id));
+    }
+    close() {
+        this.data().componentDestroy$.next(this.data().options.id);
+    }
+    onInteractionEnd() {
+        this.#paused.set(false);
+    }
+    onInteractionStart() {
+        this.#paused.set(true);
+    }
+    #setupProgressBar() {
+        const duration = this.data().options.duration;
+        if (duration == null) {
+            return;
+        }
+        const progressInterval = Math.max(duration, 100) / 100;
+        interval(progressInterval)
+            .pipe(takeWhile(() => this.progressValue() > 0), takeUntilDestroyed(this.#destroyRef))
+            .subscribe({
+            next: () => {
+                if (this.#paused()) {
+                    return;
+                }
+                this.progressValue.set(this.progressValue() - 1);
+                if (this.progressValue() === 0) {
+                    asyncScheduler.schedule(() => {
+                        this.close();
+                    }, 300);
+                }
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NotificationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: NotificationComponent, isStandalone: true, selector: "mona-notification", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "pointerenter": "onInteractionStart()", "pointerleave": "onInteractionEnd()", "focusin": "onInteractionStart()", "focusout": "onInteractionEnd()" } }, viewQueries: [{ propertyName: "contentHost", first: true, predicate: ["contentHost"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "@let width = typeof data().options.width === \"string\" ? data().options.width : `${data().options.width}px`;\r\n@let height = typeof data().options.height === \"string\" ? data().options.height : `${data().options.height}px`;\r\n\r\n<div\r\n    [class]=\"baseClass()\"\r\n    [style.width]=\"width\"\r\n    [style.height]=\"height\"\r\n    [attr.role]=\"role()\"\r\n    [attr.aria-live]=\"ariaLive()\">\r\n    @if (contentTemplate() || contentComponent()) {\r\n        @if (contentTemplate()) {\r\n            <ng-container [ngTemplateOutlet]=\"contentTemplate()\"></ng-container>\r\n        } @else if (contentComponent()) {\r\n            <ng-container #contentHost></ng-container>\r\n        }\r\n    } @else {\r\n        <div [class]=\"bodyClass()\">\r\n            <div [class]=\"iconClass()\" aria-hidden=\"true\">\r\n                @switch (type()) {\r\n                    @case (\"error\") {\r\n                        <svg lucideOctagonX aria-hidden=\"true\"></svg>\r\n                    }\r\n                    @case (\"info\") {\r\n                        <svg lucideBadgeInfo aria-hidden=\"true\"></svg>\r\n                    }\r\n                    @case (\"success\") {\r\n                        <svg lucideCircleCheckBig aria-hidden=\"true\"></svg>\r\n                    }\r\n                    @case (\"warning\") {\r\n                        <svg lucideOctagonAlert aria-hidden=\"true\"></svg>\r\n                    }\r\n                }\r\n            </div>\r\n            <div class=\"flex flex-col flex-1\">\r\n                <div [class]=\"headerClass()\">{{ data().options.title }}</div>\r\n                <div [class]=\"contentClass()\">\r\n                    @if (isStringContent()) {\r\n                        <span [class]=\"textClass()\" title=\"{{ data().options.content }}\">{{\r\n                            data().options.content\r\n                        }}</span>\r\n                    }\r\n                </div>\r\n            </div>\r\n        </div>\r\n        @if (data().options.progressBar) {\r\n            <div class=\"w-full h-1\">\r\n                <mona-progress-bar\r\n                    [value]=\"progressValue()\"\r\n                    [color]=\"progressColor()\"\r\n                    [labelVisible]=\"false\"\r\n                    [animate]=\"false\"\r\n                    rounded=\"none\"\r\n                    class=\"h-full\"></mona-progress-bar>\r\n            </div>\r\n        }\r\n    }\r\n    @if (data().options.closable) {\r\n        <div [class]=\"actionClass()\">\r\n            <button\r\n                monaButton\r\n                size=\"small\"\r\n                look=\"link\"\r\n                rounded=\"none\"\r\n                [iconOnly]=\"true\"\r\n                [title]=\"data().options.closeTitle || 'Close'\"\r\n                [attr.aria-label]=\"data().options.closeTitle || 'Close'\"\r\n                (click)=\"close()\">\r\n                <svg lucideX [size]=\"14\" aria-hidden=\"true\"></svg>\r\n            </button>\r\n        </div>\r\n    }\r\n</div>\r\n", styles: [":host{display:block}@keyframes notification-slide-in-top{0%{clip-path:inset(0 -20px 100% -20px);transform:translateY(-12px);opacity:0}to{clip-path:inset(-20px);transform:translateY(0);opacity:1}}@keyframes notification-slide-out-top{0%{clip-path:inset(-20px);transform:translateY(0);opacity:1}to{clip-path:inset(0 -20px 100% -20px);transform:translateY(-12px);opacity:0}}@keyframes notification-slide-in-bottom{0%{clip-path:inset(100% -20px 0 -20px);transform:translateY(12px);opacity:0}to{clip-path:inset(-20px);transform:translateY(0);opacity:1}}@keyframes notification-slide-out-bottom{0%{clip-path:inset(-20px);transform:translateY(0);opacity:1}to{clip-path:inset(100% -20px 0 -20px);transform:translateY(12px);opacity:0}}:host.notification-enter-top{animation:notification-slide-in-top .3s cubic-bezier(.4,0,.2,1) forwards}:host.notification-enter-bottom{animation:notification-slide-in-bottom .3s cubic-bezier(.4,0,.2,1) forwards}:host.notification-leave-top{animation:notification-slide-out-top .3s cubic-bezier(.4,0,.2,1) forwards}:host.notification-leave-bottom{animation:notification-slide-out-bottom .3s cubic-bezier(.4,0,.2,1) forwards}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ProgressBarComponent, selector: "mona-progress-bar", inputs: ["aria-label", "aria-valuetext", "animate", "color", "disabled", "indeterminate", "labelPosition", "labelStyles", "labelVisible", "max", "min", "rounded", "class", "value"] }, { kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "component", type: LucideOctagonX, selector: "svg[lucideOctagonX], svg[lucideXOctagon]" }, { kind: "component", type: LucideBadgeInfo, selector: "svg[lucideBadgeInfo]" }, { kind: "component", type: LucideCircleCheckBig, selector: "svg[lucideCircleCheckBig], svg[lucideCheckCircle]" }, { kind: "component", type: LucideOctagonAlert, selector: "svg[lucideOctagonAlert], svg[lucideAlertOctagon]" }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NotificationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mona-notification", imports: [
+                        NgTemplateOutlet,
+                        ProgressBarComponent,
+                        ButtonDirective,
+                        LucideOctagonX,
+                        LucideBadgeInfo,
+                        LucideCircleCheckBig,
+                        LucideOctagonAlert,
+                        LucideX
+                    ], host: {
+                        "(pointerenter)": "onInteractionStart()",
+                        "(pointerleave)": "onInteractionEnd()",
+                        "(focusin)": "onInteractionStart()",
+                        "(focusout)": "onInteractionEnd()"
+                    }, template: "@let width = typeof data().options.width === \"string\" ? data().options.width : `${data().options.width}px`;\r\n@let height = typeof data().options.height === \"string\" ? data().options.height : `${data().options.height}px`;\r\n\r\n<div\r\n    [class]=\"baseClass()\"\r\n    [style.width]=\"width\"\r\n    [style.height]=\"height\"\r\n    [attr.role]=\"role()\"\r\n    [attr.aria-live]=\"ariaLive()\">\r\n    @if (contentTemplate() || contentComponent()) {\r\n        @if (contentTemplate()) {\r\n            <ng-container [ngTemplateOutlet]=\"contentTemplate()\"></ng-container>\r\n        } @else if (contentComponent()) {\r\n            <ng-container #contentHost></ng-container>\r\n        }\r\n    } @else {\r\n        <div [class]=\"bodyClass()\">\r\n            <div [class]=\"iconClass()\" aria-hidden=\"true\">\r\n                @switch (type()) {\r\n                    @case (\"error\") {\r\n                        <svg lucideOctagonX aria-hidden=\"true\"></svg>\r\n                    }\r\n                    @case (\"info\") {\r\n                        <svg lucideBadgeInfo aria-hidden=\"true\"></svg>\r\n                    }\r\n                    @case (\"success\") {\r\n                        <svg lucideCircleCheckBig aria-hidden=\"true\"></svg>\r\n                    }\r\n                    @case (\"warning\") {\r\n                        <svg lucideOctagonAlert aria-hidden=\"true\"></svg>\r\n                    }\r\n                }\r\n            </div>\r\n            <div class=\"flex flex-col flex-1\">\r\n                <div [class]=\"headerClass()\">{{ data().options.title }}</div>\r\n                <div [class]=\"contentClass()\">\r\n                    @if (isStringContent()) {\r\n                        <span [class]=\"textClass()\" title=\"{{ data().options.content }}\">{{\r\n                            data().options.content\r\n                        }}</span>\r\n                    }\r\n                </div>\r\n            </div>\r\n        </div>\r\n        @if (data().options.progressBar) {\r\n            <div class=\"w-full h-1\">\r\n                <mona-progress-bar\r\n                    [value]=\"progressValue()\"\r\n                    [color]=\"progressColor()\"\r\n                    [labelVisible]=\"false\"\r\n                    [animate]=\"false\"\r\n                    rounded=\"none\"\r\n                    class=\"h-full\"></mona-progress-bar>\r\n            </div>\r\n        }\r\n    }\r\n    @if (data().options.closable) {\r\n        <div [class]=\"actionClass()\">\r\n            <button\r\n                monaButton\r\n                size=\"small\"\r\n                look=\"link\"\r\n                rounded=\"none\"\r\n                [iconOnly]=\"true\"\r\n                [title]=\"data().options.closeTitle || 'Close'\"\r\n                [attr.aria-label]=\"data().options.closeTitle || 'Close'\"\r\n                (click)=\"close()\">\r\n                <svg lucideX [size]=\"14\" aria-hidden=\"true\"></svg>\r\n            </button>\r\n        </div>\r\n    }\r\n</div>\r\n", styles: [":host{display:block}@keyframes notification-slide-in-top{0%{clip-path:inset(0 -20px 100% -20px);transform:translateY(-12px);opacity:0}to{clip-path:inset(-20px);transform:translateY(0);opacity:1}}@keyframes notification-slide-out-top{0%{clip-path:inset(-20px);transform:translateY(0);opacity:1}to{clip-path:inset(0 -20px 100% -20px);transform:translateY(-12px);opacity:0}}@keyframes notification-slide-in-bottom{0%{clip-path:inset(100% -20px 0 -20px);transform:translateY(12px);opacity:0}to{clip-path:inset(-20px);transform:translateY(0);opacity:1}}@keyframes notification-slide-out-bottom{0%{clip-path:inset(-20px);transform:translateY(0);opacity:1}to{clip-path:inset(100% -20px 0 -20px);transform:translateY(12px);opacity:0}}:host.notification-enter-top{animation:notification-slide-in-top .3s cubic-bezier(.4,0,.2,1) forwards}:host.notification-enter-bottom{animation:notification-slide-in-bottom .3s cubic-bezier(.4,0,.2,1) forwards}:host.notification-leave-top{animation:notification-slide-out-top .3s cubic-bezier(.4,0,.2,1) forwards}:host.notification-leave-bottom{animation:notification-slide-out-bottom .3s cubic-bezier(.4,0,.2,1) forwards}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { contentHost: [{ type: i0.ViewChild, args: ["contentHost", { ...{ read: ViewContainerRef }, isSignal: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }] } });
+
+class NotificationContainerComponent {
+    constructor() {
+        this.#themeService = inject(ThemeService);
+        this.baseClass = computed(() => {
+            const theme = this.#themeService.theme();
+            const position = this.position();
+            const positionType = this.positionType();
+            return notificationContainerBaseThemeVariants(theme)({ position, positionType });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
+        this.enterAnimClass = computed(() => this.position().startsWith("bottom") ? "notification-enter-bottom" : "notification-enter-top", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "enterAnimClass" }] : /* istanbul ignore next */ []));
+        this.leaveAnimClass = computed(() => this.position().startsWith("bottom") ? "notification-leave-bottom" : "notification-leave-top", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "leaveAnimClass" }] : /* istanbul ignore next */ []));
+        this.notificationDataList = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "notificationDataList" }] : /* istanbul ignore next */ []));
+        this.position = signal("topright", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
+        this.positionType = signal("fixed", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "positionType" }] : /* istanbul ignore next */ []));
+    }
+    #themeService;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NotificationContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: NotificationContainerComponent, isStandalone: true, selector: "mona-notification-container", host: { properties: { "class": "baseClass()" } }, ngImport: i0, template: "@for (notificationData of notificationDataList(); track notificationData.options.id) {\n    <mona-notification [data]=\"notificationData\" [animate.enter]=\"enterAnimClass()\" [animate.leave]=\"leaveAnimClass()\">\n    </mona-notification>\n}\n", dependencies: [{ kind: "component", type: NotificationComponent, selector: "mona-notification", inputs: ["data"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NotificationContainerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mona-notification-container", imports: [NotificationComponent], host: {
+                        "[class]": "baseClass()"
+                    }, template: "@for (notificationData of notificationDataList(); track notificationData.options.id) {\n    <mona-notification [data]=\"notificationData\" [animate.enter]=\"enterAnimClass()\" [animate.leave]=\"leaveAnimClass()\">\n    </mona-notification>\n}\n" }]
+        }] });
+
+function getDefaultTitle(type) {
+    switch (type) {
+        case "info":
+            return "Info";
+        case "success":
+            return "Success";
+        case "warning":
+            return "Warning";
+        case "error":
+            return "Error";
+    }
+}
+
+class NotificationService {
+    #appRef;
+    #document;
+    constructor() {
+        this.#appRef = inject(ApplicationRef);
+        this.#document = inject(DOCUMENT$1);
+        this.notificationContainerMap = new Map();
+        this.notificationContainerSubscriptions = {
+            bottom: null,
+            bottomleft: null,
+            bottomright: null,
+            top: null,
+            topleft: null,
+            topright: null
+        };
+        this.initialize();
+    }
+    hide(id) {
+        const notificationData = this.getNotificationDataById(id);
+        if (notificationData) {
+            notificationData.componentDestroy$.next(id);
+        }
+    }
+    hideAll() {
+        this.notificationContainerMap.forEach(container => {
+            container.notifications.forEach(notification => {
+                this.hide(notification.options.id);
+            });
+        });
+    }
+    show(options) {
+        const position = options.position ?? "topright";
+        const type = options.type ?? "info";
+        const resolvedOptions = {
+            ...options,
+            id: options.id ?? `Notification_${v4()}`,
+            position,
+            type,
+            title: options.title ?? getDefaultTitle(type),
+            closable: options.closable ?? (options.duration == null ? true : undefined)
+        };
+        const containerData = this.notificationContainerMap.get(position);
+        if (containerData?.notifications.has(resolvedOptions.id)) {
+            const existing = containerData.notifications.get(resolvedOptions.id);
+            return {
+                afterHide: existing.afterHide$.asObservable(),
+                get content() {
+                    return existing.contentComponentRef();
+                },
+                hide: () => this.hide(resolvedOptions.id)
+            };
+        }
+        if (this.notificationContainerSubscriptions[position]) {
+            return this.createNotification(resolvedOptions);
+        }
+        else {
+            return this.createNotificationContainer(resolvedOptions);
+        }
+    }
+    createContainerComponent(appendTo) {
+        const containerSubject = new Subject();
+        const notificationContainerComponent = createComponent(NotificationContainerComponent, {
+            environmentInjector: this.#appRef.injector
+        });
+        const host = appendTo ? appendTo.element.nativeElement : this.#document.body;
+        notificationContainerComponent.instance.positionType.set(appendTo ? "absolute" : "fixed");
+        host.appendChild(notificationContainerComponent.location.nativeElement);
+        this.#appRef.attachView(notificationContainerComponent.hostView);
+        notificationContainerComponent.changeDetectorRef.detectChanges();
+        window.setTimeout(() => {
+            containerSubject.next(notificationContainerComponent);
+        });
+        return containerSubject;
+    }
+    createNotification(options) {
+        const position = options.position;
+        const notificationContainerData = this.notificationContainerMap.get(position);
+        if (!notificationContainerData) {
+            throw new Error(`Notification container for position ${position} was not found.`);
+        }
+        const componentDestroy$ = new Subject();
+        const afterHide$ = new Subject();
+        const notificationData = {
+            options,
+            componentDestroy$,
+            afterHide$,
+            contentComponentRef: signal(null)
+        };
+        if (!notificationContainerData.notifications.has(options.id)) {
+            notificationContainerData.notifications.set(options.id, notificationData);
+            if (notificationContainerData.componentRef) {
+                notificationContainerData.componentRef.instance.notificationDataList.set(Array.from(notificationContainerData.notifications.values()));
+            }
+        }
+        componentDestroy$.pipe(take(1)).subscribe(id => {
+            afterHide$.next();
+            afterHide$.complete();
+            this.removeNotificationData(id, position);
+        });
+        return {
+            afterHide: afterHide$.asObservable(),
+            get content() {
+                return notificationData.contentComponentRef();
+            },
+            hide: () => this.hide(options.id)
+        };
+    }
+    createNotificationContainer(options) {
+        const position = options.position;
+        const ref = this.createNotification(options);
+        this.notificationContainerSubscriptions[position] = this.createContainerComponent(options.appendTo).subscribe(ncr => {
+            ncr.instance.position.set(options.position);
+            const notificationContainerData = this.notificationContainerMap.get(position);
+            notificationContainerData.componentRef = ncr;
+            notificationContainerData.appendTo = options.appendTo;
+            notificationContainerData.subscription = this.notificationContainerSubscriptions[position];
+            ncr.instance.notificationDataList.set(Array.from(notificationContainerData.notifications.values()));
+        });
+        return ref;
+    }
+    getNotificationDataById(id) {
+        for (const notificationContainerData of this.notificationContainerMap.values()) {
+            const notificationData = notificationContainerData.notifications.get(id);
+            if (notificationData) {
+                return notificationData;
+            }
+        }
+        return null;
+    }
+    initialize() {
+        this.notificationContainerMap.set("bottom", {
+            componentRef: null,
+            notifications: new Map()
+        });
+        this.notificationContainerMap.set("bottomleft", {
+            componentRef: null,
+            notifications: new Map()
+        });
+        this.notificationContainerMap.set("bottomright", {
+            componentRef: null,
+            notifications: new Map()
+        });
+        this.notificationContainerMap.set("top", {
+            componentRef: null,
+            notifications: new Map()
+        });
+        this.notificationContainerMap.set("topleft", {
+            componentRef: null,
+            notifications: new Map()
+        });
+        this.notificationContainerMap.set("topright", {
+            componentRef: null,
+            notifications: new Map()
+        });
+    }
+    removeNotificationData(id, position) {
+        const container = this.notificationContainerMap.get(position);
+        if (!container) {
+            return;
+        }
+        container.notifications.delete(id);
+        if (container.componentRef) {
+            container.componentRef.instance.notificationDataList.set(Array.from(container.notifications.values()));
+        }
+        if (container.notifications.size === 0) {
+            container.subscription?.unsubscribe();
+            const componentRefToDestroy = container.componentRef;
+            container.componentRef = null;
+            container.subscription = undefined;
+            this.notificationContainerSubscriptions[position] = null;
+            window.setTimeout(() => {
+                if (componentRefToDestroy) {
+                    this.#appRef.detachView(componentRefToDestroy.hostView);
+                    componentRefToDestroy.destroy();
+                }
+            }, 300);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NotificationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NotificationService, providedIn: "root" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NotificationService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: "root"
+                }]
+        }], ctorParameters: () => [] });
+
+/*
+ * Public API Surface of @nanahoshi/mona-ui/notification
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NotificationService };
+//# sourceMappingURL=nanahoshi-mona-ui-notification.mjs.map