@progress/kendo-angular-tooltip 24.0.0-develop.2 → 24.0.0-develop.21

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

@@ -302,8 +302,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1776936160,
-    version: '24.0.0-develop.2',
+    publishDate: 1778161032,
+    version: '24.0.0-develop.21',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -531,7 +531,7 @@ class PopoverComponent {
      * @hidden
      */
     get hasAttributeHidden() {
-        return !this.visible;
+        return this.visible ? null : true;
     }
     /**
      * Fires before the Popover is shown. The event is preventable. If canceled, the Popover will not display. [See example](https://www.telerik.com/kendo-angular-ui/components/tooltips/popover/events).
@@ -663,19 +663,17 @@ class PopoverComponent {
         }
     }
     setAriaAttributes(wrapper, focusablePopoverChildren) {
-        if (this.titleTemplate) {
-            const titleRef = this.titleTemplateWrapper.nativeElement;
-            const focusableHeaderChildren = getAllFocusableChildren(titleRef).length > 0;
-            if (focusableHeaderChildren) {
+        if (this.titleTemplate || this.title) {
+            const titleRef = this.titleTemplateWrapper?.nativeElement;
+            if (titleRef) {
                 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) {
+        if (this.bodyTemplate || this.body) {
+            const bodyRef = this.bodyTemplateWrapper?.nativeElement;
+            if (bodyRef) {
                 const bodyId = getId('k-popover-body', 'popoverBody');
                 this.renderer.setAttribute(bodyRef, 'id', bodyId);
                 this.renderer.setAttribute(wrapper, 'aria-describedby', bodyId);
@@ -1815,13 +1813,12 @@ class TooltipContentComponent {
         </div>
         
         @if (closable) {
-          <div [attr.aria-hidden]="true" class="k-tooltip-button" (click)="onCloseClick($event)">
-            <a href="#" [attr.title]="closeButtonTitle" class="k-icon">
-              <kendo-icon-wrapper
-                name="x"
-                [svgIcon]="xIcon">
-              </kendo-icon-wrapper>
-            </a>
+          <div class="k-tooltip-button" role="button" [attr.aria-label]="closeButtonTitle" tabindex="0"
+            (click)="onCloseClick($event)" (keydown.enter)="onCloseClick($event)" (keydown.space)="onCloseClick($event)">
+            <kendo-icon-wrapper
+              name="x"
+              [svgIcon]="xIcon">
+            </kendo-icon-wrapper>
           </div>
         }
         
@@ -1865,13 +1862,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
         </div>
         
         @if (closable) {
-          <div [attr.aria-hidden]="true" class="k-tooltip-button" (click)="onCloseClick($event)">
-            <a href="#" [attr.title]="closeButtonTitle" class="k-icon">
-              <kendo-icon-wrapper
-                name="x"
-                [svgIcon]="xIcon">
-              </kendo-icon-wrapper>
-            </a>
+          <div class="k-tooltip-button" role="button" [attr.aria-label]="closeButtonTitle" tabindex="0"
+            (click)="onCloseClick($event)" (keydown.enter)="onCloseClick($event)" (keydown.space)="onCloseClick($event)">
+            <kendo-icon-wrapper
+              name="x"
+              [svgIcon]="xIcon">
+            </kendo-icon-wrapper>
           </div>
         }
         
@@ -2071,6 +2067,11 @@ class TooltipDirective {
      * Sets a CSS class for the Tooltip.
      */
     tooltipClass;
+    /**
+     * Specifies the theme color of the Tooltip.
+     * The theme color applies the corresponding `k-tooltip-{themeColor}` class to the Tooltip element.
+     */
+    themeColor;
     /**
      * @hidden
      * Specifies a CSS class that will be added to the kendo-tooltip element.
@@ -2302,6 +2303,9 @@ class TooltipDirective {
         if (this.tooltipClass) {
             this.renderer.addClass(this.popupRef.popupElement, this.tooltipClass);
         }
+        if (this.themeColor) {
+            this.renderer.addClass(this.popupRef.content.location.nativeElement, `k-tooltip-${this.themeColor}`);
+        }
         if (this.tooltipContentClass) {
             this.renderer.addClass(this.popupRef.content.instance['content'].nativeElement, this.tooltipContentClass);
         }
@@ -2421,7 +2425,7 @@ class TooltipDirective {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TooltipDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i1$1.PopupService }, { token: TooltipSettings, optional: true }, { token: TOOLTIP_SETTINGS, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.20", type: TooltipDirective, isStandalone: true, selector: "[kendoTooltip]", inputs: { filter: "filter", position: "position", titleTemplate: "titleTemplate", showOn: "showOn", showAfter: "showAfter", callout: "callout", closable: "closable", offset: "offset", tooltipWidth: "tooltipWidth", tooltipHeight: "tooltipHeight", tooltipClass: "tooltipClass", tooltipContentClass: "tooltipContentClass", collision: "collision", closeTitle: "closeTitle", tooltipTemplate: "tooltipTemplate" }, exportAs: ["kendoTooltip"], usesOnChanges: true, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.20", type: TooltipDirective, isStandalone: true, selector: "[kendoTooltip]", inputs: { filter: "filter", position: "position", titleTemplate: "titleTemplate", showOn: "showOn", showAfter: "showAfter", callout: "callout", closable: "closable", offset: "offset", tooltipWidth: "tooltipWidth", tooltipHeight: "tooltipHeight", tooltipClass: "tooltipClass", themeColor: "themeColor", tooltipContentClass: "tooltipContentClass", collision: "collision", closeTitle: "closeTitle", tooltipTemplate: "tooltipTemplate" }, exportAs: ["kendoTooltip"], usesOnChanges: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TooltipDirective, decorators: [{
             type: Directive,
@@ -2459,6 +2463,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 type: Input
             }], tooltipClass: [{
                 type: Input
+            }], themeColor: [{
+                type: Input
             }], tooltipContentClass: [{
                 type: Input
             }], collision: [{

package/index.d.ts

@@ -16,6 +16,7 @@ export { PopoverActionsTemplateDirective } from './popover/template-directives/a
 export { ShowOption } from './models/show.option.type';
 export { PopoverShowOption } from './models/popover-show-option.type';
 export { Position } from './models/position.type';
+export { TooltipThemeColor } from './models/theme-color.type';
 export { PopoverFn, PopoverDataFn } from './models/functions.model';
 export { PopoverAnimation } from './models/animation.model';
 export { PopoverShowEvent, PopoverShownEvent, PopoverHideEvent, PopoverHiddenEvent } from './models/events';

package/models/theme-color.type.d.ts

@@ -0,0 +1,16 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2026 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+/**
+ * Specifies the predefined theme color of the Tooltip.
+ *
+ * The available values are:
+ * - `base` (default)—Applies coloring based on the `base` theme color.
+ * - `inverse`—Applies coloring based on the `inverse` theme color.
+ * - `info`—Applies coloring based on the `info` theme color.
+ * - `success`—Applies coloring based on the `success` theme color.
+ * - `warning`—Applies coloring based on the `warning` theme color.
+ * - `error`—Applies coloring based on the `error` theme color.
+ */
+export type TooltipThemeColor = 'base' | 'inverse' | 'info' | 'success' | 'warning' | 'error';

package/package-metadata.mjs

@@ -7,7 +7,7 @@ export const packageMetadata = {
   "productCodes": [
     "KENDOUIANGULAR"
   ],
-  "publishDate": 1776936160,
-  "version": "24.0.0-develop.2",
+  "publishDate": 1778161032,
+  "version": "24.0.0-develop.21",
   "licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/"
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-tooltip",
-  "version": "24.0.0-develop.2",
+  "version": "24.0.0-develop.21",
   "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",
@@ -21,7 +21,7 @@
     "package": {
       "productName": "Kendo UI for Angular",
       "productCode": "KENDOUIANGULAR",
-      "publishDate": 1776936160,
+      "publishDate": 1778161032,
       "licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/"
     }
   },
@@ -31,15 +31,15 @@
     "@angular/core": "19 - 21",
     "@angular/platform-browser": "19 - 21",
     "@progress/kendo-licensing": "^1.11.0",
-    "@progress/kendo-angular-common": "24.0.0-develop.2",
-    "@progress/kendo-angular-l10n": "24.0.0-develop.2",
-    "@progress/kendo-angular-popup": "24.0.0-develop.2",
-    "@progress/kendo-angular-icons": "24.0.0-develop.2",
+    "@progress/kendo-angular-common": "24.0.0-develop.21",
+    "@progress/kendo-angular-l10n": "24.0.0-develop.21",
+    "@progress/kendo-angular-popup": "24.0.0-develop.21",
+    "@progress/kendo-angular-icons": "24.0.0-develop.21",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "24.0.0-develop.2"
+    "@progress/kendo-angular-schematics": "24.0.0-develop.21"
   },
   "schematics": "./schematics/collection.json",
   "module": "fesm2022/progress-kendo-angular-tooltip.mjs",

