@ngutil/floating 0.0.52 → 0.0.55

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, Subject, exhaustMap, combineLatest, takeUntil, distinctUntilChanged, of, filter, 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, 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 { 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';
@@ -113,11 +113,6 @@ function dropAnimation(options) {
     return new AnimationTrait(DropAnimation, options);
 }
 
-class BackdropState {
-    constructor() {
-        this.onClick = new Subject();
-    }
-}
 class BackdropTrait {
     constructor(options) {
         this.options = options;
@@ -127,12 +122,9 @@ class BackdropTrait {
         return new Observable((dest) => {
             const animationBuilder = floatingRef.container.injector.get(AnimationBuilder);
             const options = { ...this.options };
-            const state = new BackdropState();
             const backdrop = floatingRef.layerSvc.newBackdrop(floatingRef.container, options);
-            if (options.closeOnClick) {
-                dest.add(this.#installClickHandler(floatingRef, backdrop, state));
-                dest.add(state.onClick.pipe(exhaustMap(() => floatingRef.close())).subscribe());
-            }
+            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,
@@ -146,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(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" },
@@ -275,21 +335,6 @@ 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);
@@ -411,7 +456,7 @@ class FloatingPosition {
     }
 }
 
-function modal(options = {}) {
+function modal() {
     return [
         position({
             anchor: {
@@ -423,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()
     ];
 }
@@ -718,10 +763,10 @@ class LayerService {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: LayerService, deps: [{ token: LAYER_ZINDEX_START, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.6", type: LayerService, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: LayerService, deps: [{ token: LAYER_ZINDEX_START, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.6", type: LayerService, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: LayerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: LayerService, decorators: [{
             type: Directive
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
@@ -730,10 +775,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImpor
                     type: Optional
                 }] }] });
 class RootLayer extends LayerService {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: RootLayer, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.6", type: RootLayer, isStandalone: true, selector: "body", providers: [{ provide: LayerService, useExisting: RootLayer }], usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: RootLayer, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.6", type: RootLayer, isStandalone: true, selector: "body", providers: [{ provide: LayerService, useExisting: RootLayer }], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: RootLayer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: RootLayer, decorators: [{
             type: Directive,
             args: [{
                     selector: "body",
@@ -742,10 +787,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImpor
                 }]
         }] });
 class IndividualLayer extends LayerService {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: IndividualLayer, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.6", type: IndividualLayer, isStandalone: true, providers: [{ provide: LayerService, useExisting: IndividualLayer }], usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: IndividualLayer, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.6", type: IndividualLayer, isStandalone: true, providers: [{ provide: LayerService, useExisting: IndividualLayer }], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: IndividualLayer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: IndividualLayer, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -786,6 +831,7 @@ function getAlwaysOnTop(child) {
 }
 
 const TRAITS = new InjectionToken("TRAITS");
+let UID_COUNTER = 0;
 class FloatingRef {
     #traits;
     #untilCleanup;
@@ -806,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 => {
@@ -816,9 +867,8 @@ class FloatingRef {
         this.state.on("init", () => this.traitState$.pipe(takeUntil(this.#untilCleanup), debounceTime(5), take(1)));
         this.state.on("showing", () => {
             container.nativeElement.style.visibility = "visible";
-            container.nativeElement.style.pointerEvents = "none";
         });
-        this.state.on("showing", () => {
+        this.state.on("shown", () => {
             container.nativeElement.style.pointerEvents = null;
         });
         this.state.on("disposing", () => {
@@ -869,10 +919,10 @@ class FloatingRef {
             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 }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: FloatingRef }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: FloatingRef, deps: [{ token: LayerService }, { token: ContainerRef }, { token: TRAITS }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: FloatingRef }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: FloatingRef, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: FloatingRef, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: LayerService }, { type: ContainerRef }, { type: undefined, decorators: [{
                     type: Inject,
@@ -999,19 +1049,19 @@ class FloatingService {
             return new FloatingComponentFactory(this, value, opts);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: FloatingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: FloatingService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: FloatingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: FloatingService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: FloatingService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: FloatingService, decorators: [{
             type: Injectable
         }] });
 
 class NuFloating {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: NuFloating, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.6", ngImport: i0, type: NuFloating, imports: [RootLayer], exports: [RootLayer] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: NuFloating, providers: [FloatingService] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: NuFloating, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.6", ngImport: i0, type: NuFloating, imports: [RootLayer], exports: [RootLayer] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: NuFloating, providers: [FloatingService] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: NuFloating, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: NuFloating, decorators: [{
             type: NgModule,
             args: [{
                     providers: [FloatingService],
@@ -1024,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, DropAnimation, 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, dropAnimation, 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