@ngutil/floating 0.0.62 → 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, Directive, Inject, Optional, Injectable, 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,99 +651,22 @@ class BackdropRef extends ChildRef {
     }
 }
 
-class PortalRef extends ContainerRef {
-    constructor(options) {
-        super(options);
-        this.injectorName = "PortalRef";
-        this.outlet = new DomPortalOutlet(this.nativeElement, undefined, undefined, this.injector);
-        this.state.on("disposed", () => {
-            this.outlet.dispose();
-            delete this.outlet;
-        });
-    }
-    getProviders() {
-        return [...super.getProviders(), { provide: PortalRef, useValue: this }];
-    }
-}
-class ComponentPortalRef extends PortalRef {
-    constructor(component, options) {
-        super(options);
-        this.component = component;
-        this.injectorName = "ComponentPortalRef";
-        const resolver = this.injector.get(ComponentFactoryResolver);
-        const vcr = this.injector.get(ViewContainerRef);
-        this.portal = new ComponentPortal(component, options.viewContainerRef || vcr, this.injector, resolver);
-        this.outlet.attach(this.portal);
-        this.state.on("disposed", () => {
-            this.portal.isAttached && this.portal.detach();
-            delete this.portal;
-        });
-    }
-    getProviders() {
-        return [...super.getProviders(), { provide: ComponentPortalRef, useValue: this }];
-    }
-}
-class TemplatePortalRef extends PortalRef {
-    constructor(template, options) {
-        super(options);
-        this.template = template;
-        this.injectorName = "TemplatePortalRef";
-        this.portal = new TemplatePortal(template, options.viewContainerRef, options.context);
-        this.outlet.attach(this.portal);
-        this.state.on("disposed", () => {
-            this.portal.isAttached && this.portal.detach();
-            delete this.portal;
-        });
-    }
-    getProviders() {
-        return [...super.getProviders(), { provide: TemplatePortalRef, useValue: this }];
-    }
+class ExternalRef extends ChildRef {
 }
 
-const LAYER_ZINDEX_START = new InjectionToken("LAYER_ZINDEX_START");
-// TODO: ELEVATION_STEP config with injection
-// TODO: ELEVATION_START config with injection
-class LayerService {
-    #cover = inject(CoverService);
-    #injector = inject(Injector);
-    #children = [];
-    #zIndexStart;
-    constructor(zIndexStart) {
-        if (zIndexStart != null) {
-            this.#zIndexStart = zIndexStart;
-        }
-        else {
-            this.#zIndexStart = 10000;
-        }
-    }
-    newComponentPortal(component, options) {
-        if (!options.injector) {
-            options = { ...options, injector: this.#injector };
-        }
-        return this.append(new ComponentPortalRef(component, options));
-    }
-    newTemplatePortal(tpl, options) {
-        if (!options.injector) {
-            options = { ...options, injector: this.#injector };
-        }
-        return this.append(new TemplatePortalRef(tpl, options));
-    }
-    newContainer(options) {
-        if (!options.injector) {
-            options = { ...options, injector: this.#injector };
-        }
-        return this.append(new ContainerRef(options));
-    }
-    newBackdrop(under, options) {
-        const coverRef = this.#cover.create(this.root, options);
-        return this.append(new BackdropRef(coverRef, under, options));
+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("disposed", () => this.#remove(ref));
+            ref.state.on("disposing", () => this.#remove(ref));
         }
         return ref;
     }
@@ -747,7 +679,7 @@ class LayerService {
     }
     #update() {
         const children = toSorted(this.#children, sortChildren2);
-        let zIndex = this.#zIndexStart;
+        let zIndex = this.zIndexStart;
         for (const child of children) {
             child.zIndex = zIndex;
             zIndex += 1;
@@ -761,42 +693,36 @@ class LayerService {
             }
         }
     }
-    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 }); }
+    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: LayerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: LayerContainer, decorators: [{
             type: Directive
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [LAYER_ZINDEX_START]
-                }, {
-                    type: Optional
-                }] }] });
-class RootLayer extends LayerService {
-    #doc = inject(DOCUMENT);
-    get root() {
-        return this.#doc.body;
+        }] });
+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, providedIn: "root" }); }
+    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,
-            args: [{ providedIn: "root" }]
+            type: Injectable
         }] });
