@ngutil/floating 0.0.27

package/fesm2022/ngutil-floating.mjs

@@ -0,0 +1,588 @@
+import * as i0 from '@angular/core';
+import { ElementRef, Injector, ComponentFactoryResolver, ViewContainerRef, InjectionToken, inject, Directive, Inject, Optional, Injectable, TemplateRef } from '@angular/core';
+import { Observable, combineLatest, of, ReplaySubject, filter, shareReplay, takeUntil, map, EMPTY, merge } from 'rxjs';
+import { DimensionWatcher, RectWatcher } from '@ngutil/style';
+import { StateChain, toSorted } from '@ngutil/common';
+import { CoverService } from '@ngutil/graphics';
+import { DomPortalOutlet, ComponentPortal, TemplatePortal } from '@angular/cdk/portal';
+
+class FloatingTrait {
+}
+
+function computePosition({ floating, anchor, placement, options }) {
+    // TODO: jelenleg csak center van
+    const maxWidth = placement.width;
+    const maxHeight = placement.height;
+    const cf = {
+        current: {
+            x: (maxWidth - floating.width) / 2,
+            y: (maxHeight - floating.height) / 2,
+            width: Math.min(maxHeight, floating.width),
+            height: Math.min(maxHeight, floating.height)
+        },
+        max: { width: maxWidth, height: maxHeight },
+        min: { width: 0, height: 0 }
+    };
+    return { floating: cf };
+}
+
+class FloatingAnchorRef extends ElementRef {
+}
+class FloatingPlacementRef extends ElementRef {
+}
+class PositionTrait extends FloatingTrait {
+    constructor(options) {
+        super();
+        this.options = options;
+        this.name = "position";
+        if (!options.anchor) {
+            options.anchor = { ref: "viewport", align: "center middle" };
+        }
+        if (!options.placement) {
+            options.placement = { ref: "viewport" };
+        }
+    }
+    connect(floatingRef) {
+        return new Observable((dest) => {
+            const injector = floatingRef.container.injector;
+            const dimWatcher = injector.get(DimensionWatcher);
+            const rectWatcher = injector.get(RectWatcher);
+            const watches = {
+                floating: 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);
+            });
+        });
+    }
+}
+function refWatcher(rectWatcher, ref, floatingRef) {
+    if (ref === "layer") {
+        return rectWatcher.watch(floatingRef.layerSvc.root, "border-box");
+    }
+    else if (ref === "viewport" || ref instanceof Window) {
+        return rectWatcher.watch(window, "border-box");
+    }
+    else {
+        return rectWatcher.watch(ref, "border-box");
+    }
+}
+function position(options) {
+    return new PositionTrait(options);
+}
+class FloatingPosition {
+    constructor(options, floating, anchor, placement) {
+        this.options = options;
+        this.floating = floating;
+        this.anchor = anchor;
+        this.placement = placement;
+        this.computed = computePosition({ floating, anchor, placement, options });
+    }
+    apply(floatingRef) {
+        if (this.computed == null) {
+            return;
+        }
+        const floatingEl = floatingRef.container.nativeElement;
+        floatingEl.style.left = `${this.computed.floating.current.x}px`;
+        floatingEl.style.top = `${this.computed.floating.current.y}px`;
+    }
+}
+
+// TODO: disposing, disposed
+class ChildRef extends ElementRef {
+    /**
+     * @internal
+     */
+    set zIndex(val) {
+        if (this._zIndex !== val) {
+            this._zIndex = val;
+            this.nativeElement.style.zIndex = String(val);
+        }
+    }
+    get zIndex() {
+        return this._zIndex;
+    }
+    constructor(nativeElement) {
+        super(nativeElement);
+        this.state = new StateChain({
+            showing: {},
+            shown: {},
+            disposing: { cancellable: false },
+            disposed: { cancellable: false, order: "sequential" }
+        });
+        this._zIndex = -1;
+        this.state.on("disposed", () => this.destroy());
+        // this.state.current$.subscribe(state => {
+        //     console.log(this, state)
+        // })
+    }
+    dispose() {
+        if (this.state == null) {
+            return of(null);
+        }
+        return this.state.run(["disposing", "disposed"]);
+    }
+    destroy() {
+        this.nativeElement.parentElement?.removeChild(this.nativeElement);
+        this.state.destroy();
+        delete this.state;
+    }
+}
+
+class ContainerRef extends ChildRef {
+    constructor(options) {
+        super(createElement(options));
+        this.options = options;
+        this.injectorName = "ContainerRef";
+        const providers = options.providers || [];
+        this.injector = Injector.create({
+            providers: [...this.getProviders(), ...providers],
+            parent: options.injector,
+            name: this.injectorName
+        });
+        this.state.on("disposed", () => {
+            delete this.options;
+            delete this.injector;
+        });
+    }
+    getProviders() {
+        return [
+            { provide: ChildRef, useValue: this },
+            { provide: ContainerRef, useValue: this }
+        ];
+    }
+}
+function createElement(options) {
+    const div = document.createElement("div");
+    div.style.position = "absolute";
+    div.style.top = "0";
+    div.style.left = "0";
+    div.style.width = "max-content";
+    if (options.classes) {
+        div.classList.add(...options.classes);
+    }
+    return div;
+}
+
+class BackdropRef extends ChildRef {
+    static from(cover, injector, options) {
+        const ref = new BackdropRef(document.createElement("div"), cover, injector, options);
+        // TODO: kérdéses
+        // options.under.state.control(ref.state)
+        return ref;
+    }
+    #coverSub;
+    set visible(visible) {
+        if (this.#visible !== visible) {
+            this.#visible = visible;
+            this.nativeElement.style.visibility = visible ? "visible" : "hidden";
+        }
+    }
+    get visible() {
+        return this.#visible;
+    }
+    #visible = true;
+    constructor(nativeElement, coverSvc, injector, options) {
+        super(nativeElement);
+        this.coverSvc = coverSvc;
+        this.injector = injector;
+        this.options = options;
+        nativeElement.style.position = "absolute";
+        nativeElement.style.top =
+            nativeElement.style.right =
+                nativeElement.style.bottom =
+                    nativeElement.style.left =
+                        "0px";
+        this.under = options.under;
+        if (options.type === "solid") {
+            this.#coverSub = this.coverSvc.solid({ container: nativeElement, color: options.color }).subscribe();
+            this.group = `${options.color === "transparent" ? "transparent" : "solid"}`;
+        }
+        else if (options.type === "crop") {
+            this.#coverSub = this.coverSvc
+                .crop({ container: nativeElement, color: options.color, crop: options.crop })
+                .subscribe();
+        }
+    }
+    show() {
+        return this.state.run(["showing", "shown"]);
+    }
+    destroy() {
+        this.#coverSub?.unsubscribe();
+        super.destroy();
+    }
+}
+
+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 }];
+    }
+}
+
+const LAYER_ZINDEX_START = new InjectionToken("LAYER_ZINDEX_START");
+// TODO: ELEVATION_STEP config with injection
+// TODO: ELEVATION_START config with injection
+class LayerService {
+    #cover;
+    #injector;
+    // readonly #el = this.root.nativeElement
+    #children;
+    #zIndexStart;
+    // readonly #backdrop: Map<>
+    constructor(zIndexStart) {
+        this.#cover = inject(CoverService);
+        this.#injector = inject(Injector);
+        this.root = inject(ElementRef);
+        // readonly #el = this.root.nativeElement
+        this.#children = [];
+        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(options) {
+        return this.append(BackdropRef.from(this.#cover, this.#injector, options));
+    }
+    append(ref) {
+        if (!this.#children.includes(ref)) {
+            this.#children.push(ref);
+            this.#update();
+            this.root.nativeElement.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();
+        }
+    }
+    #update() {
+        const children = toSorted(this.#children, sortByBackdrop);
+        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.type === "solid") {
+                child.visible = !hasBackdrop;
+                hasBackdrop = true;
+            }
+        }
+    }
+    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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: LayerService, decorators: [{
+            type: Directive
+        }], 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: "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 }], exportAs: ["nuRootLayer"], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: RootLayer, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "body",
+                    exportAs: "nuRootLayer",
+                    standalone: true,
+                    providers: [{ provide: LayerService, useExisting: RootLayer }]
+                }]
+        }] });
+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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: IndividualLayer, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    providers: [{ provide: LayerService, useExisting: IndividualLayer }]
+                }]
+        }] });
+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;
+}
+
+const TRAITS = new InjectionToken("TRAITS");
+class FloatingRef {
+    #traits;
+    #untilCleanup;
+    #untilDisposed;
+    constructor(layerSvc, container, traits) {
+        this.layerSvc = layerSvc;
+        this.container = container;
+        this.channel = new ReplaySubject(1);
+        this.state = new StateChain({
+            init: {},
+            showing: {},
+            shown: {},
+            closing: { cancellable: false, order: "sequential" },
+            disposing: { cancellable: false },
+            disposed: { cancellable: false, order: "sequential" },
+            cleanup: { cancellable: false, order: "sequential" }
+        });
+        this.#traits = {};
+        this.#untilCleanup = this.state.current$.pipe(filter(state => state === "cleanup"), shareReplay(1));
+        this.#untilDisposed = this.state.current$.pipe(filter(state => state === "cleanup"), shareReplay(1));
+        this.#traits = traits;
+        this.traitState$ = this.#traitState().pipe(shareReplay(1));
+        const sub = this.state.current$.subscribe(state => {
+            this.channel.next({ type: state });
+        });
+        this.state.on("init", () => {
+            this.traitState$.pipe(takeUntil(this.#untilCleanup)).subscribe();
+        });
+        this.state.on("disposed", () => {
+            sub.unsubscribe();
+        });
+        this.state.control(container.state);
+    }
+    show() {
+        return this.state.run(["init", "showing", "shown"]);
+    }
+    hide() {
+        return this.state.run(["disposing", "disposed", "cleanup"]);
+    }
+    close() {
+        return this.state.run(["closing", "disposing", "disposed", "cleanup"]);
+    }
+    watchTrait(name) {
+        return this.traitState$.pipe(takeUntil(this.#untilDisposed), filter(event => event.name === name), map(event => event.data), shareReplay(1));
+    }
+    #traitState() {
+        const src = [];
+        for (const [k, v] of Object.entries(this.#traits)) {
+            src.push(v.connect(this).pipe(takeUntil(this.#untilCleanup), map(result => {
+                return { name: k, data: result };
+            })));
+        }
+        if (src.length === 0) {
+            return EMPTY;
+        }
+        else if (src.length === 1) {
+            return src[0];
+        }
+        else {
+            return merge(...src);
+        }
+    }
+    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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: FloatingRef, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: LayerService }, { type: ContainerRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [TRAITS]
+                }] }] });
+
+// export type FloatingTrait = (...args: any[]) => (traits: object) => Observable<object>
+class FloatingFactory {
+    constructor(layer) {
+        this.layer = layer;
+        this.traits = {};
+        this.subscribe = (...args) => this.show().subscribe(...args);
+    }
+    trait(...traits) {
+        for (const trait of traits) {
+            if (Array.isArray(trait)) {
+                this.trait(...trait);
+            }
+            else {
+                this.traits[trait.name] = trait;
+            }
+        }
+        return this;
+    }
+    show() {
+        return new Observable((dest) => {
+            let disposed = false;
+            const ref = this.create();
+            const channelSub = ref.channel.subscribe(event => {
+                dest.next(event);
+                if (event.type === "disposed") {
+                    disposed = true;
+                    dest.complete();
+                }
+            });
+            const showSub = ref.show().subscribe();
+            return () => {
+                showSub.unsubscribe();
+                channelSub.unsubscribe();
+                if (!disposed) {
+                    const dispose$ = ref.channel.subscribe(event => {
+                        if (event.type === "disposed") {
+                            hideSub.unsubscribe();
+                            dispose$.unsubscribe();
+                        }
+                    });
+                    const hideSub = ref.hide().subscribe();
+                }
+            };
+        });
+    }
+    providers(providers) {
+        if (!providers) {
+            providers = [];
+        }
+        providers = [
+            ...providers,
+            { provide: TRAITS, useValue: this.traits },
+            { provide: LayerService, useValue: this.layer },
+            FloatingRef
+        ];
+        return providers;
+    }
+    position(options) {
+        return this.trait(position(options));
+    }
+}
+class FloatingTemplateFactory extends FloatingFactory {
+    constructor(layer, tpl, options) {
+        super(layer);
+        this.tpl = tpl;
+        this.options = options;
+    }
+    create() {
+        const options = { ...this.options };
+        options.providers = this.providers(options.providers);
+        const container = this.layer.newTemplatePortal(this.tpl, options);
+        return container.injector.get(FloatingRef);
+    }
+}
+class FloatingComponentFactory extends FloatingFactory {
+    constructor(layer, component, options) {
+        super(layer);
+        this.component = component;
+        this.options = options;
+    }
+    create() {
+        const options = { ...this.options };
+        options.providers = this.providers(options.providers);
+        const container = this.layer.newComponentPortal(this.component, options);
+        return container.injector.get(FloatingRef);
+    }
+}
+/**
+ * @example
+ * ```typescript
+ * class SomeComponent {}
+ *
+ * class SomeList {
+ *      readonly floating = inject(FloatingService)
+ *
+ *      showComponent() {
+ *          this.floating.from(SomeComponent).traits(position(), backdrop()).subscribe()
+ *      }
+ * ```
+ */
+class FloatingService {
+    #layer = inject(LayerService);
+    from(value, opts) {
+        if (value instanceof TemplateRef) {
+            return new FloatingTemplateFactory(this.#layer, value, opts);
+        }
+        else {
+            return new FloatingComponentFactory(this.#layer, 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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: FloatingService, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { BackdropRef, ChildRef, ComponentPortalRef, FloatingAnchorRef, FloatingComponentFactory, FloatingFactory, FloatingPlacementRef, FloatingPosition, FloatingRef, FloatingService, FloatingTemplateFactory, IndividualLayer, LAYER_ZINDEX_START, LayerService, PortalRef, PositionTrait, RootLayer, TRAITS, TemplatePortalRef, computePosition, position };
+//# sourceMappingURL=ngutil-floating.mjs.map