@ngutil/floating 0.0.63 → 0.0.65

package/fesm2022/ngutil-floating.mjs

@@ -1,10 +1,9 @@
 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, timer, take, map, fromEvent, filter, from, of, 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, alignmentToTransformOrigin, 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 * 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';
@@ -45,7 +44,7 @@ function animationParams(floatingRef, delay, overrides) {
         ? 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";
+        const origin = alignmentToTransformOrigin(position.content.link);
         return {
             origin,
             ...overrides
@@ -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,16 +297,31 @@ class PositionTrait {
             const injector = floatingRef.container.injector;
             const dimWatcher = injector.get(DimensionWatcher);
             const rectWatcher = injector.get(RectWatcher);
-            const watches = {
-                floating: dimWatcher.watch(floatingRef.container, "border-box"),
+            const dimWatches = {
+                content: dimWatcher.watch(floatingRef.container, "border-box"),
                 anchor: refWatcher(rectWatcher, this.options.anchor.ref, floatingRef),
                 placement: refWatcher(rectWatcher, this.options.placement.ref, floatingRef)
             };
-            return combineLatest(watches).subscribe(({ floating, anchor, placement }) => {
-                const res = new FloatingPosition(this.options, floating, anchor, placement);
-                res.apply(floatingRef);
-                dest.next(res);
-            });
+            const sizeWatches = {
+                minWidth: sizeWatcher(dimWatcher, "width", this.options.content.minWidth),
+                maxWidth: sizeWatcher(dimWatcher, "width", this.options.content.maxWidth),
+                minHeight: sizeWatcher(dimWatcher, "height", this.options.content.minHeight),
+                maxHeight: sizeWatcher(dimWatcher, "height", this.options.content.maxHeight)
+            };
+            const watches = {
+                dims: combineLatest(dimWatches),
+                size: combineLatest(sizeWatches)
+            };
+            return (combineLatest(watches)
+                // .pipe(distinctUntilChanged(isEqual))
+                .subscribe(({ dims, size }) => {
+                console.log(size);
+                const pos = floatingPosition({ dims, options: this.options });
+                const floatingEl = floatingRef.container.nativeElement;
+                Object.assign(floatingEl.style, floatingPositionToStyle(pos));
+                Object.assign(floatingEl.style, sizesToStyle(pos, size));
+                dest.next(pos);
+            }));
         }).pipe(takeUntil(floatingRef.state.onExecute("disposing")));
     }
 }
@@ -426,39 +336,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 sizesToStyle(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 +367,7 @@ function modal() {
         position({
             anchor: {
                 ref: "viewport",
-                align: "center middle"
+                link: "center middle"
             },
             placement: {
                 ref: "viewport",
@@ -614,6 +515,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);
     }
@@ -817,12 +719,7 @@ class LayerService {
     get root() {
         return this.#container.root;
     }
-    constructor() {
-        console.log(this.#appRef);
-        // console.log(this.#appRef.)
-    }
     newComponentPortal(component, options) {
-        // console.log(this.getRootViewContainerRef())
         if (!options.injector) {
             options = { ...options, injector: this.#getInjector() };
         }
@@ -855,6 +752,9 @@ class LayerService {
         }
         catch (err) { }
         const root = this.#appRef.components[0];
+        if (root == null) {
+            throw new Error("Root component not found");
+        }
         return root.injector;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: LayerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
@@ -862,7 +762,7 @@ class LayerService {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: LayerService, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [] });
+        }] });
 
 const TRAITS = new InjectionToken("TRAITS");
 let UID_COUNTER = 0;
@@ -909,10 +809,6 @@ class FloatingRef {
             container.nativeElement.style.pointerEvents = "none";
         });
         this.state.control(container.state);
-        // TODO: remove
-        // this.state.status$.subscribe(status => {
-        //     console.log("floating", status)
-        // })
     }
     show() {
         return this.state.run("init", "showing", "shown");
@@ -1107,5 +1003,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, DropAnimation, FadeAnimation, FallAnimation, FloatingComponentFactory, FloatingFactory, FloatingRef, FloatingService, FloatingTemplateFactory, FocusTrait, IndividualLayer, LAYER_CONTAINER_ZINDEX_START, LayerContainer, LayerService, PortalRef, PositionTrait, RootLayer, StyleTrait, TRAITS, TemplatePortalRef, attribute, backdrop, closeTrigger, dropAnimation, fadeAnimation, fallAnimation, focus, modal, position, provideFloating, style };
 //# sourceMappingURL=ngutil-floating.mjs.map