@progress/kendo-angular-tooltip 4.0.0-next.202110211119 → 4.0.0-next.202203281040

package/esm2015/popover/directives-base.js

@@ -0,0 +1,282 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Directive, ElementRef, Input, isDevMode } from "@angular/core";
+import { closest, hasObservers, isDocumentAvailable } from "@progress/kendo-angular-common";
+import { ERRORS } from '../constants';
+import { PopoverHideEvent, PopoverShowEvent, PopoverShownEvent, PopoverHiddenEvent } from "../models/events";
+import { align, containsItem } from "../utils";
+import { PopoverComponent } from "./popover.component";
+import { Subscription } from "rxjs";
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-popup";
+const validShowOptions = ['hover', 'click', 'none', 'focus'];
+/**
+ * @hidden
+ */
+export class PopoverDirectivesBase {
+    constructor(ngZone, popupService, renderer) {
+        this.ngZone = ngZone;
+        this.popupService = popupService;
+        this.renderer = renderer;
+        this.subs = new Subscription();
+        this._showOn = 'click';
+    }
+    /**
+     * Specifies the popover instance that will be rendered.
+     * Accepts a [`PopoverComponent`]({% slug api_tooltip_popovercomponent %}) instance or
+     * a [`PopoverFn`]({% slug api_tooltip_popoverfn %}) callback which returns a [`PopoverComponent`]({% slug api_tooltip_popovercomponent %}) instance
+     * depending on the current anchor element.
+     *
+     * [See example]({% slug templates_popover %}#toc-popovercallback)
+     */
+    set popover(value) {
+        if (value instanceof PopoverComponent || typeof value === `function`) {
+            this._popover = value;
+        }
+        else {
+            if (isDevMode) {
+                throw new Error(ERRORS.popover);
+            }
+        }
+    }
+    get popover() {
+        return this._popover;
+    }
+    /**
+     * The event on which the Popover will be shown
+     *
+     * The supported values are:
+     * - `click` (default) —The Popover will be shown when its `anchor` element is clicked.
+     * - `hover`—The Popover will be shown when its `anchor` element is hovered.
+     * - `focus`—The Popover will be shown when its `anchor` element is focused.
+     * - `none`—The Popover will not be shown on user interaction. It could be rendered via the Popover API methods.
+     */
+    set showOn(value) {
+        if (isDevMode && !containsItem(validShowOptions, value)) {
+            throw new Error(ERRORS.showOn);
+        }
+        this._showOn = value;
+    }
+    get showOn() {
+        return this._showOn;
+    }
+    ngAfterViewInit() {
+        if (!isDocumentAvailable()) {
+            return;
+        }
+        this.ngZone.runOutsideAngular(() => {
+            switch (this.showOn) {
+                case 'hover':
+                    this.subscribeToEvents([{
+                            name: 'mouseenter', handler: this.mouseenterHandler
+                        }, {
+                            name: 'mouseleave', handler: this.mouseleaveHandler
+                        }]);
+                    break;
+                case 'focus':
+                    this.subscribeToEvents([{
+                            name: 'focus', handler: this.focusHandler
+                        }, {
+                            name: 'blur', handler: this.blurHandler
+                        }]);
+                    break;
+                case 'click':
+                    this.subscribeClick();
+                    break;
+                default:
+                    break;
+            }
+        });
+    }
+    ngOnDestroy() {
+        this.closePopup();
+        if (this.disposeHoverOverListener) {
+            this.disposeHoverOverListener();
+        }
+        if (this.disposeHoverOutListener) {
+            this.disposeHoverOutListener();
+        }
+        if (this.disposeClickListener) {
+            this.disposeClickListener();
+        }
+        if (this._focusInsideSub) {
+            this._focusInsideSub.unsubscribe();
+        }
+        if (this._hideSub) {
+            this._hideSub.unsubscribe();
+        }
+        if (this.subs) {
+            this.subs.unsubscribe();
+        }
+        if (this._popupOpenSub) {
+            this._popupOpenSub.unsubscribe();
+        }
+        if (this._popupCloseSub) {
+            this._popupCloseSub.unsubscribe();
+        }
+    }
+    /**
+     * Hides the Popover ([See example]({% slug programmaticcontrol_popover %})).
+     */
+    hide() {
+        this.closePopup();
+    }
+    /**
+     * @hidden
+     */
+    closePopup() {
+        if (this.popupRef) {
+            this.popupRef.close();
+            this.popupRef = null;
+            if (this.disposePopupHoverOutListener) {
+                this.disposePopupHoverOutListener();
+            }
+            if (this.disposePopupHoverInListener) {
+                this.disposePopupHoverInListener();
+            }
+            if (this.disposePopupFocusOutListener) {
+                this.disposePopupFocusOutListener();
+            }
+        }
+    }
+    /**
+     * @hidden
+     */
+    openPopup(anchor) {
+        const _anchor = anchor instanceof ElementRef ? anchor.nativeElement : anchor;
+        const popoverComp = this.popover instanceof PopoverComponent ? this.popover : this.popover(_anchor);
+        const alignSettings = align(popoverComp.position, popoverComp.offset);
+        const anchorAlign = alignSettings.anchorAlign;
+        const popupAlign = alignSettings.popupAlign;
+        const popupMargin = alignSettings.popupMargin;
+        const _animation = popoverComp.animation;
+        this.popupRef = this.popupService.open({
+            anchor: { nativeElement: _anchor },
+            animate: _animation,
+            content: PopoverComponent,
+            popupAlign,
+            anchorAlign,
+            margin: popupMargin,
+            popupClass: 'k-popup-transparent',
+            collision: { horizontal: 'fit', vertical: 'fit' }
+        });
+        this.applySettings(this.popupRef.content, popoverComp, anchor);
+        this.monitorPopup();
+        this.initializeCompletionEvents(popoverComp, _anchor);
+    }
+    /**
+     * @hidden
+     */
+    isPrevented(anchorElement, show) {
+        const popoverComp = this.popover instanceof PopoverComponent ? this.popover : this.popover(anchorElement);
+        let eventArgs;
+        eventArgs = this.initializeEvents(popoverComp, eventArgs, show, anchorElement);
+        return eventArgs.isDefaultPrevented();
+    }
+    /**
+     * @hidden
+     */
+    monitorPopup() {
+        if (this.showOn === 'hover') {
+            this.ngZone.runOutsideAngular(() => {
+                const popup = this.popupRef.popupElement;
+                this.disposePopupHoverInListener = this.renderer.listen(popup, 'mouseenter', _ => {
+                    this.ngZone.run(_ => this._popoverService.emitPopoverState(true));
+                });
+                this.disposePopupHoverOutListener = this.renderer.listen(popup, 'mouseleave', _ => {
+                    this.ngZone.run(_ => this._popoverService.emitPopoverState(false));
+                });
+            });
+        }
+        if (this.showOn === 'focus') {
+            this.ngZone.runOutsideAngular(() => {
+                const popup = this.popupRef.popupElement;
+                this.disposePopupFocusOutListener = this.renderer.listen(popup, 'focusout', (e) => {
+                    const isInsidePopover = closest(e.relatedTarget, (node) => node.classList && node.classList.contains('k-popover'));
+                    if (!isInsidePopover) {
+                        this.ngZone.run(_ => this._popoverService.emitFocusInsidePopover(false));
+                    }
+                });
+            });
+        }
+    }
+    applySettings(contentComponent, popover, anchor) {
+        const content = contentComponent.instance;
+        const _anchor = anchor instanceof ElementRef ? anchor.nativeElement : anchor;
+        content.visible = true;
+        content.anchor = _anchor;
+        content.position = popover.position;
+        content.offset = popover.offset;
+        content.width = popover.width;
+        content.height = popover.height;
+        content.title = popover.title;
+        content.body = popover.body;
+        content.callout = popover.callout;
+        content.animation = popover.animation;
+        content.contextData = popover.templateData(_anchor);
+        content.titleTemplate = popover.titleTemplate;
+        content.bodyTemplate = popover.bodyTemplate;
+        content.actionsTemplate = popover.actionsTemplate;
+        this.popupRef.content.changeDetectorRef.detectChanges();
+    }
+    /**
+     * @hidden
+     */
+    initializeEvents(popoverComp, eventArgs, show, anchorElement) {
+        if (show) {
+            eventArgs = new PopoverShowEvent(anchorElement);
+            if (this.shouldEmitEvent(!!this.popupRef, 'show', popoverComp)) {
+                this.ngZone.run(() => popoverComp.show.emit(eventArgs));
+            }
+        }
+        else {
+            eventArgs = new PopoverHideEvent(anchorElement, this.popupRef);
+            if (this.shouldEmitEvent(!!this.popupRef, 'hide', popoverComp)) {
+                this.ngZone.run(() => popoverComp.hide.emit(eventArgs));
+            }
+        }
+        return eventArgs;
+    }
+    initializeCompletionEvents(popoverComp, _anchor) {
+        if (this.shouldEmitCompletionEvents('shown', popoverComp)) {
+            this.popupRef.popupOpen.subscribe(() => {
+                const eventArgs = new PopoverShownEvent(_anchor, this.popupRef);
+                popoverComp.shown.emit(eventArgs);
+            });
+        }
+        if (this.shouldEmitCompletionEvents('hidden', popoverComp)) {
+            this.popupRef.popupClose.subscribe(() => {
+                this.ngZone.run(_ => {
+                    const eventArgs = new PopoverHiddenEvent(_anchor);
+                    popoverComp.hidden.emit(eventArgs);
+                });
+            });
+        }
+    }
+    shouldEmitEvent(hasPopup, event, popoverComp) {
+        if ((event === 'show' && !hasPopup && hasObservers(popoverComp[event]))
+            || (event === 'hide' && hasPopup && hasObservers(popoverComp[event]))) {
+            return true;
+        }
+        return false;
+    }
+    shouldEmitCompletionEvents(event, popoverComp) {
+        if ((hasObservers(popoverComp[event]) && !this._popupOpenSub)
+            || (hasObservers(popoverComp[event]) && !this._popupCloseSub)) {
+            return true;
+        }
+        return false;
+    }
+}
+PopoverDirectivesBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PopoverDirectivesBase, deps: [{ token: i0.NgZone }, { token: i1.PopupService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+PopoverDirectivesBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: PopoverDirectivesBase, inputs: { popover: "popover", showOn: "showOn" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PopoverDirectivesBase, decorators: [{
+            type: Directive,
+            args: [{}]
+        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i1.PopupService }, { type: i0.Renderer2 }]; }, propDecorators: { popover: [{
+                type: Input
+            }], showOn: [{
+                type: Input
+            }] } });

