@progress/kendo-angular-tooltip 17.0.0-develop.4 → 17.0.0-develop.41

package/README.md

@@ -2,55 +2,55 @@
 <img width="631" src="https://www.telerik.com/kendo-angular-ui/npm-banner.svg">
 </a>
 
-## Kendo UI for Angular Tooltips Component
+## Kendo UI for Angular Tooltips Package (Tooltip and Popover Components)
 
-> **Important**
-> * This package is part of [Kendo UI for Angular](https://www.telerik.com/kendo-angular-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-tooltip)&mdash;a commercial library designed and built for developing business applications with Angular. Every UI component in the Kendo UI for Angular suite has been built from the ground-up specifically for Angular.
-> * You will need to install a license key when adding the package to your project. For more information, please refer to the [Kendo UI for Angular My License page](https://www.telerik.com/kendo-angular-ui/my-license?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-tooltip).
-> * To receive a license key, you need to either [purchase a license](https://www.telerik.com/purchase/kendo-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-tooltip) or register for a [free trial](https://www.telerik.com/download-login-v2-kendo-angular-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-tooltip). Doing so indicates that you [accept the Kendo UI for Angular License Agreement](https://www.telerik.com/purchase/license-agreement/kendo-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-tooltip).
+> * This package is part of [Kendo UI for Angular](https://www.telerik.com/kendo-angular-ui)&mdash;a commercial library designed and built for developing business applications with Angular. Every UI component in the Kendo UI for Angular suite has been built from the ground-up specifically for Angular.
+> * You must [install a license key](https://www.telerik.com/kendo-angular-ui/my-license) when adding the package to your project. To receive a license key, either [purchase a license](https://www.telerik.com/purchase/kendo-ui) or register for a [free trial](https://www.telerik.com/download-login-v2-kendo-angular-ui).
 > * The 30-day free trial gives you access to all the Kendo UI for Angular components and their full functionality. Additionally, for the period of your license, you get access to our legendary technical support provided directly by the Kendo UI for Angular dev team!
 >
-> [Start using Kendo UI for Angular](https://www.telerik.com/download-login-v2-kendo-angular-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-tooltip) and speed up your development process!
+> [Start using Kendo UI for Angular](https://www.telerik.com/download-login-v2-kendo-angular-ui) and speed up your development process!
 
-The [Kendo UI for Angular Tooltips Package](https://www.telerik.com/kendo-angular-ui/components/tooltips/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-tooltip) contains two components, the Angular Tooltip and the Angular Popover. They both render popups with information related to UI elements and can be displayed when the element is focused or hovered over (or clicked in the Popover case). With tons of configuration options, they allow building custom tooltips in Angular.
+The [Kendo UI for Angular Tooltips](https://www.telerik.com/kendo-angular-ui/components/tooltips/) package contains two components, the Angular Tooltip and the Angular Popover. They both render popups with information related to UI elements and can be displayed when the element is focused or hovered over (or clicked in the Popover case). With tons of configuration options, they allow building custom tooltips in Angular.
 
-## Angular Tooltip Component
+## What's Included in the Angular Tooltips Package
 
-The [Angular Tooltip Component](https://www.telerik.com/kendo-angular-ui/components/tooltips/tooltip/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-tooltip) renders a customizable tooltip that can be used stand alone of with other Kendo UI for Angular components.
+* [Angular Tooltip Component](https://www.telerik.com/kendo-angular-ui/components/tooltips/tooltip/)&mdash;Renders a customizable tooltip that can be used stand alone of with other Kendo UI for Angular components.
 
 <img src="https://d585tldpucybw.cloudfront.net/sfimages/default-source/component-pages/angular/angular-tooltip-overview.jpg" alt="Component for creating custom tooltips in Angular">
 
-* [Anchor Elements](https://www.telerik.com/kendo-angular-ui/components/tooltips/tooltip/anchor-elements/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-tooltip)&mdash;Specify which elements (anchors) will render a tooltip.
-* [Programtic Opening](https://www.telerik.com/kendo-angular-ui/components/tooltips/tooltip/opening/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-tooltip)&mdash;The Tooltip provides options for consuming its API programmatically.
-* [Closable](https://www.telerik.com/kendo-angular-ui/components/tooltips/tooltip/closable-tooltip/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-tooltip)&mdash;Optionally add a close button.
-* [Positioning](https://www.telerik.com/kendo-angular-ui/components/tooltips/tooltip/positioning/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-tooltip)&mdash;Choose the position on the screen that the Tooltip appears.
-* [Templates](https://www.telerik.com/kendo-angular-ui/components/tooltips/tooltip/templates/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-tooltip)&mdash;Provide your own layout and style templates for the Tooltop content.
+* [Angular Popover Component](https://www.telerik.com/kendo-angular-ui/components/tooltips/popover/)&mdash;It is nearly identical to the Angular Tooltip component, except it is designed to display richer content and it can be opened via click. For example, it is possible to host a calendar or a grid in the Popover while the Tooltop is designed mostly for text.
 
-## Angular Popover Component
+<img src="https://d585tldpucybw.cloudfront.net/sfimages/default-source/component-pages/common/popover/popover_component_overview.jpg" alt="Angular Popover Example">
 
-The [Angular Popover Component](https://www.telerik.com/kendo-angular-ui/components/tooltips/popover/) is nearly identical to the Angular Tooltip component, except it is designed to display richer content and it can be opened via click. For example, it is possible to host a calendar or a grid in the Popover while the Tooltop is designed mostly for text.
+## Key Features
 
-<img src="https://d585tldpucybw.cloudfront.net/sfimages/default-source/component-pages/common/popover/popover_component_overview.jpg" alt="Angular Popover Example">
+Among the many features which the Kendo UI for Angular Tooltips deliver are:
 
-* [Single or Multiple Anchor Elements](https://www.telerik.com/kendo-angular-ui/components/tooltips/popover/configuration/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-tooltip)&mdash;Associate the Popover with a single element or associate one Popover with multiple elements.
-* [Programitic Control](https://www.telerik.com/kendo-angular-ui/components/tooltips/popover/programmatic-control/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-tooltip)&mdash;The Popover provides options for consuming its API programmatically.
-* [Positioning](https://www.telerik.com/kendo-angular-ui/components/tooltips/popover/positioning/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-tooltip)&mdash;Choose the position on the screen that the Popover appears.
-* [Templates](https://www.telerik.com/kendo-angular-ui/components/tooltips/popover/templates/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-tooltip)&mdash;Provide your own layout and style templates for the Popover content.
-* [Animations](https://www.telerik.com/kendo-angular-ui/components/tooltips/popover/animations/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-tooltip)&mdash;Enable animations that will be applied on the opening of the Popover.
+* [Anchor Elements](https://www.telerik.com/kendo-angular-ui/components/tooltips/tooltip/anchor-elements/)&mdash;Specify which elements (anchors) will render the popup element.
+* [Programmatic Control](https://www.telerik.com/kendo-angular-ui/components/tooltips/tooltip/opening/)&mdash;The Tooltips provide options for consuming the components' API programmatically.
+* [Closable](https://www.telerik.com/kendo-angular-ui/components/tooltips/tooltip/closable-tooltip/)&mdash;Optionally add a close button.
+* [Positioning](https://www.telerik.com/kendo-angular-ui/components/tooltips/popover/positioning/)&mdash;Choose the position on the screen that the Tooltips appear.
+* [Templates](https://www.telerik.com/kendo-angular-ui/components/tooltips/popover/templates/)&mdash;Provide your own layout and style templates for the Tooltips content.
+* [Accessibility](https://www.telerik.com/kendo-angular-ui/components/tooltips/popover/accessibility/)&mdash;The Tooltips are accessible for screen readers and supports WAI-ARIA attributes.
+* [Keyboard Navigation](https://www.telerik.com/kendo-angular-ui/components/tooltips/popover/keyboard-navigation/)&mdash;The Tooltips support a number of keyboard shortcuts which allows users to accomplish various commands.
 
-## Resources
+## Support Options
 
-* [Get Started with Kendo UI for Angular (requires trial registration)](https://www.telerik.com/kendo-angular-ui/getting-started?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-tooltip)
-* [Demos, documentation, and component reference](https://www.telerik.com/kendo-angular-ui/components?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-tooltip)
-* [Blogs](http://www.telerik.com/blogs/kendo-ui)
-* [Kendo UI for Angular pricing and licensing](https://www.telerik.com/purchase/kendo-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-tooltip)
+For any issues you might encounter while working with the Kendo UI for Angular Tooltips, you have the following support channels available:
 
-## Questions and Feedback
+* Industry-leading technical support&mdash;Kendo UI for Angular paid license holders and users with an active (free) trial license can take advantage of our outstanding customer support. To submit a ticket, use the [dedicated Kendo UI for Angular support system](https://www.telerik.com/account/support-tickets).
+* Product forums&mdash;The [Kendo UI for Angular forums](https://www.telerik.com/forums/kendo-angular-ui) are part of the free support you can get from the community and from the Kendo UI for Angular team.
+* Feedback portal&mdash;The [Kendo UI for Angular feedback portal](https://feedback.telerik.com/kendo-angular-ui) is where you can request and vote for new features to be added.
+
+## Resources
 
-* [Official Forums](https://www.telerik.com/forums/kendo-angular-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-tooltip)
-* [GitHub Issues](https://github.com/telerik/kendo-angular/issues)
-* [Feedback Portal](https://feedback.telerik.com/kendo-angular-ui)
-* [StackOverflow](https://stackoverflow.com/questions/tagged/kendo-ui-angular2)
+* [Getting Started with Kendo UI for Angular](https://www.telerik.com/kendo-angular-ui/getting-started)
+* [Getting Started with the Kendo UI for Angular Tooltips](https://www.telerik.com/kendo-angular-ui/components/tooltips/installation/getting-started)
+* [Tooltips Overview page](https://www.telerik.com/kendo-angular-ui/components/tooltips) and [Tooltips API reference](https://www.telerik.com/kendo-angular-ui/components/tooltips/api)
+* [Kendo UI for Angular roadmap](https://www.telerik.com/kendo-angular-ui/roadmap)
+* [Kendo UI for Angular Blog](https://www.telerik.com/blogs/tag/kendo-ui-for-angular)
+* [Demos, documentation, and component reference](https://www.telerik.com/kendo-angular-ui/components)
+* [Kendo UI for Angular pricing and licensing](https://www.telerik.com/purchase/kendo-ui)
 
 *Copyright © 2024 Progress Software Corporation and/or one of its subsidiaries or affiliates. All rights reserved.*
 

package/{esm2020 → esm2022}/localization/localized-messages.directive.mjs

@@ -10,19 +10,24 @@ import * as i1 from "@progress/kendo-angular-l10n";
  * @hidden
  */
 export 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: [

package/{esm2020 → esm2022}/models/events.mjs

@@ -8,6 +8,10 @@ import { PreventableEvent } from "@progress/kendo-angular-common";
  * to be opened. If you cancel the event, the opening is prevented.
  */
 export class PopoverShowEvent extends PreventableEvent {
+    /**
+     * The host element related to the popover.
+     */
+    anchor;
     /**
      * @hidden
      * Constructs the event arguments for the `show` event.
@@ -23,6 +27,14 @@ export class PopoverShowEvent extends PreventableEvent {
  * to be closed. If you cancel the event, the popover stays open.
  */
 export 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.
@@ -39,6 +51,14 @@ export class PopoverHideEvent extends PreventableEvent {
  * Arguments for the `shown` event. The `shown` event fires after the popover has opened and its opening animation has finished.
  */
 export class PopoverShownEvent {
+    /**
+     * The host element related to the popover.
+     */
+    anchor;
+    /**
+     * The popover element.
+     */
+    popover;
     /**
      * @hidden
      * Constructs the event arguments for the `shown` event.
@@ -54,6 +74,10 @@ export class PopoverShownEvent {
  * Arguments for the `hidden` event. The `hidden` event fires after the popover has closed and its closing animation has finished.
  */
 export class PopoverHiddenEvent {
+    /**
+     * The host element related to the popover.
+     */
+    anchor;
     /**
      * @hidden
      * Constructs the event arguments for the `hidden` event.

package/{esm2020 → esm2022}/package-metadata.mjs

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-tooltip',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1728985167,
-    version: '17.0.0-develop.4',
+    publishDate: 1730818343,
+    version: '17.0.0-develop.41',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };

package/{esm2020 → esm2022}/popover/anchor.directive.mjs

@@ -23,6 +23,11 @@ import * as i2 from "./popover.service";
  * ```
  */
 export class PopoverAnchorDirective extends PopoverDirectivesBase {
+    hostEl;
+    ngZone;
+    popupService;
+    renderer;
+    popoverService;
     constructor(hostEl, ngZone, popupService, renderer, popoverService) {
         super(ngZone, popupService, renderer);
         this.hostEl = hostEl;
@@ -30,44 +35,6 @@ export 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) {
@@ -124,6 +91,44 @@ export 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
      */
@@ -153,10 +158,10 @@ export 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.PopupService }, { token: i0.Renderer2 }, { token: i2.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.PopupService }, { token: i0.Renderer2 }, { token: i2.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]',

package/{esm2020 → esm2022}/popover/container.directive.mjs

@@ -27,6 +27,18 @@ import * as i2 from "./popover.service";
  * ```
  */
 export 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;
@@ -34,49 +46,6 @@ export 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;
     }
     /**
@@ -121,6 +90,49 @@ export 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) => {
@@ -164,10 +176,10 @@ export 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.PopupService }, { token: i0.Renderer2 }, { token: i2.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.PopupService }, { token: i0.Renderer2 }, { token: i2.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]',

package/{esm2020 → esm2022}/popover/directives-base.mjs

@@ -19,17 +19,9 @@ const validShowOptions = ['hover', 'click', 'none', 'focus'];
  * @hidden
  */
 export 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
@@ -69,6 +61,31 @@ export 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;
@@ -147,7 +164,6 @@ export class PopoverDirectivesBase {
             popupAlign,
             anchorAlign,
             margin: popupMargin,
-            popupClass: 'k-popup-transparent',
             collision: { horizontal: 'fit', vertical: 'fit' }
         });
         const popupInstance = this.popupRef.content.instance;
@@ -298,10 +314,10 @@ export 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.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.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.PopupService }, { type: i0.Renderer2 }]; }, propDecorators: { popover: [{