@ngutil/floating 0.0.64 → 0.0.66

package/fesm2022/ngutil-floating.mjs

@@ -1,10 +1,10 @@
 import { AnimationBuilder, style as style$1, animate } from '@angular/animations';
-import { Observable, switchMap, tap, timer, take, map, fromEvent, filter, from, of, race, exhaustMap, distinctUntilChanged, combineLatest, takeUntil, share, ReplaySubject, shareReplay, takeWhile, debounceTime, startWith, EMPTY } from 'rxjs';
+import { Observable, switchMap, tap, of, take, map, fromEvent, filter, from, race, exhaustMap, distinctUntilChanged, combineLatest, takeUntil, isObservable, share, ReplaySubject, shareReplay, takeWhile, debounceTime, startWith, EMPTY } from 'rxjs';
 import { animationObservable, CoverService } from '@ngutil/graphics';
-import { Duration, Ease, alignmentToTransformOrigin, DimensionWatcher, rectExpand, rectOrigin, rectMoveOrigin, rectContract, alignmentNormalize, RectWatcher } from '@ngutil/style';
+import { Duration, Ease, floatingPositionDirection, DimensionWatcher, RectWatcher, floatingPosition, floatingPositionToStyle } from '@ngutil/style';
 import { KeystrokeService, FocusService } from '@ngutil/aria';
 import { coerceElement, isElementInput, Lifecycle, toSorted } from '@ngutil/common';
-import { clamp } from 'lodash';
+import { isEqual } from 'lodash';
 import * as i0 from '@angular/core';
 import { ElementRef, Injector, InjectionToken, inject, Directive, Injectable, ComponentFactoryResolver, ViewContainerRef, ApplicationRef, Inject, TemplateRef } from '@angular/core';
 import { DOCUMENT } from '@angular/common';
