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

package/fesm2015/progress-kendo-angular-tooltip.mjs

@@ -3,18 +3,18 @@
 * 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 { 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';
 import * as i1$1 from '@progress/kendo-angular-popup';
 import { PopupModule } from '@progress/kendo-angular-popup';
 
@@ -25,8 +25,8 @@ 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/'
 };
 
@@ -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
@@ -976,6 +1006,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                     }] }];
     } });
 
+/* 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.
@@ -990,8 +1021,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 %})
          *
@@ -1042,6 +1076,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
          */
@@ -1050,11 +1088,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);
     }
@@ -1118,9 +1157,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();
@@ -1137,16 +1188,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">
@@ -1154,7 +1254,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 }">
@@ -1164,7 +1264,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 }">
@@ -1195,7 +1295,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">
@@ -1203,7 +1303,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 }">
@@ -1213,7 +1313,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 }">
@@ -1233,7 +1333,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
@@ -1270,6 +1370,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 }]
@@ -1348,6 +1459,7 @@ class PopoverHiddenEvent {
     }
 }
 
+/* eslint-disable @typescript-eslint/no-unused-vars */
 const validShowOptions = ['hover', 'click', 'none', 'focus'];
 /**
  * @hidden
@@ -1357,6 +1469,10 @@ class PopoverDirectivesBase {
         this.ngZone = ngZone;
         this.popupService = popupService;
         this.renderer = renderer;
+        /**
+         * @hidden
+         */
+        this.anchor = null;
         this.subs = new Subscription();
         this._showOn = 'click';
     }
@@ -1406,14 +1522,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
@@ -1429,6 +1545,7 @@ class PopoverDirectivesBase {
     }
     ngOnDestroy() {
         this.closePopup();
+        this.subs.unsubscribe();
         if (this.disposeHoverOverListener) {
             this.disposeHoverOverListener();
         }
@@ -1444,9 +1561,6 @@ class PopoverDirectivesBase {
         if (this._hideSub) {
             this._hideSub.unsubscribe();
         }
-        if (this.subs) {
-            this.subs.unsubscribe();
-        }
         if (this._popupOpenSub) {
             this._popupOpenSub.unsubscribe();
         }
@@ -1465,6 +1579,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) {
@@ -1482,15 +1599,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,
@@ -1499,9 +1616,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
@@ -1540,11 +1666,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;
@@ -1553,7 +1678,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;
@@ -1577,6 +1702,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(() => {
@@ -1679,6 +1810,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.
@@ -1787,7 +1919,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, () => {
@@ -1844,6 +1976,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.
@@ -1926,12 +2059,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 });
         }));