@progress/kendo-angular-tooltip 3.0.3 → 3.1.0-dev.202201182021

package/dist/fesm5/index.js

@@ -3,12 +3,13 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { __decorate, __metadata, __param, __extends } from 'tslib';
-import { InjectionToken, Injectable, HostBinding, Output, EventEmitter, Input, TemplateRef, ElementRef, Component, isDevMode, Directive, Optional, Inject, NgZone, Renderer2, forwardRef, NgModule } from '@angular/core';
-import { take, filter, debounceTime } from 'rxjs/operators';
-import { fromEvent } from 'rxjs';
+import { InjectionToken, Injectable, HostBinding, Output, EventEmitter, Input, TemplateRef, ElementRef, Component, isDevMode, Directive, Optional, Inject, NgZone, Renderer2, ContentChild, forwardRef, NgModule } from '@angular/core';
+import { take, filter, debounceTime, auditTime } from 'rxjs/operators';
+import { fromEvent, Subscription, combineLatest, BehaviorSubject, Subject } from 'rxjs';
 import { PopupService, PopupModule } from '@progress/kendo-angular-popup';
 import { validatePackage } from '@progress/kendo-licensing';
 import { LocalizationService, L10N_PREFIX, ComponentMessages } from '@progress/kendo-angular-l10n';
+import { PreventableEvent, closest } from '@progress/kendo-angular-common';
 import { CommonModule } from '@angular/common';
 
 /**
@@ -18,7 +19,7 @@ var packageMetadata = {
     name: '@progress/kendo-angular-tooltip',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1635939563,
+    publishDate: 1642537195,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };
@@ -117,7 +118,7 @@ function isDocumentNode(container) {
 /**
  * @hidden
  */
