@nanahoshi/mona-ui 0.4.0 → 0.6.0

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, DestroyRef, DOCUMENT, viewChild, ViewContainerRef, computed, signal, afterNextRender, TemplateRef, Component, Injector, ElementRef, Injectable, input, output, effect } from '@angular/core';
+import { InjectionToken, inject, DestroyRef, DOCUMENT, viewChild, ViewContainerRef, computed, signal, TemplateRef, Component, Injector, ElementRef, Injectable, input, output, effect } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { rxTimeout } from '@nanahoshi/mona-ui/internal';
 import { take, asapScheduler, Subject, ReplaySubject, asyncScheduler, fromEvent, takeUntil, Subscription, filter, tap, exhaustMap, merge } from 'rxjs';
@@ -46,6 +46,22 @@ const fadePopupAnimation = {
     enter: "mona-popup-fade-enter",
     leave: "mona-popup-fade-leave"
 };
+const slideFromRightPopupAnimation = {
+    enter: "mona-popup-slide-from-right-enter",
+    leave: "mona-popup-slide-to-right-leave"
+};
+const slideFromLeftPopupAnimation = {
+    enter: "mona-popup-slide-from-left-enter",
+    leave: "mona-popup-slide-to-left-leave"
+};
+const slideFromTopPopupAnimation = {
+    enter: "mona-popup-slide-from-top-enter",
+    leave: "mona-popup-slide-to-top-leave"
+};
+const slideFromBottomPopupAnimation = {
+    enter: "mona-popup-slide-from-bottom-enter",
+    leave: "mona-popup-slide-to-bottom-leave"
+};
 
 const PopupDataInjectionToken = new InjectionToken("PopupInjectionToken");
 const PopupSettingsInjectionToken = new InjectionToken("PopupSettingsInjectionToken");
