@ngutil/floating 0.0.51 → 0.0.53

package/fesm2022/ngutil-floating.mjs

@@ -1,32 +1,56 @@
 import { AnimationBuilder, style as style$1, animate } from '@angular/animations';
-import { Observable, tap, Subject, map, exhaustMap, combineLatest, takeUntil, distinctUntilChanged, of, filter, take, share, ReplaySubject, shareReplay, takeWhile, debounceTime, EMPTY, merge } from 'rxjs';
+import { Observable, switchMap, tap, timer, take, map, fromEvent, filter, from, of, race, finalize, exhaustMap, distinctUntilChanged, combineLatest, takeUntil, share, ReplaySubject, shareReplay, takeWhile, debounceTime, startWith, EMPTY } from 'rxjs';
 import { animationObservable, CoverService } from '@ngutil/graphics';
-import { Duration, Ease, DimensionWatcher, rectExpand, rectOrigin, rectMoveOrigin, rectContract, RectWatcher } from '@ngutil/style';
+import { Duration, Ease, alignmentToTransformOrigin, DimensionWatcher, rectExpand, rectOrigin, rectMoveOrigin, rectContract, alignmentNormalize, RectWatcher } from '@ngutil/style';
+import { KeystrokeService, FocusService } from '@ngutil/aria';
+import { coerceElement, isElementInput, Lifecycle, toSorted } from '@ngutil/common';
 import { clamp } from 'lodash';
-import { isElementInput, Lifecycle, toSorted } from '@ngutil/common';
-import { FocusService, KeystrokeService } from '@ngutil/aria';
 import * as i0 from '@angular/core';
 import { ElementRef, Injector, ComponentFactoryResolver, ViewContainerRef, InjectionToken, inject, Directive, Inject, Optional, Injectable, TemplateRef, NgModule } from '@angular/core';
 import { DomPortalOutlet, ComponentPortal, TemplatePortal } from '@angular/cdk/portal';
 
 // https://tympanus.net/Development/ModalWindowEffects/
