@progress/kendo-angular-tooltip 17.0.0-develop.3 → 17.0.0-develop.31

package/{fesm2020 → fesm2022}/progress-kendo-angular-tooltip.mjs

@@ -3,7 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as i0 from '@angular/core';
-import { forwardRef, Directive, Input, Optional, EventEmitter, isDevMode, Component, HostBinding, Output, ViewChild, ContentChild, ElementRef, Injectable, InjectionToken, Inject, NgModule } from '@angular/core';
+import { forwardRef, Directive, Input, Optional, isDevMode, EventEmitter, Component, HostBinding, Output, ViewChild, ContentChild, ElementRef, Injectable, InjectionToken, Inject, NgModule } from '@angular/core';
 import * as i1 from '@progress/kendo-angular-l10n';
 import { ComponentMessages, LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { PreventableEvent, focusableSelector, Keys, isDocumentAvailable, closest, hasObservers, ResizeBatchService } from '@progress/kendo-angular-common';
@@ -20,19 +20,24 @@ import { IconWrapperComponent, IconsService } from '@progress/kendo-angular-icon
  * @hidden
  */
 class LocalizedMessagesDirective extends ComponentMessages {
+    service;
+    /**
+     * The title of the close button.
+     */
+    closeTitle;
     constructor(service) {
         super();
         this.service = service;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LocalizedMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: LocalizedMessagesDirective, isStandalone: true, selector: "[kendoTooltipLocalizedMessages]", inputs: { closeTitle: "closeTitle" }, providers: [
+            {
+                provide: ComponentMessages,
+                useExisting: forwardRef(() => LocalizedMessagesDirective)
+            }
+        ], usesInheritance: true, ngImport: i0 });
 }
-LocalizedMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LocalizedMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
-LocalizedMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: LocalizedMessagesDirective, isStandalone: true, selector: "[kendoTooltipLocalizedMessages]", inputs: { closeTitle: "closeTitle" }, providers: [
-        {
-            provide: ComponentMessages,
-            useExisting: forwardRef(() => LocalizedMessagesDirective)
-        }
-    ], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LocalizedMessagesDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LocalizedMessagesDirective, decorators: [{
             type: Directive,
             args: [{
                     providers: [
@@ -62,6 +67,10 @@ const ERRORS = {
  * to be opened. If you cancel the event, the opening is prevented.
  */
 class PopoverShowEvent extends PreventableEvent {
+    /**
+     * The host element related to the popover.
+     */
+    anchor;
     /**
      * @hidden
      * Constructs the event arguments for the `show` event.
@@ -77,6 +86,14 @@ class PopoverShowEvent extends PreventableEvent {
  * to be closed. If you cancel the event, the popover stays open.
  */
 class PopoverHideEvent extends PreventableEvent {
+    /**
+     * The host element related to the popover.
+     */
+    anchor;
+    /**
+     * The popover element.
+     */
+    popover;
     /**
      * @hidden
      * Constructs the event arguments for the `hide` event.
@@ -93,6 +110,14 @@ class PopoverHideEvent extends PreventableEvent {
  * Arguments for the `shown` event. The `shown` event fires after the popover has opened and its opening animation has finished.
  */
 class PopoverShownEvent {
+    /**
+     * The host element related to the popover.
+     */
+    anchor;
+    /**
+     * The popover element.
+     */
+    popover;
     /**
      * @hidden
      * Constructs the event arguments for the `shown` event.
@@ -108,6 +133,10 @@ class PopoverShownEvent {
  * Arguments for the `hidden` event. The `hidden` event fires after the popover has closed and its closing animation has finished.
  */
 class PopoverHiddenEvent {
+    /**
+     * The host element related to the popover.
+     */
+    anchor;
     /**
      * @hidden
      * Constructs the event arguments for the `hidden` event.
@@ -274,8 +303,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-tooltip',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1728917331,
-    version: '17.0.0-develop.3',
+    publishDate: 1730478748,
+    version: '17.0.0-develop.31',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -286,13 +315,14 @@ const packageMetadata = {
  * with the `kendoPopoverTitleTemplate` directive inside the `<kendo-popover>` tag.
  */
 class PopoverTitleTemplateDirective {
+    templateRef;
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PopoverTitleTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: PopoverTitleTemplateDirective, isStandalone: true, selector: "[kendoPopoverTitleTemplate]", ngImport: i0 });
 }
-PopoverTitleTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PopoverTitleTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-PopoverTitleTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: PopoverTitleTemplateDirective, isStandalone: true, selector: "[kendoPopoverTitleTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PopoverTitleTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PopoverTitleTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoPopoverTitleTemplate]',
@@ -309,13 +339,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * with the `kendoPopoverBodyTemplate` directive inside the `<kendo-popover>` tag.
  */
 class PopoverBodyTemplateDirective {
+    templateRef;
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PopoverBodyTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: PopoverBodyTemplateDirective, isStandalone: true, selector: "[kendoPopoverBodyTemplate]", ngImport: i0 });
 }
-PopoverBodyTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PopoverBodyTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-PopoverBodyTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: PopoverBodyTemplateDirective, isStandalone: true, selector: "[kendoPopoverBodyTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PopoverBodyTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PopoverBodyTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoPopoverBodyTemplate]',
@@ -332,13 +363,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * with the `kendoPopoverActionsTemplate` directive inside the `<kendo-popover>` tag.
  */
 class PopoverActionsTemplateDirective {
+    templateRef;
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PopoverActionsTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: PopoverActionsTemplateDirective, isStandalone: true, selector: "[kendoPopoverActionsTemplate]", ngImport: i0 });
 }
-PopoverActionsTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PopoverActionsTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-PopoverActionsTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: PopoverActionsTemplateDirective, isStandalone: true, selector: "[kendoPopoverActionsTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PopoverActionsTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PopoverActionsTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoPopoverActionsTemplate]',
@@ -363,82 +395,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * ```
  */
 class PopoverComponent {
-    constructor(localization, renderer, element, zone) {
-        this.localization = localization;
-        this.renderer = renderer;
-        this.element = element;
-        this.zone = zone;
-        /**
-         * 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.closeOnKeyDown = new EventEmitter();
-        /**
-         * @hidden
-         */
-        this._width = 'auto';
-        /**
-         * @hidden
-         */
-        this._height = 'auto';
-        /**
-         * @hidden
-         */
-        this.popoverId = '';
-        this._offset = 6;
-        this.subs = new Subscription();
-        this._templateData = () => null;
-        validatePackage(packageMetadata);
-    }
+    localization;
+    renderer;
+    element;
+    zone;
+    /**
+     * @hidden
+     */
+    anchor;
+    /**
+     * 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`
+     */
+    position = 'right';
     /**
      * Specifies the distance from the Popover to its anchor element in pixels.
      *
@@ -473,6 +447,46 @@ class PopoverComponent {
     get height() {
         return this._height;
     }
+    /**
+     * @hidden
+     */
+    direction;
+    /**
+     * Specifies the main header text of the Popover.
+     *
+     * If a `titleTemplate` is provided it would take precedence over the title.
+     */
+    title;
+    /**
+     * @hidden
+     * Specifies the secondary header text of the Popover.
+     *
+     * If a `titleTemplate` is provided it would take precedence over the subtitle.
+     */
+    subtitle;
+    /**
+     * Represents the text that will be rendered in the Popover body section.
+     *
+     * If a `bodyTemplate` is provided it would take precedence over this text.
+     */
+    body;
+    /**
+     * Determines whether a callout will be rendered along the Popover. [See example]({% slug callout_popover %})
+     *
+     * @default true
+     */
+    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
+     */
+    animation = false;
     /**
      * 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-passing-data-to-templates)
@@ -486,6 +500,11 @@ class PopoverComponent {
     get templateData() {
         return this._templateData;
     }
+    /**
+     * @hidden
+     * Determines the visibility of the Popover.
+     */
+    visible = false;
     /**
      * @hidden
      */
@@ -498,6 +517,77 @@ class PopoverComponent {
     get hasAttributeHidden() {
         return !this.visible;
     }
+    /**
+     * 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 %})
+     */
+    show = new EventEmitter();
+    /**
+     * Fires after the Popover has been shown and the animation has ended. [See example]({% slug events_popover %})
+     */
+    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.
+     */
+    hide = new EventEmitter();
+    /**
+     * Fires after the Popover has been hidden and the animation has ended. [See example]({% slug events_popover %})
+     */
+    hidden = new EventEmitter();
+    /**
+     * @hidden
+     */
+    closeOnKeyDown = new EventEmitter();
+    /**
+     * @hidden
+     */
+    popoverWrapper;
+    /**
+     * @hidden
+     */
+    titleTemplateWrapper;
+    /**
+     * @hidden
+     */
+    bodyTemplateWrapper;
+    /**
+     * @hidden
+     */
+    titleTemplate;
+    /**
+     * @hidden
+     */
+    bodyTemplate;
+    /**
+     * @hidden
+     */
+    actionsTemplate;
+    /**
+     * @hidden
+     */
+    contextData;
+    /**
+     * @hidden
+     */
+    _width = 'auto';
+    /**
+     * @hidden
+     */
+    _height = 'auto';
+    /**
+     * @hidden
+     */
+    popoverId = '';
+    _offset = 6;
+    subs = new Subscription();
+    constructor(localization, renderer, element, zone) {
+        this.localization = localization;
+        this.renderer = renderer;
+        this.element = element;
+        this.zone = zone;
+        validatePackage(packageMetadata);
+    }
     ngOnInit() {
         this.popoverId = getId('k-popover');
         this.subs.add(this.localization.changes.subscribe(({ rtl }) => { this.direction = rtl ? 'rtl' : 'ltr'; }));
@@ -543,6 +633,7 @@ class PopoverComponent {
             this.closeOnKeyDown.emit();
         }
     }
+    _templateData = () => null;
     keepFocusWithinComponent(target, event) {
         const wrapper = this.popoverWrapper.nativeElement;
         const [firstFocusable, lastFocusable] = getFirstAndLastFocusable(wrapper);
@@ -579,15 +670,14 @@ class PopoverComponent {
         this.renderer.setAttribute(wrapper, 'id', this.popoverId);
         this.renderer.setAttribute(wrapper, 'role', focusablePopoverChildren.length > 0 ? 'dialog' : 'tooltip');
     }
-}
-PopoverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PopoverComponent, deps: [{ token: i1.LocalizationService }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-PopoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PopoverComponent, isStandalone: true, 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", closeOnKeyDown: "closeOnKeyDown" }, 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 }], viewQueries: [{ propertyName: "popoverWrapper", first: true, predicate: ["popoverWrapper"], descendants: true }, { propertyName: "titleTemplateWrapper", first: true, predicate: ["titleTemplateWrapper"], descendants: true }, { propertyName: "bodyTemplateWrapper", first: true, predicate: ["bodyTemplateWrapper"], descendants: true }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PopoverComponent, deps: [{ token: i1.LocalizationService }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PopoverComponent, isStandalone: true, 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", closeOnKeyDown: "closeOnKeyDown" }, 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 }], viewQueries: [{ propertyName: "popoverWrapper", first: true, predicate: ["popoverWrapper"], descendants: true }, { propertyName: "titleTemplateWrapper", first: true, predicate: ["titleTemplateWrapper"], descendants: true }, { propertyName: "bodyTemplateWrapper", first: true, predicate: ["bodyTemplateWrapper"], descendants: true }], ngImport: i0, template: `
     <div #popoverWrapper *ngIf="visible" class="k-popover k-popup" [ngStyle]="{'width': width, 'height': height}">
         <div class="k-popover-callout" [ngClass]="getCalloutPosition()" *ngIf="callout"></div>
 
@@ -625,7 +715,8 @@ PopoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versi
         </ng-template>
     </div>
     `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PopoverComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PopoverComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-popover',
@@ -749,17 +840,9 @@ const validShowOptions = ['hover', 'click', 'none', 'focus'];
  * @hidden
  */
 class PopoverDirectivesBase {
-    constructor(ngZone, popupService, renderer) {
-        this.ngZone = ngZone;
-        this.popupService = popupService;
-        this.renderer = renderer;
-        /**
-         * @hidden
-         */
-        this.anchor = null;
-        this.subs = new Subscription();
-        this._showOn = 'click';
-    }
+    ngZone;
+    popupService;
+    renderer;
     /**
      * Specifies the popover instance that will be rendered.
      * Accepts a [`PopoverComponent`]({% slug api_tooltip_popovercomponent %}) instance or
@@ -799,6 +882,31 @@ class PopoverDirectivesBase {
     get showOn() {
         return this._showOn;
     }
+    /**
+     * @hidden
+     */
+    anchor = null;
+    popupRef;
+    disposeHoverOverListener;
+    disposeHoverOutListener;
+    disposeClickListener;
+    disposePopupHoverOutListener;
+    disposePopupHoverInListener;
+    disposePopupFocusOutListener;
+    subs = new Subscription();
+    _popoverService;
+    _hideSub;
+    _focusInsideSub;
+    _popover;
+    _showOn = 'click';
+    _popupOpenSub;
+    _popupCloseSub;
+    _popupSubs;
+    constructor(ngZone, popupService, renderer) {
+        this.ngZone = ngZone;
+        this.popupService = popupService;
+        this.renderer = renderer;
+    }
     ngAfterViewInit() {
         if (!isDocumentAvailable()) {
             return;
@@ -1028,10 +1136,10 @@ class PopoverDirectivesBase {
         }
         return false;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PopoverDirectivesBase, deps: [{ token: i0.NgZone }, { token: i1$1.PopupService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: PopoverDirectivesBase, inputs: { popover: "popover", showOn: "showOn" }, ngImport: i0 });
 }
-PopoverDirectivesBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PopoverDirectivesBase, deps: [{ token: i0.NgZone }, { token: i1$1.PopupService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
-PopoverDirectivesBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: PopoverDirectivesBase, inputs: { popover: "popover", showOn: "showOn" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PopoverDirectivesBase, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PopoverDirectivesBase, decorators: [{
             type: Directive,
             args: [{}]
         }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i1$1.PopupService }, { type: i0.Renderer2 }]; }, propDecorators: { popover: [{
@@ -1044,13 +1152,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * @hidden
  */
 class PopoverService {
+    ngZone;
+    _pointerOverPopup = new BehaviorSubject(null);
+    _pointerOverAnchor = new BehaviorSubject(null);
+    _focusInsidePopover = new BehaviorSubject(null);
+    _hidePopover = new Subject();
+    _isOrigin;
+    originAnchor;
+    currentAnchor;
+    subs = new Subscription();
     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() {
@@ -1093,10 +1205,10 @@ class PopoverService {
             this._hidePopover.next([isPopoverHovered, isAnchorHovered, this._isOrigin, this.currentAnchor]);
         }));
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PopoverService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PopoverService });
 }
-PopoverService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PopoverService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
-PopoverService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PopoverService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PopoverService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PopoverService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i0.NgZone }]; } });
 
@@ -1111,6 +1223,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * ```
  */
 class PopoverAnchorDirective extends PopoverDirectivesBase {
+    hostEl;
+    ngZone;
+    popupService;
+    renderer;
+    popoverService;
     constructor(hostEl, ngZone, popupService, renderer, popoverService) {
         super(ngZone, popupService, renderer);
         this.hostEl = hostEl;
@@ -1118,44 +1235,6 @@ class PopoverAnchorDirective extends PopoverDirectivesBase {
         this.popupService = popupService;
         this.renderer = renderer;
         this.popoverService = popoverService;
-        this.mouseenterHandler = () => {
-            this.controlVisibility(this.hostEl.nativeElement, true);
-        };
-        this.mouseleaveHandler = () => {
-            if (this.isPrevented(this.hostEl.nativeElement, false)) {
-                return;
-            }
-            if (!this._hideSub) {
-                this._hideSub = this.popoverService.hidePopover.subscribe((val) => {
-                    const [isPopoverHovered, isAnchorHovered] = val;
-                    if (!isPopoverHovered && !isAnchorHovered) {
-                        this.hide();
-                    }
-                });
-            }
-        };
-        this.focusHandler = () => {
-            this.controlVisibility(this.hostEl.nativeElement, true);
-        };
-        this.blurHandler = (args) => {
-            const event = args.domEvent;
-            if (this.isPrevented(this.hostEl.nativeElement, false)) {
-                return;
-            }
-            // from anchor to popup focus check
-            const isFocusInside = !!closest(event.relatedTarget, (node) => 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(v => v !== null)).subscribe((val) => {
-                    if (!val) {
-                        this.hide();
-                    }
-                });
-            }
-        };
         this._popoverService = this.popoverService;
     }
     ngOnChanges(changes) {
@@ -1212,6 +1291,44 @@ class PopoverAnchorDirective extends PopoverDirectivesBase {
             this.onClick(e);
         });
     }
+    mouseenterHandler = () => {
+        this.controlVisibility(this.hostEl.nativeElement, true);
+    };
+    mouseleaveHandler = () => {
+        if (this.isPrevented(this.hostEl.nativeElement, false)) {
+            return;
+        }
+        if (!this._hideSub) {
+            this._hideSub = this.popoverService.hidePopover.subscribe((val) => {
+                const [isPopoverHovered, isAnchorHovered] = val;
+                if (!isPopoverHovered && !isAnchorHovered) {
+                    this.hide();
+                }
+            });
+        }
+    };
+    focusHandler = () => {
+        this.controlVisibility(this.hostEl.nativeElement, true);
+    };
+    blurHandler = (args) => {
+        const event = args.domEvent;
+        if (this.isPrevented(this.hostEl.nativeElement, false)) {
+            return;
+        }
+        // from anchor to popup focus check
+        const isFocusInside = !!closest(event.relatedTarget, (node) => 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(v => v !== null)).subscribe((val) => {
+                if (!val) {
+                    this.hide();
+                }
+            });
+        }
+    };
     /**
      * @hidden
      */
@@ -1241,10 +1358,10 @@ class PopoverAnchorDirective extends PopoverDirectivesBase {
             this.hide();
         }
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PopoverAnchorDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i1$1.PopupService }, { token: i0.Renderer2 }, { token: PopoverService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: PopoverAnchorDirective, isStandalone: true, selector: "[kendoPopoverAnchor]", providers: [PopoverService], exportAs: ["kendoPopoverAnchor"], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
 }
-PopoverAnchorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PopoverAnchorDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i1$1.PopupService }, { token: i0.Renderer2 }, { token: PopoverService }], target: i0.ɵɵFactoryTarget.Directive });
-PopoverAnchorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: PopoverAnchorDirective, isStandalone: true, selector: "[kendoPopoverAnchor]", providers: [PopoverService], exportAs: ["kendoPopoverAnchor"], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PopoverAnchorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PopoverAnchorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoPopoverAnchor]',
@@ -1269,6 +1386,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * ```
  */
 class PopoverContainerDirective extends PopoverDirectivesBase {
+    wrapperEl;
+    ngZone;
+    popupService;
+    renderer;
+    popoverService;
+    /**
+     * Specifies a selector for the elements that should display a popover.
+     *
+     * The possible values include any valid query selector.
+     * [See example](slug:configuration_popover#toc-popover-container)
+     */
+    filter;
     constructor(wrapperEl, ngZone, popupService, renderer, popoverService) {
         super(ngZone, popupService, renderer);
         this.wrapperEl = wrapperEl;
@@ -1276,49 +1405,6 @@ class PopoverContainerDirective extends PopoverDirectivesBase {
         this.popupService = popupService;
         this.renderer = renderer;
         this.popoverService = popoverService;
-        this.mouseenterHandler = (anchor) => {
-            this.controlVisibility(anchor, true);
-        };
-        this.mouseleaveHandler = (args) => {
-            const anchor = args.anchor;
-            if (this.isPrevented(anchor, false)) {
-                return;
-            }
-            if (!this._hideSub) {
-                this._hideSub = this.popoverService.hidePopover.subscribe((val) => {
-                    const [isPopoverHovered, , isOriginAnchor, currentAnchor] = val;
-                    if (!isPopoverHovered && !isOriginAnchor) {
-                        this.hide();
-                        if (!isOriginAnchor && currentAnchor) {
-                            this.show(currentAnchor);
-                        }
-                    }
-                });
-            }
-        };
-        this.focusHandler = (anchor) => {
-            this.controlVisibility(anchor, true);
-        };
-        this.blurHandler = (args) => {
-            const anchor = args.anchor;
-            const event = args.domEvent;
-            if (this.isPrevented(anchor, false)) {
-                return;
-            }
-            // from anchor to popup focus check
-            const isFocusInside = !!closest(event.relatedTarget, (node) => 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(v => v !== null)).subscribe((val) => {
-                    if (!val && !isFocusInside) {
-                        this.hide();
-                    }
-                });
-            }
-        };
         this._popoverService = this.popoverService;
     }
     /**
@@ -1363,6 +1449,49 @@ class PopoverContainerDirective extends PopoverDirectivesBase {
             this.clickHandler(filterElement, e);
         });
     }
+    mouseenterHandler = (anchor) => {
+        this.controlVisibility(anchor, true);
+    };
+    mouseleaveHandler = (args) => {
+        const anchor = args.anchor;
+        if (this.isPrevented(anchor, false)) {
+            return;
+        }
+        if (!this._hideSub) {
+            this._hideSub = this.popoverService.hidePopover.subscribe((val) => {
+                const [isPopoverHovered, , isOriginAnchor, currentAnchor] = val;
+                if (!isPopoverHovered && !isOriginAnchor) {
+                    this.hide();
+                    if (!isOriginAnchor && currentAnchor) {
+                        this.show(currentAnchor);
+                    }
+                }
+            });
+        }
+    };
+    focusHandler = (anchor) => {
+        this.controlVisibility(anchor, true);
+    };
+    blurHandler = (args) => {
+        const anchor = args.anchor;
+        const event = args.domEvent;
+        if (this.isPrevented(anchor, false)) {
+            return;
+        }
+        // from anchor to popup focus check
+        const isFocusInside = !!closest(event.relatedTarget, (node) => 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(v => v !== null)).subscribe((val) => {
+                if (!val && !isFocusInside) {
+                    this.hide();
+                }
+            });
+        }
+    };
     subscribeToShowEvents(arr) {
         const filteredElements = Array.from(document.querySelectorAll(this.filter));
         filteredElements.forEach((el) => {
@@ -1406,10 +1535,10 @@ class PopoverContainerDirective extends PopoverDirectivesBase {
             this.hide();
         }
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PopoverContainerDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i1$1.PopupService }, { token: i0.Renderer2 }, { token: PopoverService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: PopoverContainerDirective, isStandalone: true, selector: "[kendoPopoverContainer]", inputs: { filter: "filter" }, providers: [PopoverService], exportAs: ["kendoPopoverContainer"], usesInheritance: true, ngImport: i0 });
 }
-PopoverContainerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PopoverContainerDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i1$1.PopupService }, { token: i0.Renderer2 }, { token: PopoverService }], target: i0.ɵɵFactoryTarget.Directive });
-PopoverContainerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: PopoverContainerDirective, isStandalone: true, selector: "[kendoPopoverContainer]", inputs: { filter: "filter" }, providers: [PopoverService], exportAs: ["kendoPopoverContainer"], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PopoverContainerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PopoverContainerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoPopoverContainer]',
@@ -1425,48 +1554,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * @hidden
  */
 class TooltipContentComponent {
-    constructor(content, localizationService) {
-        this.content = content;
-        this.localizationService = localizationService;
-        /**
-         * @hidden
-         */
-        this.xIcon = xIcon;
-        this.close = new EventEmitter();
-        this.hostRole = 'tooltip';
-        this.tooltipWidth = null;
-        this.tooltipHeight = null;
-        this.callout = true;
-        this.calloutStyles = (position, calloutSize, isFlip) => {
-            const styles = {};
-            const isVertical = position === 'top' || position === 'bottom';
-            const flipDeg = '180deg';
-            const zeroDeg = '0deg';
-            if (!isFlip) {
-                styles.transform = isVertical ? `rotateX(${zeroDeg})` : `rotateY(${zeroDeg})`;
-                return styles;
-            }
-            if (position === 'top') {
-                styles.bottom = 'unset';
-            }
-            else if (position === 'bottom') {
-                styles.top = 'unset';
-            }
-            else if (position === 'left') {
-                styles.right = 'unset';
-            }
-            else if (position === 'right') {
-                styles.left = 'unset';
-            }
-            styles[position] = `${-calloutSize}px`;
-            styles.transform = isVertical ? `rotateX(${flipDeg})` : `rotateY(${flipDeg})`;
-            return styles;
-        };
-        this.direction = localizationService.rtl ? 'rtl' : 'ltr';
-    }
+    content;
+    localizationService;
+    /**
+     * @hidden
+     */
+    xIcon = xIcon;
+    /**
+     * @hidden
+     */
+    direction;
+    close = new EventEmitter();
     get cssClasses() {
         return 'k-tooltip';
     }
+    hostRole = 'tooltip';
     get hostId() {
         return this.tooltipId;
     }
@@ -1476,6 +1578,26 @@ class TooltipContentComponent {
     get cssPosition() {
         return 'relative';
     }
+    tooltipWidth = null;
+    tooltipHeight = null;
+    titleTemplate;
+    anchor;
+    closable;
+    templateRef;
+    templateString;
+    closeTitle;
+    callout = true;
+    position;
+    /**
+     * @hidden
+     */
+    tooltipId;
+    dynamicRTLSubscription;
+    constructor(content, localizationService) {
+        this.content = content;
+        this.localizationService = localizationService;
+        this.direction = localizationService.rtl ? 'rtl' : 'ltr';
+    }
     ngOnInit() {
         this.tooltipId = getId('tooltip');
         this.dynamicRTLSubscription = this.localizationService.changes
@@ -1523,15 +1645,39 @@ class TooltipContentComponent {
             callout.style[style] = calloutStyles[style];
         });
     }
-}
-TooltipContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TooltipContentComponent, deps: [{ token: i0.ElementRef }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-TooltipContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TooltipContentComponent, isStandalone: true, selector: "kendo-tooltip", inputs: { tooltipWidth: "tooltipWidth", tooltipHeight: "tooltipHeight", titleTemplate: "titleTemplate", anchor: "anchor", closable: "closable", templateRef: "templateRef", templateString: "templateString" }, outputs: { close: "close" }, host: { properties: { "attr.dir": "this.direction", "class": "this.cssClasses", "attr.role": "this.hostRole", "attr.id": "this.hostId", "class.k-tooltip-closable": "this.className", "style.position": "this.cssPosition", "style.width.px": "this.tooltipWidth", "style.height.px": "this.tooltipHeight" } }, providers: [
-        LocalizationService,
-        {
-            provide: L10N_PREFIX,
-            useValue: 'kendo.tooltip'
-        }
-    ], ngImport: i0, template: `
+    calloutStyles = (position, calloutSize, isFlip) => {
+        const styles = {};
+        const isVertical = position === 'top' || position === 'bottom';
+        const flipDeg = '180deg';
+        const zeroDeg = '0deg';
+        if (!isFlip) {
+            styles.transform = isVertical ? `rotateX(${zeroDeg})` : `rotateY(${zeroDeg})`;
+            return styles;
+        }
+        if (position === 'top') {
+            styles.bottom = 'unset';
+        }
+        else if (position === 'bottom') {
+            styles.top = 'unset';
+        }
+        else if (position === 'left') {
+            styles.right = 'unset';
+        }
+        else if (position === 'right') {
+            styles.left = 'unset';
+        }
+        styles[position] = `${-calloutSize}px`;
+        styles.transform = isVertical ? `rotateX(${flipDeg})` : `rotateY(${flipDeg})`;
+        return styles;
+    };
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TooltipContentComponent, deps: [{ token: i0.ElementRef }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TooltipContentComponent, isStandalone: true, selector: "kendo-tooltip", inputs: { tooltipWidth: "tooltipWidth", tooltipHeight: "tooltipHeight", titleTemplate: "titleTemplate", anchor: "anchor", closable: "closable", templateRef: "templateRef", templateString: "templateString" }, outputs: { close: "close" }, host: { properties: { "attr.dir": "this.direction", "class": "this.cssClasses", "attr.role": "this.hostRole", "attr.id": "this.hostId", "class.k-tooltip-closable": "this.className", "style.position": "this.cssPosition", "style.width.px": "this.tooltipWidth", "style.height.px": "this.tooltipHeight" } }, providers: [
+            LocalizationService,
+            {
+                provide: L10N_PREFIX,
+                useValue: 'kendo.tooltip'
+            }
+        ], ngImport: i0, template: `
         <ng-container kendoTooltipLocalizedMessages
             i18n-closeTitle="kendo.tooltip.closeTitle|The title of the close button"
             closeTitle="Close"
@@ -1569,7 +1715,8 @@ TooltipContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
 
         <div class="k-callout" *ngIf="callout" [ngClass]="calloutPositionClass()"></div>
     `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoTooltipLocalizedMessages]", inputs: ["closeTitle"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TooltipContentComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TooltipContentComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-tooltip',
@@ -1695,15 +1842,52 @@ const TOOLTIP_SETTINGS = new InjectionToken('kendo-ui-tooltip-settings');
  * ```
  */
 class TooltipSettings {
+    /**
+     * Specifies if the Тooltip will display a callout arrow.
+     *
+     * The possible values are:
+     * * `true` (default)
+     * * `false`
+     */
+    callout;
+    /**
+     * Specifies the title of the close button.
+     */
+    closeTitle;
+    /**
+     * Specifies the position of the Tooltip that is
+     * relative to the anchor element.
+     *
+     * The possible values are:
+     * * `top` (default)
+     * * `bottom`
+     * * `left`
+     * * `right`
+     */
+    position;
+    /**
+     * Specifies when the Тooltip will be rendered.
+     *
+     * The possible values are:
+     * * `hover` (default)
+     * * `click`
+     * * `none`
+     */
+    showOn;
+    /**
+     * Specifies the delay in milliseconds before the Tooltip is shown.
+     * * `100` (default) milliseconds.
+     */
+    showAfter;
     /**
      * @hidden
      */
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     constructor() { }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TooltipSettings, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TooltipSettings });
 }
-TooltipSettings.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TooltipSettings, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-TooltipSettings.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TooltipSettings });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TooltipSettings, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TooltipSettings, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return []; } });
 