@@ -87,31 +103,19 @@ class PopupWrapperComponent {
         ...(ngDevMode ? [{ debugName: "templateRef" }] : /* istanbul ignore next */ []));
         this.visible = signal(true, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
-        this.wrapperClass = signal("", /* @ts-ignore */
+        this.wrapperClass = signal(this.#popupSettings.popupWrapperClass instanceof Array
+            ? this.#popupSettings.popupWrapperClass.join(" ")
+            : (this.#popupSettings.popupWrapperClass ?? ""), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "wrapperClass" }] : /* istanbul ignore next */ []));
-        afterNextRender({
-            read: () => {
-                if (this.#popupSettings.popupWrapperClass != null) {
-                    if (this.#popupSettings.popupWrapperClass instanceof Array) {
-                        this.wrapperClass.set(this.#popupSettings.popupWrapperClass.join(" "));
-                    }
-                    else {
-                        this.wrapperClass.set(this.#popupSettings.popupWrapperClass);
-                    }
-                }
-                this.#popupReference.closeStart$
-                    .pipe(take(1), takeUntilDestroyed(this.#destroyRef))
-                    .subscribe(event => {
-                    this.#closeEvent = event;
-                    const animationElement = this.animationElement().nativeElement;
-                    this.visible.set(false);
-                    if (!this.leaveAnimationClasses()) {
-                        this.#completeClose();
-                        return;
-                    }
-                    this.#document.defaultView?.setTimeout(() => this.#startFallbackTimer(animationElement));
-                });
+        this.#popupReference.closeStart$.pipe(take(1), takeUntilDestroyed(this.#destroyRef)).subscribe(event => {
+            this.#closeEvent = event;
+            const animationElement = this.animationElement().nativeElement;
+            this.visible.set(false);
+            if (!this.leaveAnimationClasses()) {
+                this.#completeClose();
+                return;
             }
+            this.#document.defaultView?.setTimeout(() => this.#startFallbackTimer(animationElement));
         });
         this.#destroyRef.onDestroy(() => this.#clearFallbackTimer());
     }
@@ -123,6 +127,11 @@ class PopupWrapperComponent {
         }
         return this.componentOutlet().createComponent(content, { injector });
     }
+    /**
+     * Only completion events are observed. A cancellation is also raised when the enter animation is
+     * replaced by the leave animation, so treating it as completion would dispose the overlay before
+     * the leave animation had a chance to play. {@link #startFallbackTimer} covers genuine cancellations.
+     */
     onNativeLeaveComplete(event) {
         if (event.target !== event.currentTarget) {
             return;
@@ -203,13 +212,13 @@ class PopupWrapperComponent {
         this.#fallbackTimer = win.setTimeout(() => this.#completeClose(), duration + 50);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PopupWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: PopupWrapperComponent, isStandalone: true, selector: "mona-popup-wrapper", host: { properties: { "class": "hostClasses()" } }, viewQueries: [{ propertyName: "animationElement", first: true, predicate: ["animationElement"], descendants: true, isSignal: true }, { propertyName: "componentOutlet", first: true, predicate: ["componentOutlet"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "@if (visible()) {\n    <div\n        #animationElement\n        class=\"w-full h-full origin-center\"\n        [animate.enter]=\"enterAnimationClasses()\"\n        [animate.leave]=\"leaveAnimationClasses()\"\n        (animationcancel)=\"onNativeLeaveComplete($event)\"\n        (animationend)=\"onNativeLeaveComplete($event)\"\n        (transitioncancel)=\"onNativeLeaveComplete($event)\"\n        (transitionend)=\"onNativeLeaveComplete($event)\">\n        @if (templateRef()) {\n            <ng-container [ngTemplateOutlet]=\"templateRef()\"></ng-container>\n        }\n        <ng-container #componentOutlet></ng-container>\n    </div>\n}\n", styles: [":host{display:block}.mona-popup-enter{animation:mona-popup-scale-in .15s cubic-bezier(.4,0,.2,1)}.mona-popup-leave{animation:mona-popup-scale-out .15s cubic-bezier(.4,0,.2,1)}.mona-dropdown-popup-enter{animation:mona-dropdown-popup-scale-in .15s cubic-bezier(.4,0,.2,1);transform-origin:top center}.mona-dropdown-popup-leave{animation:mona-dropdown-popup-scale-out .15s cubic-bezier(.4,0,.2,1);transform-origin:top center}.mona-popup-fade-enter{animation:mona-popup-fade-in 50ms ease-in}.mona-popup-fade-leave{animation:mona-popup-fade-out .15s ease-out}@keyframes mona-popup-scale-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes mona-popup-scale-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}@keyframes mona-dropdown-popup-scale-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes mona-dropdown-popup-scale-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}@keyframes mona-popup-fade-in{0%{opacity:0}to{opacity:1}}@keyframes mona-popup-fade-out{0%{opacity:1}to{opacity:0}}@media(prefers-reduced-motion:reduce){.mona-popup-enter,.mona-popup-leave,.mona-dropdown-popup-enter,.mona-dropdown-popup-leave,.mona-popup-fade-enter,.mona-popup-fade-leave{animation-duration:1ms}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: PopupWrapperComponent, isStandalone: true, selector: "mona-popup-wrapper", host: { properties: { "class": "hostClasses()" } }, viewQueries: [{ propertyName: "animationElement", first: true, predicate: ["animationElement"], descendants: true, isSignal: true }, { propertyName: "componentOutlet", first: true, predicate: ["componentOutlet"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "@if (visible()) {\n    <div\n        #animationElement\n        class=\"w-full h-full origin-center\"\n        [animate.enter]=\"enterAnimationClasses()\"\n        [animate.leave]=\"leaveAnimationClasses()\"\n        (animationend)=\"onNativeLeaveComplete($event)\"\n        (transitionend)=\"onNativeLeaveComplete($event)\">\n        @if (templateRef()) {\n            <ng-container [ngTemplateOutlet]=\"templateRef()\"></ng-container>\n        }\n        <ng-container #componentOutlet></ng-container>\n    </div>\n}\n", styles: [":host{display:block}:host(.mona-popup-constrain-height){min-height:0;max-height:inherit;overflow:clip}:host(.mona-popup-constrain-height)>div{display:flex;min-height:0;max-height:inherit;overflow:clip}.mona-popup-enter{animation:mona-popup-scale-in .15s cubic-bezier(.4,0,.2,1)}.mona-popup-leave{animation:mona-popup-scale-out .15s cubic-bezier(.4,0,.2,1)}.mona-dropdown-popup-enter{animation:mona-dropdown-popup-scale-in .15s cubic-bezier(.4,0,.2,1);transform-origin:top center}.mona-dropdown-popup-leave{animation:mona-dropdown-popup-scale-out .15s cubic-bezier(.4,0,.2,1);transform-origin:top center}.mona-popup-fade-enter{animation:mona-popup-fade-in 50ms ease-in}.mona-popup-fade-leave{animation:mona-popup-fade-out .15s ease-out}.mona-popup-slide-from-right-enter,.mona-popup-slide-from-left-enter,.mona-popup-slide-from-top-enter,.mona-popup-slide-from-bottom-enter,.mona-popup-slide-to-right-leave,.mona-popup-slide-to-left-leave,.mona-popup-slide-to-top-leave,.mona-popup-slide-to-bottom-leave{animation-fill-mode:both;backface-visibility:hidden;will-change:transform}.mona-popup-slide-from-right-enter,.mona-popup-slide-from-left-enter,.mona-popup-slide-from-top-enter,.mona-popup-slide-from-bottom-enter{animation-duration:.32s;animation-timing-function:cubic-bezier(.25,.46,.45,.94)}.mona-popup-slide-to-right-leave,.mona-popup-slide-to-left-leave,.mona-popup-slide-to-top-leave,.mona-popup-slide-to-bottom-leave{animation-duration:.24s;animation-timing-function:cubic-bezier(.4,0,1,1)}.mona-popup-slide-from-right-enter{animation-name:mona-popup-slide-from-right}.mona-popup-slide-to-right-leave{animation-name:mona-popup-slide-to-right}.mona-popup-slide-from-left-enter{animation-name:mona-popup-slide-from-left}.mona-popup-slide-to-left-leave{animation-name:mona-popup-slide-to-left}.mona-popup-slide-from-top-enter{animation-name:mona-popup-slide-from-top}.mona-popup-slide-to-top-leave{animation-name:mona-popup-slide-to-top}.mona-popup-slide-from-bottom-enter{animation-name:mona-popup-slide-from-bottom}.mona-popup-slide-to-bottom-leave{animation-name:mona-popup-slide-to-bottom}@keyframes mona-popup-scale-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes mona-popup-scale-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}@keyframes mona-dropdown-popup-scale-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes mona-dropdown-popup-scale-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}@keyframes mona-popup-fade-in{0%{opacity:0}to{opacity:1}}@keyframes mona-popup-fade-out{0%{opacity:1}to{opacity:0}}@keyframes mona-popup-slide-from-right{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes mona-popup-slide-to-right{0%{transform:translate(0)}to{transform:translate(100%)}}@keyframes mona-popup-slide-from-left{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes mona-popup-slide-to-left{0%{transform:translate(0)}to{transform:translate(-100%)}}@keyframes mona-popup-slide-from-top{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes mona-popup-slide-to-top{0%{transform:translateY(0)}to{transform:translateY(-100%)}}@keyframes mona-popup-slide-from-bottom{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes mona-popup-slide-to-bottom{0%{transform:translateY(0)}to{transform:translateY(100%)}}@media(prefers-reduced-motion:reduce){.mona-popup-enter,.mona-popup-leave,.mona-dropdown-popup-enter,.mona-dropdown-popup-leave,.mona-popup-fade-enter,.mona-popup-fade-leave,.mona-popup-slide-from-right-enter,.mona-popup-slide-to-right-leave,.mona-popup-slide-from-left-enter,.mona-popup-slide-to-left-leave,.mona-popup-slide-from-top-enter,.mona-popup-slide-to-top-leave,.mona-popup-slide-from-bottom-enter,.mona-popup-slide-to-bottom-leave{animation-duration:1ms}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PopupWrapperComponent, decorators: [{
             type: Component,
             args: [{ selector: "mona-popup-wrapper", imports: [NgTemplateOutlet], host: {
                         "[class]": "hostClasses()"
-                    }, template: "@if (visible()) {\n    <div\n        #animationElement\n        class=\"w-full h-full origin-center\"\n        [animate.enter]=\"enterAnimationClasses()\"\n        [animate.leave]=\"leaveAnimationClasses()\"\n        (animationcancel)=\"onNativeLeaveComplete($event)\"\n        (animationend)=\"onNativeLeaveComplete($event)\"\n        (transitioncancel)=\"onNativeLeaveComplete($event)\"\n        (transitionend)=\"onNativeLeaveComplete($event)\">\n        @if (templateRef()) {\n            <ng-container [ngTemplateOutlet]=\"templateRef()\"></ng-container>\n        }\n        <ng-container #componentOutlet></ng-container>\n    </div>\n}\n", styles: [":host{display:block}.mona-popup-enter{animation:mona-popup-scale-in .15s cubic-bezier(.4,0,.2,1)}.mona-popup-leave{animation:mona-popup-scale-out .15s cubic-bezier(.4,0,.2,1)}.mona-dropdown-popup-enter{animation:mona-dropdown-popup-scale-in .15s cubic-bezier(.4,0,.2,1);transform-origin:top center}.mona-dropdown-popup-leave{animation:mona-dropdown-popup-scale-out .15s cubic-bezier(.4,0,.2,1);transform-origin:top center}.mona-popup-fade-enter{animation:mona-popup-fade-in 50ms ease-in}.mona-popup-fade-leave{animation:mona-popup-fade-out .15s ease-out}@keyframes mona-popup-scale-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes mona-popup-scale-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}@keyframes mona-dropdown-popup-scale-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes mona-dropdown-popup-scale-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}@keyframes mona-popup-fade-in{0%{opacity:0}to{opacity:1}}@keyframes mona-popup-fade-out{0%{opacity:1}to{opacity:0}}@media(prefers-reduced-motion:reduce){.mona-popup-enter,.mona-popup-leave,.mona-dropdown-popup-enter,.mona-dropdown-popup-leave,.mona-popup-fade-enter,.mona-popup-fade-leave{animation-duration:1ms}}\n"] }]
+                    }, template: "@if (visible()) {\n    <div\n        #animationElement\n        class=\"w-full h-full origin-center\"\n        [animate.enter]=\"enterAnimationClasses()\"\n        [animate.leave]=\"leaveAnimationClasses()\"\n        (animationend)=\"onNativeLeaveComplete($event)\"\n        (transitionend)=\"onNativeLeaveComplete($event)\">\n        @if (templateRef()) {\n            <ng-container [ngTemplateOutlet]=\"templateRef()\"></ng-container>\n        }\n        <ng-container #componentOutlet></ng-container>\n    </div>\n}\n", styles: [":host{display:block}:host(.mona-popup-constrain-height){min-height:0;max-height:inherit;overflow:clip}:host(.mona-popup-constrain-height)>div{display:flex;min-height:0;max-height:inherit;overflow:clip}.mona-popup-enter{animation:mona-popup-scale-in .15s cubic-bezier(.4,0,.2,1)}.mona-popup-leave{animation:mona-popup-scale-out .15s cubic-bezier(.4,0,.2,1)}.mona-dropdown-popup-enter{animation:mona-dropdown-popup-scale-in .15s cubic-bezier(.4,0,.2,1);transform-origin:top center}.mona-dropdown-popup-leave{animation:mona-dropdown-popup-scale-out .15s cubic-bezier(.4,0,.2,1);transform-origin:top center}.mona-popup-fade-enter{animation:mona-popup-fade-in 50ms ease-in}.mona-popup-fade-leave{animation:mona-popup-fade-out .15s ease-out}.mona-popup-slide-from-right-enter,.mona-popup-slide-from-left-enter,.mona-popup-slide-from-top-enter,.mona-popup-slide-from-bottom-enter,.mona-popup-slide-to-right-leave,.mona-popup-slide-to-left-leave,.mona-popup-slide-to-top-leave,.mona-popup-slide-to-bottom-leave{animation-fill-mode:both;backface-visibility:hidden;will-change:transform}.mona-popup-slide-from-right-enter,.mona-popup-slide-from-left-enter,.mona-popup-slide-from-top-enter,.mona-popup-slide-from-bottom-enter{animation-duration:.32s;animation-timing-function:cubic-bezier(.25,.46,.45,.94)}.mona-popup-slide-to-right-leave,.mona-popup-slide-to-left-leave,.mona-popup-slide-to-top-leave,.mona-popup-slide-to-bottom-leave{animation-duration:.24s;animation-timing-function:cubic-bezier(.4,0,1,1)}.mona-popup-slide-from-right-enter{animation-name:mona-popup-slide-from-right}.mona-popup-slide-to-right-leave{animation-name:mona-popup-slide-to-right}.mona-popup-slide-from-left-enter{animation-name:mona-popup-slide-from-left}.mona-popup-slide-to-left-leave{animation-name:mona-popup-slide-to-left}.mona-popup-slide-from-top-enter{animation-name:mona-popup-slide-from-top}.mona-popup-slide-to-top-leave{animation-name:mona-popup-slide-to-top}.mona-popup-slide-from-bottom-enter{animation-name:mona-popup-slide-from-bottom}.mona-popup-slide-to-bottom-leave{animation-name:mona-popup-slide-to-bottom}@keyframes mona-popup-scale-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes mona-popup-scale-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}@keyframes mona-dropdown-popup-scale-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes mona-dropdown-popup-scale-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}@keyframes mona-popup-fade-in{0%{opacity:0}to{opacity:1}}@keyframes mona-popup-fade-out{0%{opacity:1}to{opacity:0}}@keyframes mona-popup-slide-from-right{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes mona-popup-slide-to-right{0%{transform:translate(0)}to{transform:translate(100%)}}@keyframes mona-popup-slide-from-left{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes mona-popup-slide-to-left{0%{transform:translate(0)}to{transform:translate(-100%)}}@keyframes mona-popup-slide-from-top{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes mona-popup-slide-to-top{0%{transform:translateY(0)}to{transform:translateY(-100%)}}@keyframes mona-popup-slide-from-bottom{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes mona-popup-slide-to-bottom{0%{transform:translateY(0)}to{transform:translateY(100%)}}@media(prefers-reduced-motion:reduce){.mona-popup-enter,.mona-popup-leave,.mona-dropdown-popup-enter,.mona-dropdown-popup-leave,.mona-popup-fade-enter,.mona-popup-fade-leave,.mona-popup-slide-from-right-enter,.mona-popup-slide-to-right-leave,.mona-popup-slide-from-left-enter,.mona-popup-slide-to-left-leave,.mona-popup-slide-from-top-enter,.mona-popup-slide-to-top-leave,.mona-popup-slide-from-bottom-enter,.mona-popup-slide-to-bottom-leave{animation-duration:1ms}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { animationElement: [{ type: i0.ViewChild, args: ["animationElement", { isSignal: true }] }], componentOutlet: [{ type: i0.ViewChild, args: ["componentOutlet", { ...{ read: ViewContainerRef }, isSignal: true }] }] } });
 
 class PopupRef {
@@ -631,7 +640,8 @@ class PopupService {
             width: settings.width,
             panelClass,
             backdropClass: settings.backdropClass ?? "transparent",
-            direction
+            direction,
+            scrollStrategy: settings.blockScroll ? this.#overlay.scrollStrategies.block() : undefined
         }));
     }
     createPositionStrategy(settings) {
@@ -671,6 +681,7 @@ class PopupService {
         this.attachContent(settings, popupReference, overlayRef, injector);
         const subscription = this.setupCloseSubscriptions(settings, popupReference, overlayRef);
         this.setupCleanupSubscription(popupReference, subscription, settings, originallyFocusedElement);
+        this.setupBackdropFadeOut(settings, popupReference, overlayRef);
         if (settings.closeOnScroll) {
             this.setupScrollClosing(settings, popupReference, overlayRef);
         }
@@ -794,6 +805,16 @@ class PopupService {
             backdropSubject.complete();
         });
     }
+    /**
+     * Starts the backdrop fade-out as soon as the close begins, so it runs alongside the popup's leave
+     * animation. Without it the backdrop stays fully opaque until `dispose()` removes it in one frame.
+     */
+    setupBackdropFadeOut(settings, popupReference, overlayRef) {
+        if (!settings.hasBackdrop) {
+            return;
+        }
+        popupReference.closeStart.pipe(take(1)).subscribe(() => overlayRef.detachBackdrop());
+    }
     setupCleanupSubscription(popupReference, subscription, settings, originallyFocusedElement) {
         popupReference.closed.pipe(take(1)).subscribe(() => {
             subscription?.unsubscribe();
@@ -1317,5 +1338,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { PopupCloseEvent, PopupCloseSource, PopupComponent, PopupDataInjectionToken, PopupRef, PopupService, defaultPopupAnimation, dropdownPopupAnimation, fadePopupAnimation };
+export { PopupCloseEvent, PopupCloseSource, PopupComponent, PopupDataInjectionToken, PopupRef, PopupService, defaultPopupAnimation, dropdownPopupAnimation, fadePopupAnimation, slideFromBottomPopupAnimation, slideFromLeftPopupAnimation, slideFromRightPopupAnimation, slideFromTopPopupAnimation };
 //# sourceMappingURL=nanahoshi-mona-ui-popup.mjs.map

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

@@ -0,0 +1,246 @@
+import { CdkTrapFocus } from '@angular/cdk/a11y';
+import { GlobalPositionStrategy } from '@angular/cdk/overlay';
+import * as i0 from '@angular/core';
+import { inject, DestroyRef, DOCUMENT, Injector, viewChild, computed, input, output, afterNextRender, effect, Component } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { LucideX } from '@lucide/angular';
+import { ButtonDirective } from '@nanahoshi/mona-ui/button';
+import { classInputToClass } from '@nanahoshi/mona-ui/common';
+import { themeOverlaySurfaceClasses, createElementControlId } from '@nanahoshi/mona-ui/internal';
+import { PopupService, PopupCloseEvent, PopupCloseSource, slideFromLeftPopupAnimation, slideFromBottomPopupAnimation, slideFromRightPopupAnimation, slideFromTopPopupAnimation } from '@nanahoshi/mona-ui/popup';
+import { take } from 'rxjs';
+import { twMerge } from 'tailwind-merge';
+import { cva } from 'class-variance-authority';
+
+/**
+ * `overflow-clip` rather than `overflow-hidden` is deliberate. `hidden` would make the sheet a scroll
+ * container, letting the browser scroll it to reveal content that takes focus while the enter animation
+ * still has the sheet translated off-screen, which cancels the animation. `clip` cannot scroll.
+ */
+const sheetBaseVariants = cva(`
+        relative flex h-full w-full min-w-0 min-h-0 max-h-[inherit] flex-col overflow-clip
+        pt-[env(safe-area-inset-top)] pr-[env(safe-area-inset-right)]
+        pb-[env(safe-area-inset-bottom)] pl-[env(safe-area-inset-left)]
+        ${themeOverlaySurfaceClasses} text-foreground
+        shadow-(--shadow-overlay) outline-none
+    `, {
+    variants: {
+        side: {
+            top: "border-b border-border",
+            right: "border-l border-border",
+            bottom: "border-t border-border",
+            left: "border-r border-border"
+        }
+    },
+    defaultVariants: {
+        side: "right"
+    }
+});
+const sheetHeaderVariants = cva(`flex shrink-0 items-start gap-3 p-4`);
+const sheetTitleVariants = cva(`text-lg font-semibold leading-none tracking-tight`);
+const sheetDescriptionVariants = cva(`mt-1.5 text-sm text-muted-foreground`);
+const sheetContentVariants = cva(`
+        min-w-0 min-h-0 flex-1 overflow-y-auto overscroll-contain px-4 pb-4
+        [scrollbar-color:var(--color-scrollbar-thumb)_var(--color-scrollbar-track)] [scrollbar-width:thin]
+    `);
+/** 2.75rem keeps the close button at the WCAG 2.5.5 minimum target size. */
+const sheetCloseButtonVariants = cva(`min-h-11 min-w-11 shrink-0`);
+
+class SheetComponent {
+    #destroyRef;
+    #document;
+    #injector;
+    #popupService;
+    #destroyed;
+    #horizontal;
+    #popupRef;
+    constructor() {
+        this.#destroyRef = inject(DestroyRef);
+        this.#document = inject(DOCUMENT);
+        this.#injector = inject(Injector);
+        this.#popupService = inject(PopupService);
+        this.#destroyed = false;
+        this.#horizontal = false;
+        this.sheetTemplate = viewChild.required("sheetTemplate", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "sheetTemplate" }] : /* istanbul ignore next */ []));
+        this.baseClass = computed(() => {
+            const variantClass = sheetBaseVariants({ side: this.side() });
+            const userClass = classInputToClass(this.userClass());
+            return twMerge(variantClass, userClass);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
+        this.closeButtonClass = computed(() => sheetCloseButtonVariants(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "closeButtonClass" }] : /* istanbul ignore next */ []));
+        this.contentClass = computed(() => sheetContentVariants(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "contentClass" }] : /* istanbul ignore next */ []));
+        this.descriptionClass = computed(() => sheetDescriptionVariants(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "descriptionClass" }] : /* istanbul ignore next */ []));
+        this.descriptionId = createElementControlId();
+        this.headerClass = computed(() => sheetHeaderVariants(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "headerClass" }] : /* istanbul ignore next */ []));
+        this.titleClass = computed(() => sheetTitleVariants(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "titleClass" }] : /* istanbul ignore next */ []));
+        this.titleId = createElementControlId();
+        /** @description Accessible name used when no visible title is provided. */
+        this.ariaLabel = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+        /** @description Whether the close button is displayed. @default true */
+        this.closable = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "closable" }] : /* istanbul ignore next */ []));
+        /** @description Emitted before the sheet closes. Call preventDefault() to keep it open. */
+        this.close = output();
+        /** @description Whether clicking the backdrop requests that the sheet close. @default true */
+        this.closeOnBackdropClick = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "closeOnBackdropClick" }] : /* istanbul ignore next */ []));
+        /** @description Whether pressing Escape requests that the sheet close. @default true */
+        this.closeOnEscape = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "closeOnEscape" }] : /* istanbul ignore next */ []));
+        /** @description Emitted after the leave animation completes and the popup is disposed. */
+        this.closed = output();
+        /** @description Supporting text displayed below the title. */
+        this.description = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "description" }] : /* istanbul ignore next */ []));
+        /** @description Explicit sheet height. Numbers are interpreted as pixels. */
+        this.height = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "height" }] : /* istanbul ignore next */ []));
+        /** @description Edge of the viewport from which the sheet opens. @default "right" */
+        this.side = input("right", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []));
+        /** @description Title displayed in the sheet header and used as its accessible name. */
+        this.title = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "title" }] : /* istanbul ignore next */ []));
+        this.userClass = input(undefined, { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: "class",
+            transform: value => classInputToClass(value) });
+        /** @description Explicit sheet width. Numbers are interpreted as pixels. */
+        this.width = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "width" }] : /* istanbul ignore next */ []));
+        afterNextRender({
+            read: () => this.#open()
+        });
+        this.#destroyRef.onDestroy(() => {
+            this.#destroyed = true;
+            this.#popupRef?.close();
+        });
+    }
+    closeSheet() {
+        this.#popupRef?.close(new PopupCloseEvent({ via: PopupCloseSource.CloseButton }));
+    }
+    /** Escape and backdrop clicks reach the popup unconditionally, so their inputs are honoured here. */
+    #isSuppressedCloseSource(via) {
+        return ((via === PopupCloseSource.Escape && !this.closeOnEscape()) ||
+            (via === PopupCloseSource.BackdropClick && !this.closeOnBackdropClick()));
+    }
+    #open() {
+        const activeElement = this.#document.activeElement;
+        const anchor = activeElement instanceof HTMLElement ? activeElement : this.#document.body;
+        const side = this.side();
+        this.#horizontal = side === "left" || side === "right";
+        this.#popupRef = this.#popupService.create({
+            anchor,
+            animation: this.#resolveAnimation(side),
+            backdropClass: [
+                "fixed",
+                "inset-0",
+                "bg-background/50",
+                "backdrop-blur-xs",
+                // Keeps the backdrop fade in step with the sheet's slide-out instead of the CDK default of 400ms.
+                "[transition-duration:240ms]!"
+            ],
+            blockScroll: true,
+            /*
+             * Both close paths are wired up even when the matching input is currently `false`. PopupService
+             * decides once, at creation, whether to listen at all, so opting out there would freeze these
+             * inputs at their initial values. Vetoing in `beforeClose` instead keeps them live.
+             */
+            closeOnBackdropClick: true,
+            closeOnEscape: true,
+            closeOnOutsideClick: false,
+            content: this.sheetTemplate(),
+            hasBackdrop: true,
+            height: this.#resolveHeight(),
+            maxHeight: this.#horizontal ? "100dvh" : "90dvh",
+            maxWidth: "100dvw",
+            popupClass: "overflow-clip",
+            popupWrapperClass: "mona-popup-constrain-height",
+            positionStrategy: "global",
+            restoreFocus: true,
+            width: this.#resolveWidth()
+        });
+        this.#positionOverlay(this.#popupRef, side);
+        this.#trackSize(this.#popupRef);
+        this.#popupRef.beforeClose.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe(event => {
+            if (this.#isSuppressedCloseSource(event.via)) {
+                event.preventDefault();
+                return;
+            }
+            if (!this.#destroyed) {
+                this.close.emit(event);
+            }
+        });
+        this.#popupRef.closed.pipe(take(1), takeUntilDestroyed(this.#destroyRef)).subscribe(() => this.closed.emit());
+    }
+    #positionOverlay(ref, side) {
+        const strategy = ref.overlayRef.getConfig().positionStrategy;
+        if (!(strategy instanceof GlobalPositionStrategy)) {
+            return;
+        }
+        switch (side) {
+            case "top":
+                strategy.top("0").left("0");
+                break;
+            case "right":
+                strategy.top("0").right("0");
+                break;
+            case "bottom":
+                strategy.bottom("0").left("0");
+                break;
+            case "left":
+                strategy.top("0").left("0");
+                break;
+        }
+        ref.overlayRef.updatePosition();
+    }
+    #resolveAnimation(side) {
+        switch (side) {
+            case "top":
+                return slideFromTopPopupAnimation;
+            case "right":
+                return slideFromRightPopupAnimation;
+            case "bottom":
+                return slideFromBottomPopupAnimation;
+            case "left":
+                return slideFromLeftPopupAnimation;
+        }
+    }
+    #resolveHeight() {
+        return this.height() ?? (this.#horizontal ? "100dvh" : "auto");
+    }
+    #resolveWidth() {
+        return this.width() ?? (this.#horizontal ? "min(100dvw, 24rem)" : "100dvw");
+    }
+    /** Keeps the overlay in sync with later `width`/`height` changes; `side` stays fixed at open time. */
+    #trackSize(ref) {
+        effect(() => ref.overlayRef.updateSize({ height: this.#resolveHeight(), width: this.#resolveWidth() }), {
+            injector: this.#injector
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: SheetComponent, isStandalone: true, selector: "mona-sheet", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close", closed: "closed" }, host: { classAttribute: "hidden" }, viewQueries: [{ propertyName: "sheetTemplate", first: true, predicate: ["sheetTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #sheetTemplate>\n    <section\n        cdkTrapFocus\n        [cdkTrapFocusAutoCapture]=\"true\"\n        [class]=\"baseClass()\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        tabindex=\"-1\"\n        [attr.aria-labelledby]=\"title() ? titleId : null\"\n        [attr.aria-describedby]=\"description() ? descriptionId : null\"\n        [attr.aria-label]=\"!title() ? ariaLabel() : null\">\n        @if (title() || description() || closable()) {\n            <header [class]=\"headerClass()\">\n                <div class=\"min-w-0 flex-1\">\n                    @if (title()) {\n                        <h2 [id]=\"titleId\" [class]=\"titleClass()\">{{ title() }}</h2>\n                    }\n                    @if (description()) {\n                        <p [id]=\"descriptionId\" [class]=\"descriptionClass()\">{{ description() }}</p>\n                    }\n                </div>\n                @if (closable()) {\n                    <button\n                        monaButton\n                        type=\"button\"\n                        look=\"ghost\"\n                        [iconOnly]=\"true\"\n                        aria-label=\"Close sheet\"\n                        size=\"small\"\n                        [class]=\"closeButtonClass()\"\n                        (click)=\"closeSheet()\">\n                        <svg lucideX [size]=\"16\"></svg>\n                    </button>\n                }\n            </header>\n        }\n        <div [class]=\"contentClass()\">\n            <ng-content></ng-content>\n        </div>\n    </section>\n</ng-template>\n", dependencies: [{ kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SheetComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mona-sheet", imports: [ButtonDirective, CdkTrapFocus, LucideX], host: {
+                        class: "hidden"
+                    }, template: "<ng-template #sheetTemplate>\n    <section\n        cdkTrapFocus\n        [cdkTrapFocusAutoCapture]=\"true\"\n        [class]=\"baseClass()\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        tabindex=\"-1\"\n        [attr.aria-labelledby]=\"title() ? titleId : null\"\n        [attr.aria-describedby]=\"description() ? descriptionId : null\"\n        [attr.aria-label]=\"!title() ? ariaLabel() : null\">\n        @if (title() || description() || closable()) {\n            <header [class]=\"headerClass()\">\n                <div class=\"min-w-0 flex-1\">\n                    @if (title()) {\n                        <h2 [id]=\"titleId\" [class]=\"titleClass()\">{{ title() }}</h2>\n                    }\n                    @if (description()) {\n                        <p [id]=\"descriptionId\" [class]=\"descriptionClass()\">{{ description() }}</p>\n                    }\n                </div>\n                @if (closable()) {\n                    <button\n                        monaButton\n                        type=\"button\"\n                        look=\"ghost\"\n                        [iconOnly]=\"true\"\n                        aria-label=\"Close sheet\"\n                        size=\"small\"\n                        [class]=\"closeButtonClass()\"\n                        (click)=\"closeSheet()\">\n                        <svg lucideX [size]=\"16\"></svg>\n                    </button>\n                }\n            </header>\n        }\n        <div [class]=\"contentClass()\">\n            <ng-content></ng-content>\n        </div>\n    </section>\n</ng-template>\n" }]
+        }], ctorParameters: () => [], propDecorators: { sheetTemplate: [{ type: i0.ViewChild, args: ["sheetTemplate", { isSignal: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], close: [{ type: i0.Output, args: ["close"] }], closeOnBackdropClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdropClick", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }] } });
+
+/*
+ * Public API Surface of @nanahoshi/mona-ui/sheet
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SheetComponent };
+//# sourceMappingURL=nanahoshi-mona-ui-sheet.mjs.map