@progress/kendo-angular-tooltip 11.1.0-develop.8 → 11.1.0-develop.9

package/fesm2020/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 { InjectionToken, Injectable, forwardRef, Directive, Input, EventEmitter, Component, HostBinding, Output, isDevMode, Optional, Inject, ContentChild, ElementRef, NgModule } from '@angular/core';
+import { InjectionToken, Injectable, forwardRef, Directive, Input, EventEmitter, Component, HostBinding, Output, isDevMode, Optional, Inject, ViewChild, ContentChild, ElementRef, NgModule } from '@angular/core';
 import { filter, take, auditTime } from 'rxjs/operators';
 import { Subscription, fromEvent, BehaviorSubject, Subject, combineLatest } from 'rxjs';
 import * as i1$1 from '@progress/kendo-angular-popup';
@@ -11,12 +11,12 @@ import { PopupModule } from '@progress/kendo-angular-popup';
 import { validatePackage } from '@progress/kendo-licensing';
 import * as i1 from '@progress/kendo-angular-l10n';
 import { ComponentMessages, LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
+import { focusableSelector, isDocumentAvailable, Keys, PreventableEvent, closest, hasObservers } from '@progress/kendo-angular-common';
 import { xIcon } from '@progress/kendo-svg-icons';
 import * as i2 from '@progress/kendo-angular-icons';
 import { IconsModule } from '@progress/kendo-angular-icons';
 import * as i2$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import { isDocumentAvailable, Keys, PreventableEvent, closest, hasObservers } from '@progress/kendo-angular-common';
 
 /**
  * @hidden
@@ -25,8 +25,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-tooltip',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1674850457,
-    version: '11.1.0-develop.8',
+    publishDate: 1675155152,
+    version: '11.1.0-develop.9',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -81,8 +81,23 @@ let idx = 0;
 /**
  * @hidden
  */
-const getId = (prefix) => {
-    return `${prefix}-${++idx}`;
+let popoverTitleIdx = 0;
+/**
+ * @hidden
+ */
+let popoverBodyIdx = 0;
+/**
+ * @hidden
+ */
+const getId = (prefix, idSource) => {
+    switch (idSource) {
+        case 'popoverTitle':
+            return `${prefix}-${++popoverTitleIdx}`;
+        case 'popoverBody':
+            return `${prefix}-${++popoverBodyIdx}`;
+        default:
+            return `${prefix}-${++idx}`;
+    }
 };
 /**
  * @hidden
@@ -192,6 +207,21 @@ function getCenterOffset(item, dir, size) {
 function containsItem(collection, item) {
     return collection.indexOf(item) !== -1;
 }
+/**
+ * @hidden
+ */
+function getAllFocusableChildren(parent) {
+    return parent.querySelectorAll(focusableSelector);
+}
+/**
+ * @hidden
+ */
+function getFirstAndLastFocusable(parent) {
+    const all = getAllFocusableChildren(parent);
+    const firstFocusable = all.length > 0 ? all[0] : parent;
+    const lastFocusable = all.length > 0 ? all[all.length - 1] : parent;
+    return [firstFocusable, lastFocusable];
+}
 
 /**
  * @hidden
@@ -968,6 +998,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                     type: Optional
                 }] }]; } });
 
+/* eslint-disable @typescript-eslint/no-explicit-any */
 /**
  * Represents the [Kendo UI Popover component for Angular]({% slug overview_popover %}).
  * Used to display additional information that is related to a target element.
@@ -982,8 +1013,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
  * ```
  */
 class PopoverComponent {
-    constructor(localization) {
+    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 %})
          *
@@ -1034,6 +1068,10 @@ class PopoverComponent {
          * 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
          */
@@ -1042,11 +1080,12 @@ class PopoverComponent {
          * @hidden
          */
         this._height = 'auto';
-        this._offset = 6;
-        this.subs = new Subscription();
         /**
          * @hidden
          */
+        this.popoverId = '';
+        this._offset = 6;
+        this.subs = new Subscription();
         this._templateData = () => null;
         validatePackage(packageMetadata);
     }
@@ -1110,9 +1149,21 @@ class PopoverComponent {
         return !this.visible;
     }
     ngOnInit() {
-        this.subs.add(this.localization.changes.subscribe(({ rtl }) => {
-            this.direction = rtl ? 'rtl' : 'ltr';
-        }));
+        this.popoverId = getId('k-popover');
+        this.subs.add(this.localization.changes.subscribe(({ rtl }) => { this.direction = rtl ? 'rtl' : 'ltr'; }));
+        this.subs.add(this.renderer.listen(this.element.nativeElement, 'keydown', event => this.onKeyDown(event)));
+    }
+    ngAfterViewInit() {
+        this.zone.onStable.pipe(take(1)).subscribe(() => {
+            if (this.visible) {
+                const wrapper = this.popoverWrapper.nativeElement;
+                const focusablePopoverChildren = getAllFocusableChildren(wrapper);
+                if (focusablePopoverChildren.length > 0) {
+                    focusablePopoverChildren[0].focus();
+                }
+                this.setAriaAttributes(wrapper, focusablePopoverChildren);
+            }
+        });
     }
     ngOnDestroy() {
         this.subs.unsubscribe();
@@ -1129,16 +1180,65 @@ class PopoverComponent {
             default: return { 'k-callout-s': true };
         }
     }
+    /**
+     * @hidden
+     */
+    onKeyDown(event) {
+        const keyCode = event.keyCode;
+        const target = event.target;
+        if (keyCode === Keys.Tab) {
+            this.keepFocusWithinComponent(target, event);
+        }
+        if (keyCode === Keys.Escape) {
+            this.closeOnKeyDown.emit();
+        }
+    }
+    keepFocusWithinComponent(target, event) {
+        const wrapper = this.popoverWrapper.nativeElement;
+        const [firstFocusable, lastFocusable] = getFirstAndLastFocusable(wrapper);
+        const tabAfterLastFocusable = !event.shiftKey && target === lastFocusable;
+        const shiftTabAfterFirstFocusable = event.shiftKey && target === firstFocusable;
+        if (tabAfterLastFocusable) {
+            event.preventDefault();
+            firstFocusable.focus();
+        }
+        if (shiftTabAfterFirstFocusable) {
+            event.preventDefault();
+            lastFocusable.focus();
+        }
+    }
+    setAriaAttributes(wrapper, focusablePopoverChildren) {
+        if (this.titleTemplate) {
+            const titleRef = this.titleTemplateWrapper.nativeElement;
+            const focusableHeaderChildren = getAllFocusableChildren(titleRef).length > 0;
+            if (focusableHeaderChildren) {
+                const headerId = getId('k-popover-header', 'popoverTitle');
+                this.renderer.setAttribute(titleRef, 'id', headerId);
+                this.renderer.setAttribute(wrapper, 'aria-labelledby', headerId);
+            }
+        }
+        if (this.bodyTemplate) {
+            const bodyRef = this.bodyTemplateWrapper.nativeElement;
+            const focusableBodyChildren = getAllFocusableChildren(bodyRef).length > 0;
+            if (focusableBodyChildren) {
+                const bodyId = getId('k-popover-body', 'popoverBody');
+                this.renderer.setAttribute(bodyRef, 'id', bodyId);
+                this.renderer.setAttribute(wrapper, 'aria-describedby', bodyId);
+            }
+        }
+        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: "13.3.11", ngImport: i0, type: PopoverComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-PopoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: PopoverComponent, selector: "kendo-popover", inputs: { position: "position", offset: "offset", width: "width", height: "height", title: "title", subtitle: "subtitle", body: "body", callout: "callout", animation: "animation", templateData: "templateData" }, outputs: { show: "show", shown: "shown", hide: "hide", hidden: "hidden" }, host: { properties: { "attr.dir": "this.direction", "class.k-hidden": "this.isHidden", "attr.aria-hidden": "this.hasAttributeHidden", "style.width": "this._width", "style.height": "this._height" } }, providers: [
+PopoverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", 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: "12.0.0", version: "13.3.11", type: PopoverComponent, selector: "kendo-popover", inputs: { position: "position", offset: "offset", width: "width", height: "height", title: "title", subtitle: "subtitle", body: "body", callout: "callout", animation: "animation", templateData: "templateData" }, outputs: { show: "show", shown: "shown", hide: "hide", hidden: "hidden", 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 }], ngImport: i0, template: `
-    <div *ngIf="visible" role="tooltip" class="k-popover" [ngStyle]="{'width': width, 'height': height}">
+    ], 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" [ngStyle]="{'width': width, 'height': height}">
         <div class="k-popover-callout" [ngClass]="getCalloutPosition()" *ngIf="callout"></div>
 
         <div class="k-popover-inner" *ngIf="callout; else noCallout">
@@ -1146,7 +1246,7 @@ PopoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versi
         </div>
 
         <ng-template #noCallout>
-            <div *ngIf="titleTemplate || title" class="k-popover-header">
+            <div #titleTemplateWrapper *ngIf="titleTemplate || title" class="k-popover-header">
                 <ng-template *ngIf="titleTemplate"
                     [ngTemplateOutlet]="titleTemplate?.templateRef"
                     [ngTemplateOutletContext]="{ $implicit: anchor, data: contextData }">
@@ -1156,7 +1256,7 @@ PopoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versi
                 </ng-container>
             </div>
 
-            <div *ngIf="bodyTemplate || body" class="k-popover-body">
+            <div #bodyTemplateWrapper *ngIf="bodyTemplate || body" class="k-popover-body">
                 <ng-template *ngIf="bodyTemplate"
                     [ngTemplateOutlet]="bodyTemplate?.templateRef"
                     [ngTemplateOutletContext]="{ $implicit: anchor, data: contextData }">
@@ -1187,7 +1287,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                         }
                     ],
                     template: `
-    <div *ngIf="visible" role="tooltip" class="k-popover" [ngStyle]="{'width': width, 'height': height}">
+    <div #popoverWrapper *ngIf="visible" class="k-popover" [ngStyle]="{'width': width, 'height': height}">
         <div class="k-popover-callout" [ngClass]="getCalloutPosition()" *ngIf="callout"></div>
 
         <div class="k-popover-inner" *ngIf="callout; else noCallout">
@@ -1195,7 +1295,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
         </div>
 
         <ng-template #noCallout>
-            <div *ngIf="titleTemplate || title" class="k-popover-header">
+            <div #titleTemplateWrapper *ngIf="titleTemplate || title" class="k-popover-header">
                 <ng-template *ngIf="titleTemplate"
                     [ngTemplateOutlet]="titleTemplate?.templateRef"
                     [ngTemplateOutletContext]="{ $implicit: anchor, data: contextData }">
@@ -1205,7 +1305,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 </ng-container>
             </div>
 
-            <div *ngIf="bodyTemplate || body" class="k-popover-body">
+            <div #bodyTemplateWrapper *ngIf="bodyTemplate || body" class="k-popover-body">
                 <ng-template *ngIf="bodyTemplate"
                     [ngTemplateOutlet]="bodyTemplate?.templateRef"
                     [ngTemplateOutletContext]="{ $implicit: anchor, data: contextData }">
@@ -1225,7 +1325,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
     </div>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; }, propDecorators: { position: [{
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { position: [{
                 type: Input
             }], offset: [{
                 type: Input
@@ -1262,6 +1362,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Output
             }], hidden: [{
                 type: Output
+            }], closeOnKeyDown: [{
+                type: Output
+            }], popoverWrapper: [{
+                type: ViewChild,
+                args: ['popoverWrapper']
+            }], titleTemplateWrapper: [{
+                type: ViewChild,
+                args: ['titleTemplateWrapper']
+            }], bodyTemplateWrapper: [{
+                type: ViewChild,
+                args: ['bodyTemplateWrapper']
             }], titleTemplate: [{
                 type: ContentChild,
                 args: [PopoverTitleTemplateDirective, { static: false }]
@@ -1340,6 +1451,7 @@ class PopoverHiddenEvent {
     }
 }
 
+/* eslint-disable @typescript-eslint/no-unused-vars */
 const validShowOptions = ['hover', 'click', 'none', 'focus'];
 /**
  * @hidden
@@ -1349,6 +1461,10 @@ class PopoverDirectivesBase {
         this.ngZone = ngZone;
         this.popupService = popupService;
         this.renderer = renderer;
+        /**
+         * @hidden
+         */
+        this.anchor = null;
         this.subs = new Subscription();
         this._showOn = 'click';
     }
@@ -1398,14 +1514,14 @@ class PopoverDirectivesBase {
         this.ngZone.runOutsideAngular(() => {
             switch (this.showOn) {
                 case 'hover':
-                    this.subscribeToEvents([{
+                    this.subscribeToShowEvents([{
                             name: 'mouseenter', handler: this.mouseenterHandler
                         }, {
                             name: 'mouseleave', handler: this.mouseleaveHandler
                         }]);
                     break;
                 case 'focus':
-                    this.subscribeToEvents([{
+                    this.subscribeToShowEvents([{
                             name: 'focus', handler: this.focusHandler
                         }, {
                             name: 'blur', handler: this.blurHandler
@@ -1421,6 +1537,7 @@ class PopoverDirectivesBase {
     }
     ngOnDestroy() {
         this.closePopup();
+        this.subs.unsubscribe();
         if (this.disposeHoverOverListener) {
             this.disposeHoverOverListener();
         }
@@ -1436,9 +1553,6 @@ class PopoverDirectivesBase {
         if (this._hideSub) {
             this._hideSub.unsubscribe();
         }
-        if (this.subs) {
-            this.subs.unsubscribe();
-        }
         if (this._popupOpenSub) {
             this._popupOpenSub.unsubscribe();
         }
@@ -1457,6 +1571,9 @@ class PopoverDirectivesBase {
      */
     closePopup() {
         if (this.popupRef) {
+            if (this.anchor) {
+                this.renderer.removeAttribute(this.anchor, 'aria-describedby');
+            }
             this.popupRef.close();
             this.popupRef = null;
             if (this.disposePopupHoverOutListener) {
@@ -1474,15 +1591,15 @@ class PopoverDirectivesBase {
      * @hidden
      */
     openPopup(anchor) {
-        const _anchor = anchor instanceof ElementRef ? anchor.nativeElement : anchor;
-        const popoverComp = this.popover instanceof PopoverComponent ? this.popover : this.popover(_anchor);
+        this.anchor = anchor instanceof ElementRef ? anchor.nativeElement : anchor;
+        const popoverComp = this.popover instanceof PopoverComponent ? this.popover : this.popover(this.anchor);
         const alignSettings = align(popoverComp.position, popoverComp.offset);
         const anchorAlign = alignSettings.anchorAlign;
         const popupAlign = alignSettings.popupAlign;
         const popupMargin = alignSettings.popupMargin;
         const _animation = popoverComp.animation;
         this.popupRef = this.popupService.open({
-            anchor: { nativeElement: _anchor },
+            anchor: { nativeElement: this.anchor },
             animate: _animation,
             content: PopoverComponent,
             popupAlign,
@@ -1491,9 +1608,18 @@ class PopoverDirectivesBase {
             popupClass: 'k-popup-transparent',
             collision: { horizontal: 'fit', vertical: 'fit' }
         });
-        this.applySettings(this.popupRef.content, popoverComp, anchor);
+        const popupInstance = this.popupRef.content.instance;
+        if (anchor) {
+            this.subs.add(this.renderer.listen(this.anchor, 'keydown', event => this.onKeyDown(event)));
+            this.renderer.setAttribute(this.anchor, 'aria-describedby', popupInstance.popoverId);
+        }
+        this.subs.add(popupInstance.closeOnKeyDown.subscribe(() => {
+            this.anchor.focus();
+            this.hide();
+        }));
+        this.applySettings(this.popupRef.content, popoverComp);
         this.monitorPopup();
-        this.initializeCompletionEvents(popoverComp, _anchor);
+        this.initializeCompletionEvents(popoverComp, this.anchor);
     }
     /**
      * @hidden
@@ -1532,11 +1658,10 @@ class PopoverDirectivesBase {
             });
         }
     }
-    applySettings(contentComponent, popover, anchor) {
+    applySettings(contentComponent, popover) {
         const content = contentComponent.instance;
-        const _anchor = anchor instanceof ElementRef ? anchor.nativeElement : anchor;
         content.visible = true;
-        content.anchor = _anchor;
+        content.anchor = this.anchor;
         content.position = popover.position;
         content.offset = popover.offset;
         content.width = popover.width;
@@ -1545,7 +1670,7 @@ class PopoverDirectivesBase {
         content.body = popover.body;
         content.callout = popover.callout;
         content.animation = popover.animation;
-        content.contextData = popover.templateData(_anchor);
+        content.contextData = popover.templateData(this.anchor);
         content.titleTemplate = popover.titleTemplate;
         content.bodyTemplate = popover.bodyTemplate;
         content.actionsTemplate = popover.actionsTemplate;
@@ -1569,6 +1694,12 @@ class PopoverDirectivesBase {
         }
         return eventArgs;
     }
+    onKeyDown(event) {
+        const keyCode = event.keyCode;
+        if (keyCode === Keys.Escape) {
+            this.hide();
+        }
+    }
     initializeCompletionEvents(popoverComp, _anchor) {
         if (this.shouldEmitCompletionEvents('shown', popoverComp)) {
             this.popupRef.popupOpen.subscribe(() => {
@@ -1671,6 +1802,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             type: Injectable
         }], ctorParameters: function () { return [{ type: i0.NgZone }]; } });
 
+/* eslint-disable @typescript-eslint/no-explicit-any */
 /**
  * Represents the [`kendoPopoverContainer`]({% slug configuration_popover %}#toc-containerdirective) directive.
  * It is used to filter and target multiple elements, which should display a popover on interaction.
@@ -1779,7 +1911,7 @@ class PopoverContainerDirective extends PopoverDirectivesBase {
             this.clickHandler(filterElement, e);
         });
     }
-    subscribeToEvents(arr) {
+    subscribeToShowEvents(arr) {
         const filteredElements = Array.from(document.querySelectorAll(this.filter));
         filteredElements.forEach((el) => {
             this.subs.add(this.renderer.listen(el, arr[0].name, () => {
@@ -1836,6 +1968,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }] } });
 
+/* eslint-disable @typescript-eslint/no-explicit-any */
 /**
  * Represents the [`kendoPopoverAnchor`]({% slug configuration_popover %}#toc-anchordirective) directive.
  * It is used to target an element, which should display a popover on interaction.
@@ -1918,12 +2051,13 @@ class PopoverAnchorDirective extends PopoverDirectivesBase {
             this.show();
         }
     }
-    subscribeToEvents(arr) {
-        this.subs.add(this.renderer.listen(this.hostEl.nativeElement, arr[0].name, () => {
-            this.popoverService.emitAnchorState(true, this.hostEl.nativeElement);
+    subscribeToShowEvents(arr) {
+        const hostEl = this.hostEl.nativeElement;
+        this.subs.add(this.renderer.listen(hostEl, arr[0].name, () => {
+            this.popoverService.emitAnchorState(true, hostEl);
             arr[0].handler();
         }));
-        this.subs.add(this.renderer.listen(this.hostEl.nativeElement, arr[1].name, (e) => {
+        this.subs.add(this.renderer.listen(hostEl, arr[1].name, (e) => {
             this.popoverService.emitAnchorState(false, null);
             arr[1].handler({ domEvent: e });
         }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-tooltip",
-  "version": "11.1.0-develop.8",
+  "version": "11.1.0-develop.9",
   "description": "Kendo UI Tooltip for Angular - A highly customizable and easily themeable tooltip from the creators developers trust for professional Angular components.",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -25,15 +25,15 @@
     "@angular/core": "13 - 15",
     "@angular/platform-browser": "13 - 15",
     "@progress/kendo-licensing": "^1.0.2",
-    "@progress/kendo-angular-common": "11.1.0-develop.8",
-    "@progress/kendo-angular-l10n": "11.1.0-develop.8",
-    "@progress/kendo-angular-popup": "11.1.0-develop.8",
-    "@progress/kendo-angular-icons": "11.1.0-develop.8",
+    "@progress/kendo-angular-common": "11.1.0-develop.9",
+    "@progress/kendo-angular-l10n": "11.1.0-develop.9",
+    "@progress/kendo-angular-popup": "11.1.0-develop.9",
+    "@progress/kendo-angular-icons": "11.1.0-develop.9",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "11.1.0-develop.8"
+    "@progress/kendo-angular-schematics": "11.1.0-develop.9"
   },
   "schematics": "./schematics/collection.json",
   "module": "fesm2015/progress-kendo-angular-tooltip.mjs",

package/popover/anchor.directive.d.ts

@@ -31,7 +31,7 @@ export declare class PopoverAnchorDirective extends PopoverDirectivesBase {
      * Toggles the visibility of the Popover. [See example]({% slug programmaticcontrol_popover %})
      */
     toggle(): void;
-    protected subscribeToEvents(arr: any[]): void;
+    protected subscribeToShowEvents(arr: any[]): void;
     protected subscribeClick(): void;
     protected mouseenterHandler: () => void;
     protected mouseleaveHandler: () => void;

package/popover/container.directive.d.ts

@@ -51,7 +51,7 @@ export declare class PopoverContainerDirective extends PopoverDirectivesBase {
     protected mouseleaveHandler: (args: any) => void;
     protected focusHandler: (anchor: Element) => void;
     protected blurHandler: (args: any) => void;
-    protected subscribeToEvents(arr: any[]): void;
+    protected subscribeToShowEvents(arr: any[]): void;
     private clickHandler;
     private controlVisibility;
     static ɵfac: i0.ɵɵFactoryDeclaration<PopoverContainerDirective, never>;

package/popover/directives-base.d.ts

@@ -38,6 +38,10 @@ export declare abstract class PopoverDirectivesBase {
      */
     set showOn(value: PopoverShowOption);
     get showOn(): PopoverShowOption;
+    /**
+     * @hidden
+     */
+    private anchor;
     popupRef: PopupRef;
     protected disposeHoverOverListener: () => void;
     protected disposeHoverOutListener: () => void;
@@ -76,8 +80,8 @@ export declare abstract class PopoverDirectivesBase {
      * @hidden
      */
     protected monitorPopup(): void;
-    protected applySettings(contentComponent: ComponentRef<PopoverComponent>, popover: PopoverComponent, anchor: Element | ElementRef): void;
-    protected abstract subscribeToEvents(args?: any): void;
+    protected applySettings(contentComponent: ComponentRef<PopoverComponent>, popover: PopoverComponent): void;
+    protected abstract subscribeToShowEvents(args?: any): void;
     protected abstract subscribeClick(): void;
     protected abstract mouseenterHandler(args?: any): void;
     protected abstract mouseleaveHandler(args?: any): void;
@@ -87,6 +91,7 @@ export declare abstract class PopoverDirectivesBase {
      * @hidden
      */
     private initializeEvents;
+    private onKeyDown;
     private initializeCompletionEvents;
     private shouldEmitEvent;
     private shouldEmitCompletionEvents;

package/popover/popover.component.d.ts

@@ -2,7 +2,7 @@
 * Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { EventEmitter } from '@angular/core';
+import { AfterViewInit, ElementRef, EventEmitter, NgZone, OnDestroy, OnInit, Renderer2 } from '@angular/core';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { Position } from '../models/position.type';
 import { PopoverDataFn } from '../models/functions.model';
@@ -25,8 +25,11 @@ import * as i0 from "@angular/core";
  * </kendo-popover>
  * ```
  */
-export declare class PopoverComponent {
+export declare class PopoverComponent implements OnInit, AfterViewInit, OnDestroy {
     private localization;
+    private renderer;
+    private element;
+    private zone;
     /**
      * @hidden
      */
@@ -137,6 +140,22 @@ export declare class PopoverComponent {
      * Fires after the Popover has been hidden and the animation has ended. [See example]({% slug events_popover %})
      */
     hidden: EventEmitter<any>;
+    /**
+     * @hidden
+     */
+    closeOnKeyDown: EventEmitter<any>;
+    /**
+     * @hidden
+     */
+    popoverWrapper: ElementRef;
+    /**
+     * @hidden
+     */
+    titleTemplateWrapper: ElementRef;
+    /**
+     * @hidden
+     */
+    bodyTemplateWrapper: ElementRef;
     /**
      * @hidden
      */
@@ -161,10 +180,15 @@ export declare class PopoverComponent {
      * @hidden
      */
     _height: string;
+    /**
+     * @hidden
+     */
+    popoverId: string;
     private _offset;
     private subs;
-    constructor(localization: LocalizationService);
+    constructor(localization: LocalizationService, renderer: Renderer2, element: ElementRef, zone: NgZone);
     ngOnInit(): void;
+    ngAfterViewInit(): void;
     ngOnDestroy(): void;
     /**
      * @hidden
@@ -173,7 +197,10 @@ export declare class PopoverComponent {
     /**
      * @hidden
      */
+    onKeyDown(event: any): void;
     private _templateData;
+    private keepFocusWithinComponent;
+    private setAriaAttributes;
     static ɵfac: i0.ɵɵFactoryDeclaration<PopoverComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PopoverComponent, "kendo-popover", never, { "position": "position"; "offset": "offset"; "width": "width"; "height": "height"; "title": "title"; "subtitle": "subtitle"; "body": "body"; "callout": "callout"; "animation": "animation"; "templateData": "templateData"; }, { "show": "show"; "shown": "shown"; "hide": "hide"; "hidden": "hidden"; }, ["titleTemplate", "bodyTemplate", "actionsTemplate"], never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PopoverComponent, "kendo-popover", never, { "position": "position"; "offset": "offset"; "width": "width"; "height": "height"; "title": "title"; "subtitle": "subtitle"; "body": "body"; "callout": "callout"; "animation": "animation"; "templateData": "templateData"; }, { "show": "show"; "shown": "shown"; "hide": "hide"; "hidden": "hidden"; "closeOnKeyDown": "closeOnKeyDown"; }, ["titleTemplate", "bodyTemplate", "actionsTemplate"], never>;
 }

package/utils.d.ts

@@ -7,7 +7,7 @@ import { Collision } from '@progress/kendo-angular-popup';
 /**
  * @hidden
  */
-export declare const getId: (prefix: string) => string;
+export declare const getId: (prefix: string, idSource?: string) => string;
 /**
  * @hidden
  */
@@ -36,3 +36,11 @@ export declare function getCenterOffset(item: Element, dir: string, size: string
  * @hidden
  */
 export declare function containsItem(collection: any, item: any): boolean;
+/**
+ * @hidden
+ */
+export declare function getAllFocusableChildren(parent: any): Array<any>;
+/**
+ * @hidden
+ */
+export declare function getFirstAndLastFocusable(parent: any): Array<HTMLElement>;