@@ -13,49 +13,42 @@ import { DomPortalOutlet, ComponentPortal, TemplatePortal } from '@angular/cdk/p
 // https://tympanus.net/Development/ModalWindowEffects/
 const timing = `${Duration.FastMs}ms ${Ease.Deceleration}`;
 class AnimationTrait {
-    constructor(animation, options) {
+    constructor(animation, params) {
         this.animation = animation;
-        this.options = options;
+        this.params = params;
         this.name = "animation";
     }
     connect(floatingRef) {
         return new Observable((dst) => {
             const builder = floatingRef.container.injector.get(AnimationBuilder);
             const element = floatingRef.container.nativeElement;
-            const options = this.options || {};
-            floatingRef.state.on("showing", () => animationParams(floatingRef, 0, options.params).pipe(switchMap(params => animationObservable({
+            floatingRef.state.on("showing", () => animationParams(floatingRef, this.params).pipe(switchMap(params => animationObservable({
                 builder,
                 element,
                 animation: this.animation.show,
-                options: { ...options, params }
+                options: { params }
             }))));
-            floatingRef.state.on("disposing", () => animationParams(floatingRef, 0, options.params).pipe(switchMap(params => animationObservable({
+            floatingRef.state.on("disposing", () => animationParams(floatingRef, this.params).pipe(switchMap(params => animationObservable({
                 builder,
                 element,
                 animation: this.animation.hide,
-                options: { ...options, params }
+                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
-        };
-    }));
+function animationParams(floatingRef, params) {
+    if (params == null) {
+        return of({});
+    }
+    return floatingRef.watchTrait("position").pipe(take(1), map(params));
 }
 const FallAnimation = {
     show: [
         style$1({
-            transform: "scale(1.5)",
+            transform: "scale({{ scale }})",
             visibility: "visible",
             opacity: "0"
         }),
@@ -66,52 +59,58 @@ const FallAnimation = {
     ],
     hide: [
         animate(timing, style$1({
-            transform: "scale(1.5)",
+            transform: "scale({{ scale }})",
             visibility: "visible",
             opacity: "0"
         }))
     ]
 };
-function fallAnimation(options) {
-    return new AnimationTrait(FallAnimation, options);
+function fallAnimation(scale = 1.5) {
+    return new AnimationTrait(FallAnimation, () => {
+        return { scale };
+    });
 }
 const FadeAnimation = {
     show: [style$1({ opacity: 0 }), animate(timing, style$1({ opacity: 1 }))],
     hide: [animate(timing, style$1({ opacity: 0 }))]
 };
-function fadeAnimation(options) {
-    return new AnimationTrait(FadeAnimation, options);
+function fadeAnimation() {
+    return new AnimationTrait(FadeAnimation);
 }
-const DropAnimation = {
+const SlideAnimation = {
     show: [
         style$1({
-            transform: "translate({{ translateX }}, {{ translateY }})",
+            transform: "translate({{ tx }}, {{ ty }})",
             opacity: "0",
-            transformOrigin: "{{ origin }}",
+            // transformOrigin: "{{ origin }}",
             visibility: "visible"
         }),
         animate(timing, style$1({
             opacity: "1",
-            transform: "scale(1, 1) translate(0px, 0px)"
+            transform: "translate(0px, 0px)"
         }))
     ],
-    hide: [
-        animate(timing, style$1({ opacity: 0, transform: "translate(calc({{ translateX }} * -1), calc({{ translateY }} * -1))" }))
-    ]
+    hide: [animate(timing, style$1({ opacity: 0, transform: "translate(calc({{ tx }} * -1), calc({{ ty }} * -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);
+const SlideAnimationParams = {
+    center: { tx: 0, ty: 0 },
+    up: { tx: 0, ty: 1 },
+    down: { tx: 0, ty: -1 },
+    left: { tx: 1, ty: 0 },
+    right: { tx: -1, ty: 0 }
+};
+function slideAnimation(size) {
+    return new AnimationTrait(SlideAnimation, position => {
+        const direction = floatingPositionDirection(position);
+        const { tx, ty } = SlideAnimationParams[direction];
+        return { tx: `${tx * size}px`, ty: `${ty * size}px` };
+    });
+}
+function slideNearAnimation(size = 40) {
+    return slideAnimation(size * -1);
+}
+function slideAwayAnimation(size = 40) {
+    return slideAnimation(size);
 }
 
 class BackdropTrait {
@@ -234,68 +233,6 @@ function getFloatingUid(el, attr, dataset) {
     return undefined;
 }
 
-const DIM_MAP = {
-    maxWidth: { computedRef: "max", dimension: "width" },
-    maxHeight: { computedRef: "max", dimension: "height" },
-    minWidth: { computedRef: "min", dimension: "width" },
-    minHeight: { computedRef: "min", dimension: "height" }
-};
-class DimensionConstraintTrait {
-    #map;
-    constructor(name, value) {
-        this.value = value;
-        this.name = name;
-        this.#map = DIM_MAP[name];
-    }
-    connect(floatingRef) {
-        return new Observable((dst) => {
-            if (isElementInput(this.value)) {
-                const watcher = floatingRef.container.injector.get(DimensionWatcher);
-                const refDim = watcher.watch(this.value, "border-box").pipe(map(value => value[this.#map.dimension]));
-                return combineLatest({
-                    refDim: refDim,
-                    position: floatingRef.watchTrait("position")
-                }).subscribe(({ refDim, position }) => {
-                    const floating = position.computed?.content;
-                    if (!floating) {
-                        return;
-                    }
-                    dst.next(clamp(refDim, floating.min[this.#map.dimension] || 0, floating.max[this.#map.dimension] || Infinity));
-                });
-            }
-            else {
-                return floatingRef.watchTrait("position").subscribe(position => {
-                    const floating = position.computed?.content;
-                    if (!floating) {
-                        return;
-                    }
-                    if (isNaN(this.value)) {
-                        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));
-                    }
-                });
-            }
-        }).pipe(takeUntil(floatingRef.state.onExecute("disposing")), distinctUntilChanged(), tap(value => {
-            const floatingEl = floatingRef.container.nativeElement;
-            floatingEl.style[this.name] = `${value}px`;
-        }));
-    }
-}
-function maxWidth(value) {
-    return new DimensionConstraintTrait("maxWidth", value);
-}
-function maxHeight(value) {
-    return new DimensionConstraintTrait("maxHeight", value);
-}
-function minWidth(value) {
-    return new DimensionConstraintTrait("minWidth", value);
-}
-function minHeight(value) {
-    return new DimensionConstraintTrait("minHeight", value);
-}
-
 class FocusTrait {
     constructor(options) {
         this.options = options;
@@ -340,48 +277,6 @@ function focus(options) {
     return new FocusTrait(options);
 }
 
-function computePosition({ floating, anchor, placement, options }) {
-    if (options.anchor.margin) {
-        anchor = rectExpand(anchor, options.anchor.margin);
-    }
-    const anchorPoint = rectOrigin(anchor, options.anchor.align);
-    let contentRect = rectMoveOrigin(floating, options.content.align, anchorPoint);
-    if (options.content.margin) {
-        contentRect = rectContract(contentRect, options.content.margin);
-    }
-    if (options.placement.padding) {
-        placement = rectContract(placement, options.placement.padding);
-    }
-    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)
-    };
-}
-
-class FloatingAnchorRef extends ElementRef {
-}
-class FloatingPlacementRef extends ElementRef {
-}
 class PositionTrait {
     constructor(options) {
         this.name = "position";
@@ -390,10 +285,10 @@ class PositionTrait {
             cloned.placement = { ref: "viewport" };
         }
         if (!cloned.anchor) {
-            cloned.anchor = { ref: cloned.placement.ref, align: "center middle" };
+            cloned.anchor = { ref: cloned.placement.ref, link: "center middle" };
         }
         if (!cloned.content) {
-            cloned.content = { align: "center middle" };
+            cloned.content = { link: "center middle" };
         }
         this.options = cloned;
     }
@@ -402,15 +297,27 @@ class PositionTrait {
             const injector = floatingRef.container.injector;
             const dimWatcher = injector.get(DimensionWatcher);
             const rectWatcher = injector.get(RectWatcher);
+            const constraints = this.options.content.constraints || {};
+            const constraintsWatches = {
+                minWidth: sizeWatcher(dimWatcher, "width", constraints.minWidth),
+                maxWidth: sizeWatcher(dimWatcher, "width", constraints.maxWidth),
+                minHeight: sizeWatcher(dimWatcher, "height", constraints.minHeight),
+                maxHeight: sizeWatcher(dimWatcher, "height", constraints.maxHeight)
+            };
             const watches = {
-                floating: dimWatcher.watch(floatingRef.container, "border-box"),
+                content: dimWatcher.watch(floatingRef.container, "border-box"),
                 anchor: refWatcher(rectWatcher, this.options.anchor.ref, floatingRef),
-                placement: refWatcher(rectWatcher, this.options.placement.ref, floatingRef)
+                placement: refWatcher(rectWatcher, this.options.placement.ref, floatingRef),
+                constraints: combineLatest(constraintsWatches)
             };
-            return combineLatest(watches).subscribe(({ floating, anchor, placement }) => {
-                const res = new FloatingPosition(this.options, floating, anchor, placement);
-                res.apply(floatingRef);
-                dest.next(res);
+            return combineLatest(watches)
+                .pipe(distinctUntilChanged(isEqual))
+                .subscribe(dims => {
+                const pos = floatingPosition({ dims, options: this.options });
+                const floatingEl = floatingRef.container.nativeElement;
+                Object.assign(floatingEl.style, floatingPositionToStyle(pos));
+                Object.assign(floatingEl.style, constraintsToStyle(pos, dims.constraints));
+                dest.next(pos);
             });
         }).pipe(takeUntil(floatingRef.state.onExecute("disposing")));
     }
@@ -426,39 +333,30 @@ function refWatcher(rectWatcher, ref, floatingRef) {
         return rectWatcher.watch(ref, "border-box");
     }
 }
-function position(options) {
-    return [new PositionTrait(options), maxWidth(NaN), maxHeight(NaN)];
-}
-class FloatingPosition {
-    constructor(options, floating, anchor, placement) {
-        this.options = options;
-        this.floating = floating;
-        this.anchor = anchor;
-        this.placement = placement;
-        // const frect: Rect = { x: 0, y: 0, ...floating }
-        this.computed = computePosition({ floating, anchor, placement, options });
-    }
-    apply(floatingRef) {
-        if (this.computed == null) {
-            return;
-        }
-        const floatingEl = floatingRef.container.nativeElement;
-        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 sizeWatcher(dimWatcher, prop, size) {
+    if (typeof size === "number") {
+        return of(size);
     }
+    else if (isElementInput(size)) {
+        return dimWatcher.watch(size, "border-box").pipe(map(value => value[prop]));
+    }
+    else if (isObservable(size)) {
+        return size.pipe(switchMap(value => sizeWatcher(dimWatcher, prop, value)));
+    }
+    return of(NaN);
+}
+function constraintsToStyle(pos, sizes) {
+    const { minWidth, maxWidth, minHeight, maxHeight } = sizes;
+    const { width, height } = pos.placement.area;
+    return {
+        minWidth: isNaN(minWidth) ? "auto" : `${Math.min(width, minWidth)}px`,
+        minHeight: isNaN(minHeight) ? "auto" : `${Math.min(height, minHeight)}px`,
+        maxWidth: isNaN(maxWidth) ? `${width}px` : `${Math.min(width, maxWidth)}px`,
+        maxHeight: isNaN(maxHeight) ? `${height}px` : `${Math.min(height, maxHeight)}px`
+    };
+}
+function position(options) {
+    return new PositionTrait(options);
 }
 
 function modal() {
@@ -466,7 +364,7 @@ function modal() {
         position({
             anchor: {
                 ref: "viewport",
-                align: "center middle"
+                link: "center middle"
             },
             placement: {
                 ref: "viewport",
@@ -614,6 +512,7 @@ function createElement(options) {
     div.style.flexDirection = "column";
     div.style.alignItems = "stretch";
     div.style.justifyContent = "stretch";
+    div.style.boxSizing = "border-box";
     if (options.classes) {
         div.classList.add(...options.classes);
     }
@@ -1101,5 +1000,5 @@ function provideFloating(options = {}) {
  * Generated bundle index. Do not edit.
  */
 
-export { AlwaysOnTop, AnimationTrait, AttributeTrait, BackdropRef, BackdropTrait, ChildRef, ComponentPortalRef, ContainerRef, DimensionConstraintTrait, DropAnimation, FadeAnimation, FallAnimation, FloatingAnchorRef, FloatingComponentFactory, FloatingFactory, FloatingPlacementRef, FloatingPosition, FloatingRef, FloatingService, FloatingTemplateFactory, FocusTrait, IndividualLayer, LAYER_CONTAINER_ZINDEX_START, LayerContainer, LayerService, PortalRef, PositionTrait, RootLayer, StyleTrait, TRAITS, TemplatePortalRef, attribute, backdrop, closeTrigger, computePosition, dropAnimation, fadeAnimation, fallAnimation, focus, maxHeight, maxWidth, minHeight, minWidth, modal, position, provideFloating, style };
+export { AlwaysOnTop, AnimationTrait, AttributeTrait, BackdropRef, BackdropTrait, ChildRef, ComponentPortalRef, ContainerRef, FadeAnimation, FallAnimation, FloatingComponentFactory, FloatingFactory, FloatingRef, FloatingService, FloatingTemplateFactory, FocusTrait, IndividualLayer, LAYER_CONTAINER_ZINDEX_START, LayerContainer, LayerService, PortalRef, PositionTrait, RootLayer, StyleTrait, TRAITS, TemplatePortalRef, attribute, backdrop, closeTrigger, fadeAnimation, fallAnimation, focus, modal, position, provideFloating, slideAwayAnimation, slideNearAnimation, style };
 //# sourceMappingURL=ngutil-floating.mjs.map