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

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

@@ -3,13 +3,13 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as i0 from '@angular/core';
-import { forwardRef, Input, Directive, Optional, isDevMode, EventEmitter, HostBinding, ContentChild, ViewChild, Output, Component, ElementRef, Injectable, InjectionToken, Inject, NgModule } from '@angular/core';
+import { forwardRef, Input, Directive, Optional, isDevMode, EventEmitter, signal, afterNextRender, HostBinding, ContentChild, ViewChild, Output, ChangeDetectionStrategy, Component, ElementRef, ChangeDetectorRef, Injectable, InjectionToken, Inject, NgModule } from '@angular/core';
 import * as i1 from '@progress/kendo-angular-l10n';
 import { ComponentMessages, LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
-import { PreventableEvent, focusableSelector, Keys, isDocumentAvailable, closest, hasObservers, ResizeBatchService } from '@progress/kendo-angular-common';
+import { PreventableEvent, focusableSelector, Keys, isDocumentAvailable, closest, hasObservers, provideComponentName, ResizeBatchService } from '@progress/kendo-angular-common';
 import * as i1$1 from '@progress/kendo-angular-popup';
 import { PopupService } from '@progress/kendo-angular-popup';
-import { take, auditTime, filter } from 'rxjs/operators';
+import { auditTime, take, filter } from 'rxjs/operators';
 import { Subscription, BehaviorSubject, Subject, combineLatest, fromEvent } from 'rxjs';
 import { validatePackage } from '@progress/kendo-licensing';
 import { NgStyle, NgClass, NgTemplateOutlet } from '@angular/common';
@@ -29,15 +29,15 @@ class LocalizedMessagesDirective extends ComponentMessages {
         super();
         this.service = service;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: LocalizedMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: LocalizedMessagesDirective, isStandalone: true, selector: "[kendoTooltipLocalizedMessages]", inputs: { closeTitle: "closeTitle" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: LocalizedMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.26", type: LocalizedMessagesDirective, isStandalone: true, selector: "[kendoTooltipLocalizedMessages]", inputs: { closeTitle: "closeTitle" }, providers: [
             {
                 provide: ComponentMessages,
                 useExisting: forwardRef(() => LocalizedMessagesDirective)
             }
         ], usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: LocalizedMessagesDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: LocalizedMessagesDirective, decorators: [{
             type: Directive,
             args: [{
                     providers: [
@@ -302,8 +302,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1783688607,
-    version: '25.0.0-develop.2',
+    publishDate: 1785852506,
+    version: '25.0.0-develop.21',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -327,10 +327,10 @@ class PopoverTitleTemplateDirective {
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: PopoverTitleTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: PopoverTitleTemplateDirective, isStandalone: true, selector: "[kendoPopoverTitleTemplate]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: PopoverTitleTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.26", type: PopoverTitleTemplateDirective, isStandalone: true, selector: "[kendoPopoverTitleTemplate]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: PopoverTitleTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: PopoverTitleTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoPopoverTitleTemplate]',
@@ -360,10 +360,10 @@ class PopoverBodyTemplateDirective {
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: PopoverBodyTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: PopoverBodyTemplateDirective, isStandalone: true, selector: "[kendoPopoverBodyTemplate]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: PopoverBodyTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.26", type: PopoverBodyTemplateDirective, isStandalone: true, selector: "[kendoPopoverBodyTemplate]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: PopoverBodyTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: PopoverBodyTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoPopoverBodyTemplate]',
@@ -393,10 +393,10 @@ class PopoverActionsTemplateDirective {
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: PopoverActionsTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: PopoverActionsTemplateDirective, isStandalone: true, selector: "[kendoPopoverActionsTemplate]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: PopoverActionsTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.26", type: PopoverActionsTemplateDirective, isStandalone: true, selector: "[kendoPopoverActionsTemplate]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: PopoverActionsTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: PopoverActionsTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoPopoverActionsTemplate]',
@@ -423,7 +423,6 @@ class PopoverComponent {
     localization;
     renderer;
     element;
-    zone;
     /**
      * @hidden
      */
@@ -433,20 +432,25 @@ class PopoverComponent {
      *
      * @default 'right'
      */
-    position = 'right';
+    set position(value) {
+        this._position.set(value);
+    }
+    get position() {
+        return this._position();
+    }
     /**
      * Specifies the distance from the Popover to its anchor element in pixels.
      *
      * @default 6
      */
     set offset(value) {
-        this._offset = value;
+        this._offset.set(value);
     }
     get offset() {
         const calloutBuffer = 14;
         return this.callout
-            ? calloutBuffer + this._offset
-            : this._offset;
+            ? calloutBuffer + this._offset()
+            : this._offset();
     }
     /**
      * Determines the width of the Popover. Numeric values are treated as pixels.
@@ -454,10 +458,10 @@ class PopoverComponent {
      * @default 'auto'
      */
     set width(value) {
-        this._width = typeof value === 'number' ? `${value}px` : value;
+        this._widthValue.set(typeof value === 'number' ? `${value}px` : value);
     }
     get width() {
-        return this._width;
+        return this._widthValue();
     }
     /**
      * Determines the height of the Popover. Numeric values are treated as pixels.
@@ -465,10 +469,10 @@ class PopoverComponent {
      * @default 'auto'
      */
     set height(value) {
-        this._height = typeof value === 'number' ? `${value}px` : value;
+        this._heightValue.set(typeof value === 'number' ? `${value}px` : value);
     }
     get height() {
-        return this._height;
+        return this._heightValue();
     }
     /**
      * @hidden
@@ -477,24 +481,44 @@ class PopoverComponent {
     /**
      * Specifies the main header text of the Popover. If a `titleTemplate` is provided, it takes precedence.
      */
-    title;
+    set title(value) {
+        this._title.set(value);
+    }
+    get title() {
+        return this._title();
+    }
     /**
      * @hidden
      * Specifies the secondary header text of the Popover.
      *
      * If a `titleTemplate` is provided it would take precedence over the subtitle.
      */
-    subtitle;
+    set subtitle(value) {
+        this._subtitle.set(value);
+    }
+    get subtitle() {
+        return this._subtitle();
+    }
     /**
      * Represents the text rendered in the Popover body section. If a `bodyTemplate` is provided, it takes precedence.
      */
-    body;
+    set body(value) {
+        this._body.set(value);
+    }
+    get body() {
+        return this._body();
+    }
     /**
      * Determines whether a callout is rendered along the Popover. [See example](https://www.telerik.com/kendo-angular-ui/components/tooltips/popover/callout).
      *
      * @default true
      */
-    callout = true;
+    set callout(value) {
+        this._callout.set(value);
+    }
+    get callout() {
+        return this._callout();
+    }
     /**
      * Enables and configures the Popover animation. [See example](https://www.telerik.com/kendo-angular-ui/components/tooltips/popover/animations).
      *
@@ -502,7 +526,12 @@ class PopoverComponent {
      *
      * @default false
      */
-    animation = false;
+    set animation(value) {
+        this._animation.set(value);
+    }
+    get animation() {
+        return this._animation();
+    }
     /**
      * Defines a callback function that returns custom data for the Popover templates.
      * The function exposes the `anchor` element as an argument and returns an object that can be used in the templates. [See example](https://www.telerik.com/kendo-angular-ui/components/tooltips/popover/templates#passing-data-to-templates).
@@ -511,16 +540,21 @@ class PopoverComponent {
         if (isDevMode && typeof fn !== 'function') {
             throw new Error(`${ERRORS.templateData} ${JSON.stringify(fn)}.`);
         }
-        this._templateData = fn;
+        this._templateData.set(fn);
     }
     get templateData() {
-        return this._templateData;
+        return this._templateData();
     }
     /**
      * @hidden
      * Determines the visibility of the Popover.
      */
-    visible = false;
+    get visible() {
+        return this._visible();
+    }
+    set visible(value) {
+        this._visible.set(value);
+    }
     /**
      * @hidden
      */
@@ -584,32 +618,38 @@ class PopoverComponent {
     /**
      * @hidden
      */
-    _width = 'auto';
+    get _width() {
+        return this._widthValue();
+    }
     /**
      * @hidden
      */
-    _height = 'auto';
+    get _height() {
+        return this._heightValue();
+    }
     /**
      * @hidden
      */
     popoverId = '';
-    _offset = 6;
+    _position = signal('right', ...(ngDevMode ? [{ debugName: "_position" }] : []));
+    _offset = signal(6, ...(ngDevMode ? [{ debugName: "_offset" }] : []));
+    _widthValue = signal('auto', ...(ngDevMode ? [{ debugName: "_widthValue" }] : []));
+    _heightValue = signal('auto', ...(ngDevMode ? [{ debugName: "_heightValue" }] : []));
+    _title = signal(undefined, ...(ngDevMode ? [{ debugName: "_title" }] : []));
+    _subtitle = signal(undefined, ...(ngDevMode ? [{ debugName: "_subtitle" }] : []));
+    _body = signal(undefined, ...(ngDevMode ? [{ debugName: "_body" }] : []));
+    _callout = signal(true, ...(ngDevMode ? [{ debugName: "_callout" }] : []));
+    _animation = signal(false, ...(ngDevMode ? [{ debugName: "_animation" }] : []));
+    _templateData = signal(() => null, ...(ngDevMode ? [{ debugName: "_templateData" }] : []));
+    _visible = signal(false, ...(ngDevMode ? [{ debugName: "_visible" }] : []));
     subs = new Subscription();
-    constructor(localization, renderer, element, zone) {
+    constructor(localization, renderer, element) {
         this.localization = localization;
         this.renderer = renderer;
         this.element = element;
-        this.zone = zone;
         validatePackage(packageMetadata);
-    }
-    ngOnInit() {
-        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) {
+        afterNextRender(() => {
+            if (this.visible && this.popoverWrapper) {
                 const wrapper = this.popoverWrapper.nativeElement;
                 const focusablePopoverChildren = getAllFocusableChildren(wrapper);
                 if (focusablePopoverChildren.length > 0) {
@@ -619,6 +659,11 @@ class PopoverComponent {
             }
         });
     }
+    ngOnInit() {
+        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)));
+    }
     ngOnDestroy() {
         this.subs.unsubscribe();
     }
@@ -647,7 +692,6 @@ class PopoverComponent {
             this.closeOnKeyDown.emit();
         }
     }
-    _templateData = () => null;
     keepFocusWithinComponent(target, event) {
         const wrapper = this.popoverWrapper.nativeElement;
         const [firstFocusable, lastFocusable] = getFirstAndLastFocusable(wrapper);
@@ -682,8 +726,8 @@ class PopoverComponent {
         this.renderer.setAttribute(wrapper, 'id', this.popoverId);
         this.renderer.setAttribute(wrapper, 'role', focusablePopoverChildren.length > 0 ? 'dialog' : 'tooltip');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: PopoverComponent, deps: [{ token: i1.LocalizationService }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: PopoverComponent, isStandalone: true, 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: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: PopoverComponent, deps: [{ token: i1.LocalizationService }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.26", type: PopoverComponent, isStandalone: true, 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,
@@ -777,9 +821,9 @@ class PopoverComponent {
         </ng-template>
       </div>
     }
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: PopoverComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: PopoverComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-popover',
@@ -880,9 +924,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
     }
     `,
                     standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [NgStyle, NgClass, NgTemplateOutlet]
                 }]
-        }], ctorParameters: () => [{ type: i1.LocalizationService }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { position: [{
+        }], ctorParameters: () => [{ type: i1.LocalizationService }, { type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { position: [{
                 type: Input
             }], offset: [{
                 type: Input
@@ -961,7 +1006,7 @@ class PopoverDirectivesBase {
      */
     set popover(value) {
         if (value instanceof PopoverComponent || typeof value === `function`) {
-            this._popover = value;
+            this._popover.set(value);
         }
         else {
             if (isDevMode) {
@@ -970,7 +1015,7 @@ class PopoverDirectivesBase {
         }
     }
     get popover() {
-        return this._popover;
+        return this._popover();
     }
     /**
      * Specifies the mouse action that triggers the popover to show. [See example](https://www.telerik.com/kendo-angular-ui/components/tooltips/popover/programmatic-control).
@@ -979,10 +1024,10 @@ class PopoverDirectivesBase {
         if (isDevMode && !containsItem(validShowOptions, value)) {
             throw new Error(ERRORS.showOn);
         }
-        this._showOn = value;
+        this._showOn.set(value);
     }
     get showOn() {
-        return this._showOn;
+        return this._showOn();
     }
     /**
      * @hidden
@@ -999,8 +1044,8 @@ class PopoverDirectivesBase {
     _popoverService;
     _hideSub;
     _focusInsideSub;
-    _popover;
-    _showOn = 'click';
+    _popover = signal(null, ...(ngDevMode ? [{ debugName: "_popover" }] : []));
+    _showOn = signal('click', ...(ngDevMode ? [{ debugName: "_showOn" }] : []));
     _popupOpenSub;
     _popupCloseSub;
     _popupSubs;
@@ -1091,7 +1136,14 @@ class PopoverDirectivesBase {
         });
         const popupInstance = this.popupRef.content.instance;
         // Avoid adding the default k-popup class which leads to visual and rendering discrepancies
-        this.popupRef && (this.popupRef.popup.instance.renderDefaultClass = false);
+        if (this.popupRef) {
+            this.popupRef.popup.instance.renderDefaultClass = false;
+            // Use the popup component's own CDRef (not ComponentRef.changeDetectorRef which wraps
+            // the root/host lView). PopupComponent uses OnPush, so detectChanges() on the root lView
+            // skips the component's template. The component's injector returns a CDRef that wraps
+            // the component's template lView directly, ensuring the renderDefaultClass binding updates.
+            this.popupRef.popup.injector.get(ChangeDetectorRef).detectChanges();
+        }
         this._popupSubs = new Subscription();
         if (anchor) {
             this._popupSubs.add(this.renderer.listen(this.anchor, 'keydown', event => this.onKeyDown(event)));
@@ -1238,10 +1290,10 @@ class PopoverDirectivesBase {
         }
         return false;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: PopoverDirectivesBase, deps: [{ token: i0.NgZone }, { token: i1$1.PopupService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: PopoverDirectivesBase, isStandalone: true, inputs: { popover: "popover", showOn: "showOn" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: PopoverDirectivesBase, deps: [{ token: i0.NgZone }, { token: i1$1.PopupService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.26", type: PopoverDirectivesBase, isStandalone: true, inputs: { popover: "popover", showOn: "showOn" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: PopoverDirectivesBase, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: PopoverDirectivesBase, decorators: [{
             type: Directive,
             args: [{}]
         }], ctorParameters: () => [{ type: i0.NgZone }, { type: i1$1.PopupService }, { type: i0.Renderer2 }], propDecorators: { popover: [{
@@ -1307,10 +1359,10 @@ class PopoverService {
             this._hidePopover.next([isPopoverHovered, isAnchorHovered, this._isOrigin, this.currentAnchor]);
         }));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: PopoverService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: PopoverService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: PopoverService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: PopoverService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: PopoverService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: PopoverService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i0.NgZone }] });
 
@@ -1459,10 +1511,10 @@ class PopoverAnchorDirective extends PopoverDirectivesBase {
             this.hide();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: PopoverAnchorDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i1$1.PopupService }, { token: i0.Renderer2 }, { token: PopoverService }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: PopoverAnchorDirective, isStandalone: true, selector: "[kendoPopoverAnchor]", providers: [PopoverService], exportAs: ["kendoPopoverAnchor"], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: PopoverAnchorDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i1$1.PopupService }, { token: i0.Renderer2 }, { token: PopoverService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.26", type: PopoverAnchorDirective, isStandalone: true, selector: "[kendoPopoverAnchor]", providers: [PopoverService], exportAs: ["kendoPopoverAnchor"], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: PopoverAnchorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: PopoverAnchorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoPopoverAnchor]',
@@ -1633,10 +1685,10 @@ class PopoverContainerDirective extends PopoverDirectivesBase {
             this.hide();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: PopoverContainerDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i1$1.PopupService }, { token: i0.Renderer2 }, { token: PopoverService }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: PopoverContainerDirective, isStandalone: true, selector: "[kendoPopoverContainer]", inputs: { filter: "filter" }, providers: [PopoverService], exportAs: ["kendoPopoverContainer"], usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: PopoverContainerDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i1$1.PopupService }, { token: i0.Renderer2 }, { token: PopoverService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.26", type: PopoverContainerDirective, isStandalone: true, selector: "[kendoPopoverContainer]", inputs: { filter: "filter" }, providers: [PopoverService], exportAs: ["kendoPopoverContainer"], usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: PopoverContainerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: PopoverContainerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoPopoverContainer]',
@@ -1654,6 +1706,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
 class TooltipContentComponent {
     content;
     localizationService;
+    cdr;
     /**
      * @hidden
      */
@@ -1676,24 +1729,67 @@ class TooltipContentComponent {
     get cssPosition() {
         return 'relative';
     }
-    tooltipWidth = null;
-    tooltipHeight = null;
-    titleTemplate;
-    anchor;
-    closable;
-    templateRef;
-    templateString;
+    set tooltipWidth(value) {
+        this._tooltipWidth.set(value);
+    }
+    get tooltipWidth() {
+        return this._tooltipWidth();
+    }
+    set tooltipHeight(value) {
+        this._tooltipHeight.set(value);
+    }
+    get tooltipHeight() {
+        return this._tooltipHeight();
+    }
+    set titleTemplate(value) {
+        this._titleTemplate.set(value);
+    }
+    get titleTemplate() {
+        return this._titleTemplate();
+    }
+    set anchor(value) {
+        this._anchor.set(value);
+    }
+    get anchor() {
+        return this._anchor();
+    }
+    set closable(value) {
+        this._closable.set(value);
+    }
+    get closable() {
+        return this._closable();
+    }
+    set templateRef(value) {
+        this._templateRef.set(value);
+    }
+    get templateRef() {
+        return this._templateRef();
+    }
+    set templateString(value) {
+        this._templateString.set(value);
+    }
+    get templateString() {
+        return this._templateString();
+    }
     closeTitle;
     callout = true;
     position;
+    _tooltipWidth = signal(null, ...(ngDevMode ? [{ debugName: "_tooltipWidth" }] : []));
+    _tooltipHeight = signal(null, ...(ngDevMode ? [{ debugName: "_tooltipHeight" }] : []));
+    _titleTemplate = signal(null, ...(ngDevMode ? [{ debugName: "_titleTemplate" }] : []));
+    _templateString = signal(null, ...(ngDevMode ? [{ debugName: "_templateString" }] : []));
+    _templateRef = signal(null, ...(ngDevMode ? [{ debugName: "_templateRef" }] : []));
+    _anchor = signal(null, ...(ngDevMode ? [{ debugName: "_anchor" }] : []));
+    _closable = signal(false, ...(ngDevMode ? [{ debugName: "_closable" }] : []));
     /**
      * @hidden
      */
     tooltipId;
     dynamicRTLSubscription;
-    constructor(content, localizationService) {
+    constructor(content, localizationService, cdr) {
         this.content = content;
         this.localizationService = localizationService;
+        this.cdr = cdr;
         this.direction = localizationService.rtl ? 'rtl' : 'ltr';
     }
     ngOnInit() {
@@ -1742,6 +1838,7 @@ class TooltipContentComponent {
         Object.keys(calloutStyles).forEach((style) => {
             callout.style[style] = calloutStyles[style];
         });
+        this.cdr.markForCheck();
     }
     calloutStyles = (position, calloutSize, isFlip) => {
         const styles = {};
@@ -1775,13 +1872,14 @@ class TooltipContentComponent {
         styles.transform = isVertical ? `rotateX(${flipDeg})` : `rotateY(${flipDeg})`;
         return styles;
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: TooltipContentComponent, deps: [{ token: i0.ElementRef }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: TooltipContentComponent, isStandalone: true, selector: "kendo-tooltip", inputs: { tooltipWidth: "tooltipWidth", tooltipHeight: "tooltipHeight", titleTemplate: "titleTemplate", anchor: "anchor", closable: "closable", templateRef: "templateRef", templateString: "templateString" }, outputs: { close: "close" }, host: { properties: { "attr.dir": "this.direction", "class": "this.cssClasses", "attr.role": "this.hostRole", "attr.id": "this.hostId", "class.k-tooltip-closable": "this.className", "style.position": "this.cssPosition", "style.width.px": "this.tooltipWidth", "style.height.px": "this.tooltipHeight" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: TooltipContentComponent, deps: [{ token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.26", type: TooltipContentComponent, isStandalone: true, selector: "kendo-tooltip", inputs: { tooltipWidth: "tooltipWidth", tooltipHeight: "tooltipHeight", titleTemplate: "titleTemplate", anchor: "anchor", closable: "closable", templateRef: "templateRef", templateString: "templateString" }, outputs: { close: "close" }, host: { properties: { "attr.dir": "this.direction", "class": "this.cssClasses", "attr.role": "this.hostRole", "attr.id": "this.hostId", "class.k-tooltip-closable": "this.className", "style.position": "this.cssPosition", "style.width.px": "this.tooltipWidth", "style.height.px": "this.tooltipHeight" } }, providers: [
             LocalizationService,
             {
                 provide: L10N_PREFIX,
                 useValue: 'kendo.tooltip'
-            }
+            },
+            provideComponentName('tooltip')
         ], ngImport: i0, template: `
         <ng-container kendoTooltipLocalizedMessages
           i18n-closeTitle="kendo.tooltip.closeTitle|The title of the close button"
@@ -1825,9 +1923,9 @@ class TooltipContentComponent {
         @if (callout) {
           <div class="k-callout" [ngClass]="calloutPositionClass()"></div>
         }
-        `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoTooltipLocalizedMessages]", inputs: ["closeTitle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+        `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoTooltipLocalizedMessages]", inputs: ["closeTitle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: TooltipContentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: TooltipContentComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-tooltip',
@@ -1880,12 +1978,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                         {
                             provide: L10N_PREFIX,
                             useValue: 'kendo.tooltip'
-                        }
+                        },
+                        provideComponentName('tooltip')
                     ],
                     standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [LocalizedMessagesDirective, NgTemplateOutlet, IconWrapperComponent, NgClass]
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.LocalizationService }], propDecorators: { direction: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }], propDecorators: { direction: [{
                 type: HostBinding,
                 args: ['attr.dir']
             }], close: [{
@@ -1984,10 +2084,10 @@ class TooltipSettings {
      * @hidden
      */
     constructor() { }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: TooltipSettings, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: TooltipSettings });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: TooltipSettings, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: TooltipSettings });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: TooltipSettings, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: TooltipSettings, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -2007,46 +2107,82 @@ class TooltipDirective {
     ngZone;
     renderer;
     popupService;
+    injector;
     /**
      * Specifies a selector for elements within a container that display a tooltip
      * ([see example](https://www.telerik.com/kendo-angular-ui/components/tooltips/tooltip/anchor-elements)). The possible values include any
      * DOM `selector`.
      * @default '[title]'
      */
-    filter = '[title]';
+    set filter(value) {
+        this._filter.set(value);
+    }
+    get filter() {
+        return this._filter();
+    }
     /**
      * Specifies the position of the Tooltip relative to the
      * anchor element ([see example](https://www.telerik.com/kendo-angular-ui/components/tooltips/tooltip/positioning)).
      *
      * @default 'top'
      */
-    position = 'top';
+    set position(value) {
+        this._position.set(value);
+    }
+    get position() {
+        return this._position();
+    }
     /**
      * Sets the template for the tooltip header title. [See example](https://www.telerik.com/kendo-angular-ui/components/tooltips/tooltip/anchor-elements).
      */
-    titleTemplate;
+    set titleTemplate(value) {
+        this._titleTemplate.set(value);
+    }
+    get titleTemplate() {
+        return this._titleTemplate();
+    }
     /**
      * Specifies the mouse action that triggers the Tooltip to show. [See example](https://www.telerik.com/kendo-angular-ui/components/tooltips/tooltip/opening).
      */
-    showOn;
+    set showOn(value) {
+        this._showOn.set(value);
+    }
+    get showOn() {
+        return this._showOn();
+    }
     /**
      * Specifies the delay in milliseconds before the Tooltip is shown.
      *
      * @default 100
      */
-    showAfter = 100;
+    set showAfter(value) {
+        this._showAfter.set(value);
+    }
+    get showAfter() {
+        return this._showAfter();
+    }
     /**
      * Determines if the Tooltip displays a callout arrow.
      *
      * @default true
      */
-    callout = true;
+    set callout(value) {
+        this._callout.set(value);
+    }
+    get callout() {
+        return this._callout();
+    }
     /**
      * Determines if the Tooltip displays a **Close** button. [See example](https://www.telerik.com/kendo-angular-ui/components/tooltips/tooltip/closable-tooltip).
      *
      * @default false
      */
-    closable = false;
+    set closable(value) {
+        this._closable.set(value);
+    }
+    get closable() {
+        return this._closable();
+    }
     /**
      * Specifies the offset in pixels between the Tooltip and the anchor.
      * If the `callout` property is set to `true`, the offset is rendered from the callout arrow.
@@ -2054,37 +2190,77 @@ class TooltipDirective {
      *
      * @default 6
      */
-    offset = 6;
+    set offset(value) {
+        this._offset.set(value);
+    }
+    get offset() {
+        return this._offset();
+    }
     /**
      * Sets the width of the Tooltip. [See example](https://www.telerik.com/kendo-angular-ui/components/tooltips/tooltip/anchor-elements).
      */
-    tooltipWidth;
+    set tooltipWidth(value) {
+        this._tooltipWidth.set(value);
+    }
+    get tooltipWidth() {
+        return this._tooltipWidth();
+    }
     /**
      * Sets the height of the Tooltip.
      */
-    tooltipHeight;
+    set tooltipHeight(value) {
+        this._tooltipHeight.set(value);
+    }
+    get tooltipHeight() {
+        return this._tooltipHeight();
+    }
     /**
      * Sets a CSS class for the Tooltip.
      */
-    tooltipClass;
+    set tooltipClass(value) {
+        this._tooltipClass.set(value);
+    }
+    get tooltipClass() {
+        return this._tooltipClass();
+    }
     /**
      * Specifies the theme color of the Tooltip.
      * The theme color applies the corresponding `k-tooltip-{tooltipThemeColor}` class to the Tooltip element.
      */
-    tooltipThemeColor;
+    set tooltipThemeColor(value) {
+        this._tooltipThemeColor.set(value);
+    }
+    get tooltipThemeColor() {
+        return this._tooltipThemeColor();
+    }
     /**
      * @hidden
      * Specifies a CSS class that will be added to the kendo-tooltip element.
      */
-    tooltipContentClass;
+    set tooltipContentClass(value) {
+        this._tooltipContentClass.set(value);
+    }
+    get tooltipContentClass() {
+        return this._tooltipContentClass();
+    }
     /**
      * Provides screen boundary detection when the Тooltip is shown.
      */
-    collision;
+    set collision(value) {
+        this._collision.set(value);
+    }
+    get collision() {
+        return this._collision();
+    }
     /**
      * Sets the title of the **Close** button.
      */
-    closeTitle;
+    set closeTitle(value) {
+        this._closeTitle.set(value);
+    }
+    get closeTitle() {
+        return this._closeTitle();
+    }
     /**
      * Sets a custom content template for the Tooltip.
      * The template is rendered inside the Tooltip content area. [See example](https://www.telerik.com/kendo-angular-ui/components/tooltips/tooltip/templates).
@@ -2096,7 +2272,12 @@ class TooltipDirective {
         return this.template;
     }
     popupRef;
-    template;
+    set template(value) {
+        this._tooltipTemplate.set(value);
+    }
+    get template() {
+        return this._tooltipTemplate();
+    }
     showTimeout;
     anchor = null;
     mouseOverSubscription;
@@ -2109,11 +2290,28 @@ class TooltipDirective {
     closeClickSubscription;
     validPositions = ['top', 'bottom', 'right', 'left'];
     validShowOptions = ['hover', 'click', 'none'];
-    constructor(tooltipWrapper, ngZone, renderer, popupService, settings, legacySettings) {
+    _filter = signal('[title]', ...(ngDevMode ? [{ debugName: "_filter" }] : []));
+    _position = signal('top', ...(ngDevMode ? [{ debugName: "_position" }] : []));
+    _titleTemplate = signal(null, ...(ngDevMode ? [{ debugName: "_titleTemplate" }] : []));
+    _showOn = signal(undefined, ...(ngDevMode ? [{ debugName: "_showOn" }] : []));
+    _showAfter = signal(100, ...(ngDevMode ? [{ debugName: "_showAfter" }] : []));
+    _callout = signal(true, ...(ngDevMode ? [{ debugName: "_callout" }] : []));
+    _closable = signal(false, ...(ngDevMode ? [{ debugName: "_closable" }] : []));
+    _offset = signal(6, ...(ngDevMode ? [{ debugName: "_offset" }] : []));
+    _tooltipWidth = signal(null, ...(ngDevMode ? [{ debugName: "_tooltipWidth" }] : []));
+    _tooltipHeight = signal(null, ...(ngDevMode ? [{ debugName: "_tooltipHeight" }] : []));
+    _closeTitle = signal(null, ...(ngDevMode ? [{ debugName: "_closeTitle" }] : []));
+    _tooltipTemplate = signal(null, ...(ngDevMode ? [{ debugName: "_tooltipTemplate" }] : []));
+    _tooltipClass = signal(null, ...(ngDevMode ? [{ debugName: "_tooltipClass" }] : []));
+    _tooltipThemeColor = signal(null, ...(ngDevMode ? [{ debugName: "_tooltipThemeColor" }] : []));
+    _tooltipContentClass = signal(null, ...(ngDevMode ? [{ debugName: "_tooltipContentClass" }] : []));
+    _collision = signal(null, ...(ngDevMode ? [{ debugName: "_collision" }] : []));
+    constructor(tooltipWrapper, ngZone, renderer, popupService, injector, settings, legacySettings) {
         this.tooltipWrapper = tooltipWrapper;
         this.ngZone = ngZone;
         this.renderer = renderer;
         this.popupService = popupService;
+        this.injector = injector;
         validatePackage(packageMetadata);
         Object.assign(this, settings, legacySettings);
         this.ngZone.runOutsideAngular(() => {
@@ -2162,12 +2360,12 @@ class TooltipDirective {
      */
     hide() {
         clearTimeout(this.showTimeout);
-        const anchor = this.anchor && this.anchor.nativeElement;
-        if (anchor && anchor.getAttribute('data-title')) {
-            if (!anchor.getAttribute('title') && anchor.hasAttribute('title')) {
-                anchor.setAttribute('title', anchor.getAttribute('data-title'));
+        const anchor = this.anchor?.nativeElement;
+        if (anchor?.getAttribute('data-title')) {
+            if (!anchor?.getAttribute('title') && anchor?.hasAttribute('title')) {
+                anchor?.setAttribute('title', anchor?.getAttribute('data-title'));
             }
-            anchor.setAttribute('data-title', '');
+            anchor?.setAttribute('data-title', '');
         }
         if (this.popupMouseOutSubscription) {
             this.popupMouseOutSubscription.unsubscribe();
@@ -2183,7 +2381,7 @@ class TooltipDirective {
      * @param show - Optional. Boolean. Specifies if the Tooltip is rendered.
      */
     toggle(anchor, show) {
-        const previousAnchor = this.anchor && this.anchor.nativeElement;
+        const previousAnchor = this.anchor?.nativeElement;
         if (anchor instanceof Element) {
             anchor = { nativeElement: anchor };
         }
@@ -2219,11 +2417,13 @@ class TooltipDirective {
         if (!this.popupRef) {
             return;
         }
-        if (this.anchor &&
-            !hasParent(this.anchor.nativeElement || this.anchor, this.tooltipWrapper.nativeElement)) {
-            this.anchor = null;
-            this.hide();
-        }
+        afterNextRender(() => {
+            if (this.anchor &&
+                !hasParent(this.anchor?.nativeElement || this.anchor, this.tooltipWrapper.nativeElement)) {
+                this.anchor = null;
+                this.hide();
+            }
+        }, { injector: this.injector });
     }
     ngOnDestroy() {
         this.hide();
@@ -2261,7 +2461,7 @@ class TooltipDirective {
             this.hide();
         });
         if (!this.template) {
-            content.templateString = this.anchor.nativeElement.getAttribute('data-title');
+            content.templateString = this.anchor?.nativeElement.getAttribute('data-title');
         }
         else {
             content.templateRef = this.template;
@@ -2311,7 +2511,7 @@ class TooltipDirective {
         }
         const popupInstance = this.popupRef.content.instance;
         if (anchorRef) {
-            this.renderer.setAttribute(anchorRef.nativeElement, 'aria-labelledby', popupInstance.tooltipId);
+            this.renderer.setAttribute(anchorRef.nativeElement, 'aria-describedby', popupInstance.tooltipId);
         }
         if (popupInstance.callout) {
             this.popupPositionChangeSubscription = this.popupRef.popupPositionChange
@@ -2331,7 +2531,7 @@ class TooltipDirective {
     closePopup() {
         if (this.popupRef) {
             if (this.anchor) {
-                this.renderer.removeAttribute(this.anchor.nativeElement, 'aria-labelledby');
+                this.renderer.removeAttribute(this.anchor?.nativeElement, 'aria-describedby');
             }
             this.popupRef.close();
             this.popupRef = null;
@@ -2374,14 +2574,14 @@ class TooltipDirective {
         const target = event.target;
         if (this.popupRef) {
             const tooltipId = this.popupRef.content.location.nativeElement.getAttribute('id');
-            const anchorLabelledBy = target.getAttribute('aria-labelledby');
-            if (keyCode === Keys.Escape && this.canCloseTooltip(target, tooltipId, anchorLabelledBy)) {
+            const anchorDescribedBy = target.getAttribute('aria-describedby');
+            if (keyCode === Keys.Escape && this.canCloseTooltip(target, tooltipId, anchorDescribedBy)) {
                 this.closePopup();
             }
         }
     }
-    canCloseTooltip(target, tooltipId, anchorLabelledBy) {
-        const isIdEqualsLabel = tooltipId === anchorLabelledBy;
+    canCloseTooltip(target, tooltipId, anchorDescribedBy) {
+        const isIdEqualsLabel = tooltipId === anchorDescribedBy;
         const filterElement = closestBySelector(target, this.filter);
         const isTargetFocused = target === document.activeElement;
         const isTargetInsideWrapper = this.tooltipWrapper.nativeElement.contains(target);
@@ -2405,7 +2605,7 @@ class TooltipDirective {
         }
         const popup = this.popupRef && this.popupRef.popupElement;
         const relatedTarget = e.relatedTarget;
-        if (relatedTarget && this.anchor && contains(this.anchor.nativeElement, relatedTarget)) {
+        if (relatedTarget && this.anchor && contains(this.anchor?.nativeElement, relatedTarget)) {
             return;
         }
         if (relatedTarget && contains(popup, relatedTarget)) {
@@ -2424,17 +2624,17 @@ class TooltipDirective {
             throw new Error(`Invalid value provided for showOn property.The available options are 'hover' or 'none'.`);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", 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: "20.3.25", 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", tooltipThemeColor: "tooltipThemeColor", tooltipContentClass: "tooltipContentClass", collision: "collision", closeTitle: "closeTitle", tooltipTemplate: "tooltipTemplate" }, exportAs: ["kendoTooltip"], usesOnChanges: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: TooltipDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i1$1.PopupService }, { token: i0.Injector }, { token: TooltipSettings, optional: true }, { token: TOOLTIP_SETTINGS, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.26", 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", tooltipThemeColor: "tooltipThemeColor", tooltipContentClass: "tooltipContentClass", collision: "collision", closeTitle: "closeTitle", tooltipTemplate: "tooltipTemplate" }, exportAs: ["kendoTooltip"], usesOnChanges: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: TooltipDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: TooltipDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoTooltip]',
                     exportAs: 'kendoTooltip',
                     standalone: true
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i1$1.PopupService }, { type: TooltipSettings, decorators: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i1$1.PopupService }, { type: i0.Injector }, { type: TooltipSettings, decorators: [{
                     type: Optional
                 }] }, { type: TooltipSettings, decorators: [{
                     type: Optional
@@ -2583,11 +2783,11 @@ const KENDO_TOOLTIPS = [
  * ```
  */
 class TooltipModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: TooltipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: TooltipModule, imports: [TooltipDirective, TooltipContentComponent, LocalizedMessagesDirective], exports: [TooltipDirective, TooltipContentComponent, LocalizedMessagesDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: TooltipModule, providers: [PopupService, ResizeBatchService, IconsService], imports: [TooltipContentComponent] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: TooltipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.26", ngImport: i0, type: TooltipModule, imports: [TooltipDirective, TooltipContentComponent, LocalizedMessagesDirective], exports: [TooltipDirective, TooltipContentComponent, LocalizedMessagesDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: TooltipModule, providers: [PopupService, ResizeBatchService, IconsService], imports: [TooltipContentComponent] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: TooltipModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: TooltipModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...KENDO_TOOLTIP],
@@ -2616,11 +2816,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
  * ```
  */
 class PopoverModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: PopoverModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: PopoverModule, imports: [PopoverComponent, PopoverActionsTemplateDirective, PopoverBodyTemplateDirective, PopoverTitleTemplateDirective, PopoverAnchorDirective, PopoverContainerDirective], exports: [PopoverComponent, PopoverActionsTemplateDirective, PopoverBodyTemplateDirective, PopoverTitleTemplateDirective, PopoverAnchorDirective, PopoverContainerDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: PopoverModule, providers: [PopupService, ResizeBatchService] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: PopoverModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.26", ngImport: i0, type: PopoverModule, imports: [PopoverComponent, PopoverActionsTemplateDirective, PopoverBodyTemplateDirective, PopoverTitleTemplateDirective, PopoverAnchorDirective, PopoverContainerDirective], exports: [PopoverComponent, PopoverActionsTemplateDirective, PopoverBodyTemplateDirective, PopoverTitleTemplateDirective, PopoverAnchorDirective, PopoverContainerDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: PopoverModule, providers: [PopupService, ResizeBatchService] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: PopoverModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: PopoverModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [...KENDO_POPOVER],
@@ -2649,11 +2849,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
  * ```
  */
 class TooltipsModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: TooltipsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: TooltipsModule, imports: [TooltipDirective, TooltipContentComponent, LocalizedMessagesDirective, PopoverComponent, PopoverActionsTemplateDirective, PopoverBodyTemplateDirective, PopoverTitleTemplateDirective, PopoverAnchorDirective, PopoverContainerDirective], exports: [TooltipDirective, TooltipContentComponent, LocalizedMessagesDirective, PopoverComponent, PopoverActionsTemplateDirective, PopoverBodyTemplateDirective, PopoverTitleTemplateDirective, PopoverAnchorDirective, PopoverContainerDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: TooltipsModule, providers: [PopupService, ResizeBatchService, IconsService], imports: [TooltipContentComponent] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: TooltipsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.26", ngImport: i0, type: TooltipsModule, imports: [TooltipDirective, TooltipContentComponent, LocalizedMessagesDirective, PopoverComponent, PopoverActionsTemplateDirective, PopoverBodyTemplateDirective, PopoverTitleTemplateDirective, PopoverAnchorDirective, PopoverContainerDirective], exports: [TooltipDirective, TooltipContentComponent, LocalizedMessagesDirective, PopoverComponent, PopoverActionsTemplateDirective, PopoverBodyTemplateDirective, PopoverTitleTemplateDirective, PopoverAnchorDirective, PopoverContainerDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: TooltipsModule, providers: [PopupService, ResizeBatchService, IconsService], imports: [TooltipContentComponent] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: TooltipsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: TooltipsModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...KENDO_TOOLTIPS],