-const transitionDuration = Duration.FastMs;
+const timing = `${Duration.FastMs}ms ${Ease.Deceleration}`;
 class AnimationTrait {
-    constructor(animation) {
+    constructor(animation, options) {
         this.animation = animation;
+        this.options = options;
         this.name = "animation";
     }
     connect(floatingRef) {
         return new Observable((dst) => {
             const builder = floatingRef.container.injector.get(AnimationBuilder);
             const element = floatingRef.container.nativeElement;
-            floatingRef.state.on("showing", () => animationObservable({ builder, element, animation: this.animation.show }));
-            floatingRef.state.on("disposing", () => animationObservable({ builder, element, animation: this.animation.hide }).pipe(tap(() => (element.style.display = "none"))));
+            const options = this.options || {};
+            floatingRef.state.on("showing", () => animationParams(floatingRef, 0, options.params).pipe(switchMap(params => animationObservable({
+                builder,
+                element,
+                animation: this.animation.show,
+                options: { ...options, params }
+            }))));
+            floatingRef.state.on("disposing", () => animationParams(floatingRef, 0, options.params).pipe(switchMap(params => animationObservable({
+                builder,
+                element,
+                animation: this.animation.hide,
+                options: { ...options, params }
+            })), tap(() => (element.style.display = "none"))));
             floatingRef.state.on("disposing", () => dst.complete());
             dst.next();
         });
     }
 }
+function animationParams(floatingRef, delay, overrides) {
+    const src = delay > 0
+        ? timer(delay).pipe(switchMap(() => floatingRef.watchTrait("position")))
+        : floatingRef.watchTrait("position");
+    return src.pipe(take(1), map(position => {
+        const origin = position.computed ? alignmentToTransformOrigin(position.computed.content.align) : "center";
+        return {
+            origin,
+            ...overrides
+        };
+    }));
+}
 const FallAnimation = {
     show: [
         style$1({
@@ -34,35 +58,61 @@ const FallAnimation = {
             visibility: "visible",
             opacity: "0"
         }),
-        animate(`${transitionDuration}ms ${Ease.Deceleration}`, style$1({
+        animate(timing, style$1({
             transform: "scale(1)",
             opacity: "1"
         }))
     ],
     hide: [
-        animate(`${transitionDuration}ms ${Ease.Deceleration}`, style$1({
+        animate(timing, style$1({
             transform: "scale(1.5)",
             visibility: "visible",
             opacity: "0"
         }))
     ]
 };
-function fallAnimation() {
-    return new AnimationTrait(FallAnimation);
+function fallAnimation(options) {
+    return new AnimationTrait(FallAnimation, options);
 }
 const FadeAnimation = {
-    show: [style$1({ opacity: 0 }), animate(`${transitionDuration}ms ${Ease.Deceleration}`, style$1({ opacity: 1 }))],
-    hide: [animate(`${transitionDuration}ms ${Ease.Deceleration}`, style$1({ opacity: 0 }))]
+    show: [style$1({ opacity: 0 }), animate(timing, style$1({ opacity: 1 }))],
+    hide: [animate(timing, style$1({ opacity: 0 }))]
 };
-function fadeAnimation() {
-    return new AnimationTrait(FadeAnimation);
+function fadeAnimation(options) {
+    return new AnimationTrait(FadeAnimation, options);
 }
-
-class BackdropState {
-    constructor() {
-        this.onClick = new Subject();
+const DropAnimation = {
+    show: [
+        style$1({
+            transform: "translate({{ translateX }}, {{ translateY }})",
+            opacity: "0",
+            transformOrigin: "{{ origin }}",
+            visibility: "visible"
+        }),
+        animate(timing, style$1({
+            opacity: "1",
+            transform: "scale(1, 1) translate(0px, 0px)"
+        }))
+    ],
+    hide: [
+        animate(timing, style$1({ opacity: 0, transform: "translate(calc({{ translateX }} * -1), calc({{ translateY }} * -1))" }))
+    ]
+};
+function dropAnimation(options) {
+    if (!options) {
+        options = {};
+    }
+    if (!options.params) {
+        options.params = {};
+    }
+    else {
+        options.params = { ...options.params };
     }
+    options.params["translateX"] = "0px";
+    options.params["translateY"] = "-40px";
+    return new AnimationTrait(DropAnimation, options);
 }
+
 class BackdropTrait {
     constructor(options) {
         this.options = options;
@@ -71,24 +121,10 @@ class BackdropTrait {
     connect(floatingRef) {
         return new Observable((dest) => {
             const animationBuilder = floatingRef.container.injector.get(AnimationBuilder);
-            const options = {
-                type: this.options.type,
-                under: floatingRef.container,
-                color: this.options.color,
-                style: this.options.style
-            };
-            if (this.options.type === "crop") {
-                ;
-                options.crop = floatingRef
-                    .watchTrait("position")
-                    .pipe(map(position => position.anchor));
-            }
-            const state = new BackdropState();
-            const backdrop = floatingRef.layerSvc.newBackdrop(options);
-            if (this.options.closeOnClick) {
-                dest.add(this.#installClickHandler(floatingRef, backdrop, state));
-                dest.add(state.onClick.pipe(exhaustMap(() => floatingRef.close())).subscribe());
-            }
+            const options = { ...this.options };
+            const backdrop = floatingRef.layerSvc.newBackdrop(floatingRef.container, options);
+            floatingRef.container.nativeElement.setAttribute("data-floating-has-backdrop", "true");
+            backdrop.nativeElement.setAttribute("data-floating-backdrop", floatingRef.uid);
             backdrop.state.on("showing", () => animationObservable({
                 builder: animationBuilder,
                 element: backdrop.nativeElement,
@@ -102,29 +138,97 @@ class BackdropTrait {
             backdrop.state.on("disposed", () => dest.complete());
             floatingRef.state.on("disposing", () => backdrop.dispose());
             dest.add(backdrop.show().subscribe());
-            dest.next(state);
+            dest.next(backdrop);
         });
     }
-    #installClickHandler(floatingRef, backdrop, state) {
-        const handler = (event) => {
-            if (event.defaultPrevented) {
-                return;
-            }
-            if (event.target === backdrop.nativeElement || backdrop.nativeElement.contains(event.target)) {
-                ;
-                state.onClick.next();
-            }
-        };
-        document.addEventListener("click", handler);
-        return () => {
-            document.removeEventListener("click", handler);
-        };
-    }
 }
 function backdrop(options) {
     return new BackdropTrait(options);
 }
 
+class CloseTriggerTrait {
+    constructor(options = {}) {
+        this.options = options;
+        this.name = "close-trigger";
+    }
+    connect(floatingRef) {
+        const { keystroke, clickOutside, trigger } = this.options;
+        const container = floatingRef.container.nativeElement;
+        const triggers = [];
+        const selfUid = Number(floatingRef.uid);
+        if (keystroke) {
+            const ks = floatingRef.container.injector.get(KeystrokeService);
+            triggers.push(ks.watch(container, { key: "Escape", state: "up" }).pipe(map(() => {
+                return { source: "keystroke" };
+            })));
+            // TODO: angular auxiliary route
+        }
+        if (clickOutside) {
+            const allowedElements = typeof clickOutside === "boolean" ? [] : clickOutside.allowedElements?.map(coerceElement) || [];
+            triggers.push(fromEvent(document, "click", { capture: true, passive: true }).pipe(filter(event => {
+                if (!(event.target instanceof HTMLElement)) {
+                    return false;
+                }
+                const target = event.target;
+                for (const allowed of allowedElements) {
+                    if (target === allowed || allowed.contains(target)) {
+                        return false;
+                    }
+                }
+                const floatingUid = getFloatingUid(target, "data-floating", "floating");
+                const backdropUid = getFloatingUid(target, "data-floating-backdrop", "floatingBackdrop");
+                const otherBackdropUid = floatingUid != null && floatingUid !== selfUid
+                    ? getFloatingUid(document.querySelector(`[data-floating-backdrop="${floatingUid}"]`), "data-floating-backdrop", "floatingBackdrop")
+                    : undefined;
+                // console.log({ floatingUid, backdropUid, otherBackdropUid, self: selfUid })
+                if (floatingUid == null && backdropUid == null) {
+                    return true;
+                }
+                else {
+                    return (
+                    // click on self backdrop
+                    (backdropUid != null && backdropUid === selfUid) ||
+                        // click on other floating element, whitout backdrop
+                        (floatingUid != null && otherBackdropUid == null && floatingUid !== selfUid) ||
+                        // click on other floating element that opened erlier
+                        (floatingUid != null && floatingUid < selfUid));
+                }
+            }), map(() => {
+                return { source: "click" };
+            })));
+        }
+        if (trigger) {
+            triggers.push(from(trigger).pipe(map(() => {
+                return { source: "trigger" };
+            })));
+        }
+        if (triggers.length === 0) {
+            return of();
+        }
+        else {
+            return race(...triggers).pipe(finalize(() => console.log("CLOSED", floatingRef.uid)), exhaustMap(event => floatingRef.close().pipe(map(() => event), distinctUntilChanged())));
+        }
+    }
+}
+function closeTrigger(options = { clickOutside: true, keystroke: true }) {
+    return new CloseTriggerTrait(options);
+}
+function getFloatingUid(el, attr, dataset) {
+    if (el == null) {
+        return undefined;
+    }
+    if (el.matches(`[${attr}]`)) {
+        return Number(el.dataset[dataset]) || undefined;
+    }
+    else {
+        const parent = el.closest(`[${attr}]`);
+        if (parent) {
+            return Number(parent.dataset[dataset]) || undefined;
+        }
+    }
+    return undefined;
+}
+
 const DIM_MAP = {
     maxWidth: { computedRef: "max", dimension: "width" },
     maxHeight: { computedRef: "max", dimension: "height" },
@@ -147,7 +251,7 @@ class DimensionConstraintTrait {
                     refDim: refDim,
                     position: floatingRef.watchTrait("position")
                 }).subscribe(({ refDim, position }) => {
-                    const floating = position.computed?.floating;
+                    const floating = position.computed?.content;
                     if (!floating) {
                         return;
                     }
@@ -156,7 +260,7 @@ class DimensionConstraintTrait {
             }
             else {
                 return floatingRef.watchTrait("position").subscribe(position => {
-                    const floating = position.computed?.floating;
+                    const floating = position.computed?.content;
                     if (!floating) {
                         return;
                     }
@@ -164,7 +268,7 @@ class DimensionConstraintTrait {
                         dst.next(floating[this.#map.computedRef][this.#map.dimension]);
                     }
                     else {
-                        dst.next(clamp(this.value, floating?.min[this.#map.dimension] || 0, floating?.max[this.#map.dimension] || Infinity));
+                        dst.next(clamp(this.value, floating.min[this.#map.dimension] || 0, floating.max[this.#map.dimension] || Infinity));
                     }
                 });
             }
@@ -231,39 +335,42 @@ function focus(options) {
     return new FocusTrait(options);
 }
 
-class KeystrokeTrait {
-    constructor() {
-        this.name = "keystroke";
-    }
-    connect(floatingRef) {
-        const ks = floatingRef.container.injector.get(KeystrokeService);
-        return ks
-            .watch(floatingRef.container.nativeElement, { key: "Escape", state: "up" })
-            .pipe(exhaustMap(() => floatingRef.close()));
-    }
-}
-function keystroke() {
-    return new KeystrokeTrait();
-}
-
 function computePosition({ floating, anchor, placement, options }) {
     if (options.anchor.margin) {
         anchor = rectExpand(anchor, options.anchor.margin);
     }
     const anchorPoint = rectOrigin(anchor, options.anchor.align);
-    let content = rectMoveOrigin(floating, options.content.align, anchorPoint);
+    let contentRect = rectMoveOrigin(floating, options.content.align, anchorPoint);
     if (options.content.margin) {
-        content = rectContract(content, options.content.margin);
+        contentRect = rectContract(contentRect, options.content.margin);
     }
     if (options.placement.padding) {
         placement = rectContract(placement, options.placement.padding);
     }
-    const cf = {
-        current: content,
-        max: { width: placement.width - content.x, height: placement.height - content.y },
-        min: { width: 0, height: 0 }
+    return {
+        content: {
+            ...addTLRB(contentRect, placement),
+            align: alignmentNormalize(options.content.align),
+            connect: anchorPoint,
+            max: { width: placement.width - contentRect.x, height: placement.height - contentRect.y },
+            min: { width: 0, height: 0 }
+        },
+        anchor: {
+            ...addTLRB(anchor, placement),
+            align: alignmentNormalize(options.anchor.align),
+            connect: anchorPoint
+        },
+        placement: addTLRB(placement, placement)
+    };
+}
+function addTLRB(rect, container) {
+    return {
+        ...rect,
+        top: rect.y,
+        left: rect.x,
+        right: container.width - (rect.x + rect.width),
+        bottom: container.height - (rect.y + rect.height)
     };
-    return { floating: cf };
 }
 
 class FloatingAnchorRef extends ElementRef {
@@ -331,12 +438,25 @@ class FloatingPosition {
             return;
         }
         const floatingEl = floatingRef.container.nativeElement;
-        floatingEl.style.left = `${this.computed.floating.current.x}px`;
-        floatingEl.style.top = `${this.computed.floating.current.y}px`;
+        const computedContent = this.computed.content;
+        const style = { top: null, right: null, bottom: null, left: null };
+        if (computedContent.align.horizontal === "right") {
+            style["right"] = `${computedContent.right}px`;
+        }
+        else {
+            style["left"] = `${computedContent.left}px`;
+        }
+        if (computedContent.align.vertical === "bottom") {
+            style["bottom"] = `${computedContent.bottom}px`;
+        }
+        else {
+            style["top"] = `${computedContent.top}px`;
+        }
+        Object.assign(floatingEl.style, style);
     }
 }
 
-function modal(options = {}) {
+function modal() {
     return [
         position({
             anchor: {
@@ -348,9 +468,9 @@ function modal(options = {}) {
                 padding: "16px"
             }
         }),
-        backdrop({ type: "solid", color: "rgba(0, 0, 0, .3)", closeOnClick: options.closeOnBackdropClick }),
+        backdrop({ type: "solid", color: "rgba(0, 0, 0, .3)" }),
         focus({ trap: true }),
-        keystroke(),
+        closeTrigger(),
         fallAnimation()
     ];
 }
@@ -487,12 +607,6 @@ function createElement(options) {
 }
 
 class BackdropRef extends ChildRef {
-    static from(cover, injector, options) {
-        const ref = new BackdropRef(document.createElement("div"), cover, injector, options);
-        // TODO: kérdéses
-        // options.under.state.control(ref.state)
-        return ref;
-    }
     set visible(visible) {
         if (this.#visible !== visible) {
             this.#visible = visible;
@@ -502,35 +616,21 @@ class BackdropRef extends ChildRef {
     get visible() {
         return this.#visible;
     }
-    #visible = true;
-    constructor(nativeElement, coverSvc, injector, options) {
-        super(nativeElement);
-        this.coverSvc = coverSvc;
-        this.injector = injector;
+    #visible = false;
+    constructor(coverRef, under, options) {
+        super(coverRef.nativeElement);
+        this.coverRef = coverRef;
+        this.under = under;
         this.options = options;
-        nativeElement.style.position = "absolute";
-        nativeElement.style.top =
-            nativeElement.style.right =
-                nativeElement.style.bottom =
-                    nativeElement.style.left =
-                        "0px";
-        if (options.style) {
-            Object.assign(nativeElement.style, options.style);
-        }
-        this.under = options.under;
-        if (options.type === "solid") {
-            this.coverSvc
-                .solid({ container: nativeElement, color: options.color })
-                .pipe(takeUntil(this.disposed$))
-                .subscribe();
-            this.group = `${options.color === "transparent" ? "transparent" : "solid"}`;
-        }
-        else if (options.type === "crop") {
-            this.coverSvc
-                .crop({ container: nativeElement, color: options.color, crop: options.crop })
-                .pipe(takeUntil(this.disposed$))
-                .subscribe();
-        }
+        this.group = `${options.color === "transparent" ? "transparent" : "solid"}`;
+        this.state.on("showing", () => {
+            this.coverRef
+                .show()
+                .pipe(takeUntil(this.state.onDone("disposed")))
+                .subscribe(() => {
+                this.visible = true;
+            });
+        });
     }
     show() {
         return this.state.run("showing", "shown");
@@ -627,8 +727,9 @@ class LayerService {
         }
         return this.append(new ContainerRef(options));
     }
-    newBackdrop(options) {
-        return this.append(BackdropRef.from(this.#cover, this.#injector, options));
+    newBackdrop(under, options) {
+        const coverRef = this.#cover.create(this.root, options);
+        return this.append(new BackdropRef(coverRef, under, options));
     }
     append(ref) {
         if (!this.#children.includes(ref)) {
@@ -656,7 +757,7 @@ class LayerService {
         children.sort(sortByZIndexDesc);
         let hasBackdrop = false;
         for (const child of children) {
-            if (child instanceof BackdropRef && child.options.type === "solid") {
+            if (child instanceof BackdropRef && child.options.color !== "transparent") {
                 child.visible = !hasBackdrop;
                 hasBackdrop = true;
             }
@@ -730,6 +831,7 @@ function getAlwaysOnTop(child) {
 }
 
 const TRAITS = new InjectionToken("TRAITS");
+let UID_COUNTER = 0;
 class FloatingRef {
     #traits;
     #untilCleanup;
@@ -750,8 +852,13 @@ class FloatingRef {
         this.#traits = {};
         this.#untilCleanup = this.state.onExecute("cleanup");
         this.#untilDisposed = this.state.onExecute("disposed");
-        container.nativeElement.style.overflow = "hidden";
-        container.nativeElement.style.visibility = "hidden";
+        this.uid = `${++UID_COUNTER}`;
+        Object.assign(container.nativeElement.style, {
+            overflow: "hidden",
+            visibility: "hidden",
+            pointerEvents: "none"
+        });
+        container.nativeElement.setAttribute("data-floating", this.uid);
         this.#traits = traits;
         this.traitState$ = this.#traitState().pipe(shareReplay(1));
         this.state.current$.pipe(takeWhile(state => state !== "cleanup", true)).subscribe(state => {
@@ -761,6 +868,9 @@ class FloatingRef {
         this.state.on("showing", () => {
             container.nativeElement.style.visibility = "visible";
         });
+        this.state.on("shown", () => {
+            container.nativeElement.style.pointerEvents = null;
+        });
         this.state.on("disposing", () => {
             container.nativeElement.style.pointerEvents = "none";
         });
@@ -795,23 +905,18 @@ class FloatingRef {
         this.close(true).subscribe();
     }
     watchTrait(name) {
-        return this.traitState$.pipe(takeUntil(this.#untilDisposed), filter(event => event.name === name), map(event => event.data), shareReplay(1));
+        return this.traitState$.pipe(takeUntil(this.#untilDisposed), map(state => state[name]), filter(value => value != null));
     }
     #traitState() {
-        const src = [];
+        const src = {};
         for (const [k, v] of Object.entries(this.#traits)) {
-            src.push(v.connect(this).pipe(takeUntil(this.#untilCleanup), map(result => {
-                return { name: k, data: result };
-            })));
+            src[k] = v.connect(this).pipe(takeUntil(this.#untilDisposed), startWith(null));
         }
-        if (src.length === 0) {
+        if (Object.keys(src).length === 0) {
             return EMPTY;
         }
-        else if (src.length === 1) {
-            return src[0];
-        }
         else {
-            return merge(...src);
+            return combineLatest(src).pipe(shareReplay(1));
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: FloatingRef, deps: [{ token: LayerService }, { token: ContainerRef }, { token: TRAITS }], target: i0.ɵɵFactoryTarget.Injectable }); }
@@ -969,5 +1074,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AlwaysOnTop, AnimationTrait, AttributeTrait, BackdropRef, BackdropState, BackdropTrait, ChildRef, ComponentPortalRef, ContainerRef, DimensionConstraintTrait, FadeAnimation, FallAnimation, FloatingAnchorRef, FloatingComponentFactory, FloatingFactory, FloatingPlacementRef, FloatingPosition, FloatingRef, FloatingService, FloatingTemplateFactory, FocusTrait, IndividualLayer, KeystrokeTrait, LAYER_ZINDEX_START, LayerService, NuFloating, PortalRef, PositionTrait, RootLayer, StyleTrait, TRAITS, TemplatePortalRef, attribute, backdrop, computePosition, fadeAnimation, fallAnimation, focus, keystroke, maxHeight, maxWidth, minHeight, minWidth, modal, position, style };
+export { AlwaysOnTop, AnimationTrait, AttributeTrait, BackdropRef, BackdropTrait, ChildRef, ComponentPortalRef, ContainerRef, DimensionConstraintTrait, DropAnimation, FadeAnimation, FallAnimation, FloatingAnchorRef, FloatingComponentFactory, FloatingFactory, FloatingPlacementRef, FloatingPosition, FloatingRef, FloatingService, FloatingTemplateFactory, FocusTrait, IndividualLayer, LAYER_ZINDEX_START, LayerService, NuFloating, PortalRef, PositionTrait, RootLayer, StyleTrait, TRAITS, TemplatePortalRef, attribute, backdrop, closeTrigger, computePosition, dropAnimation, fadeAnimation, fallAnimation, focus, maxHeight, maxWidth, minHeight, minWidth, modal, position, style };
 //# sourceMappingURL=ngutil-floating.mjs.map