-class IndividualLayer extends LayerService {
-    #el = inject(ElementRef);
-    get root() {
-        return this.#el.nativeElement;
+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: LayerService, useExisting: IndividualLayer }], usesInheritance: true, ngImport: i0 }); }
+    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: LayerService, useExisting: IndividualLayer }]
+                    providers: [{ provide: LayerContainer, useExisting: IndividualLayer }]
                 }]
         }] });
 function sortChildren2(a, b) {
@@ -832,6 +758,112 @@ function getAlwaysOnTop(child) {
     }
 }
 
+class PortalRef extends ContainerRef {
+    constructor(options) {
+        super(options);
+        this.injectorName = "PortalRef";
+        this.outlet = new DomPortalOutlet(this.nativeElement, undefined, undefined, this.injector);
+        this.state.on("disposed", () => {
+            this.outlet.dispose();
+            delete this.outlet;
+        });
+    }
+    getProviders() {
+        return [...super.getProviders(), { provide: PortalRef, useValue: this }];
+    }
+}
+class ComponentPortalRef extends PortalRef {
+    constructor(component, options) {
+        super(options);
+        this.component = component;
+        this.injectorName = "ComponentPortalRef";
+        const resolver = this.injector.get(ComponentFactoryResolver);
+        const vcr = this.injector.get(ViewContainerRef);
+        this.portal = new ComponentPortal(component, options.viewContainerRef || vcr, this.injector, resolver);
+        this.outlet.attach(this.portal);
+        this.state.on("disposed", () => {
+            this.portal.isAttached && this.portal.detach();
+            delete this.portal;
+        });
+    }
+    getProviders() {
+        return [...super.getProviders(), { provide: ComponentPortalRef, useValue: this }];
+    }
+}
+class TemplatePortalRef extends PortalRef {
+    constructor(template, options) {
+        super(options);
+        this.template = template;
+        this.injectorName = "TemplatePortalRef";
+        this.portal = new TemplatePortal(template, options.viewContainerRef, options.context);
+        this.outlet.attach(this.portal);
+        this.state.on("disposed", () => {
+            this.portal.isAttached && this.portal.detach();
+            delete this.portal;
+        });
+    }
+    getProviders() {
+        return [...super.getProviders(), { provide: TemplatePortalRef, useValue: this }];
+    }
+}
+
+// TODO: ELEVATION_STEP config with injection
+// TODO: ELEVATION_START config with injection
+class LayerService {
+    #container = inject(LayerContainer);
+    #cover = inject(CoverService);
+    #injector = inject(Injector);
+    #appRef = inject(ApplicationRef);
+    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() };
+        }
+        return this.#container.append(new ComponentPortalRef(component, options));
+    }
+    newTemplatePortal(tpl, options) {
+        if (!options.injector) {
+            options = { ...options, injector: this.#getInjector() };
+        }
+        return this.#container.append(new TemplatePortalRef(tpl, options));
+    }
+    newContainer(options) {
+        if (!options.injector) {
+            options = { ...options, injector: this.#getInjector() };
+        }
+        return this.#container.append(new ContainerRef(options));
+    }
+    newBackdrop(under, options) {
+        const coverRef = this.#cover.create(this.root, options);
+        return this.#container.append(new BackdropRef(coverRef, under, options));
+    }
+    addExternal(element, alwaysOnTop = AlwaysOnTop.None) {
+        return this.#container.append(new ExternalRef(coerceElement(element), alwaysOnTop));
+    }
+    #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: [], 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: () => [] });
+
 const TRAITS = new InjectionToken("TRAITS");
 let UID_COUNTER = 0;
 class FloatingRef {
@@ -1058,21 +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 }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: NuFloating, providers: [FloatingService, { provide: LayerService, useClass: RootLayer }] }); }
+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, { provide: LayerService, useClass: 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