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

package/esm2020/package-metadata.mjs

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

package/esm2020/popover/anchor.directive.mjs

@@ -2,6 +2,7 @@
 * Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { Directive, ElementRef, NgZone, Renderer2 } from "@angular/core";
 import { closest } from "@progress/kendo-angular-common";
 import { PopupService } from "@progress/kendo-angular-popup";
@@ -93,12 +94,13 @@ export 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/esm2020/popover/container.directive.mjs

@@ -2,6 +2,7 @@
 * Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { Directive, ElementRef, Input, NgZone, Renderer2 } from "@angular/core";
 import { closest } from "@progress/kendo-angular-common";
 import { PopupService } from "@progress/kendo-angular-popup";
@@ -120,7 +121,7 @@ export 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, () => {

package/esm2020/popover/directives-base.mjs

@@ -2,9 +2,11 @@
 * Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { Directive, ElementRef, Input, isDevMode, NgZone, Renderer2 } from "@angular/core";
 import { PopupService } from "@progress/kendo-angular-popup";
-import { closest, hasObservers, isDocumentAvailable } from "@progress/kendo-angular-common";
+import { closest, hasObservers, isDocumentAvailable, Keys } from "@progress/kendo-angular-common";
 import { ERRORS } from '../constants';
 import { PopoverHideEvent, PopoverShowEvent, PopoverShownEvent, PopoverHiddenEvent } from "../models/events";
 import { align, containsItem } from "../utils";
@@ -21,6 +23,10 @@ export class PopoverDirectivesBase {
         this.ngZone = ngZone;
         this.popupService = popupService;
         this.renderer = renderer;
+        /**
+         * @hidden
+         */
+        this.anchor = null;
         this.subs = new Subscription();
         this._showOn = 'click';
     }
@@ -70,14 +76,14 @@ export 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
@@ -93,6 +99,7 @@ export class PopoverDirectivesBase {
     }
     ngOnDestroy() {
         this.closePopup();
+        this.subs.unsubscribe();
         if (this.disposeHoverOverListener) {
             this.disposeHoverOverListener();
         }
@@ -108,9 +115,6 @@ export class PopoverDirectivesBase {
         if (this._hideSub) {
             this._hideSub.unsubscribe();
         }
-        if (this.subs) {
-            this.subs.unsubscribe();
-        }
         if (this._popupOpenSub) {
             this._popupOpenSub.unsubscribe();
         }
@@ -129,6 +133,9 @@ export 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) {
@@ -146,15 +153,15 @@ export 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,
@@ -163,9 +170,18 @@ export 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
@@ -204,11 +220,10 @@ export 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;
@@ -217,7 +232,7 @@ export 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;
@@ -241,6 +256,12 @@ export 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(() => {

package/esm2020/popover/popover.component.mjs

@@ -2,7 +2,8 @@
 * Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Component, ContentChild, EventEmitter, HostBinding, Input, isDevMode, Output } from '@angular/core';
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { Component, ContentChild, ElementRef, EventEmitter, HostBinding, Input, isDevMode, NgZone, Output, Renderer2, ViewChild } from '@angular/core';
 import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { Subscription } from 'rxjs';
 import { validatePackage } from '@progress/kendo-licensing';
@@ -11,6 +12,9 @@ import { ERRORS } from '../constants';
 import { PopoverTitleTemplateDirective } from './template-directives/title-template.directive';
 import { PopoverBodyTemplateDirective } from './template-directives/body-template.directive';
 import { PopoverActionsTemplateDirective } from './template-directives/actions-template.directive';
+import { Keys } from '@progress/kendo-angular-common';
+import { take } from 'rxjs/operators';
+import { getAllFocusableChildren, getFirstAndLastFocusable, getId } from '../utils';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
 import * as i2 from "@angular/common";
@@ -28,8 +32,11 @@ import * as i2 from "@angular/common";
  * ```
  */
 export 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 %})
          *
@@ -80,6 +87,10 @@ export 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
          */
@@ -88,11 +99,12 @@ export 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);
     }
@@ -156,9 +168,21 @@ export 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();
@@ -175,16 +199,65 @@ export 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">
@@ -192,7 +265,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 }">
@@ -202,7 +275,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 }">
@@ -233,7 +306,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">
@@ -241,7 +314,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 }">
@@ -251,7 +324,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 }">
@@ -271,7 +344,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
@@ -308,6 +381,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 }]

package/esm2020/utils.mjs

@@ -2,6 +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 { focusableSelector } from '@progress/kendo-angular-common';
 /**
  * @hidden
  */
@@ -9,8 +10,23 @@ let idx = 0;
 /**
  * @hidden
  */
-export const getId = (prefix) => {
-    return `${prefix}-${++idx}`;
+let popoverTitleIdx = 0;
+/**
+ * @hidden
+ */
+let popoverBodyIdx = 0;
+/**
+ * @hidden
+ */
+export const getId = (prefix, idSource) => {
+    switch (idSource) {
+        case 'popoverTitle':
+            return `${prefix}-${++popoverTitleIdx}`;
+        case 'popoverBody':
+            return `${prefix}-${++popoverBodyIdx}`;
+        default:
+            return `${prefix}-${++idx}`;
+    }
 };
 /**
  * @hidden
@@ -120,3 +136,18 @@ export function getCenterOffset(item, dir, size) {
 export function containsItem(collection, item) {
     return collection.indexOf(item) !== -1;
 }
+/**
+ * @hidden
+ */
+export function getAllFocusableChildren(parent) {
+    return parent.querySelectorAll(focusableSelector);
+}
+/**
+ * @hidden
+ */
+export 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];
+}