@ngutil/floating 0.0.61 → 0.0.63

package/fesm2022/ngutil-floating.mjs

@@ -6,7 +6,7 @@ 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, ComponentFactoryResolver, ViewContainerRef, InjectionToken, inject, Injectable, Inject, Optional, Directive, TemplateRef, NgModule } from '@angular/core';
+import { ElementRef, Injector, InjectionToken, inject, Directive, Injectable, ComponentFactoryResolver, ViewContainerRef, ApplicationRef, Inject, TemplateRef } from '@angular/core';
 import { DOCUMENT } from '@angular/common';
 import { DomPortalOutlet, ComponentPortal, TemplatePortal } from '@angular/cdk/portal';
 
@@ -521,11 +521,26 @@ function attribute(attrs) {
 
 var AlwaysOnTop;
 (function (AlwaysOnTop) {
+    /**
+     * Display as open order
+     */
     AlwaysOnTop[AlwaysOnTop["None"] = 0] = "None";
-    AlwaysOnTop[AlwaysOnTop["Normal"] = 1] = "Normal";
+    /**
+     * Modals
+     */
     AlwaysOnTop[AlwaysOnTop["Modal"] = 2] = "Modal";
-    AlwaysOnTop[AlwaysOnTop["Toast"] = 3] = "Toast";
-    AlwaysOnTop[AlwaysOnTop["UAC"] = 100] = "UAC";
+    /**
+     * User access control
+     */
+    AlwaysOnTop[AlwaysOnTop["UAC"] = 3] = "UAC";
+    /**
+     * Toast...
+     */
+    AlwaysOnTop[AlwaysOnTop["Toast"] = 4] = "Toast";
+    /**
+     * Like select drop down, tooltip, stb...
+     */
+    AlwaysOnTop[AlwaysOnTop["Control"] = 5] = "Control";
 })(AlwaysOnTop || (AlwaysOnTop = {}));
 // TODO: disposing, disposed
 class ChildRef extends ElementRef {
@@ -557,12 +572,6 @@ class ChildRef extends ElementRef {
             this.state.destroy();
             delete this.state;
         });
-        // this.state.current$.subscribe(state => {
-        //     console.log(this, state)
-        // })
-        // this.state.status$.subscribe(status => {
-        //     console.log(this.nativeElement, status)
-        // })
     }
     dispose() {
         if (this.state == null) {
@@ -642,6 +651,113 @@ class BackdropRef extends ChildRef {
     }
 }
 
+class ExternalRef extends ChildRef {
+}
+
+const LAYER_CONTAINER_ZINDEX_START = new InjectionToken("LAYER_CONTAINER_ZINDEX_START");
+class LayerContainer {
+    constructor() {
+        this.#children = [];
+        this.zIndexStart = inject(LAYER_CONTAINER_ZINDEX_START);
+    }
+    #children;
+    append(ref) {
+        if (!this.#children.includes(ref)) {
+            this.#children.push(ref);
+            this.#update();
+            this.root.appendChild(ref.nativeElement);
+            ref.state.on("disposing", () => this.#remove(ref));
+        }
+        return ref;
+    }
+    #remove(ref) {
+        const idx = this.#children.indexOf(ref);
+        if (idx > -1) {
+            this.#children.splice(idx, 1);
+            this.#update();
+        }
+    }
+    #update() {
+        const children = toSorted(this.#children, sortChildren2);
+        let zIndex = this.zIndexStart;
+        for (const child of children) {
+            child.zIndex = zIndex;
+            zIndex += 1;
+        }
+        children.sort(sortByZIndexDesc);
+        let hasBackdrop = false;
+        for (const child of children) {
+            if (child instanceof BackdropRef && child.options.color !== "transparent") {
+                child.visible = !hasBackdrop;
+                hasBackdrop = true;
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: LayerContainer, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.6", type: LayerContainer, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: LayerContainer, decorators: [{
+            type: Directive
+        }] });
+class RootLayer extends LayerContainer {
+    constructor() {
+        super(...arguments);
+        this.root = inject(DOCUMENT).body;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: RootLayer, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: RootLayer }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: RootLayer, decorators: [{
+            type: Injectable
+        }] });
+class IndividualLayer extends LayerContainer {
+    constructor() {
+        super(...arguments);
+        this.root = inject(ElementRef).nativeElement;
+    }
+    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: LayerContainer, useExisting: IndividualLayer }], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: IndividualLayer, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    providers: [{ provide: LayerContainer, useExisting: IndividualLayer }]
+                }]
+        }] });
+function sortChildren2(a, b) {
+    const alwaysOnTop = sortByAlwaysOnTop(a, b);
+    if (alwaysOnTop === 0) {
+        return sortByBackdrop(a, b);
+    }
+    else {
+        return alwaysOnTop;
+    }
+}
+function sortByBackdrop(a, b) {
+    if (a instanceof BackdropRef && a.under === b) {
+        return -1;
+    }
+    else if (b instanceof BackdropRef && b.under === a) {
+        return 1;
+    }
+    return 0;
+}
+function sortByZIndexDesc(a, b) {
+    return b.zIndex - a.zIndex;
+}
+function sortByAlwaysOnTop(a, b) {
+    return getAlwaysOnTop(a) - getAlwaysOnTop(b);
+}
+function getAlwaysOnTop(child) {
+    if (child instanceof BackdropRef) {
+        return child.under.alwaysOnTop || AlwaysOnTop.None;
+    }
+    else {
+        return child.alwaysOnTop || AlwaysOnTop.None;
+    }
+}
+
 class PortalRef extends ContainerRef {
     constructor(options) {
         super(options);
@@ -691,149 +807,62 @@ class TemplatePortalRef extends PortalRef {
     }
 }
 
-const LAYER_ZINDEX_START = new InjectionToken("LAYER_ZINDEX_START");
 // TODO: ELEVATION_STEP config with injection
 // TODO: ELEVATION_START config with injection
 class LayerService {
+    #container = inject(LayerContainer);
     #cover = inject(CoverService);
     #injector = inject(Injector);
-    #document = inject(DOCUMENT);
-    #el = inject(ElementRef, { optional: true, self: true });
+    #appRef = inject(ApplicationRef);
     get root() {
-        return (this.#el && this.#el.nativeElement) || this.#document.body;
-    }
-    // readonly #el = this.root.nativeElement
-    #children = [];
-    #zIndexStart;
-    // readonly #backdrop: Map<>
-    constructor(zIndexStart) {
-        if (zIndexStart != null) {
-            this.#zIndexStart = zIndexStart;
-        }
-        else {
-            this.#zIndexStart = 10000;
-        }
+        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.#injector };
+            options = { ...options, injector: this.#getInjector() };
         }
-        return this.append(new ComponentPortalRef(component, options));
+        return this.#container.append(new ComponentPortalRef(component, options));
     }
     newTemplatePortal(tpl, options) {
         if (!options.injector) {
-            options = { ...options, injector: this.#injector };
+            options = { ...options, injector: this.#getInjector() };
         }
-        return this.append(new TemplatePortalRef(tpl, options));
+        return this.#container.append(new TemplatePortalRef(tpl, options));
     }
     newContainer(options) {
         if (!options.injector) {
-            options = { ...options, injector: this.#injector };
+            options = { ...options, injector: this.#getInjector() };
         }
-        return this.append(new ContainerRef(options));
+        return this.#container.append(new ContainerRef(options));
     }
     newBackdrop(under, options) {
         const coverRef = this.#cover.create(this.root, options);
-        return this.append(new BackdropRef(coverRef, under, options));
+        return this.#container.append(new BackdropRef(coverRef, under, options));
     }
-    append(ref) {
-        if (!this.#children.includes(ref)) {
-            this.#children.push(ref);
-            this.#update();
-            this.root.appendChild(ref.nativeElement);
-            ref.state.on("disposed", () => this.#remove(ref));
-        }
-        return ref;
-    }
-    #remove(ref) {
-        const idx = this.#children.indexOf(ref);
-        if (idx > -1) {
-            this.#children.splice(idx, 1);
-            this.#update();
-        }
+    addExternal(element, alwaysOnTop = AlwaysOnTop.None) {
+        return this.#container.append(new ExternalRef(coerceElement(element), alwaysOnTop));
     }
-    #update() {
-        const children = toSorted(this.#children, sortChildren2);
-        let zIndex = this.#zIndexStart;
-        for (const child of children) {
-            child.zIndex = zIndex;
-            zIndex += 1;
-        }
-        children.sort(sortByZIndexDesc);
-        let hasBackdrop = false;
-        for (const child of children) {
-            if (child instanceof BackdropRef && child.options.color !== "transparent") {
-                child.visible = !hasBackdrop;
-                hasBackdrop = true;
-            }
+    #getInjector() {
+        try {
+            this.#injector.get(ViewContainerRef);
+            return this.#injector;
+            // eslint-disable-next-line no-empty
         }
+        catch (err) { }
+        const root = this.#appRef.components[0];
+        return root.injector;
     }
-    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.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: LayerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: LayerService }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: LayerService, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [LAYER_ZINDEX_START]
-                }, {
-                    type: Optional
-                }] }] });
-class RootLayer extends LayerService {
-    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: "18.2.6", ngImport: i0, type: RootLayer, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: "body",
-                    standalone: true,
-                    providers: [{ provide: LayerService, useExisting: RootLayer }]
-                }]
-        }] });
-class IndividualLayer extends LayerService {
-    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: "18.2.6", ngImport: i0, type: IndividualLayer, decorators: [{
-            type: Directive,
-            args: [{
-                    standalone: true,
-                    providers: [{ provide: LayerService, useExisting: IndividualLayer }]
-                }]
-        }] });
-function sortChildren2(a, b) {
-    const alwaysOnTop = sortByAlwaysOnTop(a, b);
-    if (alwaysOnTop === 0) {
-        return sortByBackdrop(a, b);
-    }
-    else {
-        return alwaysOnTop;
-    }
-}
-function sortByBackdrop(a, b) {
-    if (a instanceof BackdropRef && a.under === b) {
-        return -1;
-    }
-    else if (b instanceof BackdropRef && b.under === a) {
-        return 1;
-    }
-    return 0;
-}
-function sortByZIndexDesc(a, b) {
-    return b.zIndex - a.zIndex;
-}
-function sortByAlwaysOnTop(a, b) {
-    return getAlwaysOnTop(a) - getAlwaysOnTop(b);
-}
-function getAlwaysOnTop(child) {
-    if (child instanceof BackdropRef) {
-        return child.under.alwaysOnTop || AlwaysOnTop.None;
-    }
-    else {
-        return child.alwaysOnTop || AlwaysOnTop.None;
-    }
-}
+        }], ctorParameters: () => [] });
 
 const TRAITS = new InjectionToken("TRAITS");
 let UID_COUNTER = 0;
@@ -1061,23 +1090,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImpor
             type: Injectable
         }] });
 
-class NuFloating {
-    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] }); }
+const DEFAULTS = {
+    zIndexStart: 10000
+};
+function provideFloating(options = {}) {
+    const opts = { ...DEFAULTS, ...options };
+    return [
+        { provide: LAYER_CONTAINER_ZINDEX_START, useValue: opts.zIndexStart },
+        { provide: LayerContainer, useClass: RootLayer },
+        LayerService,
+        FloatingService
+    ];
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: NuFloating, decorators: [{
-            type: NgModule,
-            args: [{
-                    providers: [FloatingService],
-                    imports: [RootLayer],
-                    exports: [RootLayer]
-                }]
-        }] });
 
 /**
  * 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_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 };
+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 };
 //# sourceMappingURL=ngutil-floating.mjs.map