package/esm2015/popover/popover.component.js

@@ -0,0 +1,314 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Component, ContentChild, EventEmitter, HostBinding, Input, isDevMode, Output } from '@angular/core';
+import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
+import { Subscription } from 'rxjs';
+import { validatePackage } from '@progress/kendo-licensing';
+import { packageMetadata } from '../package-metadata';
+import { ERRORS } from '../constants';
+import { PopoverTitleTemplateDirective } from './template-directives/title-template.directive';
+import { PopoverBodyTemplateDirective } from './template-directives/body-template.directive';
+import { PopoverActionsTemplateDirective } from './template-directives/actions-template.directive';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-l10n";
+import * as i2 from "@angular/common";
+/**
+ * Represents the [Kendo UI Popover component for Angular]({% slug overview_popover %}).
+ * Used to display additional information that is related to a target element.
+ *
+ * @example
+ * ```ts-no-run
+ * <kendo-popover>
+ *    <ng-template kendoPopoverTitleTemplate>Foo Title</ng-template>
+ *    <ng-template kendoPopoverBodyTemplate>Foo Body</ng-template>
+ *    <ng-template kendoPopoverActionsTemplate>Foo Actions</ng-template>
+ * </kendo-popover>
+ * ```
+ */
+export class PopoverComponent {
+    constructor(localization) {
+        this.localization = localization;
+        /**
+         * Specifies the position of the Popover in relation to its anchor element. [See example]({% slug positioning_popover %})
+         *
+         * The possible options are:
+         * `top`
+         * `bottom`
+         * `right` (Default)
+         * `left`
+         */
+        this.position = 'right';
+        /**
+         * Determines whether a callout will be rendered along the Popover. [See example]({% slug callout_popover %})
+         *
+         * @default true
+         */
+        this.callout = true;
+        /**
+         * Enables and configures the Popover animation. [See example]({% slug animations_popover %})
+         *
+         * The possible options are:
+         *
+         * * `boolean`&mdash;Enables the default animation
+         * * `PopoverAnimation`&mdash;A configuration object which allows setting the `direction`, `duration` and `type` of the animation.
+         *
+         * @default false
+         */
+        this.animation = false;
+        /**
+         * @hidden
+         * Determines the visibility of the Popover.
+         */
+        this.visible = false;
+        /**
+         * Fires before the Popover is about to be shown ([see example]({% slug events_popover %})).
+         * The event is preventable. If canceled, the Popover will not be displayed. [See example]({% slug events_popover %})
+         */
+        this.show = new EventEmitter();
+        /**
+         * Fires after the Popover has been shown and the animation has ended. [See example]({% slug events_popover %})
+         */
+        this.shown = new EventEmitter();
+        /**
+         * Fires when the Popover is about to be hidden ([see example]({% slug events_popover %})).
+         * The event is preventable. If canceled, the Popover will remain visible.
+         */
+        this.hide = new EventEmitter();
+        /**
+         * Fires after the Popover has been hidden and the animation has ended. [See example]({% slug events_popover %})
+         */
+        this.hidden = new EventEmitter();
+        /**
+         * @hidden
+         */
+        this._width = 'auto';
+        /**
+         * @hidden
+         */
+        this._height = 'auto';
+        this._offset = 6;
+        this.subs = new Subscription();
+        /**
+         * @hidden
+         */
+        this._templateData = () => null;
+        validatePackage(packageMetadata);
+    }
+    /**
+     * Specifies the distance from the Popover to its anchor element in pixels.
+     *
+     * @default `6`
+     */
+    set offset(value) {
+        this._offset = value;
+    }
+    get offset() {
+        const calloutBuffer = 14;
+        return this.callout
+            ? calloutBuffer + this._offset
+            : this._offset;
+    }
+    /**
+     * Determines the width of the popover. Numeric values are treated as pixels.
+     * @default 'auto'
+     */
+    set width(value) {
+        this._width = typeof value === 'number' ? `${value}px` : value;
+    }
+    get width() {
+        return this._width;
+    }
+    /**
+     * Determines the height of the popover. Numeric values are treated as pixels.
+     * @default 'auto'
+     */
+    set height(value) {
+        this._height = typeof value === 'number' ? `${value}px` : value;
+    }
+    get height() {
+        return this._height;
+    }
+    /**
+     * Defines a callback function which returns custom data passed to the Popover templates.
+     * It exposes the current anchor element as an argument. [See example]({% slug templates_popover %}#toc-popoverdatacallback)
+     */
+    set templateData(fn) {
+        if (isDevMode && typeof fn !== 'function') {
+            throw new Error(`${ERRORS.templateData} ${JSON.stringify(fn)}.`);
+        }
+        this._templateData = fn;
+    }
+    get templateData() {
+        return this._templateData;
+    }
+    /**
+     * @hidden
+     */
+    get isHidden() {
+        return !this.visible;
+    }
+    /**
+     * @hidden
+     */
+    get hasAttributeHidden() {
+        return !this.visible;
+    }
+    ngOnInit() {
+        this.subs.add(this.localization.changes.subscribe(({ rtl }) => {
+            this.direction = rtl ? 'rtl' : 'ltr';
+        }));
+    }
+    ngOnDestroy() {
+        this.subs.unsubscribe();
+    }
+    /**
+     * @hidden
+     */
+    getCalloutPosition() {
+        switch (this.position) {
+            case 'top': return { 'k-callout-s': true };
+            case 'bottom': return { 'k-callout-n': true };
+            case 'left': return { 'k-callout-e': true };
+            case 'right': return { 'k-callout-w': true };
+            default: return { 'k-callout-s': true };
+        }
+    }
+}
+PopoverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PopoverComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+PopoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: PopoverComponent, selector: "kendo-popover", inputs: { position: "position", offset: "offset", width: "width", height: "height", title: "title", subtitle: "subtitle", body: "body", callout: "callout", animation: "animation", templateData: "templateData" }, outputs: { show: "show", shown: "shown", hide: "hide", hidden: "hidden" }, host: { properties: { "attr.dir": "this.direction", "class.k-hidden": "this.isHidden", "attr.aria-hidden": "this.hasAttributeHidden", "style.width": "this._width", "style.height": "this._height" } }, providers: [
+        LocalizationService,
+        {
+            provide: L10N_PREFIX,
+            useValue: 'kendo.popover'
+        }
+    ], queries: [{ propertyName: "titleTemplate", first: true, predicate: PopoverTitleTemplateDirective, descendants: true }, { propertyName: "bodyTemplate", first: true, predicate: PopoverBodyTemplateDirective, descendants: true }, { propertyName: "actionsTemplate", first: true, predicate: PopoverActionsTemplateDirective, descendants: true }], ngImport: i0, template: `
+    <div *ngIf="visible" role="tooltip" class="k-popover" [ngStyle]="{'width': width, 'height': height}">
+        <div class="k-popover-callout" [ngClass]="getCalloutPosition()" *ngIf="callout"></div>
+
+        <div *ngIf="titleTemplate || title" class="k-popover-header">
+            <ng-template *ngIf="titleTemplate"
+                [ngTemplateOutlet]="titleTemplate?.templateRef"
+                [ngTemplateOutletContext]="{ $implicit: anchor, data: contextData }">
+            </ng-template>
+            <ng-container *ngIf="title && !titleTemplate">
+                {{ title }}
+            </ng-container>
+        </div>
+
+        <div *ngIf="bodyTemplate || body" class="k-popover-body">
+            <ng-template *ngIf="bodyTemplate"
+                [ngTemplateOutlet]="bodyTemplate?.templateRef"
+                [ngTemplateOutletContext]="{ $implicit: anchor, data: contextData }">
+            </ng-template>
+            <ng-container *ngIf="body && !bodyTemplate">
+                {{ body }}
+            </ng-container>
+        </div>
+
+        <div *ngIf="actionsTemplate" class="k-popover-actions k-actions k-hstack k-justify-content-between">
+            <ng-template *ngIf="actionsTemplate"
+                [ngTemplateOutlet]="actionsTemplate?.templateRef"
+                [ngTemplateOutletContext]="{ $implicit: anchor, data: contextData }">
+            </ng-template>
+        </div>
+    </div>
+    `, isInline: true, directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PopoverComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-popover',
+                    providers: [
+                        LocalizationService,
+                        {
+                            provide: L10N_PREFIX,
+                            useValue: 'kendo.popover'
+                        }
+                    ],
+                    template: `
+    <div *ngIf="visible" role="tooltip" class="k-popover" [ngStyle]="{'width': width, 'height': height}">
+        <div class="k-popover-callout" [ngClass]="getCalloutPosition()" *ngIf="callout"></div>
+
+        <div *ngIf="titleTemplate || title" class="k-popover-header">
+            <ng-template *ngIf="titleTemplate"
+                [ngTemplateOutlet]="titleTemplate?.templateRef"
+                [ngTemplateOutletContext]="{ $implicit: anchor, data: contextData }">
+            </ng-template>
+            <ng-container *ngIf="title && !titleTemplate">
+                {{ title }}
+            </ng-container>
+        </div>
+
+        <div *ngIf="bodyTemplate || body" class="k-popover-body">
+            <ng-template *ngIf="bodyTemplate"
+                [ngTemplateOutlet]="bodyTemplate?.templateRef"
+                [ngTemplateOutletContext]="{ $implicit: anchor, data: contextData }">
+            </ng-template>
+            <ng-container *ngIf="body && !bodyTemplate">
+                {{ body }}
+            </ng-container>
+        </div>
+
+        <div *ngIf="actionsTemplate" class="k-popover-actions k-actions k-hstack k-justify-content-between">
+            <ng-template *ngIf="actionsTemplate"
+                [ngTemplateOutlet]="actionsTemplate?.templateRef"
+                [ngTemplateOutletContext]="{ $implicit: anchor, data: contextData }">
+            </ng-template>
+        </div>
+    </div>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; }, propDecorators: { position: [{
+                type: Input
+            }], offset: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], height: [{
+                type: Input
+            }], direction: [{
+                type: HostBinding,
+                args: ['attr.dir']
+            }], title: [{
+                type: Input
+            }], subtitle: [{
+                type: Input
+            }], body: [{
+                type: Input
+            }], callout: [{
+                type: Input
+            }], animation: [{
+                type: Input
+            }], templateData: [{
+                type: Input
+            }], isHidden: [{
+                type: HostBinding,
+                args: ['class.k-hidden']
+            }], hasAttributeHidden: [{
+                type: HostBinding,
+                args: ['attr.aria-hidden']
+            }], show: [{
+                type: Output
+            }], shown: [{
+                type: Output
+            }], hide: [{
+                type: Output
+            }], hidden: [{
+                type: Output
+            }], titleTemplate: [{
+                type: ContentChild,
+                args: [PopoverTitleTemplateDirective, { static: false }]
+            }], bodyTemplate: [{
+                type: ContentChild,
+                args: [PopoverBodyTemplateDirective, { static: false }]
+            }], actionsTemplate: [{
+                type: ContentChild,
+                args: [PopoverActionsTemplateDirective, { static: false }]
+            }], _width: [{
+                type: HostBinding,
+                args: ['style.width']
+            }], _height: [{
+                type: HostBinding,
+                args: ['style.height']
+            }] } });

package/esm2015/popover/popover.service.js

@@ -0,0 +1,67 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Injectable } from '@angular/core';
+import { BehaviorSubject, combineLatest, Subject, Subscription } from 'rxjs';
+import { auditTime } from 'rxjs/operators';
+import * as i0 from "@angular/core";
+/**
+ * @hidden
+ */
+export class PopoverService {
+    constructor(ngZone) {
+        this.ngZone = ngZone;
+        this._pointerOverPopup = new BehaviorSubject(null);
+        this._pointerOverAnchor = new BehaviorSubject(null);
+        this._focusInsidePopover = new BehaviorSubject(null);
+        this._hidePopover = new Subject();
+        this.subs = new Subscription();
+        this.monitor();
+    }
+    ngOnDestroy() {
+        this.subs.unsubscribe();
+    }
+    get isPopoverHovered() {
+        return this._pointerOverPopup.asObservable();
+    }
+    emitPopoverState(isHovered) {
+        this.ngZone.run(_ => this._pointerOverPopup.next(isHovered));
+    }
+    get isAnchorHovered() {
+        return this._pointerOverAnchor.asObservable();
+    }
+    emitAnchorState(isHovered, anchor) {
+        this._isOrigin = this.originAnchor === anchor;
+        this.currentAnchor = anchor;
+        if (isHovered) {
+            this.originAnchor = anchor;
+        }
+        this.ngZone.run(_ => this._pointerOverAnchor.next(isHovered));
+    }
+    get isFocusInsidePopover() {
+        return this._focusInsidePopover.asObservable();
+    }
+    emitFocusInsidePopover(isFocused) {
+        this.ngZone.run(_ => this._focusInsidePopover.next(isFocused));
+        this._focusInsidePopover.next(null);
+    }
+    get hidePopover() {
+        return this._hidePopover.asObservable();
+    }
+    monitor() {
+        this.subs.add(combineLatest(this.isPopoverHovered, this.isAnchorHovered).pipe(
+        // `auditTime` is used because the `mouseleave` event is emitted before `mouseenter`
+        // i.e. there is a millisecond in which the pointer leaves the first target (e.g. anchor) and hasn't reached the second one (e.g. popup)
+        // resulting in both observables emitting `false`
+        auditTime(20)).subscribe(val => {
+            const [isPopoverHovered, isAnchorHovered] = val;
+            this._hidePopover.next([isPopoverHovered, isAnchorHovered, this._isOrigin, this.currentAnchor]);
+        }));
+    }
+}
+PopoverService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PopoverService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
+PopoverService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PopoverService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PopoverService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i0.NgZone }]; } });