@@ -1719,60 +1903,124 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * ```
  */
 class TooltipDirective {
+    tooltipWrapper;
+    ngZone;
+    renderer;
+    popupService;
+    /**
+     * Specifies a selector for elements within a container which will display a tooltip
+     * ([see example]({% slug anchorelements_tooltip %})). The possible values include any
+     * DOM `selector`. The default value is `[title]`.
+     */
+    filter = '[title]';
+    /**
+     * Specifies the position of the Tooltip that is relative to the
+     * anchor element ([see example]({% slug positioning_tooltip %})).
+     *
+     * The possible values are:
+     * * `top` (default)
+     * * `bottom`
+     * * `left`
+     * * `right`
+     */
+    position = 'top';
+    /**
+     * Renders the passed template as a header title of the Tooltip
+     * ([see example]({% slug anchorelements_tooltip %})).
+     */
+    titleTemplate;
+    /**
+     * Specifies when the Тooltip will be rendered
+     * ([see example]({% slug programmaticopening_tooltip %})).
+     *
+     * The possible values are:
+     * * `hover` (default)
+     * * `click`
+     * * `none`
+     */
+    showOn;
+    /**
+     * Specifies the delay in milliseconds before the Tooltip is shown.
+     * * `100` (default) milliseconds.
+     */
+    showAfter = 100;
+    /**
+     * Specifies if the Тooltip will display a callout arrow.
+     *
+     * The possible values are:
+     * * `true` (default)
+     * * `false`
+     */
+    callout = true;
+    /**
+     * Specifies if the Тooltip will display a **Close** button
+     * ([see example]({% slug closable_tooltip %})).
+     *
+     * The possible values are:
+     * * `true`
+     * * `false`
+     */
+    closable = false;
+    /**
+     * Specifies the offset in pixels between the Tooltip and the anchor. Defaults to `6` pixels.
+     * If the `callout` property is set to `true`, the offset is rendered from the callout arrow.
+     * If the `callout` property is set to `false`, the offset is rendered from the content of the Tooltip.
+     */
+    offset = 6;
+    /**
+     * Specifies the width of the Тooltip ([see example]({% slug anchorelements_tooltip %})).
+     */
+    tooltipWidth;
+    /**
+     * Specifies the height of the Тooltip.
+     */
+    tooltipHeight;
+    /**
+     * Specifies a CSS class that will be added to the Tooltip.
+     */
+    tooltipClass;
+    /**
+     * @hidden
+     * Specifies a CSS class that will be added to the kendo-tooltip element.
+     */
+    tooltipContentClass;
+    /**
+     * Provides screen boundary detection when the Тooltip is shown.
+     */
+    collision;
+    /**
+     * Specifies the title of the close button.
+     */
+    closeTitle;
+    /**
+     * Sets the content of the Tooltip as a template reference
+     * ([see example]({% slug templates_tooltip %})).
+     */
+    set tooltipTemplate(value) {
+        this.template = value;
+    }
+    get tooltipTemplate() {
+        return this.template;
+    }
+    popupRef;
+    template;
+    showTimeout;
+    anchor = null;
+    mouseOverSubscription;
+    mouseOutSubscription;
+    mouseClickSubscription;
+    anchorTitleSubscription;
+    popupPositionChangeSubscription;
+    popupMouseOutSubscription;
+    keyboardNavigationSubscription = new Subscription();
+    closeClickSubscription;
+    validPositions = ['top', 'bottom', 'right', 'left'];
+    validShowOptions = ['hover', 'click', 'none'];
     constructor(tooltipWrapper, ngZone, renderer, popupService, settings, legacySettings) {
         this.tooltipWrapper = tooltipWrapper;
         this.ngZone = ngZone;
         this.renderer = renderer;
         this.popupService = popupService;
-        /**
-         * Specifies a selector for elements within a container which will display a tooltip
-         * ([see example]({% slug anchorelements_tooltip %})). The possible values include any
-         * DOM `selector`. The default value is `[title]`.
-         */
-        this.filter = '[title]';
-        /**
-         * Specifies the position of the Tooltip that is relative to the
-         * anchor element ([see example]({% slug positioning_tooltip %})).
-         *
-         * The possible values are:
-         * * `top` (default)
-         * * `bottom`
-         * * `left`
-         * * `right`
-         */
-        this.position = 'top';
-        /**
-         * Specifies the delay in milliseconds before the Tooltip is shown.
-         * * `100` (default) milliseconds.
-         */
-        this.showAfter = 100;
-        /**
-         * Specifies if the Тooltip will display a callout arrow.
-         *
-         * The possible values are:
-         * * `true` (default)
-         * * `false`
-         */
-        this.callout = true;
-        /**
-         * Specifies if the Тooltip will display a **Close** button
-         * ([see example]({% slug closable_tooltip %})).
-         *
-         * The possible values are:
-         * * `true`
-         * * `false`
-         */
-        this.closable = false;
-        /**
-         * Specifies the offset in pixels between the Tooltip and the anchor. Defaults to `6` pixels.
-         * If the `callout` property is set to `true`, the offset is rendered from the callout arrow.
-         * If the `callout` property is set to `false`, the offset is rendered from the content of the Tooltip.
-         */
-        this.offset = 6;
-        this.anchor = null;
-        this.keyboardNavigationSubscription = new Subscription();
-        this.validPositions = ['top', 'bottom', 'right', 'left'];
-        this.validShowOptions = ['hover', 'click', 'none'];
         validatePackage(packageMetadata);
         Object.assign(this, settings, legacySettings);
         this.ngZone.runOutsideAngular(() => {
@@ -1792,16 +2040,6 @@ class TooltipDirective {
                 .subscribe(e => this.onMouseOut(e));
         });
     }
-    /**
-     * Sets the content of the Tooltip as a template reference
-     * ([see example]({% slug templates_tooltip %})).
-     */
-    set tooltipTemplate(value) {
-        this.template = value;
-    }
-    get tooltipTemplate() {
-        return this.template;
-    }
     /**
      * Shows the Tooltip.
      * @param anchor&mdash; ElementRef|Element.
@@ -2092,10 +2330,10 @@ class TooltipDirective {
             throw new Error(`Invalid value provided for showOn property.The available options are 'hover' or 'none'.`);
         }
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TooltipDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i1$1.PopupService }, { token: TooltipSettings, optional: true }, { token: TOOLTIP_SETTINGS, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: TooltipDirective, isStandalone: true, selector: "[kendoTooltip]", inputs: { filter: "filter", position: "position", titleTemplate: "titleTemplate", showOn: "showOn", showAfter: "showAfter", callout: "callout", closable: "closable", offset: "offset", tooltipWidth: "tooltipWidth", tooltipHeight: "tooltipHeight", tooltipClass: "tooltipClass", tooltipContentClass: "tooltipContentClass", collision: "collision", closeTitle: "closeTitle", tooltipTemplate: "tooltipTemplate" }, exportAs: ["kendoTooltip"], usesOnChanges: true, ngImport: i0 });
 }
-TooltipDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TooltipDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i1$1.PopupService }, { token: TooltipSettings, optional: true }, { token: TOOLTIP_SETTINGS, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-TooltipDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: TooltipDirective, isStandalone: true, selector: "[kendoTooltip]", inputs: { filter: "filter", position: "position", titleTemplate: "titleTemplate", showOn: "showOn", showAfter: "showAfter", callout: "callout", closable: "closable", offset: "offset", tooltipWidth: "tooltipWidth", tooltipHeight: "tooltipHeight", tooltipClass: "tooltipClass", tooltipContentClass: "tooltipContentClass", collision: "collision", closeTitle: "closeTitle", tooltipTemplate: "tooltipTemplate" }, exportAs: ["kendoTooltip"], usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TooltipDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TooltipDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoTooltip]',
@@ -2200,11 +2438,11 @@ const KENDO_TOOLTIPS = [
  * ```
  */
 class TooltipModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TooltipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: TooltipModule, imports: [TooltipDirective, TooltipContentComponent, LocalizedMessagesDirective], exports: [TooltipDirective, TooltipContentComponent, LocalizedMessagesDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TooltipModule, providers: [PopupService, ResizeBatchService, IconsService], imports: [TooltipContentComponent] });
 }
-TooltipModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TooltipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-TooltipModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: TooltipModule, imports: [TooltipDirective, TooltipContentComponent, LocalizedMessagesDirective], exports: [TooltipDirective, TooltipContentComponent, LocalizedMessagesDirective] });
-TooltipModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TooltipModule, providers: [PopupService, ResizeBatchService, IconsService], imports: [TooltipContentComponent] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TooltipModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TooltipModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...KENDO_TOOLTIP],
@@ -2240,11 +2478,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * ```
  */
 class PopoverModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PopoverModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: PopoverModule, imports: [PopoverComponent, PopoverActionsTemplateDirective, PopoverBodyTemplateDirective, PopoverTitleTemplateDirective, PopoverAnchorDirective, PopoverContainerDirective], exports: [PopoverComponent, PopoverActionsTemplateDirective, PopoverBodyTemplateDirective, PopoverTitleTemplateDirective, PopoverAnchorDirective, PopoverContainerDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PopoverModule, providers: [PopupService, ResizeBatchService] });
 }
-PopoverModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PopoverModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-PopoverModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: PopoverModule, imports: [PopoverComponent, PopoverActionsTemplateDirective, PopoverBodyTemplateDirective, PopoverTitleTemplateDirective, PopoverAnchorDirective, PopoverContainerDirective], exports: [PopoverComponent, PopoverActionsTemplateDirective, PopoverBodyTemplateDirective, PopoverTitleTemplateDirective, PopoverAnchorDirective, PopoverContainerDirective] });
-PopoverModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PopoverModule, providers: [PopupService, ResizeBatchService], imports: [PopoverComponent] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PopoverModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PopoverModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [...KENDO_POPOVER],
@@ -2281,11 +2519,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * ```
  */
 class TooltipsModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TooltipsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: TooltipsModule, imports: [TooltipDirective, TooltipContentComponent, LocalizedMessagesDirective, PopoverComponent, PopoverActionsTemplateDirective, PopoverBodyTemplateDirective, PopoverTitleTemplateDirective, PopoverAnchorDirective, PopoverContainerDirective], exports: [TooltipDirective, TooltipContentComponent, LocalizedMessagesDirective, PopoverComponent, PopoverActionsTemplateDirective, PopoverBodyTemplateDirective, PopoverTitleTemplateDirective, PopoverAnchorDirective, PopoverContainerDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TooltipsModule, providers: [PopupService, ResizeBatchService, IconsService], imports: [TooltipContentComponent] });
 }
-TooltipsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TooltipsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-TooltipsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: TooltipsModule, imports: [TooltipDirective, TooltipContentComponent, LocalizedMessagesDirective, PopoverComponent, PopoverActionsTemplateDirective, PopoverBodyTemplateDirective, PopoverTitleTemplateDirective, PopoverAnchorDirective, PopoverContainerDirective], exports: [TooltipDirective, TooltipContentComponent, LocalizedMessagesDirective, PopoverComponent, PopoverActionsTemplateDirective, PopoverBodyTemplateDirective, PopoverTitleTemplateDirective, PopoverAnchorDirective, PopoverContainerDirective] });
-TooltipsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TooltipsModule, providers: [PopupService, ResizeBatchService, IconsService], imports: [TooltipContentComponent, PopoverComponent] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TooltipsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TooltipsModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...KENDO_TOOLTIPS],