-function closest(element, selector) {
+function closestBySelector(element, selector) {
     if (element.closest) {
         return element.closest(selector);
     }
@@ -430,7 +431,7 @@ var TooltipDirective = /** @class */ (function () {
             _this.anchorTitleSubscription = fromEvent(wrapper, 'mouseover')
                 .pipe(filter(function () { return _this.filter !== ''; }))
                 .subscribe(function (e) {
-                var filterElement = closest(e.target, _this.filter);
+                var filterElement = closestBySelector(e.target, _this.filter);
                 if (filterElement) {
                     _this.hideElementTitle({ nativeElement: filterElement });
                 }
@@ -667,7 +668,7 @@ var TooltipDirective = /** @class */ (function () {
     };
     TooltipDirective.prototype.onMouseClick = function (e, wrapper) {
         var target = e.target;
-        var filterElement = closest(target, this.filter);
+        var filterElement = closestBySelector(target, this.filter);
         var popup = this.popupRef && this.popupRef.popupElement;
         if (popup) {
             if (popup.contains(target)) {
@@ -685,7 +686,7 @@ var TooltipDirective = /** @class */ (function () {
         }
     };
     TooltipDirective.prototype.onMouseOver = function (e) {
-        var filterElement = closest(e.target, this.filter);
+        var filterElement = closestBySelector(e.target, this.filter);
         if (this.showOn !== 'hover') {
             return;
         }
@@ -795,6 +796,1074 @@ var TooltipDirective = /** @class */ (function () {
     return TooltipDirective;
 }());
 
+/**
+ * @hidden
+ */
+var ERRORS = {
+    popover: "Invalid value provided for the 'popover' property. The accepted data types are 'PopoverComponent' or 'PopoverFn'.",
+    templateData: "templateData must be a function, but received",
+    showOn: "Invalid value provided for the 'showOn' property. The available options are 'click', 'hover', 'focus' or 'none'."
+};
+
+/**
+ * Represents a template that defines the content of the Popover title.
+ *
+ * To define the template, nest an `<ng-template>` tag
+ * with the `kendoPopoverTitleTemplate` directive inside the `<kendo-popover>` tag.
+ */
+var PopoverTitleTemplateDirective = /** @class */ (function () {
+    function PopoverTitleTemplateDirective(templateRef) {
+        this.templateRef = templateRef;
+    }
+    PopoverTitleTemplateDirective = __decorate([
+        Directive({
+            selector: '[kendoPopoverTitleTemplate]'
+        }),
+        __param(0, Optional()),
+        __metadata("design:paramtypes", [TemplateRef])
+    ], PopoverTitleTemplateDirective);
+    return PopoverTitleTemplateDirective;
+}());
+
+/**
+ * Represents a template that defines the content of the Popover body.
+ *
+ * To define the template, nest an `<ng-template>` tag
+ * with the `kendoPopoverBodyTemplate` directive inside the `<kendo-popover>` tag.
+ */
+var PopoverBodyTemplateDirective = /** @class */ (function () {
+    function PopoverBodyTemplateDirective(templateRef) {
+        this.templateRef = templateRef;
+    }
+    PopoverBodyTemplateDirective = __decorate([
+        Directive({
+            selector: '[kendoPopoverBodyTemplate]'
+        }),
+        __param(0, Optional()),
+        __metadata("design:paramtypes", [TemplateRef])
+    ], PopoverBodyTemplateDirective);
+    return PopoverBodyTemplateDirective;
+}());
+
+/**
+ * Represents a template that defines the content of the Popover actions.
+ *
+ * To define the template, nest an `<ng-template>` tag
+ * with the `kendoPopoverActionsTemplate` directive inside the `<kendo-popover>` tag.
+ */
+var PopoverActionsTemplateDirective = /** @class */ (function () {
+    function PopoverActionsTemplateDirective(templateRef) {
+        this.templateRef = templateRef;
+    }
+    PopoverActionsTemplateDirective = __decorate([
+        Directive({
+            selector: '[kendoPopoverActionsTemplate]'
+        }),
+        __param(0, Optional()),
+        __metadata("design:paramtypes", [TemplateRef])
+    ], PopoverActionsTemplateDirective);
+    return PopoverActionsTemplateDirective;
+}());
+
+/**
+ * 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>
+ * ```
+ */
+var PopoverComponent = /** @class */ (function () {
+    function PopoverComponent(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();
+        this._offset = 6;
+        this._width = 'auto';
+        this._height = 'auto';
+        this.subs = new Subscription();
+        /**
+         * @hidden
+         */
+        this._templateData = function () { return null; };
+        validatePackage(packageMetadata);
+    }
+    Object.defineProperty(PopoverComponent.prototype, "offset", {
+        get: function () {
+            var calloutBuffer = 14;
+            return this.callout
+                ? calloutBuffer + this._offset
+                : this._offset;
+        },
+        /**
+         * Specifies the distance from the Popover to its anchor element in pixels.
+         *
+         * @default `6`
+         */
+        set: function (value) {
+            this._offset = value;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(PopoverComponent.prototype, "width", {
+        get: function () {
+            return this._width;
+        },
+        /**
+         * Determines the width of the popover. Numeric values are treated as pixels.
+         * @default 'auto'
+         */
+        set: function (value) {
+            this._width = typeof value === 'number' ? value + "px" : value;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(PopoverComponent.prototype, "height", {
+        get: function () {
+            return this._height;
+        },
+        /**
+         * Determines the height of the popover. Numeric values are treated as pixels.
+         * @default 'auto'
+         */
+        set: function (value) {
+            this._height = typeof value === 'number' ? value + "px" : value;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(PopoverComponent.prototype, "templateData", {
+        get: function () {
+            return this._templateData;
+        },
+        /**
+         * 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: function (fn) {
+            if (isDevMode && typeof fn !== 'function') {
+                throw new Error(ERRORS.templateData + " " + JSON.stringify(fn) + ".");
+            }
+            this._templateData = fn;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(PopoverComponent.prototype, "isHidden", {
+        /**
+         * @hidden
+         */
+        get: function () {
+            return !this.visible;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(PopoverComponent.prototype, "hasAttributeHidden", {
+        /**
+         * @hidden
+         */
+        get: function () {
+            return !this.visible;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    PopoverComponent.prototype.ngOnInit = function () {
+        var _this = this;
+        this.subs.add(this.localization.changes.subscribe(function (_a) {
+            var rtl = _a.rtl;
+            _this.direction = rtl ? 'rtl' : 'ltr';
+        }));
+    };
+    PopoverComponent.prototype.ngOnDestroy = function () {
+        this.subs.unsubscribe();
+    };
+    /**
+     * @hidden
+     */
+    PopoverComponent.prototype.getCalloutPosition = function () {
+        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 };
+        }
+    };
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], PopoverComponent.prototype, "position", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Number),
+        __metadata("design:paramtypes", [Number])
+    ], PopoverComponent.prototype, "offset", null);
+    __decorate([
+        HostBinding('style.width'),
+        Input(),
+        __metadata("design:type", Object),
+        __metadata("design:paramtypes", [Object])
+    ], PopoverComponent.prototype, "width", null);
+    __decorate([
+        HostBinding('style.height'),
+        Input(),
+        __metadata("design:type", Object),
+        __metadata("design:paramtypes", [Object])
+    ], PopoverComponent.prototype, "height", null);
+    __decorate([
+        HostBinding('attr.dir'),
+        __metadata("design:type", String)
+    ], PopoverComponent.prototype, "direction", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], PopoverComponent.prototype, "title", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], PopoverComponent.prototype, "subtitle", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], PopoverComponent.prototype, "body", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Boolean)
+    ], PopoverComponent.prototype, "callout", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Object)
+    ], PopoverComponent.prototype, "animation", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Function])
+    ], PopoverComponent.prototype, "templateData", null);
+    __decorate([
+        HostBinding('class.k-hidden'),
+        __metadata("design:type", Boolean),
+        __metadata("design:paramtypes", [])
+    ], PopoverComponent.prototype, "isHidden", null);
+    __decorate([
+        HostBinding('attr.aria-hidden'),
+        __metadata("design:type", Boolean),
+        __metadata("design:paramtypes", [])
+    ], PopoverComponent.prototype, "hasAttributeHidden", null);
+    __decorate([
+        Output(),
+        __metadata("design:type", EventEmitter)
+    ], PopoverComponent.prototype, "show", void 0);
+    __decorate([
+        Output(),
+        __metadata("design:type", EventEmitter)
+    ], PopoverComponent.prototype, "shown", void 0);
+    __decorate([
+        Output(),
+        __metadata("design:type", EventEmitter)
+    ], PopoverComponent.prototype, "hide", void 0);
+    __decorate([
+        Output(),
+        __metadata("design:type", EventEmitter)
+    ], PopoverComponent.prototype, "hidden", void 0);
+    __decorate([
+        ContentChild(PopoverTitleTemplateDirective, { static: false }),
+        __metadata("design:type", PopoverTitleTemplateDirective)
+    ], PopoverComponent.prototype, "titleTemplate", void 0);
+    __decorate([
+        ContentChild(PopoverBodyTemplateDirective, { static: false }),
+        __metadata("design:type", PopoverBodyTemplateDirective)
+    ], PopoverComponent.prototype, "bodyTemplate", void 0);
+    __decorate([
+        ContentChild(PopoverActionsTemplateDirective, { static: false }),
+        __metadata("design:type", PopoverActionsTemplateDirective)
+    ], PopoverComponent.prototype, "actionsTemplate", void 0);
+    PopoverComponent = __decorate([
+        Component({
+            selector: 'kendo-popover',
+            providers: [
+                LocalizationService,
+                {
+                    provide: L10N_PREFIX,
+                    useValue: 'kendo.popover'
+                }
+            ],
+            template: "\n    <div *ngIf=\"visible\" role=\"tooltip\" class=\"k-popover\" [ngStyle]=\"{'width.px': width, 'height.px': height}\">\n        <div class=\"k-popover-callout\" [ngClass]=\"getCalloutPosition()\" *ngIf=\"callout\"></div>\n\n        <div *ngIf=\"titleTemplate || title\" class=\"k-popover-header\">\n            <ng-template *ngIf=\"titleTemplate\"\n                [ngTemplateOutlet]=\"titleTemplate?.templateRef\"\n                [ngTemplateOutletContext]=\"{ $implicit: anchor, data: contextData }\">\n            </ng-template>\n            <ng-container *ngIf=\"title && !titleTemplate\">\n                {{ title }}\n            </ng-container>\n        </div>\n\n        <div *ngIf=\"bodyTemplate || body\" class=\"k-popover-body\">\n            <ng-template *ngIf=\"bodyTemplate\"\n                [ngTemplateOutlet]=\"bodyTemplate?.templateRef\"\n                [ngTemplateOutletContext]=\"{ $implicit: anchor, data: contextData }\">\n            </ng-template>\n            <ng-container *ngIf=\"body && !bodyTemplate\">\n                {{ body }}\n            </ng-container>\n        </div>\n\n        <div *ngIf=\"actionsTemplate\" class=\"k-popover-actions k-actions k-hstack k-justify-content-between\">\n            <ng-template *ngIf=\"actionsTemplate\"\n                [ngTemplateOutlet]=\"actionsTemplate?.templateRef\"\n                [ngTemplateOutletContext]=\"{ $implicit: anchor, data: contextData }\">\n            </ng-template>\n        </div>\n    </div>\n    "
+        }),
+        __metadata("design:paramtypes", [LocalizationService])
+    ], PopoverComponent);
+    return PopoverComponent;
+}());
+
+/**
+ * Arguments for the `show` event. The `show` event fires when a popover is about
+ * to be opened. If you cancel the event, the opening is prevented.
+ */
+var PopoverShowEvent = /** @class */ (function (_super) {
+    __extends(PopoverShowEvent, _super);
+    /**
+     * @hidden
+     * Constructs the event arguments for the `show` event.
+     * @param anchor - The host element related to the popover.
+     */
+    function PopoverShowEvent(anchor) {
+        var _this = _super.call(this) || this;
+        _this.anchor = anchor;
+        return _this;
+    }
+    return PopoverShowEvent;
+}(PreventableEvent));
+/**
+ * Arguments for the `hide` event. The `hide` event fires when a popover is about
+ * to be closed. If you cancel the event, the popover stays open.
+ */
+var PopoverHideEvent = /** @class */ (function (_super) {
+    __extends(PopoverHideEvent, _super);
+    /**
+     * @hidden
+     * Constructs the event arguments for the `hide` event.
+     * @param anchor - The host element related to the popover.
+     * @param popover - The popover element.
+     */
+    function PopoverHideEvent(anchor, popover) {
+        var _this = _super.call(this) || this;
+        _this.anchor = anchor;
+        _this.popover = popover;
+        return _this;
+    }
+    return PopoverHideEvent;
+}(PreventableEvent));
+/**
+ * Arguments for the `shown` event. The `shown` event fires after the popover has opened and its opening animation has finished.
+ */
+var PopoverShownEvent = /** @class */ (function () {
+    /**
+     * @hidden
+     * Constructs the event arguments for the `shown` event.
+     * @param anchor - The host element related to the popover.
+     * @param popover - The popover element.
+     */
+    function PopoverShownEvent(anchor, popover) {
+        this.anchor = anchor;
+        this.popover = popover;
+    }
+    return PopoverShownEvent;
+}());
+/**
+ * Arguments for the `hidden` event. The `hidden` event fires after the popover has closed and its closing animation has finished.
+ */
+var PopoverHiddenEvent = /** @class */ (function () {
+    /**
+     * @hidden
+     * Constructs the event arguments for the `hidden` event.
+     * @param anchor - The host element related to the popover.
+     */
+    function PopoverHiddenEvent(anchor) {
+        this.anchor = anchor;
+    }
+    return PopoverHiddenEvent;
+}());
+
+var validShowOptions = ['hover', 'click', 'none', 'focus'];
+/**
+ * @hidden
+ */
+var PopoverDirectivesBase = /** @class */ (function () {
+    function PopoverDirectivesBase(ngZone, popupService, renderer) {
+        this.ngZone = ngZone;
+        this.popupService = popupService;
+        this.renderer = renderer;
+        this.subs = new Subscription();
+        this._showOn = 'click';
+    }
+    Object.defineProperty(PopoverDirectivesBase.prototype, "popover", {
+        get: function () {
+            return this._popover;
+        },
+        /**
+         * 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: function (value) {
+            if (value instanceof PopoverComponent || typeof value === "function") {
+                this._popover = value;
+            }
+            else {
+                if (isDevMode) {
+                    throw new Error(ERRORS.popover);
+                }
+            }
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(PopoverDirectivesBase.prototype, "showOn", {
+        get: function () {
+            return this._showOn;
+        },
+        /**
+         * The event on which the Popover will be shown
+         *
+         * The supported values are:
+         * - `click` (default) &mdash;The Popover will be shown when its `anchor` element is clicked.
+         * - `hover`&mdash;The Popover will be shown when its `anchor` element is hovered.
+         * - `focus`&mdash;The Popover will be shown when its `anchor` element is focused.
+         * - `none`&mdash;The Popover will not be shown on user interaction. It could be rendered via the Popover API methods.
+         */
+        set: function (value) {
+            if (isDevMode && !containsItem(validShowOptions, value)) {
+                throw new Error(ERRORS.showOn);
+            }
+            this._showOn = value;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    PopoverDirectivesBase.prototype.ngAfterViewInit = function () {
+        var _this = this;
+        this.ngZone.runOutsideAngular(function () {
+            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: /**/
+            }
+        });
+    };
+    PopoverDirectivesBase.prototype.ngOnDestroy = function () {
+        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 %})).
+     */
+    PopoverDirectivesBase.prototype.hide = function () {
+        this.closePopup();
+    };
+    /**
+     * @hidden
+     */
+    PopoverDirectivesBase.prototype.closePopup = function () {
+        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
+     */
+    PopoverDirectivesBase.prototype.openPopup = function (anchor) {
+        var _this = this;
+        var _anchor = anchor instanceof ElementRef ? anchor.nativeElement : anchor;
+        var popoverComp = this.popover instanceof PopoverComponent ? this.popover : this.popover(_anchor);
+        var alignSettings = align(popoverComp.position, popoverComp.offset);
+        var anchorAlign = alignSettings.anchorAlign;
+        var popupAlign = alignSettings.popupAlign;
+        var popupMargin = alignSettings.popupMargin;
+        var _animation = popoverComp.animation;
+        this.ngZone.run(function () {
+            _this.popupRef = _this.popupService.open({
+                anchor: { nativeElement: _anchor },
+                animate: _animation,
+                content: PopoverComponent,
+                popupAlign: popupAlign,
+                anchorAlign: anchorAlign,
+                margin: popupMargin,
+                popupClass: 'k-popup-transparent',
+                collision: { horizontal: 'fit', vertical: 'fit' }
+            });
+            var popoverInstance = _this.popupRef.content.instance;
+            Object.assign(popoverInstance, popoverComp);
+            popoverInstance.anchor = anchor;
+            popoverInstance.contextData = popoverInstance.templateData(anchor);
+            popoverInstance.visible = true;
+            _this.popupRef.content.changeDetectorRef.detectChanges();
+            _this.monitorPopup();
+            _this.initializeFinishingEvents(popoverComp, _anchor);
+        });
+        this.popupRef.popupAnchorViewportLeave
+            .pipe(take(1))
+            .subscribe(function () { return _this.hide(); });
+    };
+    /**
+     * @hidden
+     */
+    PopoverDirectivesBase.prototype.isPrevented = function (anchorElement, show) {
+        var popoverComp = this.popover instanceof PopoverComponent ? this.popover : this.popover(anchorElement);
+        var eventArgs;
+        eventArgs = this.initializeEvents(popoverComp, eventArgs, show, anchorElement);
+        return eventArgs.isDefaultPrevented();
+    };
+    /**
+     * @hidden
+     */
+    PopoverDirectivesBase.prototype.monitorPopup = function () {
+        var _this = this;
+        if (this.showOn === 'hover') {
+            this.ngZone.runOutsideAngular(function () {
+                var popup = _this.popupRef.popupElement;
+                _this.disposePopupHoverInListener = _this.renderer.listen(popup, 'mouseenter', function (_) {
+                    _this.ngZone.run(function (_) { return _this._popoverService.emitPopoverState(true); });
+                });
+                _this.disposePopupHoverOutListener = _this.renderer.listen(popup, 'mouseleave', function (_) {
+                    _this.ngZone.run(function (_) { return _this._popoverService.emitPopoverState(false); });
+                });
+            });
+        }
+        if (this.showOn === 'focus') {
+            this.ngZone.runOutsideAngular(function () {
+                var popup = _this.popupRef.popupElement;
+                _this.disposePopupFocusOutListener = _this.renderer.listen(popup, 'focusout', function (e) {
+                    var isInsidePopover = closest(e.relatedTarget, function (node) { return node.classList && node.classList.contains('k-popover'); });
+                    if (!isInsidePopover) {
+                        _this.ngZone.run(function (_) { return _this._popoverService.emitFocusInsidePopover(false); });
+                    }
+                });
+            });
+        }
+    };
+    /**
+     * @hidden
+     */
+    PopoverDirectivesBase.prototype.initializeEvents = function (popoverComp, eventArgs, show, anchorElement) {
+        var _this = this;
+        if (show) {
+            this.ngZone.run(function (_) {
+                eventArgs = new PopoverShowEvent(anchorElement);
+                if (!_this.popupRef) {
+                    popoverComp.show.emit(eventArgs);
+                }
+            });
+        }
+        else {
+            this.ngZone.run(function (_) {
+                eventArgs = new PopoverHideEvent(anchorElement, _this.popupRef);
+                if (_this.popupRef) {
+                    popoverComp.hide.emit(eventArgs);
+                }
+            });
+        }
+        return eventArgs;
+    };
+    PopoverDirectivesBase.prototype.initializeFinishingEvents = function (popoverComp, _anchor) {
+        var _this = this;
+        if (!this._popupOpenSub) {
+            this.popupRef.popupOpen.subscribe(function () {
+                var eventArgs = new PopoverShownEvent(_anchor, _this.popupRef);
+                popoverComp.shown.emit(eventArgs);
+            });
+        }
+        if (!this._popupCloseSub) {
+            this.popupRef.popupClose.subscribe(function () {
+                _this.ngZone.run(function (_) {
+                    var eventArgs = new PopoverHiddenEvent(_anchor);
+                    popoverComp.hidden.emit(eventArgs);
+                });
+            });
+        }
+    };
+    __decorate([
+        Input(),
+        __metadata("design:type", Object),
+        __metadata("design:paramtypes", [Object])
+    ], PopoverDirectivesBase.prototype, "popover", null);
+    __decorate([
+        Input(),
+        __metadata("design:type", String),
+        __metadata("design:paramtypes", [String])
+    ], PopoverDirectivesBase.prototype, "showOn", null);
+    return PopoverDirectivesBase;
+}());
+
+/**
+ * @hidden
+ */
+var PopoverService = /** @class */ (function () {
+    function PopoverService(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();
+    }
+    PopoverService.prototype.ngOnDestroy = function () {
+        this.subs.unsubscribe();
+    };
+    Object.defineProperty(PopoverService.prototype, "isPopoverHovered", {
+        get: function () {
+            return this._pointerOverPopup.asObservable();
+        },
+        enumerable: true,
+        configurable: true
+    });
+    PopoverService.prototype.emitPopoverState = function (isHovered) {
+        var _this = this;
+        this.ngZone.run(function (_) { return _this._pointerOverPopup.next(isHovered); });
+    };
+    Object.defineProperty(PopoverService.prototype, "isAnchorHovered", {
+        get: function () {
+            return this._pointerOverAnchor.asObservable();
+        },
+        enumerable: true,
+        configurable: true
+    });
+    PopoverService.prototype.emitAnchorState = function (isHovered, anchor) {
+        var _this = this;
+        this._isOrigin = this.originAnchor === anchor;
+        this.currentAnchor = anchor;
+        if (isHovered) {
+            this.originAnchor = anchor;
+        }
+        this.ngZone.run(function (_) { return _this._pointerOverAnchor.next(isHovered); });
+    };
+    Object.defineProperty(PopoverService.prototype, "isFocusInsidePopover", {
+        get: function () {
+            return this._focusInsidePopover.asObservable();
+        },
+        enumerable: true,
+        configurable: true
+    });
+    PopoverService.prototype.emitFocusInsidePopover = function (isFocused) {
+        var _this = this;
+        this.ngZone.run(function (_) { return _this._focusInsidePopover.next(isFocused); });
+        this._focusInsidePopover.next(null);
+    };
+    Object.defineProperty(PopoverService.prototype, "hidePopover", {
+        get: function () {
+            return this._hidePopover.asObservable();
+        },
+        enumerable: true,
+        configurable: true
+    });
+    PopoverService.prototype.monitor = function () {
+        var _this = this;
+        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(function (val) {
+            var isPopoverHovered = val[0], isAnchorHovered = val[1];
+            _this._hidePopover.next([isPopoverHovered, isAnchorHovered, _this._isOrigin, _this.currentAnchor]);
+        }));
+    };
+    PopoverService = __decorate([
+        Injectable(),
+        __metadata("design:paramtypes", [NgZone])
+    ], PopoverService);
+    return PopoverService;
+}());
+
+/**
+ * Represents the [`kendoPopoverContainer`]({% slug configuration_popover %}#toc-containerdirective) directive.
+ * It is used to filter and target multiple elements, which should display a popover on interaction.
+ *
+ * @example
+ * ```ts-no-run
+ * <div kendoPopoverContainer [popover]="myPopover" filter=".has-popover">
+ *     <button class="has-popover">Show Popover</button>
+ *     <button>Button Without Popover</button>
+ *     <button class="has-popover">Show Popover</button>
+ * </div>
+ * ```
+ */
+var PopoverContainerDirective = /** @class */ (function (_super) {
+    __extends(PopoverContainerDirective, _super);
+    function PopoverContainerDirective(wrapperEl, ngZone, popupService, renderer, popoverService) {
+        var _this = _super.call(this, ngZone, popupService, renderer) || this;
+        _this.wrapperEl = wrapperEl;
+        _this.ngZone = ngZone;
+        _this.popupService = popupService;
+        _this.renderer = renderer;
+        _this.popoverService = popoverService;
+        _this.mouseenterHandler = function (anchor) {
+            _this.controlVisibility(anchor, true);
+        };
+        _this.mouseleaveHandler = function (args) {
+            var anchor = args.anchor;
+            if (_this.isPrevented(anchor, false)) {
+                return;
+            }
+            if (!_this._hideSub) {
+                _this._hideSub = _this.popoverService.hidePopover.subscribe(function (val) {
+                    var isPopoverHovered = val[0], isOriginAnchor = val[2], currentAnchor = val[3];
+                    if (!isPopoverHovered && !isOriginAnchor) {
+                        _this.hide();
+                        if (!isOriginAnchor && currentAnchor) {
+                            _this.show(currentAnchor);
+                        }
+                    }
+                });
+            }
+        };
+        _this.focusHandler = function (anchor) {
+            _this.controlVisibility(anchor, true);
+        };
+        _this.blurHandler = function (args) {
+            var anchor = args.anchor;
+            var event = args.domEvent;
+            if (_this.isPrevented(anchor, false)) {
+                return;
+            }
+            // from anchor to popup focus check
+            var isFocusInside = !!closest(event.relatedTarget, function (node) { return node.classList && node.classList.contains('k-popover'); });
+            if (!isFocusInside) {
+                _this.hide();
+            }
+            if (!_this._focusInsideSub) {
+                // inside popup focus check
+                _this._focusInsideSub = _this.popoverService.isFocusInsidePopover.pipe(filter(function (v) { return v !== null; })).subscribe(function (val) {
+                    if (!val && !isFocusInside) {
+                        _this.hide();
+                    }
+                });
+            }
+        };
+        _this._popoverService = _this.popoverService;
+        return _this;
+    }
+    /**
+     * Shows the Popover.
+     *
+     * @param anchor&mdash;Specifies the element that will be used as an anchor. The Popover opens relative to that element. [See example]({% slug programmaticcontrol_popover %})
+     */
+    PopoverContainerDirective.prototype.show = function (anchor) {
+        if (this.popupRef) {
+            return;
+        }
+        this.openPopup(anchor);
+    };
+    /**
+     * Toggles the visibility of the Popover. [See example]({% slug programmaticcontrol_popover %})
+     *
+     * @param anchor&mdash;Specifies the element that will be used as an anchor. The Popover opens relative to that element.
+     */
+    PopoverContainerDirective.prototype.toggle = function (anchor) {
+        var previousAnchor = this.popupRef && this.popupRef.content.instance.anchor;
+        if (this.popupRef) {
+            this.hide();
+            if (previousAnchor !== anchor) {
+                this.show(anchor);
+            }
+        }
+        else {
+            this.show(anchor);
+        }
+    };
+    PopoverContainerDirective.prototype.subscribeClick = function () {
+        var _this = this;
+        if (this.disposeClickListener) {
+            this.disposeClickListener();
+        }
+        this.disposeClickListener = this.renderer.listen(document, 'click', function (e) {
+            var filterElement = closestBySelector(e.target, _this.filter);
+            _this.clickHandler(filterElement, e);
+        });
+    };
+    PopoverContainerDirective.prototype.subscribeToEvents = function (arr) {
+        var _this = this;
+        var filteredElements = Array.from(document.querySelectorAll(this.filter));
+        filteredElements.forEach(function (el) {
+            _this.subs.add(_this.renderer.listen(el, arr[0].name, function () {
+                _this.popoverService.emitAnchorState(true, el);
+                arr[0].handler(el);
+            }));
+            _this.subs.add(_this.renderer.listen(el, arr[1].name, function (e) {
+                _this.popoverService.emitAnchorState(false, null);
+                arr[1].handler({ anchor: el, domEvent: e });
+            }));
+        });
+    };
+    PopoverContainerDirective.prototype.clickHandler = function (anchor, event) {
+        var isInsidePopup = !!closest(event.target, function (node) { return node.classList && node.classList.contains('k-popup'); });
+        var popupRefAnchor = this.popupRef && this.popupRef.content.instance.anchor;
+        var isOriginAnchor = !!closest(event.target, function (node) { return node === (popupRefAnchor ? popupRefAnchor : anchor); });
+        if (this.showOn !== 'click' || isInsidePopup || (this.popupRef && isOriginAnchor)) {
+            return;
+        }
+        if (!anchor && this.popupRef) {
+            this.controlVisibility(anchor, false);
+            return;
+        }
+        if (isOriginAnchor) {
+            this.controlVisibility(anchor, true);
+        }
+        else if (this.popupRef) {
+            this.controlVisibility(anchor, false);
+            this.controlVisibility(anchor, true);
+        }
+    };
+    PopoverContainerDirective.prototype.controlVisibility = function (anchor, show) {
+        if (this.isPrevented(anchor, show)) {
+            return;
+        }
+        show ? this.show(anchor) : this.hide();
+    };
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], PopoverContainerDirective.prototype, "filter", void 0);
+    PopoverContainerDirective = __decorate([
+        Directive({
+            selector: '[kendoPopoverContainer]',
+            exportAs: 'kendoPopoverContainer',
+            providers: [PopoverService]
+        }),
+        __metadata("design:paramtypes", [ElementRef,
+            NgZone,
+            PopupService,
+            Renderer2,
+            PopoverService])
+    ], PopoverContainerDirective);
+    return PopoverContainerDirective;
+}(PopoverDirectivesBase));
+
+/**
+ * Represents the [`kendoPopoverAnchor`]({% slug configuration_popover %}#toc-anchordirective) directive.
+ * It is used to target an element, which should display a popover on interaction.
+ *
+ * @example
+ * ```ts-no-run
+ * <button kendoPopoverAnchor [popover]="myPopover">Show Popover</button>
+ * ```
+ */
+var PopoverAnchorDirective = /** @class */ (function (_super) {
+    __extends(PopoverAnchorDirective, _super);
+    function PopoverAnchorDirective(hostEl, ngZone, popupService, renderer, popoverService) {
+        var _this = _super.call(this, ngZone, popupService, renderer) || this;
+        _this.hostEl = hostEl;
+        _this.ngZone = ngZone;
+        _this.popupService = popupService;
+        _this.renderer = renderer;
+        _this.popoverService = popoverService;
+        _this.mouseenterHandler = function () {
+            _this.controlVisibility(_this.hostEl.nativeElement, true);
+        };
+        _this.mouseleaveHandler = function () {
+            if (_this.isPrevented(_this.hostEl.nativeElement, false)) {
+                return;
+            }
+            if (!_this._hideSub) {
+                _this._hideSub = _this.popoverService.hidePopover.subscribe(function (val) {
+                    var isPopoverHovered = val[0], isAnchorHovered = val[1];
+                    if (!isPopoverHovered && !isAnchorHovered) {
+                        _this.hide();
+                    }
+                });
+            }
+        };
+        _this.focusHandler = function () {
+            _this.controlVisibility(_this.hostEl.nativeElement, true);
+        };
+        _this.blurHandler = function (args) {
+            var event = args.domEvent;
+            if (_this.isPrevented(_this.hostEl.nativeElement, false)) {
+                return;
+            }
+            // from anchor to popup focus check
+            var isFocusInside = !!closest(event.relatedTarget, function (node) { return node.classList && node.classList.contains('k-popover'); });
+            if (!isFocusInside) {
+                _this.hide();
+            }
+            if (!_this._focusInsideSub) {
+                // inside popup focus check
+                _this._focusInsideSub = _this.popoverService.isFocusInsidePopover.pipe(filter(function (v) { return v !== null; })).subscribe(function (val) {
+                    if (!val) {
+                        _this.hide();
+                    }
+                });
+            }
+        };
+        _this._popoverService = _this.popoverService;
+        return _this;
+    }
+    /**
+     * Shows the Popover. [See example]({% slug programmaticcontrol_popover %})
+     */
+    PopoverAnchorDirective.prototype.show = function () {
+        if (this.popupRef) {
+            return;
+        }
+        this.openPopup(this.hostEl.nativeElement);
+    };
+    /**
+     * Toggles the visibility of the Popover. [See example]({% slug programmaticcontrol_popover %})
+     */
+    PopoverAnchorDirective.prototype.toggle = function () {
+        if (this.popupRef) {
+            this.hide();
+        }
+        else {
+            this.show();
+        }
+    };
+    PopoverAnchorDirective.prototype.subscribeToEvents = function (arr) {
+        var _this = this;
+        this.subs.add(this.renderer.listen(this.hostEl.nativeElement, arr[0].name, function () {
+            _this.popoverService.emitAnchorState(true, _this.hostEl.nativeElement);
+            arr[0].handler();
+        }));
+        this.subs.add(this.renderer.listen(this.hostEl.nativeElement, arr[1].name, function (e) {
+            _this.popoverService.emitAnchorState(false, null);
+            arr[1].handler({ domEvent: e });
+        }));
+    };
+    PopoverAnchorDirective.prototype.subscribeClick = function () {
+        var _this = this;
+        if (this.disposeClickListener) {
+            this.disposeClickListener();
+        }
+        this.disposeClickListener = this.renderer.listen(document, 'click', function (e) {
+            _this.onClick(e);
+        });
+    };
+    /**
+     * @hidden
+     */
+    PopoverAnchorDirective.prototype.onClick = function (event) {
+        var _this = this;
+        var isInsidePopup = !!closest(event.target, function (node) { return node.classList && node.classList.contains('k-popup'); });
+        var isAnchor = !!closest(event.target, function (node) { return node === _this.hostEl.nativeElement; });
+        if (isInsidePopup || (this.popupRef && isAnchor)) {
+            return;
+        }
+        if (isAnchor) {
+            // on opening
+            this.controlVisibility(this.hostEl.nativeElement, true);
+        }
+        else {
+            // on closing
+            this.controlVisibility(this.hostEl.nativeElement, false);
+        }
+    };
+    PopoverAnchorDirective.prototype.controlVisibility = function (anchor, show) {
+        if (this.isPrevented(anchor, show)) {
+            return;
+        }
+        show ? this.show() : this.hide();
+    };
+    PopoverAnchorDirective = __decorate([
+        Directive({
+            selector: '[kendoPopoverAnchor]',
+            exportAs: 'kendoPopoverAnchor',
+            providers: [PopoverService]
+        }),
+        __metadata("design:paramtypes", [ElementRef,
+            NgZone,
+            PopupService,
+            Renderer2,
+            PopoverService])
+    ], PopoverAnchorDirective);
+    return PopoverAnchorDirective;
+}(PopoverDirectivesBase));
+
 /**
  * @hidden
  */
@@ -872,8 +1941,98 @@ var TooltipModule = /** @class */ (function () {
     return TooltipModule;
 }());
 
+var DIRECTIVES = [
+    PopoverActionsTemplateDirective,
+    PopoverBodyTemplateDirective,
+    PopoverTitleTemplateDirective,
+    PopoverAnchorDirective,
+    PopoverContainerDirective
+];
+/**
+ * Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
+ * definition for the Popover component.
+ *
+ * @example
+ *
+ * ```ts-no-run
+ * import { PopoverModule } from '@progress/kendo-angular-tooltip';
+ *
+ * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+ * import { NgModule } from '@angular/core';
+ *
+ * import { AppComponent } from './app.component';
+ *
+ * _@NgModule({
+ *     declarations: [AppComponent],
+ *     imports:      [BrowserModule, PopoverModule],
+ *     bootstrap:    [AppComponent]
+ * })
+ * export class AppModule {}
+ *
+ * platformBrowserDynamic().bootstrapModule(AppModule);
+ *
+ * ```
+ */
+var PopoverModule = /** @class */ (function () {
+    function PopoverModule() {
+    }
+    PopoverModule = __decorate([
+        NgModule({
+            declarations: DIRECTIVES.concat([
+                PopoverComponent
+            ]),
+            entryComponents: [PopoverComponent],
+            exports: DIRECTIVES.concat([PopoverComponent]),
+            imports: [
+                CommonModule,
+                PopupModule
+            ]
+        })
+    ], PopoverModule);
+    return PopoverModule;
+}());
+
+/**
+ * Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
+ * definition for the Tooltips components.
+ *
+ * @example
+ *
+ * ```ts-no-run
+ * import { TooltipsModule } from '@progress/kendo-angular-tooltip';
+ *
+ * // The browser platform with a compiler
+ * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+ *
+ * import { NgModule } from '@angular/core';
+ *
+ * // Import the app component
+ * _@NgModule{{
+ *    declarations: [AppComponent], // declare app component
+ *    imports:      [BrowserModule, TooltipsModule], // import TooltipsModule module
+ *    bootstrap:    [AppComponent]
+ * }}
+ * export class AppModule {}
+ *
+ * // Compile and launch the module
+ * platformBrowserDynamic().bootstrapModule(AppModule);
+ * ```
+ */
+var TooltipsModule = /** @class */ (function () {
+    function TooltipsModule() {
+    }
+    TooltipsModule = __decorate([
+        NgModule({
+            exports: [TooltipModule, PopoverModule]
+        })
+    ], TooltipsModule);
+    return TooltipsModule;
+}());
+
+// Tooltip
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { LocalizedMessagesDirective, TooltipContentComponent, TooltipDirective, TooltipModule, TooltipSettings, TOOLTIP_SETTINGS };
+export { LocalizedMessagesDirective, PopoverDirectivesBase, PopoverService, TooltipContentComponent, TooltipDirective, TooltipSettings, TOOLTIP_SETTINGS, PopoverComponent, PopoverContainerDirective, PopoverAnchorDirective, PopoverTitleTemplateDirective, PopoverBodyTemplateDirective, PopoverActionsTemplateDirective, PopoverShowEvent, PopoverShownEvent, PopoverHideEvent, PopoverHiddenEvent, TooltipModule, PopoverModule, TooltipsModule };