@firestitch/popover 12.3.0 → 14.0.0

package/fesm2015/firestitch-popover.mjs

@@ -0,0 +1,611 @@
+import * as i0 from '@angular/core';
+import { Component, ChangeDetectionStrategy, ViewChild, TemplateRef, Injectable, Directive, Optional, Input, HostBinding, NgModule } from '@angular/core';
+import * as i2 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i3 from '@angular/cdk/portal';
+import { BasePortalOutlet, CdkPortalOutlet, PortalInjector, TemplatePortal, ComponentPortal, PortalModule } from '@angular/cdk/portal';
+import * as i2$1 from '@angular/router';
+import { NavigationEnd } from '@angular/router';
+import { BehaviorSubject, combineLatest, Subject, fromEvent, timer, pipe, merge } from 'rxjs';
+import { map, filter, takeUntil, debounceTime, delay, tap, switchMap, mapTo, startWith, distinctUntilChanged, withLatestFrom, finalize } from 'rxjs/operators';
+import { guid } from '@firestitch/common';
+import * as i1 from '@angular/cdk/overlay';
+import { OverlayConfig } from '@angular/cdk/overlay';
+
+var Position;
+(function (Position) {
+    Position["North"] = "north";
+    Position["South"] = "south";
+    Position["East"] = "east";
+    Position["West"] = "west";
+})(Position || (Position = {}));
+
+function pointInRect(x1, y1, x2, y2, px, py) {
+    return (px > x1 && px < x2) && (py > y1 && py < y2);
+}
+
+class FsPopoverRef {
+    constructor(config = {}) {
+        this._autoShow$ = new BehaviorSubject(true);
+        this._autoClose$ = new BehaviorSubject(true);
+        this._componentLoading$ = new BehaviorSubject(true);
+        this._init(config);
+    }
+    get loadingDiameter() {
+        return this._loadingDiameter;
+    }
+    get size() {
+        return this._size;
+    }
+    get theme() {
+        return this._theme;
+    }
+    get loading() {
+        return this._loading;
+    }
+    get autoShow$() {
+        return this._autoShow$.asObservable();
+    }
+    get autoShow() {
+        return this._autoShow$.getValue();
+    }
+    set autoShow(value) {
+        this._autoShow$.next(value);
+    }
+    get autoClose$() {
+        return this._autoClose$.asObservable();
+    }
+    get autoClose() {
+        return this._autoClose$.getValue();
+    }
+    set autoClose(value) {
+        this._autoClose$.next(value);
+    }
+    get componentVisible$() {
+        return combineLatest([
+            this.autoShow$,
+            this.componentLoading$,
+        ]).pipe(map(([autoShow, componentLoading]) => {
+            return autoShow || !componentLoading;
+        }));
+    }
+    get componentLoading$() {
+        return this._componentLoading$.asObservable();
+    }
+    get componentLoading() {
+        return this._componentLoading$.getValue();
+    }
+    get wrapperClass() {
+        return this._wrapperClass;
+    }
+    get maxWidth() {
+        return this._maxWidth;
+    }
+    show() {
+        setTimeout(() => {
+            this._componentLoading$.next(false);
+            setTimeout(() => {
+                this.updatePosition();
+            });
+        });
+    }
+    close() {
+        this.overlayRef.detach();
+        this._componentLoading$.next(true);
+    }
+    updatePosition() {
+        this.overlayRef.updatePosition();
+    }
+    _init(config) {
+        this._wrapperClass = config.wrapperClass;
+        this._maxWidth = config.maxWidth;
+        this._loading = config.loading;
+        this._loadingDiameter = config.loadingDiameter;
+        this._size = config.size;
+        this._theme = config.theme;
+        this._autoShow$.next(config.autoShow);
+        this._autoClose$.next(config.autoClose);
+    }
+}
+
+class FsPopoverWrapperComponent extends BasePortalOutlet {
+    constructor(popoverRef, _el, _zone, _renderer) {
+        super();
+        this.popoverRef = popoverRef;
+        this._el = _el;
+        this._zone = _zone;
+        this._renderer = _renderer;
+        this._updatePosition = new Subject();
+        this._destroy$ = new Subject();
+        this._updateClass();
+        this.wrapperClass = this.popoverRef.wrapperClass;
+        this.maxWidth = this.popoverRef.maxWidth;
+    }
+    set maxWidth(value) {
+        this._el.nativeElement.style.maxWidth = value ? value + 'px' : void 0;
+    }
+    set wrapperClass(value) {
+        this._wrapperClass = value;
+        this._updateClass();
+    }
+    ngOnInit() {
+        if (!this.popoverRef.autoShow && this.popoverRef.componentLoading) {
+            this._watchMousePosition();
+        }
+        this._observeContentChanges();
+        this._listenUpdatePositionRequests();
+    }
+    ngOnDestroy() {
+        this._contentChangesObserver.disconnect();
+        this._destroy$.next();
+        this._destroy$.complete();
+    }
+    /**
+     * Attach a TemplatePortal as content to this popover container.
+     * @param portal Portal to be attached as the popover content.
+     */
+    attachTemplatePortal(portal) {
+        if (this._portalOutlet.hasAttached()) {
+            throw Error('Popover template already attached');
+        }
+        return this._portalOutlet.attachTemplatePortal(portal);
+    }
+    /**
+     * Attach a ComponentPortal as content to this popover container.
+     * @param portal Portal to be attached as the popover content.
+     */
+    attachComponentPortal(portal) {
+        if (this._portalOutlet.hasAttached()) {
+            throw Error('Popover component already attached');
+        }
+        return this._portalOutlet.attachComponentPortal(portal);
+    }
+    setTextualContent(content) {
+        this.content = content;
+    }
+    updatePosition() {
+        this._updatePosition.next();
+    }
+    _watchMousePosition() {
+        const componentVisibilityChange$ = this.popoverRef.componentVisible$
+            .pipe(filter((value) => value === true));
+        this._zone.runOutsideAngular(() => {
+            fromEvent(document, 'mousemove')
+                .pipe(takeUntil(componentVisibilityChange$), takeUntil(this._destroy$))
+                .subscribe((e) => {
+                this.spinner.nativeElement.style.left = e.x + 'px';
+                this.spinner.nativeElement.style.top = (e.y + 20) + 'px';
+            });
+        });
+    }
+    _updateClass() {
+        if (this._wrapperClass) {
+            this._renderer.addClass(this._el.nativeElement, this._wrapperClass);
+        }
+    }
+    _observeContentChanges() {
+        const config = {
+            childList: true,
+            subtree: true
+        };
+        this._contentChangesObserver = new MutationObserver(() => {
+            this.updatePosition();
+        });
+        this._contentChangesObserver.observe(this._el.nativeElement, config);
+    }
+    _listenUpdatePositionRequests() {
+        this._updatePosition
+            .pipe(debounceTime(50), takeUntil(this._destroy$))
+            .subscribe(() => {
+            this.popoverRef.updatePosition();
+        });
+    }
+}
+FsPopoverWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FsPopoverWrapperComponent, deps: [{ token: FsPopoverRef }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+FsPopoverWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FsPopoverWrapperComponent, selector: "fs-popover-wrapper", host: { classAttribute: "fs-popover-wrapper" }, viewQueries: [{ propertyName: "_portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, static: true }, { propertyName: "spinner", first: true, predicate: ["spinner"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"wrapper\" [ngClass]=\"{\n  'theme-dark' : popoverRef.theme === 'dark',\n  'size-tiny': popoverRef.size === 'tiny',\n  'size-small': popoverRef.size === 'small',\n  'hidden': !(popoverRef.componentVisible$ | async)\n  }\">\n  <div class=\"mat-elevation-z4 popover-content\">\n    <ng-container *ngIf=\"content\">\n      {{content}}\n    </ng-container>\n\n    <ng-template cdkPortalOutlet></ng-template>\n  </div>\n\n  <div class=\"fs-popover-arrow light\"></div>\n  <div class=\"fs-popover-arrow dark\"></div>\n</div>\n\n<div class=\"loading-spinner\"\n    #spinner\n    *ngIf=\"popoverRef.loading && !(popoverRef.componentVisible$ | async)\">\n  <svg xmlns=\"http://www.w3.org/2000/svg\" [attr.width]=\"popoverRef.loadingDiameter\" [attr.height]=\"popoverRef.loadingDiameter\" viewBox=\"0 0 42 42\" stroke=\"grey\">\n    <g fill=\"none\" fill-rule=\"evenodd\">\n      <g transform=\"translate(1 1)\" stroke-width=\"3\">\n        <circle stroke-opacity=\".5\" cx=\"18\" cy=\"18\" r=\"18\"/>\n        <path d=\"M36 18c0-9.94-8.06-18-18-18\">\n          <animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 18 18\" to=\"360 18 18\" dur=\"1s\" repeatCount=\"indefinite\"/>\n        </path>\n      </g>\n    </g>\n  </svg>\n</div>\n", styles: [".wrapper{padding:6px;animation:fadeIn ease .2s}.wrapper.hidden{display:none}.wrapper .popover-content{background:#fff;border-radius:4px;padding:8px;color:#1b1b1b;box-sizing:border-box;overflow:hidden}.wrapper.theme-dark .popover-content{background-color:#707070;color:#fff}.wrapper.size-small .popover-content{font-size:80%}.wrapper.size-tiny .popover-content{font-size:70%}.wrapper .fs-popover-arrow{width:0;height:0;font-size:0;line-height:0;position:absolute;z-index:200;z-index:1}.wrapper .fs-popover-arrow.dark{z-index:0}::ng-deep .fs-popover-top .fs-popover-arrow,::ng-deep .fs-popover-bottom .fs-popover-arrow{border-left:10px solid transparent;border-right:10px solid transparent}::ng-deep .fs-popover-left .fs-popover-arrow,::ng-deep .fs-popover-right .fs-popover-arrow{border-top:10px solid transparent;border-bottom:10px solid transparent}::ng-deep .fs-popover-top .fs-popover-arrow{bottom:-3px;left:calc(50% - 10px);border-top:10px solid #fff}::ng-deep .fs-popover-top .fs-popover-arrow.dark{border-top-color:#dfdfdf40;bottom:-4px}::ng-deep .fs-popover-bottom .fs-popover-arrow{top:-3px;left:calc(50% - 10px);border-bottom:10px solid #fff}::ng-deep .fs-popover-bottom .fs-popover-arrow.dark{border-bottom-color:#dfdfdf40;top:-4px}::ng-deep .fs-popover-left .fs-popover-arrow{left:-3px;top:calc(50% - 10px);border-right:10px solid #fff}::ng-deep .fs-popover-left .fs-popover-arrow.dark{border-right-color:#dfdfdf40;left:-4px}::ng-deep .fs-popover-right .fs-popover-arrow{right:-3px;top:calc(50% - 10px);border-left:10px solid #fff}::ng-deep .fs-popover-right .fs-popover-arrow.dark{border-left-color:#dfdfdf40;right:-4px}::ng-deep .fs-popover-bottom .wrapper.theme-dark .fs-popover-arrow{border-bottom-color:#707070}::ng-deep .fs-popover-left .wrapper.theme-dark .fs-popover-arrow{border-right-color:#707070}::ng-deep .fs-popover-right .wrapper.theme-dark .fs-popover-arrow{border-left-color:#707070}::ng-deep .fs-popover-top .wrapper.theme-dark .fs-popover-arrow{border-top-color:#707070}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FsPopoverWrapperComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fs-popover-wrapper', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        'class': 'fs-popover-wrapper',
+                    }, template: "<div class=\"wrapper\" [ngClass]=\"{\n  'theme-dark' : popoverRef.theme === 'dark',\n  'size-tiny': popoverRef.size === 'tiny',\n  'size-small': popoverRef.size === 'small',\n  'hidden': !(popoverRef.componentVisible$ | async)\n  }\">\n  <div class=\"mat-elevation-z4 popover-content\">\n    <ng-container *ngIf=\"content\">\n      {{content}}\n    </ng-container>\n\n    <ng-template cdkPortalOutlet></ng-template>\n  </div>\n\n  <div class=\"fs-popover-arrow light\"></div>\n  <div class=\"fs-popover-arrow dark\"></div>\n</div>\n\n<div class=\"loading-spinner\"\n    #spinner\n    *ngIf=\"popoverRef.loading && !(popoverRef.componentVisible$ | async)\">\n  <svg xmlns=\"http://www.w3.org/2000/svg\" [attr.width]=\"popoverRef.loadingDiameter\" [attr.height]=\"popoverRef.loadingDiameter\" viewBox=\"0 0 42 42\" stroke=\"grey\">\n    <g fill=\"none\" fill-rule=\"evenodd\">\n      <g transform=\"translate(1 1)\" stroke-width=\"3\">\n        <circle stroke-opacity=\".5\" cx=\"18\" cy=\"18\" r=\"18\"/>\n        <path d=\"M36 18c0-9.94-8.06-18-18-18\">\n          <animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 18 18\" to=\"360 18 18\" dur=\"1s\" repeatCount=\"indefinite\"/>\n        </path>\n      </g>\n    </g>\n  </svg>\n</div>\n", styles: [".wrapper{padding:6px;animation:fadeIn ease .2s}.wrapper.hidden{display:none}.wrapper .popover-content{background:#fff;border-radius:4px;padding:8px;color:#1b1b1b;box-sizing:border-box;overflow:hidden}.wrapper.theme-dark .popover-content{background-color:#707070;color:#fff}.wrapper.size-small .popover-content{font-size:80%}.wrapper.size-tiny .popover-content{font-size:70%}.wrapper .fs-popover-arrow{width:0;height:0;font-size:0;line-height:0;position:absolute;z-index:200;z-index:1}.wrapper .fs-popover-arrow.dark{z-index:0}::ng-deep .fs-popover-top .fs-popover-arrow,::ng-deep .fs-popover-bottom .fs-popover-arrow{border-left:10px solid transparent;border-right:10px solid transparent}::ng-deep .fs-popover-left .fs-popover-arrow,::ng-deep .fs-popover-right .fs-popover-arrow{border-top:10px solid transparent;border-bottom:10px solid transparent}::ng-deep .fs-popover-top .fs-popover-arrow{bottom:-3px;left:calc(50% - 10px);border-top:10px solid #fff}::ng-deep .fs-popover-top .fs-popover-arrow.dark{border-top-color:#dfdfdf40;bottom:-4px}::ng-deep .fs-popover-bottom .fs-popover-arrow{top:-3px;left:calc(50% - 10px);border-bottom:10px solid #fff}::ng-deep .fs-popover-bottom .fs-popover-arrow.dark{border-bottom-color:#dfdfdf40;top:-4px}::ng-deep .fs-popover-left .fs-popover-arrow{left:-3px;top:calc(50% - 10px);border-right:10px solid #fff}::ng-deep .fs-popover-left .fs-popover-arrow.dark{border-right-color:#dfdfdf40;left:-4px}::ng-deep .fs-popover-right .fs-popover-arrow{right:-3px;top:calc(50% - 10px);border-left:10px solid #fff}::ng-deep .fs-popover-right .fs-popover-arrow.dark{border-left-color:#dfdfdf40;right:-4px}::ng-deep .fs-popover-bottom .wrapper.theme-dark .fs-popover-arrow{border-bottom-color:#707070}::ng-deep .fs-popover-left .wrapper.theme-dark .fs-popover-arrow{border-right-color:#707070}::ng-deep .fs-popover-right .wrapper.theme-dark .fs-popover-arrow{border-left-color:#707070}::ng-deep .fs-popover-top .wrapper.theme-dark .fs-popover-arrow{border-top-color:#707070}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"] }]
+        }], ctorParameters: function () { return [{ type: FsPopoverRef }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }]; }, propDecorators: { _portalOutlet: [{
+                type: ViewChild,
+                args: [CdkPortalOutlet, { static: true }]
+            }], spinner: [{
+                type: ViewChild,
+                args: ['spinner']
+            }] } });
+
+function createPopupPositionStrategy(el, overlay, position) {
+    let overlayX = 'center';
+    let overlayY = 'center';
+    let originX = 'center';
+    let originY = 'center';
+    let offsetX = 0;
+    let offsetY = 0;
+    let panelClass = [];
+    switch (position) {
+        case Position.North:
+            originY = 'top';
+            overlayY = 'bottom';
+            panelClass = ['fs-popover-top'];
+            offsetY = -8;
+            break;
+        case Position.South:
+            originY = 'bottom';
+            overlayY = 'top';
+            panelClass = ['fs-popover-bottom'];
+            offsetY = 8;
+            break;
+        case Position.East:
+            overlayX = 'start';
+            originX = 'end';
+            panelClass = ['fs-popover-left'];
+            offsetX = 8;
+            break;
+        case Position.West:
+            overlayX = 'end';
+            originX = 'start';
+            panelClass = ['fs-popover-right'];
+            offsetX = -8;
+            break;
+    }
+    return createBasePopupPositionStrategy(el, overlay)
+        .withPositions([
+        {
+            originX: originX,
+            originY: originY,
+            overlayX: overlayX,
+            overlayY: overlayY,
+            offsetX: offsetX,
+            offsetY: offsetY,
+            panelClass: panelClass,
+        }
+    ]);
+}
+function createBasePopupPositionStrategy(el, overlay) {
+    return overlay.position()
+        .flexibleConnectedTo(el)
+        .withGrowAfterOpen(true)
+        .withFlexibleDimensions(false)
+        .withViewportMargin(4);
+}
+
+function createOverlayRef(el, overlay, position) {
+    const config = {
+        positionStrategy: createPopupPositionStrategy(el, overlay, position),
+        scrollStrategy: overlay.scrollStrategies.reposition(),
+        hasBackdrop: false
+    };
+    const overlayConfig = new OverlayConfig(config);
+    return overlay.create(overlayConfig);
+}
+
+function createInjector(popoverRef, parentInjector) {
+    const injectionTokens = new WeakMap([
+        [FsPopoverRef, popoverRef],
+    ]);
+    return new PortalInjector(parentInjector, injectionTokens);
+}
+
+function createTempatePortal(template, popoverRef, data) {
+    return new TemplatePortal(template, void 0, { data: data, popover: popoverRef });
+}
+
+class FsPopoverService {
+    constructor(_injector, _overlay) {
+        this._injector = _injector;
+        this._overlay = _overlay;
+    }
+    get hasActivePopover() {
+        return !!this._activeElement;
+    }
+    get activeElementGUID() {
+        return this._activeElementGUID;
+    }
+    setActivePopoverGUID(value) {
+        this._activeElementGUID = value;
+    }
+    openPopover(el, content, data, popoverRef, position) {
+        if (this._activeElement) {
+            this.close(this._activeElement.popoverRef);
+        }
+        const overlayRef = createOverlayRef(el, this._overlay, position);
+        const containerRef = this._openPortalPreview(FsPopoverWrapperComponent, overlayRef, popoverRef);
+        if (content instanceof TemplateRef) {
+            const templatePortal = createTempatePortal(content, popoverRef, data);
+            containerRef.instance.attachTemplatePortal(templatePortal);
+        }
+        else {
+            containerRef.instance.setTextualContent(content);
+        }
+        popoverRef.overlayRef = overlayRef;
+        this._activeElement = {
+            overlayRef,
+            popoverRef,
+        };
+        return containerRef.location.nativeElement;
+    }
+    close(popoverRef = null) {
+        if (this._activeElement.popoverRef === popoverRef) {
+            popoverRef.close();
+            this._activeElement = void 0;
+            this._activeElementGUID = void 0;
+        }
+    }
+    _openPortalPreview(component, overlayRef, popoverRef) {
+        const containerPortal = new ComponentPortal(component, void 0, createInjector(popoverRef, this._injector));
+        return overlayRef.attach(containerPortal);
+    }
+}
+FsPopoverService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FsPopoverService, deps: [{ token: i0.Injector }, { token: i1.Overlay }], target: i0.ɵɵFactoryTarget.Injectable });
+FsPopoverService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FsPopoverService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FsPopoverService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i1.Overlay }]; } });
+
+class FsPopoverDirective {
+    constructor(_elRef, _popoverService, _ngZone, _router) {
+        this._elRef = _elRef;
+        this._popoverService = _popoverService;
+        this._ngZone = _ngZone;
+        this._router = _router;
+        this._guid = guid('xxxxxxx');
+        this.leaveDelay = 100;
+        this.showDelay = 0;
+        this.maxWidth = 250;
+        this.autoShow = true;
+        this.autoClose = true;
+        this.loadingDiameter = 20;
+        this.loading = true;
+        this.indication = true;
+        this.position = Position.South;
+        this.theme = 'light';
+        this.size = 'normal';
+        this.trigger = 'mouseover';
+        this.enabled = true;
+        this._initialized = false;
+        this._mouseEnter$ = fromEvent(this._elRef.nativeElement, 'mouseenter');
+        this._mouseMove$ = fromEvent(document, 'mousemove', { passive: true });
+        this._mouseLeave$ = fromEvent(this._elRef.nativeElement, 'mouseleave');
+        this._popoverClosed$ = new Subject();
+        this._destroy$ = new Subject();
+    }
+    get openTimer$() {
+        return timer(this.showDelay);
+    }
+    get closeTimer$() {
+        return timer(this.leaveDelay);
+    }
+    ngOnInit() {
+        if (this.enabled) {
+            this._initialize();
+        }
+    }
+    ngOnChanges(changes) {
+        var _a, _b;
+        if (((_a = changes.enabled) === null || _a === void 0 ? void 0 : _a.currentValue) !== ((_b = changes.enabled) === null || _b === void 0 ? void 0 : _b.previousValue)) {
+            if (this.enabled && !this._initialized) {
+                this._initialize();
+            }
+        }
+    }
+    ngOnDestroy() {
+        this._popoverClosed$.next();
+        this._destroy$.next();
+    }
+    _closePopover() {
+        this._popoverClosed$.next();
+        this._ngZone.run(() => {
+            this._wrapperElement = null;
+            if (this._popoverService.hasActivePopover) {
+                this._popoverService.close(this._popoverRef);
+            }
+        });
+    }
+    _initialize() {
+        if (this._initialized) {
+            return;
+        }
+        this._popoverRef = new FsPopoverRef({
+            maxWidth: this.maxWidth,
+            wrapperClass: this.wrapperClass,
+            autoShow: this.autoShow,
+            autoClose: this.autoClose,
+            loadingDiameter: this.loadingDiameter,
+            loading: this.loading,
+            size: this.size,
+            theme: this.theme,
+        });
+        this._ngZone.runOutsideAngular(() => {
+            if (this.trigger === 'click') {
+                this._listenMouseHostClick();
+            }
+            else {
+                this._listenMouseHostEnter();
+            }
+        });
+        this._listenRouteChange();
+        this._initialized = true;
+    }
+    _listenRouteChange() {
+        this._router.events
+            .pipe(filter((event) => {
+            return event instanceof NavigationEnd;
+        }), pipe(takeUntil(this._destroy$
+            .pipe(delay(200)))))
+            .subscribe(() => {
+            this._closePopover();
+        });
+    }
+    _listenMouseHostClick() {
+        fromEvent(this._elRef.nativeElement, 'click', { passive: true })
+            .pipe(filter(() => this.enabled), tap((e) => {
+            e.stopPropagation();
+            this._openPopover();
+        }), switchMap(() => this._listenMouseHostLeave$()), switchMap(() => this.closeTimer$), takeUntil(this._destroy$))
+            .subscribe(() => {
+            this._closePopover();
+        });
+    }
+    _listenMouseHostEnter() {
+        const actualMouseState$ = merge(this._mouseLeave$.pipe(mapTo(true)), this._mouseEnter$.pipe(mapTo(false)))
+            .pipe(startWith(false), distinctUntilChanged());
+        this._mouseEnter$
+            .pipe(filter(() => this.enabled), filter(() => {
+            return !this._wrapperElement;
+        }), tap(() => {
+            this._popoverService.setActivePopoverGUID(this._guid);
+        }), switchMap(() => this.openTimer$), 
+        // we have to check that after all delays mouse still over an elemen
+        withLatestFrom(actualMouseState$), filter(([_, mouseLeave]) => {
+            return !mouseLeave;
+        }), tap(() => this._openPopover()), switchMap(() => this._listenMouseHostLeave$()), switchMap(() => this.closeTimer$), tap(() => this._closePopover()), finalize(() => this._closePopover()), takeUntil(this._destroy$))
+            .subscribe();
+    }
+    _openPopover() {
+        if (this.trigger === 'mouseover' && this._popoverService.activeElementGUID !== this._guid) {
+            return;
+        }
+        this._hostBounds = this._elRef.nativeElement.getBoundingClientRect();
+        this._ngZone.run(() => {
+            if (this.template) {
+                this._wrapperElement = this._popoverService.openPopover(this._elRef, this.template, this.data, this._popoverRef, this.position);
+            }
+            else {
+                this._wrapperElement = this._popoverService.openPopover(this._elRef, this.text, this.data, this._popoverRef, this.position);
+            }
+        });
+    }
+    _listenMouseHostLeave$() {
+        const mouseMove$ = this._mouseMove$
+            .pipe(debounceTime(50), filter(() => !!this._wrapperElement), filter((event) => {
+            return this._popoverRef.autoClose && this._mouseLeftTheTargets(event);
+        }));
+        const mouseClick$ = fromEvent(this._elRef.nativeElement, 'click');
+        return merge(mouseMove$, mouseClick$);
+        //
+        // return this._mouseLeave$
+        //   .pipe(
+        //     //
+        //     timeoutWith(200, mouseMove$),
+        //   );
+    }
+    // Check if mouse left target or popover rects
+    _mouseLeftTheTargets(event) {
+        const hostBounds = this._hostBounds;
+        const popoverBounds = this._wrapperElement.getBoundingClientRect();
+        const pointInHostRect = pointInRect(hostBounds.x, hostBounds.y, hostBounds.x + hostBounds.width, hostBounds.y + hostBounds.height, event.x, event.y);
+        const pointInPopoverRect = pointInRect(popoverBounds.x, popoverBounds.y, popoverBounds.x + popoverBounds.width, popoverBounds.y + popoverBounds.height, event.x, event.y);
+        return !pointInHostRect && !pointInPopoverRect;
+    }
+}
+FsPopoverDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FsPopoverDirective, deps: [{ token: i0.ElementRef }, { token: FsPopoverService }, { token: i0.NgZone }, { token: i2$1.Router, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+FsPopoverDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: FsPopoverDirective, selector: "[fsPopover]", inputs: { text: "text", template: "template", data: "data", leaveDelay: "leaveDelay", showDelay: "showDelay", maxWidth: "maxWidth", wrapperClass: "wrapperClass", autoShow: "autoShow", autoClose: "autoClose", loadingDiameter: "loadingDiameter", loading: "loading", indication: "indication", position: "position", theme: "theme", size: "size", trigger: "trigger", enabled: "enabled" }, host: { properties: { "class.indication": "this.indication", "class.fs-popover-enabled": "this.enabled" }, classAttribute: "fs-popover" }, usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FsPopoverDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[fsPopover]',
+                    host: {
+                        'class': 'fs-popover',
+                    },
+                }]
+        }], ctorParameters: function () {
+        return [{ type: i0.ElementRef }, { type: FsPopoverService }, { type: i0.NgZone }, { type: i2$1.Router, decorators: [{
+                        type: Optional
+                    }] }];
+    }, propDecorators: { text: [{
+                type: Input
+            }], template: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], leaveDelay: [{
+                type: Input
+            }], showDelay: [{
+                type: Input
+            }], maxWidth: [{
+                type: Input
+            }], wrapperClass: [{
+                type: Input
+            }], autoShow: [{
+                type: Input
+            }], autoClose: [{
+                type: Input
+            }], loadingDiameter: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], indication: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['class.indication']
+            }], position: [{
+                type: Input
+            }], theme: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], trigger: [{
+                type: Input
+            }], enabled: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['class.fs-popover-enabled']
+            }] } });
+
+class FsPopoverComponent extends FsPopoverDirective {
+}
+FsPopoverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FsPopoverComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+FsPopoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FsPopoverComponent, selector: "fs-popover", host: { classAttribute: "fs-popover-component" }, usesInheritance: true, ngImport: i0, template: "<span [ngClass]=\"{'popover-container': enabled}\">\n  <ng-content></ng-content>\n</span>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FsPopoverComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fs-popover', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        'class': 'fs-popover-component',
+                    }, template: "<span [ngClass]=\"{'popover-container': enabled}\">\n  <ng-content></ng-content>\n</span>\n" }]
+        }] });
+
+class FsPopoverModule {
+}
+FsPopoverModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FsPopoverModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+FsPopoverModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: FsPopoverModule, declarations: [FsPopoverComponent,
+        FsPopoverWrapperComponent,
+        FsPopoverDirective], imports: [CommonModule,
+        PortalModule], exports: [FsPopoverComponent,
+        FsPopoverDirective] });
+FsPopoverModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FsPopoverModule, imports: [CommonModule,
+        PortalModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FsPopoverModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        PortalModule,
+                    ],
+                    declarations: [
+                        FsPopoverComponent,
+                        FsPopoverWrapperComponent,
+                        FsPopoverDirective,
+                    ],
+                    exports: [
+                        FsPopoverComponent,
+                        FsPopoverDirective,
+                    ],
+                }]
+        }] });
+
+/*
+ * Public API Surface of fs-menu
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { FsPopoverComponent, FsPopoverDirective, FsPopoverModule, FsPopoverRef, Position };
+//# sourceMappingURL=firestitch-popover.mjs.map