package/popover/popover.component.d.ts

@@ -112,7 +112,7 @@ export declare class PopoverComponent implements OnInit, AfterViewInit, OnDestro
     /**
      * @hidden
      */
-    get hasAttributeHidden(): boolean;
+    get hasAttributeHidden(): boolean | null;
     /**
      * Fires before the Popover is shown. The event is preventable. If canceled, the Popover will not display. [See example](https://www.telerik.com/kendo-angular-ui/components/tooltips/popover/events).
      */

package/tooltip/tooltip.directive.d.ts

@@ -7,6 +7,7 @@ import { PopupService, PopupRef, Collision } from '@progress/kendo-angular-popup
 import { TooltipSettings } from './tooltip.settings';
 import { Position } from '../models/position.type';
 import { ShowOption } from '../models/show.option.type';
+import { TooltipThemeColor } from '../models/theme-color.type';
 import * as i0 from "@angular/core";
 /**
  * Represents the [Kendo UI Tooltip directive for Angular](https://www.telerik.com/kendo-angular-ui/components/tooltips/tooltip).
@@ -84,6 +85,11 @@ export declare class TooltipDirective implements OnDestroy, OnChanges, AfterView
      * Sets a CSS class for the Tooltip.
      */
     tooltipClass: string;
+    /**
+     * Specifies the theme color of the Tooltip.
+     * The theme color applies the corresponding `k-tooltip-{themeColor}` class to the Tooltip element.
+     */
+    themeColor: TooltipThemeColor;
     /**
      * @hidden
      * Specifies a CSS class that will be added to the kendo-tooltip element.
@@ -150,5 +156,5 @@ export declare class TooltipDirective implements OnDestroy, OnChanges, AfterView
     private onMouseOut;
     private verifyProperties;
     static ɵfac: i0.ɵɵFactoryDeclaration<TooltipDirective, [null, null, null, null, { optional: true; }, { optional: true; }]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<TooltipDirective, "[kendoTooltip]", ["kendoTooltip"], { "filter": { "alias": "filter"; "required": false; }; "position": { "alias": "position"; "required": false; }; "titleTemplate": { "alias": "titleTemplate"; "required": false; }; "showOn": { "alias": "showOn"; "required": false; }; "showAfter": { "alias": "showAfter"; "required": false; }; "callout": { "alias": "callout"; "required": false; }; "closable": { "alias": "closable"; "required": false; }; "offset": { "alias": "offset"; "required": false; }; "tooltipWidth": { "alias": "tooltipWidth"; "required": false; }; "tooltipHeight": { "alias": "tooltipHeight"; "required": false; }; "tooltipClass": { "alias": "tooltipClass"; "required": false; }; "tooltipContentClass": { "alias": "tooltipContentClass"; "required": false; }; "collision": { "alias": "collision"; "required": false; }; "closeTitle": { "alias": "closeTitle"; "required": false; }; "tooltipTemplate": { "alias": "tooltipTemplate"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TooltipDirective, "[kendoTooltip]", ["kendoTooltip"], { "filter": { "alias": "filter"; "required": false; }; "position": { "alias": "position"; "required": false; }; "titleTemplate": { "alias": "titleTemplate"; "required": false; }; "showOn": { "alias": "showOn"; "required": false; }; "showAfter": { "alias": "showAfter"; "required": false; }; "callout": { "alias": "callout"; "required": false; }; "closable": { "alias": "closable"; "required": false; }; "offset": { "alias": "offset"; "required": false; }; "tooltipWidth": { "alias": "tooltipWidth"; "required": false; }; "tooltipHeight": { "alias": "tooltipHeight"; "required": false; }; "tooltipClass": { "alias": "tooltipClass"; "required": false; }; "themeColor": { "alias": "themeColor"; "required": false; }; "tooltipContentClass": { "alias": "tooltipContentClass"; "required": false; }; "collision": { "alias": "collision"; "required": false; }; "closeTitle": { "alias": "closeTitle"; "required": false; }; "tooltipTemplate": { "alias": "tooltipTemplate"; "required": false; }; }, {}, never, never, true, never>;
 }